2::Динамика слайдов в Reveler

Большим преимущиством Reveler от PowerPoint это Javascript и вся его мощь.
Если вы занете JS вы можете делать всё что угодно со своими слайдами, но если вы лентяй и знаете AlpineJS, то вам это будет сделать еще проще).

Поговорим сначала про чистый JavaScript. JavaScript пишется как и в обычном HTML в геге <script>, но со своими правилами и модификаторами

<slide> <script> console.log("Hello world"); </script> <h1>При открытии слайда в консоль выведится "Hello world"</h1> </slide>

Но этот скрипт будет запускатся при каждом открытии слайда, но это поведение мы можем поменять. Если вы добавите атребут global в тег <script>, который скажет скрипту запускатся только перед отрытием презентации.

<slide> <script global> console.log("Presentation opened"); </script> <h1>Скрипт выполнится до открытия презентации</h1> </slide>

Если же мы хотим чтобы скрипт выполнятся при открытии слайда, но только один раз, то есть при первом открытии нам нужно добавить атребут ones

<slide> <script ones> console.log("The slide opened for the first time"); </script> <h1>Скрипт выполнится при первом открытии слайда</h1> </slide>

С помощью скриптов вы можете создавать динамические элементы и анимации. Например, вы можете создать анимированную загрузку, которая будет запускаться при переходе на слайд:

<slide class="loading"> <script> Reveler.slide.on(_id, "beforeChange", function() { document.querySelector(".loading").classList.add("active"); }); Reveler.slide.on(_id, "afterChange", function() { document.querySelector(".loading").classList.remove("active"); }); </script> <div class="w-screen h-screen flex items-center justify-center"> <div class="loader"></div> </div> </slide>

Ванильный JS это конечно классно, но использовать UI библиотеки это намного лучше. В Reveler можно использовать AlpineJS, но с небольшими ограничениями (нельзя пока что использовать Alpine.data() , Alpine. store() , Alpine. bind()) и с небольшими изменениями синтаксиса. Чтобы использовать AlpineJS в место написания атребута x-data="" вы должны использовать тег <reactive> и писать всю логику в нем.

<slide class="hello relative"> <div class="w-screen h-screen flex flex-col" x-on:click="toggle" > <reactive> open: false, toggle() { this.open = !this.open; }, </reactive> <h1 class=" absolute bottom-10rem left-10rem leading-6 text-7rem font-extrabold " x-show="open" >Name ofpresentation</h1> </div> </slide>

С помощью AlpineJS вы можете создавать интерактивные слайды, которые реагируют на действия пользователя. Например, вы можете создать слайд, который будет изменять свое содержимое в зависимости от ответа пользователя:

<slide class="question"> <div class="w-screen h-screen flex flex-col" > <reactive> answer: '', </reactive> <h2 class="text-4xl font-bold mb-4">What is the capital of France?</h2> <label class="inline-block mr-4"> <input type="radio" name="answer" value="Paris" x-model="answer" > <span>Paris</span> </label> <label class="inline-block"> <input type="radio" name="answer" value="London" x-model="answer" > <span>London</span> </label> <div x-show="answer === 'Paris'"> <p class="text-xl mt-4">Correct!</p> </div> <div x-show="answer === 'London'"> <p class="text-xl mt-4">Incorrect.</p> </div> </div> </slide>

Глобальный объект Reveler имеет несколько свойств, которые позволяют управлять презентацией. В данный момент объект содержит функции для перехода на следующий и предыдущий слайд, а также функции для перехода на слайд слева и справа. Для использования этих функций необходимо написать скрипт внутри тега на слайде, который вы хотите управлять.

Например, в следующем примере мы используем функции для перехода на следующий слайд:

<slide class="hello relative"> <script> Reveler.slider.next(); </script> <div class="w-screen h-screen flex flex-col"> <h1 class=" absolute bottom-10rem left-10rem leading-6 text-7rem font-extrabold " >Name of presentation</h1> </div> </slide>

Так же можно задать переход на другой через определённое время при помощи функции moveToTime()

// Типизация функци type SideOptions = "next"|"prev"|"left"|"right"; moveToTime: (side: SideOptions, time: number, id: number) => void, // Пример использования <slide> <script> Reveler.control.moveToTime('right', 3000, _id) </script> <div class="w-screen h-screen flex flex-col"> <h1 class="text-center text-7xl font-bold"> Move to the slide on the right in 3 seconds </h1> </div> </slide>

Также в глобальном объекте Reveler есть модуль анимации GSAP, который вы можете использовать для создания анимаций в слайдах. Для использования модуля необходимо импортировать его в свой скрипт.

<slide class="hello relative"> <script> const { gsap } = Reveler; const element = document.querySelector('.my-element'); gsap.to(element, { duration: 1, x: 100 }); </script> <div class="w-screen h-screen flex flex-col"> <div class="my-element">Hello!</div> </div> </slide>

В данном примере мы импортируем модуль GSAP из объекта Reveler и используем его для анимации элемента в слайде. Вы можете использовать модуль для создания различных анимаций, например, анимации появления или изменения размера элемента.

Кроме того, в глобальном объекте Reveler есть свойства, которые позволяют получать информацию о текущем слайде. Например, функция getRow() возвращает номер строки, в которой находится текущий слайд, а функция getSlide() возвращает номер слайда в этой строке.

<slide class="hello"> <script> const row = Reveler.info.getRow(); const slide = Reveler.info.getSlide(); console.log(`Вы находитесь на ${row} строке, ${slide} слайде`); </script> <div class="w-screen h-screen flex flex-col"> <h1 class="text-4xl font-bold">Hello!</h1> </div> </slide>

В данном примере мы используем функции getRow() и getSlide() для получения информации о текущем слайде и выводим ее в консоль.

В будущем в объект Reveler будут добавлены другие функции, которые вы сможете использовать. Например, функция для перемещения на слайд через определенный промежуток времени, функции для получения информации о текущем слайде и многое другое.

Таким образом, глобальный объект Reveler предоставляет удобный способ управления презентацией и создания анимаций. Его функции и свойства можно использовать для создания более интерактивных и увлекательных презентаций.

Узнать больше про глобальный объект

2::Динамика слайдов в Reveler

Создание динамических слайдов при помощи AlpineJS

Использование глобальной переменной Reveler

При открытии слайда в консоль выведится \"Hello world\"

Скрипт выполнится до открытия презентации

Скрипт выполнится при первом открытии слайда

Name ofpresentation

What is the capital of France?

Name of presentation

\n Move to the slide on the right in 3 seconds\n

Hello!