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

В данном тестовом задании вам необходимо реализовать "вьюшку" дропдауна. Он должен уметь следующее:

• Открываться при нажатии на кнопку "Menu" (по умолчанию скрыт)
• Закрываться при клике за пределами списка
• При нажатии на элемент выпавшего меню:
  • название нажатой кнопки должно выводиться в консоль
  • выпадающая часть дропдауна должна скрыться

Для работы вам потребуется файл js/constructors.js. Он реализует модели и вьюшки. За создание вьюшки отвечает ru.mail.cpf.Basic.getView(). В том, какие аргументы он принимает и как работает, вам необходимо разобраться самостоятельно, изучив исходный код.

В качестве каркаса вам предложен вариант верстки и css — их можно смело корректировать так, как вам потребуется для работы.

Пример реализации вьюшки для кнопки, которая меняет текст в другом элементе, есть в директории example.

Дополнительные требования

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

2. Реализуйте смену состояния у элементов выпадающего меню:

   2.1. При клике на еще не выбранный элемент он должен становиться активным (подсвеченным).

   2.2. CSS-модификаторы, определяющие состояния элементов, должны иметь возможность переопределяться через опции при создании инстанса дропдауна.

3. Все вьюшки, создаваемые при помощи конструкторов из constructors.js являются event emitter-ами. Необходимо использовать этот функционал для следующей цели:

   3.1. Добавьте в верстку произвольный контейнер, например, div.

   3.2. При изменении активного элемента необходимо выводить в созданный выше контейнер текст активного элемента.

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

4. В прототип дропдауна необходимо добавить метод getState. Он должен возвращать актуальное состояние инстанса. То, как реализовать хранение, актуализацию и выдачу состояния инстанса, спроектируйте самостоятельно. Список того, что должно описывать состояние инстанса, спроектируйте самостоятельно.

5. Если вы видите места, которые можно улучшить, сделайте это, сопроводив изменения комментариями в коде.

6. Хорошим решением будет использование комментариев в коде.