feat: HippieClock structure

- Restructure options with defaults
- Separate date and values of geTime()
- Use this.values inside class
- Add debug console output
- Add handler to updateOptions()

.eleventy.js

@@ -1,7 +1,10 @@
-const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
+/* jshint strict: false */
 
-module.exports = function (eleventyConfig) {
+import {HtmlBasePlugin} from "@11ty/eleventy";
-	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+// noinspection JSUnusedGlobalSymbols
+export default async function (eleventyConfig) {
+	eleventyConfig.addPlugin(HtmlBasePlugin);
 
 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@@ -82,4 +85,4 @@ module.exports = function (eleventyConfig) {
 		templateFormats: ['html', 'liquid', 'njk', 'md']
 		// pathPrefix: './demo/'
 	};
-};
+}

TODO.md

@@ -24,6 +24,7 @@
 # JS
 
 - Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup
+- Proxy for class options: https://javascript.info/proxy
 
 # Content
 

package.json

@@ -1,45 +1,47 @@
 {
-  "name": "hippie",
+	"name": "hippie",
-  "version": "0.13.1",
+	"version": "0.13.1",
-  "description": "Hippie interweaves preeminent personal interface elements",
+	"description": "Hippie interweaves preeminent personal interface elements",
-  "keywords": [
+	"keywords": [
-    "hippie",
+		"hippie",
-    "www site template"
+		"www site template"
-  ],
+	],
-  "homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
+	"homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
-  "bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
+	"bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
-  "license": "MIT",
+	"license": "MIT",
-  "author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
+	"author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
-  "main": "",
+	"main": "",
-  "repository": {
+	"repository": {
-    "type": "git",
+		"type": "git",
-    "url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
+		"url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
-  },
+	},
-  "scripts": {
+	"type": "module",
-    "hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
+	"scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+		"hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
-    "clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
+		"test": "echo \"Error: no test specified\" && exit 1",
-    "clean:build": "rm -rf build/*",
+		"clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
-    "clean:deploy": "rm -rf deploy/*",
+		"clean:build": "rm -rf build/*",
-    "clean:report": "rm -rf report/*",
+		"clean:deploy": "rm -rf deploy/*",
-    "clean:test": "rm -rf test/*",
+		"clean:report": "rm -rf report/*",
-    "style:compile": "sass source/style:build/css --load-path=vendor",
+		"clean:test": "rm -rf test/*",
-    "style:deploy": "sass source/style:deploy/css --load-path=vendor",
+		"style:compile": "sass source/style:build/css --load-path=vendor",
-    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
+		"style:deploy": "sass source/style:deploy/css --load-path=vendor",
-    "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
+		"style:watch": "sass --watch source/style:build/css --load-path=vendor",
-    "build": "npx @11ty/eleventy && npm run style:compile",
+		"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
-    "deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
+		"build": "npx @11ty/eleventy && npm run style:compile",
-    "serve": "npm run style:watch & npx @11ty/eleventy --serve"
+		"deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
-  },
+		"serve": "npm run style:watch & npx @11ty/eleventy --serve"
-  "private": true,
+	},
-  "devDependencies": {
+	"private": true,
-    "normalize.css": "^8.0.1"
+	"devDependencies": {
-  },
+		"normalize.css": "^8.0.1"
-  "dependencies": {
+	},
-    "@11ty/eleventy": "^2.0.1",
+	"dependencies": {
-    "bootstrap-icons": "^1.13.1",
+		"@11ty/eleventy": "^3.1.2",
-    "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
+		"@11ty/eleventy-upgrade-help": "^3.0.2",
-    "jquery": "^3.7.1",
+		"bootstrap-icons": "^1.13.1",
-    "sass": "^1.93.0"
+		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-  }
+		"jquery": "^3.7.1",
+		"sass": "^1.93.0"
+	}
 }

source/screens/demo/examples/clock.liquid

@@ -24,15 +24,18 @@ tags:
 
 <script>
 	class HippieClock {
-		constructor(element, date, options) {
+		constructor(element, date = new Date(), options = {}) {
-			this.element = element;
+			this.defaults = {
-			this.date = this.getTime(date);
+				debug: true,
-			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
 				h24: true,
 				sections: true,
 				overlay: false
 			};
+			this.options = {...this.defaults, ...options};
+			this.element = element;
+			this.date = date;
+			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];
 
@@ -47,17 +50,21 @@ tags:
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
-			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
+			this.addRing('dotmonth', .6, 12, this.values.daysMonth, `rgb(39, 63, 139)`);
-			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);
+			this.addRing('dotyear', .5, 256, this.values.daysYear, `rgb(60, 87, 154)`);
-			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
+			this.addRing('week', .4, 10, this.values.weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
 			this.#resize();
 			window.addEventListener('resize', () => this.#resize());
 
-			console.debug(this);
+			if (this.options.debug) {
-			console.debug(this.getTime());
+				console.group('Clock');
+				console.info('\nOptions:', this.options, '\n\n');
+				console.info('Date:', this.date);
+				console.groupEnd();
+			}
 		}
 
 		#resize() {
@@ -146,19 +153,20 @@ tags:
 
 		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
-			const second = this.getTime().second;
+			this.values = this.getTime();
-			const minute = this.getTime().minute;
+			const second = this.values.second;
-			const hour = this.getTime().hour;
+			const minute = this.values.minute;
+			const hour = this.values.hour;
 
 			this.updateShape('seconds', (second === 0) ? 60 : second);
 			this.updateShape('minutes', (minute === 0) ? 60 : minute);
 			this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
-			this.updateShape('dotweek', this.getTime().dayWeek);
+			this.updateShape('dotweek', this.values.dayWeek);
-			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
+			this.updateShape('dotmonth', this.values.dayMonth, this.values.daysMonth);
-			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('dotyear', this.values.dayYear);
-			this.updateShape('week', this.getTime().week);
+			this.updateShape('week', this.values.week);
-			this.updateShape('month', this.getTime().month);
+			this.updateShape('month', this.values.month);
-			this.updateShape('moon', this.getTime().moon);
+			this.updateShape('moon', this.values.moon);
 			this.draw();
 		}
 
@@ -366,8 +374,17 @@ tags:
 			return false;
 		}
 
+		// TODO: Proxy für Optionen benutzen
 		updateOptions(changes) {
 			this.options = {...this.options, ...changes};
+
+			// TODO: Änderungen durch setzen von Optionen vornehmen, oder nicht?
+			const drawOptions = new Set(['sections', 'h24']);
+			const hasKey = Object.keys(changes).some(key => drawOptions.has(key));
+
+			if (hasKey) {
+				this.draw();
+			}
 		}
 
 		updateShape(id, angle, max) {
@@ -450,8 +467,13 @@ tags:
 	document.getElementById('tglOverlay').addEventListener('click', () => {
 		if (clock) {
 			// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
-			clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
 			clock.updateOptions({overlay: !clock.options.overlay});
+
+			if (clock.options.overlay) {
+				clock.createOverlay();
+			} else {
+				clock.removeOverlay();
+			}
 		} else {
 			console.log('No clock available');
 		}