diff --git a/.eleventy.js b/.eleventy.js index a29e297..0e51f7d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -32,7 +32,7 @@ export default async function (eleventyConfig) { }); // TODO: Demo entfernen - const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/'; + const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/'; eleventyConfig.addGlobalData('hippie', { brand: 'hippie', @@ -130,13 +130,14 @@ export default async function (eleventyConfig) { eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'}); eleventyConfig.addWatchTarget('./source/style/'); -} -// noinspection JSUnusedGlobalSymbols -export const config = { - dir: { - input: 'source/view', - output: 'build' - }, - templateFormats: ['html', 'liquid', 'md', 'njk'] -}; \ No newline at end of file + return { + dir: { + input: 'source/screens', + output: 'build', + includes: '../templates', + data: '../data' + }, + templateFormats: ['html', 'liquid', 'md', 'njk'] + }; +} diff --git a/.jshintrc b/.jshintrc index 13fcfa1..24ef2fe 100644 --- a/.jshintrc +++ b/.jshintrc @@ -14,20 +14,20 @@ "unused": false, "browser": true, "globals": { - "DateDisplay": true, "HIPPIE": false, - "HippieTaskBar": true, - "TimeDisplay": true, + "hippie": true, + "viewHover": true, "basicEase": true, - "centerElementUnderCursor": false, - "checkButtonAndTarget": false, "debugOn": true, + "TimeDisplay": true, + "DateDisplay": true, + "checkButtonAndTarget": false, "getClosestEdgeToElement": false, "getClosestEdgeToMouse": false, - "hippie": true, + "centerElementUnderCursor": false, + "setAttributesAccordingToPosition": false, "randomIntFrom": false, - "readJsonFile": false, "replaceLineBreaks": false, - "viewHover": true + "HippieTaskBar": true } } diff --git a/TODO.md b/TODO.md index 2c1ec95..5c33350 100644 --- a/TODO.md +++ b/TODO.md @@ -1,5 +1,6 @@ # General +- Remove gulp and legacy files - Better README with more info for the content section - Explain eleventy usage - Complete CHANGELOG @@ -7,10 +8,6 @@ - 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 60eeeef..cbf1533 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -394,6 +394,20 @@ 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. @@ -542,37 +556,9 @@ function zeroFill(number, width) { // Retrieved 2026-03-08, License - CC BY-SA 4.0 const delay = ms => new Promise(res => setTimeout(res, ms)); -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 RandomPixelCanvas { + constructor(containerElement, options = {}) { + this.container = containerElement; class RandomPixelPlaceholder { constructor(parent, options = {}) { this.container = parent; diff --git a/source/code/windows.js b/source/code/windows.js index ca85af2..01a3c7d 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -3,10 +3,9 @@ class HippieTaskBar { this.element = element; this.placeholder = placeholder; this.date = null; - this.time = null; this.isDragging = false; this.barSize = ''; - // TODO: Ergänzen und nicht ersetzen + // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden this.options = options || { direction: 0, position: 'bottom', @@ -14,8 +13,7 @@ class HippieTaskBar { year: 'numeric', month: '2-digit', day: '2-digit' - }, - time: {hour: '2-digit', minute: '2-digit'} + } }; this.init(); @@ -27,20 +25,11 @@ 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'; - timeElement.id = 'time'; + this.element.querySelector('.clock').appendChild(dateElement); 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); } @@ -122,7 +111,7 @@ class HippieTaskBar { } }; - this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); + setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); centerElementUnderCursor(event, this.placeholder); } } @@ -153,18 +142,6 @@ 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: { @@ -205,7 +182,7 @@ class HippieTaskBar { } }; - this.setAttributesAccordingToPosition(this.element, position, attributes); + setAttributesAccordingToPosition(this.element, position, attributes); switch (position) { case 'right': diff --git a/source/view/_data/menu.json b/source/data/menu.json similarity index 100% rename from source/view/_data/menu.json rename to source/data/menu.json diff --git a/source/view/_data/start.json b/source/data/start.json similarity index 100% rename from source/view/_data/start.json rename to source/data/start.json diff --git a/source/data/windows.json b/source/data/windows.json deleted file mode 100644 index 565adaa..0000000 --- a/source/data/windows.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "taskbar": { - "position": "top", - "color": "white", - "hover": { - "active": true, - "color": "#52bed1" - } - }, - "window": { - "name": "Custom" - } -} \ No newline at end of file diff --git a/source/view/demo/basics.liquid b/source/screens/demo/basics.liquid similarity index 100% rename from source/view/demo/basics.liquid rename to source/screens/demo/basics.liquid diff --git a/source/view/demo/components.liquid b/source/screens/demo/components.liquid similarity index 100% rename from source/view/demo/components.liquid rename to source/screens/demo/components.liquid diff --git a/source/view/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid similarity index 100% rename from source/view/demo/examples/10print.liquid rename to source/screens/demo/examples/10print.liquid diff --git a/source/view/demo/examples/blog.liquid b/source/screens/demo/examples/blog.liquid similarity index 100% rename from source/view/demo/examples/blog.liquid rename to source/screens/demo/examples/blog.liquid diff --git a/source/view/demo/examples/blog/article.md b/source/screens/demo/examples/blog/article.md similarity index 100% rename from source/view/demo/examples/blog/article.md rename to source/screens/demo/examples/blog/article.md diff --git a/source/view/demo/examples/card.liquid b/source/screens/demo/examples/card.liquid similarity index 100% rename from source/view/demo/examples/card.liquid rename to source/screens/demo/examples/card.liquid diff --git a/source/view/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid similarity index 100% rename from source/view/demo/examples/clock.liquid rename to source/screens/demo/examples/clock.liquid diff --git a/source/view/demo/examples/game/index.liquid b/source/screens/demo/examples/game/index.liquid similarity index 100% rename from source/view/demo/examples/game/index.liquid rename to source/screens/demo/examples/game/index.liquid diff --git a/source/view/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid similarity index 100% rename from source/view/demo/examples/game/intro.liquid rename to source/screens/demo/examples/game/intro.liquid diff --git a/source/view/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid similarity index 100% rename from source/view/demo/examples/game/menu.liquid rename to source/screens/demo/examples/game/menu.liquid diff --git a/source/view/demo/examples/game/mwo.liquid b/source/screens/demo/examples/game/mwo.liquid similarity index 100% rename from source/view/demo/examples/game/mwo.liquid rename to source/screens/demo/examples/game/mwo.liquid diff --git a/source/view/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid similarity index 100% rename from source/view/demo/examples/game/tfw.liquid rename to source/screens/demo/examples/game/tfw.liquid diff --git a/source/view/demo/examples/hello.md b/source/screens/demo/examples/hello.md similarity index 100% rename from source/view/demo/examples/hello.md rename to source/screens/demo/examples/hello.md diff --git a/source/view/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid similarity index 100% rename from source/view/demo/examples/matrix.liquid rename to source/screens/demo/examples/matrix.liquid diff --git a/source/view/demo/examples/portal.liquid b/source/screens/demo/examples/portal.liquid similarity index 100% rename from source/view/demo/examples/portal.liquid rename to source/screens/demo/examples/portal.liquid diff --git a/source/view/demo/examples/songbook.liquid b/source/screens/demo/examples/songbook.liquid similarity index 100% rename from source/view/demo/examples/songbook.liquid rename to source/screens/demo/examples/songbook.liquid diff --git a/source/view/demo/examples/songbook/0_artist-title.md b/source/screens/demo/examples/songbook/0_artist-title.md similarity index 100% rename from source/view/demo/examples/songbook/0_artist-title.md rename to source/screens/demo/examples/songbook/0_artist-title.md diff --git a/source/view/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid similarity index 100% rename from source/view/demo/examples/start.liquid rename to source/screens/demo/examples/start.liquid diff --git a/source/view/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid similarity index 100% rename from source/view/demo/examples/ui/cli.liquid rename to source/screens/demo/examples/ui/cli.liquid diff --git a/source/view/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid similarity index 100% rename from source/view/demo/examples/ui/drag.liquid rename to source/screens/demo/examples/ui/drag.liquid diff --git a/source/view/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid similarity index 100% rename from source/view/demo/examples/ui/explorer.liquid rename to source/screens/demo/examples/ui/explorer.liquid diff --git a/source/view/demo/examples/ui/form.liquid b/source/screens/demo/examples/ui/form.liquid similarity index 100% rename from source/view/demo/examples/ui/form.liquid rename to source/screens/demo/examples/ui/form.liquid diff --git a/source/view/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid similarity index 100% rename from source/view/demo/examples/ui/gallery.liquid rename to source/screens/demo/examples/ui/gallery.liquid diff --git a/source/view/demo/examples/ui/index.liquid b/source/screens/demo/examples/ui/index.liquid similarity index 100% rename from source/view/demo/examples/ui/index.liquid rename to source/screens/demo/examples/ui/index.liquid diff --git a/source/view/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid similarity index 100% rename from source/view/demo/examples/ui/table.liquid rename to source/screens/demo/examples/ui/table.liquid diff --git a/source/view/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid similarity index 100% rename from source/view/demo/examples/ui/tui.liquid rename to source/screens/demo/examples/ui/tui.liquid diff --git a/source/view/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid similarity index 70% rename from source/view/demo/examples/ui/windows.liquid rename to source/screens/demo/examples/ui/windows.liquid index 443b276..15d589b 100644 --- a/source/view/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -29,7 +29,10 @@ tags: -
+
+ ##:## +
+
@@ -60,27 +63,20 @@ tags: const start = document.querySelector('[data-action=start]'); const draggableElement = document.getElementById('task-bar'); const placeholderElement = document.getElementById('placeholder'); + // TODO: TimeDisplay in HippieTaskbar aufnehmen + const timeElement = document.getElementById('time'); - initializeApp(); + const taskBar = new HippieTaskBar(draggableElement, placeholderElement); + const timeFormat = {hour: '2-digit', minute: '2-digit'}; + const timeDisplay = new TimeDisplay(timeElement, timeFormat); - async function initializeApp() { - try { - const config = await loadJson('/json/windows.json'); - // TODO: Elemente in der Klasse selbst erzeugen - const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar); - - // TODO: In HippieTaskbar aufnehmen - document.getElementById('setPause').addEventListener('click', () => { - taskBar.time.pause(); - console.info('Pause time'); - }); - document.getElementById('setPlay').addEventListener('click', () => { - taskBar.time.resume(); - console.info('Resume time'); - }); - } catch (error) { - console.error('Failed to initialize app:', error); - } - } + document.getElementById('setPause').addEventListener('click', () => { + timeDisplay.pause(); + console.info('Pause time'); + }); + document.getElementById('setPlay').addEventListener('click', () => { + timeDisplay.resume(); + console.info('Resume time'); + }); {% endblock %} \ No newline at end of file diff --git a/source/view/demo/index.liquid b/source/screens/demo/index.liquid similarity index 88% rename from source/view/demo/index.liquid rename to source/screens/demo/index.liquid index 7159acf..95aeefa 100644 --- a/source/view/demo/index.liquid +++ b/source/screens/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.liquid|njk + /index.njk inside the - source/view + source/screens folder. You can also create a data.json file inside the - source/view - folder as a global data source for your template files.

+ source/templates + folder as a data source for your nunjucks files.

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

+ blank.njk. You can find it at + /source/screens/demo.

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/view/demo/introduction.liquid b/source/screens/demo/introduction.liquid similarity index 100% rename from source/view/demo/introduction.liquid rename to source/screens/demo/introduction.liquid diff --git a/source/view/demo/layouts.liquid b/source/screens/demo/layouts.liquid similarity index 100% rename from source/view/demo/layouts.liquid rename to source/screens/demo/layouts.liquid diff --git a/source/view/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid similarity index 100% rename from source/view/demo/pages/blank.liquid rename to source/screens/demo/pages/blank.liquid diff --git a/source/view/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid similarity index 100% rename from source/view/demo/pages/default.liquid rename to source/screens/demo/pages/default.liquid diff --git a/source/view/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid similarity index 100% rename from source/view/demo/pages/error/304.liquid rename to source/screens/demo/pages/error/304.liquid diff --git a/source/view/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid similarity index 100% rename from source/view/demo/pages/error/400.liquid rename to source/screens/demo/pages/error/400.liquid diff --git a/source/view/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid similarity index 100% rename from source/view/demo/pages/error/401.liquid rename to source/screens/demo/pages/error/401.liquid diff --git a/source/view/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid similarity index 100% rename from source/view/demo/pages/error/403.liquid rename to source/screens/demo/pages/error/403.liquid diff --git a/source/view/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid similarity index 100% rename from source/view/demo/pages/error/404.liquid rename to source/screens/demo/pages/error/404.liquid diff --git a/source/view/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid similarity index 100% rename from source/view/demo/pages/error/408.liquid rename to source/screens/demo/pages/error/408.liquid diff --git a/source/view/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid similarity index 100% rename from source/view/demo/pages/error/500.liquid rename to source/screens/demo/pages/error/500.liquid diff --git a/source/view/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid similarity index 100% rename from source/view/demo/pages/error/503.liquid rename to source/screens/demo/pages/error/503.liquid diff --git a/source/view/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid similarity index 100% rename from source/view/demo/pages/maintenance.liquid rename to source/screens/demo/pages/maintenance.liquid diff --git a/source/view/demo/pages/pages.json b/source/screens/demo/pages/pages.json similarity index 100% rename from source/view/demo/pages/pages.json rename to source/screens/demo/pages/pages.json diff --git a/source/view/_includes/hippie/app.liquid b/source/templates/hippie/app.liquid similarity index 100% rename from source/view/_includes/hippie/app.liquid rename to source/templates/hippie/app.liquid diff --git a/source/view/_includes/hippie/default.liquid b/source/templates/hippie/default.liquid similarity index 100% rename from source/view/_includes/hippie/default.liquid rename to source/templates/hippie/default.liquid diff --git a/source/view/_includes/hippie/full.liquid b/source/templates/hippie/full.liquid similarity index 100% rename from source/view/_includes/hippie/full.liquid rename to source/templates/hippie/full.liquid diff --git a/source/view/_includes/hippie/game.liquid b/source/templates/hippie/game.liquid similarity index 100% rename from source/view/_includes/hippie/game.liquid rename to source/templates/hippie/game.liquid diff --git a/source/view/_includes/hippie/page.liquid b/source/templates/hippie/page.liquid similarity index 98% rename from source/view/_includes/hippie/page.liquid rename to source/templates/hippie/page.liquid index 5cf93c9..5c8881f 100644 --- a/source/view/_includes/hippie/page.liquid +++ b/source/templates/hippie/page.liquid @@ -42,7 +42,7 @@ {% endblock %} {% block script %}