319 Lesungen

So erstellen Sie eine Webkomponente für Reveal.js

von Raymond Camden6m2023/05/11

Zu lang; Lesen

Reveal.js ist ein webbasiertes Präsentationsframework, das es (meistens) einfach macht, Folien mit einfachem HTML zu erstellen. Der HTML-Code nutzt die Webkomponente „reveal-preso“ und unterstützt ein „theme“-Attribut. Innerhalb der Komponente befindet sich eine Reihe von „Abschnitt“-Tags für die Folien.

featured image - So erstellen Sie eine Webkomponente für Reveal.js

Ich bin seit vielen Jahren ein Fan von Reveal.js . Reveal.js ist ein webbasiertes Präsentationsframework, das es (meistens) einfach macht, Folien mit einfachem HTML zu erstellen.

Ich habe überhaupt nichts gegen Powerpoint und es ist unglaublich leistungsstark, aber wenn ich über Webthemen präsentiere (was normalerweise in 99 % der Fälle der Fall ist), gefällt mir das „Alt-Tab“ nicht ein laufendes Powerpoint zum Codieren oder Browser-Registerkarten.

Reveal.js hilft mir, das zu vermeiden.

Die Verwendung von Reveal (ich habe es langsam satt, den Punkt jay ess zu tippen) ist relativ einfach. Sie fügen ein Skript-Tag hinzu. Sie fügen zwei Link-Tags für CSS hinzu (eines für das Kern-CSS und eines für ein Design) und beginnen dann mit dem Schreiben von HTML. Das section -Tag wird für jede Folie verwendet. Hier ist ein Beispiel aus ihren Dokumenten, wie einfach es ist:

 <html> <head> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize(); </script> </body> </html>

Im Snippet oben sehen Sie die beiden section -Tags, die jede Folie darstellen. Da steckt einiges dahinter, und wenn Sie mehr sehen möchten, schauen Sie sich die Demo an, aber für heute war ich neugierig, ob ich die Erstellung von Reveal-Präsentationen mit Webkomponenten vereinfachen könnte. Hier ist, was ich mir ausgedacht habe.

Version Eins

Zuerst teile ich den HTML-Code, den ich verwenden wollte. Ich habe dies tatsächlich zuerst geschrieben und dann mit dem Aufbau der Webkomponente begonnen, damit ich sehen konnte, wie sie sich selbst aktualisiert.

 <reveal-preso theme="beige"> <section>Slide 1b</section> <section>Slide 2</section> <section>Slide 3</section> <section data-background-color="aquamarine"> <h2>🍦</h2> </section> <section data-background-image="https://placekitten.com/800/800"> <h2>Image</h2> </section> </reveal-preso>

Mein HTML nutzt die Webkomponente reveal-preso und unterstützt ein theme Attribut. Innerhalb der Komponente befindet sich eine Reihe von section Tags für die Folien. (Zu Ihrer Information: Ich hätte auch ein reveal-slide erstellen können, und das werde ich in meinem nächsten Beitrag tun!) Ich habe überhaupt keine Skript- oder Link-Tags.

Schauen wir uns nun die Komponentendefinition an.

 class RevealPreso extends HTMLElement { constructor() { super(); } connectedCallback() { this.theme = 'black'; if(this.hasAttribute('theme')) { this.theme = this.getAttribute('theme'); } let currentHTML = this.innerHTML; this.innerHTML = ` <div class="reveal"> <div class="slides"> ${currentHTML} </div> </div> `; // load reveal.js const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.js'; document.head.appendChild(script); const link = document.createElement('link'); link.rel = 'stylesheet'; link.type='text/css'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css'; document.head.appendChild(link); const theme = document.createElement('link'); theme.rel = 'stylesheet'; theme.type='text/css'; theme.href = `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/${this.theme}.min.css`; document.head.appendChild(theme); script.addEventListener('load', () => { Reveal.initialize(); }); } } if(!customElements.get('reveal-preso')) customElements.define('reveal-preso', RevealPreso);

Wie Sie sehen, ist das relativ einfach. Mein connectedCallback schreibt den inneren HTML-Code so um, dass er mit den von Reveal erwarteten divs umschlossen wird. Anschließend lade ich alle drei Ressourcen dynamisch – mein JavaScript und beide CSS-Ressourcen.

Ich habe einen Ereignis-Listener im Skript, sodass ich die Präsentation initialisieren kann, wenn es geladen ist.

Soweit ich sehen konnte (über Googeln und Stack Overflow), gibt es kein onload für CSS-Skripte. Ich habe ein paar Lösungsvorschläge gesehen, mich aber dafür entschieden, es einfach zu halten und mich nur um die JavaScript-Ressource zu kümmern. Ich akzeptiere, dass das problematisch sein könnte.

Noch ein Problem: Mein Code prüft nur einmal, ob das Theme-Argument vorhanden ist. Wenn Sie es später per JavaScript ändern würden, würde es das nicht berücksichtigen.

(Wenn ich so mutig sein darf, hier eine Best Practice vorzuschlagen, würde ich wahrscheinlich vorschlagen, dass Sie immer Code haben, um Änderungen an Attributen zu erkennen oder klar zu dokumentieren, was nicht funktionieren wird.) So sieht es aus:

Ich persönlich finde das ziemlich cool! Beachten Sie jedoch, dass die gesamte Webansicht erwartet wird. Das ist die Standardeinstellung für Reveal und wird wahrscheinlich von den meisten Leuten so verwendet, aber ich wollte unbedingt sehen, ob es möglich ist, Reveal zusammen mit anderen Webinhalten einzubetten . So habe ich das gemacht.

Version Zwei

Zuerst habe ich die Dokumente überprüft. Ich habe Reveal bisher nur als vollständige Webansicht-Präsentation verwendet und wusste nicht, ob das Framework selbst dies unterstützt. Es stellte sich heraus, dass es absolut über einen eingebetteten Modus verfügt. Es gibt auch Unterstützung für mehrere eingebettete Präsentationen.

Dies erfordert zwei Dinge: eine geringfügige Änderung bei der Initialisierung des Reveal-Objekts und die Angabe spezifischer Abmessungen des Containers, der Ihre Präsentation enthält.

Ich begann damit, meinen HTML-Code ein wenig zu modifizieren:

 <h2>Preso</h2> <p> Here is my preso. It brings all the boys to the yard. </p> <reveal-preso height="700px" theme="dracula"> <section>Slide 1b</section> <section> <h2>Plan</h2> <ul> <li class="fragment">Phase One - Collect Underpants</li> <li class="fragment">Phase Two - ?</li> <li class="fragment">Phase Three - Profit</li> </ul> </section> <section>Slide 3</section> <section data-background-color="aquamarine"> <h2>🍦</h2> </section> <section data-background-image="https://placekitten.com/800/800"> <h2>Image</h2> </section> </reveal-preso> <footer> End of page. </footer>

Ich habe oben und unten ein paar einfache Dinge gemacht und im Tag reveal-preso habe ich eine height hinzugefügt. Meine Komponente wird sowohl height als auch width unterstützen, standardmäßig werden jedoch beide verwendet. Schauen wir uns nun die aktualisierte Komponente an:

 class RevealPreso extends HTMLElement { constructor() { super(); } connectedCallback() { console.log('connected callback called'); // defaults this.width = '100%'; this.height = '500px'; this.theme = 'black'; if(this.hasAttribute('width')) { this.width = this.getAttribute('width'); } if(this.hasAttribute('height')) { this.height = this.getAttribute('height'); } if(this.hasAttribute('theme')) { this.theme = this.getAttribute('theme'); } let currentHTML = this.innerHTML; this.innerHTML = ` <div class="reveal" style="width: ${this.width}; height: ${this.height}"> <div class="slides"> ${currentHTML} </div> </div> `; // load reveal.js const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.js'; document.head.appendChild(script); const link = document.createElement('link'); link.rel = 'stylesheet'; link.type='text/css'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css'; document.head.appendChild(link); const theme = document.createElement('link'); theme.rel = 'stylesheet'; theme.type='text/css'; theme.href = `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/${this.theme}.min.css`; document.head.appendChild(theme); script.addEventListener('load', () => { Reveal(this.querySelector( '.reveal' ), { embedded: true, keyboardCondition: 'focused' // only react to keys when focused }).initialize(); }); } } if(!customElements.get('reveal-preso')) customElements.define('reveal-preso', RevealPreso);

Ich habe den Code aktualisiert, um jetzt nach height und width zu suchen und beide als Standard festzulegen. Wenn ich den inneren HTML-Inhalt neu schreibe, füge ich diese Werte hinzu. Zuletzt habe ich geändert, wie ich die Präsentation initialisiere. Sie können dies hier in Aktion sehen:

Es gibt hier noch Dinge, die ich optimieren würde. Ich würde auf jeden Fall Unterstützung für das Ändern der Höhe und Breite hinzufügen. Reveal selbst unterstützt auch das Erkennen von Größenänderungen.

Eine Anmerkung: Ich habe einen kurzen Test mit zwei Präsentationen auf der Seite durchgeführt, und es hat funktioniert, aber es wird nur ein Thema angezeigt. Ich glaube, dass es keine Problemumgehung gibt, da Reveal nur CSS für ein Thema erwartet.

Es mag möglich sein, aber ich bin mir nicht sicher.

Nächste Version?

Wie ich bereits sagte, möchte ich dies noch einmal wiederholen. Ich möchte ein untergeordnetes Tag, reveal-slide (oder vielleicht etwas kürzeres) erstellen und prüfen, ob ich das Tag aus einer anderen JavaScript-Ressource importieren kann.

Ich möchte auch die dynamische Änderung der Höhe und Breite unterstützen. Ich werde morgen oder später in diesem Monat daran arbeiten. Teilen Sie mir wie immer Ihre Meinung mit!