You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
12 KiB
JavaScript
320 lines
12 KiB
JavaScript
import {END, UPGRADE} from '../shared/symbols.js';
|
|
import {booleanAttribute, stringAttribute} from '../shared/attributes.js';
|
|
|
|
import {Event} from '../interface/event.js';
|
|
import {Element} from '../interface/element.js';
|
|
import {Classes, customElements} from '../interface/custom-element-registry.js';
|
|
|
|
const Level0 = new WeakMap;
|
|
const level0 = {
|
|
get(element, name) {
|
|
return Level0.has(element) && Level0.get(element)[name] || null;
|
|
},
|
|
set(element, name, value) {
|
|
if (!Level0.has(element))
|
|
Level0.set(element, {});
|
|
const handlers = Level0.get(element);
|
|
const type = name.slice(2);
|
|
if (handlers[name])
|
|
element.removeEventListener(type, handlers[name], false);
|
|
if ((handlers[name] = value))
|
|
element.addEventListener(type, value, false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @implements globalThis.HTMLElement
|
|
*/
|
|
export class HTMLElement extends Element {
|
|
|
|
static get observedAttributes() { return []; }
|
|
|
|
constructor(ownerDocument = null, localName = '') {
|
|
super(ownerDocument, localName);
|
|
|
|
const ownerLess = !ownerDocument;
|
|
let options;
|
|
|
|
if (ownerLess) {
|
|
const {constructor: Class} = this;
|
|
if (!Classes.has(Class))
|
|
throw new Error('unable to initialize this Custom Element');
|
|
({ownerDocument, localName, options} = Classes.get(Class));
|
|
}
|
|
|
|
if (ownerDocument[UPGRADE]) {
|
|
const {element, values} = ownerDocument[UPGRADE];
|
|
ownerDocument[UPGRADE] = null;
|
|
for (const [key, value] of values)
|
|
element[key] = value;
|
|
return element;
|
|
}
|
|
|
|
if (ownerLess) {
|
|
this.ownerDocument = this[END].ownerDocument = ownerDocument;
|
|
this.localName = localName;
|
|
customElements.set(this, {connected: false});
|
|
if (options.is)
|
|
this.setAttribute('is', options.is);
|
|
}
|
|
}
|
|
|
|
/* c8 ignore start */
|
|
|
|
/* TODO: what about these?
|
|
offsetHeight
|
|
offsetLeft
|
|
offsetParent
|
|
offsetTop
|
|
offsetWidth
|
|
*/
|
|
|
|
blur() { this.dispatchEvent(new Event('blur')); }
|
|
click() {
|
|
const clickEvent = new Event('click', {bubbles: true, cancelable: true});
|
|
clickEvent.button = 0;
|
|
|
|
this.dispatchEvent(clickEvent);
|
|
}
|
|
|
|
// Boolean getters
|
|
get accessKeyLabel() {
|
|
const {accessKey} = this;
|
|
return accessKey && `Alt+Shift+${accessKey}`;
|
|
}
|
|
get isContentEditable() { return this.hasAttribute('contenteditable'); }
|
|
|
|
// Boolean Accessors
|
|
get contentEditable() { return booleanAttribute.get(this, 'contenteditable'); }
|
|
set contentEditable(value) { booleanAttribute.set(this, 'contenteditable', value); }
|
|
get draggable() { return booleanAttribute.get(this, 'draggable'); }
|
|
set draggable(value) { booleanAttribute.set(this, 'draggable', value); }
|
|
get hidden() { return booleanAttribute.get(this, 'hidden'); }
|
|
set hidden(value) { booleanAttribute.set(this, 'hidden', value); }
|
|
get spellcheck() { return booleanAttribute.get(this, 'spellcheck'); }
|
|
set spellcheck(value) { booleanAttribute.set(this, 'spellcheck', value); }
|
|
|
|
// String Accessors
|
|
get accessKey() { return stringAttribute.get(this, 'accesskey'); }
|
|
set accessKey(value) { stringAttribute.set(this, 'accesskey', value); }
|
|
get dir() { return stringAttribute.get(this, 'dir'); }
|
|
set dir(value) { stringAttribute.set(this, 'dir', value); }
|
|
get lang() { return stringAttribute.get(this, 'lang'); }
|
|
set lang(value) { stringAttribute.set(this, 'lang', value); }
|
|
get title() { return stringAttribute.get(this, 'title'); }
|
|
set title(value) { stringAttribute.set(this, 'title', value); }
|
|
|
|
// DOM Level 0
|
|
get onabort() { return level0.get(this, 'onabort'); }
|
|
set onabort(value) { level0.set(this, 'onabort', value); }
|
|
|
|
get onblur() { return level0.get(this, 'onblur'); }
|
|
set onblur(value) { level0.set(this, 'onblur', value); }
|
|
|
|
get oncancel() { return level0.get(this, 'oncancel'); }
|
|
set oncancel(value) { level0.set(this, 'oncancel', value); }
|
|
|
|
get oncanplay() { return level0.get(this, 'oncanplay'); }
|
|
set oncanplay(value) { level0.set(this, 'oncanplay', value); }
|
|
|
|
get oncanplaythrough() { return level0.get(this, 'oncanplaythrough'); }
|
|
set oncanplaythrough(value) { level0.set(this, 'oncanplaythrough', value); }
|
|
|
|
get onchange() { return level0.get(this, 'onchange'); }
|
|
set onchange(value) { level0.set(this, 'onchange', value); }
|
|
|
|
get onclick() { return level0.get(this, 'onclick'); }
|
|
set onclick(value) { level0.set(this, 'onclick', value); }
|
|
|
|
get onclose() { return level0.get(this, 'onclose'); }
|
|
set onclose(value) { level0.set(this, 'onclose', value); }
|
|
|
|
get oncontextmenu() { return level0.get(this, 'oncontextmenu'); }
|
|
set oncontextmenu(value) { level0.set(this, 'oncontextmenu', value); }
|
|
|
|
get oncuechange() { return level0.get(this, 'oncuechange'); }
|
|
set oncuechange(value) { level0.set(this, 'oncuechange', value); }
|
|
|
|
get ondblclick() { return level0.get(this, 'ondblclick'); }
|
|
set ondblclick(value) { level0.set(this, 'ondblclick', value); }
|
|
|
|
get ondrag() { return level0.get(this, 'ondrag'); }
|
|
set ondrag(value) { level0.set(this, 'ondrag', value); }
|
|
|
|
get ondragend() { return level0.get(this, 'ondragend'); }
|
|
set ondragend(value) { level0.set(this, 'ondragend', value); }
|
|
|
|
get ondragenter() { return level0.get(this, 'ondragenter'); }
|
|
set ondragenter(value) { level0.set(this, 'ondragenter', value); }
|
|
|
|
get ondragleave() { return level0.get(this, 'ondragleave'); }
|
|
set ondragleave(value) { level0.set(this, 'ondragleave', value); }
|
|
|
|
get ondragover() { return level0.get(this, 'ondragover'); }
|
|
set ondragover(value) { level0.set(this, 'ondragover', value); }
|
|
|
|
get ondragstart() { return level0.get(this, 'ondragstart'); }
|
|
set ondragstart(value) { level0.set(this, 'ondragstart', value); }
|
|
|
|
get ondrop() { return level0.get(this, 'ondrop'); }
|
|
set ondrop(value) { level0.set(this, 'ondrop', value); }
|
|
|
|
get ondurationchange() { return level0.get(this, 'ondurationchange'); }
|
|
set ondurationchange(value) { level0.set(this, 'ondurationchange', value); }
|
|
|
|
get onemptied() { return level0.get(this, 'onemptied'); }
|
|
set onemptied(value) { level0.set(this, 'onemptied', value); }
|
|
|
|
get onended() { return level0.get(this, 'onended'); }
|
|
set onended(value) { level0.set(this, 'onended', value); }
|
|
|
|
get onerror() { return level0.get(this, 'onerror'); }
|
|
set onerror(value) { level0.set(this, 'onerror', value); }
|
|
|
|
get onfocus() { return level0.get(this, 'onfocus'); }
|
|
set onfocus(value) { level0.set(this, 'onfocus', value); }
|
|
|
|
get oninput() { return level0.get(this, 'oninput'); }
|
|
set oninput(value) { level0.set(this, 'oninput', value); }
|
|
|
|
get oninvalid() { return level0.get(this, 'oninvalid'); }
|
|
set oninvalid(value) { level0.set(this, 'oninvalid', value); }
|
|
|
|
get onkeydown() { return level0.get(this, 'onkeydown'); }
|
|
set onkeydown(value) { level0.set(this, 'onkeydown', value); }
|
|
|
|
get onkeypress() { return level0.get(this, 'onkeypress'); }
|
|
set onkeypress(value) { level0.set(this, 'onkeypress', value); }
|
|
|
|
get onkeyup() { return level0.get(this, 'onkeyup'); }
|
|
set onkeyup(value) { level0.set(this, 'onkeyup', value); }
|
|
|
|
get onload() { return level0.get(this, 'onload'); }
|
|
set onload(value) { level0.set(this, 'onload', value); }
|
|
|
|
get onloadeddata() { return level0.get(this, 'onloadeddata'); }
|
|
set onloadeddata(value) { level0.set(this, 'onloadeddata', value); }
|
|
|
|
get onloadedmetadata() { return level0.get(this, 'onloadedmetadata'); }
|
|
set onloadedmetadata(value) { level0.set(this, 'onloadedmetadata', value); }
|
|
|
|
get onloadstart() { return level0.get(this, 'onloadstart'); }
|
|
set onloadstart(value) { level0.set(this, 'onloadstart', value); }
|
|
|
|
get onmousedown() { return level0.get(this, 'onmousedown'); }
|
|
set onmousedown(value) { level0.set(this, 'onmousedown', value); }
|
|
|
|
get onmouseenter() { return level0.get(this, 'onmouseenter'); }
|
|
set onmouseenter(value) { level0.set(this, 'onmouseenter', value); }
|
|
|
|
get onmouseleave() { return level0.get(this, 'onmouseleave'); }
|
|
set onmouseleave(value) { level0.set(this, 'onmouseleave', value); }
|
|
|
|
get onmousemove() { return level0.get(this, 'onmousemove'); }
|
|
set onmousemove(value) { level0.set(this, 'onmousemove', value); }
|
|
|
|
get onmouseout() { return level0.get(this, 'onmouseout'); }
|
|
set onmouseout(value) { level0.set(this, 'onmouseout', value); }
|
|
|
|
get onmouseover() { return level0.get(this, 'onmouseover'); }
|
|
set onmouseover(value) { level0.set(this, 'onmouseover', value); }
|
|
|
|
get onmouseup() { return level0.get(this, 'onmouseup'); }
|
|
set onmouseup(value) { level0.set(this, 'onmouseup', value); }
|
|
|
|
get onmousewheel() { return level0.get(this, 'onmousewheel'); }
|
|
set onmousewheel(value) { level0.set(this, 'onmousewheel', value); }
|
|
|
|
get onpause() { return level0.get(this, 'onpause'); }
|
|
set onpause(value) { level0.set(this, 'onpause', value); }
|
|
|
|
get onplay() { return level0.get(this, 'onplay'); }
|
|
set onplay(value) { level0.set(this, 'onplay', value); }
|
|
|
|
get onplaying() { return level0.get(this, 'onplaying'); }
|
|
set onplaying(value) { level0.set(this, 'onplaying', value); }
|
|
|
|
get onprogress() { return level0.get(this, 'onprogress'); }
|
|
set onprogress(value) { level0.set(this, 'onprogress', value); }
|
|
|
|
get onratechange() { return level0.get(this, 'onratechange'); }
|
|
set onratechange(value) { level0.set(this, 'onratechange', value); }
|
|
|
|
get onreset() { return level0.get(this, 'onreset'); }
|
|
set onreset(value) { level0.set(this, 'onreset', value); }
|
|
|
|
get onresize() { return level0.get(this, 'onresize'); }
|
|
set onresize(value) { level0.set(this, 'onresize', value); }
|
|
|
|
get onscroll() { return level0.get(this, 'onscroll'); }
|
|
set onscroll(value) { level0.set(this, 'onscroll', value); }
|
|
|
|
get onseeked() { return level0.get(this, 'onseeked'); }
|
|
set onseeked(value) { level0.set(this, 'onseeked', value); }
|
|
|
|
get onseeking() { return level0.get(this, 'onseeking'); }
|
|
set onseeking(value) { level0.set(this, 'onseeking', value); }
|
|
|
|
get onselect() { return level0.get(this, 'onselect'); }
|
|
set onselect(value) { level0.set(this, 'onselect', value); }
|
|
|
|
get onshow() { return level0.get(this, 'onshow'); }
|
|
set onshow(value) { level0.set(this, 'onshow', value); }
|
|
|
|
get onstalled() { return level0.get(this, 'onstalled'); }
|
|
set onstalled(value) { level0.set(this, 'onstalled', value); }
|
|
|
|
get onsubmit() { return level0.get(this, 'onsubmit'); }
|
|
set onsubmit(value) { level0.set(this, 'onsubmit', value); }
|
|
|
|
get onsuspend() { return level0.get(this, 'onsuspend'); }
|
|
set onsuspend(value) { level0.set(this, 'onsuspend', value); }
|
|
|
|
get ontimeupdate() { return level0.get(this, 'ontimeupdate'); }
|
|
set ontimeupdate(value) { level0.set(this, 'ontimeupdate', value); }
|
|
|
|
get ontoggle() { return level0.get(this, 'ontoggle'); }
|
|
set ontoggle(value) { level0.set(this, 'ontoggle', value); }
|
|
|
|
get onvolumechange() { return level0.get(this, 'onvolumechange'); }
|
|
set onvolumechange(value) { level0.set(this, 'onvolumechange', value); }
|
|
|
|
get onwaiting() { return level0.get(this, 'onwaiting'); }
|
|
set onwaiting(value) { level0.set(this, 'onwaiting', value); }
|
|
|
|
get onauxclick() { return level0.get(this, 'onauxclick'); }
|
|
set onauxclick(value) { level0.set(this, 'onauxclick', value); }
|
|
|
|
get ongotpointercapture() { return level0.get(this, 'ongotpointercapture'); }
|
|
set ongotpointercapture(value) { level0.set(this, 'ongotpointercapture', value); }
|
|
|
|
get onlostpointercapture() { return level0.get(this, 'onlostpointercapture'); }
|
|
set onlostpointercapture(value) { level0.set(this, 'onlostpointercapture', value); }
|
|
|
|
get onpointercancel() { return level0.get(this, 'onpointercancel'); }
|
|
set onpointercancel(value) { level0.set(this, 'onpointercancel', value); }
|
|
|
|
get onpointerdown() { return level0.get(this, 'onpointerdown'); }
|
|
set onpointerdown(value) { level0.set(this, 'onpointerdown', value); }
|
|
|
|
get onpointerenter() { return level0.get(this, 'onpointerenter'); }
|
|
set onpointerenter(value) { level0.set(this, 'onpointerenter', value); }
|
|
|
|
get onpointerleave() { return level0.get(this, 'onpointerleave'); }
|
|
set onpointerleave(value) { level0.set(this, 'onpointerleave', value); }
|
|
|
|
get onpointermove() { return level0.get(this, 'onpointermove'); }
|
|
set onpointermove(value) { level0.set(this, 'onpointermove', value); }
|
|
|
|
get onpointerout() { return level0.get(this, 'onpointerout'); }
|
|
set onpointerout(value) { level0.set(this, 'onpointerout', value); }
|
|
|
|
get onpointerover() { return level0.get(this, 'onpointerover'); }
|
|
set onpointerover(value) { level0.set(this, 'onpointerover', value); }
|
|
|
|
get onpointerup() { return level0.get(this, 'onpointerup'); }
|
|
set onpointerup(value) { level0.set(this, 'onpointerup', value); }
|
|
/* c8 ignore stop */
|
|
|
|
}
|