Compare commits
No commits in common. "dd8b461034b038ac522c5f049e35704ce19c8fe8" and "c3de29d63464335e1bb23e0fececdd6606e48b99" have entirely different histories.
dd8b461034
...
c3de29d634
5 changed files with 1243 additions and 727 deletions
11
.eleventy.js
11
.eleventy.js
|
|
@ -1,10 +1,7 @@
|
|||
/* jshint strict: false */
|
||||
const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
|
||||
|
||||
import {HtmlBasePlugin} from "@11ty/eleventy";
|
||||
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
export default async function (eleventyConfig) {
|
||||
eleventyConfig.addPlugin(HtmlBasePlugin);
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
|
||||
|
||||
eleventyConfig.setLiquidOptions({
|
||||
// greedy: false,
|
||||
|
|
@ -85,4 +82,4 @@ export default async function (eleventyConfig) {
|
|||
templateFormats: ['html', 'liquid', 'njk', 'md']
|
||||
// pathPrefix: './demo/'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
1
TODO.md
1
TODO.md
|
|
@ -24,7 +24,6 @@
|
|||
# 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
|
||||
|
||||
|
|
|
|||
1810
package-lock.json
generated
1810
package-lock.json
generated
File diff suppressed because it is too large
Load diff
88
package.json
88
package.json
|
|
@ -1,47 +1,45 @@
|
|||
{
|
||||
"name": "hippie",
|
||||
"version": "0.13.1",
|
||||
"description": "Hippie interweaves preeminent personal interface elements",
|
||||
"keywords": [
|
||||
"hippie",
|
||||
"www site template"
|
||||
],
|
||||
"homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
|
||||
"bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
|
||||
"license": "MIT",
|
||||
"author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
|
||||
"main": "",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
|
||||
"clean:build": "rm -rf build/*",
|
||||
"clean:deploy": "rm -rf deploy/*",
|
||||
"clean:report": "rm -rf report/*",
|
||||
"clean:test": "rm -rf test/*",
|
||||
"style:compile": "sass source/style:build/css --load-path=vendor",
|
||||
"style:deploy": "sass source/style:deploy/css --load-path=vendor",
|
||||
"style:watch": "sass --watch source/style:build/css --load-path=vendor",
|
||||
"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
|
||||
"build": "npx @11ty/eleventy && npm run style:compile",
|
||||
"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": {
|
||||
"normalize.css": "^8.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"@11ty/eleventy-upgrade-help": "^3.0.2",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
|
||||
"jquery": "^3.7.1",
|
||||
"sass": "^1.93.0"
|
||||
}
|
||||
"name": "hippie",
|
||||
"version": "0.13.1",
|
||||
"description": "Hippie interweaves preeminent personal interface elements",
|
||||
"keywords": [
|
||||
"hippie",
|
||||
"www site template"
|
||||
],
|
||||
"homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
|
||||
"bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
|
||||
"license": "MIT",
|
||||
"author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
|
||||
"main": "",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
|
||||
},
|
||||
"scripts": {
|
||||
"hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
|
||||
"clean:build": "rm -rf build/*",
|
||||
"clean:deploy": "rm -rf deploy/*",
|
||||
"clean:report": "rm -rf report/*",
|
||||
"clean:test": "rm -rf test/*",
|
||||
"style:compile": "sass source/style:build/css --load-path=vendor",
|
||||
"style:deploy": "sass source/style:deploy/css --load-path=vendor",
|
||||
"style:watch": "sass --watch source/style:build/css --load-path=vendor",
|
||||
"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
|
||||
"build": "npx @11ty/eleventy && npm run style:compile",
|
||||
"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": {
|
||||
"normalize.css": "^8.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^2.0.1",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
|
||||
"jquery": "^3.7.1",
|
||||
"sass": "^1.93.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,18 +24,15 @@ tags:
|
|||
|
||||
<script>
|
||||
class HippieClock {
|
||||
constructor(element, date = new Date(), options = {}) {
|
||||
this.defaults = {
|
||||
debug: true,
|
||||
constructor(element, date, options) {
|
||||
this.element = element;
|
||||
this.date = this.getTime(date);
|
||||
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 = [];
|
||||
|
||||
|
|
@ -50,21 +47,17 @@ 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.values.daysMonth, `rgb(39, 63, 139)`);
|
||||
this.addRing('dotyear', .5, 256, this.values.daysYear, `rgb(60, 87, 154)`);
|
||||
this.addRing('week', .4, 10, this.values.weeksYear, `rgb(183, 224, 240)`);
|
||||
this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
|
||||
this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);
|
||||
this.addRing('week', .4, 10, this.getTime().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());
|
||||
|
||||
if (this.options.debug) {
|
||||
console.group('Clock');
|
||||
console.info('\nOptions:', this.options, '\n\n');
|
||||
console.info('Date:', this.date);
|
||||
console.groupEnd();
|
||||
}
|
||||
console.debug(this);
|
||||
console.debug(this.getTime());
|
||||
}
|
||||
|
||||
#resize() {
|
||||
|
|
@ -153,20 +146,19 @@ tags:
|
|||
|
||||
// TODO: Erfassung für geänderte Formen ergänzen
|
||||
update() {
|
||||
this.values = this.getTime();
|
||||
const second = this.values.second;
|
||||
const minute = this.values.minute;
|
||||
const hour = this.values.hour;
|
||||
const second = this.getTime().second;
|
||||
const minute = this.getTime().minute;
|
||||
const hour = this.getTime().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.values.dayWeek);
|
||||
this.updateShape('dotmonth', this.values.dayMonth, this.values.daysMonth);
|
||||
this.updateShape('dotyear', this.values.dayYear);
|
||||
this.updateShape('week', this.values.week);
|
||||
this.updateShape('month', this.values.month);
|
||||
this.updateShape('moon', this.values.moon);
|
||||
this.updateShape('dotweek', this.getTime().dayWeek);
|
||||
this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
|
||||
this.updateShape('dotyear', this.getTime().dayYear);
|
||||
this.updateShape('week', this.getTime().week);
|
||||
this.updateShape('month', this.getTime().month);
|
||||
this.updateShape('moon', this.getTime().moon);
|
||||
this.draw();
|
||||
}
|
||||
|
||||
|
|
@ -374,17 +366,8 @@ 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) {
|
||||
|
|
@ -467,13 +450,8 @@ 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');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue