|
| 1 | +'use strict'; |
| 2 | + |
| 3 | +function _random(max) { |
| 4 | + return Math.round(Math.random()*1000)%max; |
| 5 | +} |
| 6 | + |
| 7 | +const rowTemplate = document.createElement("tr"); |
| 8 | +rowTemplate.innerHTML = "<td class='col-md-1'></td><td class='col-md-4'><a class='lbl'></a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td>"; |
| 9 | + |
| 10 | +var rowId = 1; |
| 11 | +function buildData(count = 1000) { |
| 12 | + var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"]; |
| 13 | + var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]; |
| 14 | + var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; |
| 15 | + var data = []; |
| 16 | + for (var i = 0; i < count; i++) |
| 17 | + data.push({id: rowId++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] }); |
| 18 | + return data; |
| 19 | +} |
| 20 | + |
| 21 | +var getParentId = function(elem) { |
| 22 | + while (elem) { |
| 23 | + if (elem.tagName==="TR") { |
| 24 | + return elem.data_id; |
| 25 | + } |
| 26 | + elem = elem.parentNode; |
| 27 | + } |
| 28 | + return undefined; |
| 29 | +} |
| 30 | +class Main { |
| 31 | + constructor() { |
| 32 | + this.data = []; |
| 33 | + this.selectedRow = undefined; |
| 34 | + |
| 35 | + document.getElementById("main").addEventListener('click', e => { |
| 36 | + //console.log("listener",e); |
| 37 | + if (e.target.matches('#add')) { |
| 38 | + e.stopPropagation(); |
| 39 | + //console.log("add"); |
| 40 | + this.add(); |
| 41 | + } |
| 42 | + else if (e.target.matches('#run')) { |
| 43 | + e.stopPropagation(); |
| 44 | + //console.log("run"); |
| 45 | + this.run(); |
| 46 | + } |
| 47 | + else if (e.target.matches('#update')) { |
| 48 | + e.stopPropagation(); |
| 49 | + //console.log("update"); |
| 50 | + this.update(); |
| 51 | + } |
| 52 | + else if (e.target.matches('#runlots')) { |
| 53 | + e.stopPropagation(); |
| 54 | + //console.log("runLots"); |
| 55 | + this.runLots(); |
| 56 | + } |
| 57 | + else if (e.target.matches('#clear')) { |
| 58 | + e.stopPropagation(); |
| 59 | + //console.log("clear"); |
| 60 | + this.clear(); |
| 61 | + } |
| 62 | + else if (e.target.matches('#swaprows')) { |
| 63 | + e.stopPropagation(); |
| 64 | + //console.log("swapRows"); |
| 65 | + this.swapRows(); |
| 66 | + } |
| 67 | + else if (e.target.matches('.remove')) { |
| 68 | + let id = getParentId(e.target); |
| 69 | + let idx = this.data.findIndex(row => row.id === id); |
| 70 | + //console.log("delete",idx); |
| 71 | + this.delete(idx); |
| 72 | + } |
| 73 | + else if (e.target.matches('.lbl')) { |
| 74 | + let id = getParentId(e.target); |
| 75 | + let idx = this.data.findIndex(row => row.id === id); |
| 76 | + //console.log("select",idx); |
| 77 | + this.select(idx); |
| 78 | + } |
| 79 | + }); |
| 80 | + this.tbody = document.getElementById("tbody"); |
| 81 | + } |
| 82 | + run() { |
| 83 | + this.removeAllRows(); |
| 84 | + this.data = []; |
| 85 | + this.appendRows(buildData(1000)); |
| 86 | + this.unselect(); |
| 87 | + } |
| 88 | + add() { |
| 89 | + this.appendRows(buildData(1000)); |
| 90 | + } |
| 91 | + update() { |
| 92 | + for (let i=0;i<this.data.length;i+=10) { |
| 93 | + this.data[i].label += ' !!!' |
| 94 | + this.tbody.childNodes[i].firstChild.nextSibling.firstChild.firstChild.data = this.data[i].label; |
| 95 | + } |
| 96 | + } |
| 97 | + unselect() { |
| 98 | + if (this.selectedRow !== undefined) { |
| 99 | + this.selectedRow.className = ""; |
| 100 | + this.selectedRow = undefined; |
| 101 | + } |
| 102 | + } |
| 103 | + select(idx) { |
| 104 | + this.unselect(); |
| 105 | + this.selectedRow = this.tbody.childNodes[idx]; |
| 106 | + this.selectedRow.className = "danger"; |
| 107 | + } |
| 108 | + delete(idx) { |
| 109 | + // Remove that row from the DOM |
| 110 | + this.tbody.childNodes[idx].remove(); |
| 111 | + this.data.splice(idx, 1); |
| 112 | + } |
| 113 | + removeAllRows() { |
| 114 | + // ~258 msecs |
| 115 | + // for(let i=this.rows.length-1;i>=0;i--) { |
| 116 | + // tbody.removeChild(this.rows[i]); |
| 117 | + // } |
| 118 | + // ~251 msecs |
| 119 | + // for(let i=0;i<this.rows.length;i++) { |
| 120 | + // tbody.removeChild(this.rows[i]); |
| 121 | + // } |
| 122 | + // ~216 msecs |
| 123 | + // var cNode = tbody.cloneNode(false); |
| 124 | + // tbody.parentNode.replaceChild(cNode ,tbody); |
| 125 | + // ~212 msecs |
| 126 | + this.tbody.textContent = ""; |
| 127 | + |
| 128 | + // ~236 msecs |
| 129 | + // var rangeObj = new Range(); |
| 130 | + // rangeObj.selectNodeContents(tbody); |
| 131 | + // rangeObj.deleteContents(); |
| 132 | + // ~260 msecs |
| 133 | + // var last; |
| 134 | + // while (last = tbody.lastChild) tbody.removeChild(last); |
| 135 | + } |
| 136 | + runLots() { |
| 137 | + this.removeAllRows(); |
| 138 | + this.data = []; |
| 139 | + this.appendRows(buildData(10000)); |
| 140 | + this.unselect(); |
| 141 | + } |
| 142 | + clear() { |
| 143 | + this.data = []; |
| 144 | + // This is actually a bit faster, but close to cheating |
| 145 | + // requestAnimationFrame(() => { |
| 146 | + this.removeAllRows(); |
| 147 | + this.unselect(); |
| 148 | + // }); |
| 149 | + } |
| 150 | + swapRows() { |
| 151 | + if (this.data.length > 998) { |
| 152 | + |
| 153 | + let tmp = this.data[998]; |
| 154 | + this.data[998] = this.data[1]; |
| 155 | + this.data[1] = tmp; |
| 156 | + |
| 157 | + let a = this.tbody.lastChild.previousSibling, |
| 158 | + b = a.nextSibling, |
| 159 | + c = this.tbody.firstChild.nextSibling; |
| 160 | + this.tbody.insertBefore(this.tbody.replaceChild(a, c), b); |
| 161 | + } |
| 162 | + |
| 163 | + // let old_selection = this.store.selected; |
| 164 | + // this.store.swapRows(); |
| 165 | + // this.updateRows(); |
| 166 | + // this.unselect(); |
| 167 | + // if (old_selection>=0) { |
| 168 | + // let idx = this.store.data.findIndex(d => d.id === old_selection); |
| 169 | + // if (idx > 0) { |
| 170 | + // this.store.select(this.data[idx].id); |
| 171 | + // this.selectedRow = this.rows[idx]; |
| 172 | + // this.selectedRow.className = "danger"; |
| 173 | + // } |
| 174 | + // } |
| 175 | + } |
| 176 | + appendRows(newData) { |
| 177 | + // Using a document fragment is slower... |
| 178 | + // var docfrag = document.createDocumentFragment(); |
| 179 | + // for(let i=this.rows.length;i<this.store.data.length; i++) { |
| 180 | + // let tr = this.createRow(this.store.data[i]); |
| 181 | + // this.rows[i] = tr; |
| 182 | + // this.data[i] = this.store.data[i]; |
| 183 | + // docfrag.appendChild(tr); |
| 184 | + // } |
| 185 | + // this.tbody.appendChild(docfrag); |
| 186 | + |
| 187 | + // ... than adding directly |
| 188 | + var tbody = this.tbody; |
| 189 | + for(let i=0, len=newData.length;i<len; i++) { |
| 190 | + tbody.appendChild(this.createRow(newData[i])); |
| 191 | + this.data.push(newData[i]); |
| 192 | + } |
| 193 | + } |
| 194 | + createRow(data) { |
| 195 | + const tr = rowTemplate.cloneNode(true), |
| 196 | + td1 = tr.firstChild, |
| 197 | + a2 = td1.nextSibling.firstChild; |
| 198 | + tr.data_id = data.id; |
| 199 | + td1.textContent = data.id; |
| 200 | + a2.textContent = data.label; |
| 201 | + return tr; |
| 202 | + } |
| 203 | +} |
| 204 | + |
| 205 | +new Main(); |
0 commit comments