319 okumalar

Reveal.js için Web Bileşeni Nasıl Oluşturulur

ile Raymond Camden6m2023/05/11

Çok uzun; Okumak

Reveal.js, yalnızca temel HTML ile slaytlar oluşturmayı (çoğunlukla) kolaylaştıran web tabanlı bir sunum çerçevesidir. HTML, 'reveal-preso' web bileşenini kullanır ve bir 'tema' özelliğini destekler. Bileşenin içinde slaytlar için bir dizi "bölüm" etiketi bulunur.

featured image - Reveal.js için Web Bileşeni Nasıl Oluşturulur

Yıllardır Reveal.js'nin hayranıyım. Reveal.js, yalnızca temel HTML ile slaytlar oluşturmayı (çoğunlukla) kolaylaştıran web tabanlı bir sunum çerçevesidir.

Powerpoint'i hiç umursamıyorum ve inanılmaz derecede güçlü, ancak web konularında sunum yaparken (ki bu genellikle zamanın %99'udur), "alt sekme" deneyiminden hoşlanmıyorum. Kodlamak veya tarayıcı sekmelerini çalıştırmak için çalışan bir Powerpoint.

Reveal.js bundan kaçınmama yardımcı oluyor.

Reveal'ı kullanmak (nokta jay ess yazmaktan yoruldum) nispeten basittir. Bir komut dosyası etiketi eklersiniz. CSS için iki bağlantı etiketi eklersiniz (biri temel CSS için, diğeri tema için) ve ardından HTML yazmaya başlarsınız. section etiketi her slayt için kullanılır. İşte dokümanlarından bunun ne kadar kolay olduğuna dair bir örnek:

 <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>

Yukarıdaki kod parçasında her slaydı temsil eden iki section etiketini görebilirsiniz. Oldukça fazla şey var ve daha fazlasını görmek istiyorsanız demolarına göz atın, ancak bugün için Reveal sunumlarının oluşturulmasını web bileşenleriyle basitleştirip basitleştiremeyeceğimi merak ediyordum. İşte aklıma gelen şey bu.

Birinci Versiyon

Öncelikle kullanmak istediğim HTML'yi paylaşacağım. Aslında önce bunu yazdım ve ardından web bileşenini oluşturmaya başladım, böylece kendisinin güncellendiğini görebildim.

 <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>

HTML'im, web bileşenini ( reveal-preso kullanıyor ve bir theme özelliğini destekliyor. Bileşenin içinde slaytlar için bir dizi section etiketi bulunur. (Bilginize göre, reveal-slide bir alt etiket de oluşturabilirdim ve bunu bir sonraki yazımda yapacağım !) Hiç bir komut dosyası veya bağlantı etiketim yok.

Şimdi bileşen tanımına bakalım.

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

Gördüğünüz gibi bu nispeten basit. connectedCallback , iç HTML'yi, Reveal'ın beklediği divs sarılacak şekilde yeniden yazar. Daha sonra üç kaynağın tamamını (JavaScript'im ve her iki CSS kaynağım) dinamik olarak yüklüyorum.

Senaryoda, yüklendiğinde sunumu başlatabileceğim bir olay dinleyicisi var.

Görebildiğim kadarıyla (Google'da Arama ve Yığın Taşması aracılığıyla), CSS komut dosyaları için onload yok. Önerilen birkaç geçici çözüm gördüm, ancak konuyu basit tutmaya ve yalnızca JavaScript kaynağı konusunda endişelenmeye karar verdim. Bunun sorunlu olabileceğini kabul ediyorum.

Bir sorun daha - kodum tema argümanını yalnızca bir kez kontrol ediyor. Daha sonra JavaScript aracılığıyla değiştirecek olsaydınız, bunu algılamazdı.

(Burada en iyi uygulamayı önerecek kadar cesur olabilirsem, muhtemelen her zaman niteliklerde yapılan değişiklikleri tanıyacak veya neyin işe yaramayacağını açıkça belgeleyecek bir koda sahip olmanızı öneririm.) Şöyle görünüyor:

Kişisel olarak bunun oldukça hoş olduğunu düşünüyorum! Ancak web görünümünün tamamını beklediğini unutmayın. Reveal'in varsayılan ayarı budur ve muhtemelen çoğu kişi bunu kullanır, ancak Reveal'i diğer web içerikleriyle birlikte yerleştirmenin mümkün olup olmadığını gerçekten görmek istedim. İşte bunu nasıl yaptım.

Versiyon İki

İlk önce dokümanları kontrol ettim. Reveal'i yalnızca tam web görünümü sunumu olarak kullanmıştım ve çerçevenin kendisinin bunu destekleyip desteklemediğini bilmiyordum. Görünüşe göre kesinlikle gömülü bir modu var. Ayrıca birden fazla gömülü sunum desteği de mevcuttur.

Bunun için iki şey gerekir: Reveal nesnesini başlatma şeklinizde küçük bir değişiklik ve sunumunuzu barındıran kabın belirli boyutlarının sağlanması.

HTML'mi biraz değiştirerek başladım:

 <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>

Üstte ve altta bazı temel saçmalıklar var ve reveal-preso etiketine bir height ekledim. Bileşenim hem height hem de width destekleyecek, ancak her ikisini de varsayılan olarak ayarlayacak. Şimdi güncellenen bileşene bakalım:

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

Kodu şimdi height ve width arayacak ve her ikisini de varsayılan olarak ayarlayacak şekilde güncelledim. İç HTML içeriğini yeniden yazdığımda bu değerleri dahil ediyorum. Son olarak sunumu nasıl başlatacağımı değiştirdim. Bunu burada çalışırken görebilirsiniz:

Burada hâlâ düzeltmem gereken şeyler var. Yüksekliği ve genişliği değiştirmek için kesinlikle destek eklerdim. Reveal'in kendisi de boyutundaki değişiklikleri tanımayı destekler.

Bir not - Sayfada 2 sunumla hızlı bir test yaptım ve işe yaradı, ancak Reveal yalnızca bir tema CSS'si beklediğinden geçici bir çözüm olmadığına inandığım yalnızca bir tema gösteriyor.

Mümkün olabilir ama emin değilim.

Sonraki Sürüm?

Daha önce de söylediğim gibi bu konuyu bir kez daha tekrarlamak istiyorum. Bir alt etiket oluşturmak, reveal-slide (veya belki daha kısa bir şey) oluşturmak ve etiketi başka bir JavaScript kaynağından içe aktarmayı denemek istiyorum.

Ayrıca yüksekliği ve genişliği dinamik olarak değiştirmeyi desteklemek istiyorum. Yarın veya bu ayın sonlarında bunun üzerinde çalışacağım. Her zaman olduğu gibi ne düşündüğünüzü bana bildirin!