OLD | NEW |
(Empty) | |
| 1 /* |
| 2 * Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 * Use of this source code is goverened by a BSD-style |
| 4 * license that can be found in the LICENSE file. |
| 5 */ |
| 6 |
| 7 // TODO(jmesserly): polyfill does not have feature testing or the definition of |
| 8 // SideTable. The extra code is from: |
| 9 // https://github.com/Polymer/CustomElements/blob/master/src/MutationObserver.js |
| 10 // https://github.com/Polymer/CustomElements/blob/master/src/sidetable.js |
| 11 // I also renamed JsMutationObserver -> MutationObserver to correctly interact |
| 12 // with dart2js interceptors. |
| 13 |
| 14 if (!window.MutationObserver && !window.WebKitMutationObserver) { |
| 15 |
| 16 (function(global) { |
| 17 // SideTable is a weak map where possible. If WeakMap is not available the |
| 18 // association is stored as an expando property. |
| 19 var SideTable; |
| 20 // TODO(arv): WeakMap does not allow for Node etc to be keys in Firefox |
| 21 if (typeof WeakMap !== 'undefined' && navigator.userAgent.indexOf('Firefox/')
< 0) { |
| 22 SideTable = WeakMap; |
| 23 } else { |
| 24 (function() { |
| 25 var defineProperty = Object.defineProperty; |
| 26 var hasOwnProperty = Object.hasOwnProperty; |
| 27 var counter = new Date().getTime() % 1e9; |
| 28 |
| 29 SideTable = function() { |
| 30 this.name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__'); |
| 31 }; |
| 32 |
| 33 SideTable.prototype = { |
| 34 set: function(key, value) { |
| 35 defineProperty(key, this.name, {value: value, writable: true}); |
| 36 }, |
| 37 get: function(key) { |
| 38 return hasOwnProperty.call(key, this.name) ? key[this.name] : undefine
d; |
| 39 }, |
| 40 delete: function(key) { |
| 41 this.set(key, undefined); |
| 42 } |
| 43 } |
| 44 })(); |
| 45 } |
| 46 |
| 47 var registrationsTable = new SideTable(); |
| 48 |
| 49 // We use setImmediate or postMessage for our future callback. |
| 50 var setImmediate = window.msSetImmediate; |
| 51 |
| 52 // Use post message to emulate setImmediate. |
| 53 if (!setImmediate) { |
| 54 var setImmediateQueue = []; |
| 55 var sentinel = String(Math.random()); |
| 56 window.addEventListener('message', function(e) { |
| 57 if (e.data === sentinel) { |
| 58 var queue = setImmediateQueue; |
| 59 setImmediateQueue = []; |
| 60 queue.forEach(function(func) { |
| 61 func(); |
| 62 }); |
| 63 } |
| 64 }); |
| 65 setImmediate = function(func) { |
| 66 setImmediateQueue.push(func); |
| 67 window.postMessage(sentinel, '*'); |
| 68 }; |
| 69 } |
| 70 |
| 71 // This is used to ensure that we never schedule 2 callas to setImmediate |
| 72 var isScheduled = false; |
| 73 |
| 74 // Keep track of observers that needs to be notified next time. |
| 75 var scheduledObservers = []; |
| 76 |
| 77 /** |
| 78 * Schedules |dispatchCallback| to be called in the future. |
| 79 * @param {MutationObserver} observer |
| 80 */ |
| 81 function scheduleCallback(observer) { |
| 82 scheduledObservers.push(observer); |
| 83 if (!isScheduled) { |
| 84 isScheduled = true; |
| 85 setImmediate(dispatchCallbacks); |
| 86 } |
| 87 } |
| 88 |
| 89 function wrapIfNeeded(node) { |
| 90 return window.ShadowDOMPolyfill && |
| 91 window.ShadowDOMPolyfill.wrapIfNeeded(node) || |
| 92 node; |
| 93 } |
| 94 |
| 95 function dispatchCallbacks() { |
| 96 // http://dom.spec.whatwg.org/#mutation-observers |
| 97 |
| 98 isScheduled = false; // Used to allow a new setImmediate call above. |
| 99 |
| 100 var observers = scheduledObservers; |
| 101 scheduledObservers = []; |
| 102 // Sort observers based on their creation UID (incremental). |
| 103 observers.sort(function(o1, o2) { |
| 104 return o1.uid_ - o2.uid_; |
| 105 }); |
| 106 |
| 107 var anyNonEmpty = false; |
| 108 observers.forEach(function(observer) { |
| 109 |
| 110 // 2.1, 2.2 |
| 111 var queue = observer.takeRecords(); |
| 112 // 2.3. Remove all transient registered observers whose observer is mo. |
| 113 removeTransientObserversFor(observer); |
| 114 |
| 115 // 2.4 |
| 116 if (queue.length) { |
| 117 observer.callback_(queue, observer); |
| 118 anyNonEmpty = true; |
| 119 } |
| 120 }); |
| 121 |
| 122 // 3. |
| 123 if (anyNonEmpty) |
| 124 dispatchCallbacks(); |
| 125 } |
| 126 |
| 127 function removeTransientObserversFor(observer) { |
| 128 observer.nodes_.forEach(function(node) { |
| 129 var registrations = registrationsTable.get(node); |
| 130 if (!registrations) |
| 131 return; |
| 132 registrations.forEach(function(registration) { |
| 133 if (registration.observer === observer) |
| 134 registration.removeTransientObservers(); |
| 135 }); |
| 136 }); |
| 137 } |
| 138 |
| 139 /** |
| 140 * This function is used for the "For each registered observer observer (with |
| 141 * observer's options as options) in target's list of registered observers, |
| 142 * run these substeps:" and the "For each ancestor ancestor of target, and for |
| 143 * each registered observer observer (with options options) in ancestor's list |
| 144 * of registered observers, run these substeps:" part of the algorithms. The |
| 145 * |options.subtree| is checked to ensure that the callback is called |
| 146 * correctly. |
| 147 * |
| 148 * @param {Node} target |
| 149 * @param {function(MutationObserverInit):MutationRecord} callback |
| 150 */ |
| 151 function forEachAncestorAndObserverEnqueueRecord(target, callback) { |
| 152 for (var node = target; node; node = node.parentNode) { |
| 153 var registrations = registrationsTable.get(node); |
| 154 |
| 155 if (registrations) { |
| 156 for (var j = 0; j < registrations.length; j++) { |
| 157 var registration = registrations[j]; |
| 158 var options = registration.options; |
| 159 |
| 160 // Only target ignores subtree. |
| 161 if (node !== target && !options.subtree) |
| 162 continue; |
| 163 |
| 164 var record = callback(options); |
| 165 if (record) |
| 166 registration.enqueue(record); |
| 167 } |
| 168 } |
| 169 } |
| 170 } |
| 171 |
| 172 var uidCounter = 0; |
| 173 |
| 174 /** |
| 175 * The class that maps to the DOM MutationObserver interface. |
| 176 * @param {Function} callback. |
| 177 * @constructor |
| 178 */ |
| 179 function MutationObserver(callback) { |
| 180 this.callback_ = callback; |
| 181 this.nodes_ = []; |
| 182 this.records_ = []; |
| 183 this.uid_ = ++uidCounter; |
| 184 } |
| 185 |
| 186 MutationObserver.prototype = { |
| 187 observe: function(target, options) { |
| 188 target = wrapIfNeeded(target); |
| 189 |
| 190 // 1.1 |
| 191 if (!options.childList && !options.attributes && !options.characterData || |
| 192 |
| 193 // 1.2 |
| 194 options.attributeOldValue && !options.attributes || |
| 195 |
| 196 // 1.3 |
| 197 options.attributeFilter && options.attributeFilter.length && |
| 198 !options.attributes || |
| 199 |
| 200 // 1.4 |
| 201 options.characterDataOldValue && !options.characterData) { |
| 202 |
| 203 throw new SyntaxError(); |
| 204 } |
| 205 |
| 206 var registrations = registrationsTable.get(target); |
| 207 if (!registrations) |
| 208 registrationsTable.set(target, registrations = []); |
| 209 |
| 210 // 2 |
| 211 // If target's list of registered observers already includes a registered |
| 212 // observer associated with the context object, replace that registered |
| 213 // observer's options with options. |
| 214 var registration; |
| 215 for (var i = 0; i < registrations.length; i++) { |
| 216 if (registrations[i].observer === this) { |
| 217 registration = registrations[i]; |
| 218 registration.removeListeners(); |
| 219 registration.options = options; |
| 220 break; |
| 221 } |
| 222 } |
| 223 |
| 224 // 3. |
| 225 // Otherwise, add a new registered observer to target's list of registered |
| 226 // observers with the context object as the observer and options as the |
| 227 // options, and add target to context object's list of nodes on which it |
| 228 // is registered. |
| 229 if (!registration) { |
| 230 registration = new Registration(this, target, options); |
| 231 registrations.push(registration); |
| 232 this.nodes_.push(target); |
| 233 } |
| 234 |
| 235 registration.addListeners(); |
| 236 }, |
| 237 |
| 238 disconnect: function() { |
| 239 this.nodes_.forEach(function(node) { |
| 240 var registrations = registrationsTable.get(node); |
| 241 for (var i = 0; i < registrations.length; i++) { |
| 242 var registration = registrations[i]; |
| 243 if (registration.observer === this) { |
| 244 registration.removeListeners(); |
| 245 registrations.splice(i, 1); |
| 246 // Each node can only have one registered observer associated with |
| 247 // this observer. |
| 248 break; |
| 249 } |
| 250 } |
| 251 }, this); |
| 252 this.records_ = []; |
| 253 }, |
| 254 |
| 255 takeRecords: function() { |
| 256 var copyOfRecords = this.records_; |
| 257 this.records_ = []; |
| 258 return copyOfRecords; |
| 259 } |
| 260 }; |
| 261 |
| 262 /** |
| 263 * @param {string} type |
| 264 * @param {Node} target |
| 265 * @constructor |
| 266 */ |
| 267 function MutationRecord(type, target) { |
| 268 this.type = type; |
| 269 this.target = target; |
| 270 this.addedNodes = []; |
| 271 this.removedNodes = []; |
| 272 this.previousSibling = null; |
| 273 this.nextSibling = null; |
| 274 this.attributeName = null; |
| 275 this.attributeNamespace = null; |
| 276 this.oldValue = null; |
| 277 } |
| 278 |
| 279 // TODO(jmesserly): this fixes the interceptor dispatch on IE. |
| 280 // Not sure why this is necessary. |
| 281 MutationObserver.prototype.constructor = MutationObserver; |
| 282 MutationObserver.name = 'MutationObserver'; |
| 283 MutationRecord.prototype.constructor = MutationRecord; |
| 284 MutationRecord.name = 'MutationRecord'; |
| 285 |
| 286 function copyMutationRecord(original) { |
| 287 var record = new MutationRecord(original.type, original.target); |
| 288 record.addedNodes = original.addedNodes.slice(); |
| 289 record.removedNodes = original.removedNodes.slice(); |
| 290 record.previousSibling = original.previousSibling; |
| 291 record.nextSibling = original.nextSibling; |
| 292 record.attributeName = original.attributeName; |
| 293 record.attributeNamespace = original.attributeNamespace; |
| 294 record.oldValue = original.oldValue; |
| 295 return record; |
| 296 }; |
| 297 |
| 298 // We keep track of the two (possibly one) records used in a single mutation. |
| 299 var currentRecord, recordWithOldValue; |
| 300 |
| 301 /** |
| 302 * Creates a record without |oldValue| and caches it as |currentRecord| for |
| 303 * later use. |
| 304 * @param {string} oldValue |
| 305 * @return {MutationRecord} |
| 306 */ |
| 307 function getRecord(type, target) { |
| 308 return currentRecord = new MutationRecord(type, target); |
| 309 } |
| 310 |
| 311 /** |
| 312 * Gets or creates a record with |oldValue| based in the |currentRecord| |
| 313 * @param {string} oldValue |
| 314 * @return {MutationRecord} |
| 315 */ |
| 316 function getRecordWithOldValue(oldValue) { |
| 317 if (recordWithOldValue) |
| 318 return recordWithOldValue; |
| 319 recordWithOldValue = copyMutationRecord(currentRecord); |
| 320 recordWithOldValue.oldValue = oldValue; |
| 321 return recordWithOldValue; |
| 322 } |
| 323 |
| 324 function clearRecords() { |
| 325 currentRecord = recordWithOldValue = undefined; |
| 326 } |
| 327 |
| 328 /** |
| 329 * @param {MutationRecord} record |
| 330 * @return {boolean} Whether the record represents a record from the current |
| 331 * mutation event. |
| 332 */ |
| 333 function recordRepresentsCurrentMutation(record) { |
| 334 return record === recordWithOldValue || record === currentRecord; |
| 335 } |
| 336 |
| 337 /** |
| 338 * Selects which record, if any, to replace the last record in the queue. |
| 339 * This returns |null| if no record should be replaced. |
| 340 * |
| 341 * @param {MutationRecord} lastRecord |
| 342 * @param {MutationRecord} newRecord |
| 343 * @param {MutationRecord} |
| 344 */ |
| 345 function selectRecord(lastRecord, newRecord) { |
| 346 if (lastRecord === newRecord) |
| 347 return lastRecord; |
| 348 |
| 349 // Check if the the record we are adding represents the same record. If |
| 350 // so, we keep the one with the oldValue in it. |
| 351 if (recordWithOldValue && recordRepresentsCurrentMutation(lastRecord)) |
| 352 return recordWithOldValue; |
| 353 |
| 354 return null; |
| 355 } |
| 356 |
| 357 /** |
| 358 * Class used to represent a registered observer. |
| 359 * @param {MutationObserver} observer |
| 360 * @param {Node} target |
| 361 * @param {MutationObserverInit} options |
| 362 * @constructor |
| 363 */ |
| 364 function Registration(observer, target, options) { |
| 365 this.observer = observer; |
| 366 this.target = target; |
| 367 this.options = options; |
| 368 this.transientObservedNodes = []; |
| 369 } |
| 370 |
| 371 Registration.prototype = { |
| 372 enqueue: function(record) { |
| 373 var records = this.observer.records_; |
| 374 var length = records.length; |
| 375 |
| 376 // There are cases where we replace the last record with the new record. |
| 377 // For example if the record represents the same mutation we need to use |
| 378 // the one with the oldValue. If we get same record (this can happen as we |
| 379 // walk up the tree) we ignore the new record. |
| 380 if (records.length > 0) { |
| 381 var lastRecord = records[length - 1]; |
| 382 var recordToReplaceLast = selectRecord(lastRecord, record); |
| 383 if (recordToReplaceLast) { |
| 384 records[length - 1] = recordToReplaceLast; |
| 385 return; |
| 386 } |
| 387 } else { |
| 388 scheduleCallback(this.observer); |
| 389 } |
| 390 |
| 391 records[length] = record; |
| 392 }, |
| 393 |
| 394 addListeners: function() { |
| 395 this.addListeners_(this.target); |
| 396 }, |
| 397 |
| 398 addListeners_: function(node) { |
| 399 var options = this.options; |
| 400 if (options.attributes) |
| 401 node.addEventListener('DOMAttrModified', this, true); |
| 402 |
| 403 if (options.characterData) |
| 404 node.addEventListener('DOMCharacterDataModified', this, true); |
| 405 |
| 406 if (options.childList) |
| 407 node.addEventListener('DOMNodeInserted', this, true); |
| 408 |
| 409 if (options.childList || options.subtree) |
| 410 node.addEventListener('DOMNodeRemoved', this, true); |
| 411 }, |
| 412 |
| 413 removeListeners: function() { |
| 414 this.removeListeners_(this.target); |
| 415 }, |
| 416 |
| 417 removeListeners_: function(node) { |
| 418 var options = this.options; |
| 419 if (options.attributes) |
| 420 node.removeEventListener('DOMAttrModified', this, true); |
| 421 |
| 422 if (options.characterData) |
| 423 node.removeEventListener('DOMCharacterDataModified', this, true); |
| 424 |
| 425 if (options.childList) |
| 426 node.removeEventListener('DOMNodeInserted', this, true); |
| 427 |
| 428 if (options.childList || options.subtree) |
| 429 node.removeEventListener('DOMNodeRemoved', this, true); |
| 430 }, |
| 431 |
| 432 /** |
| 433 * Adds a transient observer on node. The transient observer gets removed |
| 434 * next time we deliver the change records. |
| 435 * @param {Node} node |
| 436 */ |
| 437 addTransientObserver: function(node) { |
| 438 // Don't add transient observers on the target itself. We already have all |
| 439 // the required listeners set up on the target. |
| 440 if (node === this.target) |
| 441 return; |
| 442 |
| 443 this.addListeners_(node); |
| 444 this.transientObservedNodes.push(node); |
| 445 var registrations = registrationsTable.get(node); |
| 446 if (!registrations) |
| 447 registrationsTable.set(node, registrations = []); |
| 448 |
| 449 // We know that registrations does not contain this because we already |
| 450 // checked if node === this.target. |
| 451 registrations.push(this); |
| 452 }, |
| 453 |
| 454 removeTransientObservers: function() { |
| 455 var transientObservedNodes = this.transientObservedNodes; |
| 456 this.transientObservedNodes = []; |
| 457 |
| 458 transientObservedNodes.forEach(function(node) { |
| 459 // Transient observers are never added to the target. |
| 460 this.removeListeners_(node); |
| 461 |
| 462 var registrations = registrationsTable.get(node); |
| 463 for (var i = 0; i < registrations.length; i++) { |
| 464 if (registrations[i] === this) { |
| 465 registrations.splice(i, 1); |
| 466 // Each node can only have one registered observer associated with |
| 467 // this observer. |
| 468 break; |
| 469 } |
| 470 } |
| 471 }, this); |
| 472 }, |
| 473 |
| 474 handleEvent: function(e) { |
| 475 // Stop propagation since we are managing the propagation manually. |
| 476 // This means that other mutation events on the page will not work |
| 477 // correctly but that is by design. |
| 478 e.stopImmediatePropagation(); |
| 479 |
| 480 switch (e.type) { |
| 481 case 'DOMAttrModified': |
| 482 // http://dom.spec.whatwg.org/#concept-mo-queue-attributes |
| 483 |
| 484 var name = e.attrName; |
| 485 var namespace = e.relatedNode.namespaceURI; |
| 486 var target = e.target; |
| 487 |
| 488 // 1. |
| 489 var record = new getRecord('attributes', target); |
| 490 record.attributeName = name; |
| 491 record.attributeNamespace = namespace; |
| 492 |
| 493 // 2. |
| 494 var oldValue = |
| 495 e.attrChange === MutationEvent.ADDITION ? null : e.prevValue; |
| 496 |
| 497 forEachAncestorAndObserverEnqueueRecord(target, function(options) { |
| 498 // 3.1, 4.2 |
| 499 if (!options.attributes) |
| 500 return; |
| 501 |
| 502 // 3.2, 4.3 |
| 503 if (options.attributeFilter && options.attributeFilter.length && |
| 504 options.attributeFilter.indexOf(name) === -1 && |
| 505 options.attributeFilter.indexOf(namespace) === -1) { |
| 506 return; |
| 507 } |
| 508 // 3.3, 4.4 |
| 509 if (options.attributeOldValue) |
| 510 return getRecordWithOldValue(oldValue); |
| 511 |
| 512 // 3.4, 4.5 |
| 513 return record; |
| 514 }); |
| 515 |
| 516 break; |
| 517 |
| 518 case 'DOMCharacterDataModified': |
| 519 // http://dom.spec.whatwg.org/#concept-mo-queue-characterdata |
| 520 var target = e.target; |
| 521 |
| 522 // 1. |
| 523 var record = getRecord('characterData', target); |
| 524 |
| 525 // 2. |
| 526 var oldValue = e.prevValue; |
| 527 |
| 528 |
| 529 forEachAncestorAndObserverEnqueueRecord(target, function(options) { |
| 530 // 3.1, 4.2 |
| 531 if (!options.characterData) |
| 532 return; |
| 533 |
| 534 // 3.2, 4.3 |
| 535 if (options.characterDataOldValue) |
| 536 return getRecordWithOldValue(oldValue); |
| 537 |
| 538 // 3.3, 4.4 |
| 539 return record; |
| 540 }); |
| 541 |
| 542 break; |
| 543 |
| 544 case 'DOMNodeRemoved': |
| 545 this.addTransientObserver(e.target); |
| 546 // Fall through. |
| 547 case 'DOMNodeInserted': |
| 548 // http://dom.spec.whatwg.org/#concept-mo-queue-childlist |
| 549 var target = e.relatedNode; |
| 550 var changedNode = e.target; |
| 551 var addedNodes, removedNodes; |
| 552 if (e.type === 'DOMNodeInserted') { |
| 553 addedNodes = [changedNode]; |
| 554 removedNodes = []; |
| 555 } else { |
| 556 |
| 557 addedNodes = []; |
| 558 removedNodes = [changedNode]; |
| 559 } |
| 560 var previousSibling = changedNode.previousSibling; |
| 561 var nextSibling = changedNode.nextSibling; |
| 562 |
| 563 // 1. |
| 564 var record = getRecord('childList', target); |
| 565 record.addedNodes = addedNodes; |
| 566 record.removedNodes = removedNodes; |
| 567 record.previousSibling = previousSibling; |
| 568 record.nextSibling = nextSibling; |
| 569 |
| 570 forEachAncestorAndObserverEnqueueRecord(target, function(options) { |
| 571 // 2.1, 3.2 |
| 572 if (!options.childList) |
| 573 return; |
| 574 |
| 575 // 2.2, 3.3 |
| 576 return record; |
| 577 }); |
| 578 |
| 579 } |
| 580 |
| 581 clearRecords(); |
| 582 } |
| 583 }; |
| 584 |
| 585 global.MutationObserver = MutationObserver; |
| 586 })(window); |
| 587 |
| 588 } |
OLD | NEW |