old version

Author: Henrik jJaven

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

@@ -7,13 +7,12 @@ const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "b
 const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
 
 const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
-const DEFAULT_SIZE = 1000
-const CHILD_1 = 1
-const CHILD_998 = 998
+
 Doo.define(
   	class Main extends Doo {
 		constructor() {
 			super(100)
+			this.scrollTarget = '.table'
 			this.defaultDataSet = 'rows'
 			this.ID = 1
 			this.data = {
@@ -24,7 +23,7 @@ Doo.define(
 			this.runLots = this.runLots.bind(this)
 			this.update = this.update.bind(this)
 			this.clear = this.clear.bind(this)
-			this.swapRows = this.swapRows.bind(this)
+			this.swaprows = this.swapRows.bind(this)
 			this.addEventListeners()
 			this.selectedRow = undefined
 			document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
@@ -33,7 +32,7 @@ Doo.define(
 
 		async dooAfterRender() {
 			this.tbody = this.shadow.querySelector('#tbody')
-			this.tbody.addEventListener('click', e => {
+			this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
 				e.preventDefault()
 				if (e.target.parentElement.matches('.remove')) {
 					this.delete(e.target.parentElement)
@@ -51,10 +50,10 @@ Doo.define(
         	return undefined
         }
 
-		buildData(count = DEFAULT_SIZE) {
-			const data = new Array(count)
+		buildData(count = 1000) {
+			const data = [];
 			for (let i = 0; i < count; i++) {
-				data[i] = {id: this.ID++,label: `${adjectives[_random(lenA)]} ${colours[_random(lenB)]}  ${nouns[_random(lenC)]}`}
+				data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
 			}
 			return data	
 		}
@@ -63,13 +62,13 @@ Doo.define(
 			let row = this.getParentRow(elem)
 			if (row) {
 				this.tbody.removeChild(row)
-				this.data.rows.splice(row.rowIndex,1)
+				this.data.rows[row.getAttribute('key')] = undefined
 			}
 		}  
 
 		run() {
 			this.data.rows = this.buildData()
-			if (this.tbody.childNodes.length >= this.data.rows.length) {
+			if (this.tbody.childNodes.length > this.data.rows.length) {
 				this.tbody.textContent = ''
 			}
 			this.renderTable()
@@ -114,40 +113,49 @@ Doo.define(
 		isRowSelected(elem) {
 			return elem.classList.contains('danger')
 		}
-
 		swapRows() {
-			if (this.data.rows.length > CHILD_998) {
-				let node1 = this.tbody.childNodes[CHILD_1], 
-				swapRow = this.tbody.childNodes[CHILD_998],
-				node999 = swapRow.nextSibling,
-				row1 = this.data.rows[CHILD_1]
+			const A=1,B=998
+			if (this.data.rows.length > B) {
+				
+				let a = this.tbody.childNodes[A], 
+					b = this.tbody.childNodes[B],
+					row1 = this.data.rows[1]
+				
+				this.data.rows[A] = this.data.rows[B];
+				this.data.rows[B] = row1
 
-				this.data.rows[CHILD_1] = this.data.rows[CHILD_998];
-				this.data.rows[CHILD_998] = row1
-				this.tbody.insertBefore(swapRow, node1)
-				this.tbody.insertBefore(node1, node999)
+				const selected1 = this.isRowSelected(a)
+				const selected2 = this.isRowSelected(b)
+				this.updateRow(A, this.data.rows, this.tbody)
+				this.updateRow(B, this.data.rows, this.tbody)
+			
+ 				if (selected1) {
+					this.select(this.tbody.childNodes[B])
+				}
+				if (selected2) 	{
+					this.select(this.tbody.childNodes[A])
+				}
 			}
-		}		
+		}
+
 
 		addEventListeners() {
-			const actions = {
-				'run': this.run,
-				'runlots': this.runLots,
-				'add': this.add,
-				'update': this.update,
-				'clear': this.clear,
-				'swaprows': this.swapRows,
-				runAction: (e) => {
-					e.preventDefault()
-					if (actions[e.target.id]) {
-						actions[e.target.id]()
-					}	
+			document.getElementById("main").addEventListener('click', e => {
+				e.preventDefault()
+				if (e.target.matches('#runlots')) {
+					this.runLots()
+				} else if (e.target.matches('#run')) {
+					this.run()
+				} else if (e.target.matches('#add')) {
+					this.add()
+				} else if (e.target.matches('#update')) {
+					this.update()
+				} else if (e.target.matches('#clear')) {
+					this.clear()
+				} else if (e.target.matches('#swaprows')) {
+					this.swapRows()
 				}
-			}	
-
-			document.getElementById("main").addEventListener('click', e => actions.runAction(e))    
+			})    
     	}
-		async connectedCallback() {
-			super.connectedCallback()
-		}
-	})
+	}
+)