| 1 |
|
| 2 | export const DOMObserver = {
|
| 3 |
|
| 4 | iterateCallback(callbacksConteiner, node) {
|
| 5 | if (node.nodeType === Node.ELEMENT_NODE) {
|
| 6 | callbacksConteiner.forEach(cb => {
|
| 7 | if (node.tagName.toLowerCase() === cb[0]) {
|
| 8 | cb[1](node);
|
| 9 | } else {
|
| 10 | const childNodes = node.getElementsByTagName(cb[0]);
|
| 11 | [].forEach.call(childNodes, childNode => {
|
| 12 | cb[1](childNode);
|
| 13 | });
|
| 14 | }
|
| 15 | });
|
| 16 | }
|
| 17 | },
|
| 18 |
|
| 19 | create() {
|
| 20 | return new MutationObserver(mutations => {
|
| 21 | mutations.forEach(mutation => {
|
| 22 | if (mutation.addedNodes.length > 0 && document.body.__observer_insert !== undefined) {
|
| 23 | [].forEach.call(mutation.addedNodes, addedNode => {
|
| 24 | this.iterateCallback(document.body.__observer_insert, addedNode);
|
| 25 | });
|
| 26 | }
|
| 27 |
|
| 28 | if (mutation.removedNodes.length > 0 && document.body.__observer_remove !== undefined) {
|
| 29 | [].forEach.call(mutation.removedNodes, removedNode => {
|
| 30 | this.iterateCallback(document.body.__observer_remove, removedNode);
|
| 31 | });
|
| 32 | }
|
| 33 | });
|
| 34 | });
|
| 35 | },
|
| 36 |
|
| 37 | createForAttr(component) {
|
| 38 | return new MutationObserver(mutations => {
|
| 39 | mutations.forEach(mutation => {
|
| 40 | if (mutation.attributeName !== null && component.__observer_attr !== undefined) {
|
| 41 | component.__observer_attr.forEach(cb => {
|
| 42 | if (mutation.attributeName === cb[0]) {
|
| 43 | cb[1]();
|
| 44 | }
|
| 45 | })
|
| 46 | }
|
| 47 | });
|
| 48 | });
|
| 49 | },
|
| 50 |
|
| 51 | init() {
|
| 52 | if (document.body.__observer === undefined) {
|
| 53 | document.body.__observer = this.create();
|
| 54 | this.observe();
|
| 55 | }
|
| 56 | },
|
| 57 |
|
| 58 | onInsert(tagName, callback) {
|
| 59 | if (document.body.__observer_insert === undefined) {
|
| 60 | document.body.__observer_insert = [];
|
| 61 | }
|
| 62 | document.body.__observer_insert.push([tagName, callback]);
|
| 63 | },
|
| 64 |
|
| 65 | onRemove(tagName, callback) {
|
| 66 | if (document.body.__observer_remove === undefined) {
|
| 67 | document.body.__observer_remove = [];
|
| 68 | }
|
| 69 | document.body.__observer_remove.push([tagName, callback]);
|
| 70 | },
|
| 71 |
|
| 72 | onAttributeChange(component, attrName, callback) {
|
| 73 | if (component.__observer_attr === undefined) {
|
| 74 | component.__observer_attr = [];
|
| 75 | }
|
| 76 | component.__observer_attr.push([attrName, callback]);
|
| 77 | },
|
| 78 |
|
| 79 | observe() {
|
| 80 | document.body.__observer.observe(document.body, { childList: true, subtree: true });
|
| 81 | },
|
| 82 |
|
| 83 | observeAttr(component) {
|
| 84 | component.__observer.observe(component, { attributes: true });
|
| 85 | },
|
| 86 |
|
| 87 | registerAttribute(component, name, defaultValue, onChange) {
|
| 88 | const attrVal = component.getAttribute(name);
|
| 89 | component['_' + name] = attrVal ? attrVal : defaultValue;
|
| 90 | onChange(component['_' + name]);
|
| 91 | Object.defineProperty(component, name, {
|
| 92 | get() {
|
| 93 | return component['_' + name]
|
| 94 | },
|
| 95 | set(val) {
|
| 96 | component['_' + name] = val;
|
| 97 | onChange(val);
|
| 98 | }
|
| 99 | });
|
| 100 |
|
| 101 | this.onAttributeChange(component, name, () => {
|
| 102 | const val = component.getAttribute(name);
|
| 103 | component['_' + name] = val;
|
| 104 | onChange(val);
|
| 105 | });
|
| 106 |
|
| 107 | if (component.__observer === undefined) {
|
| 108 | component.__observer = this.createForAttr(component);
|
| 109 | this.observeAttr(component);
|
| 110 | }
|
| 111 | }
|
| 112 | };
|