Есть два компонента (php+js+css): Checkbox и Switch.
JS-код обоих делает по сути одно и то же, с той лишь разницей что input ссылается на разные элементы DOM-дерева:
ksf.classes.KsfCheckbox = class {
constructor( el ) {
let _this = this;
let change = new Event( 'change' );
this.el = el;
this.input = el.getElementsByClassName( 'checkbox__input' )[ 0 ];
this.value = +this.input.checked + '';
this.input.addEventListener( 'change', function() {
_this.el.dispatchEvent( change );
} );
this.el.addEventListener( 'click', function( e ) {
e.preventDefault();
toggleValue();
} );
/* Space Pressed */
this.el.addEventListener( 'keypress', function( e ) {
if ( e.which === 32 ) {
e.preventDefault();
toggleValue();
}
} );
function toggleValue() {
if ( _this.value === '0' ) {
_this.value = '1';
_this.input.checked = true;
} else {
_this.value = '0';
_this.input.checked = false;
}
}
}
setValue( value ) {
this.input.checked = !! parseInt( value );
this.value = parseInt( value ) + '';
}
getValue() {
return this.value;
}
};
ksf.classes.KsfSwitch = class {
constructor( el ) {
let _this = this;
let change = new Event( 'change' );
this.el = el;
this.input = el.getElementsByClassName( 'switch__input' )[ 0 ];
this.value = +this.input.checked + '';
this.input.addEventListener( 'change', function() {
_this.el.dispatchEvent( change );
} );
this.el.addEventListener( 'click', function( e ) {
e.preventDefault();
toggleValue();
} );
/* Space Pressed */
this.el.addEventListener( 'keypress', function( e ) {
if ( e.which === 32 ) {
e.preventDefault();
toggleValue();
}
} );
function toggleValue() {
if ( _this.value === '0' ) {
_this.value = '1';
_this.input.checked = true;
} else {
_this.value = '0';
_this.input.checked = false;
}
}
}
setValue( value ) {
this.input.checked = !! parseInt( value );
this.value = parseInt( value ) + '';
}
getValue() {
return this.value;
}
};
JS-файлы компонентов лежат в разных файлах, потом клеится всё в один файл с помощью gulp concat.
Как эти компоненты правильно унаследовать в JS от какого-нибудь другого компонента (например, "toggler"), чтобы не дублировать код?
