From a0f1ce63993d41c5e8e0122b3e8097e82719bc7c Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 11 Nov 2022 03:57:19 +0530 Subject: [PATCH] code refactoring --- components/dist/form.js | 53 ++++++++++++++++-------------------- components/dist/form.min.js | Bin 6836 -> 6678 bytes 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/components/dist/form.js b/components/dist/form.js index 92852e8..6198101 100644 --- a/components/dist/form.js +++ b/components/dist/form.js @@ -23,23 +23,18 @@ smForm.innerHTML = ` customElements.define('sm-form', class extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(smForm.content.cloneNode(true)) + }).append(smForm.content.cloneNode(true)); this.form = this.shadowRoot.querySelector('form'); - this.formElements - this.submitButton - this.resetButton this.invalidFields = false; - this.mutationObserver - - this.debounce = this.debounce.bind(this) - this._checkValidity = this._checkValidity.bind(this) - this.handleKeydown = this.handleKeydown.bind(this) - this.reset = this.reset.bind(this) - this.elementsChanged = this.elementsChanged.bind(this) + this.debounce = this.debounce.bind(this); + this._checkValidity = this._checkValidity.bind(this); + this.handleKeydown = this.handleKeydown.bind(this); + this.reset = this.reset.bind(this); + this.elementsChanged = this.elementsChanged.bind(this); } debounce(callback, wait) { let timeoutId = null; @@ -52,22 +47,22 @@ customElements.define('sm-form', class extends HTMLElement { } _checkValidity() { if (!this.submitButton) return; - this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity()) + this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity()); this.submitButton.disabled = this.invalidFields.length > 0; } handleKeydown(e) { if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) { if (!this.invalidFields.length) { if (this.submitButton) { - this.submitButton.click() + this.submitButton.click(); } this.dispatchEvent(new CustomEvent('submit', { bubbles: true, composed: true, - })) + })); } else { for (const [elem, isWC] of this._requiredElements) { - const invalid = isWC ? !elem.isValid : !elem.checkValidity() + const invalid = isWC ? !elem.isValid : !elem.checkValidity(); if (invalid) { (elem?.shadowRoot?.lastElementChild || elem).animate([ { transform: 'translateX(-1rem)' }, @@ -79,8 +74,8 @@ customElements.define('sm-form', class extends HTMLElement { duration: 300, easing: 'ease' }); - if (isWC) elem.focusIn() - else elem.focus() + if (isWC) elem.focusIn(); + else elem.focus(); break; } } @@ -88,14 +83,14 @@ customElements.define('sm-form', class extends HTMLElement { } } reset() { - this.formElements.forEach(elem => elem.reset()) + this.formElements.forEach(elem => elem.reset()); } elementsChanged() { this._requiredElements = []; - this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] + this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]; this.formElements.forEach(elem => { if (elem.hasAttribute('required')) { - this._requiredElements.push([elem, elem.tagName.includes('-')]) + this._requiredElements.push([elem, elem.tagName.includes('-')]); } }); this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'); @@ -103,24 +98,24 @@ customElements.define('sm-form', class extends HTMLElement { if (this.resetButton) { this.resetButton.addEventListener('click', this.reset); } - this._checkValidity() + this._checkValidity(); } connectedCallback() { - this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged) + this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged); this.addEventListener('input', this.debounce(this._checkValidity, 100)); this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)); this.mutationObserver = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { - this.elementsChanged() + this.elementsChanged(); } - }) - }) - this.mutationObserver.observe(this, { childList: true, subtree: true }) + }); + }); + this.mutationObserver.observe(this, { childList: true, subtree: true }); } disconnectedCallback() { this.removeEventListener('input', this.debounce(this._checkValidity, 100)); this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)); - this.mutationObserver.disconnect() + this.mutationObserver.disconnect(); } -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/components/dist/form.min.js b/components/dist/form.min.js index 2a9207932d86abfb02756ec640425448be189fd0..0c3a3f9f64ca620965206116906fc0ba4e5d3cbb 100644 GIT binary patch delta 315 zcmdmDI?ZH58r$R=ZmG#1*d!)5ND6FrW5317p30!ZpukWvS)FqyW9sCGoSKX!lexK0 zTSCPdVi`1n^0o|iAXPwY55$TLsSJ7ynGD4YVGM~3IY3qlP}B+{Gnt?JAkd_X+?v85 zRoOtbl|UIaAXH#Toy^NK7jEZ99(Pq@%~YQ3z{>$N*OS+kF?Dl4?@>lhnAX(EvHa3N z!AkyWM($LgEfCkHZvHQDoRJ?PPz`p#RiRR-15!5!3fHn=DA*_@3bg05xGvC0MTyBw E0OFEFR{#J2 delta 374 zcmbPcvc+^m8rvi`j>#Vc1Q>ND&*fB|yop_6vYiMIkav+weR2bv#N-F!3X=;Yqq*lVc}i$z*3vO~%y8xtymhq2dg&44OcBTLwFjDj>E8Vnv1$20eyM zhGK>=hD3%OAS(qZY6X#*T*!40Xp%9vrZ7lVHc(e3P(}?16&Ok;=X1~HN0_a^kk61d zd7*&*WG@~8RbtIo=2T#)2AZY;G;cMJD`Uy#k32^iIbqsMChzBy1`6Kht7hab0jh(z zzGQQvz;Q;P(^b