Для создания Emmet было создано несколько сторонних проектов, с которыми я вас познакомлю в нескольких постах этого блога.
Первое, с чем я хотел бы вас познакомить, это CodeMirror Movie. Его вы можете у видеть на многих страницах сайта с документацией: это тот самый механизм, который показывает интерактивные презентации.
Когда я только начинал работу над документацией, мне хотелось более наглядно показать работу действий Emmet. Читать длинные тексты, описывающие особенности работы, всегда скучно и утомительно, гораздо приятнее смотреть как это работает «в живую».
Обычно такие задачи решаются записью видео-роликов, но такой вариант не устраивал меня по многим причинам:
- Запись качественного ролика требует слишком много времени. Например, на создание шестиминутного ролика про Zen Coding v0.5 у меня ушло около четырёх часов.
- Видео довольно сложно обновлять. Например, если обнаружится ошибка или пользователям будет не понятно, как работает какое-то действие, скорее всего, понадобится ещё несколько часов на перезапись ролика.
- Так как сам Emmet написан на чистом JS (а значит работает в браузерах), хотелось, чтобы пользователи не только смотрели, как работает Emmet, но и пробовали его в действии прямо на страницах документации.
Для решения этих и многих других проблем и был создан CodeMirror Movie. Принцип его работы довольно прост: вы создаёте небольшой сценарий, в котором указываете, что нужно сделать, например, написать текст, немного подождать, а потом показать всплывающую подсказку.
Как можно догадаться из названия, в основе проекта лежит замечательный редактор CodeMirror, а это значит, что вы можете создавать презентации для любого языка программирования, который поддерживает этот редактор.
Создание презентации
Как правило, для создания экземпляра редактора CodeMirror вы создаёте элемент <textarea> с начальным содержимым редактора и вызываете следующий JS-код:
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
Создать презентацию так же легко: вы создаёте <textarea> с начальным содержимым редактора и дописываете туда сценарий презентации, разделив эти секции строкой @@@:
<textarea id="code">
<div class="content">
|
</div>
@@@
type: Hello world
wait: 1000
tooltip: Sample tooltip
</textarea>
Для инициализации ролика нужно вызвать метод CodeMirror.movie(), передав первым параметром ID элемента <textarea> или сам элемент:
var movie = CodeMirror.movie('code');
// начинаем воспроизведение
movie.play();
Сценарий презентации
Как было отмечено выше, для создания презентации вам нужно написать её сценарий.
Сценарий представляет собой список команд, которые нужно выполнить. Каждая команда пишется на отдельной строке в виде название: значение. В качестве значения записывается JS-объект с параметрами команды, однако каждая команда имеет довольно неплохие базовые значения, поэтому достаточно передать всего лишь значение самого главного параметра. Например, вот как выглядит сценарий ролика, который должен набрать «Hello world», а через секунду после завершения набора показать всплывающую подсказку с текстом «Movie tooltip»:
type: Hello world wait: 1000 tooltip: Movie tooltip
Более подробную информацию о всех командах и примеры использования можно найти на странице плагина. Сам плагин вы можете использовать как угодно (лицензия MIT), особенно хорошо он будет смотреться в JS-движках презентаций вроде impress.js или reveal.js. Надеюсь, вам понравится!