Shower 2.0

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

Shower 2.0

> WSD, 13 декабря 2015, Москва

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

История

История

Пишу движок для презентации в браузере, рассчитываю на 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;

Что сделано?
Полностью переписан движок

Было

Executable File 1066 lines (876 sloc) 24.2 KB

Стало

В деталях:

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

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

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

			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-map

			<section class="slide">
				<ymap data=center="55,37" data=zoom=17>
					<placemark data-coords="55,37"/>
				</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>

Почитать bit.ly/1SVyz4a

shower-mirror

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

shower-mirror

			// Запускаем сервер.
			npm i shower-mirror-server
			npm run: shower-mirror-server run KEY123
		
			<script src="server/socket.io/socket.io.js">
			<body class="shower list" data-server="server:1000">
		
http://site/index.html ?key=KEY123

shower-mirror

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

npm publish

shower/core
shower/shower

Shower 2.0

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

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