Work on sync element, now a custom HTML element

static/js/sync.mjs

@@ -1,5 +1,6 @@
 import { API } from 'api'
 import { Node } from 'node'
+import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
 export class Sync {
 	constructor() {//{{{
@@ -154,70 +155,43 @@ export class Sync {
 	}//}}}
 }
 
-export class SyncProgress {
-	constructor(parentEl) {//{{{
+export class N2SyncProgress extends CustomHTMLElement {
+	static {
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<progress data-el="progress" min=0 max=137 value=0></progress>
+			<div data-el="count" class="count">0 / 0</div>
+		`
+	}
+	constructor() {//{{{
+		super()
+
 		this.reset()
 		_mbus.subscribe('SYNC_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
-
-		this.el = this.createElements()
-		parentEl.replaceChildren(this.el)
 	}//}}}
-	createElements() {
-		const div = document.createElement('div')
-		div.classList.add('container')
-		div.innerHTML = `
-			<progress min=0 max=137 value=0></progress>
-			<div class="count">0 / 0</div>
-		`
-
-		this.elProgress = div.querySelector('progress')
-		this.elCount = div.querySelector('.count')
-		return div
-	}
 	reset() {//{{{
-		this.forceUpdateRequest = null
 		this.state = {
 			nodesToSync: 0,
 			nodesSynced: 0,
-			syncedDone: false,
-		}
-		document.getElementById('sync-progress')?.classList.remove('hidden')
-	}//}}}
-	getSnapshotBeforeUpdate(_, prevState) {//{{{
-		if (!prevState.syncedDone && this.state.syncedDone)
-			setTimeout(() => document.getElementById('sync-progress')?.classList.add('hidden'), 750)
-	}//}}}
-	componentDidUpdate() {//{{{
-		if (!this.state.syncedDone) {
-			if (this.forceUpdateRequest !== null)
-				clearTimeout(this.forceUpdateRequest)
-			this.forceUpdateRequest = setTimeout(
-				() => {
-					this.forceUpdateRequest = null
-					this.forceUpdate()
-				},
-				50
-			)
 		}
 	}//}}}
 	progressHandler(event) {//{{{
 		const eventData = event.detail.data
 		switch (event.type) {
 			case 'SYNC_COUNT':
-				console.log(eventData.count)
 				this.state.nodesToSync = eventData.count
+				this.setSyncState(true)
 				break
 
 			case 'SYNC_HANDLED':
-				console.log('sync handled')
 				this.state.nodesSynced = eventData.handled
 				break
 
 			case 'SYNC_DONE':
 				// Hides the progress bar.
-				this.state.syncedDone = true
+				this.setSyncState(false)
 
 				// Don't update anything if nothing was synced.
 				if (this.state.nodesSynced === 0)
@@ -233,17 +207,17 @@ export class SyncProgress {
 		this.render()
 	}//}}}
 	render() {//{{{
-		console.log('render', this.state.nodesToSync)
 		this.elProgress.max = this.state.nodesToSync
 		this.elProgress.value = this.state.nodesSynced
 		this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
-		/*
-		if (nodesToSync === 0)
-			return html`<div id="sync-progress"></div>`
-		*/
-
-
 	}//}}}
+	setSyncState(state) {// {{{
+		if (state)
+			this.classList.add('show')
+		else
+			setTimeout(() => this.classList.remove('show'), 1500)
+	}// }}}
 }
+customElements.define('n2-syncprogress', N2SyncProgress)
 
 // vim: foldmethod=marker