You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
587 lines
16 KiB
587 lines
16 KiB
2 years ago
|
var MutationObserver = window.MutationObserver
|
||
|
|| window.WebKitMutationObserver
|
||
|
|| window.MozMutationObserver;
|
||
|
|
||
|
/*
|
||
|
* Copyright 2012 The Polymer Authors. All rights reserved.
|
||
|
* Use of this source code is goverened by a BSD-style
|
||
|
* license that can be found in the LICENSE file.
|
||
|
*/
|
||
|
|
||
|
var WeakMap = window.WeakMap;
|
||
|
|
||
|
if (typeof WeakMap === 'undefined') {
|
||
|
var defineProperty = Object.defineProperty;
|
||
|
var counter = Date.now() % 1e9;
|
||
|
|
||
|
WeakMap = function() {
|
||
|
this.name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__');
|
||
|
};
|
||
|
|
||
|
WeakMap.prototype = {
|
||
|
set: function(key, value) {
|
||
|
var entry = key[this.name];
|
||
|
if (entry && entry[0] === key)
|
||
|
entry[1] = value;
|
||
|
else
|
||
|
defineProperty(key, this.name, {value: [key, value], writable: true});
|
||
|
return this;
|
||
|
},
|
||
|
get: function(key) {
|
||
|
var entry;
|
||
|
return (entry = key[this.name]) && entry[0] === key ?
|
||
|
entry[1] : undefined;
|
||
|
},
|
||
|
'delete': function(key) {
|
||
|
var entry = key[this.name];
|
||
|
if (!entry) return false;
|
||
|
var hasValue = entry[0] === key;
|
||
|
entry[0] = entry[1] = undefined;
|
||
|
return hasValue;
|
||
|
},
|
||
|
has: function(key) {
|
||
|
var entry = key[this.name];
|
||
|
if (!entry) return false;
|
||
|
return entry[0] === key;
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
|
||
|
var registrationsTable = new WeakMap();
|
||
|
|
||
|
// We use setImmediate or postMessage for our future callback.
|
||
|
var setImmediate = window.msSetImmediate;
|
||
|
|
||
|
// Use post message to emulate setImmediate.
|
||
|
if (!setImmediate) {
|
||
|
var setImmediateQueue = [];
|
||
|
var sentinel = String(Math.random());
|
||
|
window.addEventListener('message', function(e) {
|
||
|
if (e.data === sentinel) {
|
||
|
var queue = setImmediateQueue;
|
||
|
setImmediateQueue = [];
|
||
|
queue.forEach(function(func) {
|
||
|
func();
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
setImmediate = function(func) {
|
||
|
setImmediateQueue.push(func);
|
||
|
window.postMessage(sentinel, '*');
|
||
|
};
|
||
|
}
|
||
|
|
||
|
// This is used to ensure that we never schedule 2 callas to setImmediate
|
||
|
var isScheduled = false;
|
||
|
|
||
|
// Keep track of observers that needs to be notified next time.
|
||
|
var scheduledObservers = [];
|
||
|
|
||
|
/**
|
||
|
* Schedules |dispatchCallback| to be called in the future.
|
||
|
* @param {MutationObserver} observer
|
||
|
*/
|
||
|
function scheduleCallback(observer) {
|
||
|
scheduledObservers.push(observer);
|
||
|
if (!isScheduled) {
|
||
|
isScheduled = true;
|
||
|
setImmediate(dispatchCallbacks);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function wrapIfNeeded(node) {
|
||
|
return window.ShadowDOMPolyfill &&
|
||
|
window.ShadowDOMPolyfill.wrapIfNeeded(node) ||
|
||
|
node;
|
||
|
}
|
||
|
|
||
|
function dispatchCallbacks() {
|
||
|
// http://dom.spec.whatwg.org/#mutation-observers
|
||
|
|
||
|
isScheduled = false; // Used to allow a new setImmediate call above.
|
||
|
|
||
|
var observers = scheduledObservers;
|
||
|
scheduledObservers = [];
|
||
|
// Sort observers based on their creation UID (incremental).
|
||
|
observers.sort(function(o1, o2) {
|
||
|
return o1.uid_ - o2.uid_;
|
||
|
});
|
||
|
|
||
|
var anyNonEmpty = false;
|
||
|
observers.forEach(function(observer) {
|
||
|
|
||
|
// 2.1, 2.2
|
||
|
var queue = observer.takeRecords();
|
||
|
// 2.3. Remove all transient registered observers whose observer is mo.
|
||
|
removeTransientObserversFor(observer);
|
||
|
|
||
|
// 2.4
|
||
|
if (queue.length) {
|
||
|
observer.callback_(queue, observer);
|
||
|
anyNonEmpty = true;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// 3.
|
||
|
if (anyNonEmpty)
|
||
|
dispatchCallbacks();
|
||
|
}
|
||
|
|
||
|
function removeTransientObserversFor(observer) {
|
||
|
observer.nodes_.forEach(function(node) {
|
||
|
var registrations = registrationsTable.get(node);
|
||
|
if (!registrations)
|
||
|
return;
|
||
|
registrations.forEach(function(registration) {
|
||
|
if (registration.observer === observer)
|
||
|
registration.removeTransientObservers();
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* This function is used for the "For each registered observer observer (with
|
||
|
* observer's options as options) in target's list of registered observers,
|
||
|
* run these substeps:" and the "For each ancestor ancestor of target, and for
|
||
|
* each registered observer observer (with options options) in ancestor's list
|
||
|
* of registered observers, run these substeps:" part of the algorithms. The
|
||
|
* |options.subtree| is checked to ensure that the callback is called
|
||
|
* correctly.
|
||
|
*
|
||
|
* @param {Node} target
|
||
|
* @param {function(MutationObserverInit):MutationRecord} callback
|
||
|
*/
|
||
|
function forEachAncestorAndObserverEnqueueRecord(target, callback) {
|
||
|
for (var node = target; node; node = node.parentNode) {
|
||
|
var registrations = registrationsTable.get(node);
|
||
|
|
||
|
if (registrations) {
|
||
|
for (var j = 0; j < registrations.length; j++) {
|
||
|
var registration = registrations[j];
|
||
|
var options = registration.options;
|
||
|
|
||
|
// Only target ignores subtree.
|
||
|
if (node !== target && !options.subtree)
|
||
|
continue;
|
||
|
|
||
|
var record = callback(options);
|
||
|
if (record)
|
||
|
registration.enqueue(record);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var uidCounter = 0;
|
||
|
|
||
|
/**
|
||
|
* The class that maps to the DOM MutationObserver interface.
|
||
|
* @param {Function} callback.
|
||
|
* @constructor
|
||
|
*/
|
||
|
function JsMutationObserver(callback) {
|
||
|
this.callback_ = callback;
|
||
|
this.nodes_ = [];
|
||
|
this.records_ = [];
|
||
|
this.uid_ = ++uidCounter;
|
||
|
}
|
||
|
|
||
|
JsMutationObserver.prototype = {
|
||
|
observe: function(target, options) {
|
||
|
target = wrapIfNeeded(target);
|
||
|
|
||
|
// 1.1
|
||
|
if (!options.childList && !options.attributes && !options.characterData ||
|
||
|
|
||
|
// 1.2
|
||
|
options.attributeOldValue && !options.attributes ||
|
||
|
|
||
|
// 1.3
|
||
|
options.attributeFilter && options.attributeFilter.length &&
|
||
|
!options.attributes ||
|
||
|
|
||
|
// 1.4
|
||
|
options.characterDataOldValue && !options.characterData) {
|
||
|
|
||
|
throw new SyntaxError();
|
||
|
}
|
||
|
|
||
|
var registrations = registrationsTable.get(target);
|
||
|
if (!registrations)
|
||
|
registrationsTable.set(target, registrations = []);
|
||
|
|
||
|
// 2
|
||
|
// If target's list of registered observers already includes a registered
|
||
|
// observer associated with the context object, replace that registered
|
||
|
// observer's options with options.
|
||
|
var registration;
|
||
|
for (var i = 0; i < registrations.length; i++) {
|
||
|
if (registrations[i].observer === this) {
|
||
|
registration = registrations[i];
|
||
|
registration.removeListeners();
|
||
|
registration.options = options;
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 3.
|
||
|
// Otherwise, add a new registered observer to target's list of registered
|
||
|
// observers with the context object as the observer and options as the
|
||
|
// options, and add target to context object's list of nodes on which it
|
||
|
// is registered.
|
||
|
if (!registration) {
|
||
|
registration = new Registration(this, target, options);
|
||
|
registrations.push(registration);
|
||
|
this.nodes_.push(target);
|
||
|
}
|
||
|
|
||
|
registration.addListeners();
|
||
|
},
|
||
|
|
||
|
disconnect: function() {
|
||
|
this.nodes_.forEach(function(node) {
|
||
|
var registrations = registrationsTable.get(node);
|
||
|
for (var i = 0; i < registrations.length; i++) {
|
||
|
var registration = registrations[i];
|
||
|
if (registration.observer === this) {
|
||
|
registration.removeListeners();
|
||
|
registrations.splice(i, 1);
|
||
|
// Each node can only have one registered observer associated with
|
||
|
// this observer.
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, this);
|
||
|
this.records_ = [];
|
||
|
},
|
||
|
|
||
|
takeRecords: function() {
|
||
|
var copyOfRecords = this.records_;
|
||
|
this.records_ = [];
|
||
|
return copyOfRecords;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* @param {string} type
|
||
|
* @param {Node} target
|
||
|
* @constructor
|
||
|
*/
|
||
|
function MutationRecord(type, target) {
|
||
|
this.type = type;
|
||
|
this.target = target;
|
||
|
this.addedNodes = [];
|
||
|
this.removedNodes = [];
|
||
|
this.previousSibling = null;
|
||
|
this.nextSibling = null;
|
||
|
this.attributeName = null;
|
||
|
this.attributeNamespace = null;
|
||
|
this.oldValue = null;
|
||
|
}
|
||
|
|
||
|
function copyMutationRecord(original) {
|
||
|
var record = new MutationRecord(original.type, original.target);
|
||
|
record.addedNodes = original.addedNodes.slice();
|
||
|
record.removedNodes = original.removedNodes.slice();
|
||
|
record.previousSibling = original.previousSibling;
|
||
|
record.nextSibling = original.nextSibling;
|
||
|
record.attributeName = original.attributeName;
|
||
|
record.attributeNamespace = original.attributeNamespace;
|
||
|
record.oldValue = original.oldValue;
|
||
|
return record;
|
||
|
};
|
||
|
|
||
|
// We keep track of the two (possibly one) records used in a single mutation.
|
||
|
var currentRecord, recordWithOldValue;
|
||
|
|
||
|
/**
|
||
|
* Creates a record without |oldValue| and caches it as |currentRecord| for
|
||
|
* later use.
|
||
|
* @param {string} oldValue
|
||
|
* @return {MutationRecord}
|
||
|
*/
|
||
|
function getRecord(type, target) {
|
||
|
return currentRecord = new MutationRecord(type, target);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Gets or creates a record with |oldValue| based in the |currentRecord|
|
||
|
* @param {string} oldValue
|
||
|
* @return {MutationRecord}
|
||
|
*/
|
||
|
function getRecordWithOldValue(oldValue) {
|
||
|
if (recordWithOldValue)
|
||
|
return recordWithOldValue;
|
||
|
recordWithOldValue = copyMutationRecord(currentRecord);
|
||
|
recordWithOldValue.oldValue = oldValue;
|
||
|
return recordWithOldValue;
|
||
|
}
|
||
|
|
||
|
function clearRecords() {
|
||
|
currentRecord = recordWithOldValue = undefined;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {MutationRecord} record
|
||
|
* @return {boolean} Whether the record represents a record from the current
|
||
|
* mutation event.
|
||
|
*/
|
||
|
function recordRepresentsCurrentMutation(record) {
|
||
|
return record === recordWithOldValue || record === currentRecord;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Selects which record, if any, to replace the last record in the queue.
|
||
|
* This returns |null| if no record should be replaced.
|
||
|
*
|
||
|
* @param {MutationRecord} lastRecord
|
||
|
* @param {MutationRecord} newRecord
|
||
|
* @param {MutationRecord}
|
||
|
*/
|
||
|
function selectRecord(lastRecord, newRecord) {
|
||
|
if (lastRecord === newRecord)
|
||
|
return lastRecord;
|
||
|
|
||
|
// Check if the the record we are adding represents the same record. If
|
||
|
// so, we keep the one with the oldValue in it.
|
||
|
if (recordWithOldValue && recordRepresentsCurrentMutation(lastRecord))
|
||
|
return recordWithOldValue;
|
||
|
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Class used to represent a registered observer.
|
||
|
* @param {MutationObserver} observer
|
||
|
* @param {Node} target
|
||
|
* @param {MutationObserverInit} options
|
||
|
* @constructor
|
||
|
*/
|
||
|
function Registration(observer, target, options) {
|
||
|
this.observer = observer;
|
||
|
this.target = target;
|
||
|
this.options = options;
|
||
|
this.transientObservedNodes = [];
|
||
|
}
|
||
|
|
||
|
Registration.prototype = {
|
||
|
enqueue: function(record) {
|
||
|
var records = this.observer.records_;
|
||
|
var length = records.length;
|
||
|
|
||
|
// There are cases where we replace the last record with the new record.
|
||
|
// For example if the record represents the same mutation we need to use
|
||
|
// the one with the oldValue. If we get same record (this can happen as we
|
||
|
// walk up the tree) we ignore the new record.
|
||
|
if (records.length > 0) {
|
||
|
var lastRecord = records[length - 1];
|
||
|
var recordToReplaceLast = selectRecord(lastRecord, record);
|
||
|
if (recordToReplaceLast) {
|
||
|
records[length - 1] = recordToReplaceLast;
|
||
|
return;
|
||
|
}
|
||
|
} else {
|
||
|
scheduleCallback(this.observer);
|
||
|
}
|
||
|
|
||
|
records[length] = record;
|
||
|
},
|
||
|
|
||
|
addListeners: function() {
|
||
|
this.addListeners_(this.target);
|
||
|
},
|
||
|
|
||
|
addListeners_: function(node) {
|
||
|
var options = this.options;
|
||
|
if (options.attributes)
|
||
|
node.addEventListener('DOMAttrModified', this, true);
|
||
|
|
||
|
if (options.characterData)
|
||
|
node.addEventListener('DOMCharacterDataModified', this, true);
|
||
|
|
||
|
if (options.childList)
|
||
|
node.addEventListener('DOMNodeInserted', this, true);
|
||
|
|
||
|
if (options.childList || options.subtree)
|
||
|
node.addEventListener('DOMNodeRemoved', this, true);
|
||
|
},
|
||
|
|
||
|
removeListeners: function() {
|
||
|
this.removeListeners_(this.target);
|
||
|
},
|
||
|
|
||
|
removeListeners_: function(node) {
|
||
|
var options = this.options;
|
||
|
if (options.attributes)
|
||
|
node.removeEventListener('DOMAttrModified', this, true);
|
||
|
|
||
|
if (options.characterData)
|
||
|
node.removeEventListener('DOMCharacterDataModified', this, true);
|
||
|
|
||
|
if (options.childList)
|
||
|
node.removeEventListener('DOMNodeInserted', this, true);
|
||
|
|
||
|
if (options.childList || options.subtree)
|
||
|
node.removeEventListener('DOMNodeRemoved', this, true);
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Adds a transient observer on node. The transient observer gets removed
|
||
|
* next time we deliver the change records.
|
||
|
* @param {Node} node
|
||
|
*/
|
||
|
addTransientObserver: function(node) {
|
||
|
// Don't add transient observers on the target itself. We already have all
|
||
|
// the required listeners set up on the target.
|
||
|
if (node === this.target)
|
||
|
return;
|
||
|
|
||
|
this.addListeners_(node);
|
||
|
this.transientObservedNodes.push(node);
|
||
|
var registrations = registrationsTable.get(node);
|
||
|
if (!registrations)
|
||
|
registrationsTable.set(node, registrations = []);
|
||
|
|
||
|
// We know that registrations does not contain this because we already
|
||
|
// checked if node === this.target.
|
||
|
registrations.push(this);
|
||
|
},
|
||
|
|
||
|
removeTransientObservers: function() {
|
||
|
var transientObservedNodes = this.transientObservedNodes;
|
||
|
this.transientObservedNodes = [];
|
||
|
|
||
|
transientObservedNodes.forEach(function(node) {
|
||
|
// Transient observers are never added to the target.
|
||
|
this.removeListeners_(node);
|
||
|
|
||
|
var registrations = registrationsTable.get(node);
|
||
|
for (var i = 0; i < registrations.length; i++) {
|
||
|
if (registrations[i] === this) {
|
||
|
registrations.splice(i, 1);
|
||
|
// Each node can only have one registered observer associated with
|
||
|
// this observer.
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, this);
|
||
|
},
|
||
|
|
||
|
handleEvent: function(e) {
|
||
|
// Stop propagation since we are managing the propagation manually.
|
||
|
// This means that other mutation events on the page will not work
|
||
|
// correctly but that is by design.
|
||
|
e.stopImmediatePropagation();
|
||
|
|
||
|
switch (e.type) {
|
||
|
case 'DOMAttrModified':
|
||
|
// http://dom.spec.whatwg.org/#concept-mo-queue-attributes
|
||
|
|
||
|
var name = e.attrName;
|
||
|
var namespace = e.relatedNode.namespaceURI;
|
||
|
var target = e.target;
|
||
|
|
||
|
// 1.
|
||
|
var record = new getRecord('attributes', target);
|
||
|
record.attributeName = name;
|
||
|
record.attributeNamespace = namespace;
|
||
|
|
||
|
// 2.
|
||
|
var oldValue = null;
|
||
|
if (!(typeof MutationEvent !== 'undefined' && e.attrChange === MutationEvent.ADDITION))
|
||
|
oldValue = e.prevValue;
|
||
|
|
||
|
forEachAncestorAndObserverEnqueueRecord(target, function(options) {
|
||
|
// 3.1, 4.2
|
||
|
if (!options.attributes)
|
||
|
return;
|
||
|
|
||
|
// 3.2, 4.3
|
||
|
if (options.attributeFilter && options.attributeFilter.length &&
|
||
|
options.attributeFilter.indexOf(name) === -1 &&
|
||
|
options.attributeFilter.indexOf(namespace) === -1) {
|
||
|
return;
|
||
|
}
|
||
|
// 3.3, 4.4
|
||
|
if (options.attributeOldValue)
|
||
|
return getRecordWithOldValue(oldValue);
|
||
|
|
||
|
// 3.4, 4.5
|
||
|
return record;
|
||
|
});
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'DOMCharacterDataModified':
|
||
|
// http://dom.spec.whatwg.org/#concept-mo-queue-characterdata
|
||
|
var target = e.target;
|
||
|
|
||
|
// 1.
|
||
|
var record = getRecord('characterData', target);
|
||
|
|
||
|
// 2.
|
||
|
var oldValue = e.prevValue;
|
||
|
|
||
|
|
||
|
forEachAncestorAndObserverEnqueueRecord(target, function(options) {
|
||
|
// 3.1, 4.2
|
||
|
if (!options.characterData)
|
||
|
return;
|
||
|
|
||
|
// 3.2, 4.3
|
||
|
if (options.characterDataOldValue)
|
||
|
return getRecordWithOldValue(oldValue);
|
||
|
|
||
|
// 3.3, 4.4
|
||
|
return record;
|
||
|
});
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'DOMNodeRemoved':
|
||
|
this.addTransientObserver(e.target);
|
||
|
// Fall through.
|
||
|
case 'DOMNodeInserted':
|
||
|
// http://dom.spec.whatwg.org/#concept-mo-queue-childlist
|
||
|
var target = e.relatedNode;
|
||
|
var changedNode = e.target;
|
||
|
var addedNodes, removedNodes;
|
||
|
if (e.type === 'DOMNodeInserted') {
|
||
|
addedNodes = [changedNode];
|
||
|
removedNodes = [];
|
||
|
} else {
|
||
|
|
||
|
addedNodes = [];
|
||
|
removedNodes = [changedNode];
|
||
|
}
|
||
|
var previousSibling = changedNode.previousSibling;
|
||
|
var nextSibling = changedNode.nextSibling;
|
||
|
|
||
|
// 1.
|
||
|
var record = getRecord('childList', target);
|
||
|
record.addedNodes = addedNodes;
|
||
|
record.removedNodes = removedNodes;
|
||
|
record.previousSibling = previousSibling;
|
||
|
record.nextSibling = nextSibling;
|
||
|
|
||
|
forEachAncestorAndObserverEnqueueRecord(target, function(options) {
|
||
|
// 2.1, 3.2
|
||
|
if (!options.childList)
|
||
|
return;
|
||
|
|
||
|
// 2.2, 3.3
|
||
|
return record;
|
||
|
});
|
||
|
|
||
|
}
|
||
|
|
||
|
clearRecords();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
if (!MutationObserver) {
|
||
|
MutationObserver = JsMutationObserver;
|
||
|
}
|
||
|
|
||
|
module.exports = MutationObserver;
|