Создание компонента Multiselect в качестве веб-компонента

 multiselectPrototype.removeTag = function(tag, item, event) { // unselect item item.removeAttribute('selected'); // prevent event bubbling to avoid side-effects event.stopPropagation(); // refresh multiselect field this.refreshField(); }; 

Откройте всплывающее окно и выберите элемент

Когда пользователь нажимает на поле, мы должны показать всплывающее окно. Когда он / она нажимает на элемент списка, он должен быть помечен как выбранный, а всплывающее окно должно быть скрыто.

Для этого мы обрабатываем клики по полю и списку товаров. Давайте добавим метод attachHandlers в render :

 multiselectPrototype.render = function() { this.attachHandlers(); this.refreshField(); }; multiselectPrototype.attachHandlers = function() { // attach click handlers to field and list this._field.addEventListener('click', this.fieldClickHandler.bind(this)); this._list.addEventListener('click', this.listClickHandler.bind(this)); }; 

В поле обработчика щелчков мы переключаем видимость всплывающего окна:

 multiselectPrototype.fieldClickHandler = function() { this.togglePopup(); }; multiselectPrototype.togglePopup = function(show) { show = (show !== undefined) ? show : !this._isOpened; this._isOpened = show; this._popup.style.display = this._isOpened ? 'block' : 'none'; }; 

В списке обработчиков щелчков мы находим выбранный элемент и помечаем его как выбранный. Затем мы скрываем всплывающее окно и обновляем поле множественного выбора:

 multiselectPrototype.listClickHandler = function(event) { // find clicked list item var item = event.target; while(item && item.tagName !== 'LI') { item = item.parentNode; } // set selected state of clicked item item.setAttribute('selected', 'selected'); // hide popup this.togglePopup(false); // refresh multiselect field this.refreshField(); }; 

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

Еще одна функция множественного выбора — это атрибут- placeholder . Пользователь может указать текст, который будет отображаться в поле, когда ни один элемент не выбран. Чтобы решить эту задачу, давайте прочитаем значения атрибутов при инициализации компонента (в методе init ):

 multiselectPrototype.init = function() { this.initOptions(); ... }; multiselectPrototype.initOptions = function() { // save placeholder attribute value this._options = { placeholder: this.getAttribute("placeholder") || 'Select' }; }; 

Метод refreshField покажет заполнитель, когда ни один элемент не выбран:

 multiselectPrototype.refreshField = function() { this._field.innerHTML = ''; var selectedItems = this.querySelectorAll('li[selected]'); // show placeholder when no item selected if(!selectedItems.length) { this._field.appendChild(this.createPlaceholder()); return; } ... }; multiselectPrototype.createPlaceholder = function() { // create placeholder element var placeholder = document.createElement('div'); placeholder.className = 'multiselect-field-placeholder'; placeholder.textContent = this._options.placeholder; return placeholder; }; 

Но это не конец истории. Что, если значение атрибута заполнителя изменяется? Нам нужно обработать это и обновить поле. Здесь обратный вызов attributeChangedCallback пригодится. Этот обратный вызов вызывается каждый раз, когда изменяется значение атрибута. В нашем случае мы сохраняем новое значение заполнителя и обновляем поле множественного выбора:

 multiselectPrototype.attributeChangedCallback = function(optionName, oldValue, newValue) { this._options[optionName] = newValue; this.refreshField(); }; 

Добавить метод selectedItems элементов

Все, что нам нужно сделать, это добавить метод в прототип компонента. Реализация метода selectedItems тривиальна — зацикливание на выбранных элементах и ​​чтение значений. Если элемент не имеет значения, вместо него возвращается текст элемента:

 multiselectPrototype.selectedItems = function() { var result = []; // find selected items var selectedItems = this.querySelectorAll('li[selected]'); // loop over selected items and read values or text content for(var i = 0; i < selectedItems.length; i++) { var selectedItem = selectedItems[i]; result.push(selectedItem.hasAttribute('value') ? selectedItem.getAttribute('value') : selectedItem.textContent); } return result; }; 

Добавить пользовательское событие

Теперь давайте добавим событие change которое будет запускаться каждый раз, когда пользователь меняет выбор. Чтобы запустить событие, нам нужно создать экземпляр CustomEvent и отправить его:

 multiselectPrototype.fireChangeEvent = function() { // create custom event instance var event = new CustomEvent("change"); // dispatch event this.dispatchEvent(event); }; 

На этом этапе нам нужно запустить событие, когда пользователь выбирает или отменяет выбор элемента. В обработчике щелчков списка мы запускаем событие именно тогда, когда элемент был фактически выбран:

 multiselectPrototype.listClickHandler = function(event) { ... if(!item.hasAttribute('selected')) { item.setAttribute('selected', 'selected'); this.fireChangeEvent(); this.refreshField(); } ... }; 

В обработчике кнопки удаления тега нам также нужно запустить событие change так как элемент не выбран:

 multiselectPrototype.removeTag = function(tag, item, event) { ... this.fireChangeEvent(); this.refreshField(); }; 

стайлинг

Стилизация внутренних элементов Shadow DOM довольно проста. Мы прикрепляем несколько определенных классов, таких как multiselect-field или multiselect-popup и добавляем для них необходимые правила CSS.

Но как мы можем стилизовать элементы списка? Проблема в том, что они исходят от теневого хоста и не относятся к теневому DOM. Специальный селектор ::content приходит нам на помощь.

 ::content li { padding: .5em 1em; min-height: 1em; list-style: none; cursor: pointer; } ::content li[selected] { background: #f9f9f9; } 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="import" href="multiselect.html"> </head> <body> <x-multiselect placeholder="Select Value"> <li value="1" selected>Item 1</li> <li value="2">Item 2</li> <li value="3" selected>Item 3</li> <li value="4">Item 4</li> </x-multiselect> </body> </html> 

 <script> var multiselect = document.querySelector('x-multiselect'); multiselect.addEventListener('change', function() { console.log('Selected items:', this.selectedItems()); }); </script> 

 bower install webcomponentsjs 

 var ownerDocument = (document._currentScript || document.currentScript).ownerDocument; 

 multiselectPrototype.createRootElement = function() { var root = this.createShadowRoot(); var content = document.importNode(template.content, true); if (window.ShadowDOMPolyfill) { WebComponents.ShadowCSS.shimStyling(content, 'x-multiselect'); } root.appendChild(content); return root; };