diff --git a/.eleventy.js b/.eleventy.js index a29e297..522c4dd 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -31,8 +31,7 @@ export default async function (eleventyConfig) { return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`; }); - // TODO: Demo entfernen - const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/'; + const demoPath = await hasFiles('source/screens') ? '/demo/' : '/'; eleventyConfig.addGlobalData('hippie', { brand: 'hippie', @@ -45,7 +44,7 @@ export default async function (eleventyConfig) { mail: 'name@domain.tld', domain: 'https://domain.tld' }, - permalink: permalinkPath, + demoPath: demoPath, debugMode: true, legacyMode: false }); @@ -130,13 +129,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/.gitmodules b/.gitmodules index 410b0db..068fd29 100644 --- a/.gitmodules +++ b/.gitmodules @@ -2,6 +2,3 @@ path = source/style/hippie-style url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git branch = development -[submodule "source/view/_includes/hippie-view"] - path = source/view/_includes/hippie-view - url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-view.git 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/CHANGELOG.md b/CHANGELOG.md index 4e82455..2c9dd37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,52 +1,52 @@ -| Commit | Version | Description | -|:-----------------------------------------|:-------:|:------------------------------------------------| -| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | -| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | -| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | -| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | -| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | -| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | -| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | -| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | -| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | -| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | -| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | -| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | -| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | -| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | -| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | -| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | -| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | -| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | -| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | -| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | -| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | -| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | -| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | -| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | -| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | -| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | -| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | -| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | -| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | -| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | -| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | -| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | -| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | -| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | -| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | -| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | -| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | -| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | -| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | -| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | -| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | -| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | -| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | -| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | -| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | -| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | -| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | -| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | -| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | -| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file +| Commit | Version | Description | +| :--- | :----: | :--- | +| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | +| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | +| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | +| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | +| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | +| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | +| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | +| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | +| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | +| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | +| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | +| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | +| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | +| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | +| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | +| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | +| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | +| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | +| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | +| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | +| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | +| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | +| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | +| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | +| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | +| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | +| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | +| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | +| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | +| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | +| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | +| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | +| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | +| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | +| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | +| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | +| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | +| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | +| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | +| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | +| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | +| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | +| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | +| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | +| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | +| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | +| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | +| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | +| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | +| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file diff --git a/README.md b/README.md index 3f4beda..e40ece3 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Hippie interweaves preeminent personal interface elements This is a [Node.js](https://nodejs.org/) based generator for static HTML documents. It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together. -Styling is powered by the CSS extension language [Sass](https://sass-lang.com/). The HTML pages are written with +Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used, but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are also options. diff --git a/TODO.md b/TODO.md index 2c1ec95..6af7f1b 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 @@ -23,9 +20,6 @@ - Keep placeholder and demo stuff - Move other things - Prevent styles to be global -- Adapt bootstrap utility API - - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss - - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss # JS diff --git a/package-lock.json b/package-lock.json index 0c46b1f..913ed24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "version": "0.13.1", "license": "MIT", "dependencies": { - "@11ty/eleventy": "^3.1.5", + "@11ty/eleventy": "^3.1.2", "@11ty/eleventy-plugin-webc": "^0.11.2", "bootstrap-icons": "^1.13.1", "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git", - "jquery": "^4.0.0", - "sass": "^1.99.0" + "jquery": "^3.7.1", + "sass": "^1.93.0" }, "devDependencies": { "normalize.css": "^8.0.1" @@ -42,44 +42,44 @@ } }, "node_modules/@11ty/eleventy": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.5.tgz", - "integrity": "sha512-hZ0g6MwZyRxCqXsPm82gIM304LraKbUz3ZmezOSjsqxttZG6cHTib3Qq8QkESJoKwnr+yX1eyfOkPC5/mEgZnQ==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz", + "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==", "license": "MIT", "dependencies": { - "@11ty/dependency-tree": "^4.0.2", - "@11ty/dependency-tree-esm": "^2.0.4", + "@11ty/dependency-tree": "^4.0.0", + "@11ty/dependency-tree-esm": "^2.0.0", "@11ty/eleventy-dev-server": "^2.0.8", - "@11ty/eleventy-plugin-bundle": "^3.0.7", + "@11ty/eleventy-plugin-bundle": "^3.0.6", "@11ty/eleventy-utils": "^2.0.7", "@11ty/lodash-custom": "^4.17.21", - "@11ty/posthtml-urls": "^1.0.2", - "@11ty/recursive-copy": "^4.0.4", + "@11ty/posthtml-urls": "^1.0.1", + "@11ty/recursive-copy": "^4.0.2", "@sindresorhus/slugify": "^2.2.1", "bcp-47-normalize": "^2.3.0", "chokidar": "^3.6.0", - "debug": "^4.4.3", + "debug": "^4.4.1", "dependency-graph": "^1.0.0", "entities": "^6.0.1", "filesize": "^10.1.6", "gray-matter": "^4.0.3", "iso-639-1": "^3.1.5", - "js-yaml": "^4.1.1", + "js-yaml": "^4.1.0", "kleur": "^4.1.5", - "liquidjs": "^10.25.0", - "luxon": "^3.7.2", - "markdown-it": "^14.1.1", + "liquidjs": "^10.21.1", + "luxon": "^3.6.1", + "markdown-it": "^14.1.0", "minimist": "^1.2.8", - "moo": "0.5.2", + "moo": "^0.5.2", "node-retrieve-globals": "^6.0.1", "nunjucks": "^3.2.4", - "picomatch": "^4.0.3", + "picomatch": "^4.0.2", "please-upgrade-node": "^3.2.0", - "posthtml": "^0.16.7", + "posthtml": "^0.16.6", "posthtml-match-helper": "^2.0.3", - "semver": "^7.7.4", - "slugify": "^1.6.8", - "tinyglobby": "^0.2.15" + "semver": "^7.7.2", + "slugify": "^1.6.6", + "tinyglobby": "^0.2.14" }, "bin": { "eleventy": "cmd.cjs" @@ -256,14 +256,14 @@ } }, "node_modules/@11ty/recursive-copy": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.4.tgz", - "integrity": "sha512-oI7m8pa7/IAU/3lqRU9vjBbs20iKFo7x+1K9kT3aVira6scc1X9MjBdgLCHzLJeJ7iB6wydioA+kr9/qPnvmlQ==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz", + "integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==", "license": "ISC", "dependencies": { "errno": "^1.0.0", "junk": "^3.1.0", - "minimatch": "^3.1.5", + "maximatch": "^0.1.0", "slash": "^3.0.0" }, "engines": { @@ -752,6 +752,45 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/array-differ": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", + "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "license": "MIT", + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", @@ -830,9 +869,9 @@ "license": "MIT" }, "node_modules/brace-expansion": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz", - "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -1294,9 +1333,9 @@ } }, "node_modules/immutable": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", - "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", + "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", "license": "MIT" }, "node_modules/inherits": { @@ -1401,9 +1440,9 @@ } }, "node_modules/jquery": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz", - "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==", + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", "license": "MIT" }, "node_modules/js-yaml": { @@ -1454,9 +1493,9 @@ } }, "node_modules/liquidjs": { - "version": "10.25.5", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz", - "integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==", + "version": "10.24.0", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz", + "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==", "license": "MIT", "dependencies": { "commander": "^10.0.0" @@ -1523,6 +1562,21 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/maximatch": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", + "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==", + "license": "MIT", + "dependencies": { + "array-differ": "^1.0.0", + "array-union": "^1.0.1", + "arrify": "^1.0.0", + "minimatch": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", @@ -1796,10 +1850,10 @@ } }, "node_modules/posthtml": { - "version": "0.16.7", - "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz", - "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", - "license": "MIT", + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz", + "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==", + "peer": true, "dependencies": { "posthtml-parser": "^0.11.0", "posthtml-render": "^3.0.0" @@ -1931,13 +1985,13 @@ } }, "node_modules/sass": { - "version": "1.99.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz", - "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==", + "version": "1.93.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz", + "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", "license": "MIT", "dependencies": { "chokidar": "^4.0.0", - "immutable": "^5.1.5", + "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { @@ -2050,10 +2104,9 @@ } }, "node_modules/slugify": { - "version": "1.6.9", - "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz", - "integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==", - "license": "MIT", + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", + "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==", "engines": { "node": ">=8.0.0" } @@ -2138,6 +2191,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, diff --git a/package.json b/package.json index 99e61a7..1d127ed 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,11 @@ "normalize.css": "^8.0.1" }, "dependencies": { - "@11ty/eleventy": "^3.1.5", + "@11ty/eleventy": "^3.1.2", "@11ty/eleventy-plugin-webc": "^0.11.2", "bootstrap-icons": "^1.13.1", "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git", - "jquery": "^4.0.0", - "sass": "^1.99.0" + "jquery": "^3.7.1", + "sass": "^1.93.0" } } diff --git a/source/code/game.js b/source/code/game.js deleted file mode 100644 index b961fdb..0000000 --- a/source/code/game.js +++ /dev/null @@ -1,313 +0,0 @@ -class HippieCrosshair { - constructor(canvas, options = {}) { - this.canvas = canvas; - this.ctx = canvas.getContext('2d'); - - this.debug = options.debug || false; - - const defaults = { - crosshair: { - size: 16, - thickness: 2, - color: '#000', - gapSize: 8, - style: 'cross' - }, - connector: { - distance: 128, // Distance to draw next symbol - spacing: 64, // Space between symbols - size: 8, - color: '#000', - style: 'arrow', - visibility: true - }, - line: { - color: 'rgba(0, 0, 0, 0.1)', - width: 1 - } - }; - const merged = this.mergeOptions(defaults, options); - const { crosshair, connector, line } = merged; - - // Crosshair options - this.size = crosshair.size; - this.thickness = crosshair.thickness; - this.color = crosshair.color; - this.gapSize = crosshair.gapSize; - this.style = crosshair.style; - - // Connector options - this.distance = connector.distance; - this.spacing = connector.spacing; - this.connectorSize = connector.size; - this.connectorColor = connector.color; - this.connectorStyle = connector.style; - this.connectorShow = connector.visibility; - - // Line options - this.lineColor = line.color || '#fff'; - this.lineWidth = line.width || 1; - - this.mouseX = canvas.width / 2; - this.mouseY = canvas.height / 2; - - // Animation control - this.isAnimating = true; - this.animationFrameId = null; - - this.setupEventListeners(); - this.animate(); - } - - mergeOptions(defaults, options) { - const merged = JSON.parse(JSON.stringify(defaults)); - - if (options.crosshair) { - Object.assign(merged.crosshair, options.crosshair); - } - if (options.connector) { - Object.assign(merged.connector, options.connector); - } - if (options.line) { - Object.assign(merged.line, options.line); - } - - return merged; - } - - setupEventListeners() { - document.addEventListener('mousemove', (event) => { - this.mouseX = event.clientX; - this.mouseY = event.clientY; - }); - } - - animate() { - if (!this.isAnimating) { - this.animationFrameId = requestAnimationFrame(() => this.animate()); - return; - } - - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - - if (this.connectorShow) { - if (this.debug) this.drawLine(); - this.drawConnector(); - } - - // TODO: Autom. Zug zum Zentrum hin ermöglichen - this.drawCrosshair(); - - this.animationFrameId = requestAnimationFrame(() => this.animate()); - } - - drawLine() { - const centerX = this.canvas.width / 2; - const centerY = this.canvas.height / 2; - - this.ctx.strokeStyle = this.lineColor; - this.ctx.lineWidth = this.lineWidth; - this.ctx.beginPath(); - this.ctx.moveTo(centerX, centerY); - this.ctx.lineTo(this.mouseX, this.mouseY); - this.ctx.stroke(); - } - - // TODO: Ausblenden nach Distanz - drawConnector() { - const centerX = this.canvas.width / 2; - const centerY = this.canvas.height / 2; - - const dx = this.mouseX - centerX; - const dy = this.mouseY - centerY; - const delta = Math.sqrt(dx * dx + dy * dy); - - // Only draw connectors if cursor is far enough from center - if (delta < this.distance) { - return; - } - - const angle = Math.atan2(dy, dx); - const count = Math.floor((delta - this.distance) / this.spacing); - - for (let i = 0; i < count; i++) { - const distance = this.distance + (i * this.spacing); - const x = centerX + Math.cos(angle) * distance; - const y = centerY + Math.sin(angle) * distance; - - this.drawSymbol(x, y, angle); - } - } - - drawSymbol(x, y, angle = 0) { - this.ctx.fillStyle = this.connectorColor; - this.ctx.strokeStyle = this.connectorColor; - this.ctx.lineWidth = 1; - - switch (this.connectorStyle) { - case 'circle': - this.ctx.beginPath(); - this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2); - this.ctx.fill(); - break; - case 'diamond': - const size = this.connectorSize - (this.connectorSize / 4); - this.ctx.beginPath(); - this.ctx.moveTo(x, y - size); - this.ctx.lineTo(x + size, y); - this.ctx.lineTo(x, y + size); - this.ctx.lineTo(x - size, y); - this.ctx.closePath(); - this.ctx.fill(); - break; - case 'square': - this.ctx.fillRect( - x - this.connectorSize / 2, - y - this.connectorSize / 2, - this.connectorSize, - this.connectorSize - ); - break; - case 'arrow': - this.arrow(x, y, angle); - break; - } - } - - arrow(x, y, angle) { - const size = this.connectorSize - (this.connectorSize / 4); - - this.ctx.save(); - this.ctx.translate(x, y); - this.ctx.rotate(angle); - - // Arrow pointing right - this.ctx.beginPath(); - this.ctx.moveTo(size, 0); // Tip - this.ctx.lineTo(-size, -size); // Back left - // this.ctx.lineTo(-size * 0.4, 0); // Middle - this.ctx.lineTo(-size, size); // Back right - this.ctx.closePath(); - this.ctx.fill(); - - this.ctx.restore(); - } - - drawCrosshair() { - this.ctx.strokeStyle = this.color; - this.ctx.lineWidth = this.thickness; - this.ctx.lineCap = 'round'; - - switch (this.style) { - case 'cross': - this.cross(); - break; - case 'circle': - this.circle(); - break; - case 'dot': - this.dot(); - break; - case 'level': - this.level(); - break; - } - } - - cross() { - // Horizontal line - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX - this.size, this.mouseY); - this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY); - this.ctx.lineTo(this.mouseX + this.size, this.mouseY); - this.ctx.stroke(); - - // Vertical line - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX, this.mouseY - this.size); - this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize); - this.ctx.lineTo(this.mouseX, this.mouseY + this.size); - this.ctx.stroke(); - } - - circle() { - // Outer circle - this.ctx.beginPath(); - this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2); - this.ctx.stroke(); - - // Inner dot - this.ctx.fillStyle = this.color; - this.ctx.beginPath(); - this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2); - this.ctx.fill(); - } - - dot() { - this.ctx.fillStyle = this.color; - this.ctx.beginPath(); - this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2); - this.ctx.fill(); - } - - level() { - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY); - this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY); - this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY); - this.ctx.stroke(); - - this.ctx.fillStyle = this.color; - this.ctx.beginPath(); - this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2); - this.ctx.fill(); - } - - setCrosshairStyle(style) { - this.style = style; - } - - setCrosshairColor(color) { - this.color = color; - } - - setConnectorStyle(style) { - this.connectorStyle = style; - } - - setConnectorColor(color) { - this.connectorColor = color; - } - - setConnectorVisibility(visible) { - this.connectorShow = visible; - } - - startAnimation() { - this.isAnimating = true; - } - - stopAnimation() { - this.isAnimating = false; - } - - toggleAnimation() { - this.isAnimating = !this.isAnimating; - } -} diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 89af792..50efe38 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -1,5 +1,3 @@ -/* jshint strict: false */ - // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js. // Benennung und Beschreibungen verbessern. @@ -71,7 +69,7 @@ function HippieFade(toggleElement, initState) { const fragment = document.createDocumentFragment(); const overlay = document.createElement('div'); - overlay.id = 'mouse_overlay'; + overlay.id = 'mouse-overlay'; if (initState) { overlay.classList.add('active'); @@ -192,13 +190,13 @@ function composeMail(tag, name, prov, suffix, text, topic) { el.innerHTML = elContent + text; el.setAttribute('href', 'mailto:' + mailString + topic); } else { - const elements = document.getElementsByClassName(tag.slice(1)); + const els = document.getElementsByClassName(tag.slice(1)); - for (const element of elements) { - const content = element.innerHTML; + for (let el of els) { + const elContent = el.innerHTML; - element.innerHTML = content + text; - element.setAttribute('href', 'mailto:' + mailString + topic); + el.innerHTML = elContent + text; + el.setAttribute('href', 'mailto:' + mailString + topic); } } } @@ -394,6 +392,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. @@ -412,10 +424,10 @@ function randomIntFrom(min, max, pos = 0) { return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos; } -function randomFloatFrom(min, max, dec = 1) { +function randomFloatFrom(min, max, dec = 0) { dec = Math.pow(10, dec); - return Math.round((Math.random() * (max - min) + min) * dec) / dec; + return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec; } /** @@ -528,139 +540,11 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = return mapped; } -function zeroFill(number, width) { - width -= number.toString().length; - - if (width > 0) { - return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; - } - return number + ''; // always return a string -} - // Source - https://stackoverflow.com/a/47480429 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history // 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 RandomPixelPlaceholder { - constructor(parent, options = {}) { - this.container = parent; - this.width = options.width || 400; - this.height = options.height || 300; - this.colors = options.colors || ['#000000', '#ffffff']; - this.filter = options.filter || ''; - this.type = options.type || 'canvas'; // 'canvas' or 'img' - this.element = this.createElement(); - - this.addContextToElement(); - } - - createElement() { - if (this.type === 'img') { - const img = document.createElement('img'); - img.style.filter = this.filter; - - this.container.appendChild(img); - - return img; - } else { - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - canvas.style.filter = this.filter; - - this.container.appendChild(canvas); - - return canvas; - } - } - - addContextToElement() { - if (this.type === 'img') { - // Create intermediate canvas - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - - this.fillWithRandomPixels(canvas); - - // Convert canvas to image data URL and set as img src - this.element.src = canvas.toDataURL(); - this.element.width = this.width; - this.element.height = this.height; - } else { - this.fillWithRandomPixels(this.element); - } - } - - fillWithRandomPixels(canvas) { - const ctx = canvas.getContext('2d'); - const imageData = ctx.createImageData(this.width, this.height); - const data = imageData.data; - - for (let i = 0; i < data.length; i += 4) { - const color = this.getRandomColor(); - const rgb = this.hexToRgb(color); - - data[i] = rgb.r; // Red - data[i + 1] = rgb.g; // Green - data[i + 2] = rgb.b; // Blue - data[i + 3] = 255; // Alpha - } - - ctx.putImageData(imageData, 0, 0); - } - - getRandomColor() { - return this.colors[Math.floor(Math.random() * this.colors.length)]; - } - - hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : {r: 0, g: 0, b: 0}; - } -} - -function sample(array) { - return array[Math.floor(Math.random() * array.length)]; -} - // CONCEPTS // NOTE: Benutzt private Zuweisungen @@ -719,6 +603,91 @@ Clock.prototype.formatDigits = function (val) { return val; }; +function ongoing() { + + var now = new Date(); + + var w = Math.floor(now.getDay()); + var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; + var DNumb = Math.floor(now.getDate()); + var MNumb = Math.floor(now.getMonth()); + var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember']; + var y = Math.floor(now.getYear()); + if (y < 999) y += 1900; + + var ms = Math.floor(now.getMilliseconds()); + var s = Math.floor(now.getSeconds()); + var m = Math.floor(now.getMinutes() + s / 60); + var h = Math.floor(now.getHours() + m / 60); + + var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5) + j2000.setUTCFullYear(2000, 0, 1); + j2000.setUTCHours(0, 0, 0, 0); + + var utc = new Date(); + utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden + utc.setUTCHours(h, m, s, ms); + + var utc0 = new Date(); + utc0.setUTCFullYear(y, MNumb, DNumb); + utc0.setUTCHours(0, 0, 0, 0); + + var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms + var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000; + + var N = jd - 2451545.0; + var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne + var g = 357.528 + 0.9856003 * N; // mittlere Anomalie + var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g); + var e = 23.439 - 0.0000004 * N; + var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el)); + + var T = (jdUTC0 - 2451545.0) / 36525; + var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600; + + var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T; + var hWGMT = stGMT2 * 15; + var hW = hWGMT + 11.9566185772; + + var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden + var st24 = Math.abs(st - (Math.round(st / 24) * 24)); + var stH = Math.floor(st24); + var stM = Math.floor((st24 % 1) * 60); + var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2); + + var travelWidth = document.body.clientWidth; + var travelHeight = document.body.clientHeight; + var sunPosX = 0; + var sunPosY = 0; + var moonPosX = 0; + var moonPosY = 0; + + var sun = $('#sun').css({ + 'left': (s / 60) * travelWidth, + 'top': (m / 60) * travelHeight + }); + + $('#day').text(D[w]); + $('#dayNumb').text(DNumb); + $('#month').text(M[MNumb]); + $('#year').text(y); + $('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2)); + + $('#julian').text(jd.toFixed(6)); + //$('#star').text(stH + ':' + stM + ':' + stS); + $('#star').text(stH + ':' + stM); + $('#star1').text(stGMT); + $('#star2').text(stGMT2); +} + +function zeroFill(number, width) { + width -= number.toString().length; + if (width > 0) { + return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; + } + return number + ''; // always return a string +} + //Länge der Balken im Diagram berechnen function barwidth(size, G, W) { var s = size; 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/start.json b/source/data/start.json similarity index 63% rename from source/view/_data/start.json rename to source/data/start.json index 65bfb14..cc0da22 100644 --- a/source/view/_data/start.json +++ b/source/data/start.json @@ -8,7 +8,7 @@ "href": "/demo/basics.html" }, { - "text": "Portal", - "href": "/demo/examples/portal.html" + "text": "Drag", + "href": "/demo/examples/ui/drag.html" } ] \ No newline at end of file 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 98% rename from source/view/demo/basics.liquid rename to source/screens/demo/basics.liquid index a43bd90..d3c7a08 100644 --- a/source/view/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -4,7 +4,7 @@ tags: - demoIndex order: 2 --- -{% layout 'hippie-view/page.liquid' %} +{% layout 'hippie/page.liquid' %} {% block title %}Grundlagen{% endblock %} @@ -208,7 +208,7 @@ order: 2
Fahne
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %} - Flag @@ -243,7 +243,7 @@ order: 2

Textebene

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweise @@ -561,7 +561,7 @@ order: 2

Änderungen

Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
Zum Beispiel eine Ergänzung von Inhalt.

-