Reveal.JSのスライドを動的に追加/削除する

Question

プレゼンテーションがreveal.jsで実行されている間にスライドを追加/削除することはできますか？正確に言えば、それとも多少の厄介な回避策のためのAPIはありますか？

Answer 1

今後のプロジェクトでもこれについて興味がありました。周りを見回して何も見つかりませんでしたので、私は自分のプロジェクトのために何かを書いて、最後に追加しました。現在のスライドの後にスライドを追加するのはかなり簡単です。セクション要素を '.slides'に追加し、セクションに 'future'クラスがあることを確認してください。また、最後のスライドにいる場合は、 '.navigate-right'に 'enabled'クラスを追加する必要があります。現在のスライドの前に何かを追加すると、番号付けが乱れるので、クラス 'past'で追加してから次のスライドに移動する必要があります。

「スライド」を削除すると同じことが起こりますが、「.past」スライドを削除すると番号が間違ってしまいます。私は自分のコードをうまくテストしていないので（まだ）、それをテストとしてうまく使用すればよい。

 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.initialize（{...}）の後に追加します。

Reveal.add（コンテンツ、インデックス）、またはReveal.remove（インデックス）を使用して呼び出します。

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

は冒頭で、最後のスライドとして

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

ていることに追加します。

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

は、3番目の場所に追加します。

Reveal.remove（）は、最後のスライドReveal.remove（n）を削除します（存在する場合）。このため

Answer 2

私の問題を回避するには、にした

1. 初期化すると、空の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); 
   

はdemoです。私は複雑な設定でこのテクニックを試していませんが、簡単なプレゼンテーションではこれで十分です。

Answer 3

Reveal.sync()が王様です。

スライドを動的に削除できます。ここ

は完全な例である：ここCollaboFramework

はremoving all slidesの例である：ここ

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

は、値引きされadding a new slide

// 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); 

の一例ですスライドが、HTMLでも同様ですが、 generic slide creation

もちろん、実際のgithubコードでは、タスクが完了したことを確認する前に（コールバックを使用して）タグを待機させるのに時間がかかることがわかります。

最後に、あなたはマークダウンプラグインで再レンダリングのアパートはちょうどReveal.sync()を使用しているupdate Reveal、する必要があります。

これは、あなたのためにすべてのクラスジャグリング、スライド番号の再計算などを行います。Reveal.slide(0)を行うことが他に唯一重要なのは、スライド2枚を外した場合。