Ich bin seit   Jahren ein Fan von   . Reveal.js ist ein webbasiertes Präsentationsframework, das es (meistens) einfach macht, Folien mit einfachem HTML zu erstellen. vielen Reveal.js  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   -Tag wird für jede Folie verwendet. Hier ist ein Beispiel aus ihren Dokumenten, wie einfach es ist: section   <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   -Tags, die jede Folie darstellen. Da steckt einiges dahinter, und wenn Sie mehr sehen möchten, schauen Sie sich die   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. section Demo  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   und unterstützt ein   Attribut. Innerhalb der Komponente befindet sich eine Reihe von   Tags für die Folien. (Zu Ihrer Information: Ich hätte auch ein   erstellen können, und das   ich in meinem nächsten Beitrag tun!) Ich habe überhaupt keine Skript- oder Link-Tags. reveal-preso theme section reveal-slide werde  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   schreibt den inneren HTML-Code so um, dass er mit den von Reveal erwarteten   umschlossen wird. Anschließend lade ich alle drei Ressourcen dynamisch – mein JavaScript und beide CSS-Ressourcen. connectedCallback divs  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   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. onload  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   Code haben, um Änderungen an Attributen zu erkennen oder klar zu dokumentieren, was nicht funktionieren wird.) So sieht es aus: immer   https://codepen.io/cfjedimaster/pen/MWPJgMJ?embedable=true  Ich persönlich finde das ziemlich cool! Beachten Sie jedoch, dass die   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   . So habe ich das gemacht. gesamte einzubetten  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   Modus verfügt. Es gibt auch Unterstützung für   Präsentationen. eingebetteten mehrere eingebettete  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   habe ich eine   hinzugefügt. Meine Komponente wird sowohl   als auch   unterstützen, standardmäßig werden jedoch beide verwendet. Schauen wir uns nun die aktualisierte Komponente an: reveal-preso height height width   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   und   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: height width   https://codepen.io/cfjedimaster/pen/GRYrRmK?embedable=true  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,   (oder vielleicht etwas kürzeres) erstellen und prüfen, ob ich das Tag aus einer anderen JavaScript-Ressource importieren kann. reveal-slide  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!

My Blog

Buy Me a Coffee

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

So erstellen Sie eine Webkomponente für Reveal.js

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps