| 1 | var DOCUMENT_FRAGMENT_NODE = 11; | | |
| 2 | | | |
| 3 | function morphAttrs(fromNode, toNode) { | | |
| 4 | var toNodeAttrs = toNode.attributes; | | |
| 5 | var attr; | | |
| 6 | var attrName; | | |
| 7 | var attrNamespaceURI; | | |
| 8 | var attrValue; | | |
| 9 | var fromValue; | | |
| 10 | | | |
| 11 | // document-fragments dont have attributes so lets not do anything | | |
| 12 | if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) { | | |
| 13 | return; | | |
| 14 | } | | |
| 15 | | | |
| 16 | // update attributes on original DOM element | | |
| 17 | for (var i = toNodeAttrs.length - 1; i >= 0; i--) { | | |
| 18 | attr = toNodeAttrs[i]; | | |
| 19 | attrName = attr.name; | | |
| 20 | attrNamespaceURI = attr.namespaceURI; | | |
| 21 | attrValue = attr.value; | | |
| 22 | | | |
| 23 | if (attrNamespaceURI) { | | |
| 24 | attrName = attr.localName || attrName; | | |
| 25 | fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName); | | |
| 26 | | | |
| 27 | if (fromValue !== attrValue) { | | |
| 28 | if (attr.prefix === 'xmlns'){ | | |
| 29 | attrName = attr.name; // It's not allowed to set an attribute with the XMLNS namespace without specifying the `xmlns` prefix | | |
| 30 | } | | |
| 31 | fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue); | | |
| 32 | } | | |
| 33 | } else { | | |
| 34 | fromValue = fromNode.getAttribute(attrName); | | |
| 35 | | | |
| 36 | if (fromValue !== attrValue) { | | |
| 37 | fromNode.setAttribute(attrName, attrValue); | | |
| 38 | } | | |
| 39 | } | | |
| 40 | } | | |
| 41 | | | |
| 42 | // Remove any extra attributes found on the original DOM element that | | |
| 43 | // weren't found on the target element. | | |
| 44 | var fromNodeAttrs = fromNode.attributes; | | |
| 45 | | | |
| 46 | for (var d = fromNodeAttrs.length - 1; d >= 0; d--) { | | |
| 47 | attr = fromNodeAttrs[d]; | | |
| 48 | attrName = attr.name; | | |
| 49 | attrNamespaceURI = attr.namespaceURI; | | |
| 50 | | | |
| 51 | if (attrNamespaceURI) { | | |
| 52 | attrName = attr.localName || attrName; | | |
| 53 | | | |
| 54 | if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) { | | |
| 55 | fromNode.removeAttributeNS(attrNamespaceURI, attrName); | | |
| 56 | } | | |
| 57 | } else { | | |
| 58 | if (!toNode.hasAttribute(attrName)) { | | |
| 59 | fromNode.removeAttribute(attrName); | | |
| 60 | } | | |
| 61 | } | | |
| 62 | } | | |
| 63 | } | | |
| 64 | | | |
| 65 | var range; // Create a range object for efficently rendering strings to elements. | | |
| 66 | var NS_XHTML = 'http://www.w3.org/1999/xhtml'; | | |
| 67 | | | |
| 68 | var doc = typeof document === 'undefined' ? undefined : document; | | |
| 69 | var HAS_TEMPLATE_SUPPORT = !!doc && 'content' in doc.createElement('template'); | | |
| 70 | var HAS_RANGE_SUPPORT = !!doc && doc.createRange && 'createContextualFragment' in doc.createRange(); | | |
| 71 | | | |
| 72 | function createFragmentFromTemplate(str) { | | |
| 73 | var template = doc.createElement('template'); | | |
| 74 | template.innerHTML = str; | | |
| 75 | return template.content.childNodes[0]; | | |
| 76 | } | | |
| 77 | | | |
| 78 | function createFragmentFromRange(str) { | | |
| 79 | if (!range) { | | |
| 80 | range = doc.createRange(); | | |
| 81 | range.selectNode(doc.body); | | |
| 82 | } | | |
| 83 | | | |
| 84 | var fragment = range.createContextualFragment(str); | | |
| 85 | return fragment.childNodes[0]; | | |
| 86 | } | | |
| 87 | | | |
| 88 | function createFragmentFromWrap(str) { | | |
| 89 | var fragment = doc.createElement('body'); | | |
| 90 | fragment.innerHTML = str; | | |
| 91 | return fragment.childNodes[0]; | | |
| 92 | } | | |
| 93 | | | |
| 94 | /** | | |
| 95 | * This is about the same | | |
| 96 | * var html = new DOMParser().parseFromString(str, 'text/html'); | | |
| 97 | * return html.body.firstChild; | | |
| 98 | * | | |
| 99 | * @method toElement | | |
| 100 | * @param {String} str | | |
| 101 | */ | | |
| 102 | function toElement(str) { | | |
| 103 | str = str.trim(); | | |
| 104 | if (HAS_TEMPLATE_SUPPORT) { | | |
| 105 | // avoid restrictions on content for things like `<tr><th>Hi</th></tr>` which | | |
| 106 | // createContextualFragment doesn't support | | |
| 107 | // <template> support not available in IE | | |
| 108 | return createFragmentFromTemplate(str); | | |
| 109 | } else if (HAS_RANGE_SUPPORT) { | | |
| 110 | return createFragmentFromRange(str); | | |
| 111 | } | | |
| 112 | | | |
| 113 | return createFragmentFromWrap(str); | | |
| 114 | } | | |
| 115 | | | |
| 116 | /** | | |
| 117 | * Returns true if two node's names are the same. | | |
| 118 | * | | |
| 119 | * NOTE: We don't bother checking `namespaceURI` because you will never find two HTML elements with the same | | |
| 120 | * nodeName and different namespace URIs. | | |
| 121 | * | | |
| 122 | * @param {Element} a | | |
| 123 | * @param {Element} b The target element | | |
| 124 | * @return {boolean} | | |
| 125 | */ | | |
| 126 | function compareNodeNames(fromEl, toEl) { | | |
| 127 | var fromNodeName = fromEl.nodeName; | | |
| 128 | var toNodeName = toEl.nodeName; | | |
| 129 | var fromCodeStart, toCodeStart; | | |
| 130 | | | |
| 131 | if (fromNodeName === toNodeName) { | | |
| 132 | return true; | | |
| 133 | } | | |
| 134 | | | |
| 135 | fromCodeStart = fromNodeName.charCodeAt(0); | | |
| 136 | toCodeStart = toNodeName.charCodeAt(0); | | |
| 137 | | | |
| 138 | // If the target element is a virtual DOM node or SVG node then we may | | |
| 139 | // need to normalize the tag name before comparing. Normal HTML elements that are | | |
| 140 | // in the "http://www.w3.org/1999/xhtml" | | |
| 141 | // are converted to upper case | | |
| 142 | if (fromCodeStart <= 90 && toCodeStart >= 97) { // from is upper and to is lower | | |
| 143 | return fromNodeName === toNodeName.toUpperCase(); | | |
| 144 | } else if (toCodeStart <= 90 && fromCodeStart >= 97) { // to is upper and from is lower | | |
| 145 | return toNodeName === fromNodeName.toUpperCase(); | | |
| 146 | } else { | | |
| 147 | return false; | | |
| 148 | } | | |
| 149 | } | | |
| 150 | | | |
| 151 | /** | | |
| 152 | * Create an element, optionally with a known namespace URI. | | |
| 153 | * | | |
| 154 | * @param {string} name the element name, e.g. 'div' or 'svg' | | |
| 155 | * @param {string} [namespaceURI] the element's namespace URI, i.e. the value of | | |
| 156 | * its `xmlns` attribute or its inferred namespace. | | |
| 157 | * | | |
| 158 | * @return {Element} | | |
| 159 | */ | | |
| 160 | function createElementNS(name, namespaceURI) { | | |
| 161 | return !namespaceURI || namespaceURI === NS_XHTML ? | | |
| 162 | doc.createElement(name) : | | |
| 163 | doc.createElementNS(namespaceURI, name); | | |
| 164 | } | | |
| 165 | | | |
| 166 | /** | | |
| 167 | * Copies the children of one DOM element to another DOM element | | |
| 168 | */ | | |
| 169 | function moveChildren(fromEl, toEl) { | | |
| 170 | var curChild = fromEl.firstChild; | | |
| 171 | while (curChild) { | | |
| 172 | var nextChild = curChild.nextSibling; | | |
| 173 | toEl.appendChild(curChild); | | |
| 174 | curChild = nextChild; | | |
| 175 | } | | |
| 176 | return toEl; | | |
| 177 | } | | |
| 178 | | | |
| 179 | function syncBooleanAttrProp(fromEl, toEl, name) { | | |
| 180 | if (fromEl[name] !== toEl[name]) { | | |
| 181 | fromEl[name] = toEl[name]; | | |
| 182 | if (fromEl[name]) { | | |
| 183 | fromEl.setAttribute(name, ''); | | |
| 184 | } else { | | |
| 185 | fromEl.removeAttribute(name); | | |
| 186 | } | | |
| 187 | } | | |
| 188 | } | | |
| 189 | | | |
| 190 | var specialElHandlers = { | | |
| 191 | OPTION: function(fromEl, toEl) { | | |
| 192 | var parentNode = fromEl.parentNode; | | |
| 193 | if (parentNode) { | | |
| 194 | var parentName = parentNode.nodeName.toUpperCase(); | | |
| 195 | if (parentName === 'OPTGROUP') { | | |
| 196 | parentNode = parentNode.parentNode; | | |
| 197 | parentName = parentNode && parentNode.nodeName.toUpperCase(); | | |
| 198 | } | | |
| 199 | if (parentName === 'SELECT' && !parentNode.hasAttribute('multiple')) { | | |
| 200 | if (fromEl.hasAttribute('selected') && !toEl.selected) { | | |
| 201 | // Workaround for MS Edge bug where the 'selected' attribute can only be | | |
| 202 | // removed if set to a non-empty value: | | |
| 203 | // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12087679/ | | |
| 204 | fromEl.setAttribute('selected', 'selected'); | | |
| 205 | fromEl.removeAttribute('selected'); | | |
| 206 | } | | |
| 207 | // We have to reset select element's selectedIndex to -1, otherwise setting | | |
| 208 | // fromEl.selected using the syncBooleanAttrProp below has no effect. | | |
| 209 | // The correct selectedIndex will be set in the SELECT special handler below. | | |
| 210 | parentNode.selectedIndex = -1; | | |
| 211 | } | | |
| 212 | } | | |
| 213 | syncBooleanAttrProp(fromEl, toEl, 'selected'); | | |
| 214 | }, | | |
| 215 | /** | | |
| 216 | * The "value" attribute is special for the <input> element since it sets | | |
| 217 | * the initial value. Changing the "value" attribute without changing the | | |
| 218 | * "value" property will have no effect since it is only used to the set the | | |
| 219 | * initial value. Similar for the "checked" attribute, and "disabled". | | |
| 220 | */ | | |
| 221 | INPUT: function(fromEl, toEl) { | | |
| 222 | syncBooleanAttrProp(fromEl, toEl, 'checked'); | | |
| 223 | syncBooleanAttrProp(fromEl, toEl, 'disabled'); | | |
| 224 | | | |
| 225 | if (fromEl.value !== toEl.value) { | | |
| 226 | fromEl.value = toEl.value; | | |
| 227 | } | | |
| 228 | | | |
| 229 | if (!toEl.hasAttribute('value')) { | | |
| 230 | fromEl.removeAttribute('value'); | | |
| 231 | } | | |
| 232 | }, | | |
| 233 | | | |
| 234 | TEXTAREA: function(fromEl, toEl) { | | |
| 235 | var newValue = toEl.value; | | |
| 236 | if (fromEl.value !== newValue) { | | |
| 237 | fromEl.value = newValue; | | |
| 238 | } | | |
| 239 | | | |
| 240 | var firstChild = fromEl.firstChild; | | |
| 241 | if (firstChild) { | | |
| 242 | // Needed for IE. Apparently IE sets the placeholder as the | | |
| 243 | // node value and vise versa. This ignores an empty update. | | |
| 244 | var oldValue = firstChild.nodeValue; | | |
| 245 | | | |
| 246 | if (oldValue == newValue || (!newValue && oldValue == fromEl.placeholder)) { | | |
| 247 | return; | | |
| 248 | } | | |
| 249 | | | |
| 250 | firstChild.nodeValue = newValue; | | |
| 251 | } | | |
| 252 | }, | | |
| 253 | SELECT: function(fromEl, toEl) { | | |
| 254 | if (!toEl.hasAttribute('multiple')) { | | |
| 255 | var selectedIndex = -1; | | |
| 256 | var i = 0; | | |
| 257 | // We have to loop through children of fromEl, not toEl since nodes can be moved | | |
| 258 | // from toEl to fromEl directly when morphing. | | |
| 259 | // At the time this special handler is invoked, all children have already been morphed | | |
| 260 | // and appended to / removed from fromEl, so using fromEl here is safe and correct. | | |
| 261 | var curChild = fromEl.firstChild; | | |
| 262 | var optgroup; | | |
| 263 | var nodeName; | | |
| 264 | while(curChild) { | | |
| 265 | nodeName = curChild.nodeName && curChild.nodeName.toUpperCase(); | | |
| 266 | if (nodeName === 'OPTGROUP') { | | |
| 267 | optgroup = curChild; | | |
| 268 | curChild = optgroup.firstChild; | | |
| 269 | } else { | | |
| 270 | if (nodeName === 'OPTION') { | | |
| 271 | if (curChild.hasAttribute('selected')) { | | |
| 272 | selectedIndex = i; | | |
| 273 | break; | | |
| 274 | } | | |
| 275 | i++; | | |
| 276 | } | | |
| 277 | curChild = curChild.nextSibling; | | |
| 278 | if (!curChild && optgroup) { | | |
| 279 | curChild = optgroup.nextSibling; | | |
| 280 | optgroup = null; | | |
| 281 | } | | |
| 282 | } | | |
| 283 | } | | |
| 284 | | | |
| 285 | fromEl.selectedIndex = selectedIndex; | | |
| 286 | } | | |
| 287 | } | | |
| 288 | }; | | |
| 289 | | | |
| 290 | var ELEMENT_NODE = 1; | | |
| 291 | var DOCUMENT_FRAGMENT_NODE$1 = 11; | | |
| 292 | var TEXT_NODE = 3; | | |
| 293 | var COMMENT_NODE = 8; | | |
| 294 | | | |
| 295 | function noop() {} | | |
| 296 | | | |
| 297 | function defaultGetNodeKey(node) { | | |
| 298 | if (node) { | | |
| 299 | return (node.getAttribute && node.getAttribute('id')) || node.id; | | |
| 300 | } | | |
| 301 | } | | |
| 302 | | | |
| 303 | function morphdomFactory(morphAttrs) { | | |
| 304 | | | |
| 305 | return function morphdom(fromNode, toNode, options) { | | |
| 306 | if (!options) { | | |
| 307 | options = {}; | | |
| 308 | } | | |
| 309 | | | |
| 310 | if (typeof toNode === 'string') { | | |
| 311 | if (fromNode.nodeName === '#document' || fromNode.nodeName === 'HTML' || fromNode.nodeName === 'BODY') { | | |
| 312 | var toNodeHtml = toNode; | | |
| 313 | toNode = doc.createElement('html'); | | |
| 314 | toNode.innerHTML = toNodeHtml; | | |
| 315 | } else { | | |
| 316 | toNode = toElement(toNode); | | |
| 317 | } | | |
| 318 | } else if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE$1) { | | |
| 319 | toNode = toNode.firstElementChild; | | |
| 320 | } | | |
| 321 | | | |
| 322 | var getNodeKey = options.getNodeKey || defaultGetNodeKey; | | |
| 323 | var onBeforeNodeAdded = options.onBeforeNodeAdded || noop; | | |
| 324 | var onNodeAdded = options.onNodeAdded || noop; | | |
| 325 | var onBeforeElUpdated = options.onBeforeElUpdated || noop; | | |
| 326 | var onElUpdated = options.onElUpdated || noop; | | |
| 327 | var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop; | | |
| 328 | var onNodeDiscarded = options.onNodeDiscarded || noop; | | |
| 329 | var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop; | | |
| 330 | var skipFromChildren = options.skipFromChildren || noop; | | |
| 331 | var addChild = options.addChild || function(parent, child){ return parent.appendChild(child); }; | | |
| 332 | var childrenOnly = options.childrenOnly === true; | | |
| 333 | | | |
| 334 | // This object is used as a lookup to quickly find all keyed elements in the original DOM tree. | | |
| 335 | var fromNodesLookup = Object.create(null); | | |
| 336 | var keyedRemovalList = []; | | |
| 337 | | | |
| 338 | function addKeyedRemoval(key) { | | |
| 339 | keyedRemovalList.push(key); | | |
| 340 | } | | |
| 341 | | | |
| 342 | function walkDiscardedChildNodes(node, skipKeyedNodes) { | | |
| 343 | if (node.nodeType === ELEMENT_NODE) { | | |
| 344 | var curChild = node.firstChild; | | |
| 345 | while (curChild) { | | |
| 346 | | | |
| 347 | var key = undefined; | | |
| 348 | | | |
| 349 | if (skipKeyedNodes && (key = getNodeKey(curChild))) { | | |
| 350 | // If we are skipping keyed nodes then we add the key | | |
| 351 | // to a list so that it can be handled at the very end. | | |
| 352 | addKeyedRemoval(key); | | |
| 353 | } else { | | |
| 354 | // Only report the node as discarded if it is not keyed. We do this because | | |
| 355 | // at the end we loop through all keyed elements that were unmatched | | |
| 356 | // and then discard them in one final pass. | | |
| 357 | onNodeDiscarded(curChild); | | |
| 358 | if (curChild.firstChild) { | | |
| 359 | walkDiscardedChildNodes(curChild, skipKeyedNodes); | | |
| 360 | } | | |
| 361 | } | | |
| 362 | | | |
| 363 | curChild = curChild.nextSibling; | | |
| 364 | } | | |
| 365 | } | | |
| 366 | } | | |
| 367 | | | |
| 368 | /** | | |
| 369 | * Removes a DOM node out of the original DOM | | |
| 370 | * | | |
| 371 | * @param {Node} node The node to remove | | |
| 372 | * @param {Node} parentNode The nodes parent | | |
| 373 | * @param {Boolean} skipKeyedNodes If true then elements with keys will be skipped and not discarded. | | |
| 374 | * @return {undefined} | | |
| 375 | */ | | |
| 376 | function removeNode(node, parentNode, skipKeyedNodes) { | | |
| 377 | if (onBeforeNodeDiscarded(node) === false) { | | |
| 378 | return; | | |
| 379 | } | | |
| 380 | | | |
| 381 | if (parentNode) { | | |
| 382 | parentNode.removeChild(node); | | |
| 383 | } | | |
| 384 | | | |
| 385 | onNodeDiscarded(node); | | |
| 386 | walkDiscardedChildNodes(node, skipKeyedNodes); | | |
| 387 | } | | |
| 388 | | | |
| 389 | // // TreeWalker implementation is no faster, but keeping this around in case this changes in the future | | |
| 390 | // function indexTree(root) { | | |
| 391 | // var treeWalker = document.createTreeWalker( | | |
| 392 | // root, | | |
| 393 | // NodeFilter.SHOW_ELEMENT); | | |
| 394 | // | | |
| 395 | // var el; | | |
| 396 | // while((el = treeWalker.nextNode())) { | | |
| 397 | // var key = getNodeKey(el); | | |
| 398 | // if (key) { | | |
| 399 | // fromNodesLookup[key] = el; | | |
| 400 | // } | | |
| 401 | // } | | |
| 402 | // } | | |
| 403 | | | |
| 404 | // // NodeIterator implementation is no faster, but keeping this around in case this changes in the future | | |
| 405 | // | | |
| 406 | // function indexTree(node) { | | |
| 407 | // var nodeIterator = document.createNodeIterator(node, NodeFilter.SHOW_ELEMENT); | | |
| 408 | // var el; | | |
| 409 | // while((el = nodeIterator.nextNode())) { | | |
| 410 | // var key = getNodeKey(el); | | |
| 411 | // if (key) { | | |
| 412 | // fromNodesLookup[key] = el; | | |
| 413 | // } | | |
| 414 | // } | | |
| 415 | // } | | |
| 416 | | | |
| 417 | function indexTree(node) { | | |
| 418 | if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) { | | |
| 419 | var curChild = node.firstChild; | | |
| 420 | while (curChild) { | | |
| 421 | var key = getNodeKey(curChild); | | |
| 422 | if (key) { | | |
| 423 | fromNodesLookup[key] = curChild; | | |
| 424 | } | | |
| 425 | | | |
| 426 | // Walk recursively | | |
| 427 | indexTree(curChild); | | |
| 428 | | | |
| 429 | curChild = curChild.nextSibling; | | |
| 430 | } | | |
| 431 | } | | |
| 432 | } | | |
| 433 | | | |
| 434 | indexTree(fromNode); | | |
| 435 | | | |
| 436 | function handleNodeAdded(el) { | | |
| 437 | onNodeAdded(el); | | |
| 438 | | | |
| 439 | var curChild = el.firstChild; | | |
| 440 | while (curChild) { | | |
| 441 | var nextSibling = curChild.nextSibling; | | |
| 442 | | | |
| 443 | var key = getNodeKey(curChild); | | |
| 444 | if (key) { | | |
| 445 | var unmatchedFromEl = fromNodesLookup[key]; | | |
| 446 | // if we find a duplicate #id node in cache, replace `el` with cache value | | |
| 447 | // and morph it to the child node. | | |
| 448 | if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) { | | |
| 449 | curChild.parentNode.replaceChild(unmatchedFromEl, curChild); | | |
| 450 | morphEl(unmatchedFromEl, curChild); | | |
| 451 | } else { | | |
| 452 | handleNodeAdded(curChild); | | |
| 453 | } | | |
| 454 | } else { | | |
| 455 | // recursively call for curChild and it's children to see if we find something in | | |
| 456 | // fromNodesLookup | | |
| 457 | handleNodeAdded(curChild); | | |
| 458 | } | | |
| 459 | | | |
| 460 | curChild = nextSibling; | | |
| 461 | } | | |
| 462 | } | | |
| 463 | | | |
| 464 | function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) { | | |
| 465 | // We have processed all of the "to nodes". If curFromNodeChild is | | |
| 466 | // non-null then we still have some from nodes left over that need | | |
| 467 | // to be removed | | |
| 468 | while (curFromNodeChild) { | | |
| 469 | var fromNextSibling = curFromNodeChild.nextSibling; | | |
| 470 | if ((curFromNodeKey = getNodeKey(curFromNodeChild))) { | | |
| 471 | // Since the node is keyed it might be matched up later so we defer | | |
| 472 | // the actual removal to later | | |
| 473 | addKeyedRemoval(curFromNodeKey); | | |
| 474 | } else { | | |
| 475 | // NOTE: we skip nested keyed nodes from being removed since there is | | |
| 476 | // still a chance they will be matched up later | | |
| 477 | removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */); | | |
| 478 | } | | |
| 479 | curFromNodeChild = fromNextSibling; | | |
| 480 | } | | |
| 481 | } | | |
| 482 | | | |
| 483 | function morphEl(fromEl, toEl, childrenOnly) { | | |
| 484 | var toElKey = getNodeKey(toEl); | | |
| 485 | | | |
| 486 | if (toElKey) { | | |
| 487 | // If an element with an ID is being morphed then it will be in the final | | |
| 488 | // DOM so clear it out of the saved elements collection | | |
| 489 | delete fromNodesLookup[toElKey]; | | |
| 490 | } | | |
| 491 | | | |
| 492 | if (!childrenOnly) { | | |
| 493 | // optional | | |
| 494 | var beforeUpdateResult = onBeforeElUpdated(fromEl, toEl); | | |
| 495 | if (beforeUpdateResult === false) { | | |
| 496 | return; | | |
| 497 | } else if (beforeUpdateResult instanceof HTMLElement) { | | |
| 498 | fromEl = beforeUpdateResult; | | |
| 499 | // reindex the new fromEl in case it's not in the same | | |
| 500 | // tree as the original fromEl | | |
| 501 | // (Phoenix LiveView sometimes returns a cloned tree, | | |
| 502 | // but keyed lookups would still point to the original tree) | | |
| 503 | indexTree(fromEl); | | |
| 504 | } | | |
| 505 | | | |
| 506 | // update attributes on original DOM element first | | |
| 507 | morphAttrs(fromEl, toEl); | | |
| 508 | // optional | | |
| 509 | onElUpdated(fromEl); | | |
| 510 | | | |
| 511 | if (onBeforeElChildrenUpdated(fromEl, toEl) === false) { | | |
| 512 | return; | | |
| 513 | } | | |
| 514 | } | | |
| 515 | | | |
| 516 | if (fromEl.nodeName !== 'TEXTAREA') { | | |
| 517 | morphChildren(fromEl, toEl); | | |
| 518 | } else { | | |
| 519 | specialElHandlers.TEXTAREA(fromEl, toEl); | | |
| 520 | } | | |
| 521 | } | | |
| 522 | | | |
| 523 | function morphChildren(fromEl, toEl) { | | |
| 524 | var skipFrom = skipFromChildren(fromEl, toEl); | | |
| 525 | var curToNodeChild = toEl.firstChild; | | |
| 526 | var curFromNodeChild = fromEl.firstChild; | | |
| 527 | var curToNodeKey; | | |
| 528 | var curFromNodeKey; | | |
| 529 | | | |
| 530 | var fromNextSibling; | | |
| 531 | var toNextSibling; | | |
| 532 | var matchingFromEl; | | |
| 533 | | | |
| 534 | // walk the children | | |
| 535 | outer: while (curToNodeChild) { | | |
| 536 | toNextSibling = curToNodeChild.nextSibling; | | |
| 537 | curToNodeKey = getNodeKey(curToNodeChild); | | |
| 538 | | | |
| 539 | // walk the fromNode children all the way through | | |
| 540 | while (!skipFrom && curFromNodeChild) { | | |
| 541 | fromNextSibling = curFromNodeChild.nextSibling; | | |
| 542 | | | |
| 543 | if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) { | | |
| 544 | curToNodeChild = toNextSibling; | | |
| 545 | curFromNodeChild = fromNextSibling; | | |
| 546 | continue outer; | | |
| 547 | } | | |
| 548 | | | |
| 549 | curFromNodeKey = getNodeKey(curFromNodeChild); | | |
| 550 | | | |
| 551 | var curFromNodeType = curFromNodeChild.nodeType; | | |
| 552 | | | |
| 553 | // this means if the curFromNodeChild doesnt have a match with the curToNodeChild | | |
| 554 | var isCompatible = undefined; | | |
| 555 | | | |
| 556 | if (curFromNodeType === curToNodeChild.nodeType) { | | |
| 557 | if (curFromNodeType === ELEMENT_NODE) { | | |
| 558 | // Both nodes being compared are Element nodes | | |
| 559 | | | |
| 560 | if (curToNodeKey) { | | |
| 561 | // The target node has a key so we want to match it up with the correct element | | |
| 562 | // in the original DOM tree | | |
| 563 | if (curToNodeKey !== curFromNodeKey) { | | |
| 564 | // The current element in the original DOM tree does not have a matching key so | | |
| 565 | // let's check our lookup to see if there is a matching element in the original | | |
| 566 | // DOM tree | | |
| 567 | if ((matchingFromEl = fromNodesLookup[curToNodeKey])) { | | |
| 568 | if (fromNextSibling === matchingFromEl) { | | |
| 569 | // Special case for single element removals. To avoid removing the original | | |
| 570 | // DOM node out of the tree (since that can break CSS transitions, etc.), | | |
| 571 | // we will instead discard the current node and wait until the next | | |
| 572 | // iteration to properly match up the keyed target element with its matching | | |
| 573 | // element in the original tree | | |
| 574 | isCompatible = false; | | |
| 575 | } else { | | |
| 576 | // We found a matching keyed element somewhere in the original DOM tree. | | |
| 577 | // Let's move the original DOM node into the current position and morph | | |
| 578 | // it. | | |
| 579 | | | |
| 580 | // NOTE: We use insertBefore instead of replaceChild because we want to go through | | |
| 581 | // the `removeNode()` function for the node that is being discarded so that | | |
| 582 | // all lifecycle hooks are correctly invoked | | |
| 583 | fromEl.insertBefore(matchingFromEl, curFromNodeChild); | | |
| 584 | | | |
| 585 | // fromNextSibling = curFromNodeChild.nextSibling; | | |
| 586 | | | |
| 587 | if (curFromNodeKey) { | | |
| 588 | // Since the node is keyed it might be matched up later so we defer | | |
| 589 | // the actual removal to later | | |
| 590 | addKeyedRemoval(curFromNodeKey); | | |
| 591 | } else { | | |
| 592 | // NOTE: we skip nested keyed nodes from being removed since there is | | |
| 593 | // still a chance they will be matched up later | | |
| 594 | removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */); | | |
| 595 | } | | |
| 596 | | | |
| 597 | curFromNodeChild = matchingFromEl; | | |
| 598 | curFromNodeKey = getNodeKey(curFromNodeChild); | | |
| 599 | } | | |
| 600 | } else { | | |
| 601 | // The nodes are not compatible since the "to" node has a key and there | | |
| 602 | // is no matching keyed node in the source tree | | |
| 603 | isCompatible = false; | | |
| 604 | } | | |
| 605 | } | | |
| 606 | } else if (curFromNodeKey) { | | |
| 607 | // The original has a key | | |
| 608 | isCompatible = false; | | |
| 609 | } | | |
| 610 | | | |
| 611 | isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild); | | |
| 612 | if (isCompatible) { | | |
| 613 | // We found compatible DOM elements so transform | | |
| 614 | // the current "from" node to match the current | | |
| 615 | // target DOM node. | | |
| 616 | // MORPH | | |
| 617 | morphEl(curFromNodeChild, curToNodeChild); | | |
| 618 | } | | |
| 619 | | | |
| 620 | } else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) { | | |
| 621 | // Both nodes being compared are Text or Comment nodes | | |
| 622 | isCompatible = true; | | |
| 623 | // Simply update nodeValue on the original node to | | |
| 624 | // change the text value | | |
| 625 | if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) { | | |
| 626 | curFromNodeChild.nodeValue = curToNodeChild.nodeValue; | | |
| 627 | } | | |
| 628 | | | |
| 629 | } | | |
| 630 | } | | |
| 631 | | | |
| 632 | if (isCompatible) { | | |
| 633 | // Advance both the "to" child and the "from" child since we found a match | | |
| 634 | // Nothing else to do as we already recursively called morphChildren above | | |
| 635 | curToNodeChild = toNextSibling; | | |
| 636 | curFromNodeChild = fromNextSibling; | | |
| 637 | continue outer; | | |
| 638 | } | | |
| 639 | | | |
| 640 | // No compatible match so remove the old node from the DOM and continue trying to find a | | |
| 641 | // match in the original DOM. However, we only do this if the from node is not keyed | | |
| 642 | // since it is possible that a keyed node might match up with a node somewhere else in the | | |
| 643 | // target tree and we don't want to discard it just yet since it still might find a | | |
| 644 | // home in the final DOM tree. After everything is done we will remove any keyed nodes | | |
| 645 | // that didn't find a home | | |
| 646 | if (curFromNodeKey) { | | |
| 647 | // Since the node is keyed it might be matched up later so we defer | | |
| 648 | // the actual removal to later | | |
| 649 | addKeyedRemoval(curFromNodeKey); | | |
| 650 | } else { | | |
| 651 | // NOTE: we skip nested keyed nodes from being removed since there is | | |
| 652 | // still a chance they will be matched up later | | |
| 653 | removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */); | | |
| 654 | } | | |
| 655 | | | |
| 656 | curFromNodeChild = fromNextSibling; | | |
| 657 | } // END: while(curFromNodeChild) {} | | |
| 658 | | | |
| 659 | // If we got this far then we did not find a candidate match for | | |
| 660 | // our "to node" and we exhausted all of the children "from" | | |
| 661 | // nodes. Therefore, we will just append the current "to" node | | |
| 662 | // to the end | | |
| 663 | if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) { | | |
| 664 | // MORPH | | |
| 665 | if(!skipFrom){ addChild(fromEl, matchingFromEl); } | | |
| 666 | morphEl(matchingFromEl, curToNodeChild); | | |
| 667 | } else { | | |
| 668 | var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild); | | |
| 669 | if (onBeforeNodeAddedResult !== false) { | | |
| 670 | if (onBeforeNodeAddedResult) { | | |
| 671 | curToNodeChild = onBeforeNodeAddedResult; | | |
| 672 | } | | |
| 673 | | | |
| 674 | if (curToNodeChild.actualize) { | | |
| 675 | curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc); | | |
| 676 | } | | |
| 677 | addChild(fromEl, curToNodeChild); | | |
| 678 | handleNodeAdded(curToNodeChild); | | |
| 679 | } | | |
| 680 | } | | |
| 681 | | | |
| 682 | curToNodeChild = toNextSibling; | | |
| 683 | curFromNodeChild = fromNextSibling; | | |
| 684 | } | | |
| 685 | | | |
| 686 | cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey); | | |
| 687 | | | |
| 688 | var specialElHandler = specialElHandlers[fromEl.nodeName]; | | |
| 689 | if (specialElHandler) { | | |
| 690 | specialElHandler(fromEl, toEl); | | |
| 691 | } | | |
| 692 | } // END: morphChildren(...) | | |
| 693 | | | |
| 694 | var morphedNode = fromNode; | | |
| 695 | var morphedNodeType = morphedNode.nodeType; | | |
| 696 | var toNodeType = toNode.nodeType; | | |
| 697 | | | |
| 698 | if (!childrenOnly) { | | |
| 699 | // Handle the case where we are given two DOM nodes that are not | | |
| 700 | // compatible (e.g. <div> --> <span> or <div> --> TEXT) | | |
| 701 | if (morphedNodeType === ELEMENT_NODE) { | | |
| 702 | if (toNodeType === ELEMENT_NODE) { | | |
| 703 | if (!compareNodeNames(fromNode, toNode)) { | | |
| 704 | onNodeDiscarded(fromNode); | | |
| 705 | morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI)); | | |
| 706 | } | | |
| 707 | } else { | | |
| 708 | // Going from an element node to a text node | | |
| 709 | morphedNode = toNode; | | |
| 710 | } | | |
| 711 | } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) { // Text or comment node | | |
| 712 | if (toNodeType === morphedNodeType) { | | |
| 713 | if (morphedNode.nodeValue !== toNode.nodeValue) { | | |
| 714 | morphedNode.nodeValue = toNode.nodeValue; | | |
| 715 | } | | |
| 716 | | | |
| 717 | return morphedNode; | | |
| 718 | } else { | | |
| 719 | // Text node to something else | | |
| 720 | morphedNode = toNode; | | |
| 721 | } | | |
| 722 | } | | |
| 723 | } | | |
| 724 | | | |
| 725 | if (morphedNode === toNode) { | | |
| 726 | // The "to node" was not compatible with the "from node" so we had to | | |
| 727 | // toss out the "from node" and use the "to node" | | |
| 728 | onNodeDiscarded(fromNode); | | |
| 729 | } else { | | |
| 730 | if (toNode.isSameNode && toNode.isSameNode(morphedNode)) { | | |
| 731 | return; | | |
| 732 | } | | |
| 733 | | | |
| 734 | morphEl(morphedNode, toNode, childrenOnly); | | |
| 735 | | | |
| 736 | // We now need to loop over any keyed nodes that might need to be | | |
| 737 | // removed. We only do the removal if we know that the keyed node | | |
| 738 | // never found a match. When a keyed node is matched up we remove | | |
| 739 | // it out of fromNodesLookup and we use fromNodesLookup to determine | | |
| 740 | // if a keyed node has been matched up or not | | |
| 741 | if (keyedRemovalList) { | | |
| 742 | for (var i=0, len=keyedRemovalList.length; i<len; i++) { | | |
| 743 | var elToRemove = fromNodesLookup[keyedRemovalList[i]]; | | |
| 744 | if (elToRemove) { | | |
| 745 | removeNode(elToRemove, elToRemove.parentNode, false); | | |
| 746 | } | | |
| 747 | } | | |
| 748 | } | | |
| 749 | } | | |
| 750 | | | |
| 751 | if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) { | | |
| 752 | if (morphedNode.actualize) { | | |
| 753 | morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc); | | |
| 754 | } | | |
| 755 | // If we had to swap out the from node with a new node because the old | | |
| 756 | // node was not compatible with the target node then we need to | | |
| 757 | // replace the old DOM node in the original DOM tree. This is only | | |
| 758 | // possible if the original DOM node was part of a DOM tree which | | |
| 759 | // we know is the case if it has a parent node. | | |
| 760 | fromNode.parentNode.replaceChild(morphedNode, fromNode); | | |
| 761 | } | | |
| 762 | | | |
| 763 | return morphedNode; | | |
| 764 | }; | | |
| 765 | } | | |
| 766 | | | |
| 767 | var morphdom = morphdomFactory(morphAttrs); | | |
| 768 | | | |
| 769 | export default morphdom; | | |