Архитектура проекта Медиашоу

Содержание

Слайд 2

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

В презентации Слайды В слайдах Фреймы Во фреймах Слои

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS

Слайд 3

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Синяя рамка – контекст Vue.js Персиковая

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
рамка – Компоненты VueSlide, являющиеся рамочными с точки зрения контента и кода VueSlide служат в роли контейнеров и связующих элементов между двумя контекстами Vue.js и Vanilla JS

Слайд 4

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Зелёная рамка – контекст скриптов

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
Vanilla JS Эти скрипты в контексте компонентов Vue.js являются контентом (текстом). Далее они размещаются в DOM браузера и становятся исполняемым кодом Скрипты Слайдов, Фреймов и Лейеров нужны для манипулирования контентом в DOM. Также, скрипты Слайдов нужны для связки контекста Vanilla JS с контейнерным компонентом VueSlide

Контекст скриптов Vanilla JS

Слайд 5

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Зелёная рамка – контекст скриптов

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
Vanilla JS Эти скрипты в контексте компонентов Vue.js являются контентом (текстом). Далее они размещаются в DOM браузера и становятся исполняемым кодом Скрипты Слайдов, Фреймов и Лейеров нужны для манипулирования контентом в DOM. Также, скрипты Слайдов нужны для связки контекста Vanilla JS с контейнерным компонентом VueSlide

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML (как текст)

JS (как текст)

HTML Слайда (как код)

JS Слайда (как код)

размещает в DOM текст контекстного кода, как исполняемый код

Слайд 6

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

HTML Слайда – бордюрное оформление

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
Страницы (например, номера вопросов в туре) Код JS Cлайда нужен для манипулирования контентом (в том числе Бордюрным HTML Слайда) и связки с Родительским объектом (VueSlide) Зелёная стрелка показывает управляющее взаимодействие контекстов

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Слайд 7

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Код JS Cлайда получает от

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
VueSlide вложенную структуру (Frame). Это скрипты JS Фрейма Код JS Cлайда размещает скрипты JS Фрейма в DOM как код

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

Layer 1
HTML JS

JS (как текст)

Layer 2
HTML JS

JS Фрейма (как код)

размещает в DOM текст JS кода, как исполняемый код

Слайд 8

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Код JS Фрейма получает от

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
JS Cлайда вложенную структуру (Layer). Это скрипты JS Лейера и разметка HTML Лейера Код JS C Фрейма размещает тексты кодов Лейера в DOM как код

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

Layer 1
HTML JS

Layer 2
HTML JS

JS Фрейма (как код)

размещает в DOM тексты кодов, как исполняемый код

HTML Лейера (как код)

JS Лейера (как код)

Запрашивает у JS Слайда и…

Слайд 9

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

JS Лейера служит для манипуляций

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
контентом Лейера (простейшие анимации, типа «исчезание плашки») HTML Лейера – конечный контент основной области Страницы

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

Layer 2
HTML JS

JS Фрейма (как код)

HTML Лейера (как код)

JS Лейера (как код)

Слайд 10

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Код JS Фрейма получает от

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
JS Cлайда все имеющиеся лейеры Благодаря тому, что у лейеров есть свойства, назначаемые создаваемым div-ам “as is” мы можем разместить слои в нужной последовательности с помощью z-index Это обеспечивает правильность построения «пирога» слоёв

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

Layer 2
HTML JS

JS Фрейма (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

Слайд 11

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

В этот момент весь Div

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
инстанса первого слайда компонента VueSlide выглядит так div Фрейма порождается кодом JS Фрейма, для размещения на нём дочерних слоёв Временно забудем про div фрейма, ради экономии места. Но вспомним о нём позже

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

JS Фрейма (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда (Бордюр) номер вопроса в туре

div frame 1

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Слайд 12

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

На самом деле, мы имеем

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
в наличии сразу два слайда (для плавности переключения). То есть следующий слайд должен быть тоже срендерен и ждать наготове

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

JS Фрейма (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Слайд 13

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Это не должно вызывать проблем,

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
так как по сути всё, что описано выше - это workflow конструктора

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Слайд 14

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

То есть мы имеем Два

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
готовых к показу слайда и можем мягко их переключать…

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Слайд 15

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

… с помощью Менеджера Слайдов

Контекст

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Слайд 16

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Менеджер Слайдов порождает, переключает (используя

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
анимацию влияния на opacity компонентов VueSlide) и утилизирует объекты слайдов после публикации, освобождая память браузера

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Слайд 17

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Сам Менеджер Слайдов получает команды

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
управления от внешних объектов (компонентов). Например, канал управления от сервера QUIZBOX, основанный на WebSockets

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Слайд 18

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Всё готово к работе. Слайд

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
1 активен и отображается. Слайд 2 заготовлен и ждёт звёздного часа. Дальше - динамические процессы!

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Слайд 19

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

1. По каналу управления приходит

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
команда «GO» (или Step) 2. Так как менеджер не знает состояния дел в подсистеме контента, он может только ретранслировать команду глубже в систему, ожидая результат выполнения

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO

GO

Слайд 20

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

3. По каналу управления VueSlide

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
приходит команда «GO» от VSM 4. Так как VueSlide не знает состояния дел в подсистеме контента, он может только ретранслировать команду глубже в систему, ожидая результат выполнения

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO

GO >>

Слайд 21

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

5. По каналу управления Vanilla

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
приходит команда «GO» от VueSlide 6. Так как Vanilla не знает состояния дел в подсистеме контента, она может только ретранслировать команду глубже в свою систему, ожидая результат выполнения

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

Слайд 22

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

5. JS Фрейма точно знает,

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
что делать: в DOM есть функция LayerStep (пришла из JS лейера 1). Выполняем её 6. LayerStep выполняется (кстати, плашка растворяется), возвращая код ошибки ”0” (или иначе, но суть - Ok)

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

LayerStep

5.run

6. Ok

Div opacity >> 100%

Слайд 23

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

7. Вернули Ok 8. Вернули Ok
9.

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
Вернули Ok
10. Вернули Ok

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

10.Ok

<< 8.Ok

7. Ok

9. Ok

Слайд 24

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Народ порадовался правильному ответу Идём дальше По

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
каналу управления приходит «GO»

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

Слайд 25

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Пока что всё как прежде…

Контекст

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

GO

GO

Слайд 26

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Пока что всё как прежде…

Контекст

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

GO

GO

LayerStep

5.run

Слайд 27

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Но контекст функции LayerStep обнаруживает,

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
что работа уже выполнена (флаг done==true) либо opacity целевого слоя == 100% Поэтому возвращает NoJob

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

GO

GO

LayerStep

5.run

Слайд 28

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Вот так. И это меняет дальнейший

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
ход событий

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

GO

GO

LayerStep

run

NoJob

Слайд 29

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

JS Фрейма понимает, что работа

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
фрейма завершена и отправляет NoJob выше по «инстанциям». Кстати, может по ходу выполнить какой-либо полезный код

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

GO >>

GO

GO

NoJob

NoJob

Слайд 30

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

JS Слайда, получив NoJob, пытается

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
продолжить работу, запросив от VueSlide очередной фрейм (либо заранее держит его наготове, как VSM заготавливает новый слайд)

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

<< GetNextFrame

GO

GO

NoJob

NoJob

Слайд 31

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Существует второй слайд – получен

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
успешно:

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

<< GetNextFrame

GO

GO

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

..включая «внутренности» (работа конструктора)

Слайд 32

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Теперь имеем оба фрейма на

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
divs:

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 1

HTML Лейера 2 вопрос-картинка

div frame 2

HTML Лейера 1 вопрос-текст

Слайд 33

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 1

HTML Лейера 2 вопрос-картинка

div frame 2

HTML Лейера 1 вопрос-текст

Продолжая исполнять свой контекст, JS Слайда, имея следующий фрейм может сделать смену фреймов

Слайд 34

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 1

HTML Лейера 2 вопрос-картинка

div frame 2

HTML Лейера 1 вопрос-текст

Делается параллакс, после чего старый отработанный фрейм утилизируется (выгружается)

Слайд 35

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

Frame 1

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 1

HTML Лейера 2 вопрос-картинка

div frame 2

HTML Лейера 1 вопрос-текст

Делается параллакс, после чего старый отработанный фрейм утилизируется (выгружается)

Выгрузить из DOM

Слайд 36

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре ++

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

.

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

А одновременно с выполнением параллакса, наращивается и номер вопроса в туре

QN++

Слайд 37

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

<< Ok

GO

GO

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

Успешная операция по смене фрейма завершена. JS Слайда рапортует «наверх» кодом Ok (в ответ на принятую ранее команду GO)

Слайд 38

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

<< Ok

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

Как обычно, код Ok достигает инициатора. Шаг завершён

Ok

Ok

Слайд 39

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

Но следующая команда GO выполнится иначе: на запрос JS Слайда о следующем фрейме – будет отказ (NoMoreFrames) Значит, JS Слайда не сможет заготовить очередной слайд после утилизации предыдущего

<< GetNextFrame

GO

GO

>> NoMoreFrames

Слайд 40

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

И если JS Слайда не сможет произвести смену фреймов, то ответом на команду GO в VueSlide будет всё тот-же NoJob

>> GO

GO

GO

<< NoJob

Слайд 41

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

«Прозрачный» VueSlide ретранслирует NoJob своему «начальнику» VSM

GO

<< NoJob

NoJob

Слайд 42

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

VueSlideManager производит визуальную смену слайдов, управляя стилями компонентов VueSlide

GO

<< NoJob

FadeIn

FadeOut

Слайд 43

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

По окончанию морфа, VSM переключает ссылку Текущего Слайда…

GO

<< NoJob

CurrentSlide

Слайд 44

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Контекст скриптов Vanilla JS

JS код

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
компонента VueSlide

HTML Слайда 1 (как код)

JS Слайда 1 (как код)

HTML Слайда 1 (Бордюр)
номер вопроса в туре

JS код компонента VueSlide

HTML Слайда 2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Frame 2

JS Фрейма 2 (как код)

HTML Лейера 1 (F2) (как код)

JS Лейера 1 (F2) (как код)

div frame 2

HTML Лейера 1 вопрос-текст

…утилизирует предыдущий слайд (VueSlide) и отвечает «наверх» Ok Параллельно, создаётся следующий слайд

<< NoJob

CurrentSlide

Ok

CurrentSlide

Выгрузить из DOM

Слайд 45

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

JS код компонента VueSlide

HTML Слайда

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
2 (как код)

JS Слайда 2 (как код)

JS Фрейма 1 (как код)

HTML Лейера 1 (как код div z-index=100)

JS Лейера 1 (как код)

HTML Лейера 2 (как код div z-index=200)

JS Лейера 2 (как код)

HTML Слайда 2 (Бордюр) номер вопроса в туре

HTML Лейера 2 вопрос-картинка

HTML Лейера 1 Плашка

Менеджер Слайдов (VueSlideManager)

Это продолжается, пока не закончатся слайды. После последнего слайда VSM рапортует «наверх» NoJob

CurrentSlide

Контекст скриптов Vanilla JS

Слайд 46

Presentation doc

Slide 1

Frame 1

Layer 1
HTML JS

HTML

JS

JS

Layer 2
HTML JS

Контекст компонентов Vue.js

VueSlide

VueSlide

Динамический контент: Если при загрузке из

Presentation doc Slide 1 Frame 1 Layer 1 HTML JS HTML JS
структуры презентации у Лейера(или у Фрейма или у Слайда) обнаруживается свойство Dynamic, то данный контент запрашивается компонентом VueSlide у сервера QBOX, который рендерит его из актуальных данных (например, список команд, вопросы или таблица результатов) Имя view может быть указано значением Dynamic, например: dynamic = “teams_table:template.tmpl” Шаблон для рендера должен передаваться в составе статических файлов презентации

Контекст скриптов Vanilla JS

JS код компонента VueSlide

HTML Слайда (как код)

JS Слайда (как код)

Frame 1

Layer 1
HTML JS

Layer 2
HTML JS

JS Фрейма (как код)

размещает в DOM тексты кодов, как исполняемый код

HTML Лейера (как код)

JS Лейера (как код)

Запрашивает у JS Слайда и…

Получение актуального контента от сервера

от QBOX-Server

Имя файла: Архитектура-проекта-Медиашоу.pptx
Количество просмотров: 34
Количество скачиваний: 0
- Предыдущая
Proгород. Забытая мастерская
Следующая -
Стратиграфическая шкала

Похожие презентации

Электр озушылы
Организаторы Союз парикмахеров и косметологов России (СПиКР) В настоящее время Союз парикмахеров и косметологов России (СПиКР) явл
Собор Парижской Богоматери 9 класс
Художники хх века
Пестициды
Harmony with the World
Презентация на тему Графический редактор PAINT
ЭКО ЛИНИЯ
Промышленные антикоррозионные материалы ТЕКНОС для современного нефтегазового комплекса
Сахароза
Воспитание культуры здоровья средствами физкультуры и спорта в образовательной среде кадетской школы
Словарь жестов
Автомобилестроение, авиастроение. Легкая и мебельная промышленность
Недвижимость. Торги, лот №9, г. Хабаровск
Питание –необходимое условие для жизни человека
Ханаанейская мифология
Урок 2. Ветвление (1)
Метод проектов
Что в имени тебе моём?
Паттерны проектирования
Продвижение микрорайона Звёздный
Современный дизайн. Место дизайна в современном мире. Тренды в графическом дизайне
Как избежать соблазнов
Сульфур
История Т-34
Загальні положення правил та безпеки дорожнього руху (продовження)
Инопланетные цивилизации
Тесты
LiveInternet
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть