Kekstagram

О проекте

Kekstagram — это сервис для обмена фотографиями. Пользователям предоставлена возможность загружать свои фотографии, которые можно редактировать с помощью фильтров и организовывать с помощью хештегов. Пользователи могут просматривать контент других пользователей, ставить лайки и оставлять комментарии.

Сайт Kekstagram Репозиторий на GitHub

Техническая реализация

Общая информация

Kekstagram представляет собой одностраничный сайт, адаптированный под любое разрешение экрана устройства пользователя.

Стек: HTML5, CSS3, JavaScript(ESM), БЭМ, Sass, Gulp, Pristine, noUiSlider.

Загрузка нового изображения на сайт

Выбор изображения

Выбор изображения для загрузки осуществляется с помощью стандартного контрола загрузки файла, который стилизован под букву «О» в логотипе. После выбора изображения, отображается форма редактирования изображения.

Изменение масштаба

Изменение масштаба изображения происходит после нажатия на кнопки «-» и «+» с шагом в 25%. Максимальное значение - 100%, минимальное - 25%. Значение по умолчанию - 100%.

Наложение эффекта

На изображение может накладываться один из эффектов: Хром, Сепия, Марвин, Фобос, Зной.

Интенсивность эффекта регулируется перемещением ползунка в range слайдере. Слайдер реализован сторонней библиотекой noUiSlider.

Валидация формы

Для полей «ХэшТег» и «Комментарий» предусмотрена валидация перед отправкой на сервер и, непосредственно, в момент заполнения. Значение поля проходит проверку на соответствие установленному правилу (регулярному выражению). В случае некорректного заполнения поля, в интерфейсе отображается текст ошибки. Валидация формы реализована сторонней библиотекой Pristine.

Отправка данных на сервер

После заполнения всех данных, при нажатии на кнопку «Опубликовать», все данные из формы, включая изображения, с помощью AJAX-запроса отправляются на сервер. На время выполнения запроса к серверу кнопка блокируется.

В случае успешной отправки данных на сервер, форма редактирования изображения закрывается, и отображается соответствующее сообщение. Все данные, введённые в форму, и контрол фильтра приходят в исходное состояние:
- масштаб возвращается к 100%;
- эффект сбрасывается на «Оригинал»;
- поля для ввода хэш-тегов и комментария очищаются;
- поле загрузки фотографии, стилизованное под букву «О» в логотипе, очищается.

Если при отправке данных произошла ошибка запроса, тогда отображается соответствующее сообщение об ошибке. Вся введённая пользователем информация сохраняется, для возможности повторной отправки формы.

Сортировка загруженных изображений

Загрузка изображений от других пользователей производится с удалённого сервера сразу после открытия страницы. Все загруженные изображения показаны на странице в виде миниатюр.

После получения данных от сервера, на странице отображается блок для сортировки изображений.

Доступные сортировки:
«По умолчанию» — фотографии в изначальном порядке с сервера;
«Случайные» — 10 случайных, не повторяющихся фотографий;
«Обсуждаемые» — фотографии, отсортированные в порядке убывания количества комментариев.

При изменении сортировки, в целях устранения дребезга, отрисовка изображений, производится не чаще, чем один раз 500 мс.

Просмотр изображений

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

Максимальное количество отображаемых комментариев по умолчанию равно пяти. При нажатии на кнопку «Загрузить еще» отображается не более пяти новых комментариев. Если все комментарии показаны, кнопка скрывается.