Merge pull request #1 from nextbitlabs/feat/line-progress

Add progress line

Author: riccardoscalco

template/onepunch.json

@@ -1,4 +1,5 @@
 {
 	"width": 960,
-	"height": 600
+	"height": 600,
+	"progress": "line"
 }

template/src/index.js

@@ -1,5 +1,5 @@
 /*
-Get configuration parameters and initialize the web page;
+	Get configuration parameters and initialize the web page;
 */
 
 (async function () {
@@ -15,6 +15,7 @@ Get configuration parameters and initialize the web page;
 function init(config) {
 	addEventListeners(config);
 	setBorders(config.width, config.height);
+	addProgress(config);
 }
 
 /*
@@ -67,3 +68,35 @@ function handleOnkeydown(event) {
 		// No default
 	}
 }
+
+/*
+	Add progress to each slide based on config
+*/
+
+function addProgress(config) {
+	if(!config.progress || config.progress === 'none') {
+		return;
+	}
+
+	const articles = [...document.querySelectorAll()('main > article')];
+
+	if(config.progress === 'line') {
+		articles.forEach((article, index) => {
+			const line = document.createElement('div');
+			line.classList.add("progress-line");
+			article.appendChild(line);
+	
+			line.style.backgroundColor = 'var(--primary-color, #000)';
+			
+			line.style.height = '3px';
+			line.style.position = 'absolute';
+			
+			line.style.bottom = '0';
+			line.style.left = '0';
+			
+			const normIndex = index / (articles.length - 1);
+	
+			line.style.width = `${config.width * normIndex}px`;
+		})
+	}
+}