diff --git a/.eleventy.js b/.eleventy.js index 0e51f7d..a29e297 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -32,7 +32,7 @@ export default async function (eleventyConfig) { }); // TODO: Demo entfernen - const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/'; + const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/'; eleventyConfig.addGlobalData('hippie', { brand: 'hippie', @@ -130,14 +130,13 @@ export default async function (eleventyConfig) { eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'}); eleventyConfig.addWatchTarget('./source/style/'); - - return { - dir: { - input: 'source/screens', - output: 'build', - includes: '../templates', - data: '../data' - }, - templateFormats: ['html', 'liquid', 'md', 'njk'] - }; } + +// noinspection JSUnusedGlobalSymbols +export const config = { + dir: { + input: 'source/view', + output: 'build' + }, + templateFormats: ['html', 'liquid', 'md', 'njk'] +}; \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 24ef2fe..13fcfa1 100644 --- a/.jshintrc +++ b/.jshintrc @@ -14,20 +14,20 @@ "unused": false, "browser": true, "globals": { - "HIPPIE": false, - "hippie": true, - "viewHover": true, - "basicEase": true, - "debugOn": true, - "TimeDisplay": true, "DateDisplay": true, + "HIPPIE": false, + "HippieTaskBar": true, + "TimeDisplay": true, + "basicEase": true, + "centerElementUnderCursor": false, "checkButtonAndTarget": false, + "debugOn": true, "getClosestEdgeToElement": false, "getClosestEdgeToMouse": false, - "centerElementUnderCursor": false, - "setAttributesAccordingToPosition": false, + "hippie": true, "randomIntFrom": false, + "readJsonFile": false, "replaceLineBreaks": false, - "HippieTaskBar": true + "viewHover": true } } diff --git a/TODO.md b/TODO.md index 5c33350..2c1ec95 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,5 @@ # General -- Remove gulp and legacy files - Better README with more info for the content section - Explain eleventy usage - Complete CHANGELOG @@ -8,6 +7,10 @@ - Add dynamic content to robots.txt during build process - Add dynamic content to sitemap.xml +# 11ty + +- Look into teh difference of layouts and templates + # CSS - Check style for every basic element diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index cbf1533..60eeeef 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -394,20 +394,6 @@ function centerElementUnderCursor(event, element) { element.style.top = `${y}px`; } -function setAttributesAccordingToPosition(element, position, attributes) { - 'use strict'; - - element.classList.remove(...Object.values(attributes).map(pos => pos.className)); - Object.keys(attributes[position].styles).forEach(key => { - element.style[key] = ''; - }); - - element.classList.add(attributes[position].className); - Object.entries(attributes[position].styles).forEach(([key, value]) => { - element.style[key] = value; - }); -} - /** * Gibt eine Zahl zwischen und aus. * Die Werte und sind dabei mit eingeschlossen. @@ -556,9 +542,37 @@ function zeroFill(number, width) { // Retrieved 2026-03-08, License - CC BY-SA 4.0 const delay = ms => new Promise(res => setTimeout(res, ms)); -class RandomPixelCanvas { - constructor(containerElement, options = {}) { - this.container = containerElement; +async function readJsonFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.readAsText(file); + reader.onload = function () { + try { + resolve(JSON.parse(reader.result)); + } catch (error) { + reject(error); + } + }; + reader.onerror = function () { + reject(reader.error); + }; + }); +} + +async function loadJson(filePath) { + try { + const response = await fetch(filePath); + + if (!response.ok) throw new Error(`Failed to load file: ${response.status}`); + + return await response.json(); + } catch (error) { + console.error('Error loading file:', error); + throw error; + } +} + class RandomPixelPlaceholder { constructor(parent, options = {}) { this.container = parent; diff --git a/source/code/windows.js b/source/code/windows.js index 01a3c7d..ca85af2 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -3,9 +3,10 @@ class HippieTaskBar { this.element = element; this.placeholder = placeholder; this.date = null; + this.time = null; this.isDragging = false; this.barSize = ''; - // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden + // TODO: Ergänzen und nicht ersetzen this.options = options || { direction: 0, position: 'bottom', @@ -13,7 +14,8 @@ class HippieTaskBar { year: 'numeric', month: '2-digit', day: '2-digit' - } + }, + time: {hour: '2-digit', minute: '2-digit'} }; this.init(); @@ -25,11 +27,20 @@ class HippieTaskBar { document.addEventListener('pointermove', this.onMove.bind(this)); document.addEventListener('pointerup', this.onUp.bind(this)); + const clock = this.element.querySelector('.clock'); const dateElement = document.createElement('span'); + const timeElement = document.createElement('span'); + const br = document.createElement('br'); dateElement.id = 'date'; - this.element.querySelector('.clock').appendChild(dateElement); + timeElement.id = 'time'; this.date = new DateDisplay(dateElement, this.options.date); + this.time = new TimeDisplay(timeElement, this.options.time); + + // TODO: Reihenfolge anpassbar machen + clock.appendChild(timeElement); + clock.appendChild(br); + clock.appendChild(dateElement); this.setOptions(this.options.position); } @@ -111,7 +122,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); + this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); centerElementUnderCursor(event, this.placeholder); } } @@ -142,6 +153,18 @@ class HippieTaskBar { this.date.changeFormat(this.options.date, this.options.direction); } + setAttributesAccordingToPosition(element, position, attributes) { + element.classList.remove(...Object.values(attributes).map(pos => pos.className)); + Object.keys(attributes[position].styles).forEach(key => { + element.style[key] = ''; + }); + + element.classList.add(attributes[position].className); + Object.entries(attributes[position].styles).forEach(([key, value]) => { + element.style[key] = value; + }); + } + setOptions(position) { const attributes = { top: { @@ -182,7 +205,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.element, position, attributes); + this.setAttributesAccordingToPosition(this.element, position, attributes); switch (position) { case 'right': diff --git a/source/data/windows.json b/source/data/windows.json new file mode 100644 index 0000000..565adaa --- /dev/null +++ b/source/data/windows.json @@ -0,0 +1,13 @@ +{ + "taskbar": { + "position": "top", + "color": "white", + "hover": { + "active": true, + "color": "#52bed1" + } + }, + "window": { + "name": "Custom" + } +} \ No newline at end of file diff --git a/source/data/menu.json b/source/view/_data/menu.json similarity index 100% rename from source/data/menu.json rename to source/view/_data/menu.json diff --git a/source/data/start.json b/source/view/_data/start.json similarity index 100% rename from source/data/start.json rename to source/view/_data/start.json diff --git a/source/templates/hippie/app.liquid b/source/view/_includes/hippie/app.liquid similarity index 100% rename from source/templates/hippie/app.liquid rename to source/view/_includes/hippie/app.liquid diff --git a/source/templates/hippie/default.liquid b/source/view/_includes/hippie/default.liquid similarity index 100% rename from source/templates/hippie/default.liquid rename to source/view/_includes/hippie/default.liquid diff --git a/source/templates/hippie/full.liquid b/source/view/_includes/hippie/full.liquid similarity index 100% rename from source/templates/hippie/full.liquid rename to source/view/_includes/hippie/full.liquid diff --git a/source/templates/hippie/game.liquid b/source/view/_includes/hippie/game.liquid similarity index 100% rename from source/templates/hippie/game.liquid rename to source/view/_includes/hippie/game.liquid diff --git a/source/templates/hippie/page.liquid b/source/view/_includes/hippie/page.liquid similarity index 98% rename from source/templates/hippie/page.liquid rename to source/view/_includes/hippie/page.liquid index 5c8881f..5cf93c9 100644 --- a/source/templates/hippie/page.liquid +++ b/source/view/_includes/hippie/page.liquid @@ -42,7 +42,7 @@ {% endblock %} {% block script %} {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/index.liquid b/source/view/demo/index.liquid similarity index 88% rename from source/screens/demo/index.liquid rename to source/view/demo/index.liquid index 95aeefa..7159acf 100644 --- a/source/screens/demo/index.liquid +++ b/source/view/demo/index.liquid @@ -12,17 +12,17 @@ title: Index

This is {{ hippie.brand | upcase }}

You can start using it by replacing this file with your own index page.

To do this you need to create a file - /index.njk + index.liquid|njk inside the - source/screens + source/view folder. You can also create a data.json file inside the - source/templates - folder as a data source for your nunjucks files.

+ source/view + folder as a global data source for your template files.

For a very basic start you can make a copy of the demo page - blank.njk. You can find it at - /source/screens/demo.

+ blank.liquid|njk. You can find it at + /source/view/demo/pages.

The source/demo folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole diff --git a/source/screens/demo/introduction.liquid b/source/view/demo/introduction.liquid similarity index 100% rename from source/screens/demo/introduction.liquid rename to source/view/demo/introduction.liquid diff --git a/source/screens/demo/layouts.liquid b/source/view/demo/layouts.liquid similarity index 100% rename from source/screens/demo/layouts.liquid rename to source/view/demo/layouts.liquid diff --git a/source/screens/demo/pages/blank.liquid b/source/view/demo/pages/blank.liquid similarity index 100% rename from source/screens/demo/pages/blank.liquid rename to source/view/demo/pages/blank.liquid diff --git a/source/screens/demo/pages/default.liquid b/source/view/demo/pages/default.liquid similarity index 100% rename from source/screens/demo/pages/default.liquid rename to source/view/demo/pages/default.liquid diff --git a/source/screens/demo/pages/error/304.liquid b/source/view/demo/pages/error/304.liquid similarity index 100% rename from source/screens/demo/pages/error/304.liquid rename to source/view/demo/pages/error/304.liquid diff --git a/source/screens/demo/pages/error/400.liquid b/source/view/demo/pages/error/400.liquid similarity index 100% rename from source/screens/demo/pages/error/400.liquid rename to source/view/demo/pages/error/400.liquid diff --git a/source/screens/demo/pages/error/401.liquid b/source/view/demo/pages/error/401.liquid similarity index 100% rename from source/screens/demo/pages/error/401.liquid rename to source/view/demo/pages/error/401.liquid diff --git a/source/screens/demo/pages/error/403.liquid b/source/view/demo/pages/error/403.liquid similarity index 100% rename from source/screens/demo/pages/error/403.liquid rename to source/view/demo/pages/error/403.liquid diff --git a/source/screens/demo/pages/error/404.liquid b/source/view/demo/pages/error/404.liquid similarity index 100% rename from source/screens/demo/pages/error/404.liquid rename to source/view/demo/pages/error/404.liquid diff --git a/source/screens/demo/pages/error/408.liquid b/source/view/demo/pages/error/408.liquid similarity index 100% rename from source/screens/demo/pages/error/408.liquid rename to source/view/demo/pages/error/408.liquid diff --git a/source/screens/demo/pages/error/500.liquid b/source/view/demo/pages/error/500.liquid similarity index 100% rename from source/screens/demo/pages/error/500.liquid rename to source/view/demo/pages/error/500.liquid diff --git a/source/screens/demo/pages/error/503.liquid b/source/view/demo/pages/error/503.liquid similarity index 100% rename from source/screens/demo/pages/error/503.liquid rename to source/view/demo/pages/error/503.liquid diff --git a/source/screens/demo/pages/maintenance.liquid b/source/view/demo/pages/maintenance.liquid similarity index 100% rename from source/screens/demo/pages/maintenance.liquid rename to source/view/demo/pages/maintenance.liquid diff --git a/source/screens/demo/pages/pages.json b/source/view/demo/pages/pages.json similarity index 100% rename from source/screens/demo/pages/pages.json rename to source/view/demo/pages/pages.json