Shower 2.0

История

Пишу движок для презентации в браузере, рассчитываю на Opera, FF и Safari с плагином, хотя последние и не переключаются в projection…

— Вадим Макеев (@pepelsbey) 6 апреля 2010

6 апреля 2010 года

История

Опубликовал движок для презентаций «Shower» на GitHub'е: http://github.com/pepelsbey/shower — вопросы и предложения в Issues.

— Вадим Макеев (@pepelsbey) 30 октября 2010

4:55 утра 30 октября 2010 года

4:55

1.x -> 2.0

История

Вторая версия началась 4 мая 2014.
Сейчас от старой версии мало что осталось.

before

after

before

after

after

Material

			// styles/_defaults.scss
			$color: #43A047;
			$black: mix(black, white, 87%);
			$dark: mix(black, white, 54%);
			$medium: mix(black, white, 38%);
			$light: mix(black, white, 26%);
			$back: #EEE;
		

Было

Стало

В деталях:

• модульная структура;
• появились юнит-тесты;
• нормальное API и события;
• плагины.

Модульная система

• Используется ymaps/modules
• Позволяет использовать асинхронный require / provide
• Написал @dfilatov, автор vow

Модульная система: что есть

• modules.require
• modules.define
• modules.isDefined
• shower.modules = modules.create()

Модульная система: пример

			modules.define('loader', provide => {
				$.script(
					'http://my-plugin-url',
					(Plugin) => provide(Plugin)
				);
			});
		

Что такое Ymodules: bit.ly/ymodules

Модуль плагина

			shower.modules.define('shower-plugin', [
				'depend'
			], (provide, depend) => {
				…
				provide(plugin);
			});
	

Плагин

			class MyPlugin {
				constructor(shower, options) {
					…
					shower.container.enterFullscreen();
				}
			}
		

Cобытия

			setupListeners() {
				this._shower.player.events
					.on(['next', 'prev'], this._onSlideChange, this)
			}
		

			on(events, callback[, context])
			off(events, callback[, context])
			offAll()
		

Автоинициализация

			shower.modules.require([
				'shower'
			], showerGlobal => {
				showerGlobal.plugins.add('shower-plugin');
			})
		

Доступны из коробки

• shower-progress
• shower-timer
• shower-next
• shower-touch
• shower-notes

shower-map

			<section class="slide">
				<ymap center="33, 55" zoom=15>
					<placemark/>
				</ymap>
			</section>
		

npm i shower-map

shower-map: как

1. при инициализации грузим API карт
2. после загрузки пробегаем по слайдам

			shower.getSlides()
			slide.layout.getElement()
			element.querySelectorAll('ymap')
		

shower-markdown

			<section class="slide markdown">
				## markdown plugin
				- one
				- two
				- three
			</section>
		

npm i shower-markdown

shower-markdown

			::: slide
				## markdown plugin
				- one
				- two
				- three
		

npm i shower-markdown

shower-speech-control

			<section class="slide"
				data-speech-bookmark="африка"
			>
				<img src="pictures/africa.jpg">
			</section>
		

shower-mirror

Приходилось ли вам показывать презентацию в распределенных командах?

shower-mirror

			// Запускаем сервер.
			npm i shower-mirror-server && \
				KEY=1234 run shower-mirror
		

			
			// Указываем адрес сервера
			<script src="server/socket.io/socket.io.js">
		

http://site/index.html ?key=1234

shower-mirror

			shower.player.events // activate
			globalShower.plugins.get(plugin, shower);
			plugin.events // next
		

GH/shower/   core
  shower

Shower 2.0

Денис Хананеин

• zloy.me
• twitter.com/kandasoft
• i@zloy.me

Презентация: zloy.me/talks/shower