Skip to content

Commit f90704e

Browse files
author
Henrik jJaven
committed
DooHTML-DOM-v0.92.1-beta
1 parent 9a403c0 commit f90704e

File tree

6 files changed

+83
-132
lines changed

6 files changed

+83
-132
lines changed

‎frameworks/keyed/doohtml-dom/js/Main.class.js

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie"
77

88
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
99
const DEFAULT_SIZE = 1000
10-
const SWAP_ROW = 998
11-
const EMPTY = String('')
10+
const CHILD_1 = 1
11+
const CHILD_998 = 998
1212
Doo.define(
1313
class Main extends Doo {
1414
constructor() {
@@ -23,7 +23,7 @@ Doo.define(
2323
this.runLots = this.runLots.bind(this)
2424
this.update = this.update.bind(this)
2525
this.clear = this.clear.bind(this)
26-
this.swaprows = this.swapRows.bind(this)
26+
this.swapRows = this.swapRows.bind(this)
2727
this.addEventListeners()
2828
this.selectedRow = undefined
2929
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
@@ -51,27 +51,22 @@ Doo.define(
5151
}
5252

5353
buildData(count = DEFAULT_SIZE) {
54-
const data = []
54+
const data = new Array(count)
5555
for (let i = 0; i < count; i++) {
56-
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
56+
data[i] = {id: this.ID++,label: `${adjectives[_random(lenA)]} ${colours[_random(lenB)]} ${nouns[_random(lenC)]}`}
5757
}
5858
return data
5959
}
6060
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
61+
return this.data.rows.findIndex((item, i) => item.id === row.key)
6762
}
6863

6964
delete(elem) {
7065
let row = this.getParentRow(elem)
7166
if (row) {
7267
let idx = this.getIndex(row)
7368
this.tbody.removeChild(row)
74-
if (idx !== undefined) {
69+
if (idx !== undefined && idx !== -1) {
7570
this.data.rows.splice(idx,1)
7671
}
7772
}
@@ -126,37 +121,37 @@ Doo.define(
126121
}
127122

128123
swapRows() {
129-
if (this.data.rows.length > SWAP_ROW) {
130-
let node1 = this.tbody.firstChild.nextSibling,
131-
swapRow = this.tbody.childNodes[SWAP_ROW],
124+
if (this.data.rows.length > CHILD_998) {
125+
let node1 = this.tbody.childNodes[CHILD_1],
126+
swapRow = this.tbody.childNodes[CHILD_998],
132127
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
128+
row1 = this.data.rows[CHILD_1]
137129

138-
this.tbody.insertBefore(node1.parentNode.replaceChild(swapRow, node1), node999)
130+
this.data.rows[CHILD_1] = this.data.rows[CHILD_998];
131+
this.data.rows[CHILD_998] = row1
132+
133+
this.tbody.insertBefore(node1.parentNode.replaceChild(swapRow, node1), node999)
139134
}
140135
}
141136

142137
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()
138+
const actions = {
139+
'run': this.run,
140+
'runlots': this.runLots,
141+
'add': this.add,
142+
'update': this.update,
143+
'clear': this.clear,
144+
'swaprows': this.swapRows,
145+
runAction: (e) => {
146+
e.preventDefault()
147+
if (actions[e.target.id]) {
148+
actions[e.target.id]()
149+
}
157150
}
158-
})
151+
}
152+
document.getElementById("main").addEventListener('click', e => actions.runAction(e))
159153
}
154+
160155
async connectedCallback() {
161156
super.connectedCallback()
162157
}

‎frameworks/keyed/doohtml-dom/js/doo.html.min.js

Lines changed: 2 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/doohtml/js/Main.class.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Doo.define(
2424
this.runLots = this.runLots.bind(this)
2525
this.update = this.update.bind(this)
2626
this.clear = this.clear.bind(this)
27-
this.swaprows = this.swapRows.bind(this)
27+
this.swapRows = this.swapRows.bind(this)
2828
this.addEventListeners()
2929
this.selectedRow = undefined
3030
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
@@ -141,23 +141,23 @@ Doo.define(
141141
}
142142

143143
addEventListeners() {
144-
document.getElementById("main").addEventListener('click', e => {
145-
e.preventDefault()
146-
if (e.target.matches('#runlots')) {
147-
this.runLots()
148-
} else if (e.target.matches('#run')) {
149-
this.run()
150-
} else if (e.target.matches('#add')) {
151-
this.add()
152-
} else if (e.target.matches('#update')) {
153-
this.update()
154-
} else if (e.target.matches('#clear')) {
155-
this.clear()
156-
} else if (e.target.matches('#swaprows')) {
157-
this.swapRows()
144+
const actions = {
145+
'run': this.run,
146+
'runlots': this.runLots,
147+
'add': this.add,
148+
'update': this.update,
149+
'clear': this.clear,
150+
'swaprows': this.swapRows,
151+
runAction: (e) => {
152+
e.preventDefault()
153+
if (actions[e.target.id]) {
154+
actions[e.target.id]()
155+
}
158156
}
159-
})
157+
}
158+
document.getElementById("main").addEventListener('click', e => actions.runAction(e))
160159
}
160+
161161
async connectedCallback() {
162162
super.connectedCallback()
163163
}

‎frameworks/keyed/doohtml/js/doo.html.min.js

Lines changed: 2 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/non-keyed/doohtml/js/Main.class.js

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "b
77
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
88

99
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
10-
10+
const DEFAULT_SIZE = 1000
11+
const CHILD_1 = 1
12+
const CHILD_998 = 998
1113
Doo.define(
1214
class Main extends Doo {
1315
constructor() {
@@ -23,7 +25,7 @@ Doo.define(
2325
this.runLots = this.runLots.bind(this)
2426
this.update = this.update.bind(this)
2527
this.clear = this.clear.bind(this)
26-
this.swaprows = this.swapRows.bind(this)
28+
this.swapRows = this.swapRows.bind(this)
2729
this.addEventListeners()
2830
this.selectedRow = undefined
2931
document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
@@ -50,7 +52,7 @@ Doo.define(
5052
return undefined
5153
}
5254

53-
buildData(count = 1000) {
55+
buildData(count = DEFAULT_SIZE) {
5456
const data = [];
5557
for (let i = 0; i < count; i++) {
5658
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
@@ -68,7 +70,7 @@ Doo.define(
6870

6971
run() {
7072
this.data.rows = this.buildData()
71-
if (this.tbody.childNodes.length > this.data.rows.length) {
73+
if (this.tbody.childNodes.length >= this.data.rows.length) {
7274
this.tbody.textContent = ''
7375
}
7476
this.renderTable()
@@ -113,49 +115,38 @@ Doo.define(
113115
isRowSelected(elem) {
114116
return elem.classList.contains('danger')
115117
}
118+
116119
swapRows() {
117-
const A=1,B=998
118-
if (this.data.rows.length > B) {
119-
120-
let a = this.tbody.childNodes[A],
121-
b = this.tbody.childNodes[B],
122-
row1 = this.data.rows[1]
123-
124-
this.data.rows[A] = this.data.rows[B];
125-
this.data.rows[B] = row1
120+
if (this.data.rows.length > CHILD_998) {
121+
let node1 = this.tbody.childNodes[CHILD_1],
122+
swapRow = this.tbody.childNodes[CHILD_998],
123+
node999 = swapRow.nextSibling,
124+
row1 = this.data.rows[CHILD_1]
126125

127-
const selected1 = this.isRowSelected(a)
128-
const selected2 = this.isRowSelected(b)
129-
this.updateRow(A, this.data.rows, this.tbody)
130-
this.updateRow(B, this.data.rows, this.tbody)
131-
132-
if (selected1) {
133-
this.select(this.tbody.childNodes[B])
134-
}
135-
if (selected2) {
136-
this.select(this.tbody.childNodes[A])
137-
}
126+
this.data.rows[CHILD_1] = this.data.rows[CHILD_998];
127+
this.data.rows[CHILD_998] = row1
128+
this.tbody.insertBefore(swapRow, node1)
129+
this.tbody.insertBefore(node1, node999)
138130
}
139-
}
140-
131+
}
141132

142133
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()
134+
const actions = {
135+
'run': this.run,
136+
'runlots': this.runLots,
137+
'add': this.add,
138+
'update': this.update,
139+
'clear': this.clear,
140+
'swaprows': this.swapRows,
141+
runAction: (e) => {
142+
e.preventDefault()
143+
if (actions[e.target.id]) {
144+
actions[e.target.id]()
145+
}
157146
}
158-
})
147+
}
148+
149+
document.getElementById("main").addEventListener('click', e => actions.runAction(e))
159150
}
160151
}
161152
)

‎frameworks/non-keyed/doohtml/js/doo.html.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)