remove
This commit is contained in:
“chrisshank”
parent
7f01c93d7c
commit
b3138b6e91
|
|
@ -1,157 +0,0 @@
|
||||||
// Forked from https://github.com/lume/custom-attributes
|
|
||||||
|
|
||||||
type Constructor<T = object, A extends any[] = any[], Static = {}> = (new (...a: A) => T) & Static;
|
|
||||||
|
|
||||||
const forEach = Array.prototype.forEach;
|
|
||||||
|
|
||||||
export class CustomAttributeRegistry {
|
|
||||||
private _attrMap = new Map<string, Constructor>();
|
|
||||||
private _elementMap = new WeakMap<Element, Map<string, CustomAttribute>>();
|
|
||||||
|
|
||||||
private _observer: MutationObserver = new MutationObserver((mutations) => {
|
|
||||||
forEach.call(mutations, (m: MutationRecord) => {
|
|
||||||
if (m.type === 'attributes') {
|
|
||||||
const attr = this._getConstructor(m.attributeName!);
|
|
||||||
if (attr) this._handleChange(m.attributeName!, m.target as Element, m.oldValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
// childList
|
|
||||||
else {
|
|
||||||
forEach.call(m.removedNodes, this._elementDisconnected);
|
|
||||||
forEach.call(m.addedNodes, this._elementConnected);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
constructor(public ownerDocument: Document | ShadowRoot) {
|
|
||||||
if (!ownerDocument) throw new Error('Must be given a document');
|
|
||||||
}
|
|
||||||
|
|
||||||
define(attrName: string, Class: Constructor) {
|
|
||||||
this._attrMap.set(attrName, Class);
|
|
||||||
this._upgradeAttr(attrName);
|
|
||||||
this._reobserve();
|
|
||||||
}
|
|
||||||
|
|
||||||
get(element: Element, attrName: string) {
|
|
||||||
const map = this._elementMap.get(element);
|
|
||||||
if (!map) return;
|
|
||||||
return map.get(attrName);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _getConstructor(attrName: string) {
|
|
||||||
return this._attrMap.get(attrName);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _observe() {
|
|
||||||
this._observer.observe(this.ownerDocument, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true,
|
|
||||||
attributes: true,
|
|
||||||
attributeOldValue: true,
|
|
||||||
attributeFilter: Array.from(this._attrMap.keys()),
|
|
||||||
// attributeFilter: [...this._attrMap.keys()], // Broken in Oculus
|
|
||||||
// attributeFilter: this._attrMap.keys(), // This works in Chrome, but TS complains, and not clear if it should work in all browsers yet: https://github.com/whatwg/dom/issues/1092
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private _unobserve() {
|
|
||||||
this._observer.disconnect();
|
|
||||||
}
|
|
||||||
|
|
||||||
private _reobserve() {
|
|
||||||
this._unobserve();
|
|
||||||
this._observe();
|
|
||||||
}
|
|
||||||
|
|
||||||
private _upgradeAttr(
|
|
||||||
attrName: string,
|
|
||||||
node: Element | Document | ShadowRoot = this.ownerDocument
|
|
||||||
) {
|
|
||||||
const matches = node.querySelectorAll('[' + attrName + ']');
|
|
||||||
|
|
||||||
// Possibly create custom attributes that may be in the given 'node' tree.
|
|
||||||
// Use a forEach as Edge doesn't support for...of on a NodeList
|
|
||||||
forEach.call(matches, (element: Element) => this._handleChange(attrName, element, null));
|
|
||||||
}
|
|
||||||
|
|
||||||
private _elementConnected = (element: Element) => {
|
|
||||||
if (element.nodeType !== 1) return;
|
|
||||||
|
|
||||||
// For each of the connected element's attribute, possibly instantiate the custom attributes.
|
|
||||||
// Use a forEach as Safari 10 doesn't support for...of on NamedNodeMap (attributes)
|
|
||||||
forEach.call(element.attributes, (attr: Attr) => {
|
|
||||||
if (this._getConstructor(attr.name)) this._handleChange(attr.name, element, null);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Possibly instantiate custom attributes that may be in the subtree of the connected element.
|
|
||||||
this._attrMap.forEach((_constructor, attr) => this._upgradeAttr(attr, element));
|
|
||||||
};
|
|
||||||
|
|
||||||
private _elementDisconnected = (element: Element) => {
|
|
||||||
const map = this._elementMap.get(element);
|
|
||||||
if (!map) return;
|
|
||||||
|
|
||||||
map.forEach((inst) => inst.disconnectedCallback?.(), this);
|
|
||||||
|
|
||||||
this._elementMap.delete(element);
|
|
||||||
};
|
|
||||||
|
|
||||||
private _handleChange(attrName: string, el: Element, oldVal: string | null) {
|
|
||||||
let map = this._elementMap.get(el);
|
|
||||||
if (!map) this._elementMap.set(el, (map = new Map()));
|
|
||||||
|
|
||||||
let inst = map.get(attrName);
|
|
||||||
const newVal = el.getAttribute(attrName);
|
|
||||||
|
|
||||||
// Attribute is being created
|
|
||||||
if (!inst) {
|
|
||||||
const Constructor = this._getConstructor(attrName)!;
|
|
||||||
inst = new Constructor() as CustomAttribute;
|
|
||||||
map.set(attrName, inst);
|
|
||||||
inst.ownerElement = el;
|
|
||||||
inst.name = attrName;
|
|
||||||
if (newVal == null) throw new Error('Not possible!');
|
|
||||||
inst.value = newVal;
|
|
||||||
inst.connectedCallback?.();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attribute was removed
|
|
||||||
if (newVal == null) {
|
|
||||||
inst.disconnectedCallback?.();
|
|
||||||
map.delete(attrName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attribute changed
|
|
||||||
else if (newVal !== inst.value) {
|
|
||||||
inst.value = newVal;
|
|
||||||
if (oldVal == null) throw new Error('Not possible!');
|
|
||||||
inst.changedCallback?.(oldVal, newVal);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CustomAttribute {
|
|
||||||
ownerElement: Element;
|
|
||||||
name: string;
|
|
||||||
value: string;
|
|
||||||
connectedCallback?(): void;
|
|
||||||
disconnectedCallback?(): void;
|
|
||||||
changedCallback?(oldValue: string, newValue: string): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid errors trying to use DOM APIs in non-DOM environments (f.e. server-side rendering).
|
|
||||||
if (globalThis.window?.document) {
|
|
||||||
const _attachShadow = Element.prototype.attachShadow;
|
|
||||||
|
|
||||||
Element.prototype.attachShadow = function attachShadow(options) {
|
|
||||||
const root = _attachShadow.call(this, options);
|
|
||||||
|
|
||||||
if (!root.customAttributes) root.customAttributes = new CustomAttributeRegistry(root);
|
|
||||||
|
|
||||||
return root;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const customAttributes = new CustomAttributeRegistry(document);
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
import { CustomAttribute } from './custom-attributes';
|
|
||||||
|
|
||||||
export class Moveable extends CustomAttribute {
|
|
||||||
connectedCallback() {
|
|
||||||
this.ownerElement.addEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.addEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.addEventListener('touchstart', this);
|
|
||||||
this.ownerElement.addEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
this.ownerElement.removeEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.removeEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.removeEventListener('touchstart', this);
|
|
||||||
this.ownerElement.removeEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEvent(event: PointerEvent) {
|
|
||||||
switch (event.type) {
|
|
||||||
case 'pointerdown': {
|
|
||||||
if (event.button !== 0 || event.ctrlKey) return;
|
|
||||||
|
|
||||||
this.ownerElement.addEventListener('pointermove', this);
|
|
||||||
this.ownerElement.setPointerCapture(event.pointerId);
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'pointermove': {
|
|
||||||
const { left, top } = window.getComputedStyle(this.ownerElement);
|
|
||||||
let leftValue = parseInt(left);
|
|
||||||
let topValue = parseInt(top);
|
|
||||||
(this.ownerElement as HTMLElement).style.left = `${leftValue + event.movementX}px`;
|
|
||||||
(this.ownerElement as HTMLElement).style.top = `${topValue + event.movementY}px`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'lostpointercapture': {
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = '';
|
|
||||||
this.ownerElement.removeEventListener('pointermove', this);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'touchstart':
|
|
||||||
case 'dragstart': {
|
|
||||||
event.preventDefault();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import { CustomAttribute } from './custom-attributes';
|
|
||||||
|
|
||||||
export class Resizable extends CustomAttribute {
|
|
||||||
// Add resize handlers and CSS variables
|
|
||||||
connectedCallback() {
|
|
||||||
this.ownerElement.addEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.addEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.addEventListener('touchstart', this);
|
|
||||||
this.ownerElement.addEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
this.ownerElement.removeEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.removeEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.removeEventListener('touchstart', this);
|
|
||||||
this.ownerElement.removeEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEvent(event: PointerEvent) {
|
|
||||||
switch (event.type) {
|
|
||||||
case 'pointerdown': {
|
|
||||||
if (event.button !== 0 || event.ctrlKey) return;
|
|
||||||
|
|
||||||
this.ownerElement.addEventListener('pointermove', this);
|
|
||||||
this.ownerElement.setPointerCapture(event.pointerId);
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// TODO
|
|
||||||
case 'pointermove': {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'lostpointercapture': {
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = '';
|
|
||||||
this.ownerElement.removeEventListener('pointermove', this);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'touchstart':
|
|
||||||
case 'dragstart': {
|
|
||||||
event.preventDefault();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import { CustomAttribute } from './custom-attributes';
|
|
||||||
|
|
||||||
export class Rotatable extends CustomAttribute {
|
|
||||||
// Add rotate handlers and CSS variables
|
|
||||||
connectedCallback() {
|
|
||||||
this.ownerElement.addEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.addEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.addEventListener('touchstart', this);
|
|
||||||
this.ownerElement.addEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
this.ownerElement.removeEventListener('pointerdown', this);
|
|
||||||
this.ownerElement.removeEventListener('lostpointercapture', this);
|
|
||||||
this.ownerElement.removeEventListener('touchstart', this);
|
|
||||||
this.ownerElement.removeEventListener('dragstart', this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEvent(event: PointerEvent) {
|
|
||||||
switch (event.type) {
|
|
||||||
case 'pointerdown': {
|
|
||||||
if (event.button !== 0 || event.ctrlKey) return;
|
|
||||||
|
|
||||||
this.ownerElement.addEventListener('pointermove', this);
|
|
||||||
this.ownerElement.setPointerCapture(event.pointerId);
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// TODO
|
|
||||||
case 'pointermove': {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'lostpointercapture': {
|
|
||||||
(this.ownerElement as HTMLElement).style.userSelect = '';
|
|
||||||
this.ownerElement.removeEventListener('pointermove', this);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case 'touchstart':
|
|
||||||
case 'dragstart': {
|
|
||||||
event.preventDefault();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue