TimelineJS

О библиотеке

TimelineJS – понятная и функциональная Javascript библиотека для создания интерактивных хронологических лент в виде слайдера по временным событиям. На слайды можно добавлять текст, изображения, видео, аудио. Под слайдером располагается шкала времени, на которой флажками отмечены события как разовые, так и растянутые во времени. Такую презентацию можно легко выложить в интернете на любой странице. Библиотека бесплатная.

Принципы

Как простой пользователь этой библиотеки постараюсь объяснить всё простым языком. Пользовательский контент в виде текстовок и общей композиции презентации может храниться в двух местах на выбор на выбор:

1. В таблице Google Sheets. Пример проекта.
2. В JSON формате в файле index.htm или другом. Пример проекта.

Конечно, вряд ли какой проект обойдется без изображений, тогда еще прибавляются пользовательские медиа-ресурсы.

В случае с Google Sheets вы создаете одну ссылку, в которой будет прописан id вашей таблицы. Ссылку можно открывать на всё окно браузера или в iframe.
В случае с JSON проект TimelineJS состоит из трех основных файлов:

1. timeline.js – код библиотеки;
2. timeline.css – оформление элементов интерфейса;
3. index.htm – точка входа для браузера, в нем прописаны пути к js, css и контенту проекта в формате JSON.

Еще в проекте навигационные стрелки на слайде и иконки по-умолчанию на таймлайне исполнены посредством шрифта. Так вот, если вы ведете независимый образ жизни и хотите всё по своему проекту хранить локально, то надо еще эти шрифты (tl-icons в разных форматах) также сохранить локально и прописать к ним пути в timeline.css.

Любой разработчик может обратиться к библиотеке тремя способами:

1. По одной ссылке, в которой будет прописан id вашей таблицы в Google Docs;
2. По двум ссылкам на timeline.js и timeline.css, которые хранятся на CDN сервере проекта;
3. По двум ссылкам на timeline.js и timeline.css, которые хранятся у вас локально.

Навигация по слайдам может осуществляться тремя способами:

1. Кнопками-стрелками справа и слева экрана;
2. Клавишами-стрелками на вашей клавиатуре;
3. С помощью флажков на таймлайне.

Группировка событий

Это визуальное отделение флажков событий на таймлане по своим вертикальным уровням. Для этого нужно, например, в JSON, в разделе "events": [] прописать ключ group, значением которого будет та или иная группа. Например: "group":"Закупщик". В Google таблице также есть столбец Group. В результате таймлайн выглядеть будет примерно так:

Здесь "Закупщик" и "Поставщик" – это две группы. События на таймлайне распределены на двух уровнях, согласно тому, кто это событие осуществляет закупщик или поставщик.

Ресурсы

• http://timeline.knightlab.com/ – центральный вход в проект TimelineJS, здесь вы получите исчерпывающую информацию о библиотеке, а конкретно на этой странице сможете быстро набросать свой проект, сохранить его и получить ссылку.
• http://timeline.knightlab.com/docs/using-spreadsheets.html – расшифровка столбиков в Google таблице.
• Шаблон Google таблицы, который вы можете скопировать на свой Google Disk и отредактировать под свой проект.
• http://timeline.knightlab.com/docs/json-format.html – элементы JSON, которые отвечают за данные слайдов и таймлайна. При создании первого своего проекта я упорно сидел на этой странице.
• http://timeline.knightlab.com/docs/options.html – опции, с которыми может запускаться timeline.js, их прописывают в скрипте js в index.htm. Эти опции действуют на весь проект.
• http://timeline.knightlab.com/docs/overriding-styles.html – классы стилей, которые перекроют timeline.css, если вы их пропишите в другом месте, например, в том же index.htm. Для большинства таких перекрытий надо добавлять !important.
• Пример проекта с Google таблицей, который я сделал просто для быстрого теста. Вы можете открыть источник индексного файла и посмотреть структуру ссылки на таблицу.
• Пример проекта с JSON, который я сделал для презентации программы Cover Commander. Вы можете открыть источник индексного файла и посмотреть как устроен JSON.