@dooboostore/dom-render
Version:
html view template engine
118 lines • 4.62 kB
JavaScript
import { ComponentBase } from '../ComponentBase';
import { DomRender } from '../../DomRender';
import { RawSet } from '../../rawsets/RawSet';
export var CheckBox;
(function (CheckBox_1) {
CheckBox_1.selector = 'dr-checkbox';
class CheckBoxBase extends ComponentBase {
constructor() {
super(...arguments);
this.hidden = true;
}
}
// @Component({
// template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
// styles: '',
// selector: `${selector}.Checked`
// })
class Checked extends CheckBoxBase {
constructor() {
super({ onlyParentType: CheckBox });
this.name = 'checked';
}
}
CheckBox_1.Checked = Checked;
// @Component({
// template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
// styles: '',
// selector: `${selector}.UnChecked`
// })
class UnChecked extends CheckBoxBase {
constructor() {
super({ onlyParentType: CheckBox });
this.name = 'unChecked';
}
}
CheckBox_1.UnChecked = UnChecked;
// @Component({
// template: template,
// styles: style,
// selector: `${selector}`
// })
class CheckBox extends ComponentBase {
constructor() {
super(...arguments);
this.checked = false;
}
change(option, checked = this.checked) {
var _a;
this.checked = checked;
this.setChildrenHidden(checked);
(_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a(checked, option);
}
setChildrenHidden(checked) {
this.getChildren(Checked).forEach(it => {
it.hidden = !checked;
});
this.getChildren(UnChecked).forEach(it => {
it.hidden = checked;
});
}
onCreatedThisChild(child, childData) {
super.onCreatedThisChild(child, childData);
this.setChildrenHidden(this.checked);
}
onInitInputElement(element) {
// console.log('---cr', element)
this.inputElement = element;
this.inputElement.checked = !!this.getAttribute('checked');
this.change({ type: 'initialize' }, !!this.getAttribute('checked'));
}
onChangeAttrRender(name, val, other) {
super.onChangeAttrRender(name, val, other);
// console.log('Checkbox ChangeAttr------', name, val, this.inputElement)
if (this.inputElement && this.getAttribute('checked') !== this.checked) {
this.inputElement.checked = !!this.getAttribute('checked');
this.change({ type: 'attributeChange' }, !!this.getAttribute('checked'));
}
}
}
CheckBox_1.CheckBox = CheckBox;
})(CheckBox || (CheckBox = {}));
export default {
checkBoxChecked: (config) => {
return RawSet.createComponentTargetElement({
name: `${CheckBox.selector}-checked`,
template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new CheckBox.Checked(), config: config });
}
});
},
checkBoxUnchecked: (config) => {
return RawSet.createComponentTargetElement({
name: `${CheckBox.selector}-unchecked`,
template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new CheckBox.UnChecked(), config: config });
}
});
},
checkBox: (config) => {
return RawSet.createComponentTargetElement({
name: `${CheckBox.selector}`,
template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
' <input\n' +
' name="${@this@.getAttribute(\'name\')}$"\n' +
' dr-on-init="@this@.onInitInputElement($element)"\n' +
' dr-event-change="@this@.change({type: \'event\'},$element.checked);"\n' +
' type="checkbox" hidden="hidden"/>\n' +
' #innerHTML#\n' +
'</label>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config: config });
}
});
},
};
//# sourceMappingURL=CheckBox.js.map