20160130_test-js_pic-changer

тестовое задание

Описание

Проект собран на базе конфигурации 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 и отображается другое изображение

sosnovskyas / 20160130_test-js_pic-changer Goto Github PK