Обсуждение шаблона:Цитата — различия между версиями
(Оригиналы цитат) |
Demetrius (обсуждение | вклад) (→Давайте показывать оригинал не по hover'у, а по щелчку: надо обернуть в addOnloadHook (или в $(function () { ... }), или document.addEventListener('DOMContentLoaded', function () {...}) +css) |
||
(не показаны 4 промежуточные версии 2 участников) | |||
Строка 2: | Строка 2: | ||
Я нашла способ удобно размещать оригинал цитаты в этом шаблоне. [http://wiki.rpground.ru/%D0%A2%D0%B5%D1%81%D1%82 Демонстрация]. Для этого требуется добавить в [[MediaWiki:Common.css]] [http://wiki.rpground.ru/index.php?title=MediaWiki%3ACommon.css&action=historysubmit&diff=3325&oldid=3058 такие строчки] и внести небольшую правку в разметку шаблона, это беру на себя. [[Участник:EvilCat|EvilCat]] 10:10, ноября 29, 2011 (UTC) | Я нашла способ удобно размещать оригинал цитаты в этом шаблоне. [http://wiki.rpground.ru/%D0%A2%D0%B5%D1%81%D1%82 Демонстрация]. Для этого требуется добавить в [[MediaWiki:Common.css]] [http://wiki.rpground.ru/index.php?title=MediaWiki%3ACommon.css&action=historysubmit&diff=3325&oldid=3058 такие строчки] и внести небольшую правку в разметку шаблона, это беру на себя. [[Участник:EvilCat|EvilCat]] 10:10, ноября 29, 2011 (UTC) | ||
+ | |||
+ | Спасибо. Ждём, когда обновится кэш Викии. [[Участник:EvilCat|EvilCat]] 18:32, ноября 29, 2011 (UTC) | ||
+ | |||
+ | == Давайте показывать оригинал не по hover'у, а по щелчку == | ||
+ | |||
+ | Показ оригинала по наведению мыши имеет существенные недостатки: | ||
+ | |||
+ | * Наведение недоступно на устройствах с сенсорным вводом. А это не только мобильные устройства (которые мы и так не поддерживаем), но и планшеты и некоторые ноутбуки. | ||
+ | * Наведение меняет размер страницы, сдвигаяя всё вокруг при перемещении мыши. Это сбивает с толку, т.к. перемещение мыши не воспринимается как действие, а тут при перемещении элементы сдвигаются. | ||
+ | |||
+ | Сделать показ по щелчку можно несложным JS-скриптом. Если надо, могу его написать. [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 12:55, 2 мая 2024 (MSK) | ||
+ | |||
+ | : Спасибо! Мне просто добавить это в [[MediaWiki:Common.js]]? Какие-то ещё изменения куда-нибудь нужны? [[Участник:EvilCat|EvilCat]] ([[Обсуждение участника:EvilCat|обсуждение]]) 14:41, 2 мая 2024 (MSK) | ||
+ | |||
+ | :: В [[MediaWiki:Common.js]] надо обернуть его в <code>addOnloadHook(function () { /* тут код */ });</code> (ну или дать ему название — я добавил пример внизу). Ну из из [[MediaWiki:Common.css]] тогда надо убрать блок <code>.original:hover .hidden_original { ... }</code>, иначе старое поведение останется. | ||
+ | === Примеры скриптов === | ||
+ | |||
+ | Вот пример скрипта для скрытия по hover'у (оба нужно выполнять после загрузки страницы, т.е. нужно запихнуть их либо в <code>$(function () { ... })</code>, либо в <code>document.addEventListener('DOMContentLoaded', function () { ... })</code>. Кроме того, оба кода конфликтуют с нашим теперешим CSS'ом, так что CSS по <code>:hover</code> надо убрать тогда. | ||
+ | |||
+ | <pre> | ||
+ | // на jQuery, ES5 | ||
+ | $('.show_original').click(function () { | ||
+ | var $button = $(this); | ||
+ | var $wrapper = $button.closest('.original'); | ||
+ | var $text = $wrapper.find('.hidden_original'); | ||
+ | if ($text.is(':hidden')) { | ||
+ | $text.show(); | ||
+ | $button.text('Скрыть оригинал'); | ||
+ | } else { | ||
+ | $text.hide(); | ||
+ | $button.text('Показать оригинал'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // без jQuery, современный JS (ES6) | ||
+ | Array.from(document.querySelectorAll('.show_original')).forEach(buttonElement => { | ||
+ | buttonElement.addEventListener('click', function () { | ||
+ | const buttonElement = this | ||
+ | const wrapperElement = buttonElement.closest('.original') | ||
+ | const textElement = wrapperElement.querySelector('.hidden_original'); | ||
+ | if (textElement.style.display === 'none') { | ||
+ | textElement.style.display = ''; | ||
+ | buttonElement.innerText = 'Скрыть оригинал'; | ||
+ | } else { | ||
+ | textElement.style.display = 'none'; | ||
+ | buttonElement.innerText = 'Показать оригинал'; | ||
+ | } | ||
+ | }) | ||
+ | }) | ||
+ | </pre> | ||
+ | |||
+ | [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 13:24, 2 мая 2024 (MSK) | ||
+ | |||
+ | |||
+ | ==== Пример скрипта, обёрнутого для MediaWiki:Common.js ==== | ||
+ | |||
+ | Можно добавить это в конец [[MediaWiki:Common.js]]: | ||
+ | |||
+ | <pre> | ||
+ | function addQuotationSourceHandling() { | ||
+ | $('.show_original').click(function () { | ||
+ | var $button = $(this); | ||
+ | var $wrapper = $button.closest('.original'); | ||
+ | var $text = $wrapper.find('.hidden_original'); | ||
+ | if ($text.is(':hidden')) { | ||
+ | $text.show(); | ||
+ | $button.text('Скрыть оригинал'); | ||
+ | } else { | ||
+ | $text.hide(); | ||
+ | $button.text('Показать оригинал'); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | addOnloadHook(addQuotationSourceHandling); | ||
+ | </pre> | ||
+ | |||
+ | Также надо убрать эти строчки из [[MediaWiki:Common.css]] (иначе старое поведение по наведению мыши останется): | ||
+ | <pre> | ||
+ | .original:hover .hidden_original | ||
+ | { | ||
+ | display:block; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 15:01, 2 мая 2024 (MSK) |
Текущая версия на 15:02, 2 мая 2024
Содержание
Оригиналы цитат[править]
Я нашла способ удобно размещать оригинал цитаты в этом шаблоне. Демонстрация. Для этого требуется добавить в MediaWiki:Common.css такие строчки и внести небольшую правку в разметку шаблона, это беру на себя. EvilCat 10:10, ноября 29, 2011 (UTC)
Спасибо. Ждём, когда обновится кэш Викии. EvilCat 18:32, ноября 29, 2011 (UTC)
Давайте показывать оригинал не по hover'у, а по щелчку[править]
Показ оригинала по наведению мыши имеет существенные недостатки:
- Наведение недоступно на устройствах с сенсорным вводом. А это не только мобильные устройства (которые мы и так не поддерживаем), но и планшеты и некоторые ноутбуки.
- Наведение меняет размер страницы, сдвигаяя всё вокруг при перемещении мыши. Это сбивает с толку, т.к. перемещение мыши не воспринимается как действие, а тут при перемещении элементы сдвигаются.
Сделать показ по щелчку можно несложным JS-скриптом. Если надо, могу его написать. Demetrius (обсуждение) 12:55, 2 мая 2024 (MSK)
- Спасибо! Мне просто добавить это в MediaWiki:Common.js? Какие-то ещё изменения куда-нибудь нужны? EvilCat (обсуждение) 14:41, 2 мая 2024 (MSK)
- В MediaWiki:Common.js надо обернуть его в
addOnloadHook(function () { /* тут код */ });
(ну или дать ему название — я добавил пример внизу). Ну из из MediaWiki:Common.css тогда надо убрать блок.original:hover .hidden_original { ... }
, иначе старое поведение останется.
- В MediaWiki:Common.js надо обернуть его в
Примеры скриптов[править]
Вот пример скрипта для скрытия по hover'у (оба нужно выполнять после загрузки страницы, т.е. нужно запихнуть их либо в $(function () { ... })
, либо в document.addEventListener('DOMContentLoaded', function () { ... })
. Кроме того, оба кода конфликтуют с нашим теперешим CSS'ом, так что CSS по :hover
надо убрать тогда.
// на jQuery, ES5 $('.show_original').click(function () { var $button = $(this); var $wrapper = $button.closest('.original'); var $text = $wrapper.find('.hidden_original'); if ($text.is(':hidden')) { $text.show(); $button.text('Скрыть оригинал'); } else { $text.hide(); $button.text('Показать оригинал'); } }); // без jQuery, современный JS (ES6) Array.from(document.querySelectorAll('.show_original')).forEach(buttonElement => { buttonElement.addEventListener('click', function () { const buttonElement = this const wrapperElement = buttonElement.closest('.original') const textElement = wrapperElement.querySelector('.hidden_original'); if (textElement.style.display === 'none') { textElement.style.display = ''; buttonElement.innerText = 'Скрыть оригинал'; } else { textElement.style.display = 'none'; buttonElement.innerText = 'Показать оригинал'; } }) })
Demetrius (обсуждение) 13:24, 2 мая 2024 (MSK)
Пример скрипта, обёрнутого для MediaWiki:Common.js[править]
Можно добавить это в конец MediaWiki:Common.js:
function addQuotationSourceHandling() { $('.show_original').click(function () { var $button = $(this); var $wrapper = $button.closest('.original'); var $text = $wrapper.find('.hidden_original'); if ($text.is(':hidden')) { $text.show(); $button.text('Скрыть оригинал'); } else { $text.hide(); $button.text('Показать оригинал'); } }); } addOnloadHook(addQuotationSourceHandling);
Также надо убрать эти строчки из MediaWiki:Common.css (иначе старое поведение по наведению мыши останется):
.original:hover .hidden_original { display:block; }
Demetrius (обсуждение) 15:01, 2 мая 2024 (MSK)