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