ШРИ 2016 (Задание №1)
Описание задания можно посмотреть здесь. Ссылка на gh-pages: Телепрограмма
Ресурсы, используемые при выполнении задачи
-
JSON файл, конвертированный из XML, с программой передач на неделю. Источник: teleguide.info.
Данный файл служит информационной базой, с помощью которой заполняется страница.
-
Gulp + plugins: sass, babel(preset-es2015), concat, autoprefixer, rename, uglify
gulp-sass? Мне удобнее писать стили в формате .scss. Данный плагин помогает преобразовать все в .css.
gulp-autoprefixer? Удобный плагин для простановки префиксов стилей для различных браузеров.
gulp-babel? Пока браузеры не начнут поддерживать ES2015 на ~100%, данный плагин будет помогать перегонять синтаксис ES2015 в привычный ES5. -
Jquery
Использование JavaScript
Вы просили описать тут или в коде ход мыслей, если буду использовать JS.
В коде описан принцип работы каждой функции, но я опишу процесс работы страницы в общих чертах, чтобы стало понятно как и что работает.
На странице имеются три функциональные области:
- фильтр дней недели
- фильтр жанров телепередач
- сетка телепередач каждого канала
Сетка телепередач строится динамически. Как это происходит? Функция пробегает по всем телеканалам. Для каждого из каналов перебираются все его телепередачи и, на основе шаблона, происходит рендеринг списка передач, который в свою очередь включается в рендеринг самого канала. Таким образом, пробегая по всем каналам, мы получаем готовую сетку на текущую дату.
Кликая по определенному дню недели в фильтре, каждый раз отрисовывается новая сетка, соответствующая выбраной дате.
При клике на определенный жанр в фильтре жанров, происходит поиск элементов, соответствующих выбраному, и если таковые находятся, то дата этих элементов окрашивается в цвет выбраного жанра. Фильтры жанров работают независимо. Можно выбрать несколько.
Поскольку верстка адаптивная, то для мобильных и планшетов фильтры изменяются на элементы "select". Работа фильтра дней недели при этом не изменяется, а вот фильтр жанров работает следующим образом: при выборе определенного жанра, происходит поиск соответствующих элементов. Все элементы не прошедшие проверку исчезают, включая сами телеканалы, если в них не нашлись нужные элементы. Особенность в том, что одновременно работает только один фильтр.