Merge branch 'hman61-DooHTML-v0.91.1-beta-keyed'

krausest · Mar 4, 2023 · ad436aa · ad436aa
2 parents 254b895 + 25a669f
commit ad436aa
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 36 deletions.
diff --git a/frameworks/keyed/doohtml/index.html b/frameworks/keyed/doohtml/index.html
@@ -8,6 +8,12 @@
   <link href="./js/doo.html.min.js" rel="preload" as="script"/>
   <script src="./js/doo.html.min.js"></script>
   <script type="module" src="./js/Main.class.js" defer ></script>
+  <template id="table">
+	<table class="table table-hover table-striped test-data">
+		<tbody id="tbody"><tr bind="rows"><td class="col-md-1">{{id}}</td><td class="col-md-4"><a>{{label}}</a></td><td class="col-md-1"><a class="remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody>
+	</table>
+	<link href="/css/currentStyle.css" rel="stylesheet">
+  </template>
 </head>
 <body>
   <div id="main">
@@ -43,9 +49,10 @@ <h1>DooHTML - keyed</h1><span class="ver"></span>
             </div>
             <doo-main
                 context="shadow"
-                link="/css/currentStyle.css"
-                bind="rows"
-                template="./templates/main.html"
+                bind="data"
+                data-key="id"
+                data-has-html="false"
+                template="#table"
             ></doo-main>
         </div>  
         <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

diff --git a/frameworks/keyed/doohtml/js/Main.class.js b/frameworks/keyed/doohtml/js/Main.class.js
@@ -8,11 +8,12 @@ const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie"
 
 const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
 
+const DEFAULT_SIZE = 1000
+const SWAP_ROW = 998
 Doo.define(
   	class Main extends Doo {
 		constructor() {
 			super(100)
-			this.scrollTarget = '.table'
 			this.defaultDataSet = 'rows'
 			this.ID = 1
 			this.data = {
@@ -32,7 +33,7 @@ Doo.define(
 
 		async dooAfterRender() {
 			this.tbody = this.shadow.querySelector('#tbody')
-			this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
+			this.tbody.addEventListener('click', e => {
 				e.preventDefault()
 				if (e.target.parentElement.matches('.remove')) {
 					this.delete(e.target.parentElement)
@@ -50,23 +51,13 @@ Doo.define(
         	return undefined
         }
 
-		buildData(count = 1000) {
+		buildData(count = DEFAULT_SIZE) {
 			const data = []
 			for (let i = 0; i < count; i++) {
 				data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
 			}
 			return data	
 		}
-
-		getIndex(row) {
-			let idx =  this.data.rows.findIndex((item, i) => {
-				if (item.id === row.key) {
-					return i
-				}
-			}) 
-			return idx
-		}
-
 		getIndex(row) {
 			let idx =  this.data.rows.findIndex((item, i) => {
 				if (item.id === row.key) {
@@ -116,37 +107,36 @@ Doo.define(
 				this.selectedRow.classList.remove('danger')
 				this.selectedRow = undefined
 			}
-			this.toggleSelect(this.getParentRow(elem))
+			if (elem) {
+				this.toggleSelect(this.getParentRow(elem))
+			}	
 		}
 
-		toggleSelect(elem) {
-			let row = this.getParentRow(elem)
+		toggleSelect(row) {
 			if (row) {
 				row.classList.toggle('danger')
 				if (row.classList.contains('danger')) {
 					this.selectedRow = row
 				}	
 			}    
-		}		
+		}
 
 		clear() {
+			this.tbody.textContent = null
 			this.data.rows = []
-			this.tbody.textContent = ''
 		}
 
 		swapRows() {
-			if (this.data.rows.length > 998) {
+			if (this.data.rows.length > SWAP_ROW) {
 				let node1 = this.tbody.firstChild.nextSibling, 
-					node2 = node1.nextSibling,
-					node998 = this.tbody.childNodes[998],
-					node999 = node998.nextSibling,
+					swapRow = this.tbody.childNodes[SWAP_ROW],
+					node999 = swapRow.nextSibling,
 					row1 = this.data.rows[1]
 
-				this.data.rows[1] = this.data.rows[998];
-				this.data.rows[998] = row1
+				this.data.rows[1] = this.data.rows[SWAP_ROW];
+				this.data.rows[SWAP_ROW] = row1
 
-				this.tbody.insertBefore(node998, node2)
-				this.tbody.insertBefore(node1, node999)
+ 				this.tbody.insertBefore(node1.parentNode.replaceChild(swapRow, node1), node999)
 			}
 		}
 
@@ -168,5 +158,7 @@ Doo.define(
 				}
 			})    
     	}
-	}
-)
+		async connectedCallback() {
+			super.connectedCallback()
+		}
+	})
diff --git a/frameworks/keyed/doohtml/js/doo.html.min.js b/frameworks/keyed/doohtml/js/doo.html.min.js
diff --git a/frameworks/keyed/doohtml/package-lock.json b/frameworks/keyed/doohtml/package-lock.json
diff --git a/frameworks/keyed/doohtml/package.json b/frameworks/keyed/doohtml/package.json
@@ -1,6 +1,6 @@
 {
     "name": "js-framework-benchmark-doohtml",
-    "version": "0.80.2",
+    "version": "0.90.7-beta",
     "description": "DooHTML JS-Benchmark",
     "main": "Main.class.js",
     "js-framework-benchmark": {