Рандомизировать слайды в show.js

У меня есть презентация reveal.js с примерно 300 слайдами. Цель этой презентации - циклические слайды в режиме "киоск" на мониторе за стендом для конференций.

Чтобы создать режим "киоска" , я получил:

Reveal.initialize({
    controls: false,    // hide the control arrows
    progress: false,    // hide the progress bar
    history: false,     // don't add each slide to browser history
    loop: true,         // loop back to the beginning after last slide
    transition: fade,   // fade between slides
    autoSlide: 5000,    // advance automatically after 5000 ms
});

Это работает очень хорошо, но я хотел бы рандомизировать слайды. В настоящее время слайды представляют собой список из 300 тегов <section> в индексном документе - они не вытягиваются из любого внешнего источника. В настоящее время random: true не является параметром конфигурации в show.js.

Порядок отображения фрагментов можно контролировать с помощью data-fragment-index. Можно ли сделать что-то подобное с разделами? Есть ли способ обмануть show.js для рандомизации моих слайдов?

Мое предпочтение было бы перетасовывать их каждый раз, то есть показывать слайды 1-300 в случайном порядке, а затем перетасовывать их и снова показывать 1-300 в другом случайном порядке. Я также был бы доволен тем, что просто прыгал на случайный слайд для каждого перехода.

Ответ 1

Начиная с open.js 3.3.0, теперь имеется встроенная вспомогательная функция для рандомизации порядка слайдов.

Если вы хотите, чтобы порядок слайдов был случайным с самого начала, используйте опцию shuffle config:

Reveal.initialize({ shuffle: true });

Если вы хотите вручную сообщить функции display.js, когда нужно перетасовать туда API-метод:

Reveal.shuffle();

Чтобы перетасовать презентацию после каждого цикла, вам нужно будет отслеживать изменения слайдов, чтобы обнаружить, когда мы вернемся к первому слайду.

Reveal.addEventListener( 'slidechanged', function( event ) {
    if( Reveal.isFirstSlide() ) {
        // Randomize the order again
        Reveal.shuffle();

        // Navigate to the first slide according to the new order
        Reveal.slide( 0, 0 );
    }
} );

Ответ 2

В то время как сам Reveal не встроен в эту функциональность, он позволяет настраивать крючки событий для выполнения действий, когда загружаются все слайды, это означает JQUERY TO THE RESCUE!

Вы можете комбинировать событие Reveal "Все слайды готовы" с простым javascript, чтобы изменить порядок всех section s, здесь простой PoC:

Сначала импортируйте jQuery, я сделал это, добавив его непосредственно над импортом для js/discovery.min.js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Затем настройте прослушиватель событий:

Reveal.addEventListener('ready', function(event) {
    // Declare a function to randomize a jQuery list of elements
    // see http://stackoverflow.com/a/11766418/472021 for details           
    $.fn.randomize = function(selector){
        (selector ? this.find(selector) : this).parent().each(function(){
            $(this).children(selector).sort(function(){
                return Math.random() - 0.5;
            }).detach().appendTo(this);
        });

        return this;
    };

    // call our new method on all sections inside of the main slides element.
    $(".slides > section").randomize();
});

Я положил это право после объявления настроек и зависимостей Reveal, но я уверен, что вы можете поместить их где угодно.

То, что это делает, ждет загрузки всех javascript, css и т.д., вручную переупорядочивает слайды в DOM, а затем позволяет Reveal начать делать свою работу. Вы должны быть в состоянии объединить это со всеми вашими другими настройками расстановки, поскольку он не делает ничего разрушительного, чтобы проявить себя.

Что касается части "перетасовки их каждый раз", самым простым способом было бы использовать другой прослушиватель событий, slidechanged. Вы можете использовать этот прослушиватель, чтобы проверить, был ли только последний переход с предыдущим слайдом, после чего при следующем вызове slidechanged вы можете просто обновить страницу.

Вы можете сделать это с помощью чего-то вроде:

var wasLastPageHit = false;
Reveal.addEventListener('slidechanged', function(event) {           
    if (wasLastPageHit) {
        window.location.reload();
    }       

    if($(event.currentSlide).is(":last-child")) {
        // The newly opened slide is the last one, set up a marker
        // so the next time this method is called we can refresh.
        wasLastPageHit = true;
    }
});