Обсуждение шаблона:Цитата — различия между версиями

Материал из Ролевая энциклопедии
Перейти к: навигация, поиск
(Оригиналы цитат)
(Давайте показывать оригинал не по hover'у, а по щелчку: надо обернуть в addOnloadHook (или в $(function () { ... }), или document.addEventListener('DOMContentLoaded', function () {...}) +css)
 
(не показаны 3 промежуточные версии 2 участников)
Строка 4: Строка 4:
  
 
Спасибо. Ждём, когда обновится кэш Викии. [[Участник:EvilCat|EvilCat]] 18:32, ноября 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 { ... }, иначе старое поведение останется.

Примеры скриптов[править]

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