diff --git a/src/components/molecules/FormCheckGroup/FormCheckGroup.js b/src/components/molecules/FormCheckGroup/FormCheckGroup.js index 132bc64c..eedba906 100644 --- a/src/components/molecules/FormCheckGroup/FormCheckGroup.js +++ b/src/components/molecules/FormCheckGroup/FormCheckGroup.js @@ -1,204 +1,209 @@ -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - -const KEYCODE = { - DOWN: 40, - LEFT: 37, - RIGHT: 39, - SPACE: 32, - UP: 38, - HOME: 36, - END: 35, -}; - -export default class FormCheckGroup extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - } - - connectedCallback() { - // setting up styles - if (!this.hasAttribute('role')) { - if(this.getAttribute('data-type') == 'radio'){ - this.setAttribute('role', 'radiogroup'); - }else{ - this.setAttribute('role', 'group'); - } - } - let firstFormCheck = this.checkedFormCheck; - if (firstFormCheck) { - this._uncheckAll(); - this._checkNode(firstFormCheck); - } else { - this.querySelector('cod-form-check').setAttribute('tabindex', 0); - } - - this.addEventListener('keydown', this._onKeyDown); - this.addEventListener('click', this._onClick); - } - - disconnectedCallback() { - this.removeEventListener('keydown', this._onKeyDown); - this.removeEventListener('click', this._onClick); - } - - _onKeyDown(e) { - switch (e.keyCode) { - case KEYCODE.UP: - case KEYCODE.LEFT: - e.preventDefault(); - this._setCheckedToPrevButton(); - break; - - case KEYCODE.DOWN: - case KEYCODE.RIGHT: - e.preventDefault(); - this._setCheckedToNextButton(); - break; - - case KEYCODE.HOME: - e.preventDefault(); - this._setChecked(this.firstFormCheck); - break; - - case KEYCODE.END: - e.preventDefault(); - this._setChecked(this.lastFormCheck); - break; - - case KEYCODE.SPACE: - e.preventDefault(); - if (e.target.tagName.toLowerCase() === 'cod-form-check') { - this._setChecked(e.target); - } - break; - - default: - break; - } - } - - get checkedFormCheck() { - return this.querySelector('[data-checked="true"]'); - } - - get firstFormCheck() { - return this.querySelector('cod-form-check:first-of-type'); - } - - get lastFormCheck() { - return this.querySelector('cod-form-check:last-of-type'); - } - - _prevFormCheck(node) { - let prev = node.previousElementSibling; - while (prev) { - if (prev.getAttribute('data-type') === 'radio' || prev.getAttribute('data-type') === 'checkbox') { - return prev; - } - prev = prev.previousElementSibling; - } - return null; - } - - _nextFormCheck(node) { - let next = node.nextElementSibling; - while (next) { - if (next.getAttribute('data-type') === 'radio' || prev.getAttribute('data-type') === 'checkbox') { - return next; - } - next = next.nextElementSibling; - } - return null; - } - - _setCheckedToPrevButton() { - let checkedButton = this.checkedFormCheck || this.firstFormCheck; - if (checkedButton === this.firstFormCheck) { - this._setChecked(this.lastFormCheck); - } else { - this._setChecked(this._prevFormCheck(checkedButton)); - } - } - - _setCheckedToNextButton() { - let checkedButton = this.checkedRadioButton || this.firstFormCheck; - if (checkedButton === this.lastFormCheck) { - this._setChecked(this.firstFormCheck); - } else { - this._setChecked(this._nextFormCheck(checkedButton)); - } - } - - _setChecked(node) { - this._uncheckAll(); - this._checkNode(node); - this._focusNode(node); - } - - _uncheckAll() { - const formCheck = this.querySelectorAll('cod-form-check'); - for (let i = 0; i < formCheck.length; i++) { - let btn = formCheck[i]; - btn.setAttribute('data-checked', 'false'); - btn.setAttribute('data-required', 'false'); - btn.tabIndex = -1; - } - } - - _validateRequired(){ - const formCheck = this.querySelectorAll('cod-form-check'); - let isValid = false; - for (let i = 0; i < formCheck.length; i++) { - let checkbox = formCheck[i]; - (checkbox.formCheck.checked) ? isValid = true : 0; - } - (isValid) ? this._unRequiredAll() : this._requiredAll(); - } - - _requiredAll(){ - const formCheck = this.querySelectorAll('cod-form-check'); - for (let i = 0; i < formCheck.length; i++) { - let btn = formCheck[i]; - btn.setAttribute('data-required', 'true'); - } - } - - _unRequiredAll(){ - const formCheck = this.querySelectorAll('cod-form-check'); - for (let i = 0; i < formCheck.length; i++) { - let btn = formCheck[i]; - btn.setAttribute('data-required', 'false'); - } - } - - _checkNode(node) { - node.setAttribute('data-checked', 'true'); - node.setAttribute('data-required', 'true'); - node.tabIndex = 0; - } - - _focusNode(node) { - node.focus(); - } - - _onClick(e) { - if (e.target.getAttribute('data-type') === 'radio') { - this._setChecked(e.target); - } - if (e.target.getAttribute('data-type') === 'checkbox') { - if(this.getAttribute('data-required') == 'true'){ - this._validateRequired(e.target); - } - } - } -}; \ No newline at end of file +const template = document.createElement("template"); + +template.innerHTML = ` + +`; + +const KEYCODE = { + DOWN: 40, + LEFT: 37, + RIGHT: 39, + SPACE: 32, + UP: 38, + HOME: 36, + END: 35, +}; + +export default class FormCheckGroup extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + // Create a shadow root + const shadow = this.attachShadow({ mode: "open" }); + shadow.appendChild(template.content.cloneNode(true)); + } + + connectedCallback() { + // setting up styles + if (!this.hasAttribute("role")) { + if (this.getAttribute("data-type") == "radio") { + this.setAttribute("role", "radiogroup"); + } else { + this.setAttribute("role", "group"); + } + } + let firstFormCheck = this.checkedFormCheck; + if (firstFormCheck) { + this._uncheckAll(); + this._checkNode(firstFormCheck); + } else { + this.querySelector("cod-form-check").setAttribute("tabindex", 0); + } + + this.addEventListener("keydown", this._onKeyDown); + this.addEventListener("click", this._onClick); + } + + disconnectedCallback() { + this.removeEventListener("keydown", this._onKeyDown); + this.removeEventListener("click", this._onClick); + } + + _onKeyDown(e) { + switch (e.keyCode) { + case KEYCODE.UP: + case KEYCODE.LEFT: + e.preventDefault(); + this._setCheckedToPrevButton(); + break; + + case KEYCODE.DOWN: + case KEYCODE.RIGHT: + e.preventDefault(); + this._setCheckedToNextButton(); + break; + + case KEYCODE.HOME: + e.preventDefault(); + this._setChecked(this.firstFormCheck); + break; + + case KEYCODE.END: + e.preventDefault(); + this._setChecked(this.lastFormCheck); + break; + + case KEYCODE.SPACE: + e.preventDefault(); + if (e.target.tagName.toLowerCase() === "cod-form-check") { + this._setChecked(e.target); + } + break; + + default: + break; + } + } + + get checkedFormCheck() { + return this.querySelector('[data-checked="true"]'); + } + + get firstFormCheck() { + return this.querySelector("cod-form-check:first-of-type"); + } + + get lastFormCheck() { + return this.querySelector("cod-form-check:last-of-type"); + } + + _prevFormCheck(node) { + let prev = node.previousElementSibling; + while (prev) { + if ( + prev.getAttribute("data-type") === "radio" || + prev.getAttribute("data-type") === "checkbox" + ) { + return prev; + } + prev = prev.previousElementSibling; + } + return null; + } + + _nextFormCheck(node) { + let next = node.nextElementSibling; + while (next) { + if ( + next.getAttribute("data-type") === "radio" || + prev.getAttribute("data-type") === "checkbox" + ) { + return next; + } + next = next.nextElementSibling; + } + return null; + } + + _setCheckedToPrevButton() { + let checkedButton = this.checkedFormCheck || this.firstFormCheck; + if (checkedButton === this.firstFormCheck) { + this._setChecked(this.lastFormCheck); + } else { + this._setChecked(this._prevFormCheck(checkedButton)); + } + } + + _setCheckedToNextButton() { + let checkedButton = this.checkedRadioButton || this.firstFormCheck; + if (checkedButton === this.lastFormCheck) { + this._setChecked(this.firstFormCheck); + } else { + this._setChecked(this._nextFormCheck(checkedButton)); + } + } + + _setChecked(node) { + this._uncheckAll(); + this._checkNode(node); + this._focusNode(node); + } + + _uncheckAll() { + const formCheck = this.querySelectorAll("cod-form-check"); + for (let i = 0; i < formCheck.length; i++) { + let btn = formCheck[i]; + btn.setAttribute("data-checked", "false"); + btn.setAttribute("data-required", "false"); + btn.tabIndex = -1; + } + } + + _validateRequired() { + const formCheck = this.querySelectorAll("cod-form-check"); + let isValid = false; + for (let i = 0; i < formCheck.length; i++) { + let checkbox = formCheck[i]; + checkbox.formCheck.checked ? (isValid = true) : 0; + } + isValid ? this._unRequiredAll() : this._requiredAll(); + } + + _requiredAll() { + const formCheck = this.querySelectorAll("cod-form-check"); + for (let i = 0; i < formCheck.length; i++) { + let btn = formCheck[i]; + btn.setAttribute("data-required", "true"); + } + } + + _unRequiredAll() { + const formCheck = this.querySelectorAll("cod-form-check"); + for (let i = 0; i < formCheck.length; i++) { + let btn = formCheck[i]; + btn.setAttribute("data-required", "false"); + } + } + + _checkNode(node) { + node.setAttribute("data-checked", "true"); + node.setAttribute("data-required", "true"); + node.tabIndex = 0; + } + + _focusNode(node) { + node.focus(); + } + + _onClick(e) { + if (e.target.getAttribute("data-type") === "radio") { + this._setChecked(e.target); + } + if (e.target.getAttribute("data-type") === "checkbox") { + if (this.getAttribute("data-required") == "true") { + this._validateRequired(e.target); + } + } + } +} diff --git a/src/components/molecules/FormCheckGroup/formcheckgroup.js b/src/components/molecules/FormCheckGroup/formcheckgroup.js deleted file mode 100644 index d8031736..00000000 --- a/src/components/molecules/FormCheckGroup/formcheckgroup.js +++ /dev/null @@ -1,2 +0,0 @@ -import FormCheckGroup from '../components/atoms/FormCheckGroup'; -customElements.define('cod-form-check-group', FormCheckGroup); \ No newline at end of file