racquetjs
Version:
one more js framework
156 lines • 3.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const component_service_1 = require("../helpers/component.service");
class Component {
constructor() {
this.elementRef = null;
this.componentService = new component_service_1.ComponentService();
this.children = [];
this.controls = [];
this.componentService.addComponent(this);
this.hash = this.componentService.getComponentHash(this);
}
/**
* ________METHODS TO OVERRIDE________
*/
/**
* Method for creating default template
* METHOD FOR OVERRIDE
*
* @returns {string}
*/
createTemplate() {
return '';
}
;
/**
* ________METHODS U CAN USE IN YOUR COMPONENT________
*/
/**
* Update current component element
*
* @returns {void}
*/
render() {
this.prerender();
this.elementRef.innerHTML = this.createTemplate();
window.setTimeout(() => this.renderChildren(), 0);
window.setTimeout(() => this.setHandlers(), 0);
window.setTimeout(() => this.afterViewInit(), 0);
}
/**
* Create child none
*
* @param component
*
* @returns {string}
*/
createChild(component) {
this.children.push(component);
return component.createElementRoot();
}
/**
* Get current component DOM element link
*
* @returns {HTMLElement}
*/
getElementRef() {
return this.elementRef;
}
/**
* Add new control to component controls and returns component hash name
*
* @param {string} controlName
*
* @returns {string}
*/
addControlByName(controlName) {
this.controls.push({
name: controlName,
hash: `${this.hash}_ctrl_${this.controls.length}`,
});
return this.controls[this.controls.length - 1].hash;
}
/**
* Get control hash name by its name
*
* @param {string} controlName
*
* @return {hash}
*/
getControlHashByName(controlName) {
const controlHash = this.controls
.find((control) => control.name === controlName)
.hash;
return `${controlHash}`;
}
/**
* ________LOCAL METHODS NOT TO USE OUTSIDE THIS CLASS________
*/
/**
* Creates html tag for template with hash name
*
* @private
*
* @returns {string}
*/
createElementRoot() {
return `<my-comp ${this.hash}></my-comp>`;
}
/**
* Create local HTMLElement
*
* @private
*
* @returns {void}
*/
attach() {
this.elementRef = document.querySelector(`[${this.hash}]`);
}
/**
* Invoke attach and render methods for each child components
*
* @private
*
* @returns {void}
*/
renderChildren() {
this.children.forEach(child => {
window.setTimeout(() => child.attach(), 0);
window.setTimeout(() => child.render(), 0);
});
}
/**
* What we should do before component render start
*
* @private
*
* @returns {void}
*/
prerender() {
this.refreshChildren();
this.refreshControls();
}
/**
* Reset component children
*
* @private
*
* @returns {void}
*/
refreshChildren() {
this.children = [];
}
/**
* Reset component children
*
* @private
*
* @returns {void}
*/
refreshControls() {
this.controls = [];
}
}
exports.Component = Component;
//# sourceMappingURL=component.js.map