2018-05-23 14:09:45 +02:00
|
|
|
import { dispatchEvent, isElement } from '../lib/utils';
|
2017-10-18 10:08:27 +02:00
|
|
|
|
2017-10-13 14:43:58 +02:00
|
|
|
export default class WrappedElement {
|
2018-05-21 18:01:03 +02:00
|
|
|
constructor({ element, classNames }) {
|
|
|
|
Object.assign(this, { element, classNames });
|
|
|
|
|
2018-05-23 14:09:45 +02:00
|
|
|
if (!isElement(element)) {
|
|
|
|
throw new TypeError('Invalid element passed');
|
|
|
|
}
|
|
|
|
|
2017-10-18 09:43:56 +02:00
|
|
|
this.isDisabled = false;
|
2017-10-13 14:43:58 +02:00
|
|
|
}
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
get value() {
|
2017-10-18 14:05:07 +02:00
|
|
|
return this.element.value;
|
|
|
|
}
|
|
|
|
|
2017-10-13 14:43:58 +02:00
|
|
|
conceal() {
|
|
|
|
// Hide passed input
|
|
|
|
this.element.classList.add(
|
|
|
|
this.classNames.input,
|
|
|
|
this.classNames.hiddenState,
|
|
|
|
);
|
|
|
|
|
|
|
|
// Remove element from tab index
|
|
|
|
this.element.tabIndex = '-1';
|
|
|
|
|
|
|
|
// Backup original styles if any
|
|
|
|
const origStyle = this.element.getAttribute('style');
|
|
|
|
|
|
|
|
if (origStyle) {
|
|
|
|
this.element.setAttribute('data-choice-orig-style', origStyle);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.element.setAttribute('aria-hidden', 'true');
|
|
|
|
this.element.setAttribute('data-choice', 'active');
|
|
|
|
}
|
|
|
|
|
|
|
|
reveal() {
|
|
|
|
// Reinstate passed element
|
|
|
|
this.element.classList.remove(
|
|
|
|
this.classNames.input,
|
|
|
|
this.classNames.hiddenState,
|
|
|
|
);
|
|
|
|
this.element.removeAttribute('tabindex');
|
|
|
|
|
|
|
|
// Recover original styles if any
|
|
|
|
const origStyle = this.element.getAttribute('data-choice-orig-style');
|
|
|
|
|
|
|
|
if (origStyle) {
|
|
|
|
this.element.removeAttribute('data-choice-orig-style');
|
|
|
|
this.element.setAttribute('style', origStyle);
|
|
|
|
} else {
|
|
|
|
this.element.removeAttribute('style');
|
|
|
|
}
|
|
|
|
this.element.removeAttribute('aria-hidden');
|
|
|
|
this.element.removeAttribute('data-choice');
|
|
|
|
|
|
|
|
// Re-assign values - this is weird, I know
|
|
|
|
this.element.value = this.element.value;
|
|
|
|
}
|
2017-10-18 09:43:56 +02:00
|
|
|
|
|
|
|
enable() {
|
|
|
|
this.element.removeAttribute('disabled');
|
|
|
|
this.element.disabled = false;
|
|
|
|
this.isDisabled = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
disable() {
|
|
|
|
this.element.setAttribute('disabled', '');
|
|
|
|
this.element.disabled = true;
|
|
|
|
this.isDisabled = true;
|
|
|
|
}
|
2017-10-18 10:08:27 +02:00
|
|
|
|
|
|
|
triggerEvent(eventType, data) {
|
|
|
|
dispatchEvent(this.element, eventType, data);
|
|
|
|
}
|
2017-10-13 14:43:58 +02:00
|
|
|
}
|