This repository has been archived by the owner on Nov 12, 2019. It is now read-only.
forked from mdn/web-components-examples
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Normalise indentation and fix new item remove icon
- Loading branch information
Showing
1 changed file
with
110 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,132 +1,132 @@ | ||
| 'use strict'; | ||
|
|
||
| (function() { | ||
| class EditableList extends HTMLElement { | ||
| constructor() { | ||
| // establish prototype chain | ||
| super(); | ||
|
|
||
| // attaches shadow tree and returns shadow root reference | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow | ||
| const shadow = this.attachShadow({ mode: 'open' }); | ||
|
|
||
| // creating a container for the editable-list component | ||
| const editableListContainer = document.createElement('div'); | ||
|
|
||
| // get attribute values from getters | ||
| const title = this.title; | ||
| const addItemText = this.addItemText; | ||
| const listItems = this.items; | ||
|
|
||
| // adding a class to our container for the sake of clarity | ||
| editableListContainer.classList.add('editable-list'); | ||
|
|
||
| // creating the inner HTML of the editable list element | ||
| editableListContainer.innerHTML = ` | ||
| <style> | ||
| li, div > div { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
| .icon { | ||
| background-color: #fff; | ||
| border: none; | ||
| cursor: pointer; | ||
| float: right; | ||
| font-size: 1.8rem; | ||
| } | ||
| </style> | ||
| <h3>${title}</h3> | ||
| <ul class="item-list"> | ||
| ${listItems.map(item => ` | ||
| <li>${item} | ||
| <button class="editable-list-remove-item icon">⊖</button> | ||
| </li> | ||
| `).join('')} | ||
| </ul> | ||
| <div> | ||
| <label>${addItemText}</label> | ||
| <input class="add-new-list-item-input" type="text"></input> | ||
| <button class="editable-list-add-item icon">⊕</button> | ||
| </div> | ||
| `; | ||
|
|
||
| // binding methods | ||
| this.addListItem = this.addListItem.bind(this); | ||
| this.handleRemoveItemListeners = this.handleRemoveItemListeners.bind(this); | ||
| this.removeListItem = this.removeListItem.bind(this); | ||
|
|
||
| // appending the container to the shadow DOM | ||
| shadow.appendChild(editableListContainer); | ||
| } | ||
|
|
||
| // add items to the list | ||
| addListItem(e) { | ||
| const textInput = this.shadowRoot.querySelector('.add-new-list-item-input'); | ||
| class EditableList extends HTMLElement { | ||
| constructor() { | ||
| // establish prototype chain | ||
| super(); | ||
|
|
||
| // attaches shadow tree and returns shadow root reference | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow | ||
| const shadow = this.attachShadow({ mode: 'open' }); | ||
|
|
||
| // creating a container for the editable-list component | ||
| const editableListContainer = document.createElement('div'); | ||
|
|
||
| // get attribute values from getters | ||
| const title = this.title; | ||
| const addItemText = this.addItemText; | ||
| const listItems = this.items; | ||
|
|
||
| // adding a class to our container for the sake of clarity | ||
| editableListContainer.classList.add('editable-list'); | ||
|
|
||
| // creating the inner HTML of the editable list element | ||
| editableListContainer.innerHTML = ` | ||
| <style> | ||
| li, div > div { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
| .icon { | ||
| background-color: #fff; | ||
| border: none; | ||
| cursor: pointer; | ||
| float: right; | ||
| font-size: 1.8rem; | ||
| } | ||
| </style> | ||
| <h3>${title}</h3> | ||
| <ul class="item-list"> | ||
| ${listItems.map(item => ` | ||
| <li>${item} | ||
| <button class="editable-list-remove-item icon">⊖</button> | ||
| </li> | ||
| `).join('')} | ||
| </ul> | ||
| <div> | ||
| <label>${addItemText}</label> | ||
| <input class="add-new-list-item-input" type="text"></input> | ||
| <button class="editable-list-add-item icon">⊕</button> | ||
| </div> | ||
| `; | ||
|
|
||
| // binding methods | ||
| this.addListItem = this.addListItem.bind(this); | ||
| this.handleRemoveItemListeners = this.handleRemoveItemListeners.bind(this); | ||
| this.removeListItem = this.removeListItem.bind(this); | ||
|
|
||
| // appending the container to the shadow DOM | ||
| shadow.appendChild(editableListContainer); | ||
| } | ||
|
|
||
| if (textInput.value) { | ||
| const li = document.createElement('li'); | ||
| const button = document.createElement('button'); | ||
| const childrenLength = this.itemList.children.length; | ||
| // add items to the list | ||
| addListItem(e) { | ||
| const textInput = this.shadowRoot.querySelector('.add-new-list-item-input'); | ||
|
|
||
| li.textContent = textInput.value; | ||
| button.classList.add('editable-list-remove-item', 'icon'); | ||
| button.textContent = '\u2796'; | ||
| if (textInput.value) { | ||
| const li = document.createElement('li'); | ||
| const button = document.createElement('button'); | ||
| const childrenLength = this.itemList.children.length; | ||
|
|
||
| this.itemList.appendChild(li); | ||
| this.itemList.children[childrenLength].appendChild(button); | ||
| li.textContent = textInput.value; | ||
| button.classList.add('editable-list-remove-item', 'icon'); | ||
| button.innerHTML = '⊖'; | ||
|
|
||
| this.handleRemoveItemListeners([...this.itemList.children]); | ||
| this.itemList.appendChild(li); | ||
| this.itemList.children[childrenLength].appendChild(button); | ||
|
|
||
| textInput.value = ''; | ||
| } | ||
| } | ||
| this.handleRemoveItemListeners([...this.itemList.children]); | ||
|
|
||
| // fires after the element has been attached to the DOM | ||
| connectedCallback() { | ||
| const removeElementButtons = [...this.shadowRoot.querySelectorAll('.editable-list-remove-item')]; | ||
| const addElementButton = this.shadowRoot.querySelector('.editable-list-add-item'); | ||
| textInput.value = ''; | ||
| } | ||
| } | ||
|
|
||
| this.itemList = this.shadowRoot.querySelector('.item-list'); | ||
| // fires after the element has been attached to the DOM | ||
| connectedCallback() { | ||
| const removeElementButtons = [...this.shadowRoot.querySelectorAll('.editable-list-remove-item')]; | ||
| const addElementButton = this.shadowRoot.querySelector('.editable-list-add-item'); | ||
|
|
||
| this.handleRemoveItemListeners(removeElementButtons); | ||
| addElementButton.addEventListener('click', this.addListItem, false); | ||
| } | ||
| this.itemList = this.shadowRoot.querySelector('.item-list'); | ||
|
|
||
| // gathering data from element attributes | ||
| get title() { | ||
| return this.getAttribute('title') || ''; | ||
| } | ||
| this.handleRemoveItemListeners(removeElementButtons); | ||
| addElementButton.addEventListener('click', this.addListItem, false); | ||
| } | ||
|
|
||
| get items() { | ||
| const items = []; | ||
| // gathering data from element attributes | ||
| get title() { | ||
| return this.getAttribute('title') || ''; | ||
| } | ||
|
|
||
| [...this.attributes].forEach(attr => { | ||
| if (attr.name.includes('list-item')) { | ||
| items.push(attr.value); | ||
| } | ||
| }); | ||
| get items() { | ||
| const items = []; | ||
|
|
||
| return items; | ||
| [...this.attributes].forEach(attr => { | ||
| if (attr.name.includes('list-item')) { | ||
| items.push(attr.value); | ||
| } | ||
| }); | ||
|
|
||
| get addItemText() { | ||
| return this.getAttribute('add-item-text') || ''; | ||
| } | ||
| return items; | ||
| } | ||
|
|
||
| handleRemoveItemListeners(arrayOfElements) { | ||
| arrayOfElements.forEach(element => { | ||
| element.addEventListener('click', this.removeListItem, false) | ||
| }); | ||
| } | ||
| get addItemText() { | ||
| return this.getAttribute('add-item-text') || ''; | ||
| } | ||
|
|
||
| removeListItem(e) { | ||
| e.target.parentNode.remove(); | ||
| } | ||
| handleRemoveItemListeners(arrayOfElements) { | ||
| arrayOfElements.forEach(element => { | ||
| element.addEventListener('click', this.removeListItem, false); | ||
| }); | ||
| } | ||
|
|
||
| removeListItem(e) { | ||
| e.target.parentNode.remove(); | ||
| } | ||
| } | ||
|
|
||
| // let the browser know about the custom element | ||
| customElements.define('editable-list', EditableList); | ||
| // let the browser know about the custom element | ||
| customElements.define('editable-list', EditableList); | ||
| })(); |