Добавление / удаление слайдов из Reveal.На JS динамически

можно ли добавлять / удалять слайды во время презентации с помощью reveal.Яш? Если быть точным, есть ли API для этого или, может быть, какой-то грязный обходной путь?

9
ajax javascript reveal.js

3 ответов

мне было любопытно об этом, а также для предстоящего проекта; осмотрелся и ничего не смог найти, поэтому я написал что-то для своего собственного проекта, приложенного в конце. Добавление слайда после текущего слайда довольно просто. Просто добавьте элемент раздела в '.слайды", и убедитесь, что раздел имеет класс "будущее". Кроме того, если вы находитесь на последнем слайде, вам нужно добавить класс "включено " в".навигация-вправо". Добавление чего-то до того, как текущий слайд испортит нумерацию, поэтому вы нужно добавить его с классом "прошлое", а затем перейти к следующему слайду.

то же самое будет для удаления слайда, если вы удалите '.мимо слайда, это портит вашу нумерацию. Я еще не тестировал свой код (пока), поэтому, если вы используете его как тест. 

        Reveal.addEventListener( 'ready', function( event ) {
            Reveal.add = function( content = '',index = -1 ){ 
                dom = {},

                dom.slides = document.querySelector( '.reveal .slides' );
                var newSlide = document.createElement( 'section' );
                if( index === -1 ) { //adding slide to end
                    newSlide.classList.add( 'future' );
                    dom.slides.appendChild(newSlide);
                    document.querySelector( '.navigate-right' ).classList.add( 'enabled' ); //just enable it, even if it is
                } else if( index > Reveal.getIndices().h ) {
                    newSlide.classList.add( 'future' );
                    dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]);
                } else if( index <= Reveal.getIndices().h ) {
                    newSlide.classList.add( 'past' );
                    dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]);
                    Reveal.next();
                }
                newSlide.innerHTML = content;
            };
            Reveal.remove = function( index = -1 ){ 
                dom = {},

                dom.wrapper = document.querySelector( '.reveal' );
                dom.slides = document.querySelector( '.reveal .slides' );
                var target = (dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0]) ? dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0] : false;

                if( index === -1 ) {
                    if (Reveal.isLastSlide()) Reveal.prev();
                    dom.slides.removeChild(dom.wrapper.querySelectorAll('.slides > section')[dom.wrapper.querySelectorAll('.slides > section').length-1]);
                    if (Reveal.isLastSlide()) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
                } else if( index > Reveal.getIndices().h && target ) {
                    dom.slides.removeChild(target);
                    if (Reveal.getIndices().h == dom.wrapper.querySelectorAll('.slides > section').length-1) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
                } else if( index < Reveal.getIndices().h && target ) {
                    dom.slides.removeChild(target);
                    location.hash = '/'+parseInt(Reveal.getIndices().h-1);
                } else if( index == Reveal.getIndices().h && target ) {
                    if (index == 0) {
                        Reveal.next();
                        document.querySelector( '.navigate-left' ).classList.remove( 'enabled' );
                    } else Reveal.prev();
                    dom.slides.removeChild(target);
                    if( dom.wrapper.querySelectorAll('.slides > section').length == index) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
                }
            };
        } );

если вы хотите использовать это, добавьте его после раскрывать.инициализировать.{(..});

позвоните с Reveal.добавить (содержимое, индекс) или раскрыть.удалить(индекс). 

Reveal.add('<h3>Slide title</h3>')

добавлю, что в качестве последнего слайда, 

Reveal.add('<h3>Slide title</h3>',0)

в начале. 

Reveal.add('<h3>Slide title</h3>',3)

добавит его в 3-е место.

раскрыть.remove () удаляет последний слайд, показывает.удалите(n) любое другое (если оно существует).

9

Reveal.sync() - это король.

вы можете динамически удалять слайды.

вот полный пример: CollaboFramework

вот пример удаление всех слайдов:

  var presentation = $('#presentation');
  var slides = $('#presentation .slides');
  slides.empty();

вот пример добавление нового слайда

// slide 1
  var section = $("<section></section>");
  slides.append(section);
  section.attr('data-markdown', '');

  var script = $("<script></script>");
  section.append(script);
  script.attr('type', 'text/template');

  var slideContent =
  "and here is the image\r\n" +
  "<img src='https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/flower-887443_960_720.jpg' width='200px' height='200px'>\r\n" +
  "and here is the list\r\n" +
  "+ hopa\r\n" +
  "+ cupa\r\n" +
  "+ and some intended links\r\n" +
  " + [CS link](http://www.CollaboScience.com)\r\n" +
  " + [CA link](http://www.CollaboArte.com)\r\n" +
  " + [CF link](https://github.com/Cha-OS/KnAllEdge/)\r\n";

  script.html(slideContent);

это слайд Markdown, но он похож на HTML, и здесь у вас есть универсальный слайд творение

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

наконец, нужно обновление Reveal, который appart повторной передачи с плагином markdown просто использует Reveal.sync().

это сделает все жонглирование класса для вас, пересчет номеров слайдов и т. д. Единственное, что еще важно-это сделать Reveal.slide(0) чтобы убедиться, что вы не находитесь на слайде 7 из 5 :) в случае, если вы удалили 2 слайда.

1

мой обходной путь для этого:

  1. инициализировать reveal с пустым section тег.

    HTML-код

    <div class="reveal">
  <div class="slides">
    <section>Single Horizontal Slide</section>
    <section id="blank"></section><!-- Blank slug -->
  </div>
 </div>

    в JavaScript

    Reveal.initialize();

//slide deck wrapper
deck = $('#blank').parent();

  2. Сохраните этот тег, затем удалите его из DOM.

    // a blank is initialized and stored as a variable
wrap = $('#blank').clone()
                  .attr('id',null)
                  .prop('outerHTML');
// remove the blank
$('#blank').remove();

  3. наконец, новый элемент добавляется в колоду и завернули в пустой тег.

      $('<h1>Slide added</h1>').appendTo(deck)
                  .wrap( wrap );

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

0