1. Приглашаем вступить в нашу группу ВКонтакте.
  2. Присоединяйтесь к нашему чату по ссылке: http://t.me/mediawiki_ru

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

Тема в разделе 'Основные вопросы по Media Wiki', создана пользователем aka_sektor, 20 ноя 2016.

  1. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Я использую спойлеры вида:
    Код:
    <div class="mw-collapsible mw-collapsed">
    Имя спойлера
    <div class="mw-collapsible-content">
    Текст
    </div></div>
    При этом, при загрузке страницы - они каждый раз сворачиваются, и это заметно.
    Нельзя ли сделать так, чтобы это было незаметно? Может быть есть другие варианты спойлеров?
  2. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

    Дата регистрации:
    6 май 2015
    Сообщения:
    162
    Симпатии:
    84
    Пол:
    Мужской
    Это реализовано JS скриптом, который отрабатывает после загрузки всей страницы. Пока страница не загрузилась спойлеры будут открыты.
    Теоретически, можно сделать этот процесс менее заметным, если использовать CSS, который должен загружаться и отрабатывать быстрее JS, но по какой-то причине разработчики Wikimedia пошли другим путем, вполне возможно, что если им отправить баг репорт, то они встанут на путь истинный :)
  3. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
  4. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

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

    Но это все в теории, я могу ошибаться, нужно пробовать.
  5. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Попробовал в MediaWiki:Common.css добавить - эффекта ноль.
    Или это было бессмысленно? Нужно файлы движка править?
  6. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

    Дата регистрации:
    6 май 2015
    Сообщения:
    162
    Симпатии:
    84
    Пол:
    Мужской
    Я вам не даю готовое решение, просто написал принцип, как это можно улучшить. Скрывать нужно не сам
    mw-collapsed, a mw-collapsible-content внутри него, и это не будет работать только на CSS, с помощью CSS можно скрыть свернутые элементы до инициализации JS. Затем JS должен все это привести в нормальный вид.
    Кстати, при такой реализации, в случае если JS в браузере отключен, пользователь не будет иметь возможности увидеть содержимое свернутого по умолчанию спойлера. И это скорее всего единственная причина, по которой спойлеры сворачиваются JS, который может свернуть их только после загрузки всей страницы. Получается, что другого решения нет.
    UksusoFF нравится это.
  7. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Может завалялся у кого такой java-скрипт? Или иное решение?
    Ну в самом деле, будто много текста под спойлер никто кроме меня не прячет. Как решали проблему кто? Может есть расширение добавляющее нормальные спойлеры?
    Последнее редактирование: 25 дек 2016
  8. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Заметил тут: 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
    Если в спойлере только его теги, они не отображаются, т.е. нет ни одного видео.
    Последнее редактирование: 18 окт 2017
  9. Vor_tex
    Оффлайн

    Vor_tex Осваивается

    Дата регистрации:
    17 дек 2014
    Сообщения:
    96
    Симпатии:
    13
    Пол:
    Мужской
    а как быть с мобильной версией?
  10. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Я себе не ставил расширение "Mobile Fronted" и не собираюсь, так что мне как-то не до этого.

    Мне бы с EmbedVideo что-то решить
  11. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Оказывается этот фиксированный спойлер, видео скрывает как надо, с таким кодом:
    Код:
    <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>
    |}
    Последнее редактирование: 24 окт 2017
  12. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Кстати, есть одно неудобство, если строк несколько, т.е например:
    Код:
    {| 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;"
    Хоть один пропустишь, спойлер не будет зафиксирован.

    А таблицы бывают очень большие... от этого и размер статьи в Килобайтах растет.
    Последнее редактирование: 2 ноя 2017
  13. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

    Дата регистрации:
    6 май 2015
    Сообщения:
    162
    Симпатии:
    84
    Пол:
    Мужской
    Не проще ли сделать это с помощью CSS? что-то вроде
    Код:
    table.mw-collapsed > tbody > tr:not( :first-child ) {
      display: none;
    }
    
    
    Не проверял, но смысл должен быть понятен, может даже работать будет...
    aka_sektor и UksusoFF нравится это.
  14. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Не робит твой код.
  15. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

    Дата регистрации:
    6 май 2015
    Сообщения:
    162
    Симпатии:
    84
    Пол:
    Мужской
    Нужно вот прям разжевать все и готовый код в рот положить?
    aka_sektor и UksusoFF нравится это.
  16. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Сорян, кэш браузера не почистил. Код работает.
    Спасибо.

    p.s. вот бы расширение какое... чтобы заставляло юзеров это делать тоже.
  17. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской
    Осталась только проблема с видео выходит.

    Заметил, что в предпросмотре WikiEditor видео таки появляется под спойлером.
    1.PNG
    Код:
    {| class="mw-collapsible mw-collapsed wikitable"
    ! Название спойлера
    |-
    |
    {{#ev:youtube|https://www.youtube.com/watch?v=8S0aD6QLTxQ|400||||start=43}}
    |}
    
    А почему в обычном нет, непонятно...
    2.PNG
    Соответственно если записать страницу, то видео также не появляется под спойлером.
  18. Pavel Astakhov
    Оффлайн

    Pavel Astakhov Прижился

    Дата регистрации:
    6 май 2015
    Сообщения:
    162
    Симпатии:
    84
    Пол:
    Мужской
    Потому что в вики яваскрипт этот отрабатывает по событию ready после загрузки страницы. Это общепринятая практика, так делают все расширения и прочее. Соответственно при переходе на вкладку предпросмотра это событие не возникает и скрипты не запускаются. Просто так бросить это событие нельзя, так как оно одно на всю вики. И альтернативы никакой еще не реализовали.
  19. aka_sektor
    Оффлайн

    aka_sektor Осваивается

    Дата регистрации:
    21 дек 2015
    Сообщения:
    250
    Симпатии:
    13
    Пол:
    Мужской