Обсуждение шаблона:Цитата

Оригиналы цитат

Я нашла способ удобно размещать оригинал цитаты в этом шаблоне. Демонстрация. Для этого требуется добавить в 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)

Примеры скриптов

Вот пример скрипта для скрытия по 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)