319 পড়া

Reveal.js এর জন্য কিভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করবেন

দ্বারা Raymond Camden6m2023/05/11

অতিদীর্ঘ; পড়তে

Reveal.js হল একটি ওয়েব-ভিত্তিক প্রেজেন্টেশন ফ্রেমওয়ার্ক যা শুধুমাত্র মৌলিক HTML দিয়ে স্লাইড তৈরি করাকে (বেশিরভাগ) সহজ করে তোলে। এইচটিএমএল ওয়েব কম্পোনেন্ট ব্যবহার করে, 'প্রকাশ-প্রেসো', এবং একটি 'থিম' বৈশিষ্ট্য সমর্থন করে। উপাদানের ভিতরে স্লাইডগুলির জন্য `বিভাগ` ট্যাগের একটি সেট রয়েছে।

featured image - Reveal.js এর জন্য কিভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করবেন

আমি অনেক বছর ধরে Reveal.js এর ভক্ত। Reveal.js হল একটি ওয়েব-ভিত্তিক প্রেজেন্টেশন ফ্রেমওয়ার্ক যা শুধুমাত্র মৌলিক HTML দিয়ে স্লাইড তৈরি করাকে (বেশিরভাগ) সহজ করে তোলে।

পাওয়ারপয়েন্ট নিয়ে আমি মোটেও আপত্তি করি না, এবং এটি অবিশ্বাস্যভাবে শক্তিশালী, কিন্তু যখন আমি ওয়েব বিষয়গুলিতে উপস্থাপনা করি (যা সাধারণত, 99% সময় হয়), আমি এখান থেকে "alt-ট্যাবিং" এর অভিজ্ঞতা পছন্দ করি না কোড বা ব্রাউজার ট্যাবে একটি চলমান পাওয়ারপয়েন্ট।

Reveal.js আমাকে যে এড়াতে সাহায্য করে.

রিভিল ব্যবহার করা (আমি ডট জে এসএস টাইপ করতে ক্লান্ত হয়ে পড়েছি) তুলনামূলকভাবে সহজ। আপনি একটি স্ক্রিপ্ট ট্যাগ যোগ করুন. আপনি 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 ট্যাগ দেখতে পারেন। এটিতে বেশ কিছুটা আছে, এবং আপনি যদি আরও দেখতে চান, তাদের ডেমো দেখুন, কিন্তু আজকের জন্য, আমি ওয়েব উপাদানগুলির সাথে প্রকাশ উপস্থাপনা তৈরিকে সহজ করতে পারি কিনা তা জানতে আগ্রহী ছিলাম৷ এখানে আমি কি সঙ্গে এসেছি.

সংস্করণ এক

প্রথমে, আমি যে 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 ট্যাগের একটি সেট রয়েছে। (একটি FYI হিসাবে, আমি একটি 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 অভ্যন্তরীণ এইচটিএমএলকে এমনভাবে পুনর্লিখন করে যাতে এটি divs সাথে মোড়ানো থাকে যা রিভিল আশা করে। আমি তখন গতিশীলভাবে তিনটি সংস্থানই লোড করি - আমার জাভাস্ক্রিপ্ট এবং উভয় সিএসএস সংস্থান।

আমি স্ক্রিপ্টে একটি ইভেন্ট শ্রোতা পেয়েছি যাতে এটি লোড হয়ে গেলে, আমি উপস্থাপনা শুরু করতে পারি।

আমি যা দেখতে পাচ্ছি তা থেকে (গুগলিং এবং স্ট্যাক ওভারফ্লো এর মাধ্যমে), CSS স্ক্রিপ্টগুলির জন্য কোনও onload নেই। আমি কয়েকটি প্রস্তাবিত সমাধান দেখেছি, কিন্তু আমি এটি সহজ রাখার সিদ্ধান্ত নিয়েছি এবং জাভাস্ক্রিপ্ট সংস্থান সম্পর্কে চিন্তা করেছি। আমি স্বীকার করি যে সমস্যাযুক্ত হতে পারে।

আরও একটি সমস্যা - আমার কোড শুধুমাত্র একবার থিম যুক্তির জন্য পরীক্ষা করে। আপনি যদি পরবর্তীতে জাভাস্ক্রিপ্টের মাধ্যমে এটি পরিবর্তন করতে চান তবে এটি তা গ্রহণ করবে না।

(যদি আমি এখানে একটি সর্বোত্তম অনুশীলনের পরামর্শ দেওয়ার মতো সাহসী হতে পারি, তবে আমি সম্ভবত পরামর্শ দেব যে আপনার কাছে সর্বদা বৈশিষ্ট্যের পরিবর্তনগুলি সনাক্ত করার জন্য কোড থাকতে হবে বা যা কাজ করছে না তা স্পষ্টভাবে নথিভুক্ত করুন।) এটি দেখতে কেমন:

ব্যক্তিগতভাবে, আমি মনে করি এটি বেশ সুন্দর! কিন্তু লক্ষ্য করুন যে এটি সম্পূর্ণ ওয়েব ভিউ আশা করে। এটি প্রকাশের জন্য ডিফল্ট এবং সম্ভবত বেশিরভাগ লোকেরা কীভাবে এটি ব্যবহার করবে, তবে আমি সত্যিই দেখতে চেয়েছিলাম যে অন্যান্য ওয়েব সামগ্রীর সাথে প্রকাশ এম্বেড করা সম্ভব কিনা। এখানে আমি যে কিভাবে.

সংস্করণ দুই

প্রথম, আমি ডক্স চেক. আমি শুধুমাত্র একটি সম্পূর্ণ ওয়েব ভিউ উপস্থাপনা হিসাবে প্রকাশ ব্যবহার করেছি, এবং ফ্রেমওয়ার্ক নিজেই এটি সমর্থন করে কিনা তা আমি জানতাম না। সক্রিয় আউট, এটি একেবারে একটি এমবেডেড মোড আছে. একাধিক এমবেডেড উপস্থাপনাগুলির জন্যও সমর্থন রয়েছে৷

এটির জন্য দুটি জিনিসের প্রয়োজন - আপনি কীভাবে রিভিল অবজেক্টটি শুরু করবেন এবং আপনার উপস্থাপনা ধারণকারী ধারকটির নির্দিষ্ট মাত্রা সরবরাহ করবেন তার সামান্য পরিবর্তন।

আমি আমার 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 বিষয়বস্তু পুনরায় লিখি, তখন আমি সেই মানগুলি অন্তর্ভুক্ত করি। অবশেষে, আমি উপস্থাপনা শুরু করার পদ্ধতি পরিবর্তন করেছি। আপনি এখানে কর্মে এটি দেখতে পারেন:

আমি এখানে খামচি চাই জিনিস এখনও আছে. আমি অবশ্যই উচ্চতা এবং প্রস্থ পরিবর্তনের জন্য সমর্থন যোগ করব। রিভিল নিজেই এর আকারের পরিবর্তনগুলিকে স্বীকৃতি দিতে সমর্থন করে।

একটি নোট - আমি পৃষ্ঠায় 2টি উপস্থাপনা সহ একটি দ্রুত পরীক্ষা করেছি, এবং এটি কাজ করেছে, কিন্তু এটি শুধুমাত্র একটি থিম দেখায় যা আমি বিশ্বাস করি যে কোনও সমাধান নেই কারণ প্রকাশ শুধুমাত্র একটি থিম CSS আশা করে৷

এটা সম্ভব হতে পারে, কিন্তু আমি নিশ্চিত নই।

পরবর্তী সংস্করণ?

আমি আগেই বলেছি, আমি এই বিষয়ে আরও একবার পুনরাবৃত্তি করতে চাই। আমি একটি চাইল্ড ট্যাগ তৈরি করতে চাই, reveal-slide (বা সম্ভবত ছোট কিছু) এবং অন্য জাভাস্ক্রিপ্ট রিসোর্স থেকে ট্যাগ আমদানি করতে চাই।

আমি গতিশীলভাবে উচ্চতা এবং প্রস্থ পরিবর্তন সমর্থন করতে চাই। আমি আগামীকাল বা এই মাসের শেষের দিকে এটি নিয়ে কাজ করব। সর্বদা হিসাবে, আপনি কি আমাকে কী মনে করেন!