Commit b588b1cbc0c0e85d0288a7fa484660bf8225a915
html-element: new algorithm for replacing nodes, takes existing nodes into account
Matt McKegg committed on 7/27/2016, 4:41:35 AMParent: 3bfb6e65a932b5fb11b3c2260c7582699eb17ae5
Files changed
| html-element.js | changed |
| html-element.js | ||
|---|---|---|
| @@ -111,29 +111,42 @@ | ||
| 111 | 111 … | } |
| 112 | 112 … | }) |
| 113 | 113 … | } |
| 114 | 114 … | |
| 115 … | +function indexOf (target, item) { | |
| 116 … | + return Array.prototype.indexOf.call(target, item) | |
| 117 … | +} | |
| 118 … | + | |
| 115 | 119 … | function replace (oldNodes, newNodes) { |
| 116 | - // TODO: optmize to not reinsert nodes that are already in correct position! | |
| 117 | 120 … | var parent = oldNodes[oldNodes.length - 1].parentNode |
| 118 | - var marker = oldNodes[oldNodes.length - 1].nextSibling | |
| 121 … | + var nodes = parent.childNodes | |
| 122 … | + var startIndex = indexOf(nodes, oldNodes[0]) | |
| 123 … | + | |
| 124 … | + // avoid reinserting nodes that are already in correct position! | |
| 125 … | + for (var i = 0; i < newNodes.length; i++) { | |
| 126 … | + if (nodes[i + startIndex] === newNodes[i]) { | |
| 127 … | + continue | |
| 128 … | + } else if (nodes[i + startIndex + 1] === newNodes[i]) { | |
| 129 … | + parent.removeChild(nodes[i + startIndex]) | |
| 130 … | + continue | |
| 131 … | + } else if (nodes[i + startIndex] === newNodes[i + 1] && newNodes[i + 1]) { | |
| 132 … | + parent.insertBefore(newNodes[i], nodes[i + startIndex]) | |
| 133 … | + } else if (nodes[i + startIndex]) { | |
| 134 … | + parent.insertBefore(newNodes[i], nodes[i + startIndex]) | |
| 135 … | + } else { | |
| 136 … | + parent.appendChild(newNodes[i]) | |
| 137 … | + } | |
| 138 … | + walk(newNodes[i], rebind) | |
| 139 … | + } | |
| 140 … | + | |
| 119 | 141 … | oldNodes.filter(function (node) { |
| 120 | 142 … | return !~newNodes.indexOf(node) |
| 121 | 143 … | }).forEach(function (node) { |
| 122 | - parent.removeChild(node) | |
| 144 … | + if (node.parentNode) { | |
| 145 … | + parent.removeChild(node) | |
| 146 … | + } | |
| 123 | 147 … | walk(node, unbind) |
| 124 | 148 … | }) |
| 125 | - if (marker) { | |
| 126 | - newNodes.forEach(function (node) { | |
| 127 | - parent.insertBefore(node, marker) | |
| 128 | - walk(node, rebind) | |
| 129 | - }) | |
| 130 | - } else { | |
| 131 | - newNodes.forEach(function (node) { | |
| 132 | - parent.appendChild(node) | |
| 133 | - walk(node, rebind) | |
| 134 | - }) | |
| 135 | - } | |
| 136 | 149 … | } |
| 137 | 150 … | |
| 138 | 151 … | function isText (value) { |
| 139 | 152 … | return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' |
| @@ -152,15 +165,16 @@ | ||
| 152 | 165 … | function getNodes (document, nodeOrNodes) { |
| 153 | 166 … | if (Array.isArray(nodeOrNodes)) { |
| 154 | 167 … | if (nodeOrNodes.length) { |
| 155 | 168 … | var result = [] |
| 156 | - nodeOrNodes.forEach(function (item) { | |
| 169 … | + for (var i = 0; i < nodeOrNodes.length; i++) { | |
| 170 … | + var item = nodeOrNodes[i] | |
| 157 | 171 … | if (Array.isArray(item)) { |
| 158 | 172 … | getNodes(document, item).forEach(push, result) |
| 159 | 173 … | } else { |
| 160 | 174 … | result.push(getNode(document, item)) |
| 161 | 175 … | } |
| 162 | - }) | |
| 176 … | + } | |
| 163 | 177 … | return result.map(getNode.bind(this, document)) |
| 164 | 178 … | } else { |
| 165 | 179 … | return [getNode(document, null)] |
| 166 | 180 … | } |
Built with git-ssb-web