@dooboostore/dom-render
Version:
html view template engine
199 lines (193 loc) • 8.41 kB
JavaScript
import { ComponentBase } from '../ComponentBase';
import { DomRender } from '../../DomRender';
import { RawSet } from '../../rawsets/RawSet';
import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';
import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
export var Details;
(function (Details_1) {
Details_1.selector = 'dr-details';
// @Component({
// template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
// styles: '',
// selector: `${selector}.Summary`
// })
class Summary extends ComponentBase {
constructor() {
super({ onlyParentType: [Details] });
}
}
Details_1.Summary = Summary;
// @Component({
// template: '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
// selector: `${selector}.Body`
// })
class Body extends ComponentBase {
constructor() {
super({ onlyParentType: [Details] });
}
}
Details_1.Body = Body;
Details_1.isBody = (instance) => {
return instance instanceof Body;
};
// @Component({
// template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
// styles: detailsFormStyle,
// selector: `${selector}.Form`
// })
class Form extends ComponentBase {
constructor() {
super({ onlyParentType: [Details] });
}
submit(element, event) {
var _a;
if (this.hasAttribute('disabledSubmit')) {
event.preventDefault();
}
if (this.hasAttribute('submit')) {
(_a = this.getAttribute('submit')) === null || _a === void 0 ? void 0 : _a(event, element);
}
}
reset() {
var _a;
(_a = this.$element) === null || _a === void 0 ? void 0 : _a.reset();
}
}
Details_1.Form = Form;
Details_1.isForm = (instance) => {
return instance instanceof Form;
};
// @Component({
// template: template,
// styles: style,
// // noStrip: true,
// selector: `${selector}`
// })
class Details extends ComponentBase {
onCreateRenderData(data) {
super.onCreateRenderData(data);
}
onCreateRender(...param) {
}
toggle(element) {
const toggleAttribute = this.getAttribute('toggle');
if (toggleAttribute) {
toggleAttribute === null || toggleAttribute === void 0 ? void 0 : toggleAttribute(element.open);
}
}
onInitRender(param, rawSet) {
var _a;
super.onInitRender(param, rawSet);
if (ValidUtils.isBrowser() && ((_a = this.rawSet) === null || _a === void 0 ? void 0 : _a.dataSet.config.window)) {
const detailsElement = this.element;
const document = this.rawSet.dataSet.config.window.document;
this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {
if (this.getAttribute('disableOtherClickClose')) {
return;
}
if (detailsElement && !(detailsElement === null || detailsElement === void 0 ? void 0 : detailsElement.contains(event === null || event === void 0 ? void 0 : event.target))) {
detailsElement.open = false;
}
});
if (detailsElement) {
this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {
var _a;
if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {
(_a = this.children) === null || _a === void 0 ? void 0 : _a.filter(Details_1.isForm).forEach(it => {
it.reset();
});
}
});
}
}
// console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);
}
onChangeAttrRender(name, value, other) {
super.onChangeAttrRender(name, value, other);
}
onDestroyRender(...metaData) {
var _a, _b;
(_a = this.toggleSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this.documentClickSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
// console.log('onDestroyRender', metaData);
// if (ValidUtils.isBrowser()) {
// document.removeEventListener('click', this.ccc)
// }
}
}
Details_1.Details = Details;
})(Details || (Details = {}));
export default {
detailsSummary: (config) => {
return RawSet.createComponentTargetElement({
name: `${Details.selector}-summary`,
template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new Details.Summary(), config: config });
}
});
},
detailsBody: (config) => {
return RawSet.createComponentTargetElement({
name: `${Details.selector}-body`,
template: '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new Details.Body(), config: config });
}
});
},
detailsForm: (config) => {
return RawSet.createComponentTargetElement({
name: `${Details.selector}-form`,
template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new Details.Form(), config: config });
}
});
},
details: (config) => {
return RawSet.createComponentTargetElement({
name: `${Details.selector}`,
styles: `
.details-container {
position: relative;
}
.details-container .details-body-container {
position: absolute;
}
.details-container .details-body-bottom-left-container {
position: absolute;
left: 0;
top: 100%;
/*margin-top: 0px;*/
/*width: max-content;*/
}
.details-container .details-body-bottom-right-container {
position: absolute;
right: 0;
top: 100%;
/*margin-top: 0px;*/
/*width: max-content;*/
}
.details-container .details-body-top-left-container {
position: absolute;
left: 0;
bottom: 100%;
/*margin-bottom: 0px;*/
/*width: max-content;*/
}
.details-container .details-body-top-right-container {
position: absolute;
right: 0;
bottom: 100%;
/*margin-bottom: 0px;*/
}
`,
template: '<details class="${`${@this@.getAttribute(\'class\')} details-container`}$" dr-on-init="@this@.element = $element;" dr-event-toggle="@this@.toggle($element)"> #innerHTML# </details>',
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config: config });
}
});
},
};
//# sourceMappingURL=Details.js.map