71 lines
2.0 KiB
Plaintext
71 lines
2.0 KiB
Plaintext
SKY MODULE - defines an <element> element
|
|
<import src="sky:core" as="sky"/>
|
|
|
|
<!-- usage:
|
|
|
|
<element name="tagname">
|
|
<style> style here (optional) </style>
|
|
<template> shadow tree here (optional) </template>
|
|
<script> // optional
|
|
module.currentScript.parentNode.setPrototype({
|
|
init: function () {
|
|
// constructor here
|
|
},
|
|
// rest of api here
|
|
});
|
|
</script>
|
|
</element>
|
|
|
|
-->
|
|
|
|
<script>
|
|
module.exports.Element = sky.registerElement(
|
|
class extends Element {
|
|
static get tagName() { return 'element'; }
|
|
constructor (module) {
|
|
super();
|
|
this.state = 'loading';
|
|
this.module = module;
|
|
this.definedPrototype = sky.Element;
|
|
}
|
|
setPrototype(prototype) {
|
|
this.definedPrototype = prototype;
|
|
}
|
|
endTagParsedCallback() {
|
|
let style = null;
|
|
let template = null;
|
|
let child = this.firstChild;
|
|
while (child && !(style && template)) {
|
|
if ((!style) && (child instanceof sky.StyleElement))
|
|
style = child;
|
|
if ((!template) && (template instanceof sky.TemplateElement))
|
|
template = child;
|
|
child = child.nextSibling;
|
|
}
|
|
let tagName = this.getAttribute('name');
|
|
let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1) + 'Element';
|
|
let constructor = function (module) {
|
|
super(module);
|
|
if (this.init)
|
|
this.init();
|
|
if (style)
|
|
this.shadowRoot.append(style.cloneNode(true));
|
|
if (template)
|
|
this.shadowRoot.append(template.cloneNode(true));
|
|
}
|
|
};
|
|
if (this.definedPrototype)
|
|
constructor.prototype = this.definedPrototype;
|
|
else
|
|
constructor.prototype = sky.Element;
|
|
constructor.tagName = this.getAttribute('name');
|
|
constructor.shadow = style || template;
|
|
this.module.exports[constructorName] = this.registerElement(constructor);
|
|
delete this.definedPrototype;
|
|
delete this.module;
|
|
this.state = 'loaded';
|
|
}
|
|
}
|
|
);
|
|
</script>
|