319 판독값

Reveal.js용 웹 구성 요소를 만드는 방법

~에 의해 Raymond Camden6m2023/05/11

너무 오래; 읽다

Reveal.js는 기본 HTML만으로 슬라이드를 (대부분) 쉽게 만들 수 있게 해주는 웹 기반 프레젠테이션 프레임워크입니다. HTML은 웹 구성 요소 `reveal-preso'를 사용하고 `theme` 속성을 지원합니다. 구성요소 내부에는 슬라이드에 대한 '섹션' 태그 세트가 있습니다.

featured image - Reveal.js용 웹 구성 요소를 만드는 방법

저는 수년 동안 Reveal.js 의 팬이었습니다. Reveal.js는 기본 HTML만으로 슬라이드를 (대부분) 쉽게 만들 수 있게 해주는 웹 기반 프레젠테이션 프레임워크입니다.

저는 Powerpoint를 전혀 신경 쓰지 않고 엄청나게 강력하지만 웹 주제에 대해 발표할 때(보통 99%) Powerpoint에서 "Alt-Tab"을 누르는 경험이 마음에 들지 않습니다. 코드 또는 브라우저 탭에 대한 실행 중인 Powerpoint.

Reveal.js는 이를 방지하는 데 도움이 됩니다.

Reveal(dot jay ess를 입력하는 데 지쳤습니다)을 사용하는 것은 비교적 간단합니다. 스크립트 태그를 추가합니다. CSS용 링크 태그 두 개(핵심 CSS용 하나와 테마용 하나)를 추가한 다음 HTML 작성을 시작합니다. 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>

위의 스니펫에서 각 슬라이드를 나타내는 두 개의 section 태그를 볼 수 있습니다. 꽤 많은 내용이 있으며 더 많은 내용을 보려면 데모를 확인하세요. 하지만 오늘은 웹 구성 요소를 사용하여 Reveal 프리젠테이션 생성을 단순화할 수 있는지 궁금했습니다. 내가 생각 해낸 것은 다음과 같습니다.

버전 1

먼저 제가 사용하고 싶었던 HTML을 공유하겠습니다. 나는 실제로 이것을 먼저 작성한 다음 웹 구성 요소를 구축하기 시작하여 자체적으로 업데이트되는 것을 볼 수 있었습니다.

 <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은 웹 구성 요소인 reveal-preso 사용하고 theme 속성을 지원합니다. 구성 요소 내부에는 슬라이드에 대한 section 태그 세트가 있습니다. (참고로 reveal-slide 하위 태그를 만들 수도 있었는데 다음 게시물에서 그렇게 하겠습니다 !) 스크립트나 링크 태그가 전혀 없습니다.

이제 컴포넌트 정의를 살펴보겠습니다.

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

보시다시피 이것은 비교적 간단합니다. 내 connectedCallback Reveal이 예상하는 divs 로 래핑되도록 내부 HTML을 다시 작성합니다. 그런 다음 세 가지 리소스, 즉 JavaScript와 CSS 리소스를 모두 동적으로 로드합니다.

로드되면 프레젠테이션을 초기화할 수 있도록 스크립트에 이벤트 리스너가 있습니다.

내가 본 바로는(Google 검색 및 Stack Overflow를 통해) CSS 스크립트에 대한 onload 없습니다. 몇 가지 제안된 해결 방법을 보았지만 간단하게 유지하고 JavaScript 리소스만 걱정하기로 결정했습니다. 문제가 될 수 있다는 점을 인정합니다.

또 다른 문제 - 내 코드는 테마 인수를 한 번만 확인합니다. 나중에 JavaScript를 통해 변경하면 해당 내용이 적용되지 않습니다.

(여기서 모범 사례를 제안할 만큼 대담하다면 속성 변경을 인식하거나 작동하지 않을 사항을 명확하게 문서화하는 코드를 항상 갖고 있다고 제안할 것입니다.) 다음은 그 모습입니다.

개인적으로 이거 꽤 괜찮은 것 같아요! 그러나 전체 웹 보기가 필요하다는 점에 유의하세요. 이것이 Reveal의 기본값이고 아마도 대부분의 사람들이 이를 어떻게 사용할지 모르지만 다른 웹 컨텐츠와 함께 Reveal을 포함시키는 것이 가능한지 정말로 알고 싶었습니다. 내가 한 방법은 다음과 같습니다.

버전 2

먼저 문서를 확인했습니다. 저는 Reveal을 전체 웹 보기 프레젠테이션으로만 사용한 적이 있었고 프레임워크 자체가 이를 지원하는지 몰랐습니다. 확실히 임베디드 모드가 있는 것으로 나타났습니다. 여러 개의 포함된 프레젠테이션도 지원됩니다.

이를 위해서는 두 가지가 필요합니다. Reveal 개체를 초기화하는 방법과 프레젠테이션을 보관하는 컨테이너의 특정 크기를 제공하는 방법을 약간 변경하는 것입니다.

나는 HTML을 약간 수정하는 것부터 시작했습니다.

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

상단과 하단에 몇 가지 기본적인 내용이 있고 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);

이제 height 와 width 찾고 기본값을 모두 찾도록 코드를 업데이트했습니다. 내부 HTML 콘텐츠를 다시 작성할 때 해당 값을 포함합니다. 마지막으로 프레젠테이션 초기화 방법을 변경했습니다. 여기에서 실제로 이를 확인할 수 있습니다.

여기에는 아직 수정하고 싶은 사항이 있습니다. 높이와 너비 변경에 대한 지원을 확실히 추가하겠습니다. Reveal 자체는 크기 변경 인식도 지원합니다.

한 가지 참고 사항 - 페이지에서 2개의 프레젠테이션을 사용하여 빠른 테스트를 수행했고 제대로 작동했지만 Reveal에서는 CSS 테마가 하나만 필요하므로 해결 방법이 없다고 생각하는 테마 하나만 표시했습니다.

가능할 수도 있지만 확실하지 않습니다.