Add slide numbers and date

Author: riccardoscalco

index.js

@@ -44,7 +44,8 @@ const cli = meow({
 		${chalk.bold('OPTIONS')}
 
 			${chalk.bold('-n')} or ${chalk.bold('--name')} ${chalk.italic('directory_name')}
-				Specify the name of the directory where the project is initialized. Defaults to ${chalk.underline('onepunch-presentation')}.
+				Specify the name of the directory where the project is initialized. 
+				Defaults to ${chalk.underline('onepunch-presentation')}.
 
 			${chalk.bold('-i')} or ${chalk.bold('--input')} ${chalk.italic('htmlfile')}
 				Specify the HTML file to serve or print, defaults to ${chalk.underline('index.html')}.
@@ -58,6 +59,29 @@ const cli = meow({
 			${chalk.bold('--help')}
 				Display the documentation.
 
+		${chalk.bold('FILES')}
+
+			File ${chalk.underline('onepunch.json')} defines config settings as key-value pairs in JSON format.
+			The following keys are provided:
+
+			${chalk.bold('width')}: <Number>
+				Describe the slide width in pixels, defaults to 960.
+
+			${chalk.bold('height')}: <Number>
+				Describe the slide height in pixels, defaults to 600.
+
+			${chalk.bold('progress')}: <String>
+				Describe the presentation progress. At the moment only values "line"
+				and "none" are supported.
+
+			${chalk.bold('date')}: <String>
+				Define the text content of HTML elements with data attribute 
+				data-onepunch="date", such as <span data-onepunch="date"></span>.
+
+			${chalk.bold('slideNumber')}: <Boolean>
+				If true, show the slide number in HTML elements with data attribute 
+				data-onepunch="slide-number", such as <span data-onepunch="slide-number"></span>.
+
 		${chalk.bold('LICENSE')}
 
 			Copyright 2020 Nextbit <[email protected]> (https://nextbit.it/)

template/onepunch.json

@@ -1,5 +1,7 @@
 {
 	"width": 960,
 	"height": 600,
-	"progress": "line"
+	"progress": "line",
+	"date": "",
+	"slideNumber": false
 }

template/src/index.js

@@ -8,7 +8,7 @@
 	};
 
 	/*
-		Get configuration parameters and initialize the web page;
+		Get configuration parameters and initialize the web page.
 	*/
 
 	(async function () {
@@ -18,17 +18,19 @@
 	})();
 
 	/*
-		Initialize services
+		Initialize services.
 	*/
 
 	function init(config) {
 		addEventListeners(config);
 		setBorders(config.width, config.height);
 		addProgress(config);
+		addSlideNumber(config);
+		addDate(config);
 	}
 
 	/*
-		Add event listeners
+		Add event listeners.
 	*/
 
 	function addEventListeners(config) {
@@ -46,7 +48,7 @@
 	}
 
 	/*
-	Set article borders
+	 Set article borders.
 	*/
 
 	function setBorders(width, height) {
@@ -59,7 +61,7 @@
 	}
 
 	/*
-		Change slide with arrow keys
+		Change slide with arrow keys.
 	*/
 
 	function handleOnkeydown(event) {
@@ -84,7 +86,7 @@
 	}
 
 	/*
-		Add progress to each slide based on config
+		Add progress to each slide based on config.
 	*/
 
 	function addProgress(config) {
@@ -149,10 +151,46 @@
 	}
 
 	/*
-		Return the list of slides
+		Return the list of slides.
 	*/
 
 	function getSlides() {
 		return [...document.querySelectorAll('main > article')];
 	}
+
+	/*
+		Add slide numbers.
+	*/
+
+	function addSlideNumber(config) {
+		const slides = getSlides();
+		slides.forEach((slide, index) => {
+			const el = slide.querySelector('[data-onepunch="slide-number"]');
+			if (el) {
+				if (config.slideNumber) {
+					el.textContent = index + 1;
+				} else {
+					el.style.display = 'none';
+				}
+			}
+		});
+	}
+
+	/*
+		Add date.
+	*/
+
+	function addDate(config) {
+		const slides = getSlides();
+		slides.forEach(slide => {
+			const el = slide.querySelector('[data-onepunch="date"]');
+			if (el) {
+				if (config.date) {
+					el.textContent = config.date;
+				} else {
+					el.style.display = 'none';
+				}
+			}
+		});
+	}
 })();