ProCharity

О проекте

Платформа ProCharity - это место, где благотворительные фонды и волонтеры могут найти друг друга.

Сегодня фонды приходят на платформу ProCharity, чтобы познакомиться с интеллектуальными волонтерами, рассказать о крутых проектах со смыслом и найти профессионалов, которым доверят часть задач. Сотрудники фондов каждый день выполняют огромное количество задач, но зачастую им не хватает ресурсов и опытных специалистов.

Интеллектуальный волонтёр безвозмездно дарит фонду своё время и профессиональные навыки, позволяя решать задачи, которые трудно бывает закрыть силами штатных сотрудников. Он готов делиться умениями и опытом с благотворительными организациями и развиваться вместе с ними.

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

Цели реализации проекта

• Обновить страницу по регистрации волонтеров и фондов. Сделать ее интуитивно понятной, минимизировать риск ошибочной регистрации в не том кабинете;
• Обновить форму регистрации, форму заполнения личных данных волонтера, так чтобы этап заполнения был более приятный и менее утомительный для регистрирующегося;
• Повысить процент заполненности полей в профиле волонтера;
• Увеличить процент пользователей прошедших все этапы заполнения личных данных.

Макет

Ссылка на макет

Ссылка на бриф

Ссылка на бриф

Примечания для интеграции

Отображение ошибок в полях, непрошедших валидацию

В соответствии с брифом логика валидации полей формы не реализовывалась.

По умолчанию стили и контейнеры для отображения ошибок в полях ввода скрыты. Да стилизации поля как непрошедшего валидацию необходимо добавить класс .input__error контейнеру .input. Для вывода сообщения об ошибке необходимо элементу .input__error-message добавить класс .input__error-message_visible.

Отображение поля для выбора и редактирования аватара

По умолчанию на странице в блоке .avatar присутствует изображение и к контейнеру .avatar применяются стили для обработки состояния :hover.

При клике на изображение будет открыто модальное окно редактирования аватара.

В случае отсутствия img в контейнере .avatar - стили :hover для этого контейнера будут игнорироваться, а пользователь увидит форму для выбора файла.

Скрытие кнопки удаления аватара никак не обработано и не зависит от наличия / отсутствия изображения аватара. Данную логику предполагается реализовать в процессе интеграции макета.

Состояния загрузки файлов (страница "Портфолио")

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

Для реализации состояния процесса загрузки файла на сервер необходимо элементу .uploader__file-preview-container добавить модификатор uploader__file-preview-container_loading

Для стилизации элементов списка с ошибками, произошедщими во время загрузки, необходимо элементу .uploader__item добавить модификатор .uploader__item_error. В этом случае в контейнере предварительного просмотра файла будед отображена пиктограмма ошибки, а элемент .uploader__error-message, содержащий информацию об ошибке, будет вихуализирован. Предварительно необходимо заполнить элемент .uploader__error-message текстом соответствующей ошибки.

Установка значения прогресс-бара заполненности профиля

Для установки значения прогресс-бара заполненности профиля необходимо изменить свойство width элемента .progress-bar__scale в необходимое процентное значение.

Использование кастомных выпадающих списков с единичным выбором

В проекте реализованы кастомные выпадающие списки select.

Для использования нового стилизованного поля необходимо:

1. создать стандартный элемент select и вложить в него необходимое количество элементов option с обязательным указанием атрибута value и присвоением ему значения;
2. создать новый экземпляр класса CustomSelect, передав в него селектор ранее созданного элемента select.

Класс CustomSelect принимает один обязательный параметр - selector (string) и один необязательный - options (object) . Объект options принимает в калестве параметров имена классов для элементов кастомного списка, а также параметр firstOptionIsTitle.

Важно: по умолчанию параметр options.firstOptionIsTitle установлен в значение true, таким образом необходимо учитывать, что первый элемент option, разсещенный в select будет являться заголовком поля и непосредственно в выпадающий список не попадет.

С полным списком параметров можно ознакомиться в файле класса.

Использование кастомных выпадающих списков с множественным выбором

Процесс интеграции кастомных выпадающих списков с множественным выбором (multiselect) аналогичен процессу подключения обучных select, описанному выше, однако его использование имеет ряд отличий.

1. Мультиселект, реализованный в проекте, по умолчанию предполагает работу с двухуровневыми списками, но имеет возможность расширения своего функционала для работы с неограниченной вложенностью;
2. Для подключения кастомного мультиселекта необходимо создать экземпляр класса CustomMultiselect, обязательным параметром необходимо передать селектор элемента select, для которого инициализируется экземпляр.
3. Мультиселект корректно простраивает двухуровневый выпадающий список при условии, что для первого уровня вложенности используются элементы optgroup с обязательным указанием атрибута legend и присвоением ему значения; второй уроверь реализуется за счет элементов option, вложенных в opgroup;
4. Элементы optgroup не доступны для выбора, как и в стандартном элементе sselect и отвечают лишь за группировку элементов option, которые, в свою очередь кликабельны и доступны для выбора.

Пример корректно сформированного select с атрибутом multiple:

<select name="competencies" id="competencies" class="custom-select" multiple>
    <option hidden>Выбрать</option>
    <optgroup label="Дизайн и верстка">
        <option value="Тестовый вариант 1">Тестовый вариант 1</option>
    </optgroup>
        <optgroup label="Маркетинг и коммуникации">
        <option value="Социальные сети">Социальные сети</option>
        <option value="Работа с текстами">Работа с текстами</option>
        <option value="Email-рассылки">Email-рассылки</option>
        <option value="Организация мероприятий">Организация мероприятий</option>
        <option value="Реклама">Реклама</option>
        <option value="Стратегический маркетинг / Другое">Стратегический маркетинг / Другое</option>
    </optgroup>
    <optgroup label="IT">
        <option value="Тестовый вариант 2">Тестовый вариант 2</option>
    </optgroup>
</select>

Пример инициализации класса CustomMultiselect:

new CustomMultiselect('#competencies').generate();

Выбор области видимости аватара

В проекте реализован функционал добавления / изменения / удаления аватара. Он обеспечивается классом Avatar. Класс имеет 2 обязательных параметра:

• первый - объект, содержащий 3 callback-функции, отвечающие за связку класса Avatar с другими классами, такими как Cropper и Popup;
• второй - объект с перечнем css-селекторов для доступа к элементам формы управления аватаром. Данные селекторы определены непосредственно в классе Avatar, однако, в случае необходимости их можно переопределить при инициализации класса в index.js.

Для реализации изменения области видимости (обрезки) аватара в проекте использована библиотека cropperjs сайт, Github.

В проекте реализована функциональность загрузки файла аватара, выбора видимого фрагмента и предварительного просмтора результата.

Результат работы библиотеки, а именно URL-объект выбранной области аватара (изображение в формате .jpg) размещается в скрытом поле .avatar__cropped-image-input и доступен для дальнейшего использования и последующей загрузки на сервер.

Для получения параметров выделенной области изображения необходимо обратиться к методам экземпляра класса в соответствии с документацией. Инициализация библиотеки происходит в src/index.js

Установка анимации для кнопки обновления статуса профиля

В проекте предусмотрена анимация для кнопки обновления профиля. В случае необходимости визуального информирования пользователя об ожидании загрузки информации с сервера, необходимо добавить элементу .btn_type_refresh класс-модификатор btn_type_refresh-process. Пример работы кнопки с установленным модификатором расположен на странице competencies.html

Функционал показа / скрытия пароля в полях формы

В проекте реализован функционал для отображения пароля в поле ввода. Его работу обеспечивает класс PwdViewer. Конструктор класса при создании экземпляра принимает два параметра:

• fieldContainerElement - (обяхательный параметр) - элемент контейнера-обертки для поля ввода пароля и кнопки управления видимостью;
• hideOnInputEvent - (необязательный параметр, по умолчанию - true). Второй параметр отвечает за поведение поля ввода пароля. В случае, если значение установлено в true - при наступлении события input, т.е. при любом изменении значения в поле, пароль в данном поле будет автоматически скрыт. Если второй параметр установлен в false, то пароль будет видимым до повторного нажатия пользователем кнопки показать / скрыть пароль.

Будьте внимательны при внесении изменений в названия классов контейнеров / полей / кнопок или внесении изменений в структуру блоков! Обработчики очистки текстового содержимого полей и показа/скрытия пароля устанавливаются на контейнет-обертку полей и кнопок управления ими. Крайне не рекомендуется менять структуру блоков. В случае внесения изменений в имена CSS-классов, также необходимо внести соответствующие изменения в js-компоненты.