polySlides V1.0 Beta

polySlides — это инструмент, который помогает создавать HTML-слайды. Для этого нужно написать файл в формате JSON.

polySlides — 一个只需要写一个json文件就能帮你制作HTML5演示文档的工具框架

Demo

http://garzon.github.io/polySlides

Features — 特色

• На основе HTML5, Polymer, удобно встраивать HTML + JS.
• Нужно написать только один простой JSON, не требуется механическое повторение вёрстки, быстрое создание слайдов, позволяет создателю сосредоточиться на содержании.
• Можно гибко настраивать собственные шаблоны слайдов (на основе Polymer).
• Поддерживает автовоспроизведение, настраиваемую последовательность переходов слайдов и т. д.

Start

Нужно запустить простой HTTP-сервер в каталоге, например:

$ python -m SimpleHTTPServer

и открыть localhost:8000 в браузере.

Или можно разместить его на GitHub.io.

Tutorial

Вам нужно изменить /slides/slides.json, все вложения можно поместить в /slides/

Формат JSON

/slides/slides.json определяется следующим образом, вы можете обратиться к Example файлу для модификации:

[  
   global_config,
   slide,  
   slide,  
   ...  
]

Затем структура slide:

[  
   local_config,  
   [
      node, 
      node, 
      node,
      ...
   ]  
]

И структура node:

[ 
   TAG_NAME, 
   INNER_HTML or subnodes
] 

где:

— TAG_NAME (необязательно, по умолчанию «p»): почти то же самое, что и HTML. Если это «h1», INNER_HTML также будет заголовком слайда и будет помещён в боковое меню. Обычно это «p» (для текста), «b» (полужирный шрифт), «h1» (заголовок) или «img» (изображение). На самом деле некоторые TAG_NAME отличаются от HTML. Например, iframe даже не является реальным HTML-элементом iframe. Вы можете посмотреть polySlides_defaultConfig.js, где определена карта этих специальных TAG_NAME (window.polySlides.tagMap).

— INNER_HTML: обычно это атрибут .innerHTML тега HTML. Но если TAG_NAME — это какой-то специальный TAG_NAME, такой как img или iframe или a или ... (что также определено в polySlides_defaultConfig.js), это будет атрибут .src тега, указывающий на файл, который должен быть включён. Вы можете посмотреть polySlides_defaultConfig.js, где определены обработчики этих специальных TAG_NAME (window.polySlides.handlers и window.polySlides.innerHandlerName).

Структура subnodes:

[ 
   node,
   node,
   ...
] 

node определён выше.

Конфигурация определяется следующим образом:

{
    "template": TEMPLATE_NAME,
    "background": BACKGROUND,
   "js": JS_PATH, 
   "next": NEXT_SLIDE,
   "autoplay": DELAY_TIME
}

— TEMPLATE_NAME: определяет, какой шаблон используется для рендеринга слайда, файлы шаблонов находятся в /components/polyslides/ployslides-TEMPLATE_NAME.html. Вы также можете создать свой собственный шаблон (возможно, потребуется знание Polymer).

— BACKGROUND: фоновое изображение слайда.

— JS_PATH: файл сценария JavaScript, который необходимо включить в слайд, обычно пустой, используется при встраивании HTML (iframe).

— NEXT_SLIDE: следующий слайд.

— DELAY_TIME: время задержки перед переходом к следующему слайду. DELAY_TIME (в миллисекундах) — после задержки в DELAY_TIME миллисекунд автоматически происходит переход к NEXT_SLIDE. Чтобы отключить задержку, достаточно установить значение «0».

• DELAY_TIME: 经过 DELAY_TIME (毫秒) 后, 自动跳转到 NEXT_SLIDE 指定的幻灯片。此项设为 0 则关闭自动跳转功能。适宜用来做相册功能。

• NEXT_SLIDE определяет слайд, который будет показан при нажатии на слайд:

  • -> +X: переход к X-му слайду, следующему за текущим.
  • -> -X: переход к X-му слайду перед текущим.
  • -> =: ничего не происходит при нажатии. Это полезно, когда вы хотите разместить кнопку на слайде и при её нажатии переход на следующий слайд не произойдёт.
  • -> X: переход к X-му слайду (нумерация начинается с 0).

По умолчанию параметры определены в файле polySlides_defaultConfig.js:

The default config is defined in polySlides_defaultConfig.js as:

window.polySlides.defaultConfig={ 
   "background": "#FFFFFF", 
   "template": "default", 
   "js": "", 
   "next":"+1",
   "autoplay":"0"
};

Можно оставить "{}" в global_config или local_config, если вы хотите установить local/global_config в значение defaultConfig.

Log

• V1.0 Beta: +autoplay