тестовое задание
Проект собран на базе конфигурации Gulp от компании 2GIS подназванием TARS (https://github.com/tars/tars). Не использует никаких CSS/JS фреймворков и библиотек.
При разработке применялись
- Jade
- Sass/SCSS
- Gulp
Для запуска проекта необходимо использовать TARS. Для работы с ним рекомендуется использовать утилиту tars-cli (https://github.com/tars/tars-cli), установить которую можно следующим образом.
# npm i -g tars-cli
$ git clone https://github.com/sosnovskyas/20160130_test-js_pic-changer.git <YOUR/PROJECT/DIR>
$ cd <YOUR/PROJECT/DIR>
$ npm i
$ # для девелоперской сборки (/dev/) c запуском вотчеров BrowserSync
$ tars dev -l
$ # для сборки релиза (/builds/build_ver-<CURRENT-DATETIME>)
$ tars build -r
pic-changer это JS виджет. Инициализируется следующим образом:
var picChanger = new PicChanger({
elem: document.querySelector('.pic-changer'),
header: 'Заголовок',
text: 'Текстовое описание использования данного приложения',
staticPath: '/static/img/content/',
imageListFile: 'pic-changer.json'
});
Необходимо указать DOM объект в котором будет размещаться виджет. Для запуска нужен путь до статики где располагаются изображения отображаемые в виджете, а так же имя файла с массивом имён изображений которые будут использоваться. Так же при инициализации указываются параметры контента, такие как заголовок и текст описания.
Работа происходит следующим образом:
- инициализируется виджет с указанными параметрами
- указанный в imageListFile файл забирается с сервера при помощи AJAX
- в файле в секции pics получается список имён файлов учавствующих в работе
- запускается интервальный таймер в котором в кажной итерации выбирается случайное изображение и случайный DOM объек (img) т для размещения этого изображения
- у выбранного DOM объекта меняется атрибут src и отображается другое изображение