Javascript Girl
  1. Javascript Girl
  3. Ajouter / Supprimer les diapositives de Reveal.JS dynamiquement
Intereting Posts
Est-il possible de transmettre le contexte dans un composant instancié avec ReactDOM.render? D3 Plot tableau de cercles Utf-8 word boundary regex en javascript Meilleur éditeur / IDE (?) Pour Javascript / PHP development Y compris le modèle SVG dans la directive Angularjs Comment puis-je remplir une liste déroulante en sélectionnant la valeur à partir d'une autre liste déroulante? Backbone.js ajoutant un modèle à la collection ajoute à tous les modèles en collection Redimension de l'image Javascript Tous mes navigateurs n'émettent pas l'en-tête d'origine Définition des en-têtes dans XDomainRequest ou ActiveXObject ('Microsoft.XMLHTTP') JQuery on the fly URL shortener Faites glisser plusieurs éléments avec jquery.event.drag La page jette l'erreur d'exécution JavaScript: 'Nom de la fonction' est indéfini. IE10 seulement Comment exécuter le javascript fn en utilisant l'événement de bouton OnClick (asp.net) Comment obtenir la position de la souris sur le canevas HTML5 transformé

Ajouter / Supprimer les diapositives de Reveal.JS dynamiquement

Est-il possible d'ajouter / supprimer des diapositives pendant qu'une présentation est en cours d'exécution avec revel.js? Pour être précis, y a-t-il une API pour cela ou peut-être une solution de contournement sale?

J'étais curieux à propos de cela pour un prochain projet; J'ai regardé autour de moi et je n'ai rien trouvé, alors j'ai écrit quelque chose pour mon propre projet, ajouté à la fin. Ajouter une diapositive après votre diapositive actuelle est assez simple. Ajoutez simplement un élément de section à '.slides' et assurez-vous que la section a cours 'avenir'. De plus, si vous êtes sur la dernière diapositive, vous devez ajouter la classe 'enabled' à '.navigate-right'. En ajoutant quelque chose avant que la diapositive actuelle gâche la numérotation, vous devez l'ajouter avec la classe «passé», puis passer à la diapositive suivante.

Même si vous supprimez une diapositive, même si vous supprimez une diapositive ".past", cela gâche votre numérotation. Je n'ai pas encore testé mon code (pour l'instant), alors si vous l'utilisez comme s'il vous plaît. 

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' ); } }; } );

Si vous souhaitez utiliser cela, ajoutez-le après Reveal.initialize ({…});

Appelez-le avec Reveal.add (contenu, index) ou Reveal.remove (index). 

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

Ajouterait cela comme la dernière diapositive, 

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

au début. 

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

L'ajouterait au 3ème emplacement.

Reveal.remove () supprime la dernière diapositive, Reveal.remove (n) tout autre (s'il existe).

Reveal.sync() est le roi.

Vous pouvez supprimer dynamiquement les diapositives.

Voici l'exemple complet: CollaboFramework

Voici un exemple de suppression de toutes les diapositives : 

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

Voici un exemple d' ajout d'une nouvelle diapositive 

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

C'est une diapositive de Markdown, mais c'est similaire à HTML, et ici, vous avez une création de diapositive générique

Bien sûr, au code réel de github, vous verrez qu'il est logique de donner un peu de temps à attendre pour que les tags soient créés avant de confirmer la tâche terminée (avec rappel).

Enfin, vous devez mettre à jour Reveal , lequel appart de rerendering avec le plugin markdown utilise simplement Reveal.sync() .

Cela fera tous les jongleries de classe pour vous, le récit des numéros de diapositives, etc. La seule autre chose importante est de faire Reveal.slide(0) pour vous assurer que vous n'êtes pas à la diapositive 7 sur 5 🙂 dans le cas où vous avez supprimé 2 Diapositives.

Ma solution était pour:

  1. Initialiser révéler avec une étiquette de section vide.

    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. Rangez ce tag puis retirez-le du DOM. 

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

  3. Enfin, un nouvel élément est ajouté au pont et enveloppé dans la balise vide. 

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

Voici une démo . Je n'ai pas essayé cette technique avec des configurations compliquées, mais pour une simple présentation, cela suffit.