Решено Как зафиксировать свернутый спойлер?

aka_sektor

aka_sektor

Гуру MediaWiki
Регистрация
21.12.2015
Сообщения
282
Реакции
14
Я использую спойлеры вида:
Код: 
<div class="mw-collapsible mw-collapsed">
Имя спойлера
<div class="mw-collapsible-content">
Текст
</div></div>

При этом, при загрузке страницы - они каждый раз сворачиваются, и это заметно.
Нельзя ли сделать так, чтобы это было незаметно? Может быть есть другие варианты спойлеров?
 
Это реализовано JS скриптом, который отрабатывает после загрузки всей страницы. Пока страница не загрузилась спойлеры будут открыты.
Теоретически, можно сделать этот процесс менее заметным, если использовать CSS, который должен загружаться и отрабатывать быстрее JS, но по какой-то причине разработчики Wikimedia пошли другим путем, вполне возможно, что если им отправить баг репорт, то они встанут на путь истинный :)
 
Я и сказал, что оно сделано именно так, но это можно улучшить. И есть несколько способов сделать это, и один из них - написать разработчикам или найти других.
Теоретически, CSS правила загружаются и отрабатывают намного быстрее $( document ).ready() как это сделано сейчас.
И значит, что если в CSS прописать
Код: 
.mw-collapsed {
    display: none;
}
То свернутые спойлеры отображаться не будут.
Нужно просто переделать скрипт, чтобы он немного по другому работал.

Но это все в теории, я могу ошибаться, нужно пробовать.
 
Попробовал в MediaWiki:Common.css добавить - эффекта ноль.
Или это было бессмысленно? Нужно файлы движка править?
 
Я вам не даю готовое решение, просто написал принцип, как это можно улучшить. Скрывать нужно не сам
mw-collapsed, a mw-collapsible-content внутри него, и это не будет работать только на CSS, с помощью CSS можно скрыть свернутые элементы до инициализации JS. Затем JS должен все это привести в нормальный вид.
Кстати, при такой реализации, в случае если JS в браузере отключен, пользователь не будет иметь возможности увидеть содержимое свернутого по умолчанию спойлера. И это скорее всего единственная причина, по которой спойлеры сворачиваются JS, который может свернуть их только после загрузки всей страницы. Получается, что другого решения нет.
 
Может завалялся у кого такой java-скрипт? Или иное решение?
Ну в самом деле, будто много текста под спойлер никто кроме меня не прячет. Как решали проблему кто? Может есть расширение добавляющее нормальные спойлеры?
 
Последнее редактирование:
Pavel Astakhov сказал(а):
display: none;
Нажмите, чтобы раскрыть...
Заметил тут: https://www.mediawiki.org/wiki/Manual:Collapsible_elements

Такой код:
Код: 
<div class="NavFrame">
<div class="NavHead">'''Title 2'''</div>
<div class="NavContent" style="display: none;">
Hello world.
</div>
</div>

Для такого вида спойлера, как раз спойлер зафиксирован.

И действительно, дописал так:
Код: 
<div class="mw-collapsible mw-collapsed">
Название спойлера
<div class="mw-collapsible-content" style="display: none;">
Текст
</div></div>
Спойлер зафиксирован.

Табличный тоже робит, вот так:
Код: 
{| class="mw-collapsible mw-collapsed wikitable"
! Название спойлера
|- class="mw-collapsible-content" style="display: none;"
| Текст
|}

UPD:
Есть косяк с расширением: https://www.mediawiki.org/wiki/Extension:EmbedVideo
Если в спойлере только его теги, они не отображаются, т.е. нет ни одного видео.
 
Последнее редактирование:
aka_sektor сказал(а):
Заметил тут: https://www.mediawiki.org/wiki/Manual:Collapsible_elements

Такой код:
Код: 
<div class="NavFrame">
<div class="NavHead">'''Title 2'''</div>
<div class="NavContent" style="display: none;">
Hello world.
</div>
</div>

Для такого вида спойлера, как раз спойлер зафиксирован.

И действительно, дописал так:
Код: 
<div class="mw-collapsible mw-collapsed">
Название спойлера
<div class="mw-collapsible-content" style="display: none;">
Текст
</div></div>
Спойлер зафиксирован.

Табличный тоже робит, вот так:
Код: 
{| class="mw-collapsible mw-collapsed wikitable"
! Название спойлера
|- class="mw-collapsible-content" style="display: none;"
| Текст
|}

UPD:
Есть косяк с расширением: https://www.mediawiki.org/wiki/Extension:EmbedVideo
Если в спойлере только его теги, они не отображаются, т.е. нет ни одного видео.
Нажмите, чтобы раскрыть...
а как быть с мобильной версией?
 
Оказывается этот фиксированный спойлер, видео скрывает как надо, с таким кодом:
Код: 
<div class="mw-collapsible mw-collapsed">
Название спойлера
<div class="mw-collapsible-content" style="display: none;">
{{#ev:youtube|https://www.youtube.com/watch?v=8S0aD6QLTxQ|400||||start=43}}
</div></div>

Получается проблема только с табличным.

Придется изгаляться вот так:
Код: 
{| class="wikitable"
! <div class="mw-collapsible mw-collapsed">Название спойлера<div class="mw-collapsible-content" style="display: none;">{{#ev:youtube|https://www.youtube.com/watch?v=8S0aD6QLTxQ|400||||start=43}}</div></div>
|}
 
Последнее редактирование:
Кстати, есть одно неудобство, если строк несколько, т.е например:
Код: 
{| class="mw-collapsible mw-collapsed wikitable"
! Название спойлера
|- class="mw-collapsible-content" style="display: none;"
| Текст
|- class="mw-collapsible-content" style="display: none;"
| Текст
|- class="mw-collapsible-content" style="display: none;"
| Текст
|}

После каждого символа |- нужно проставлять класс:
Код: 
class="mw-collapsible-content" style="display: none;"
Хоть один пропустишь, спойлер не будет зафиксирован.

А таблицы бывают очень большие... от этого и размер статьи в Килобайтах растет.
 
Последнее редактирование:
Не проще ли сделать это с помощью CSS? что-то вроде
Код: 
table.mw-collapsed > tbody > tr:not( :first-child ) {
  display: none;
}
Не проверял, но смысл должен быть понятен, может даже работать будет...
 
Не робит твой код.
 
Pavel Astakhov сказал(а):
Нужно вот прям разжевать все и готовый код в рот положить?
Нажмите, чтобы раскрыть...
Сорян, кэш браузера не почистил. Код работает.
Спасибо.

p.s. вот бы расширение какое... чтобы заставляло юзеров это делать тоже.
 
Осталась только проблема с видео выходит.

Заметил, что в предпросмотре WikiEditor видео таки появляется под спойлером.
1.PNG
Код: 
{| class="mw-collapsible mw-collapsed wikitable"
! Название спойлера
|-
|
{{#ev:youtube|https://www.youtube.com/watch?v=8S0aD6QLTxQ|400||||start=43}}
|}

А почему в обычном нет, непонятно...
2.PNG
Соответственно если записать страницу, то видео также не появляется под спойлером.
 
Потому что в вики яваскрипт этот отрабатывает по событию ready после загрузки страницы. Это общепринятая практика, так делают все расширения и прочее. Соответственно при переходе на вкладку предпросмотра это событие не возникает и скрипты не запускаются. Просто так бросить это событие нельзя, так как оно одно на всю вики. И альтернативы никакой еще не реализовали.
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх