|
| 1 | +'use strict' |
| 2 | +const _random = max => Math.random() * max | 0 |
| 3 | + |
| 4 | +const 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"] |
| 5 | +const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"] |
| 6 | +const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"] |
| 7 | + |
| 8 | +const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length |
| 9 | +const DEFAULT_SIZE = 1000 |
| 10 | +const SWAP_ROW = 998 |
| 11 | +const EMPTY = String('') |
| 12 | +Doo.define( |
| 13 | + class Main extends Doo { |
| 14 | + constructor() { |
| 15 | + super(100) |
| 16 | + this.defaultDataSet = 'rows' |
| 17 | + this.ID = 1 |
| 18 | + this.data = { |
| 19 | + [this.defaultDataSet]: [] |
| 20 | + } |
| 21 | + this.add = this.add.bind(this) |
| 22 | + this.run = this.run.bind(this) |
| 23 | + this.runLots = this.runLots.bind(this) |
| 24 | + this.update = this.update.bind(this) |
| 25 | + this.clear = this.clear.bind(this) |
| 26 | + this.swaprows = this.swapRows.bind(this) |
| 27 | + this.addEventListeners() |
| 28 | + this.selectedRow = undefined |
| 29 | + document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)` |
| 30 | + document.title += ` ${Doo.version} (keyed)` |
| 31 | + } |
| 32 | + |
| 33 | + async dooAfterRender() { |
| 34 | + this.tbody = this.shadow.querySelector('#tbody') |
| 35 | + this.tbody.addEventListener('click', e => { |
| 36 | + e.preventDefault() |
| 37 | + if (e.target.parentElement.matches('.remove')) { |
| 38 | + this.delete(e.target.parentElement) |
| 39 | + } else if (e.target.tagName === 'A') { |
| 40 | + this.select(e.target) |
| 41 | + } |
| 42 | + }) |
| 43 | + } |
| 44 | + |
| 45 | + getParentRow(elem) { |
| 46 | + while (elem) { |
| 47 | + if (elem.tagName === "TR") {return elem} |
| 48 | + elem = elem.parentNode |
| 49 | + } |
| 50 | + return undefined |
| 51 | + } |
| 52 | + |
| 53 | + buildData(count = DEFAULT_SIZE) { |
| 54 | + const data = [] |
| 55 | + for (let i = 0; i < count; i++) { |
| 56 | + data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]}) |
| 57 | + } |
| 58 | + return data |
| 59 | + } |
| 60 | + getIndex(row) { |
| 61 | + let idx = this.data.rows.findIndex((item, i) => { |
| 62 | + if (item.id === row.key) { |
| 63 | + return i |
| 64 | + } |
| 65 | + }) |
| 66 | + return idx |
| 67 | + } |
| 68 | + |
| 69 | + delete(elem) { |
| 70 | + let row = this.getParentRow(elem) |
| 71 | + if (row) { |
| 72 | + let idx = this.getIndex(row) |
| 73 | + this.tbody.removeChild(row) |
| 74 | + if (idx !== undefined) { |
| 75 | + this.data.rows.splice(idx,1) |
| 76 | + } |
| 77 | + } |
| 78 | + } |
| 79 | + |
| 80 | + run() { |
| 81 | + this.clear() |
| 82 | + this.data.rows = this.buildData() |
| 83 | + this.renderTable() |
| 84 | + } |
| 85 | + |
| 86 | + add() { |
| 87 | + let start = this.data.rows.length |
| 88 | + this.data.rows = this.data.rows.concat(this.buildData()) |
| 89 | + this.append(this.data.rows, this.tbody, start) |
| 90 | + } |
| 91 | + |
| 92 | + runLots() { |
| 93 | + this.clear() |
| 94 | + this.data.rows = this.buildData(10000) |
| 95 | + this.renderTable() |
| 96 | + } |
| 97 | + |
| 98 | + update() { |
| 99 | + for (let i=0, len = this.data.rows.length;i<len;i+=10) { |
| 100 | + this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!' |
| 101 | + } |
| 102 | + } |
| 103 | + |
| 104 | + select(elem) { |
| 105 | + if (this.selectedRow) { |
| 106 | + this.selectedRow.classList.remove('danger') |
| 107 | + this.selectedRow = undefined |
| 108 | + } |
| 109 | + if (elem) { |
| 110 | + this.toggleSelect(this.getParentRow(elem)) |
| 111 | + } |
| 112 | + } |
| 113 | + |
| 114 | + toggleSelect(row) { |
| 115 | + if (row) { |
| 116 | + row.classList.toggle('danger') |
| 117 | + if (row.classList.contains('danger')) { |
| 118 | + this.selectedRow = row |
| 119 | + } |
| 120 | + } |
| 121 | + } |
| 122 | + |
| 123 | + clear() { |
| 124 | + this.tbody.textContent = '' |
| 125 | + this.data.rows = [] |
| 126 | + } |
| 127 | + |
| 128 | + swapRows() { |
| 129 | + if (this.data.rows.length > SWAP_ROW) { |
| 130 | + let node1 = this.tbody.firstChild.nextSibling, |
| 131 | + swapRow = this.tbody.childNodes[SWAP_ROW], |
| 132 | + node999 = swapRow.nextSibling, |
| 133 | + row1 = this.data.rows[1] |
| 134 | + |
| 135 | + this.data.rows[1] = this.data.rows[SWAP_ROW]; |
| 136 | + this.data.rows[SWAP_ROW] = row1 |
| 137 | + |
| 138 | + this.tbody.insertBefore(node1.parentNode.replaceChild(swapRow, node1), node999) |
| 139 | + } |
| 140 | + } |
| 141 | + |
| 142 | + addEventListeners() { |
| 143 | + document.getElementById("main").addEventListener('click', e => { |
| 144 | + e.preventDefault() |
| 145 | + if (e.target.matches('#runlots')) { |
| 146 | + this.runLots() |
| 147 | + } else if (e.target.matches('#run')) { |
| 148 | + this.run() |
| 149 | + } else if (e.target.matches('#add')) { |
| 150 | + this.add() |
| 151 | + } else if (e.target.matches('#update')) { |
| 152 | + this.update() |
| 153 | + } else if (e.target.matches('#clear')) { |
| 154 | + this.clear() |
| 155 | + } else if (e.target.matches('#swaprows')) { |
| 156 | + this.swapRows() |
| 157 | + } |
| 158 | + }) |
| 159 | + } |
| 160 | + async connectedCallback() { |
| 161 | + super.connectedCallback() |
| 162 | + } |
| 163 | + }) |
0 commit comments