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 %}