From ee3d7ef15d5df378a69acbef993d3a0b905b81a7 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 3 Jul 2020 16:34:03 +0530 Subject: [PATCH] Added sm-select compontent This is a new web component replacing native HTML5 select/option combo --- index.html | 192 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 166 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 1229c1d..bdf2b34 100644 --- a/index.html +++ b/index.html @@ -665,15 +665,12 @@

Activity

- + + Deposits + Withdrawals + Messages from cashier +
- - -

*If your request isn't completed in 12hrs, use REPORT to get assistance from our helpline.

@@ -689,13 +686,13 @@

Complaints

- + + Deposits + Withdrawals + Pay through cashier +
- +

No deposit complaints.

@@ -1253,6 +1250,7 @@ showComplaints(this.value) }) document.getElementById('select_cashier').addEventListener('change', function (e) { + console.log(this.value) load_deposit_complaints(this.value) //load_withdraw_complaints(this.value) //load_pay_thru_cashier_complaints(this.value) @@ -1336,8 +1334,9 @@ }) } } - const smSelect = document.createElement('template') - smSelect.innerHTML = ` + // sm-select + const smSelect = document.createElement('template') + smSelect.innerHTML = `
-
- - - - +
+
+ + + +
+
+ +
`; - customElements.define('sm-select', class extends HTMLElement{ - constructor(){ + customElements.define('sm-select', class extends HTMLElement { + constructor() { super() this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true)) } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + connectedCallback() { + let optionList = this.shadowRoot.querySelector('.options'), + chevron = this.shadowRoot.querySelector('.toggle'), + slot = this.shadowRoot.querySelector('.options slot'), + currentOption; + this.addEventListener('click', e => { + chevron.classList.toggle('rotate') + optionList.classList.toggle('hide') + }) + this.addEventListener('optionSelected', e => { + if(currentOption !== e.detail.value){ + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + currentOption = e.detail.value; + } + }) + slot.addEventListener('slotchange', e => { + let firstElement = slot.assignedElements()[0]; + currentOption = firstElement.getAttribute('value'); + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target)) { + chevron.classList.remove('rotate') + optionList.classList.add('hide') + } + }) + } }) + + // sm-option + const smOption = document.createElement('template') + smOption.innerHTML = ` + +
+ +
`; + customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true)) + } + connectedCallback() { + this.addEventListener('click', e => { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value') + } + }) + this.dispatchEvent(optionSelected) + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value') + } + }) + this.dispatchEvent(optionSelected) + }, 0); + } + } + }) +