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

Материал из Ролевая энциклопедии
Перейти к: навигация, поиск
(→‎Оригиналы цитат)
(→‎Давайте показывать оригинал не по hover'у, а по щелчку: пример JS-скрипта, которым это можно сделать)
(не показана 1 промежуточная версия этого же участника)
Строка 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)
 +
 +
=== Примеры скриптов ===
 +
 +
Вот пример скрипта для скрытия по 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)

Версия 13:24, 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)

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

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

Источник — «http://wiki.rpgverse.ru/w/index.php?title=Обсуждение_шаблона:Цитата&oldid=62414»