Merge pull request '10 years later' (#1) from development into main
Reviewed-on: #1
This commit is contained in:
commit
a5bbb17ef0
135 changed files with 10726 additions and 24 deletions
13
.editorconfig
Normal file
13
.editorconfig
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_size = 4
|
||||||
|
indent_style = tab
|
||||||
|
insert_final_newline = false
|
||||||
|
max_line_length = 120
|
||||||
|
|
||||||
|
[*.{css,scss}]
|
||||||
|
tab_width = 2
|
||||||
|
indent_size = tab
|
||||||
88
.eleventy.js
Normal file
88
.eleventy.js
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
/* jshint strict: false */
|
||||||
|
|
||||||
|
import {HtmlBasePlugin} from "@11ty/eleventy";
|
||||||
|
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
export default async function (eleventyConfig) {
|
||||||
|
eleventyConfig.addPlugin(HtmlBasePlugin);
|
||||||
|
|
||||||
|
eleventyConfig.setLiquidOptions({
|
||||||
|
// greedy: false,
|
||||||
|
// trimOutputLeft: true,
|
||||||
|
// trimOutputRight: true,
|
||||||
|
// trimTagLeft: true,
|
||||||
|
// trimTagRight : true,
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.setNunjucksEnvironmentOptions({
|
||||||
|
// throwOnUndefined: true,
|
||||||
|
trimBlocks: true
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addGlobalData('permalink', () => {
|
||||||
|
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
let demoMode = false;
|
||||||
|
let pageBase = demoMode ? './demo/' : './';
|
||||||
|
|
||||||
|
eleventyConfig.addGlobalData('hippie', {
|
||||||
|
pageBase: pageBase,
|
||||||
|
brand: 'hippie',
|
||||||
|
titlePrefix: '',
|
||||||
|
titlePostfix: ' - HIPPIE',
|
||||||
|
placeholders: {
|
||||||
|
name: 'Vorname Nachname',
|
||||||
|
address: 'Straße Nr., PLZ Ort',
|
||||||
|
phone: '+49 (0)101 1337 48',
|
||||||
|
mail: 'name@domain.tld'
|
||||||
|
},
|
||||||
|
debugMode: true,
|
||||||
|
legacyMode: false
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
|
||||||
|
return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
|
||||||
|
if (text === '') {
|
||||||
|
text = target;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (target.indexOf('@') !== -1) {
|
||||||
|
target = 'mailto:' + target;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy('vendor');
|
||||||
|
eleventyConfig.addPassthroughCopy({'node_modules/bootstrap-icons': 'vendor/bootstrap-icons'});
|
||||||
|
eleventyConfig.addPassthroughCopy({
|
||||||
|
'node_modules/jquery/dist/jquery.min.js': 'vendor/jquery.min.js',
|
||||||
|
'node_modules/jquery/dist/jquery.min.map': 'vendor/jquery.min.map'
|
||||||
|
});
|
||||||
|
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', 'njk', 'md']
|
||||||
|
// pathPrefix: './demo/'
|
||||||
|
};
|
||||||
|
}
|
||||||
27
.eslintrc.js
Normal file
27
.eslintrc.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
module.exports = {
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"commonjs": true,
|
||||||
|
"es6": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": "eslint:recommended",
|
||||||
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
"error",
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"linebreak-style": [
|
||||||
|
"error",
|
||||||
|
"unix"
|
||||||
|
],
|
||||||
|
"quotes": [
|
||||||
|
"error",
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
163
.gitignore
vendored
163
.gitignore
vendored
|
|
@ -1,13 +1,67 @@
|
||||||
# =========================
|
# HIPPIE
|
||||||
# Operating System Files
|
###################
|
||||||
# =========================
|
build/**
|
||||||
|
deploy/**
|
||||||
|
reports/**
|
||||||
|
source/art/sprites/
|
||||||
|
source/art/images/sprite.*
|
||||||
|
|
||||||
# Windows
|
# IDE
|
||||||
# =========================
|
.idea/
|
||||||
|
|
||||||
# Windows image file caches
|
# https://gist.github.com/octocat/9257657
|
||||||
|
###################
|
||||||
|
###################
|
||||||
|
|
||||||
|
# Compiled source #
|
||||||
|
###################
|
||||||
|
*.com
|
||||||
|
*.class
|
||||||
|
*.dll
|
||||||
|
*.exe
|
||||||
|
*.o
|
||||||
|
*.so
|
||||||
|
|
||||||
|
# Packages #
|
||||||
|
############
|
||||||
|
# it's better to unpack these files and commit the raw source
|
||||||
|
# git has its own built in compression methods
|
||||||
|
*.7z
|
||||||
|
*.dmg
|
||||||
|
*.gz
|
||||||
|
*.iso
|
||||||
|
*.jar
|
||||||
|
*.rar
|
||||||
|
*.tar
|
||||||
|
*.zip
|
||||||
|
|
||||||
|
# Logs and databases #
|
||||||
|
######################
|
||||||
|
*.log
|
||||||
|
*.sql
|
||||||
|
*.sqlite
|
||||||
|
|
||||||
|
# OS generated files #
|
||||||
|
######################
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore
|
||||||
|
###################
|
||||||
|
###################
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
|
||||||
|
###################
|
||||||
|
# Windows thumbnail cache files
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
ehthumbs.db
|
ehthumbs.db
|
||||||
|
ehthumbs_vista.db
|
||||||
|
|
||||||
|
# Dump file
|
||||||
|
*.stackdump
|
||||||
|
|
||||||
# Folder config file
|
# Folder config file
|
||||||
Desktop.ini
|
Desktop.ini
|
||||||
|
|
@ -24,27 +78,22 @@ $RECYCLE.BIN/
|
||||||
# Windows shortcuts
|
# Windows shortcuts
|
||||||
*.lnk
|
*.lnk
|
||||||
|
|
||||||
# OSX
|
# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
|
||||||
# =========================
|
###################
|
||||||
|
# General
|
||||||
.DS_Store
|
*.DS_Store
|
||||||
.AppleDouble
|
.AppleDouble
|
||||||
.LSOverride
|
.LSOverride
|
||||||
|
|
||||||
# Icon must end with two \r
|
# Icon must end with two \r
|
||||||
Icon
|
Icon
|
||||||
|
|
||||||
|
|
||||||
# Thumbnails
|
|
||||||
._*
|
|
||||||
|
|
||||||
# Files that might appear in the root of a volume
|
# Files that might appear in the root of a volume
|
||||||
.DocumentRevisions-V100
|
.DocumentRevisions-V100
|
||||||
.fseventsd
|
.fseventsd
|
||||||
.Spotlight-V100
|
|
||||||
.TemporaryItems
|
.TemporaryItems
|
||||||
.Trashes
|
|
||||||
.VolumeIcon.icns
|
.VolumeIcon.icns
|
||||||
|
.com.apple.timemachine.donotpresent
|
||||||
|
|
||||||
# Directories potentially created on remote AFP share
|
# Directories potentially created on remote AFP share
|
||||||
.AppleDB
|
.AppleDB
|
||||||
|
|
@ -53,9 +102,85 @@ Network Trash Folder
|
||||||
Temporary Items
|
Temporary Items
|
||||||
.apdisk
|
.apdisk
|
||||||
|
|
||||||
# =========================
|
https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
|
||||||
# Other files
|
###################
|
||||||
# =========================
|
*~
|
||||||
|
|
||||||
|
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||||
|
.fuse_hidden*
|
||||||
|
|
||||||
|
# KDE directory preferences
|
||||||
|
.directory
|
||||||
|
|
||||||
|
# Linux trash folder which might appear on any partition or disk
|
||||||
|
.Trash-*
|
||||||
|
|
||||||
|
# .nfs files are created when an open file is removed but is still being accessed
|
||||||
|
.nfs*
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Node.gitignore
|
||||||
|
###################
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Typescript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Sass.gitignore
|
||||||
|
###################
|
||||||
.sass-cache/
|
.sass-cache/
|
||||||
*.css.map
|
*.css.map
|
||||||
|
*.sass.map
|
||||||
|
*.scss.map
|
||||||
4
.gitmodules
vendored
Normal file
4
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
[submodule "source/style/hippie-style"]
|
||||||
|
path = source/style/hippie-style
|
||||||
|
url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git
|
||||||
|
branch = development
|
||||||
33
.jshintrc
Normal file
33
.jshintrc
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"bitwise": true,
|
||||||
|
"curly": false,
|
||||||
|
"devel": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"esversion": 11,
|
||||||
|
"forin": true,
|
||||||
|
"freeze": true,
|
||||||
|
"jquery": true,
|
||||||
|
"noarg": true,
|
||||||
|
"noempty": true,
|
||||||
|
"strict": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": false,
|
||||||
|
"browser": true,
|
||||||
|
"globals": {
|
||||||
|
"HIPPIE": false,
|
||||||
|
"hippie": true,
|
||||||
|
"viewHover": true,
|
||||||
|
"basicEase": true,
|
||||||
|
"debugOn": true,
|
||||||
|
"TimeDisplay": true,
|
||||||
|
"DateDisplay": true,
|
||||||
|
"checkButtonAndTarget": false,
|
||||||
|
"getClosestEdgeToElement": false,
|
||||||
|
"getClosestEdgeToMouse": false,
|
||||||
|
"centerElementUnderCursor": false,
|
||||||
|
"setAttributesAccordingToPosition": false,
|
||||||
|
"randomIntFrom": false,
|
||||||
|
"replaceLineBreaks": false,
|
||||||
|
"HippieTaskBar": true
|
||||||
|
}
|
||||||
|
}
|
||||||
55
.sasslintrc
Normal file
55
.sasslintrc
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
{
|
||||||
|
"options": {
|
||||||
|
"merge-default-rules": false,
|
||||||
|
"formatter": "html"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"extends-before-mixins": 2,
|
||||||
|
"extends-before-declarations": 2,
|
||||||
|
"placeholder-in-extend": 2,
|
||||||
|
"mixins-before-declarations": [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
"exclude": [
|
||||||
|
"breakpoint",
|
||||||
|
"mq"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-warn": 1,
|
||||||
|
"no-debug": 1,
|
||||||
|
"no-ids": 2,
|
||||||
|
"no-important": 2,
|
||||||
|
"hex-notation": [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
"style": "uppercase"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"indentation": [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
"size": 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"property-sort-order": [
|
||||||
|
1,
|
||||||
|
{
|
||||||
|
"order": [
|
||||||
|
"display",
|
||||||
|
"margin"
|
||||||
|
],
|
||||||
|
"ignore-custom-properties": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"variable-for-property": [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"margin",
|
||||||
|
"content"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
52
CHANGELOG.md
Normal file
52
CHANGELOG.md
Normal file
|
|
@ -0,0 +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 | |
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) 2016 Stephan
|
Copyright (c) 2016 till today Stephan Hagedorn
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
92
README.md
92
README.md
|
|
@ -1,9 +1,93 @@
|
||||||
# HIPPIE
|
# HIPPIE
|
||||||
|
|
||||||
## USE
|
Hippie interweaves preeminent personal interface elements
|
||||||
|
|
||||||
Copy the source folder to your projects style folder.
|
> WORK IN PROGRESS (it is not ready to be used)
|
||||||
|
|
||||||
Compile the SCSS files, for example like a so `sass --watch source/:./`.
|
This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.
|
||||||
|
|
||||||
Load the screen.css file within the head section of your HTML document. `<link rel="stylesheet" type="text/css" media="all" href="./{your projects style folder}/screen.css"/>`
|
It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
|
||||||
|
|
||||||
|
## Installing
|
||||||
|
|
||||||
|
Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.
|
||||||
|
|
||||||
|
Change to the newly created folder. By default this would be *hippie*.
|
||||||
|
|
||||||
|
Run the command `git submodule update --init`.
|
||||||
|
This will load the submodules.
|
||||||
|
|
||||||
|
Run the command `npm install`.
|
||||||
|
This will install all dependencies into the folder *node_modules*.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
The command `gulp --tasks` will give you an overview of possible actions.
|
||||||
|
|
||||||
|
Run the command `gulp` for a live development environment.
|
||||||
|
This will create a folder *build* with the resulting files.
|
||||||
|
Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.
|
||||||
|
|
||||||
|
`gulp build` will create the resulting *build* directory ready for deployment.
|
||||||
|
|
||||||
|
HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
|
||||||
|
|
||||||
|
## Content
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
|
||||||
|
|
||||||
|
### Sass (CSS)
|
||||||
|
|
||||||
|
Everything has its default style.
|
||||||
|
|
||||||
|
CSS classes follow a naming scheme of `<object>_<description>`.
|
||||||
|
|
||||||
|
- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
|
||||||
|
- *Description* is a name of the style e.g. what it does, how it looks
|
||||||
|
|
||||||
|
### JavaScript (JS)
|
||||||
|
|
||||||
|
The codebase uses ECMAScript 2023 Language Specification (14th edition).
|
||||||
|
However, currently the JSHint configuration only allows 11 as highest version.
|
||||||
|
|
||||||
|
ID values are written in *camelCase*. The scheme further uses parts for specific contexts.
|
||||||
|
|
||||||
|
If the ID is for an interactive element the first part is an abbreviation of the action.
|
||||||
|
|
||||||
|
- `add` - Add
|
||||||
|
- `qry` - Query
|
||||||
|
- `rmv` - Remove
|
||||||
|
- `set` - Set
|
||||||
|
- `slt` - Select
|
||||||
|
- `tgl` - Toggle
|
||||||
|
|
||||||
|
## Versioning
|
||||||
|
|
||||||
|
This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
|
||||||
|
|
||||||
|
## Contribution
|
||||||
|
|
||||||
|
For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.
|
||||||
|
The commit *type* can include the following:
|
||||||
|
|
||||||
|
- feat – A new feature is introduced with the changes
|
||||||
|
- fix – A bug fix has occurred
|
||||||
|
- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
|
||||||
|
- refactor – Refactored code that neither fixes a bug nor adds a feature
|
||||||
|
- docs – Updates to documentation such as a the README or other markdown files
|
||||||
|
- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
|
||||||
|
- test – Including new or correcting previous tests
|
||||||
|
- perf – Performance improvements
|
||||||
|
- ci – Continuous integration related
|
||||||
|
- build – Changes that affect the build system or external dependencies
|
||||||
|
- revert – Reverts a previous commit
|
||||||
|
|
||||||
|
## Authors
|
||||||
|
|
||||||
|
**Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
|
||||||
144
TODO.md
Normal file
144
TODO.md
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
# General
|
||||||
|
|
||||||
|
- Remove gulp and legacy files
|
||||||
|
- Better README with more info for the content section
|
||||||
|
- Explain eleventy usage
|
||||||
|
- Complete CHANGELOG
|
||||||
|
- Automatic versioning for package.json and CHANGELOG
|
||||||
|
- Add dynamic content to robots.txt during build process
|
||||||
|
- Add dynamic content to sitemap.xml
|
||||||
|
|
||||||
|
# CSS
|
||||||
|
|
||||||
|
- Check style for every basic element
|
||||||
|
- Uniform spelling of classes and identifiers
|
||||||
|
- Direct class dependencies instead of repeating element names in classes
|
||||||
|
- Change io stuff
|
||||||
|
- Find name for styled interactive elements
|
||||||
|
- Find name for io module with nested class names
|
||||||
|
- Change demo module
|
||||||
|
- Keep placeholder and demo stuff
|
||||||
|
- Move other things
|
||||||
|
- Prevent styles to be global
|
||||||
|
|
||||||
|
# JS
|
||||||
|
|
||||||
|
- Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup
|
||||||
|
- Proxy for class options: https://javascript.info/proxy
|
||||||
|
|
||||||
|
# Content
|
||||||
|
|
||||||
|
- *Intro*
|
||||||
|
- Complete with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
|
||||||
|
- Sections
|
||||||
|
- [x] body
|
||||||
|
- [x] article
|
||||||
|
- [x] section
|
||||||
|
- [x] nav
|
||||||
|
- [x] aside
|
||||||
|
- [x] h1-h6
|
||||||
|
- [x] hgroup
|
||||||
|
- [x] header
|
||||||
|
- [x] footer
|
||||||
|
- [x] address (put to grouping content)
|
||||||
|
- Grouping content
|
||||||
|
- [x] p
|
||||||
|
- [x] hr
|
||||||
|
- [x] pre
|
||||||
|
- [x] blockquote
|
||||||
|
- [x] ol
|
||||||
|
- [x] ul
|
||||||
|
- [ ] menu (new)
|
||||||
|
- [x] li
|
||||||
|
- [x] dl
|
||||||
|
- [x] dt
|
||||||
|
- [x] dd
|
||||||
|
- [x] figure
|
||||||
|
- [x] figcaption
|
||||||
|
- [x] main
|
||||||
|
- [ ] search (new)
|
||||||
|
- [x] div
|
||||||
|
- Text-level semantics
|
||||||
|
- [x] a
|
||||||
|
- [x] em
|
||||||
|
- [x] strong
|
||||||
|
- [x] small
|
||||||
|
- [x] s
|
||||||
|
- [x] cite
|
||||||
|
- [x] q
|
||||||
|
- [x] dfn
|
||||||
|
- [x] abbr
|
||||||
|
- [x] ruby
|
||||||
|
- [x] rb (deprecated)
|
||||||
|
- [x] rt
|
||||||
|
- [x] rtc (deprecated)
|
||||||
|
- [x] rp
|
||||||
|
- [x] data
|
||||||
|
- [x] time
|
||||||
|
- [x] code
|
||||||
|
- [x] var
|
||||||
|
- [x] samp
|
||||||
|
- [x] kbd
|
||||||
|
- [x] sub
|
||||||
|
- [x] sup
|
||||||
|
- [x] i
|
||||||
|
- [x] b
|
||||||
|
- [x] u
|
||||||
|
- [x] mark
|
||||||
|
- [x] bdi
|
||||||
|
- [x] bdo
|
||||||
|
- [x] span
|
||||||
|
- [x] br (mentioned in grouping content)
|
||||||
|
- [x] wbr
|
||||||
|
- Edits
|
||||||
|
- [x] ins
|
||||||
|
- [x] del
|
||||||
|
- Embedded content
|
||||||
|
- [x] picture
|
||||||
|
- [x] source
|
||||||
|
- [x] img
|
||||||
|
- [ ] iframe
|
||||||
|
- [ ] embed
|
||||||
|
- [ ] object
|
||||||
|
- [ ] param (deprecated)
|
||||||
|
- [ ] video
|
||||||
|
- [ ] audio
|
||||||
|
- [ ] track
|
||||||
|
- [ ] map
|
||||||
|
- [ ] area
|
||||||
|
- Tabular data
|
||||||
|
- [ ] table
|
||||||
|
- [ ] caption
|
||||||
|
- [ ] colgroup
|
||||||
|
- [ ] col
|
||||||
|
- [ ] tbody
|
||||||
|
- [ ] thead
|
||||||
|
- [ ] tfoot
|
||||||
|
- [ ] tr
|
||||||
|
- [ ] td
|
||||||
|
- [ ] th
|
||||||
|
- Forms
|
||||||
|
- [x] form
|
||||||
|
- [x] label
|
||||||
|
- [x] input
|
||||||
|
- [x] button
|
||||||
|
- [ ] select
|
||||||
|
- [ ] datalist
|
||||||
|
- [ ] optgroup
|
||||||
|
- [ ] option
|
||||||
|
- [ ] textarea
|
||||||
|
- [ ] output
|
||||||
|
- [ ] progress
|
||||||
|
- [ ] meter (new)
|
||||||
|
- [x] fieldset
|
||||||
|
- [x] legend
|
||||||
|
- Interactive elements
|
||||||
|
- [ ] details
|
||||||
|
- [ ] summary
|
||||||
|
- [ ] dialog
|
||||||
|
- Scripting
|
||||||
|
- [ ] script
|
||||||
|
- [ ] noscript
|
||||||
|
- [ ] template
|
||||||
|
- [ ] slot
|
||||||
|
- [ ] canvas
|
||||||
2121
package-lock.json
generated
Normal file
2121
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
47
package.json
Normal file
47
package.json
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
{
|
||||||
|
"name": "hippie",
|
||||||
|
"version": "0.13.1",
|
||||||
|
"description": "Hippie interweaves preeminent personal interface elements",
|
||||||
|
"keywords": [
|
||||||
|
"hippie",
|
||||||
|
"www site template"
|
||||||
|
],
|
||||||
|
"homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
|
||||||
|
"bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
|
||||||
|
"license": "MIT",
|
||||||
|
"author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
|
||||||
|
"main": "",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
|
||||||
|
"clean:build": "rm -rf build/*",
|
||||||
|
"clean:deploy": "rm -rf deploy/*",
|
||||||
|
"clean:report": "rm -rf report/*",
|
||||||
|
"clean:test": "rm -rf test/*",
|
||||||
|
"style:compile": "sass source/style:build/css --load-path=vendor",
|
||||||
|
"style:deploy": "sass source/style:deploy/css --load-path=vendor",
|
||||||
|
"style:watch": "sass --watch source/style:build/css --load-path=vendor",
|
||||||
|
"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
|
||||||
|
"build": "npx @11ty/eleventy && npm run style:compile",
|
||||||
|
"deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
|
||||||
|
"serve": "npm run style:watch & npx @11ty/eleventy --serve"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"devDependencies": {
|
||||||
|
"normalize.css": "^8.0.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@11ty/eleventy": "^3.1.2",
|
||||||
|
"@11ty/eleventy-upgrade-help": "^3.0.2",
|
||||||
|
"bootstrap-icons": "^1.13.1",
|
||||||
|
"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
|
||||||
|
"jquery": "^3.7.1",
|
||||||
|
"sass": "^1.93.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
robots.txt
Normal file
3
robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
user-agent: *
|
||||||
|
disallow: /private/
|
||||||
|
sitemap: http://domain.tld/sitemap.xml
|
||||||
10
sitemap.xml
Normal file
10
sitemap.xml
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>http://domain.tld/</loc>
|
||||||
|
<lastmod>YYYY-MM-DD</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
BIN
source/art/favicons/favicon.ico
Normal file
BIN
source/art/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
source/art/images/bullet.gif
Normal file
BIN
source/art/images/bullet.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 B |
BIN
source/art/images/flag_websafe_128x80.gif
Normal file
BIN
source/art/images/flag_websafe_128x80.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
source/art/images/flag_websafe_128x80.webp
Normal file
BIN
source/art/images/flag_websafe_128x80.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
115
source/code/drag.js
Normal file
115
source/code/drag.js
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
// Creates a div element which is draggable
|
||||||
|
class NewDiv {
|
||||||
|
constructor(x, y, width, height, backgroundColor, content) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
this.backgroundColor = backgroundColor;
|
||||||
|
this.element = null;
|
||||||
|
this.content = content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the div element
|
||||||
|
createDiv() {
|
||||||
|
this.element = this._content;
|
||||||
|
this.element.style.position = 'absolute';
|
||||||
|
this.element.style.left = `${this.x}px`;
|
||||||
|
this.element.style.top = `${this.y}px`;
|
||||||
|
this.element.style.width = `${this.width}px`;
|
||||||
|
this.element.style.height = `${this.height}px`;
|
||||||
|
this.element.style.background = this.backgroundColor;
|
||||||
|
this.element.style.cursor = 'move';
|
||||||
|
|
||||||
|
// Add event listeners for dragging
|
||||||
|
let isDown = false;
|
||||||
|
let offset = [0, 0];
|
||||||
|
|
||||||
|
this
|
||||||
|
.element
|
||||||
|
.addEventListener('mousedown', (event) => {
|
||||||
|
if (event.button === 0) { // Left mouse button
|
||||||
|
isDown = true;
|
||||||
|
offset = [
|
||||||
|
this.element.offsetLeft - event.clientX,
|
||||||
|
this.element.offsetTop - event.clientY
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isDown = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (event) => {
|
||||||
|
if (isDown) {
|
||||||
|
const maxX = window.innerWidth - this.element.offsetWidth;
|
||||||
|
const maxY = window.innerHeight - this.element.offsetHeight;
|
||||||
|
let x = event.clientX + offset[0];
|
||||||
|
let y = event.clientY + offset[1];
|
||||||
|
|
||||||
|
// Boundary checks
|
||||||
|
if (x < 0)
|
||||||
|
x = 0;
|
||||||
|
if (y < 0)
|
||||||
|
y = 0;
|
||||||
|
if (x > maxX)
|
||||||
|
x = maxX;
|
||||||
|
if (y > maxY)
|
||||||
|
y = maxY;
|
||||||
|
|
||||||
|
this.element.style.left = `${x}px`;
|
||||||
|
this.element.style.top = `${y}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save position and size
|
||||||
|
const saveData = () => {
|
||||||
|
const data = {
|
||||||
|
x: this.element.offsetLeft,
|
||||||
|
y: this.element.offsetTop,
|
||||||
|
width: this.element.offsetWidth,
|
||||||
|
height: this.element.offsetHeight
|
||||||
|
};
|
||||||
|
// Save data to local storage or a database
|
||||||
|
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load saved data
|
||||||
|
const loadData = () => {
|
||||||
|
const data = localStorage.getItem(`divData${this.element.id}`);
|
||||||
|
if (data) {
|
||||||
|
const parsedData = JSON.parse(data);
|
||||||
|
this.element.style.left = `${parsedData.x}px`;
|
||||||
|
this.element.style.top = `${parsedData.y}px`;
|
||||||
|
this.element.style.width = `${parsedData.width}px`;
|
||||||
|
this.element.style.height = `${parsedData.height}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Call the save function when the user stops dragging
|
||||||
|
document.addEventListener('mouseup', saveData);
|
||||||
|
|
||||||
|
// Load saved data on page load
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: this.element wird von appendToFrame() verwendet
|
||||||
|
get content() {
|
||||||
|
return this._content = this.content;
|
||||||
|
}
|
||||||
|
|
||||||
|
set content(value) {
|
||||||
|
if (!value) {
|
||||||
|
value = document.createElement('div');
|
||||||
|
}
|
||||||
|
|
||||||
|
this._content = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append the div to the space
|
||||||
|
appendToFrame(space) {
|
||||||
|
this.element.id = `newDiv${space.children.length}`;
|
||||||
|
space.appendChild(this.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
723
source/code/hippie/app.js
Normal file
723
source/code/hippie/app.js
Normal file
|
|
@ -0,0 +1,723 @@
|
||||||
|
// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
|
||||||
|
// Benennung und Beschreibungen verbessern.
|
||||||
|
|
||||||
|
// This is called everytime
|
||||||
|
function setup() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
console.group('Document information');
|
||||||
|
console.info('\n', HIPPIE.brand, '\n\n');
|
||||||
|
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||||
|
console.groupEnd();
|
||||||
|
if (debugOn) {
|
||||||
|
console.group('Debug information');
|
||||||
|
console.dir(hippie);
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MODULE Scroll navigation
|
||||||
|
// Using constructor function
|
||||||
|
function HippieScroll($tp, $dn) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// this.$tp = $tp;
|
||||||
|
// Define initial situation
|
||||||
|
let initLeft = false;
|
||||||
|
const initY = hippie.screen.vh;
|
||||||
|
|
||||||
|
$tp.addClass('di_none');
|
||||||
|
|
||||||
|
// Check scroll position and toggle element
|
||||||
|
this.check = function () {
|
||||||
|
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||||
|
if (hippie.screen.y > initY) {
|
||||||
|
if (!initLeft) {
|
||||||
|
$tp.removeClass('di_none');
|
||||||
|
console.info('Initial viewport left');
|
||||||
|
}
|
||||||
|
initLeft = true;
|
||||||
|
} else {
|
||||||
|
if (initLeft) {
|
||||||
|
$tp.addClass('di_none');
|
||||||
|
console.info('Initial viewport entered');
|
||||||
|
}
|
||||||
|
initLeft = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add events to navigation elements
|
||||||
|
$tp.click(function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
$('html, body').stop().animate({
|
||||||
|
scrollTop: 0
|
||||||
|
}, basicEase);
|
||||||
|
// console.log('Scrolled to top');
|
||||||
|
});
|
||||||
|
$dn.click(function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||||
|
$('html').scrollTop(pos);
|
||||||
|
// document.documentElement.scrollTop = pos;
|
||||||
|
console.info('Scrolled down to', pos);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function HippieFade(toggleElement, initState) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
const overlay = document.createElement('div');
|
||||||
|
|
||||||
|
overlay.id = 'mouse-overlay';
|
||||||
|
|
||||||
|
if (initState) {
|
||||||
|
overlay.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleElement.addEventListener('click', function () {
|
||||||
|
overlay.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
fragment.appendChild(overlay);
|
||||||
|
document.body.style.position = 'relative';
|
||||||
|
document.body.prepend(fragment);
|
||||||
|
}
|
||||||
|
|
||||||
|
// MODULE Meta elements
|
||||||
|
function HippieMeta($ma, $pp) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let metaOn = false;
|
||||||
|
|
||||||
|
$ma.click(function () {
|
||||||
|
let $wrap, $pop;
|
||||||
|
|
||||||
|
// if (metaOn !== true) {
|
||||||
|
if (!metaOn) {
|
||||||
|
metaOn = true;
|
||||||
|
|
||||||
|
$pp.each(function () {
|
||||||
|
// if ($(this).css('position') === 'static') {
|
||||||
|
// $(this).addClass('js_changed_pos');
|
||||||
|
// $(this).css('position', 'relative');
|
||||||
|
// }
|
||||||
|
// $pop = $(this).next('.exp_pop').detach();
|
||||||
|
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||||
|
// $wrap.after($pop);
|
||||||
|
|
||||||
|
$('<div></div>').addClass('exp_overlay').css({
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
top: 0,
|
||||||
|
left: 0
|
||||||
|
}).appendTo($(this).addClass('exp_wrap'));
|
||||||
|
|
||||||
|
// Displays explanation popup following the mouse
|
||||||
|
$(this).on({
|
||||||
|
mouseenter: function () {
|
||||||
|
// if ($(this).attr('emmet')) {
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
$(this).next('.exp_pop').show();
|
||||||
|
},
|
||||||
|
mouseleave: function () {
|
||||||
|
$(this).next('.exp_pop').hide();
|
||||||
|
},
|
||||||
|
mousemove: function (event) {
|
||||||
|
$(this).next('.exp_pop').css({
|
||||||
|
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||||
|
'left': event.pageX + 8
|
||||||
|
// 'left': event.pageX - $(this).offset().left + 8
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$pp.each(function () {
|
||||||
|
$(this).off('mouseenter mouseleave mousemove');
|
||||||
|
|
||||||
|
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||||
|
// $wrap = $(this).parent('.exp_wrap');
|
||||||
|
// $pop = $wrap.next('.exp_pop').detach();
|
||||||
|
// $wrap.find('.exp_marker_pop').remove();
|
||||||
|
// $(this).unwrap('.exp_wrap');
|
||||||
|
// $(this).after($pop);
|
||||||
|
// if ($(this).hasClass('js_changed_pos')) {
|
||||||
|
// $(this).css('position', '');
|
||||||
|
// if ($(this).attr('style') === '') {
|
||||||
|
// $(this).removeAttr('style');
|
||||||
|
// }
|
||||||
|
// $(this).removeClass('js_changed_pos');
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
|
metaOn = false;
|
||||||
|
}
|
||||||
|
console.log('Explanation mode', metaOn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets the href attribute to mailto: with given information
|
||||||
|
function composeMail(tag, name, prov, suffix, text, topic) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let trigger = tag.indexOf('.');
|
||||||
|
let mailString = name + '@' + prov + '.' + suffix;
|
||||||
|
let textString = mailString.replace(/@/g, '(at)');
|
||||||
|
let descString = 'Nachricht an ' + mailString;
|
||||||
|
|
||||||
|
if (!text) {
|
||||||
|
text = mailString;
|
||||||
|
} else if (text === 'at') {
|
||||||
|
text = textString;
|
||||||
|
} else if (text === 'to') {
|
||||||
|
text = descString;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topic) {
|
||||||
|
topic = '?subject=' + topic;
|
||||||
|
} else {
|
||||||
|
topic = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (trigger === -1) {
|
||||||
|
const el = document.getElementById(tag);
|
||||||
|
const elContent = el.innerHTML;
|
||||||
|
|
||||||
|
el.innerHTML = elContent + text;
|
||||||
|
el.setAttribute('href', 'mailto:' + mailString + topic);
|
||||||
|
} else {
|
||||||
|
const els = document.getElementsByClassName(tag.slice(1));
|
||||||
|
|
||||||
|
for (let el of els) {
|
||||||
|
const elContent = el.innerHTML;
|
||||||
|
|
||||||
|
el.innerHTML = elContent + text;
|
||||||
|
el.setAttribute('href', 'mailto:' + mailString + topic);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// get document coordinates of the element
|
||||||
|
// function getCoords (elem) {
|
||||||
|
// let box = elem.getBoundingClientRect();
|
||||||
|
//
|
||||||
|
// return {
|
||||||
|
// top: box.top + pageYOffset,
|
||||||
|
// left: box.left + pageXOffset
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/488073/1444149
|
||||||
|
// function Utils () {}
|
||||||
|
//
|
||||||
|
// Utils.prototype = {
|
||||||
|
// constructor: Utils,
|
||||||
|
// isElementInView: function (element, fullyInView) {
|
||||||
|
// var pageTop = $(window).scrollTop();
|
||||||
|
// var pageBottom = pageTop + $(window).height();
|
||||||
|
// var elementTop = $(element).offset().top;
|
||||||
|
// var elementBottom = elementTop + $(element).height();
|
||||||
|
//
|
||||||
|
// if (fullyInView === true) {
|
||||||
|
// return ((pageTop < elementTop) && (pageBottom > elementBottom));
|
||||||
|
// } else {
|
||||||
|
// return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
// var Utils = new Utils();
|
||||||
|
|
||||||
|
class TimeDisplay {
|
||||||
|
constructor(element, options, interval) {
|
||||||
|
this.element = element;
|
||||||
|
this.options = options || {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
|
||||||
|
this.interval = interval || 1000;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.locale = navigator.language || 'en-US';
|
||||||
|
|
||||||
|
this.updateTime();
|
||||||
|
|
||||||
|
console.group('Time information');
|
||||||
|
console.info('\nOptions:', this.options, '\n\n');
|
||||||
|
console.info('Interval:', this.interval);
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
formatTime(time) {
|
||||||
|
return time.toLocaleTimeString(this.locale, this.options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Zeit nur im Sekundentakt aktualisieren wenn Sekunden angezeigt werden
|
||||||
|
async updateTime() {
|
||||||
|
while (true) {
|
||||||
|
if (!this.isPaused) {
|
||||||
|
const now = new Date();
|
||||||
|
this.element.textContent = this.formatTime(now);
|
||||||
|
}
|
||||||
|
await new Promise(resolve => setTimeout(resolve, this.interval));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pause() {
|
||||||
|
this.isPaused = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
resume() {
|
||||||
|
this.isPaused = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class DateDisplay {
|
||||||
|
constructor(element, options, direction) {
|
||||||
|
this.element = element;
|
||||||
|
this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
|
||||||
|
this.direction = direction || 0;
|
||||||
|
|
||||||
|
this.updateDate();
|
||||||
|
this.checkForDateChange();
|
||||||
|
|
||||||
|
console.group('Date information');
|
||||||
|
console.info('\nOptions:', this.options, '\n\n');
|
||||||
|
console.info('Remaining minutes:', Math.floor(this.getTimeUntilNextMidnight() / 3600));
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDate(date) {
|
||||||
|
const formatter = new Intl.DateTimeFormat(navigator.language, this.options);
|
||||||
|
|
||||||
|
switch (this.direction) {
|
||||||
|
case 1:
|
||||||
|
const dateString = formatter
|
||||||
|
.formatToParts(date)
|
||||||
|
.map(({type, value}) => {
|
||||||
|
// if (type === 'day' || type === 'month') {
|
||||||
|
if (type === 'literal') {
|
||||||
|
return `${value}<br>`;
|
||||||
|
} else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
return dateString;
|
||||||
|
case 0:
|
||||||
|
default:
|
||||||
|
return formatter.format(date);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDate() {
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
this.element.innerHTML = this.formatDate(now);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeFormat(format, direction) {
|
||||||
|
this.options = format;
|
||||||
|
this.direction = direction;
|
||||||
|
|
||||||
|
this.updateDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
getTimeUntilNextMidnight() {
|
||||||
|
const now = new Date();
|
||||||
|
const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
|
||||||
|
|
||||||
|
return nextMidnight - now;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkForDateChange() {
|
||||||
|
const timeUntilNextMidnight = this.getTimeUntilNextMidnight();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateDate();
|
||||||
|
this.checkForDateChange();
|
||||||
|
}, timeUntilNextMidnight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkButtonAndTarget(event, element, button = 0) {
|
||||||
|
return (
|
||||||
|
event.button === button &&
|
||||||
|
event.target === element
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClosestEdgeToElement(element) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const bounding = element.getBoundingClientRect();
|
||||||
|
const distances = {
|
||||||
|
top: bounding.top,
|
||||||
|
right: window.innerWidth - bounding.right,
|
||||||
|
bottom: window.innerHeight - bounding.bottom,
|
||||||
|
left: bounding.left
|
||||||
|
};
|
||||||
|
|
||||||
|
return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClosestEdgeToMouse(event) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const mouseX = event.clientX;
|
||||||
|
const mouseY = event.clientY;
|
||||||
|
const distances = {
|
||||||
|
left: mouseX,
|
||||||
|
right: window.innerWidth - mouseX,
|
||||||
|
top: mouseY,
|
||||||
|
bottom: window.innerHeight - mouseY
|
||||||
|
};
|
||||||
|
|
||||||
|
return Object.keys(distances).reduce((a, b) =>
|
||||||
|
distances[a] < distances[b] ? a : b
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function centerElementUnderCursor(event, element) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const offsetX = element.getBoundingClientRect().width / 2;
|
||||||
|
const offsetY = element.getBoundingClientRect().height / 2;
|
||||||
|
const x = event.clientX - offsetX;
|
||||||
|
const y = event.clientY - offsetY;
|
||||||
|
|
||||||
|
element.style.left = `${x}px`;
|
||||||
|
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 <min> und <max> aus.
|
||||||
|
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
||||||
|
* Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
|
||||||
|
*
|
||||||
|
* @param {number} min
|
||||||
|
* @param {number} max
|
||||||
|
* @param {number} pos
|
||||||
|
* @returns {number}
|
||||||
|
*/
|
||||||
|
function randomIntFrom(min, max, pos = 0) {
|
||||||
|
pos = Math.pow(10, pos);
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
|
||||||
|
return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomFloatFrom(min, max, dec = 0) {
|
||||||
|
dec = Math.pow(10, dec);
|
||||||
|
|
||||||
|
return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ersetzt \n durch <br>.
|
||||||
|
*
|
||||||
|
* @param {string} text
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function replaceLineBreaks(text) {
|
||||||
|
if (text === '' || !text.includes('\n')) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
return text.split('\n').join('<br>');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gibt eine zufällige Farbe als HEX-Wert aus.
|
||||||
|
*
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function getRandomColor() {
|
||||||
|
const letters = '0123456789ABCDEF';
|
||||||
|
let color = '#';
|
||||||
|
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
color += letters[Math.floor(Math.random() * 16)];
|
||||||
|
}
|
||||||
|
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomFormattedString(chars = 2, digits = 6, separator = '-') {
|
||||||
|
const getRandomUppercase = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65);
|
||||||
|
const getRandomDigit = () => Math.floor(Math.random() * 10);
|
||||||
|
let string = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < chars; i++) {
|
||||||
|
string += getRandomUppercase();
|
||||||
|
}
|
||||||
|
|
||||||
|
string += separator;
|
||||||
|
|
||||||
|
for (let i = 0; i < digits; i++) {
|
||||||
|
string += getRandomDigit();
|
||||||
|
}
|
||||||
|
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleColumn(table, index) {
|
||||||
|
const rows = table.rows;
|
||||||
|
const isHidden = rows[0].cells[index].classList.contains('di_none');
|
||||||
|
|
||||||
|
for (let i = 0; i < rows.length; i++) {
|
||||||
|
const cell = rows[i].cells[index];
|
||||||
|
|
||||||
|
if (isHidden) {
|
||||||
|
cell.classList.remove('di_none');
|
||||||
|
} else {
|
||||||
|
cell.classList.add('di_none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertToRomanNumeral(num) {
|
||||||
|
const romanNumeralMap = [
|
||||||
|
{value: 1000, numeral: 'M'},
|
||||||
|
{value: 900, numeral: 'CM'},
|
||||||
|
{value: 500, numeral: 'D'},
|
||||||
|
{value: 400, numeral: 'CD'},
|
||||||
|
{value: 100, numeral: 'C'},
|
||||||
|
{value: 90, numeral: 'XC'},
|
||||||
|
{value: 50, numeral: 'L'},
|
||||||
|
{value: 40, numeral: 'XL'},
|
||||||
|
{value: 10, numeral: 'X'},
|
||||||
|
{value: 9, numeral: 'IX'},
|
||||||
|
{value: 5, numeral: 'V'},
|
||||||
|
{value: 4, numeral: 'IV'},
|
||||||
|
{value: 1, numeral: 'I'}
|
||||||
|
];
|
||||||
|
|
||||||
|
let result = '';
|
||||||
|
for (let i = 0; i < romanNumeralMap.length; i++) {
|
||||||
|
while (num >= romanNumeralMap[i].value) {
|
||||||
|
result += romanNumeralMap[i].numeral;
|
||||||
|
num -= romanNumeralMap[i].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function capitalizeFirstLetter(text) {
|
||||||
|
return text.charAt(0).toUpperCase() + text.slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = false) {
|
||||||
|
let min = outMin;
|
||||||
|
let max = outMax;
|
||||||
|
|
||||||
|
if (reverse) {
|
||||||
|
[min, max] = [max, min];
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapped = (value - inMin) * (max - min) / (inMax - inMin) + min;
|
||||||
|
|
||||||
|
if (clamp) {
|
||||||
|
return Math.max(Math.min(min, max), Math.min(Math.max(min, max), mapped));
|
||||||
|
}
|
||||||
|
return mapped;
|
||||||
|
}
|
||||||
|
|
||||||
|
// CONCEPTS
|
||||||
|
|
||||||
|
// NOTE: Benutzt private Zuweisungen
|
||||||
|
class elementBinder {
|
||||||
|
#element;
|
||||||
|
|
||||||
|
constructor(element) {
|
||||||
|
this.#setElement(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
#setElement(value) {
|
||||||
|
if (!value) {
|
||||||
|
throw new Error('No element found');
|
||||||
|
}
|
||||||
|
this.#element = value;
|
||||||
|
this.#element.style.background = "hotpink";
|
||||||
|
}
|
||||||
|
|
||||||
|
get element() {
|
||||||
|
return this.#element;
|
||||||
|
}
|
||||||
|
|
||||||
|
set element(value) {
|
||||||
|
this.#setElement(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//OLD
|
||||||
|
|
||||||
|
function Clock(id) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
this.id = id;
|
||||||
|
const that = this;
|
||||||
|
|
||||||
|
setInterval(function () {
|
||||||
|
that.updateClock();
|
||||||
|
}, 1000);
|
||||||
|
this.updateClock();
|
||||||
|
}
|
||||||
|
|
||||||
|
Clock.prototype.updateClock = function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const date = new Date();
|
||||||
|
const clock = document.getElementById(this.id);
|
||||||
|
//console.log(this);
|
||||||
|
clock.innerHTML = this.formatDigits(date.getHours()) + ':' + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
|
||||||
|
};
|
||||||
|
|
||||||
|
Clock.prototype.formatDigits = function (val) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
if (val < 10) val = '0' + 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;
|
||||||
|
var g = G;
|
||||||
|
var w = W;
|
||||||
|
var p = (w / g) * 100;
|
||||||
|
var newW = s * (p / 100);
|
||||||
|
|
||||||
|
return newW;
|
||||||
|
}
|
||||||
|
|
||||||
|
//String Element erweitern
|
||||||
|
String.prototype.transform = function () {
|
||||||
|
return parseFloat(this.replace(',', '.'));
|
||||||
|
}
|
||||||
|
//Array Element erweitern
|
||||||
|
Array.prototype.arrayAdd = function () {
|
||||||
|
return eval(this.join('+'));
|
||||||
|
}
|
||||||
|
|
||||||
|
//Speicherplatz in Prozent berechnen
|
||||||
|
function percentage(total, gigs, round) {
|
||||||
|
var totalSpace = total;
|
||||||
|
var singleSpace = gigs;
|
||||||
|
var z = round;
|
||||||
|
var p = singleSpace / (totalSpace / 100);
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Speicherplatz in GB berechnen
|
||||||
|
function gigabytes(percent, total, round) {
|
||||||
|
var occupiedPercent = percent;
|
||||||
|
var singleSpace = total;
|
||||||
|
var z = round;
|
||||||
|
var g = (singleSpace / 100) * occupiedPercent;
|
||||||
|
|
||||||
|
return g;
|
||||||
|
}
|
||||||
27
source/code/hippie/globals.js
Normal file
27
source/code/hippie/globals.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
let hippie = {
|
||||||
|
screen: {
|
||||||
|
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||||
|
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||||
|
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||||
|
y: document.documentElement.scrollTop
|
||||||
|
// hippie.screen.y: document.documentElement.scrollTop
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||||
|
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let viewHover = true;
|
||||||
|
let basicEase = 600;
|
||||||
|
|
||||||
|
const flagColors = [
|
||||||
|
'fad803',
|
||||||
|
'f2af13',
|
||||||
|
'd30a51',
|
||||||
|
'8e1f68',
|
||||||
|
'273f8b',
|
||||||
|
'3c579a',
|
||||||
|
'b7e0f0',
|
||||||
|
'6bc7d9',
|
||||||
|
'52bed1'
|
||||||
|
];
|
||||||
310
source/code/intro.js
Normal file
310
source/code/intro.js
Normal file
|
|
@ -0,0 +1,310 @@
|
||||||
|
class Intro {
|
||||||
|
constructor(name) {
|
||||||
|
this.name = name;
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
console.log('%s Init', this.name);
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class UI {
|
||||||
|
constructor() {
|
||||||
|
this.introDelay = 6;
|
||||||
|
this.hintDelay = 1;
|
||||||
|
this.isAgree = false;
|
||||||
|
this.steps = {
|
||||||
|
agreement: {
|
||||||
|
element: document.getElementById('agreement'),
|
||||||
|
msgIn: 'Agreement shown.',
|
||||||
|
msgOut: 'Agreement accepted.',
|
||||||
|
msgNo: 'No agreement today.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.intro = document.getElementById('intro');
|
||||||
|
this.agreement = this.steps.agreement.element;
|
||||||
|
this.hint = {
|
||||||
|
element: document.getElementById('hint'),
|
||||||
|
delay: this.hintDelay * 1000
|
||||||
|
};
|
||||||
|
this.loader = document.getElementById('loader');
|
||||||
|
}
|
||||||
|
|
||||||
|
showIntro() {
|
||||||
|
const el = this.intro;
|
||||||
|
const dy = this.introDelay * 1000;
|
||||||
|
|
||||||
|
document.addEventListener('click', hintHandler, false);
|
||||||
|
document.addEventListener('keydown', hintHandler, false);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (el) {
|
||||||
|
console.info("Intro begin.");
|
||||||
|
|
||||||
|
el.classList.replace('op_hide', 'op_show');
|
||||||
|
setTimeout(
|
||||||
|
() => {
|
||||||
|
el.classList.replace('op_show', 'op_hide');
|
||||||
|
el.addEventListener('transitionend', () => {
|
||||||
|
console.info("Intro fin.");
|
||||||
|
|
||||||
|
el.classList.add('di_none');
|
||||||
|
resolve("Intro fin.");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dy
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
reject('No intro available.');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
showHint() {
|
||||||
|
if (typeof this.hint.timeoutId === 'number') {
|
||||||
|
this.cancelHint();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hint.element.classList.remove('di_none');
|
||||||
|
|
||||||
|
this.hint.timeoutId = setTimeout(
|
||||||
|
() => {
|
||||||
|
this.dismissHint();
|
||||||
|
},
|
||||||
|
this.hint.delay
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
dismissHint() {
|
||||||
|
this.hint.element.classList.add('di_none');
|
||||||
|
this.hint.timeoutId = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelHint() {
|
||||||
|
clearTimeout(this.hint.timeoutId);
|
||||||
|
}
|
||||||
|
|
||||||
|
showIdle() {
|
||||||
|
const el = document.getElementById('idle');
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (el) {
|
||||||
|
console.info('Idle.');
|
||||||
|
|
||||||
|
el.classList.replace('op_hide', 'op_show');
|
||||||
|
resolve('Idle.');
|
||||||
|
} else {
|
||||||
|
reject();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
console.log('Init');
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
console.log('Init');
|
||||||
|
|
||||||
|
// Set all steps to not receive pointer events
|
||||||
|
document.querySelectorAll('.step').forEach(element => {
|
||||||
|
console.log(element);
|
||||||
|
|
||||||
|
element.style.pointerEvents = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showIntro() {
|
||||||
|
const el = intro;
|
||||||
|
const dy = introDelay * 1000;
|
||||||
|
|
||||||
|
document.addEventListener('click', hintHandler, false);
|
||||||
|
document.addEventListener('keydown', hintHandler, false);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (el) {
|
||||||
|
console.info("Intro begin.");
|
||||||
|
|
||||||
|
el.classList.replace('op_hide', 'op_show');
|
||||||
|
setTimeout(
|
||||||
|
() => {
|
||||||
|
el.classList.replace('op_show', 'op_hide');
|
||||||
|
el.addEventListener('transitionend', () => {
|
||||||
|
console.info("Intro fin.");
|
||||||
|
|
||||||
|
el.classList.add('di_none');
|
||||||
|
|
||||||
|
resolve("Intro fin.");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dy
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
document.removeEventListener('click', hintHandler);
|
||||||
|
document.removeEventListener('keydown', hintHandler);
|
||||||
|
|
||||||
|
reject('No intro available.');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function showAgreement() {
|
||||||
|
document.removeEventListener('click', hintHandler);
|
||||||
|
document.removeEventListener('keydown', hintHandler);
|
||||||
|
const el = agreement;
|
||||||
|
const dy = introDelay * 1000;
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (el) {
|
||||||
|
console.info(steps.agreement.msgIn);
|
||||||
|
|
||||||
|
el.classList.replace('op_hide', 'op_show');
|
||||||
|
el.style.pointerEvents = '';
|
||||||
|
|
||||||
|
el.addEventListener('click', agreeHandler);
|
||||||
|
document.addEventListener('keydown', agreeHandler);
|
||||||
|
} else {
|
||||||
|
reject(steps.agreement.msgNo);
|
||||||
|
}
|
||||||
|
|
||||||
|
function agreeHandler() {
|
||||||
|
const el = agreement;
|
||||||
|
|
||||||
|
isAgree = true;
|
||||||
|
|
||||||
|
el.classList.replace('op_show', 'op_hide');
|
||||||
|
el.addEventListener('transitionend', function endListener() {
|
||||||
|
console.info(steps.agreement.msgOut);
|
||||||
|
|
||||||
|
el.removeEventListener('transitionend', endListener);
|
||||||
|
el.removeEventListener('click', agreeHandler);
|
||||||
|
document.removeEventListener('keydown', agreeHandler);
|
||||||
|
el.classList.add('di_none');
|
||||||
|
|
||||||
|
resolve(steps.agreement.msgOut);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function showIdle() {
|
||||||
|
const el = document.getElementById('idle');
|
||||||
|
|
||||||
|
document.addEventListener('mouseleave', idleStart, false);
|
||||||
|
document.addEventListener('mouseenter', idleStop, false);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (el) {
|
||||||
|
console.info('Idle.');
|
||||||
|
|
||||||
|
el.classList.replace('op_hide', 'op_show');
|
||||||
|
el.style.pointerEvents = '';
|
||||||
|
el.addEventListener('click', idleStart, false);
|
||||||
|
|
||||||
|
resolve('Idle.');
|
||||||
|
} else {
|
||||||
|
document.removeEventListener('mouseleave', idleStart);
|
||||||
|
document.removeEventListener('mouseenter', idleStop);
|
||||||
|
|
||||||
|
reject();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadCore() {
|
||||||
|
const el = loader;
|
||||||
|
const bar = loader.querySelector('#progress');
|
||||||
|
const status = loader.querySelector('#status');
|
||||||
|
const spinner = loader.querySelector('#spinner');
|
||||||
|
const sp = spinner.querySelector('span');
|
||||||
|
|
||||||
|
let progress = 0;
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
console.info("Core loading.");
|
||||||
|
|
||||||
|
updateProgressBar();
|
||||||
|
|
||||||
|
function updateProgressBar() {
|
||||||
|
const maxChunk = 33;
|
||||||
|
const time = 400;
|
||||||
|
let increment = randomIntFrom(1, maxChunk);
|
||||||
|
|
||||||
|
progress += increment;
|
||||||
|
|
||||||
|
if (progress >= 100) progress = 100;
|
||||||
|
// console.log(progress);
|
||||||
|
|
||||||
|
bar.style.width = progress + '%';
|
||||||
|
status.textContent = progress + '%';
|
||||||
|
|
||||||
|
if (progress < 100) {
|
||||||
|
setTimeout(updateProgressBar, time);
|
||||||
|
} else {
|
||||||
|
bar.style.width = '100%';
|
||||||
|
sp.style.animationPlayState = 'paused';
|
||||||
|
spinner.style.color = 'white';
|
||||||
|
spinner.style.backgroundColor = 'black';
|
||||||
|
el.classList.replace('op_show', 'op_hide');
|
||||||
|
el.addEventListener('transitionend', function endListener() {
|
||||||
|
console.info("Core loaded.");
|
||||||
|
|
||||||
|
el.removeEventListener('transitionend', endListener);
|
||||||
|
el.classList.add('di_none');
|
||||||
|
|
||||||
|
resolve("Core loaded.");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
|
||||||
|
*/
|
||||||
|
function hintHandler() {
|
||||||
|
hint.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function idleStart() {
|
||||||
|
idle.cycle();
|
||||||
|
}
|
||||||
|
|
||||||
|
function idleStop() {
|
||||||
|
idle.cancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Blendet einen Schritt aus.
|
||||||
|
*
|
||||||
|
* @param {*} e
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function stepHandler(e) {
|
||||||
|
const el = e.target;
|
||||||
|
const msg = steps[el.id].msgOut;
|
||||||
|
|
||||||
|
return new Promise(function (resolve) {
|
||||||
|
el.classList.replace('op_show', 'op_hide');
|
||||||
|
el.addEventListener('transitionend', function endListener() {
|
||||||
|
console.info(msg);
|
||||||
|
|
||||||
|
el.removeEventListener('transitionend', endListener);
|
||||||
|
|
||||||
|
resolve(msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
201
source/code/windows.js
Normal file
201
source/code/windows.js
Normal file
|
|
@ -0,0 +1,201 @@
|
||||||
|
class HippieTaskBar {
|
||||||
|
constructor(element, placeholder, options) {
|
||||||
|
this.element = element;
|
||||||
|
this.placeholder = placeholder;
|
||||||
|
this.date = null;
|
||||||
|
this.isDragging = false;
|
||||||
|
this.barSize = '';
|
||||||
|
// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
|
||||||
|
this.options = options || {
|
||||||
|
direction: 0,
|
||||||
|
position: 'bottom',
|
||||||
|
date: {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Ereignisse besser delegieren
|
||||||
|
init() {
|
||||||
|
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
|
||||||
|
document.addEventListener('mousemove', this.onMouseMove.bind(this));
|
||||||
|
document.addEventListener('mouseup', this.onMouseUp.bind(this));
|
||||||
|
|
||||||
|
const dateElement = document.createElement('span');
|
||||||
|
|
||||||
|
dateElement.id = 'date';
|
||||||
|
this.element.querySelector('.clock').appendChild(dateElement);
|
||||||
|
this.date = new DateDisplay(dateElement, this.options.date);
|
||||||
|
|
||||||
|
this.setOptions(this.options.position);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseDown(event) {
|
||||||
|
if (checkButtonAndTarget(event, this.element, 0)) {
|
||||||
|
console.debug('Drag mode enabled');
|
||||||
|
|
||||||
|
this.isDragging = true;
|
||||||
|
|
||||||
|
this.showPlaceholder();
|
||||||
|
|
||||||
|
centerElementUnderCursor(event, this.placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(event) {
|
||||||
|
if (this.isDragging) {
|
||||||
|
this.options.position = getClosestEdgeToMouse(event);
|
||||||
|
const borderRadius = '4px';
|
||||||
|
const attributes = {
|
||||||
|
top: {
|
||||||
|
className: 'top',
|
||||||
|
styles: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
borderStyle: '',
|
||||||
|
borderColor: '',
|
||||||
|
borderTopStyle: 'solid',
|
||||||
|
borderTopColor: 'white',
|
||||||
|
borderTopRightRadius: '',
|
||||||
|
borderBottomRightRadius: borderRadius,
|
||||||
|
borderBottomLeftRadius: borderRadius,
|
||||||
|
borderTopLeftRadius: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
className: 'right',
|
||||||
|
styles: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
borderStyle: '',
|
||||||
|
borderColor: '',
|
||||||
|
borderRightStyle: 'solid',
|
||||||
|
borderRightColor: 'white',
|
||||||
|
borderTopRightRadius: '',
|
||||||
|
borderBottomRightRadius: '',
|
||||||
|
borderBottomLeftRadius: borderRadius,
|
||||||
|
borderTopLeftRadius: borderRadius
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bottom: {
|
||||||
|
className: 'bottom',
|
||||||
|
styles: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
borderStyle: '',
|
||||||
|
borderColor: '',
|
||||||
|
borderBottomStyle: 'solid',
|
||||||
|
borderBottomColor: 'white',
|
||||||
|
borderTopRightRadius: borderRadius,
|
||||||
|
borderBottomRightRadius: '',
|
||||||
|
borderBottomLeftRadius: '',
|
||||||
|
borderTopLeftRadius: borderRadius
|
||||||
|
}
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
className: 'left',
|
||||||
|
styles: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
borderStyle: '',
|
||||||
|
borderColor: '',
|
||||||
|
borderLeftStyle: 'solid',
|
||||||
|
borderLeftColor: 'white',
|
||||||
|
borderTopRightRadius: borderRadius,
|
||||||
|
borderBottomRightRadius: borderRadius,
|
||||||
|
borderBottomLeftRadius: '',
|
||||||
|
borderTopLeftRadius: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
|
||||||
|
centerElementUnderCursor(event, this.placeholder);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseUp() {
|
||||||
|
if (event.target === this.placeholder) {
|
||||||
|
console.debug('Drag mode disabled');
|
||||||
|
|
||||||
|
this.isDragging = false;
|
||||||
|
|
||||||
|
this.snapToEdges();
|
||||||
|
this.hidePlaceholder();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showPlaceholder() {
|
||||||
|
this.element.style.display = 'none';
|
||||||
|
this.placeholder.style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
hidePlaceholder() {
|
||||||
|
this.placeholder.style.display = 'none';
|
||||||
|
this.element.style.display = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
snapToEdges() {
|
||||||
|
this.setOptions(this.options.position);
|
||||||
|
this.date.changeFormat(this.options.date, this.options.direction);
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(position) {
|
||||||
|
const attributes = {
|
||||||
|
top: {
|
||||||
|
className: 'top',
|
||||||
|
styles: {
|
||||||
|
top: '0', right: '0', bottom: '', left: '0',
|
||||||
|
width: '', height: this.barSize,
|
||||||
|
flexDirection: 'row'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
className: 'right',
|
||||||
|
styles: {
|
||||||
|
top: '0', right: '0', bottom: '0', left: '',
|
||||||
|
width: this.barSize, height: '',
|
||||||
|
flexDirection: 'column'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bottom: {
|
||||||
|
className: 'bottom',
|
||||||
|
styles: {
|
||||||
|
top: '', right: '0', bottom: '0', left: '0',
|
||||||
|
width: '', height: this.barSize,
|
||||||
|
flexDirection: 'row'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
className: 'left',
|
||||||
|
styles: {
|
||||||
|
top: '0',
|
||||||
|
right: '',
|
||||||
|
bottom: '0',
|
||||||
|
left: '0',
|
||||||
|
width: this.barSize,
|
||||||
|
height: '',
|
||||||
|
flexDirection: 'column'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setAttributesAccordingToPosition(this.element, position, attributes);
|
||||||
|
|
||||||
|
switch (position) {
|
||||||
|
case 'right':
|
||||||
|
case 'left':
|
||||||
|
this.options.date = {year: '2-digit', month: '2-digit', day: '2-digit'};
|
||||||
|
this.options.direction = 1;
|
||||||
|
break;
|
||||||
|
case 'top':
|
||||||
|
case 'bottom':
|
||||||
|
default:
|
||||||
|
this.options.date = {year: 'numeric', month: '2-digit', day: '2-digit'};
|
||||||
|
this.options.direction = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
source/data/start.json
Normal file
14
source/data/start.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "Index",
|
||||||
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Basics",
|
||||||
|
"href": "/demo/basics.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Drag",
|
||||||
|
"href": "/demo/examples/ui/drag.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
974
source/screens/demo/basics.liquid
Normal file
974
source/screens/demo/basics.liquid
Normal file
|
|
@ -0,0 +1,974 @@
|
||||||
|
---
|
||||||
|
title: Basics
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% layout 'hippie/page.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}Grundlagen{% endblock %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
<div class="demo__intro">
|
||||||
|
Dies ist einfach nur Text.<br>Weniger wäre nichts, denn dieser Text ist nicht durch ein spezifisches Element
|
||||||
|
umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung
|
||||||
|
verwendet.<br><br>
|
||||||
|
<article>
|
||||||
|
<p>Es wirken nur die Eigenschaften des
|
||||||
|
<code><body></code>
|
||||||
|
Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor.
|
||||||
|
Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in
|
||||||
|
Abschnitte.</p>
|
||||||
|
<h1 id="sections">Bereiche</h1>
|
||||||
|
<section>
|
||||||
|
<p>Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
|
||||||
|
<code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne
|
||||||
|
jegliche Gestaltung aus.</p>
|
||||||
|
<p>Noch allgemeiner ist das
|
||||||
|
<code><section></code>
|
||||||
|
Element. Es schafft Bereiche, um Inhalte zu strukturieren.</p>
|
||||||
|
<p>Bestimmte Bereiche haben einen vorgegebenen Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
|
||||||
|
</section>
|
||||||
|
<!-- <div class="overflow"> -->
|
||||||
|
<aside class="left">
|
||||||
|
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit
|
||||||
|
<code><aside></code>
|
||||||
|
markiert.</p>
|
||||||
|
</aside>
|
||||||
|
<section class="bside">
|
||||||
|
<header>
|
||||||
|
<p>Um einleitenden Inhalt festzuhalten, wird das
|
||||||
|
<code><header></code>
|
||||||
|
Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den
|
||||||
|
nächsten, umgebenden Abschnitt.</p>
|
||||||
|
<nav>
|
||||||
|
<p>Das Element
|
||||||
|
<code><nav></code>
|
||||||
|
umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<footer>
|
||||||
|
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird
|
||||||
|
<code><footer></code>
|
||||||
|
eingesetzt.</p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<!-- </div> -->
|
||||||
|
<p>Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden
|
||||||
|
nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das
|
||||||
|
kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.</p>
|
||||||
|
<h1>Überschrift 1</h1>
|
||||||
|
<p>Eine Überschrift erster Ordnung
|
||||||
|
<code><h1></code>
|
||||||
|
ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl
|
||||||
|
inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.</p>
|
||||||
|
<h2>Überschrift 2</h2>
|
||||||
|
<p>Die weiteren Überschriften
|
||||||
|
<code><h2></code>
|
||||||
|
bis
|
||||||
|
<code><h6></code>
|
||||||
|
gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
|
||||||
|
<h3>Überschrift 3 ist in Großbuchstaben gesetzt</h3>
|
||||||
|
<h4>Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3</h4>
|
||||||
|
<h5>Überschrift 5 ist Überschrift 5</h5>
|
||||||
|
<hgroup>
|
||||||
|
<h6>Überschrift 6</h6>
|
||||||
|
<p>Überschriften können mit dem Element <code><hgroup></code> mit Absätzen gruppiert werden, um
|
||||||
|
beispielsweise Untertitel abzubilden.</p>
|
||||||
|
</hgroup>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="grouping">Gruppierung</h1>
|
||||||
|
<p>Ein Absatz
|
||||||
|
<code><p></code>. Zugegeben ein kurzer.</p>
|
||||||
|
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder
|
||||||
|
unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit
|
||||||
|
<code><br></code>
|
||||||
|
erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</p>
|
||||||
|
<p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu
|
||||||
|
verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer
|
||||||
|
serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen
|
||||||
|
ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
|
||||||
|
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">p.txt_center</code>
|
||||||
|
</div>
|
||||||
|
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">p.txt_right</code>
|
||||||
|
</div>
|
||||||
|
<address>Das Element
|
||||||
|
<code><address></code>
|
||||||
|
hat den Zweck, Kontaktinformationen bereitzustellen. Diese werden, je nach Position des Elements im
|
||||||
|
Kontext der gesamten Seite, anders gewertet.
|
||||||
|
</address>
|
||||||
|
<p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte
|
||||||
|
<code><hr></code>
|
||||||
|
Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des
|
||||||
|
Elements. Eine Linie ist schwarz und durchgezogen.</p>
|
||||||
|
<hr/>
|
||||||
|
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
|
||||||
|
<hr class="hidden js_pop"/>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">hr.hidden</code>
|
||||||
|
</div>
|
||||||
|
<p>Die Linie darf auch gepunktet sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert
|
||||||
|
der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
|
||||||
|
<hr class="dotted js_pop"/>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">hr.dotted</code>
|
||||||
|
</div>
|
||||||
|
<hr class="space_even_half js_pop"/>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">hr.space_even_half</code>
|
||||||
|
</div>
|
||||||
|
<hr class="dotted space_even_fourth js_pop"/>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">hr.dotted.space_even_fourth</code>
|
||||||
|
</div>
|
||||||
|
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu.
|
||||||
|
Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine
|
||||||
|
breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilenanfang zu finden. Die
|
||||||
|
vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung
|
||||||
|
viele Formen annehmen.</p>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">p.column_2</code>
|
||||||
|
</div>
|
||||||
|
<p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu füllen. Dann erst wird die Trennung
|
||||||
|
der Spalten durch eine Linie sichtbar.</p>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">p.column_3.column_line</code>
|
||||||
|
</div>
|
||||||
|
<p class="column_3 column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird
|
||||||
|
dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon
|
||||||
|
gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu
|
||||||
|
trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.<br>Auch
|
||||||
|
das zeigen diese beiden Absätze ganz gut.</p>
|
||||||
|
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen
|
||||||
|
<code><pre></code>.</p>
|
||||||
|
<pre>dadurch<br> bleiben<br> einrückungen<br> durch<br> tabulatoren<br> erhalten.</pre>
|
||||||
|
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat
|
||||||
|
<code><blockquote></code>
|
||||||
|
zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
|
||||||
|
<blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
|
||||||
|
<p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen,
|
||||||
|
vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text
|
||||||
|
oder ein Hinweis auf eine bestimmte Textstelle.</p>
|
||||||
|
<p class="quote_source">
|
||||||
|
<a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">blockquote>p+p.quote_source</code>
|
||||||
|
</div>
|
||||||
|
<p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die
|
||||||
|
Formatierung automatisch ergänzt werden.</p>
|
||||||
|
<blockquote class="quote_mark js_pop" cite="">
|
||||||
|
<p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
|
||||||
|
<p class="quote_source">o. V.</p>
|
||||||
|
</blockquote>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">blockquote.quote_mark>p+p.quote_source</code>
|
||||||
|
</div>
|
||||||
|
<h2>Listen</h2>
|
||||||
|
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete
|
||||||
|
<code><ul></code>
|
||||||
|
und geordnete Listen
|
||||||
|
<code><ol></code>
|
||||||
|
sowie Beschreibungslisten
|
||||||
|
<code><dl></code>. Die beiden ersten Varianten beinhalten das Listenelement
|
||||||
|
<code><li></code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck
|
||||||
|
<code><dt></code>
|
||||||
|
und Beschreibung
|
||||||
|
<code><dd></code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Ungeordnete</li>
|
||||||
|
<li>Listen</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list_dash">
|
||||||
|
<li>Verschiedener</li>
|
||||||
|
<li>Art</li>
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Geordnete</li>
|
||||||
|
<li>Liste</li>
|
||||||
|
</ol>
|
||||||
|
<dl>
|
||||||
|
<dt>Beschreibungsliste</dt>
|
||||||
|
<dd>Auch Definitionslisten genannt</dd>
|
||||||
|
<dt>Ausdruck</dt>
|
||||||
|
<dd>Beschreibung</dd>
|
||||||
|
</dl>
|
||||||
|
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden
|
||||||
|
sie mit
|
||||||
|
<code><figure></code>
|
||||||
|
umschlossen und tragen eine Bezeichnung, welche mit
|
||||||
|
<code><figcaption></code>
|
||||||
|
ausgezeichnet wird.</p>
|
||||||
|
<figure class="js_pop">
|
||||||
|
<figcaption>Fahne</figcaption>
|
||||||
|
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||||
|
<desc>Flag</desc>
|
||||||
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||||
|
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
|
||||||
|
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
|
||||||
|
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
|
||||||
|
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
|
||||||
|
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
|
||||||
|
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
|
||||||
|
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
|
||||||
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
||||||
|
</svg>
|
||||||
|
</figure>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">figure>figcaption+{element}</code>
|
||||||
|
</div>
|
||||||
|
<hr class="hidden">
|
||||||
|
<p>Eine sehr klar definierte Gruppierung stellt das Element
|
||||||
|
<code><main></code>
|
||||||
|
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||||
|
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
|
||||||
|
<code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die
|
||||||
|
Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
||||||
|
<div class="div_info js_pop">
|
||||||
|
<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese
|
||||||
|
hervorgehobene Information zeigt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">div.div_info>p</code>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="textlevel">Textebene</h1>
|
||||||
|
<h2>Verweise</h2>
|
||||||
|
<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
|
||||||
|
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
|
||||||
|
und externen Verweisen unterschieden werden.
|
||||||
|
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
||||||
|
<span class="exp_pop">
|
||||||
|
<code class="code_solo">a.a_line</code>
|
||||||
|
</span>
|
||||||
|
können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren.
|
||||||
|
<a class="a_external" href="https://de.wikipedia.org">Externe Verweise</a>
|
||||||
|
verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail-Adressen oder
|
||||||
|
Dateien zeigen. Theoretisch kann solch ein Verweis
|
||||||
|
<b>alles</b>
|
||||||
|
auslösen. Anweisungen werden im
|
||||||
|
<a href="https://tools.ietf.org/html/rfc1738">URL-Standard</a>
|
||||||
|
übergeben.</p>
|
||||||
|
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden.
|
||||||
|
Abhängig von ihrer Funktion und ihrem Zweck werden Verweise unterschiedlich formatiert.
|
||||||
|
<a class="a_internal" href="#">Farbige</a>
|
||||||
|
oder
|
||||||
|
<a class="a_line" href="#">unterstrichene Varianten</a>
|
||||||
|
sind einfache Beispiele.</p>
|
||||||
|
<p>Wird der Verweis innerhalb eines
|
||||||
|
<code><nav></code>
|
||||||
|
Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes
|
||||||
|
oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a class="a_button_text" href="#textlevel">↥</a>
|
||||||
|
(Zum Anfang des Abschnitts springen)
|
||||||
|
<a class="a_button_text" href="#">⇫</a>
|
||||||
|
(Zum Anfang der Seite springen)</p>
|
||||||
|
</nav>
|
||||||
|
<nav class="nav_center_old">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/demo/examples/start.html" class="a_button">Startseite</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button a_internal">Hilfe</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">⌨</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">⋯</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2>Formatierungen</h2>
|
||||||
|
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
|
||||||
|
<p>Sie können
|
||||||
|
<b>fett</b>
|
||||||
|
<code><b></code>
|
||||||
|
oder
|
||||||
|
<i>kursiv</i>
|
||||||
|
<code><i></code>
|
||||||
|
geschrieben sein.
|
||||||
|
<b>
|
||||||
|
<i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders
|
||||||
|
<strong>aussehen</strong>, sondern auch
|
||||||
|
<em>eine besondere inhaltliche Bedeutung</em>
|
||||||
|
bekommen, werden sie mit
|
||||||
|
<code><strong></code>
|
||||||
|
und
|
||||||
|
<code><em></code>
|
||||||
|
ausgezeichnet.</p>
|
||||||
|
<p>Das
|
||||||
|
<code><u></code>
|
||||||
|
Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten,
|
||||||
|
nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie
|
||||||
|
<u>Interaktionsweise</u>, oder die Beschriftung des Textes als
|
||||||
|
<u>flasch</u>
|
||||||
|
(falsch) geschrieben.</p>
|
||||||
|
<p>Ähnlich ist es mit dem Element
|
||||||
|
<code><small></code>.
|
||||||
|
<small>Es steht für Randnotizen, wird aber häufig auch kleiner dargestellt.</small>
|
||||||
|
</p>
|
||||||
|
<p>Ist ein Text nicht mehr korrekt oder relevant kann er mit
|
||||||
|
<code><s></code>
|
||||||
|
markiert werden:<br>
|
||||||
|
<s>Die Erde ist eine Scheibe.</s>
|
||||||
|
</p>
|
||||||
|
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. So was kann mit
|
||||||
|
<code><cite></code>
|
||||||
|
ausgezeichnet werden.
|
||||||
|
<cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
|
||||||
|
<p>Um ein Zitat direkt im Text zu verwenden benutzt man das
|
||||||
|
<code><q></code>
|
||||||
|
Element. Es platziert Anführungszeichen um die Aussage:</p>
|
||||||
|
<p>Sie sagte:
|
||||||
|
<q>Du wolltest staubsaugen!</q><br>Er sagte:
|
||||||
|
<q>Mach' ich morgen.</q>
|
||||||
|
</p>
|
||||||
|
<p>Mit dem
|
||||||
|
<code><dfn></code>
|
||||||
|
Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
|
||||||
|
<code><abbr></code>
|
||||||
|
gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
|
||||||
|
<code>title</code>
|
||||||
|
stehen. Dies ist ein globales Attribut, das erklärende Informationen zu dem Element enthält. Diese wird
|
||||||
|
typischerweise beim darauf Zeigen eingeblendet.</p>
|
||||||
|
<p>
|
||||||
|
<dfn>
|
||||||
|
<abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr>
|
||||||
|
</dfn>
|
||||||
|
is a recursive acronym for
|
||||||
|
<dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||||
|
<p>Die besondere Auszeichnung
|
||||||
|
<code><ruby></code>
|
||||||
|
<q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text
|
||||||
|
zusammen mit seiner Anmerkung in einer Zeile erscheint.</q>
|
||||||
|
Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
||||||
|
<dl>
|
||||||
|
<dt>
|
||||||
|
<code><rb></code>
|
||||||
|
</dt>
|
||||||
|
<dd>Basis Textkomponente</dd>
|
||||||
|
<dt>
|
||||||
|
<code><rt></code>
|
||||||
|
</dt>
|
||||||
|
<dd>Annotation</dd>
|
||||||
|
<dt>
|
||||||
|
<code><rtc></code>
|
||||||
|
</dt>
|
||||||
|
<dd>Einzelne Komponente einer Annotation</dd>
|
||||||
|
<dt>
|
||||||
|
<code><rp></code>
|
||||||
|
</dt>
|
||||||
|
<dd>Alternative bei fehlender Unterstützung</dd>
|
||||||
|
</dl>
|
||||||
|
<hr class="dotted space_even_half">
|
||||||
|
<div class="txt_center">
|
||||||
|
<ruby class="space_right_small">
|
||||||
|
<rb>Basis</rb>
|
||||||
|
<rt>Auszeichnung</rt>
|
||||||
|
</ruby>
|
||||||
|
<ruby class="space_right_small">
|
||||||
|
<rb>今日</rb>
|
||||||
|
<rt>きょう</rt>
|
||||||
|
</ruby>
|
||||||
|
<ruby>
|
||||||
|
♥
|
||||||
|
<rp>:
|
||||||
|
</rp>
|
||||||
|
<rt>Herz</rt>
|
||||||
|
<rp>,
|
||||||
|
</rp>
|
||||||
|
<rtc>
|
||||||
|
<rt lang="fr">Cœur</rt>
|
||||||
|
</rtc>
|
||||||
|
<rp>.</rp>
|
||||||
|
☘
|
||||||
|
<rp>:
|
||||||
|
</rp>
|
||||||
|
<rt>Kleeblatt</rt>
|
||||||
|
<rp>,
|
||||||
|
</rp>
|
||||||
|
<rtc>
|
||||||
|
<rt lang="fr">Trèfle</rt>
|
||||||
|
</rtc>
|
||||||
|
<rp>.</rp>
|
||||||
|
✶
|
||||||
|
<rp>:
|
||||||
|
</rp>
|
||||||
|
<rt>Stern</rt>
|
||||||
|
<rp>,
|
||||||
|
</rp>
|
||||||
|
<rtc>
|
||||||
|
<rt lang="fr">Étoile</rt>
|
||||||
|
</rtc>
|
||||||
|
<rp>.</rp>
|
||||||
|
</ruby>
|
||||||
|
</div>
|
||||||
|
<hr class="dotted space_even_half">
|
||||||
|
<p>Wikipedia erklärt dies ausführlicher unter
|
||||||
|
<a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
||||||
|
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird
|
||||||
|
unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die
|
||||||
|
Elemente
|
||||||
|
<code><data></code>
|
||||||
|
und
|
||||||
|
<code><time></code>
|
||||||
|
enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||||
|
<dl>
|
||||||
|
<dt>
|
||||||
|
<data value="0">0</data>
|
||||||
|
≠
|
||||||
|
<data value="">NULL</data>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<code><data>0</data> ≠ <data>NULL</data></code>
|
||||||
|
</dd>
|
||||||
|
<dt>Der Wert
|
||||||
|
<data value="NULL">NULL</data>
|
||||||
|
mit Attribut
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<code><data value="NULL">NULL</data></code>
|
||||||
|
</dd>
|
||||||
|
<dt>
|
||||||
|
<time>2018-10-08</time>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<code><time>2018-10-08</time></code>
|
||||||
|
</dd>
|
||||||
|
<dt>Die Zeitangabe
|
||||||
|
<i>
|
||||||
|
<time datetime="2018-10-08">Gestern</time>
|
||||||
|
</i>
|
||||||
|
mit Attribut
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<code><time datetime="2018-10-08">Gestern</time></code>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<p>Die Auszeichnung
|
||||||
|
<code><code></code>
|
||||||
|
wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von
|
||||||
|
Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem
|
||||||
|
Element markiert.</p>
|
||||||
|
<p>Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element
|
||||||
|
<code><pre></code>
|
||||||
|
verwendet:</p>
|
||||||
|
<pre class="pre_code"><code><html><br> <head><br> <title>hyper text markup language</title><br> </head><br> <body id="root"><br> <!-- content goes here --><br> <p class="example">just like this.</p><br> </body><br></html></code></pre>
|
||||||
|
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
|
||||||
|
<p>
|
||||||
|
<code>var def = "Definition einer Variablen";</code>
|
||||||
|
</p>
|
||||||
|
<p>In diesem Beispiel wird die Variable
|
||||||
|
<var>def</var>
|
||||||
|
definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
|
||||||
|
<code><var></code>
|
||||||
|
ausgezeichnet werden.</p>
|
||||||
|
<p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das
|
||||||
|
<code><samp></code>
|
||||||
|
Element verwendet. Der Computer hat gesagt:
|
||||||
|
<samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
|
||||||
|
<p>Benutzereingaben haben ebenfalls ein eigenes Element
|
||||||
|
<code><kbd></code>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel
|
||||||
|
<q>Drücken Sie gleichzeitig <kbd>Strg</kbd> und <kbd>A</kbd></q>, gekennzeichnet.</p>
|
||||||
|
<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente
|
||||||
|
<code><sup></code>
|
||||||
|
und
|
||||||
|
<code><sub></code>
|
||||||
|
repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen, sondern werden für ihren
|
||||||
|
jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
|
||||||
|
<p>Beispielsweise die Formel
|
||||||
|
<var>E</var>=<var>m</var>
|
||||||
|
<var>c</var>
|
||||||
|
<sup>2</sup>
|
||||||
|
oder das Element H<sub>2</sub>O</p>
|
||||||
|
<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
|
||||||
|
Dies stellt sich wie folgt dar:</p>
|
||||||
|
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
|
||||||
|
<p>Eine Markierung kann, mittels
|
||||||
|
<code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
|
||||||
|
<mark>Diese Worte sind markiert.</mark>
|
||||||
|
</p>
|
||||||
|
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen
|
||||||
|
<bdi>كائن بشري</bdi>
|
||||||
|
, die auch rechtsbündig geschrieben sein können, wird das
|
||||||
|
<code><bdi></code>
|
||||||
|
Element eingesetzt.<br>Die Schreibweise kann auch vom Author vorgegeben und expliziert geändert werden.
|
||||||
|
Dies wird dem
|
||||||
|
<code><bdo></code>
|
||||||
|
Element umgesetzt. Die Richtung wird dann mit dem Attribut
|
||||||
|
<code>dir</code>
|
||||||
|
angegeben.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<bdo dir="rtl">كائن بشري</bdo>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<bdo dir="rtl">إنسان آلي</bdo>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist
|
||||||
|
das
|
||||||
|
<code><span></code>
|
||||||
|
Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen
|
||||||
|
haben und eben keine inhaltlichen. Mit den Attributen
|
||||||
|
<code>id</code>
|
||||||
|
oder
|
||||||
|
<code>class</code>
|
||||||
|
werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen
|
||||||
|
Elementen ist ein Grundprinzip der Auszeichnungssprache
|
||||||
|
<abbr title="Hypertext Markup Language">HTML</abbr>.</p>
|
||||||
|
<p>Mit der Einführung von Absätzen wurde auch schon das
|
||||||
|
<code><br></code>
|
||||||
|
Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer
|
||||||
|
Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes
|
||||||
|
den Text umzubrechen.</p>
|
||||||
|
<p>Eine besondere Form des Zeilenumbruchs kann mit
|
||||||
|
<code><wbr></code>
|
||||||
|
eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines
|
||||||
|
HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen, falls ein Wort
|
||||||
|
zu lang für eine Textzeile sein sollte.</p>
|
||||||
|
<p>Und der Löwe brüllte "RRRR
|
||||||
|
<wbr>
|
||||||
|
rrrr
|
||||||
|
<wbr>
|
||||||
|
oooooooo
|
||||||
|
<wbr>
|
||||||
|
aaaa
|
||||||
|
<wbr>
|
||||||
|
AAAAAAAA
|
||||||
|
<wbr>
|
||||||
|
HHHH
|
||||||
|
<wbr>
|
||||||
|
hhhh
|
||||||
|
<wbr>
|
||||||
|
rrrrrrrrr"!
|
||||||
|
</p>
|
||||||
|
<p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
|
||||||
|
<h2>Änderungen</h2>
|
||||||
|
<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser
|
||||||
|
nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
|
||||||
|
<aside>
|
||||||
|
<ins>Dies ist auch wichtig.</ins>
|
||||||
|
</aside>
|
||||||
|
<p>Der Inhalt wird dann mit
|
||||||
|
<code><ins></code>
|
||||||
|
ausgezeichnet. Wird Text entfernt, kommt
|
||||||
|
<code><del></code>
|
||||||
|
zum Einsatz.</p>
|
||||||
|
<h6>Zu Tun</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Fahrrad reparieren</li>
|
||||||
|
<li>
|
||||||
|
<del>Staubsaugen</del>
|
||||||
|
</li>
|
||||||
|
<li>Tisch bauen</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="embedded">Eingebundene Inhalte</h1>
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
||||||
|
<p>Dies ist ein Bild. Es wird mit dem Element
|
||||||
|
<code><img></code>
|
||||||
|
eingebunden. Solch ein Bild hat üblicherweise die Attribute
|
||||||
|
<code>width</code>
|
||||||
|
und
|
||||||
|
<code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer
|
||||||
|
das Attribut
|
||||||
|
<code>alt</code>
|
||||||
|
für eine alternative Beschreibung in Textform verwendet werden.</p>
|
||||||
|
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
|
||||||
|
<code>src</code>
|
||||||
|
angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel
|
||||||
|
können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür
|
||||||
|
können dann die Elemente
|
||||||
|
<code><source></code>
|
||||||
|
und
|
||||||
|
<code><picture></code>
|
||||||
|
in Kombination verwendet werden.</p>
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1>Tabellen</h1>
|
||||||
|
<p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt.
|
||||||
|
Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im Folgenden
|
||||||
|
aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem
|
||||||
|
Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
|
||||||
|
<table class="width_full js_pop">
|
||||||
|
<tr>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td>einfache</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Tabelle</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code>
|
||||||
|
</div>
|
||||||
|
<div class="overflow">
|
||||||
|
<table class="float_space_left js_pop">
|
||||||
|
<tr>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td>freie (nicht fixierte)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Tabelle</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
|
||||||
|
</div>
|
||||||
|
<table class="blank float_space_left js_pop">
|
||||||
|
<tr>
|
||||||
|
<td>Mit</td>
|
||||||
|
<td>ohne</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Linien</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
|
||||||
|
Zellverteilung:</p>
|
||||||
|
<table class="width_full fix js_pop">
|
||||||
|
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Kopfzeile</th>
|
||||||
|
<th>A</th>
|
||||||
|
<th>B</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
<td colspan="2"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>mit</td>
|
||||||
|
<td>Titel</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td rowspan="2"></td>
|
||||||
|
<td>Kopf-</td>
|
||||||
|
<td>und</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Fußzeile</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Fußzeile</th>
|
||||||
|
<td>A</td>
|
||||||
|
<td>B</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
|
||||||
|
</div>
|
||||||
|
<p>Viele weitere Formate sind möglich.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1>Formulare</h1>
|
||||||
|
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben
|
||||||
|
Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht
|
||||||
|
explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.<br>Üblicherweise stehen alle
|
||||||
|
Bedienelemente innerhalb eines
|
||||||
|
<code><form></code>
|
||||||
|
Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise
|
||||||
|
keine gestalterische Funktion.</p>
|
||||||
|
<p>Grundlegend ist das Element
|
||||||
|
<code><input></code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert,
|
||||||
|
nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
|
||||||
|
<p><input value="Undefiniert"/><input class="input_io" value="Undefiniert mit Stil"/></p>
|
||||||
|
<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
|
||||||
|
<code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element
|
||||||
|
<code><button></code>
|
||||||
|
dafür.</p>
|
||||||
|
<p><input type="button" value="Input Button">
|
||||||
|
<button>Button</button>
|
||||||
|
</p>
|
||||||
|
<p><input class="button_io" type="button" value="Input Button">
|
||||||
|
<button class="button_io">Button</button>
|
||||||
|
</p>
|
||||||
|
<p>Interaktive Elemente können durch das Attribut
|
||||||
|
<code>readonly</code>
|
||||||
|
nur lesbar gemacht werden oder mittels
|
||||||
|
<code>disabled</code>
|
||||||
|
gänzlich deaktiviert werden.</p>
|
||||||
|
{% comment %}// TODO: Abstände, besonders margin generell überarbeiten{% endcomment %}
|
||||||
|
<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text"
|
||||||
|
value="Deaktivierte Eingabe"
|
||||||
|
size="21" disabled="disabled">
|
||||||
|
<button disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||||
|
</p>
|
||||||
|
<p><input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io"
|
||||||
|
type="text"
|
||||||
|
value="Deaktivierte Eingabe"
|
||||||
|
size="21"
|
||||||
|
disabled="disabled">
|
||||||
|
<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||||
|
</p>
|
||||||
|
<p>Das Element
|
||||||
|
<code><label></code>
|
||||||
|
ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente
|
||||||
|
zueinander deutlich ist.</p>
|
||||||
|
<p>
|
||||||
|
<label>Beschriftung:<input type="text"></label>
|
||||||
|
</p>
|
||||||
|
<div class="overflow">
|
||||||
|
<div class="float_left">
|
||||||
|
<table class="fix blank">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label for="demo__raw_a">Alpha:</label>
|
||||||
|
</td>
|
||||||
|
<td><input type="text" id="demo__raw_a"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label for="demo__raw_b">Beta:</label>
|
||||||
|
</td>
|
||||||
|
<td><input type="text" id="demo__raw_b"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<table class="float_right">
|
||||||
|
<tr>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_d"
|
||||||
|
value="11.966504" size="10"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_a">x</label>
|
||||||
|
</td>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
||||||
|
id="demo__io_a" value="10" min="0"
|
||||||
|
max="1000"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_a">Breite</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_e"
|
||||||
|
value="51.503491" size="10"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_b">y</label>
|
||||||
|
</td>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
||||||
|
id="demo__io_b" value="10" min="0"
|
||||||
|
max="1000"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_b">Tiefe</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_f"
|
||||||
|
value="88" size="10"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_c">z</label>
|
||||||
|
</td>
|
||||||
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
||||||
|
id="demo__io_c" value="48" min="0"
|
||||||
|
max="1000"></td>
|
||||||
|
<td class="demo__td_pr">
|
||||||
|
<label for="demo__io_c">Höhe</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese
|
||||||
|
werden mit
|
||||||
|
<code><fieldset></code>
|
||||||
|
realisiert.</p>
|
||||||
|
<fieldset>
|
||||||
|
<div class="grid grid_column_2">
|
||||||
|
<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
|
||||||
|
readonly="readonly" id="demo__input">
|
||||||
|
<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
|
||||||
|
readonly="readonly" id="demo__output">
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<p>Sie können mittels
|
||||||
|
<code><legend></code>
|
||||||
|
auch eine eigene Beschriftung erhalten.</p>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Einfache Eingabeelemente</legend>
|
||||||
|
<div class="grid grid_column_2">
|
||||||
|
<label>Schaltflächen:</label>
|
||||||
|
<div>
|
||||||
|
<button>Senden</button>
|
||||||
|
<input type="reset" value="Abbrechen"></div>
|
||||||
|
<label>Zeicheneingaben:</label>
|
||||||
|
<div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
|
||||||
|
<label>Einzelauswahl:</label>
|
||||||
|
<div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio"
|
||||||
|
name="direction"
|
||||||
|
value="down"/></div>
|
||||||
|
<label>Mehrfachauswahl:</label>
|
||||||
|
<div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox"
|
||||||
|
name="speed"
|
||||||
|
value="fast"/></div>
|
||||||
|
<label>Auswahllisten:</label>
|
||||||
|
<div>
|
||||||
|
<select class="txt_top">
|
||||||
|
<option value="A" selected="selected">Option A</option>
|
||||||
|
<option value="B">Option B</option>
|
||||||
|
</select>
|
||||||
|
<select class="txt_top" size="3">
|
||||||
|
<option value="red" selected="selected">Rot</option>
|
||||||
|
<option value="green">Grün</option>
|
||||||
|
<option value="blue">Blau</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<label>Textfeld:</label>
|
||||||
|
<textarea rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Einfache Eingabeelemente mit Stil</legend>
|
||||||
|
<div class="grid grid_column_2">
|
||||||
|
<label>Schaltflächen:</label>
|
||||||
|
<div class="flex inline">
|
||||||
|
<button class="button_io">Senden</button>
|
||||||
|
<input class="button_io" type="reset" value="Abbrechen"></div>
|
||||||
|
<label>Zeicheneingaben:</label>
|
||||||
|
<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io"
|
||||||
|
type="number"
|
||||||
|
value="0815">
|
||||||
|
</div>
|
||||||
|
<label>Einzelauswahl:</label>
|
||||||
|
<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input
|
||||||
|
class="io_radio" type="radio" name="direction" value="down"/></div>
|
||||||
|
<label>Mehrfachauswahl:</label>
|
||||||
|
<div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input
|
||||||
|
class="io_check" type="checkbox" name="speed" value="fast"/></div>
|
||||||
|
<label>Auswahllisten:</label>
|
||||||
|
<div class="flex inline">
|
||||||
|
<select class="io_select txt_top">
|
||||||
|
<option value="A" selected="selected">Option A</option>
|
||||||
|
<option value="B">Option B</option>
|
||||||
|
</select><select class="io_select txt_top" size="3">
|
||||||
|
<option value="red" selected="selected">Rot</option>
|
||||||
|
<option value="green">Grün</option>
|
||||||
|
<option value="blue">Blau</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<label>Textfeld:</label>
|
||||||
|
<textarea class="io_textarea" rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Weitere Eingabemöglichkeiten</legend>
|
||||||
|
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
|
||||||
|
Information oder lockern das Erscheinungsbild auf.</p>
|
||||||
|
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
||||||
|
<form action="">
|
||||||
|
<div class="grid grid_column_2">
|
||||||
|
<label class="">Farbauswahl<br>
|
||||||
|
<code><input[type="color"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="" type="color"></div>
|
||||||
|
<label class="">Bereichsauswahl<br>
|
||||||
|
<code><input[type="range"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="" type="range"></div>
|
||||||
|
<label class="">Datum<br>
|
||||||
|
<code><input[type="date"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="date"></div>
|
||||||
|
<label class="">Uhrzeit<br>
|
||||||
|
<code><input[type="time"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="time"></div>
|
||||||
|
<label class="">Datum und Zeit<br>
|
||||||
|
<code><input[type="datetime-local"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="datetime-local"></div>
|
||||||
|
<label class="">Kalendermonat<br>
|
||||||
|
<code><input[type="month"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="month"></div>
|
||||||
|
<label class="">Kalenderwoche<br>
|
||||||
|
<code><input[type="week"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="week"></div>
|
||||||
|
<label class="">@dresse<br>
|
||||||
|
<code><input[type="email"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" placeholder="@" type="email"></div>
|
||||||
|
<label class="">Passwort<br>
|
||||||
|
<code><input[type="password"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
|
||||||
|
<label class="">Telefonnummer<br>
|
||||||
|
<code><input[type="tel"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" value="0190123456" type="tel"></div>
|
||||||
|
<label class="">URL<br>
|
||||||
|
<code><input[type="url"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" placeholder="url://" type="url"></div>
|
||||||
|
<label class="">Suche<br>
|
||||||
|
<code><input[type="search"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="input_io" type="search"></div>
|
||||||
|
<label class="">Datei<br>
|
||||||
|
<code><input[type="file"]></code>
|
||||||
|
</label>
|
||||||
|
<div><input class="" type="file"></div>
|
||||||
|
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<h2>Interaktive Elemente</h2>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1>Struktur</h1>
|
||||||
|
<div class="box_placeholder"></div>
|
||||||
|
<hr class="hidden"/>
|
||||||
|
<div class="box_placeholder">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" width="100%" height="100%">
|
||||||
|
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
|
||||||
|
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<hr class="hidden"/>
|
||||||
|
<div class="box_placeholder_bkg"></div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1>Medien</h1>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1>Druck</h1>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Ende der Einführung</h1>
|
||||||
|
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und
|
||||||
|
erweiterten Formatierungen.</p>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
375
source/screens/demo/components.liquid
Normal file
375
source/screens/demo/components.liquid
Normal file
|
|
@ -0,0 +1,375 @@
|
||||||
|
---
|
||||||
|
title: Components
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% layout 'hippie/page.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}Komponenten{% endblock %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Medienformat Abfragen</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<div class="demo__query_example">Umbruch bei </div>
|
||||||
|
<div class="demo__queries">
|
||||||
|
<p class="query_phoneUp">Telefone und größer</p>
|
||||||
|
<p class="query_phoneOnly">Nur Telefone</p>
|
||||||
|
<p class="query_tabletPortraitOnly">Nur Schreibtafeln hochkant</p>
|
||||||
|
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||||
|
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||||
|
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||||
|
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||||
|
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||||
|
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Übersicht aller Elemente</h1>
|
||||||
|
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in
|
||||||
|
Gruppen eingeteilt, die auch das W3Consortium (<a
|
||||||
|
href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>)
|
||||||
|
verwendet.</p>
|
||||||
|
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax
|
||||||
|
dargestellt.</p>
|
||||||
|
</header>
|
||||||
|
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}</code></pre>
|
||||||
|
<article>
|
||||||
|
<h1 id="sections">Bereiche</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||||
|
<h2><body></h2>
|
||||||
|
<p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
|
||||||
|
zugewiesen.</p>
|
||||||
|
<h2><article></h2>
|
||||||
|
<article>Ein Artikel.</article>
|
||||||
|
<h2><section></h2>
|
||||||
|
<section>Ein Bereich.</section>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<p class="float_right">Ende.</p>
|
||||||
|
<p>Zentrierter Bereich.</p>
|
||||||
|
</section>
|
||||||
|
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||||
|
<section class="sec_main_status">Status-Bereich</section>
|
||||||
|
<h2><nav></h2>
|
||||||
|
<nav>Navigation</nav>
|
||||||
|
<h2><aside></h2>
|
||||||
|
<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
|
||||||
|
<pre class="pre_code"><code>aside.right+div.bside</code></pre>
|
||||||
|
<section>
|
||||||
|
<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
|
||||||
|
<div class="bside">Hauptbereich</div>
|
||||||
|
</section>
|
||||||
|
<h2><h*></h2>
|
||||||
|
<h1>Überschrift 1</h1>
|
||||||
|
<h2>Überschrift 2</h2>
|
||||||
|
<h3>Überschrift 3</h3>
|
||||||
|
<h4>Überschrift 4</h4>
|
||||||
|
<h5>Überschrift 5</h5>
|
||||||
|
<hgroup>
|
||||||
|
<h6>Überschrift 6</h6>
|
||||||
|
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Überschrift 1 oder 2</h2>
|
||||||
|
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||||
|
</hgroup>
|
||||||
|
<h2><header></h2>
|
||||||
|
<header>Kopfbereich</header>
|
||||||
|
<pre class="pre_code"><code>header.header_page</code></pre>
|
||||||
|
<pre class="pre_code"><code>header.header_txt>h1</code></pre>
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Überschrift 1</h1>
|
||||||
|
<p>Innerhalb eines <code><header></code>.</p>
|
||||||
|
</header>
|
||||||
|
<h2><footer></h2>
|
||||||
|
<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
|
||||||
|
<footer>Fußbereich</footer>
|
||||||
|
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
||||||
|
{% render 'hippie/partials/footer-pinned.liquid' %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="grouping">Gruppierung</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||||
|
<h2><p></h2>
|
||||||
|
<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>p.column_2</code></pre>
|
||||||
|
<p class="column_2">Spalten können angegeben werden.</p>
|
||||||
|
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||||
|
<p class="column_3 column_line">Spalten können angegeben werden.</p>
|
||||||
|
<h2><address></h2>
|
||||||
|
<address>Anschrift, mit bestimmtem, ##### Format.</address>
|
||||||
|
<h2><hr></h2>
|
||||||
|
<hr>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>hr.hidden+hr.dotted+hr.double</code></pre>
|
||||||
|
<hr class="hidden">
|
||||||
|
<hr class="dotted">
|
||||||
|
<hr class="double">
|
||||||
|
<pre class="pre_code"><code>hr.vertical</code></pre>
|
||||||
|
<hr class="vertical">
|
||||||
|
<h2><pre></h2>
|
||||||
|
<pre>Vorformatierter Text.
|
||||||
|
erhält Umbrüche und Einrückung.
|
||||||
|
</pre>
|
||||||
|
<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
|
||||||
|
<pre class="pre_code"><code>let variable = true;</code>
|
||||||
|
<code>()(){}</code></pre>
|
||||||
|
<h2><blockquote></h2>
|
||||||
|
<blockquote>Ein Zitat ist eingerückt.</blockquote>
|
||||||
|
<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
|
||||||
|
<blockquote class="quote_mark">
|
||||||
|
<p>Zitat mit automatischen Anführungszeichen</p>
|
||||||
|
<p class="quote_source">und Quellenangabe.</p>
|
||||||
|
</blockquote>
|
||||||
|
<h2><dl>, <ol>, <ul></h2>
|
||||||
|
<dl>
|
||||||
|
<dt>Begriff</dt>
|
||||||
|
<dd>Definition</dd>
|
||||||
|
</dl>
|
||||||
|
<ol>
|
||||||
|
<li>Eins</li>
|
||||||
|
<li>Zwei</li>
|
||||||
|
</ol>
|
||||||
|
<ul class="horizontal">
|
||||||
|
<li>Obst</li>
|
||||||
|
<li>Gemüse</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
|
||||||
|
<ul class="list_basic list_dash">
|
||||||
|
<li>Mehr Abstand und</li>
|
||||||
|
<li>mit Unterstrichen.</li>
|
||||||
|
</ul>
|
||||||
|
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
|
||||||
|
<ul class="list_link">
|
||||||
|
<li>
|
||||||
|
<a href="">Mit</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="">Verweisen</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2><figure></h2>
|
||||||
|
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||||
|
<figure>
|
||||||
|
<figcaption>Bezeichnung</figcaption>
|
||||||
|
Grafisches Element.
|
||||||
|
</figure>
|
||||||
|
<h2><main></h2>
|
||||||
|
<main>Hauptbereich</main>
|
||||||
|
<h2><div></h2>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||||
|
<div class="div_info">
|
||||||
|
<p>Absatz in einer Box mit dem Typ <i>Information</i>.</p>
|
||||||
|
</div>
|
||||||
|
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
|
||||||
|
<div class="box_space">
|
||||||
|
<div class="box_cube"><span>Text</span></div>
|
||||||
|
</div>
|
||||||
|
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
|
||||||
|
<div class="box_placeholder"></div>
|
||||||
|
<hr>
|
||||||
|
<div class="box_placeholder_bkg"></div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="tabularData">Tabellen</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||||
|
<h2><table></h2>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||||
|
<table class="width_full fix">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="cell_pre" scope="col"></th>
|
||||||
|
<th scope="col">Kopfzeile</th>
|
||||||
|
<th scope="col">A</th>
|
||||||
|
<th scope="col">B</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">Vorspalte</td>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">1</td>
|
||||||
|
<td></td>
|
||||||
|
<td>erweiterte</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">2</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
|
||||||
|
<table class="width_full stripe fix free">
|
||||||
|
<tr>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ohne</td>
|
||||||
|
<td>Rahmen</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>jedoch</td>
|
||||||
|
<td>mit</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>Streifen</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||||
|
<table>
|
||||||
|
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Bezeichnung</th>
|
||||||
|
<th scope="col">Menge</th>
|
||||||
|
<th scope="col">Wert</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Alpha</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td class="txt_right">8990</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bravo</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td class="txt_right">1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charlie</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td class="txt_right">1</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||||
|
<td class="txt_right" title=">9000">9001</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="forms">Formulare</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
||||||
|
<h2><input></h2>
|
||||||
|
<div class="inline">
|
||||||
|
<input value="Undefiniert"/>
|
||||||
|
<input type="text" size="8" value="Text"/>
|
||||||
|
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
|
||||||
|
<input type="button" value="Auswählen">
|
||||||
|
<input type="submit" value="Senden" disabled="disabled"/>
|
||||||
|
</div>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
|
||||||
|
<div class="inline">
|
||||||
|
<input class="button_io" type="button" value="Input type button">
|
||||||
|
<button class="button_io">Button</button>
|
||||||
|
</div>
|
||||||
|
<div class="inline">
|
||||||
|
<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
|
||||||
|
<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
|
||||||
|
<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||||
|
</div>
|
||||||
|
<div id="capsCheck">
|
||||||
|
<form action="">
|
||||||
|
<input id="inpPass" type="password"/>
|
||||||
|
<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
|
||||||
|
<br>
|
||||||
|
<input id ="inpText" type="text"/>
|
||||||
|
<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<h2><select></h2>
|
||||||
|
<select name="F">
|
||||||
|
<option value="0">
|
||||||
|
Plain list
|
||||||
|
</option>
|
||||||
|
<option value="1" selected="selected">
|
||||||
|
Fancy list
|
||||||
|
</option>
|
||||||
|
<option value="2">
|
||||||
|
Table list
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const capsHint = document.getElementById('hintPass');
|
||||||
|
let isShiftPressed = false;
|
||||||
|
|
||||||
|
document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
|
||||||
|
|
||||||
|
function shiftDetect(event) {
|
||||||
|
if (event.getModifierState('Shift')) {
|
||||||
|
isShiftPressed = true;
|
||||||
|
capsHint.style.visibility = 'visible';
|
||||||
|
} else {
|
||||||
|
isShiftPressed = false;
|
||||||
|
capsHint.style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Shift', isShiftPressed);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('inpPass').addEventListener('keyup', (event) => {
|
||||||
|
if (event.key === 'Shift') {
|
||||||
|
isShiftPressed = false;
|
||||||
|
capsHint.style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function capsDetect() {
|
||||||
|
const capsHint = document.getElementById('hintText');
|
||||||
|
let isCapsOn = false;
|
||||||
|
|
||||||
|
document.getElementById('inpText').addEventListener('keyup', function (e) {
|
||||||
|
if (event.getModifierState('CapsLock')) {
|
||||||
|
capsHint.style.display = 'inline';
|
||||||
|
isCapsOn = true;
|
||||||
|
} else {
|
||||||
|
capsHint.style.display = 'none';
|
||||||
|
isCapsOn = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('CapsLock', isCapsOn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
capsDetect();
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
71
source/screens/demo/examples/10print.liquid
Normal file
71
source/screens/demo/examples/10print.liquid
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
---
|
||||||
|
title: 10print
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<canvas id="pattern"></canvas>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script>
|
||||||
|
// Page script
|
||||||
|
const canvas = document.getElementById('pattern');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
const lineWidth = 20;
|
||||||
|
const randomSeed = Math.random;
|
||||||
|
|
||||||
|
// Function to draw the 10PRINT pattern
|
||||||
|
function draw10Print() {
|
||||||
|
// Clear the canvas
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Set line style
|
||||||
|
ctx.strokeStyle = 'black';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
|
||||||
|
// Loop through the canvas grid
|
||||||
|
for (let x = 0; x < canvas.width; x += lineWidth) {
|
||||||
|
for (let y = 0; y < canvas.height; y += lineWidth) {
|
||||||
|
// Randomly choose between two diagonal lines
|
||||||
|
if (randomSeed() > 0.5) {
|
||||||
|
// Draw line from top-left to bottom-right
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, y);
|
||||||
|
ctx.lineTo(x + lineWidth, y + lineWidth);
|
||||||
|
ctx.stroke();
|
||||||
|
} else {
|
||||||
|
// Draw line from top-right to bottom-left
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x + lineWidth, y);
|
||||||
|
ctx.lineTo(x, y + lineWidth);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
draw10Print();
|
||||||
|
|
||||||
|
// window.addEventListener('resize', resizeCanvas);
|
||||||
|
canvas.addEventListener('click', draw10Print);
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
51
source/screens/demo/examples/blog.njk
Normal file
51
source/screens/demo/examples/blog.njk
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
title: Blog
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageBase = "../" %}
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
|
||||||
|
{% extends "demo/_default.njk" %}
|
||||||
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
|
{% import "hippie/macros/_song.njk" as song %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
|
<div class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Blog</h1>
|
||||||
|
</header>
|
||||||
|
<nav role="doc-toc">
|
||||||
|
<h2>Inhaltsverzeichnis</h2>
|
||||||
|
<ul>
|
||||||
|
{%- for song in collections.song -%}
|
||||||
|
<li>
|
||||||
|
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2>Vorwort</h2>
|
||||||
|
<p>Liederbuch für
|
||||||
|
<em>Name</em>.</p>
|
||||||
|
<p>Gibt es gebunden und hier
|
||||||
|
{{ ph.link() }}.<br/>
|
||||||
|
Bestellungen bitte an
|
||||||
|
{{ ph.name() }}
|
||||||
|
richten.</p>
|
||||||
|
<hr class="double dotted">
|
||||||
|
{%- for post in collections.article -%}
|
||||||
|
{{ post.content }}
|
||||||
|
{%- endfor -%}
|
||||||
|
<hr/>
|
||||||
|
<address>{{ ph.name() }}</address>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
11
source/screens/demo/examples/blog/article.md
Normal file
11
source/screens/demo/examples/blog/article.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
tags:
|
||||||
|
- blog
|
||||||
|
- article
|
||||||
|
title: "Artikel"
|
||||||
|
releaseDate: JJJJ
|
||||||
|
description: Text
|
||||||
|
---
|
||||||
|
# Titel
|
||||||
|
|
||||||
|
Inhalt
|
||||||
83
source/screens/demo/examples/card.njk
Normal file
83
source/screens/demo/examples/card.njk
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
---
|
||||||
|
title: Card
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "html_card" %}
|
||||||
|
|
||||||
|
{% extends "demo/_default.njk" %}
|
||||||
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
|
<div class="card_bkg">
|
||||||
|
<div id="dither"></div>
|
||||||
|
{{ ph.flag('svg', '', 'flag', '') }}
|
||||||
|
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
|
||||||
|
</div>
|
||||||
|
<div class="card_box">
|
||||||
|
<div id="js_content">
|
||||||
|
<p>Titel<br/>und Beschreibung</p>
|
||||||
|
<h1>{{ ph.name() }}</h1>
|
||||||
|
<p>
|
||||||
|
{{ ph.email('card_address') }}<br/>
|
||||||
|
{{ ph.link('decent', 'site.tld') }}
|
||||||
|
·
|
||||||
|
{{ ph.address('decent') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script>
|
||||||
|
const flag = document.getElementById("flag");
|
||||||
|
let colors = new Array();
|
||||||
|
let iId = undefined;
|
||||||
|
let position = 0;
|
||||||
|
|
||||||
|
for (let i = 1; i <= flag.childElementCount; i++) {
|
||||||
|
colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log(colors);
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('js_content')
|
||||||
|
.addEventListener('mouseenter', () => {
|
||||||
|
iId = setInterval(() => {
|
||||||
|
for (let i = 1; i <= colors.length; i++) {
|
||||||
|
position++;
|
||||||
|
|
||||||
|
if (position >= colors.length) {
|
||||||
|
position = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("triangle-" + i)
|
||||||
|
.setAttribute("fill", colors[position]);
|
||||||
|
}
|
||||||
|
|
||||||
|
position++;
|
||||||
|
|
||||||
|
if (position >= colors.length) {
|
||||||
|
position = 0;
|
||||||
|
}
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('js_content')
|
||||||
|
.addEventListener('mouseleave', () => {
|
||||||
|
iId && clearInterval(iId);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
482
source/screens/demo/examples/clock.liquid
Normal file
482
source/screens/demo/examples/clock.liquid
Normal file
|
|
@ -0,0 +1,482 @@
|
||||||
|
---
|
||||||
|
title: Clock
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_clock' -%}
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<header class="io pos_fix pin_top pin_right pin_left">
|
||||||
|
<button id="tglOverlay" title="Toggle overlay">☰</button>
|
||||||
|
<nav>
|
||||||
|
<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
|
||||||
|
<button id="tglSections" title="Toggle sections">Abschnitte</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main></main>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script src="/vendor/hippie-script.js"></script>
|
||||||
|
<script src="/js/globals.js"></script>
|
||||||
|
<script src="/js/app.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class HippieClock {
|
||||||
|
constructor(element, date = new Date(), options = {}) {
|
||||||
|
this.defaults = {
|
||||||
|
debug: true,
|
||||||
|
size: Math.floor(this.getSize().value * 0.9),
|
||||||
|
h24: true,
|
||||||
|
sections: true,
|
||||||
|
overlay: false
|
||||||
|
};
|
||||||
|
this.options = {...this.defaults, ...options};
|
||||||
|
this.element = element;
|
||||||
|
this.date = date;
|
||||||
|
this.values = this.getTime();
|
||||||
|
this.parts = [];
|
||||||
|
this.shapes = [];
|
||||||
|
|
||||||
|
this.#init();
|
||||||
|
}
|
||||||
|
|
||||||
|
#init() {
|
||||||
|
this.#createContext(['background', 'hands']);
|
||||||
|
this.createOverlay();
|
||||||
|
|
||||||
|
this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
|
||||||
|
this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
|
||||||
|
this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
|
||||||
|
this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
|
||||||
|
this.addRing('dotmonth', .6, 12, this.values.daysMonth, `rgb(39, 63, 139)`);
|
||||||
|
this.addRing('dotyear', .5, 256, this.values.daysYear, `rgb(60, 87, 154)`);
|
||||||
|
this.addRing('week', .4, 10, this.values.weeksYear, `rgb(183, 224, 240)`);
|
||||||
|
this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
|
||||||
|
this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
|
||||||
|
|
||||||
|
this.#resize();
|
||||||
|
window.addEventListener('resize', () => this.#resize());
|
||||||
|
|
||||||
|
if (this.options.debug) {
|
||||||
|
console.group('Clock');
|
||||||
|
console.info('\nOptions:', this.options, '\n\n');
|
||||||
|
console.info('Date:', this.date);
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#resize() {
|
||||||
|
this.updateOptions({size: Math.floor(this.getSize().value * 0.9)});
|
||||||
|
this.parts.forEach(part => {
|
||||||
|
if (part.name === 'wrap') {
|
||||||
|
part.element.style.height = this.options.size + 'px';
|
||||||
|
part.element.style.width = this.options.size + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
part.element.width = part.element.offsetWidth;
|
||||||
|
part.element.height = part.element.offsetHeight;
|
||||||
|
|
||||||
|
this.draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
// TODO: Nur geänderte Teile löschen
|
||||||
|
this.parts.forEach(part => {
|
||||||
|
part.context?.clearRect(0, 0, part.element.width, part.element.height);
|
||||||
|
});
|
||||||
|
|
||||||
|
let ctx = undefined;
|
||||||
|
|
||||||
|
this.shapes
|
||||||
|
.filter(item => item.type === 'circle')
|
||||||
|
.forEach((shape) => {
|
||||||
|
const radius = this.#toPixelSize(shape.radius) / 2;
|
||||||
|
ctx = this.parts[0].context;
|
||||||
|
|
||||||
|
ctx.fillStyle = shape.color;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(
|
||||||
|
this.#toPixelX(shape.center),
|
||||||
|
this.#toPixelY(shape.center),
|
||||||
|
radius,
|
||||||
|
0,
|
||||||
|
Math.PI * 2
|
||||||
|
);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.shapes
|
||||||
|
.filter(item => item.type === 'ring')
|
||||||
|
.forEach((shape) => {
|
||||||
|
if (this.options.sections) {
|
||||||
|
const outerRadius = this.#toPixelSize(shape.radius) / 2;
|
||||||
|
const innerRadius = this.#toPixelSize(shape.radius) / 2 - shape.stroke;
|
||||||
|
ctx = this.parts[0].context;
|
||||||
|
|
||||||
|
for (let i = 0; i < shape.max; i++) {
|
||||||
|
const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
|
||||||
|
const outerX = this.#toPixelX(shape.center) + outerRadius * Math.cos(angle);
|
||||||
|
const outerY = this.#toPixelY(shape.center) + outerRadius * Math.sin(angle);
|
||||||
|
const innerX = this.#toPixelX(shape.center) + innerRadius * Math.cos(angle);
|
||||||
|
const innerY = this.#toPixelY(shape.center) + innerRadius * Math.sin(angle);
|
||||||
|
|
||||||
|
ctx.strokeStyle = `rgba(0, 0, 0, .25)`;
|
||||||
|
ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(outerX, outerY);
|
||||||
|
ctx.lineTo(innerX, innerY);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const radius = this.#toPixelSize(shape.radius) / 2 - shape.stroke / 2;
|
||||||
|
const start = -0.5 * Math.PI; // Start at the top
|
||||||
|
const angle = start + (2 * Math.PI * (shape.angle / shape.max));
|
||||||
|
ctx = this.parts[1].context;
|
||||||
|
|
||||||
|
ctx.strokeStyle = shape.color;
|
||||||
|
ctx.lineWidth = shape.stroke;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(
|
||||||
|
this.#toPixelX(shape.center),
|
||||||
|
this.#toPixelY(shape.center),
|
||||||
|
radius,
|
||||||
|
start,
|
||||||
|
angle
|
||||||
|
);
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Erfassung für geänderte Formen ergänzen
|
||||||
|
update() {
|
||||||
|
this.values = this.getTime();
|
||||||
|
const second = this.values.second;
|
||||||
|
const minute = this.values.minute;
|
||||||
|
const hour = this.values.hour;
|
||||||
|
|
||||||
|
this.updateShape('seconds', (second === 0) ? 60 : second);
|
||||||
|
this.updateShape('minutes', (minute === 0) ? 60 : minute);
|
||||||
|
this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
|
||||||
|
this.updateShape('dotweek', this.values.dayWeek);
|
||||||
|
this.updateShape('dotmonth', this.values.dayMonth, this.values.daysMonth);
|
||||||
|
this.updateShape('dotyear', this.values.dayYear);
|
||||||
|
this.updateShape('week', this.values.week);
|
||||||
|
this.updateShape('month', this.values.month);
|
||||||
|
this.updateShape('moon', this.values.moon);
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
#toPixelX(number) {
|
||||||
|
return number * this.parts[0].element.width;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toPixelY(number) {
|
||||||
|
return number * this.parts[0].element.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toPixelSize(number) {
|
||||||
|
return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: DateDisplay und TimeDisplay benutzen
|
||||||
|
// TODO: Parameter für Wochenstart ergänzen
|
||||||
|
getWeekday(date) {
|
||||||
|
const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
|
||||||
|
|
||||||
|
return (weekday === 0) ? 7 : weekday;
|
||||||
|
}
|
||||||
|
|
||||||
|
getYearDay(date) {
|
||||||
|
const start = new Date(date.getFullYear(), 0, 0);
|
||||||
|
|
||||||
|
return Math.floor((date - start) / 86400000);
|
||||||
|
}
|
||||||
|
|
||||||
|
isLeapYear(year) {
|
||||||
|
return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
getDaysInYear(year) {
|
||||||
|
return this.isLeapYear(year) ? 366 : 365;
|
||||||
|
}
|
||||||
|
|
||||||
|
getYearInfo(date) {
|
||||||
|
const current = this.getYearDay(date);
|
||||||
|
const total = this.getDaysInYear(date.getFullYear());
|
||||||
|
const remaining = total - current;
|
||||||
|
|
||||||
|
return {
|
||||||
|
total: total,
|
||||||
|
current: current,
|
||||||
|
remaining: remaining
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getDaysInMonth(month, year) {
|
||||||
|
return new Date(year, month, 0).getDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ISO 8601
|
||||||
|
getISOWeek(date) {
|
||||||
|
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
||||||
|
const dayNum = d.getUTCDay() || 7;
|
||||||
|
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
|
||||||
|
const start = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
||||||
|
|
||||||
|
return Math.ceil((((d - start) / 86400000) + 1) / 7);
|
||||||
|
}
|
||||||
|
|
||||||
|
getISOWeeksInYear(year) {
|
||||||
|
// Check if Dec 28 is in week 53
|
||||||
|
return this.getISOWeek(new Date(year, 11, 28)) === 53 ? 53 : 52;
|
||||||
|
}
|
||||||
|
|
||||||
|
getISOWeekInfo(date) {
|
||||||
|
const current = this.getISOWeek(date);
|
||||||
|
const weeksYear = this.getISOWeeksInYear(date.getFullYear());
|
||||||
|
|
||||||
|
return {
|
||||||
|
current,
|
||||||
|
weeksYear
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getMoonNameFrom(phase) {
|
||||||
|
if (phase < 0.125) return 'New Moon';
|
||||||
|
if (phase < 0.25) return 'Waxing Crescent';
|
||||||
|
if (phase < 0.375) return 'First Quarter';
|
||||||
|
if (phase < 0.5) return 'Waxing Gibbous';
|
||||||
|
if (phase < 0.625) return 'Full Moon';
|
||||||
|
if (phase < 0.75) return 'Waning Gibbous';
|
||||||
|
if (phase < 0.875) return 'Last Quarter';
|
||||||
|
return 'Waning Crescent';
|
||||||
|
}
|
||||||
|
|
||||||
|
getMoonPhase(date) {
|
||||||
|
// Known new moon date: January 6, 2000
|
||||||
|
const newMoon = new Date(2000, 0, 6);
|
||||||
|
const lunarCycle = 29.53058867; // days
|
||||||
|
|
||||||
|
const daysSinceNewMoon = (date - newMoon) / (1000 * 60 * 60 * 24);
|
||||||
|
const phase = (daysSinceNewMoon % lunarCycle) / lunarCycle;
|
||||||
|
|
||||||
|
return {
|
||||||
|
illumination: Math.abs(Math.cos(Math.PI * phase)),
|
||||||
|
phase: mapRange(phase, 0, 1, 1, 8),
|
||||||
|
phaseName: this.getMoonNameFrom(phase)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getSize() {
|
||||||
|
const height = window.innerHeight;
|
||||||
|
const width = window.innerWidth;
|
||||||
|
|
||||||
|
return {
|
||||||
|
value: Math.min(height, width),
|
||||||
|
smaller: height < width ? 'height' : 'width'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getTime(date) {
|
||||||
|
this.date = date || new Date();
|
||||||
|
|
||||||
|
return {
|
||||||
|
second: this.date.getSeconds(),
|
||||||
|
minute: this.date.getMinutes(),
|
||||||
|
hour: this.date.getHours(),
|
||||||
|
dayWeek: this.getWeekday(this.date),
|
||||||
|
dayMonth: this.date.getDate(),
|
||||||
|
dayYear: this.getYearInfo(this.date).current,
|
||||||
|
daysYear: this.getYearInfo(this.date).total,
|
||||||
|
week: this.getISOWeekInfo(this.date).current,
|
||||||
|
weeksYear: this.getISOWeekInfo(this.date).weeksYear,
|
||||||
|
month: this.date.getMonth() + 1, // Get current month (0-11)
|
||||||
|
daysMonth: this.getDaysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
|
||||||
|
moon: this.getMoonPhase(this.date).phase
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
#createContext(names) {
|
||||||
|
let parts = [];
|
||||||
|
const wrap = document.createElement('div');
|
||||||
|
|
||||||
|
wrap.style.position = 'relative';
|
||||||
|
wrap.style.height = this.options.size + 'px';
|
||||||
|
wrap.style.width = this.options.size + 'px';
|
||||||
|
|
||||||
|
names.forEach(name => {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
|
||||||
|
canvas.style.position = 'absolute';
|
||||||
|
canvas.style.top = '0px';
|
||||||
|
canvas.style.left = '0px';
|
||||||
|
canvas.style.height = '100%';
|
||||||
|
canvas.style.width = '100%';
|
||||||
|
canvas.height = canvas.offsetHeight;
|
||||||
|
canvas.width = canvas.offsetWidth;
|
||||||
|
|
||||||
|
wrap.appendChild(canvas);
|
||||||
|
this.parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.element.appendChild(wrap);
|
||||||
|
this.parts.push({name: 'wrap', element: wrap});
|
||||||
|
}
|
||||||
|
|
||||||
|
createOverlay() {
|
||||||
|
const overlay = document.createElement('div');
|
||||||
|
const text = document.createElement('p');
|
||||||
|
const timeElement = document.createElement('span');
|
||||||
|
const dateElement = document.createElement('span');
|
||||||
|
|
||||||
|
new DateDisplay(dateElement);
|
||||||
|
new TimeDisplay(timeElement);
|
||||||
|
|
||||||
|
Object.assign(overlay.style, {
|
||||||
|
zIndex: 5,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0px',
|
||||||
|
left: '0px',
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
display: this.options.overlay ? 'flex' : 'none',
|
||||||
|
// display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: `rgba(0, 0, 0, .6)`,
|
||||||
|
color: 'white'
|
||||||
|
});
|
||||||
|
overlay.dataset.part = 'overlay';
|
||||||
|
|
||||||
|
text.appendChild(timeElement);
|
||||||
|
text.insertAdjacentText('beforeend', ' ');
|
||||||
|
text.appendChild(dateElement);
|
||||||
|
overlay.appendChild(text);
|
||||||
|
this.element.appendChild(overlay);
|
||||||
|
this.parts.push({name: 'overlay', element: overlay});
|
||||||
|
}
|
||||||
|
|
||||||
|
removeOverlay() {
|
||||||
|
const index = this.parts.findIndex(s => s.name === 'overlay');
|
||||||
|
|
||||||
|
if (index !== -1) {
|
||||||
|
this.parts[index].element.remove();
|
||||||
|
this.parts.splice(index, 1);
|
||||||
|
this.draw();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Proxy für Optionen benutzen
|
||||||
|
updateOptions(changes) {
|
||||||
|
this.options = {...this.options, ...changes};
|
||||||
|
|
||||||
|
// TODO: Änderungen durch setzen von Optionen vornehmen, oder nicht?
|
||||||
|
const drawOptions = new Set(['sections', 'h24']);
|
||||||
|
const hasKey = Object.keys(changes).some(key => drawOptions.has(key));
|
||||||
|
|
||||||
|
if (hasKey) {
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateShape(id, angle, max) {
|
||||||
|
const shape = this.shapes.find(s => s.id === id);
|
||||||
|
|
||||||
|
if (shape) {
|
||||||
|
shape.angle = angle;
|
||||||
|
if (max) shape.max = max;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
removeShape(id) {
|
||||||
|
const index = this.shapes.findIndex(s => s.id === id);
|
||||||
|
|
||||||
|
if (index !== -1) {
|
||||||
|
this.shapes.splice(index, 1);
|
||||||
|
this.draw();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearShapes() {
|
||||||
|
this.shapes = [];
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
findShape(id) {
|
||||||
|
return this.shapes.some(s => s.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
getShape(id) {
|
||||||
|
return this.shapes.find(s => s.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
|
||||||
|
this.shapes.push({type: 'circle', id, center, radius, color});
|
||||||
|
}
|
||||||
|
|
||||||
|
addRing(id, radius, angle, max, color = 'white', center = .5, stroke = 16) {
|
||||||
|
this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
|
||||||
|
}
|
||||||
|
|
||||||
|
addSection(id, radius, color = 'black', center = .5, stroke = 1) {
|
||||||
|
this.shapes.push({type: 'section', id, radius, color, center, stroke});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.querySelector('#clock main');
|
||||||
|
const clock = new HippieClock(container);
|
||||||
|
|
||||||
|
clock.addCircle('base', .5, 1);
|
||||||
|
clock.draw();
|
||||||
|
|
||||||
|
// TODO: Alternative mit requestAnimationFrame()
|
||||||
|
setInterval(() => {
|
||||||
|
clock.update();
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
// TODO: Aktionen gehören quasi zu HippieClock
|
||||||
|
document.getElementById('tglFormat').addEventListener('click', () => {
|
||||||
|
if (clock) {
|
||||||
|
clock.updateOptions({h24: !clock.options.h24});
|
||||||
|
document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
|
||||||
|
} else {
|
||||||
|
console.log('No clock available');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('tglSections').addEventListener('click', () => {
|
||||||
|
if (clock) {
|
||||||
|
clock.updateOptions({sections: !clock.options.sections});
|
||||||
|
} else {
|
||||||
|
console.log('No clock available');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('tglOverlay').addEventListener('click', () => {
|
||||||
|
if (clock) {
|
||||||
|
// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
|
||||||
|
clock.updateOptions({overlay: !clock.options.overlay});
|
||||||
|
|
||||||
|
if (clock.options.overlay) {
|
||||||
|
clock.createOverlay();
|
||||||
|
} else {
|
||||||
|
clock.removeOverlay();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('No clock available');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
25
source/screens/demo/examples/game.liquid
Normal file
25
source/screens/demo/examples/game.liquid
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
title: Game - TFW
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
- gameExample
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_game' -%}
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="sec_main_center">
|
||||||
|
<nav role="doc-toc">
|
||||||
|
<hgroup>
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<p>Additional name</p>
|
||||||
|
</hgroup>
|
||||||
|
<ul class="list_link">
|
||||||
|
<li><a href="#new">Neues Spiel</a></li>
|
||||||
|
<li><a href="#continue">Spiel fortsetzen</a></li>
|
||||||
|
<li><a href="#options">Einstellungen</a></li>
|
||||||
|
<li><a href="#quit">Spiel beenden</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
138
source/screens/demo/examples/intro.njk
Normal file
138
source/screens/demo/examples/intro.njk
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
---
|
||||||
|
title: Intro
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
|
||||||
|
{% set pageId = "init" %}
|
||||||
|
{% set bodyClass = "body_intro" %}
|
||||||
|
|
||||||
|
{% extends "hippie/_app_frame.njk" %}
|
||||||
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="loader" class="step op_show">
|
||||||
|
<div id="bar">
|
||||||
|
<div id="spinner">
|
||||||
|
<span>I</span>
|
||||||
|
</div>
|
||||||
|
<div id="wrap">
|
||||||
|
<div id="progress"></div>
|
||||||
|
</div>
|
||||||
|
<div id="status">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="intro" class="step op_hide">
|
||||||
|
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
|
<p>Hold
|
||||||
|
<kbd>space</kbd>
|
||||||
|
to skip.</p>
|
||||||
|
</div>
|
||||||
|
{{ ph.brand('brand') }}
|
||||||
|
<p>Powered by</p>
|
||||||
|
<ul class="tech-stack">
|
||||||
|
<li>Vendor</li>
|
||||||
|
<li>IDE</li>
|
||||||
|
<li>Engine</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="agreement" class="step op_hide">
|
||||||
|
<h1>Agreement</h1>
|
||||||
|
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
||||||
|
</div>
|
||||||
|
<div id="idle" class="step op_hide">
|
||||||
|
<div class="mouse-overlay"></div>
|
||||||
|
<div class="hello">Hello World!</div>
|
||||||
|
<p class="hello">Only left mouse click or any key</p>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="{{ pageBase }}js/intro.js"></script>
|
||||||
|
<script>
|
||||||
|
//let intro = new Intro('Intro');
|
||||||
|
//intro.init();
|
||||||
|
|
||||||
|
//const ui = new UI();
|
||||||
|
//ui
|
||||||
|
// .init()
|
||||||
|
// .then(() => ui.showIntro())
|
||||||
|
// .then(() => ui.showHint())
|
||||||
|
// .then(() => ui.showIdle())
|
||||||
|
// .catch((error) => console.error(error));
|
||||||
|
|
||||||
|
let introDelay = 6;
|
||||||
|
let hintDelay = 1;
|
||||||
|
let cycleDelay = 2;
|
||||||
|
let isAgree = false;
|
||||||
|
const steps = {
|
||||||
|
agreement: {
|
||||||
|
element: document.getElementById('agreement'),
|
||||||
|
msgIn: 'Agreement shown.',
|
||||||
|
msgOut: 'Agreement accepted.',
|
||||||
|
msgNo: 'No agreement today.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const intro = document.getElementById('intro');
|
||||||
|
const agreement = steps.agreement.element;
|
||||||
|
const hint = {
|
||||||
|
element: document.getElementById('hint'),
|
||||||
|
delay: hintDelay * 1000,
|
||||||
|
show() {
|
||||||
|
if (typeof this.timeoutId === 'number') {
|
||||||
|
this.cancel();
|
||||||
|
}
|
||||||
|
this
|
||||||
|
.element
|
||||||
|
.classList
|
||||||
|
.remove('di_none');
|
||||||
|
this.timeoutId = setTimeout(() => {
|
||||||
|
this.dismiss();
|
||||||
|
}, this.delay);
|
||||||
|
},
|
||||||
|
dismiss() {
|
||||||
|
this
|
||||||
|
.element
|
||||||
|
.classList
|
||||||
|
.add('di_none');
|
||||||
|
this.timeoutId = undefined;
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
clearTimeout(this.timeoutId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const loader = document.getElementById('loader');
|
||||||
|
const idle = {
|
||||||
|
element: document.getElementById('idle'),
|
||||||
|
delay: cycleDelay * 1000,
|
||||||
|
position: 0,
|
||||||
|
cycle() {
|
||||||
|
if (typeof this.intervalId === 'number') {
|
||||||
|
this.cancel();
|
||||||
|
}
|
||||||
|
this.intervalId = setInterval(() => {
|
||||||
|
this.position++;
|
||||||
|
if (this.position >= flagColors.length) {
|
||||||
|
this.position = 0;
|
||||||
|
}
|
||||||
|
this.element.style.backgroundColor = '#' + flagColors[this.position];
|
||||||
|
}, this.delay);
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.intervalId && clearInterval(this.intervalId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
init()
|
||||||
|
.then(loadCore)
|
||||||
|
.then(showIntro)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.then(showAgreement)
|
||||||
|
.then(showIdle)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.finally(() => {
|
||||||
|
console.debug('Init end.', isAgree);
|
||||||
|
// location = 'demo/examples/ui/new.html';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
41
source/screens/demo/examples/portal.njk
Normal file
41
source/screens/demo/examples/portal.njk
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
---
|
||||||
|
title: Portal
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set bodyClass = "body_portal" %}
|
||||||
|
|
||||||
|
{% extends "demo/_default.njk" %}
|
||||||
|
{% import "hippie/macros/_gate.njk" as gate %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
|
<div class="portal">
|
||||||
|
{{ gate.list(
|
||||||
|
'Tor mit Symbol und Liste',
|
||||||
|
'../demo', {
|
||||||
|
src: '/art/flag_websafe_128x80.gif',
|
||||||
|
alt: 'Flag of Interaktionsweise'
|
||||||
|
}, [
|
||||||
|
{
|
||||||
|
name: '1',
|
||||||
|
href: 'http://domain.tld',
|
||||||
|
img: '../art/bullet.gif'
|
||||||
|
}, {
|
||||||
|
name: 'Zwei',
|
||||||
|
href: 'http://domain.tld',
|
||||||
|
img: '../art/bullet.gif'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
) }}
|
||||||
|
{{ gate.simple('Tor', '../demo') }}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
52
source/screens/demo/examples/songbook.njk
Executable file
52
source/screens/demo/examples/songbook.njk
Executable file
|
|
@ -0,0 +1,52 @@
|
||||||
|
---
|
||||||
|
title: Songbook
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageBase = "../" %}
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
|
||||||
|
{% extends "demo/_default.njk" %}
|
||||||
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
|
{% import "hippie/macros/_song.njk" as song %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
|
<div class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Titel</h1>
|
||||||
|
<p>Jahr</p>
|
||||||
|
</header>
|
||||||
|
<nav role="doc-toc">
|
||||||
|
<h2>Inhaltsverzeichnis</h2>
|
||||||
|
<ul>
|
||||||
|
{%- for song in collections.song -%}
|
||||||
|
<li>
|
||||||
|
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2>Vorwort</h2>
|
||||||
|
<p>Liederbuch für
|
||||||
|
<em>Name</em>.</p>
|
||||||
|
<p>Gibt es gebunden und hier
|
||||||
|
{{ ph.link() }}.<br/>
|
||||||
|
Bestellungen bitte an
|
||||||
|
{{ ph.name() }}
|
||||||
|
richten.</p>
|
||||||
|
<hr class="double dotted">
|
||||||
|
{%- for piece in collections.song -%}
|
||||||
|
{{ song.simple(loop.index0, piece.data, piece.content) }}
|
||||||
|
{%- endfor -%}
|
||||||
|
<hr/>
|
||||||
|
<address>{{ ph.name() }}</address>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
26
source/screens/demo/examples/songbook/0_artist-title.md
Executable file
26
source/screens/demo/examples/songbook/0_artist-title.md
Executable file
|
|
@ -0,0 +1,26 @@
|
||||||
|
---
|
||||||
|
tags:
|
||||||
|
- songbook
|
||||||
|
- song
|
||||||
|
title: "Interpret - Titel"
|
||||||
|
releaseDate: JJJJ
|
||||||
|
description: Text
|
||||||
|
---
|
||||||
|
~~~
|
||||||
|
[verse 1]
|
||||||
|
strophe 1
|
||||||
|
|
||||||
|
[chorus]
|
||||||
|
refrain
|
||||||
|
|
||||||
|
[verse 2]
|
||||||
|
strophe 2
|
||||||
|
|
||||||
|
[chorus]
|
||||||
|
[bridge]
|
||||||
|
überleitung
|
||||||
|
|
||||||
|
[interlude]
|
||||||
|
[chorus]
|
||||||
|
[outro]
|
||||||
|
~~~
|
||||||
82
source/screens/demo/examples/start.liquid
Normal file
82
source/screens/demo/examples/start.liquid
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
---
|
||||||
|
title: Start
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% assign bodyClass = 'body_start' -%}
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<main>
|
||||||
|
<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
|
||||||
|
<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
|
||||||
|
<input class="button_io" value="Suchen" type="submit"/>
|
||||||
|
</form>
|
||||||
|
<div class="blocks">
|
||||||
|
<article>
|
||||||
|
<section>
|
||||||
|
<h2><a href="">Name</a></h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<section>
|
||||||
|
<h2><a href="">Name</a></h2>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script>
|
||||||
|
// Page script
|
||||||
|
// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
|
||||||
|
const defaultOptions = {
|
||||||
|
kl: 'de-de',
|
||||||
|
kp: '-2',
|
||||||
|
kz: '-1',
|
||||||
|
// kae: 't',
|
||||||
|
k1: '-1'
|
||||||
|
};
|
||||||
|
let options = Object.assign({}, defaultOptions);
|
||||||
|
|
||||||
|
function setOptions(jsonOptions) {
|
||||||
|
if (!jsonOptions || typeof jsonOptions !== 'object') return;
|
||||||
|
|
||||||
|
options = Object.assign({}, options, jsonOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildSearchUrl(query) {
|
||||||
|
const base = 'https://duckduckgo.com/';
|
||||||
|
const params = new URLSearchParams({q: query});
|
||||||
|
|
||||||
|
for (const [k, v] of Object.entries(options)) {
|
||||||
|
if (v === undefined || v === null || v === '') continue;
|
||||||
|
|
||||||
|
params.set(k, String(v));
|
||||||
|
}
|
||||||
|
|
||||||
|
return base + '?' + params.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('www-search').addEventListener('submit', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const query = document.getElementById('qrySearch').value.trim();
|
||||||
|
|
||||||
|
if (!query) return;
|
||||||
|
|
||||||
|
const url = buildSearchUrl(query);
|
||||||
|
|
||||||
|
window.open(url, '_blank', 'noopener');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Example of setting options programmatically:
|
||||||
|
// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
60
source/screens/demo/examples/ui/cli.liquid
Normal file
60
source/screens/demo/examples/ui/cli.liquid
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
---
|
||||||
|
title: CLI
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_cli' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="cli">
|
||||||
|
<div id="history">
|
||||||
|
<pre>Previous prompt</pre>
|
||||||
|
</div>
|
||||||
|
<div id="line">
|
||||||
|
<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>></textarea>
|
||||||
|
<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
function resizeTextArea(textarea) {
|
||||||
|
const {style, value} = textarea;
|
||||||
|
|
||||||
|
style.height = style.minHeight = 'auto';
|
||||||
|
style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
|
||||||
|
style.height = `${textarea.scrollHeight}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const textarea = document.getElementById('prompt');
|
||||||
|
|
||||||
|
document
|
||||||
|
.body
|
||||||
|
.addEventListener('click', () => {
|
||||||
|
textarea.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
textarea.addEventListener('input', () => {
|
||||||
|
resizeTextArea(textarea);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const p = document.createElement("pre");
|
||||||
|
|
||||||
|
p.textContent = event.target.value;
|
||||||
|
document
|
||||||
|
.getElementById("history")
|
||||||
|
.appendChild(p);
|
||||||
|
// window.scrollTo(0, document.body.scrollHeight);
|
||||||
|
|
||||||
|
event.target.value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
49
source/screens/demo/examples/ui/drag.liquid
Executable file
49
source/screens/demo/examples/ui/drag.liquid
Executable file
|
|
@ -0,0 +1,49 @@
|
||||||
|
---
|
||||||
|
title: Drag
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<header class="io pos_fix pin_top pin_right pin_left">
|
||||||
|
<button data-action="add">Add</button>
|
||||||
|
</header>
|
||||||
|
<div id="space"></div>
|
||||||
|
<div>
|
||||||
|
<div id="test">
|
||||||
|
<div class="body_frame">
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<main></main>
|
||||||
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
<script src="/js/app.js"></script>
|
||||||
|
<script src="/js/drag.js"></script>
|
||||||
|
<script>
|
||||||
|
// Get the space element
|
||||||
|
const space = document.getElementById('space');
|
||||||
|
const add = document.querySelector('[data-action=add]');
|
||||||
|
const test = document.getElementById('test');
|
||||||
|
|
||||||
|
// Add event listener to the add space button
|
||||||
|
add.addEventListener('click', () => {
|
||||||
|
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
|
||||||
|
newDiv.createDiv();
|
||||||
|
newDiv.appendToFrame(space);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create a new NewDiv instance
|
||||||
|
const newDiv = new NewDiv(100, 100, 200, 200, '#000');
|
||||||
|
newDiv.createDiv();
|
||||||
|
newDiv.appendToFrame(space);
|
||||||
|
|
||||||
|
const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
|
||||||
|
explorer.createDiv();
|
||||||
|
explorer.appendToFrame(space);
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
145
source/screens/demo/examples/ui/explorer.liquid
Normal file
145
source/screens/demo/examples/ui/explorer.liquid
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
---
|
||||||
|
title: Explorer
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<main class="io">
|
||||||
|
<aside class="io">
|
||||||
|
<nav>
|
||||||
|
<span>location-pane</span>
|
||||||
|
<ul class="vertical">
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>Start/Home</span>
|
||||||
|
<i class="bi bi-pin-fill"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>System</span>
|
||||||
|
<i class="bi bi-pin-fill"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<hr>
|
||||||
|
<nav>
|
||||||
|
<ul class="vertical">
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>💽 disc link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>📁 folder link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>🔗 location link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<section>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="back">
|
||||||
|
<i class="bi bi-caret-left"></i>
|
||||||
|
</button>
|
||||||
|
<button title="up">
|
||||||
|
<i class="bi bi-caret-up"></i>
|
||||||
|
</button>
|
||||||
|
<button title="forward">
|
||||||
|
<i class="bi bi-caret-right"></i>
|
||||||
|
</button>
|
||||||
|
<button title="reload">
|
||||||
|
<i class="bi bi-arrow-clockwise"></i>
|
||||||
|
</button>
|
||||||
|
<input placeholder="//" type="text">
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<span>location-bar</span>
|
||||||
|
<hr class="vertical">
|
||||||
|
<button title="search">
|
||||||
|
<i class="bi bi-search"></i>
|
||||||
|
</button>
|
||||||
|
<input placeholder="*" type="text">
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="add">
|
||||||
|
<i class="bi bi-plus-circle"></i>
|
||||||
|
</button>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button title="cut">
|
||||||
|
<i class="bi bi-scissors"></i>
|
||||||
|
</button>
|
||||||
|
<button title="copy">
|
||||||
|
<i class="bi bi-copy"></i>
|
||||||
|
</button>
|
||||||
|
<button title="paste">
|
||||||
|
<i class="bi bi-clipboard-check-fill"></i>
|
||||||
|
</button>
|
||||||
|
<div class="spacer b"></div>
|
||||||
|
<button title="delete">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<hr class="vertical">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<button title="collapse">
|
||||||
|
<i class="bi bi-arrows-collapse"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button title="expand">
|
||||||
|
<i class="bi bi-arrows-expand-vertical"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<span>options-bar</span>
|
||||||
|
</nav>
|
||||||
|
<nav></nav>
|
||||||
|
</header>
|
||||||
|
<div id="content">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>name</th>
|
||||||
|
<th>date</th>
|
||||||
|
<th>type</th>
|
||||||
|
<th>size</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>YYYY-MM-DD</td>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>4KB</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>file</td>
|
||||||
|
<td>YYYY-MM-DD</td>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>1B</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{% render 'hippie/partials/frame-status.liquid' %}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||||
|
{% endblock %}
|
||||||
56
source/screens/demo/examples/ui/form.liquid
Normal file
56
source/screens/demo/examples/ui/form.liquid
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
---
|
||||||
|
title: Form
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<header class="io">
|
||||||
|
<h1>Formulare</h1>
|
||||||
|
<button data-action="add">Hinzufügen</button>
|
||||||
|
<button data-action="change">Ändern</button>
|
||||||
|
<hr>
|
||||||
|
</header>
|
||||||
|
<form id="form" action="">
|
||||||
|
<div id="grid">
|
||||||
|
<div>a</div>
|
||||||
|
<div>b</div>
|
||||||
|
<div>c</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const add = document.querySelector('[data-action=add]');
|
||||||
|
const change = document.querySelector('[data-action=change]');
|
||||||
|
const grid = document.getElementById('grid');
|
||||||
|
|
||||||
|
add.addEventListener('click', (e) => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
|
||||||
|
item.style.backgroundColor = '#f0f';
|
||||||
|
item.textContent = 'c'
|
||||||
|
|
||||||
|
grid.appendChild(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
change.addEventListener('click', (e) => {
|
||||||
|
changeLayout(grid);
|
||||||
|
});
|
||||||
|
|
||||||
|
function changeLayout(grid) {
|
||||||
|
const currentTemplate = grid.style.gridTemplateColumns;
|
||||||
|
|
||||||
|
if (currentTemplate === 'repeat(4, 1fr)') {
|
||||||
|
grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
|
||||||
|
} else {
|
||||||
|
grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
78
source/screens/demo/examples/ui/gallery.liquid
Executable file
78
source/screens/demo/examples/ui/gallery.liquid
Executable file
|
|
@ -0,0 +1,78 @@
|
||||||
|
---
|
||||||
|
title: Gallery
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<main class="io">
|
||||||
|
<section>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<div class="group-input">
|
||||||
|
<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
|
||||||
|
<label class="right" for="setSize">Größe</label>
|
||||||
|
</div>
|
||||||
|
<button title="details">
|
||||||
|
<i class="bi bi-layout-sidebar-reverse"></i> Details
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<nav></nav>
|
||||||
|
</header>
|
||||||
|
<div class="gallery">
|
||||||
|
<div>A</div>
|
||||||
|
<div>B</div>
|
||||||
|
<div>C</div>
|
||||||
|
</div>
|
||||||
|
{% render 'hippie/partials/frame-status.liquid' %}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const sizeSlider = document.getElementById('setSize');
|
||||||
|
const galleryItems = document.querySelectorAll('.gallery > div');
|
||||||
|
|
||||||
|
// Set the default size
|
||||||
|
const defaultSize = 128; // In pixels
|
||||||
|
const minSize = 16; // Minimum width in pixels
|
||||||
|
const steps = 10;
|
||||||
|
// Define specific sizes for each step (from 1 to 10)
|
||||||
|
const sizes = [16, 32, 64, 96, 128, 256, 512, 1024, 2048]; // Sizes in pixels
|
||||||
|
|
||||||
|
|
||||||
|
// Calculate width based on slider value
|
||||||
|
function calculateWidth(value) {
|
||||||
|
// Map 1-10 to a pixel width
|
||||||
|
return Math.floor(minSize + (value - 1) * (defaultSize - minSize) / (steps - 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set initial size
|
||||||
|
galleryItems.forEach(item => {
|
||||||
|
item.style.width = `${defaultSize}px`;
|
||||||
|
item.style.width = `${sizes[5]}px`; // Initial width based on the default step (8 corresponds to index 7)
|
||||||
|
});
|
||||||
|
|
||||||
|
sizeSlider.addEventListener('input', function () {
|
||||||
|
console.debug('Change size');
|
||||||
|
// const newSize = calculateWidth(Number(sizeSlider.value));
|
||||||
|
// galleryItems.forEach(item => {
|
||||||
|
// item.style.width = `${newSize}px`;
|
||||||
|
// });
|
||||||
|
const selectedStep = Number(sizeSlider.value) - 1; // Adjust for zero-indexing
|
||||||
|
const newSize = sizes[selectedStep]; // Get size from the array using slider value
|
||||||
|
galleryItems.forEach(item => {
|
||||||
|
item.style.width = `${newSize}px`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize slider to default
|
||||||
|
sizeSlider.value = 6; // Sets default to 128px width
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
24
source/screens/demo/examples/ui/index.liquid
Normal file
24
source/screens/demo/examples/ui/index.liquid
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
title: UI
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
- index
|
||||||
|
---
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="sec_main_center">
|
||||||
|
<nav role="doc-toc">
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<ul class="list_link">
|
||||||
|
{%- for ui in collections.ui -%}
|
||||||
|
<li>
|
||||||
|
<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
399
source/screens/demo/examples/ui/table.liquid
Executable file
399
source/screens/demo/examples/ui/table.liquid
Executable file
|
|
@ -0,0 +1,399 @@
|
||||||
|
---
|
||||||
|
title: Table
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<main class="io">
|
||||||
|
<section>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<div class="group-input">
|
||||||
|
<button id="addEntry" title="Add entry">
|
||||||
|
<i class="bi bi-plus-circle"></i>
|
||||||
|
</button>
|
||||||
|
<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
|
||||||
|
<label for="setScroll">Scroll to new entry</label>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<button id="tglIndex" title="Toggle index column">
|
||||||
|
<i class="bi bi-hash"></i>
|
||||||
|
</button>
|
||||||
|
<div class="group-input">
|
||||||
|
<select id="sltNum" name="position-number">
|
||||||
|
<option value="" selected>None</option>
|
||||||
|
<option value="numeric">123</option>
|
||||||
|
<option value="latin">ABC</option>
|
||||||
|
<option value="roman">IVX</option>
|
||||||
|
</select>
|
||||||
|
<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
|
||||||
|
</div>
|
||||||
|
{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<table id="content" class="draggable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="min" scope="col" title="Index">#</th>
|
||||||
|
<th class="min" scope="col"></th>
|
||||||
|
<th scope="col" title="Position">#</th>
|
||||||
|
<th scope="col">Number</th>
|
||||||
|
<th scope="col">Name</th>
|
||||||
|
<th scope="col">Description</th>
|
||||||
|
<th scope="col">Amount</th>
|
||||||
|
<th scope="col">Unit</th>
|
||||||
|
<th scope="col">Price</th>
|
||||||
|
<th scope="col">Sum</th>
|
||||||
|
<th class="min" scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="positions"></tbody>
|
||||||
|
</table>
|
||||||
|
{% render 'hippie/partials/frame-status.liquid' %}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<template id="rowDefault">
|
||||||
|
<tr draggable="true">
|
||||||
|
<th scope="row"></th>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
<td class="pos-num"></td>
|
||||||
|
<td class="rigid"></td>
|
||||||
|
<td></td>
|
||||||
|
{% comment %}<td class="ellipsis"></td>{% endcomment %}
|
||||||
|
<td>
|
||||||
|
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
||||||
|
</td>
|
||||||
|
<td><input class="input_io" name="amount" type="number"></td>
|
||||||
|
<td>
|
||||||
|
<select class="io_select" name="units">
|
||||||
|
<option value="">None</option>
|
||||||
|
<option value="piece">Piece(s)</option>
|
||||||
|
<option value="hour">Hour(s)</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="Event"><i class="bi bi-calendar-event"></i></button>
|
||||||
|
<button title="Note"><i class="bi bi-journal"></i></button>
|
||||||
|
<button title="Delete"><i class="bi bi-trash"></i></button>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template id="rowArticle">
|
||||||
|
<tr draggable="true">
|
||||||
|
<th scope="row"></th>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
<td class="pos-num"></td>
|
||||||
|
<td class="rigid"></td>
|
||||||
|
<td></td>
|
||||||
|
{% comment %}<td class="ellipsis"></td>{% endcomment %}
|
||||||
|
<td>
|
||||||
|
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
||||||
|
</td>
|
||||||
|
<td><input name="amount" type="number"></td>
|
||||||
|
<td>
|
||||||
|
<select name="units">
|
||||||
|
<option value="">None</option>
|
||||||
|
<option value="piece">Piece(s)</option>
|
||||||
|
<option value="hour">Hour(s)</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="Event"><i class="bi bi-calendar-event"></i></button>
|
||||||
|
<button title="Note"><i class="bi bi-journal"></i></button>
|
||||||
|
<button title="Delete"><i class="bi bi-trash"></i></button>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template id="rowText">
|
||||||
|
<tr draggable="true">
|
||||||
|
<th scope="row"></th>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
<td class="pos-num"></td>
|
||||||
|
<td class="rigid"></td>
|
||||||
|
<td colspan="6">
|
||||||
|
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
||||||
|
</td>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="Event"><i class="bi bi-calendar-event"></i></button>
|
||||||
|
<button title="Note"><i class="bi bi-journal"></i></button>
|
||||||
|
<button title="Delete"><i class="bi bi-trash"></i></button>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template id="rowGroup">
|
||||||
|
<tr draggable="true">
|
||||||
|
<th scope="row"></th>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
|
<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
<td class="pos-num"></td>
|
||||||
|
<td class="rigid"></td>
|
||||||
|
<td></td>
|
||||||
|
{% comment %}<td class="ellipsis"></td>{% endcomment %}
|
||||||
|
<td>
|
||||||
|
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
||||||
|
</td>
|
||||||
|
<td><input name="amount" type="number"></td>
|
||||||
|
<td>
|
||||||
|
<select name="units">
|
||||||
|
<option value="">None</option>
|
||||||
|
<option value="piece">Piece(s)</option>
|
||||||
|
<option value="hour">Hour(s)</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="unit"></td>
|
||||||
|
<td class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="Event"><i class="bi bi-calendar-event"></i></button>
|
||||||
|
<button title="Note"><i class="bi bi-journal"></i></button>
|
||||||
|
<button title="Delete"><i class="bi bi-trash"></i></button>
|
||||||
|
</nav>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const placeholderNames = [
|
||||||
|
'Mac',
|
||||||
|
'Sonic',
|
||||||
|
'Furiosa',
|
||||||
|
'Leia',
|
||||||
|
'Frisbee',
|
||||||
|
'Ripley',
|
||||||
|
'Motoko',
|
||||||
|
'Lupin',
|
||||||
|
'Yoda',
|
||||||
|
'Spike',
|
||||||
|
'Obelix',
|
||||||
|
'Samus',
|
||||||
|
'Plisken'
|
||||||
|
];
|
||||||
|
const placeholderAttributes = [
|
||||||
|
'blue',
|
||||||
|
'tall',
|
||||||
|
'clever',
|
||||||
|
'true'
|
||||||
|
];
|
||||||
|
const placeholderContents = [
|
||||||
|
'Description - At vero eos et accusam et justo duo dolores et ea rebum.',
|
||||||
|
'',
|
||||||
|
"Content with linebreaks - \nPhasellus finibus mollis diam non posuere. Vestibulum porttitor volutpat consectetur. Duis neque sapien, tincidunt ac odio vel, laoreet ultricies ligula. Suspendisse erat eros, volutpat vel fringilla at, placerat ac nisi. \nNulla arcu elit, facilisis egestas risus ac, aliquet varius sapien. Sed et nisi fringilla nibh ultrices sagittis ac in nisl. \nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porta lectus ac pharetra feugiat. In ligula nunc, porttitor non arcu vel, feugiat tempor mi. Aenean pellentesque ipsum ac ligula pulvinar, vel auctor diam vehicula. Sed at arcu lacus.",
|
||||||
|
'Very long content - Suspendisse lectus orci, convallis vitae sapien et, iaculis cursus magna. Pellentesque ultrices sodales eros eget vehicula. Aliquam tincidunt nulla non finibus ullamcorper. Ut accumsan nisi non aliquam fermentum. Vestibulum sit amet purus eu dolor vulputate pretium in eget libero. Donec vitae quam in leo eleifend semper. Cras mollis orci augue, vitae aliquam quam consequat quis. Donec sed nisi sed nulla ultricies ultricies quis ac erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris euismod mollis neque sit amet varius. In malesuada nibh faucibus orci tincidunt, in elementum sapien pretium. Cras vel urna felis. Proin cursus tempor egestas. Nulla facilisis justo enim. Mauris fermentum, tortor a malesuada facilisis, leo tortor aliquam elit, sed sodales ipsum tortor et tellus.',
|
||||||
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
|
||||||
|
];
|
||||||
|
|
||||||
|
const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
|
||||||
|
|
||||||
|
const content = document.querySelector('main.io section > table');
|
||||||
|
const tbodyPosition = document.getElementById('positions');
|
||||||
|
|
||||||
|
tbodyPosition.addEventListener('click', (event) => {
|
||||||
|
const rows = tbodyPosition.querySelectorAll('tr');
|
||||||
|
const rowTarget = event.target.closest('tr');
|
||||||
|
|
||||||
|
if (rowTarget && event.button === 0) {
|
||||||
|
for (row of rows) {
|
||||||
|
row.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
rowTarget.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let i = 0; i < 256; i++) {
|
||||||
|
const clone = cloneRow();
|
||||||
|
const tr = clone.querySelector('tr');
|
||||||
|
const th = clone.querySelector('th');
|
||||||
|
const td = clone.querySelectorAll('td');
|
||||||
|
|
||||||
|
const j = i % placeholderNames.length;
|
||||||
|
const k = randomIntFrom(0, placeholderContents.length - 1);
|
||||||
|
const amount = randomIntFrom(1, 100);
|
||||||
|
const price = randomFloatFrom(1, 10000, 2);
|
||||||
|
const sum = amount * price;
|
||||||
|
|
||||||
|
tr.setAttribute('data-id', i);
|
||||||
|
th.textContent = i + 1;
|
||||||
|
td[2].textContent = getRandomFormattedString();
|
||||||
|
td[3].textContent = placeholderNames[j];
|
||||||
|
// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
|
||||||
|
td[4].firstElementChild.textContent = placeholderContents[k];
|
||||||
|
td[5].firstElementChild.value = amount;
|
||||||
|
td[5].firstElementChild.style.width = '4em';
|
||||||
|
td[7].textContent = currencyEuro.format(price);
|
||||||
|
td[8].textContent = currencyEuro.format(sum);
|
||||||
|
|
||||||
|
tbodyPosition.appendChild(clone);
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectNum = document.getElementById('sltNum');
|
||||||
|
const buttonPosNum = document.getElementById('setPosNum');
|
||||||
|
|
||||||
|
buttonPosNum.addEventListener('click', () => {
|
||||||
|
const numType = selectNum.value;
|
||||||
|
const cells = tbodyPosition.querySelectorAll('td.pos-num');
|
||||||
|
let num = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < cells.length; i++) {
|
||||||
|
switch (numType) {
|
||||||
|
case 'numeric':
|
||||||
|
num = (i + 1).toString();
|
||||||
|
break;
|
||||||
|
case 'roman':
|
||||||
|
num = convertToRomanNumeral((i + 1)).toString();
|
||||||
|
break;
|
||||||
|
case '':
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
|
||||||
|
cells[i].textContent = num;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const buttonIndex = document.getElementById('tglIndex');
|
||||||
|
|
||||||
|
buttonIndex.addEventListener('click', () => {
|
||||||
|
const cells = content.querySelectorAll('th:first-child');
|
||||||
|
const isHidden = cells[0].classList.contains('di_none');
|
||||||
|
|
||||||
|
for (cell of cells) {
|
||||||
|
if (isHidden) {
|
||||||
|
cell.classList.remove('di_none');
|
||||||
|
} else {
|
||||||
|
cell.classList.add('di_none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const buttonAdd = document.getElementById('addEntry');
|
||||||
|
const checkScroll = document.getElementById('setScroll');
|
||||||
|
|
||||||
|
buttonAdd.addEventListener('click', () => {
|
||||||
|
const clone = cloneRow();
|
||||||
|
const viewportHeight = window.innerHeight;
|
||||||
|
const elementActive = tbodyPosition.querySelector('tr.active');
|
||||||
|
let elementNew = undefined;
|
||||||
|
let elementBound = undefined;
|
||||||
|
|
||||||
|
if (elementActive) {
|
||||||
|
elementActive.after(clone);
|
||||||
|
elementNew = elementActive.nextElementSibling;
|
||||||
|
} else {
|
||||||
|
tbodyPosition.appendChild(clone);
|
||||||
|
elementNew = tbodyPosition.lastElementChild;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkScroll.checked) {
|
||||||
|
elementBound = elementNew.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (elementBound.bottom > viewportHeight || elementBound.top < 0) {
|
||||||
|
elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reindexRows(tbodyPosition);
|
||||||
|
});
|
||||||
|
|
||||||
|
let draggedRow = null;
|
||||||
|
|
||||||
|
tbodyPosition.addEventListener('dragstart', (event) => {
|
||||||
|
const rowTarget = event.target.closest('tr[draggable="true"]');
|
||||||
|
|
||||||
|
if (rowTarget) {
|
||||||
|
draggedRow = rowTarget;
|
||||||
|
rowTarget.classList.add('dragging');
|
||||||
|
event.dataTransfer.effectAllowed = 'move';
|
||||||
|
|
||||||
|
console.debug('Drag', rowTarget);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tbodyPosition.addEventListener('dragend', () => {
|
||||||
|
if (draggedRow) {
|
||||||
|
draggedRow.classList.remove('dragging');
|
||||||
|
draggedRow = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tbodyPosition.addEventListener('dragover', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
|
||||||
|
const rowTarget = event.target.closest('tr');
|
||||||
|
|
||||||
|
if (rowTarget && rowTarget !== draggedRow) {
|
||||||
|
const rows = [...tbodyPosition.querySelectorAll('tr')];
|
||||||
|
const draggedIndex = rows.indexOf(draggedRow);
|
||||||
|
const targetIndex = rows.indexOf(rowTarget);
|
||||||
|
|
||||||
|
if (draggedIndex < targetIndex) {
|
||||||
|
rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
|
||||||
|
} else {
|
||||||
|
rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tbodyPosition.addEventListener('drop', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
reindexRows(event.currentTarget);
|
||||||
|
|
||||||
|
console.debug('Drop');
|
||||||
|
});
|
||||||
|
|
||||||
|
function cloneRow(type = 'default') {
|
||||||
|
type = 'row' + capitalizeFirstLetter(type);
|
||||||
|
|
||||||
|
const rowFragment = document.getElementById(type).content;
|
||||||
|
// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
|
||||||
|
|
||||||
|
return document.importNode(rowFragment, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reindexRows(parent, selector = 'tr') {
|
||||||
|
const rows = parent.querySelectorAll(selector);
|
||||||
|
let th = undefined;
|
||||||
|
|
||||||
|
for (let i = 0; i < rows.length; i++) {
|
||||||
|
th = rows[i].querySelector('th');
|
||||||
|
th.textContent = i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
45
source/screens/demo/examples/ui/tile.liquid
Normal file
45
source/screens/demo/examples/ui/tile.liquid
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
title: Tile
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_new' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
|
||||||
|
<header class="area menu io">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Func 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Func 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="area grid">
|
||||||
|
<div class="item">1</div>
|
||||||
|
<div class="item">2</div>
|
||||||
|
<div class="item">3</div>
|
||||||
|
<div class="item">4</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const timeElement = document.getElementById('time');
|
||||||
|
const timeDisplay = new TimeDisplay(timeElement);
|
||||||
|
|
||||||
|
ongoing();
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (event) => {
|
||||||
|
document
|
||||||
|
.getElementById('log')
|
||||||
|
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
13
source/screens/demo/examples/ui/tui.liquid
Normal file
13
source/screens/demo/examples/ui/tui.liquid
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
title: TUI
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||||||
|
<main class="io"></main>
|
||||||
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||||
|
{% endblock %}
|
||||||
79
source/screens/demo/examples/ui/windows.liquid
Normal file
79
source/screens/demo/examples/ui/windows.liquid
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
---
|
||||||
|
title: Windows
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_frame' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="task-bar">
|
||||||
|
<nav>
|
||||||
|
<button data-action="start"><i class="bi bi-microsoft"></i></button>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<button><i class="bi bi-search"></i></button>
|
||||||
|
<button><i class="bi bi-layers-half"></i></button>
|
||||||
|
</nav>
|
||||||
|
<nav class="big">
|
||||||
|
<button><i class="bi bi-folder"></i></button>
|
||||||
|
<button><i class="bi bi-terminal"></i></button>
|
||||||
|
<button id="setPause"><i class="bi bi-pause"></i></button>
|
||||||
|
<button id="setPlay"><i class="bi bi-play"></i></button>
|
||||||
|
</nav>
|
||||||
|
<div>
|
||||||
|
<nav class="small">
|
||||||
|
<button><i class="bi bi-chevron-up"></i></button>
|
||||||
|
<button><i class="bi bi-steam"></i></button>
|
||||||
|
<button><i class="bi bi-router"></i></button>
|
||||||
|
<button><i class="bi bi-mic"></i></button>
|
||||||
|
<button><i class="bi bi-volume-down"></i></button>
|
||||||
|
</nav>
|
||||||
|
<div class="clock">
|
||||||
|
<span id="time">##:##</span>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="screen-space"></div>
|
||||||
|
<div id="placeholder">
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box_brd"></div>
|
||||||
|
<div>
|
||||||
|
<span>task bar</span>
|
||||||
|
<div class="box_brd"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
|
||||||
|
<script src="/js/windows.js"></script>
|
||||||
|
<script>
|
||||||
|
console.log(HIPPIE.brand);
|
||||||
|
// Get the space element
|
||||||
|
const space = document.getElementById('screen-space');
|
||||||
|
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');
|
||||||
|
|
||||||
|
const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
|
||||||
|
const timeFormat = {hour: '2-digit', minute: '2-digit'};
|
||||||
|
const timeDisplay = new TimeDisplay(timeElement, timeFormat);
|
||||||
|
|
||||||
|
document.getElementById('setPause').addEventListener('click', () => {
|
||||||
|
timeDisplay.pause();
|
||||||
|
console.info('Pause time');
|
||||||
|
});
|
||||||
|
document.getElementById('setPlay').addEventListener('click', () => {
|
||||||
|
timeDisplay.resume();
|
||||||
|
console.info('Resume time');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
65
source/screens/demo/index.liquid
Normal file
65
source/screens/demo/index.liquid
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
---
|
||||||
|
permalink: "/"
|
||||||
|
title: Index
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% assign pageClass = 'h_full_view' -%}
|
||||||
|
{% layout 'hippie/full.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="hello">
|
||||||
|
<h2>This is {{ hippie.brand | upcase }}</h2>
|
||||||
|
<p>You can start using it by replacing this file with your own index page.</p>
|
||||||
|
<p>To do this you need to create a file
|
||||||
|
<code>/index.njk</code>
|
||||||
|
inside the
|
||||||
|
<i>source/screens</i>
|
||||||
|
folder. You can also create a
|
||||||
|
<code>data.json</code>
|
||||||
|
file inside the
|
||||||
|
<i>source/templates</i>
|
||||||
|
folder as a data source for your nunjucks files.</p>
|
||||||
|
<p>For a very basic start you can make a copy of the demo page
|
||||||
|
<code>blank.njk</code>. You can find it at
|
||||||
|
<i>/source/screens/demo</i>.</p>
|
||||||
|
<p>The
|
||||||
|
<i>source/demo</i>
|
||||||
|
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole
|
||||||
|
page layouts.<br/>Follow the white rabbit.</p>
|
||||||
|
<div class="pos_rel">
|
||||||
|
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||||
|
<h3>Overview</h3>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% for link in collections.demoIndex %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h3>Page</h3>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
|
||||||
|
|
||||||
|
{% for link in pagesByTitle %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<h3>Example</h3>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% for link in collections.demoExample %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
40
source/screens/demo/introduction.liquid
Normal file
40
source/screens/demo/introduction.liquid
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
---
|
||||||
|
title: Introduction
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% layout 'hippie/page.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}Einführung{% endblock %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<header>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Introduction to HIPPIE</h1>
|
||||||
|
<p>Hippie interweaves preeminent personal interface elements.</p>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<p>…</p>
|
||||||
|
<p>Contact: <a id="special" href=""></a>
|
||||||
|
</p>
|
||||||
|
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
assetsLoaded = true;
|
||||||
|
logPerf('Assets loaded.', assetsLoaded);
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
|
||||||
|
composeMail('.general', 'name', 'domain', 'tld', '', '')
|
||||||
|
|
||||||
|
logPerf('Application ready... not.');
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
314
source/screens/demo/layouts.liquid
Normal file
314
source/screens/demo/layouts.liquid
Normal file
|
|
@ -0,0 +1,314 @@
|
||||||
|
---
|
||||||
|
title: Layouts
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% layout 'hippie/page.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}Gestaltungen{% endblock %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Sammlung formatierter Elemente</h1>
|
||||||
|
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Bereiche (sections)</h2>
|
||||||
|
<h3>section</h3>
|
||||||
|
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
|
||||||
|
<section class="overflow">
|
||||||
|
<div class="float_space_left demo__avatar">
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
|
||||||
|
</div>
|
||||||
|
<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
|
||||||
|
<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
|
||||||
|
</section>
|
||||||
|
<h3>nav</h3>
|
||||||
|
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
|
||||||
|
<div class="overflow">
|
||||||
|
<nav class="float_space_left">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
|
||||||
|
<nav class="nav_horizontal">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
||||||
|
<div class="overflow">
|
||||||
|
<nav class="nav_center_old">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<h3>header</h3>
|
||||||
|
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
|
<header class="header_page demo__header header_fancy">
|
||||||
|
<h1>Aufmacher</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio,
|
||||||
|
volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh
|
||||||
|
quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||||
|
<nav class="nav_separate_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Mensch</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Pflanze</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="nav_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Blau</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Gelb</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
|
<div class="box_space h_basic">
|
||||||
|
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||||
|
<nav class="nav_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Eins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Zwei</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="pos_abs pin_bottom width_full">
|
||||||
|
<pre
|
||||||
|
class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||||
|
<footer id="js_demo_stop" class="demo_footer">
|
||||||
|
<nav class="nav_column nav_separate">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Alpha</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Bravo</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Charlie</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Delta</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p class="txt_center demo__credits">
|
||||||
|
<i class="i_bright">👨💻</i>
|
||||||
|
mit
|
||||||
|
<i class="i_bright">❤</i>
|
||||||
|
von
|
||||||
|
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Interaktiv (interactive)</h2>
|
||||||
|
<h3>input</h3>
|
||||||
|
<div class="flex inline">
|
||||||
|
<input value="Undefiniert"/>
|
||||||
|
<input type="text" size="8" value="Text"/>
|
||||||
|
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
|
||||||
|
<input type="button" value="Auswählen">
|
||||||
|
<input type="submit" value="Senden" disabled="disabled"/>
|
||||||
|
</div>
|
||||||
|
<h3>form</h3>
|
||||||
|
<form method="get">
|
||||||
|
<p>Show me a
|
||||||
|
<select name="F">
|
||||||
|
<option value="0">Plain list</option>
|
||||||
|
<option value="1" selected="selected">Fancy list</option>
|
||||||
|
<option value="2">Table list</option>
|
||||||
|
</select>
|
||||||
|
Sorted by
|
||||||
|
<select name="C">
|
||||||
|
<option value="N" selected="selected">Name</option>
|
||||||
|
<option value="M">Date Modified</option>
|
||||||
|
<option value="S">Size</option>
|
||||||
|
<option value="D">Description</option>
|
||||||
|
</select>
|
||||||
|
<select name="O">
|
||||||
|
<option value="A" selected="selected">Ascending</option>
|
||||||
|
<option value="D">Descending</option>
|
||||||
|
</select>
|
||||||
|
<select name="V">
|
||||||
|
<option value="0" selected="selected">in Normal order</option>
|
||||||
|
<option value="1">in Version order</option>
|
||||||
|
</select>
|
||||||
|
Matching
|
||||||
|
<input type="text" name="P" value="*"/>
|
||||||
|
<input type="submit" name="X" value="Go"/>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Gruppierung (grouping)</h2>
|
||||||
|
<h3>p</h3>
|
||||||
|
<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
|
||||||
|
<p class="txt_right">Rechts</p>
|
||||||
|
<p class="txt_center">Mittig</p>
|
||||||
|
<p class="txt_left">Links</p>
|
||||||
|
<h3>h*</h3>
|
||||||
|
<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
|
||||||
|
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||||
|
<p class="txt_tiny">Mit winzigem Textabsatz</p>
|
||||||
|
<pre class="pre_code"><code>a>h4</code></pre>
|
||||||
|
<a href="">
|
||||||
|
<h4>Überschrift als Block-Verweis</h4>
|
||||||
|
</a>
|
||||||
|
<h1>Überschrift 1</h1>
|
||||||
|
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
|
||||||
|
<h2>Überschrift 2</h2>
|
||||||
|
<h2>kann das ebenso.</h2>
|
||||||
|
<h3>hr</h3>
|
||||||
|
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
||||||
|
<hr class="space_even_half">
|
||||||
|
<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
|
||||||
|
<hr class="dotted space_even_fourth">
|
||||||
|
<h3>ul</h3>
|
||||||
|
<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
|
||||||
|
<nav>
|
||||||
|
<ul class="list_link">
|
||||||
|
<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
|
||||||
|
<li>
|
||||||
|
<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h3>div</h3>
|
||||||
|
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
|
||||||
|
<div class="space_left_fourth">
|
||||||
|
<hr/>
|
||||||
|
<p>Eingerückter Inhalt</p>
|
||||||
|
<hr/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Tabellen</h2>
|
||||||
|
<pre class="pre_code"><code>table.link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
|
||||||
|
<table class="link js_pop">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> </th>
|
||||||
|
<th>Ab / Zy</th>
|
||||||
|
<th>Neu / Alt</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="icon" rowspan="2">■</td>
|
||||||
|
<td class="link">
|
||||||
|
<span>Name</span>
|
||||||
|
<a href="" target="_blank">URL</a>
|
||||||
|
</td>
|
||||||
|
<td rowspan="2">YYYY-MM-DD</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text">
|
||||||
|
<div class="shorten">Beschreibung</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="icon" rowspan="2">■</td>
|
||||||
|
<td class="link">
|
||||||
|
<span>Name</span>
|
||||||
|
<a href="" target="_blank">URL</a>
|
||||||
|
</td>
|
||||||
|
<td rowspan="2">YYYY-MM-DD</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text">
|
||||||
|
<div class="shorten">Beschreibung</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>Eingebettet</h2>
|
||||||
|
<div class="demo__flag">
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
|
<script>
|
||||||
|
assetsLoaded = true;
|
||||||
|
logPerf('Assets loaded.', assetsLoaded);
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$(document).ready(function () {
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
5
source/screens/demo/pages/blank.liquid
Normal file
5
source/screens/demo/pages/blank.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Blank
|
||||||
|
---
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% layout 'hippie/simple.liquid' %}
|
||||||
13
source/screens/demo/pages/default.liquid
Normal file
13
source/screens/demo/pages/default.liquid
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
title: Default
|
||||||
|
---
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% assign pageClass = 'default' -%}
|
||||||
|
{% assign bodyClass = 'default' -%}
|
||||||
|
{% layout 'hippie/default.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- {{ title }} body -->
|
||||||
|
{% endblock %}
|
||||||
19
source/screens/demo/pages/error/304.liquid
Normal file
19
source/screens/demo/pages/error/304.liquid
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
title: 304
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Umleitung</h3>
|
||||||
|
<p>Unverändert <dfn>Not Modified</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
|
||||||
|
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird
|
||||||
|
deshalb nicht übertragen. Zu den Einzelheiten siehe <a
|
||||||
|
href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.
|
||||||
|
</p>
|
||||||
|
<p class="quote_source"><a
|
||||||
|
href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
16
source/screens/demo/pages/error/400.liquid
Normal file
16
source/screens/demo/pages/error/400.liquid
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
title: 400
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Client-Fehler</h3>
|
||||||
|
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
17
source/screens/demo/pages/error/401.liquid
Normal file
17
source/screens/demo/pages/error/401.liquid
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
title: 401
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Client-Fehler</h3>
|
||||||
|
<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt
|
||||||
|
werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
17
source/screens/demo/pages/error/403.liquid
Normal file
17
source/screens/demo/pages/error/403.liquid
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
title: 403
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Client-Fehler</h3>
|
||||||
|
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer
|
||||||
|
nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
18
source/screens/demo/pages/error/404.liquid
Normal file
18
source/screens/demo/pages/error/404.liquid
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
title: 404
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Client-Fehler</h3>
|
||||||
|
<p>Hier ist nichts. <dfn>Not Found</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine
|
||||||
|
Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote
|
||||||
|
Links bezeichnet.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
16
source/screens/demo/pages/error/408.liquid
Normal file
16
source/screens/demo/pages/error/408.liquid
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
title: 408
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Client-Fehler</h3>
|
||||||
|
<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
16
source/screens/demo/pages/error/500.liquid
Normal file
16
source/screens/demo/pages/error/500.liquid
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
title: 500
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Server-Fehler</h3>
|
||||||
|
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
|
||||||
|
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
18
source/screens/demo/pages/error/503.liquid
Normal file
18
source/screens/demo/pages/error/503.liquid
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
title: 503
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_status' %}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<h3>Server-Fehler</h3>
|
||||||
|
<p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
|
||||||
|
<p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein
|
||||||
|
„Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage
|
||||||
|
eventuell bearbeitet werden könnte.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
{% endblock %}
|
||||||
8
source/screens/demo/pages/hello.md
Normal file
8
source/screens/demo/pages/hello.md
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
title: "Hello World"
|
||||||
|
layout: hippie/world.liquid
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ title }}
|
||||||
|
|
||||||
|
This is a simple example for a *screen* written in Markdown, using Liquid *templates*.
|
||||||
12
source/screens/demo/pages/maintenance.liquid
Normal file
12
source/screens/demo/pages/maintenance.liquid
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
title: Maintenance
|
||||||
|
---
|
||||||
|
{% assign pageClass = 'h_full_view' -%}
|
||||||
|
{% layout 'hippie/status.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<hgroup id="root" class="txt_center">
|
||||||
|
<h1 class="txt_hero txt_gradient">HIPPIE</h1>
|
||||||
|
<p>Diese Seite wird gerade gewartet.</p>
|
||||||
|
</hgroup>
|
||||||
|
{% endblock %}
|
||||||
3
source/screens/demo/pages/pages.json
Normal file
3
source/screens/demo/pages/pages.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"tags": "demoPage"
|
||||||
|
}
|
||||||
6
source/style/_demo_config.scss
Normal file
6
source/style/_demo_config.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Override for configuration file
|
||||||
|
// All variables setup with !default in global/_config.scss can be used
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// $color_back_basic: beige;
|
||||||
|
// $color_link_basic: crimson;
|
||||||
19
source/style/demo.scss
Normal file
19
source/style/demo.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
|
||||||
|
// Then import your config and hippie
|
||||||
|
// NOTE: No css rules allowed in here
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
@use "demo_config";
|
||||||
|
@use "hippie-style/hippie";
|
||||||
|
|
||||||
|
// Additional Modules and variables
|
||||||
|
// in dependency to other basic styles
|
||||||
|
// could be defined here
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
@use "modules/card/card_module";
|
||||||
|
@use "modules/portal/portal_module";
|
||||||
|
@use "modules/songbook/songbook_module";
|
||||||
|
@use "modules/demo/demo_module";
|
||||||
|
@use "modules/start";
|
||||||
|
@use "modules/clock";
|
||||||
|
@use "modules/game";
|
||||||
|
// @use "modules/YOUR-MODULE/YOUR-FILES";
|
||||||
13
source/style/demo_basic.scss
Normal file
13
source/style/demo_basic.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
|
||||||
|
// Then import your config and hippie
|
||||||
|
// NOTE // No css rules allowed in here
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
@use "demo_config";
|
||||||
|
@use "hippie-style/basic";
|
||||||
|
|
||||||
|
|
||||||
|
// Additional Modules and variables
|
||||||
|
// in dependency to other basic styles
|
||||||
|
// could be defined here
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// @use "modules/YOUR-MODULE/YOUR-FILES";
|
||||||
1
source/style/hippie-style
Submodule
1
source/style/hippie-style
Submodule
|
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96
|
||||||
19
source/style/modules/_clock.scss
Normal file
19
source/style/modules/_clock.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
@use "../hippie-style/hippie";
|
||||||
|
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
.body_clock {
|
||||||
|
header {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "content-top");
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
source/style/modules/_game.scss
Normal file
3
source/style/modules/_game.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.body_game {
|
||||||
|
background-color: hotpink;
|
||||||
|
}
|
||||||
15
source/style/modules/_start.scss
Normal file
15
source/style/modules/_start.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@use "../hippie-style/hippie";
|
||||||
|
|
||||||
|
.body_start {
|
||||||
|
main {
|
||||||
|
@extend .sec_main_center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#www-search {
|
||||||
|
input[type="text"] {
|
||||||
|
flex: 1;
|
||||||
|
padding: hippie.$padding_basic;
|
||||||
|
line-height: hippie.$line_text_basic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
83
source/style/modules/card/_card_module.scss
Normal file
83
source/style/modules/card/_card_module.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
// Card module styles
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
.html_card {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
|
.card_bkg {
|
||||||
|
@extend %full_parent;
|
||||||
|
transition-duration: 800ms;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: top;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
& > svg {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: hippie.$family_text_card;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
position: relative;
|
||||||
|
padding: 64px 64px 24px 64px;
|
||||||
|
border: 1px solid #FFF;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 16px 0;
|
||||||
|
color: #1E1E1E;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.4em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marked {
|
||||||
|
// padding-left: 1em;
|
||||||
|
// text-indent: -1em;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "*\0000a0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.decent {
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #F4F9FA;
|
||||||
|
background-color: #0C85FF;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
290
source/style/modules/demo/_demo_module.scss
Normal file
290
source/style/modules/demo/_demo_module.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
.demo__intro {
|
||||||
|
@extend .sec_main_center;
|
||||||
|
@extend .sec_main_status;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__status {
|
||||||
|
@extend .sec_main_status;
|
||||||
|
position: relative;
|
||||||
|
min-height: 50vh;
|
||||||
|
border-color: hippie.basic_color(foxtrot);
|
||||||
|
|
||||||
|
h1:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 512px) {
|
||||||
|
.pos_abs {
|
||||||
|
position: static !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__header {
|
||||||
|
padding: hippie.$space_double;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_fancy {
|
||||||
|
background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
|
||||||
|
color: hippie.basic_color(alpha);
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_fix {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
a {
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__footer {
|
||||||
|
width: 100%;
|
||||||
|
// height: 128px;
|
||||||
|
padding: hippie.$space_double 0;
|
||||||
|
background-color: hippie.$color_dark;
|
||||||
|
color: hippie.$color_bright;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__sprite_down {
|
||||||
|
@include hippie.sprite(hippie.$down);
|
||||||
|
// width: 32px;
|
||||||
|
// height: 32px;
|
||||||
|
// background-image: url(../art/sprites.png);
|
||||||
|
// background-position: -32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__sprite_up {
|
||||||
|
@include hippie.sprite(hippie.$up);
|
||||||
|
// width: 32px;
|
||||||
|
// height: 64px;
|
||||||
|
// background-image: url(../art/sprites.png);
|
||||||
|
// background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__sprite_meta {
|
||||||
|
@include hippie.sprite(hippie.$meta);
|
||||||
|
// width: 32px;
|
||||||
|
// height: 32px;
|
||||||
|
// background-image: url(../art/sprites.png);
|
||||||
|
// background-position: -32px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__avatar {
|
||||||
|
|
||||||
|
img {
|
||||||
|
opacity: 1;
|
||||||
|
width: 128px;
|
||||||
|
height: auto;
|
||||||
|
min-width: 128px;
|
||||||
|
min-height: 128px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: hippie.basic_color(delta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__flag {
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__credits {
|
||||||
|
margin: hippie.$space_small 0 hippie.$space_basic 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__queries > p {
|
||||||
|
padding: hippie.$padding_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_phoneUp {
|
||||||
|
@include hippie.forPhoneUp {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2)
|
||||||
|
}
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_phoneOnly {
|
||||||
|
@include hippie.forPhoneOnly {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_tabletPortraitOnly {
|
||||||
|
@include hippie.forTabletPortraitOnly {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_tabletPortraitUp {
|
||||||
|
@include hippie.forTabletPortraitUp {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_tabletLandscapeOnly {
|
||||||
|
@include hippie.forTabletLandscapeOnly {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_tabletLandscapeUp {
|
||||||
|
@include hippie.forTabletLandscapeUp {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_desktopOnly {
|
||||||
|
@include hippie.forDesktopOnly {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_desktopUp {
|
||||||
|
@include hippie.forDesktopUp {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query_bigDesktopUp {
|
||||||
|
@include hippie.forBigDesktopUp {
|
||||||
|
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__query_example {
|
||||||
|
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||||
|
background-color: hippie.basic_color(alpha);
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_small) {
|
||||||
|
background-color: hippie.basic_color(bravo);
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||||
|
background-color: hippie.basic_color(charlie);
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_large) {
|
||||||
|
background-color: hippie.basic_color(delta);
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||||
|
background-color: hippie.basic_color(echo);
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||||
|
background-color: hippie.basic_color(foxtrot);
|
||||||
|
}
|
||||||
|
margin-bottom: hippie.$space_small;
|
||||||
|
padding: hippie.$space_small;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
@extend code;
|
||||||
|
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||||
|
& {
|
||||||
|
content: '768px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_small) {
|
||||||
|
& {
|
||||||
|
content: '1024px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||||
|
& {
|
||||||
|
content: '1280px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||||
|
& {
|
||||||
|
content: '1680px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||||
|
& {
|
||||||
|
content: '1920px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
content: '< 768px';
|
||||||
|
padding: hippie.$padding_basic;
|
||||||
|
border-radius: hippie.$radius_basic;
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
background-color: rgba(hippie.$color_front_basic, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
.demo__td_no_bl {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__td_no_br {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__td_pr {
|
||||||
|
padding-right: hippie.$space_double;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo__td_pl {
|
||||||
|
padding-left: hippie.$space_double;
|
||||||
|
}
|
||||||
|
|
||||||
|
#demo {
|
||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
// height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hello {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 1em 5em;
|
||||||
|
background-color: hippie.$color_darker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
155
source/style/modules/portal/_portal_module.scss
Normal file
155
source/style/modules/portal/_portal_module.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
$portal_highlight: hippie.$color_highlight_basic;
|
||||||
|
$portal_margin: hippie.$space_double;
|
||||||
|
$portal_link_size: 128px;
|
||||||
|
$portal_icon_size: 64px;
|
||||||
|
|
||||||
|
.body_portal {
|
||||||
|
@extend .h_full_view;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__entry {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: $portal_margin;
|
||||||
|
padding-left: $portal_margin;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: hippie.$transition_best;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
flex: 3;
|
||||||
|
background-color: #999;
|
||||||
|
|
||||||
|
// h2 {
|
||||||
|
// color: $portal_highlight;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.portal__list {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend h4;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
max-width: $portal_link_size;
|
||||||
|
height: $portal_link_size;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: color.adjust($portal_highlight, $alpha: -0.2);
|
||||||
|
border-color: $portal_highlight;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: $portal_icon_size;
|
||||||
|
height: $portal_icon_size;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--bibo {
|
||||||
|
background-image: url(../../art/portal/bibo.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--portfolio {
|
||||||
|
background-image: url(../../art/portal/portfolio.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--found {
|
||||||
|
background-image: url(../../art/portal/gems.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--flux {
|
||||||
|
background-image: url(../../art/portal/flux.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--blog {
|
||||||
|
background-image: url(../../art/portal/notes.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--tools {
|
||||||
|
background-image: url(../../art/portal/tools.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--safe {
|
||||||
|
background-image: url(../../art/portal/safe.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__link--game {
|
||||||
|
&:hover {
|
||||||
|
background-image: url(../../art/portal/games.png);
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal__list {
|
||||||
|
@extend .list_link;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
margin: 48px auto 0 auto;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
source/style/modules/songbook/_songbook_module.scss
Executable file
22
source/style/modules/songbook/_songbook_module.scss
Executable file
|
|
@ -0,0 +1,22 @@
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
.songbook_song {
|
||||||
|
pre {
|
||||||
|
@extend .pre_code
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: hippie.$space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2+h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: hippie.$space_small;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
source/style/modules/ui/_drag_module.scss
Normal file
8
source/style/modules/ui/_drag_module.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
#space {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.body_frame {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
source/style/modules/ui/_form_module.scss
Normal file
23
source/style/modules/ui/_form_module.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
#grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-auto-rows: minmax(64px, auto);
|
||||||
|
margin-inline: hippie.$space_small;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid>div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid>div:first-child {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
background-color: violet;
|
||||||
|
}
|
||||||
136
source/style/modules/ui/_frame_module.scss
Executable file
136
source/style/modules/ui/_frame_module.scss
Executable file
|
|
@ -0,0 +1,136 @@
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
@mixin nav-spacer($name, $size, $orientation) {
|
||||||
|
.spacer.#{$name} {
|
||||||
|
width: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_frame {
|
||||||
|
@extend %flex-column;
|
||||||
|
|
||||||
|
background-color: hippie.$color_back_basic;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
header,
|
||||||
|
aside,
|
||||||
|
footer {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > header {
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
@extend %flex-row;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
// aside {
|
||||||
|
// background-color: rgba(255, 255, 255, .1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
section {
|
||||||
|
|
||||||
|
& > header,
|
||||||
|
& > footer {
|
||||||
|
background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: hippie.$color_back_io;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section,
|
||||||
|
section > div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
@extend %flex-column;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_cli {
|
||||||
|
@extend .body_frame;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cli {
|
||||||
|
@extend %flex-column;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
|
#line {
|
||||||
|
@extend %flex-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
#prompt {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: .5em 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
max-height: 128px;
|
||||||
|
margin: hippie.$margin_io;
|
||||||
|
border: 0;
|
||||||
|
padding: hippie.$space_half;
|
||||||
|
// color: hippie.$color_text_io;
|
||||||
|
color: white;
|
||||||
|
// background-color: hippie.$color_back_io;
|
||||||
|
background-color: transparent;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#content {
|
||||||
|
background-color: hippie.$color_back_io;
|
||||||
|
|
||||||
|
& > table {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
tr:hover td {
|
||||||
|
background-color: hippie.$color_highlight_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border: 1px solid hippie.$color_border_io;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-width: 0 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: hippie.$color_border_io;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.io {
|
||||||
|
.spacer {
|
||||||
|
margin: 0;
|
||||||
|
border: hippie.$border_dotted;
|
||||||
|
padding: 0;
|
||||||
|
opacity: .25;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include nav-spacer('a', hippie.$space_double, false);
|
||||||
|
@include nav-spacer('b', hippie.$space_small, false);
|
||||||
|
}
|
||||||
18
source/style/modules/ui/_gallery_module.scss
Normal file
18
source/style/modules/ui/_gallery_module.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
main.io section > .gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: start;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: hippie.$color_back_io;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
background-color: hotpink;
|
||||||
|
aspect-ratio: 2 / 3;
|
||||||
|
width: 128px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
99
source/style/modules/ui/_new_module.scss
Executable file
99
source/style/modules/ui/_new_module.scss
Executable file
|
|
@ -0,0 +1,99 @@
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
$module_top_height: 32px;
|
||||||
|
$body_top_space: $module_top_height + hippie.$space_basic;
|
||||||
|
|
||||||
|
.body_new {
|
||||||
|
@extend %flex-column;
|
||||||
|
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area {
|
||||||
|
transition: hippie.$transition_best;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
flex: 1;
|
||||||
|
// grid-template-rows: repeat(2, 1fr);
|
||||||
|
// grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: "a a";
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
// height: unset;
|
||||||
|
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
|
||||||
|
border-style: dotted;
|
||||||
|
border-width: hippie.$width_border_8;
|
||||||
|
border-radius: hippie.$width_border_8;
|
||||||
|
padding: hippie.$space_basic;
|
||||||
|
background-color: rgb(hippie.$color_back_basic, .5);
|
||||||
|
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
|
||||||
|
// background-color: gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float {
|
||||||
|
min-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: $module_top_height;
|
||||||
|
background-color: rgb(0, 0, 0, .8);
|
||||||
|
z-index: hippie.$z_top;
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
height: 36px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 0 0 128px;
|
||||||
|
padding: 7px 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
margin-right: 16px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
source/style/modules/ui/_table_module.scss
Normal file
17
source/style/modules/ui/_table_module.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
main.io section > table {
|
||||||
|
table-layout: auto;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: hippie.$color_back_io;
|
||||||
|
|
||||||
|
thead > tr > th:first-child {
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr > th:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
164
source/style/modules/ui/_windows_module.scss
Normal file
164
source/style/modules/ui/_windows_module.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
$padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
|
||||||
|
|
||||||
|
%flex-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: hippie.$space_half hippie.$space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#task-bar {
|
||||||
|
@extend %flex-bar;
|
||||||
|
z-index: map.get(hippie.$z-indexes, "content-top");
|
||||||
|
position: fixed;
|
||||||
|
//right: 0;
|
||||||
|
//bottom: 0;
|
||||||
|
//left: 0;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: hippie.$space_basic;
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
|
||||||
|
&.top,
|
||||||
|
&.bottom {
|
||||||
|
nav,
|
||||||
|
& > div {
|
||||||
|
&:last-child {
|
||||||
|
margin-top: unset;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right,
|
||||||
|
&.left {
|
||||||
|
nav,
|
||||||
|
& > div {
|
||||||
|
&:last-child {
|
||||||
|
margin-top: auto;
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
display: inline-block;
|
||||||
|
word-wrap: anywhere;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav,
|
||||||
|
& > div {
|
||||||
|
@extend %flex-bar;
|
||||||
|
flex-direction: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@extend .button_io;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
* {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.small {
|
||||||
|
//font-size: .8em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
padding: $padding_half;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.big {
|
||||||
|
font-size: 1.5em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
&,
|
||||||
|
& > * {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#screen-space {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#placeholder {
|
||||||
|
@extend %flex-bar;
|
||||||
|
display: none;
|
||||||
|
z-index: map.get(hippie.$z-indexes, "toast");
|
||||||
|
position: fixed;
|
||||||
|
border: 1px dashed black;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&.top,
|
||||||
|
&.bottom {
|
||||||
|
span {
|
||||||
|
writing-mode: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right,
|
||||||
|
&.left {
|
||||||
|
span {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
@extend %flex-bar;
|
||||||
|
flex-direction: inherit;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box,
|
||||||
|
.box_brd {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_brd {
|
||||||
|
border: 2px solid black;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
200
source/style/ui.scss
Normal file
200
source/style/ui.scss
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
@use "demo_config";
|
||||||
|
@use "hippie-style/hippie";
|
||||||
|
|
||||||
|
@use "modules/ui/frame_module";
|
||||||
|
@use "modules/ui/new_module";
|
||||||
|
@use "modules/ui/drag_module";
|
||||||
|
@use "modules/ui/form_module";
|
||||||
|
@use "modules/ui/gallery_module";
|
||||||
|
@use "modules/ui/windows_module";
|
||||||
|
@use "modules/ui/table_module";
|
||||||
|
|
||||||
|
$color_gui_back: hippie.$color_dark;
|
||||||
|
$space_gui_half: hippie.$space_half;
|
||||||
|
|
||||||
|
.op_show {
|
||||||
|
transition: hippie.$transition_show;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op_hide {
|
||||||
|
transition: hippie.$transition_hide;
|
||||||
|
}
|
||||||
|
|
||||||
|
.html_ui {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_intro {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
@extend %full_parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrap {
|
||||||
|
flex: 1;
|
||||||
|
background-color: hippie.$color_back_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress {
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status,
|
||||||
|
#spinner {
|
||||||
|
@extend %basic;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-inline: $space_gui_half;
|
||||||
|
padding-block: calc($space_gui_half - 1px) $space_gui_half;
|
||||||
|
line-height: hippie.$line_basic;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
width: 4em;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinner {
|
||||||
|
width: 2.5em;
|
||||||
|
background-color: hippie.$color_back_basic;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
span {
|
||||||
|
animation: rotate 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#intro {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "content-top");
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
*+h1 {
|
||||||
|
margin-top: hippie.$space_small;
|
||||||
|
margin-bottom: hippie.$space_large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-stack {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline: hippie.$space_double;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#agreement,
|
||||||
|
#idle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#agreement {
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: map.get(hippie.$color_palette, bravo);
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: hippie.$color_brightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#idle {
|
||||||
|
background-color: hippie.$color_back_basic;
|
||||||
|
transition: background-color 4s;
|
||||||
|
|
||||||
|
&:hover>.mouse-overlay {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "toast");
|
||||||
|
position: fixed;
|
||||||
|
right: $space_gui_half;
|
||||||
|
bottom: hippie.$space_double;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
border-color: hippie.$color_brighter;
|
||||||
|
color: hippie.$color_back_io;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hello {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
padding: 1em 2em;
|
||||||
|
background-color: rgba(hippie.$color_bright, .5);
|
||||||
|
font-family: hippie.$family_text_mono;
|
||||||
|
}
|
||||||
19
source/templates/demo/_default.njk
Normal file
19
source/templates/demo/_default.njk
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- demo.default.template -->
|
||||||
|
{% extends "hippie/_default.njk" %}
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "demo/partials/_meta.njk" %}
|
||||||
|
<base href="/">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||||
|
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
||||||
|
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="/vendor/jquery.min.js"></script>
|
||||||
|
{% endblock %}
|
||||||
21
source/templates/demo/_main.njk
Normal file
21
source/templates/demo/_main.njk
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!-- demo.main.template -->
|
||||||
|
{% extends "hippie/_main.njk" %}
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "demo/partials/_meta.njk" %}
|
||||||
|
<base href="/">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
{% if hippie.legacyMode %}
|
||||||
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||||
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||||
|
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||||
|
<!--Only use one of the above!-->
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
|
||||||
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||||
|
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||||
|
{% endblock %}
|
||||||
9
source/templates/demo/partials/_meta.njk
Normal file
9
source/templates/demo/partials/_meta.njk
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!-- meta.partial -->
|
||||||
|
<meta name="author" content="Interaktionsweise">
|
||||||
|
<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
|
||||||
|
<meta name="description" content="Hippie interweaves preeminent personal interface elements">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
|
||||||
|
{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}
|
||||||
7
source/templates/demo/partials/exp-colors.njk
Normal file
7
source/templates/demo/partials/exp-colors.njk
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!-- explanation-colors.partial -->
|
||||||
|
{# var colors = [{name: "alpha", class: "alpha_color"}] #}
|
||||||
|
|
||||||
|
{% set cls = cycler("odd", "even") %}
|
||||||
|
{% for row in rows %}
|
||||||
|
<div class="{{ cls.next() }}">{{ row.name }}</div>
|
||||||
|
{% endfor %}
|
||||||
52
source/templates/hippie/_app.njk
Executable file
52
source/templates/hippie/_app.njk
Executable file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!-- app.template -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" class="html_ui" id="{{ pageId }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
<title>{{ hippie.titlePrefix }}
|
||||||
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "hippie/partials/_head_meta.njk" %}
|
||||||
|
<base href="/">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}{% endblock %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script src="/vendor/jquery.min.js"></script>
|
||||||
|
<script src="/vendor/hippie-script.js"></script>
|
||||||
|
<script src="{{ pageBase }}js/globals.js"></script>
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const frameHeader = document.querySelector('body > header.io');
|
||||||
|
const closeActionElements = document.querySelectorAll('[data-action=close]');
|
||||||
|
|
||||||
|
if (frameHeader) {
|
||||||
|
console.log('frame header found', frameHeader);
|
||||||
|
|
||||||
|
frameHeader.addEventListener('click', (e) => {
|
||||||
|
if (e.target.dataset.action === 'close') {
|
||||||
|
console.debug('close', e.target);
|
||||||
|
|
||||||
|
history.back();
|
||||||
|
|
||||||
|
if (closeActionElements.length > 1) {
|
||||||
|
console.debug('other frames present', closeActionElements.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
source/templates/hippie/_app_frame.njk
Executable file
19
source/templates/hippie/_app_frame.njk
Executable file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- frame.app.template -->
|
||||||
|
{% extends "hippie/_app.njk" %}
|
||||||
|
{% import "hippie/macros/_io.njk" as io %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
41
source/templates/hippie/_default.njk
Normal file
41
source/templates/hippie/_default.njk
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!-- default.template -->
|
||||||
|
{# {% if hippie.debugMode %} #}
|
||||||
|
{% import "hippie/macros/_log.njk" as log %}
|
||||||
|
{# {% endif %} #}
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
<title>{{ hippie.titlePrefix }}
|
||||||
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "hippie/partials/_head_meta.njk" %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% include "hippie/partials/_head_script.njk" %}
|
||||||
|
{# {{ log.debug(true) }} #}
|
||||||
|
{{ log.start() }}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{% include "hippie/partials/_head_links.njk" %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="{{ bodyClass }}">
|
||||||
|
{{ log.log('BODY start') }}
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ log.log('BODY :: Loading script assets...') }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{{ log.log('BODY end :: Page script might still be loading.') }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
73
source/templates/hippie/_main.njk
Normal file
73
source/templates/hippie/_main.njk
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<!-- main.template -->
|
||||||
|
{% import "hippie/macros/_log.njk" as log %}
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
<title>{{ hippie.titlePrefix }}
|
||||||
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "hippie/partials/_head_meta.njk" %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% include "hippie/partials/_head_script.njk" %}
|
||||||
|
{{ log.debug(hippie.debugMode, true) }}
|
||||||
|
{{ log.start() }}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{% include "hippie/partials/_head_links.njk" %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="{{ bodyClass }}">
|
||||||
|
{{ log.log('BODY start') }}
|
||||||
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
|
<div id="root">
|
||||||
|
{% include "hippie/partials/_header.njk" %}
|
||||||
|
|
||||||
|
<main class="main_site">
|
||||||
|
{% block main %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include "hippie/partials/_footer.njk" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ log.log('BODY :: Loading script assets...') }}
|
||||||
|
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||||
|
<script src="/vendor/jquery.min.js"></script>
|
||||||
|
<script src="/vendor/hippie-script.js"></script>
|
||||||
|
<script src="{{ pageBase }}js/globals.js"></script>
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script>
|
||||||
|
// Setup global things for all screens
|
||||||
|
setup();
|
||||||
|
|
||||||
|
// Create instances of objects made by constructor functions
|
||||||
|
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
||||||
|
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
||||||
|
|
||||||
|
if (viewHover) {
|
||||||
|
let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('scroll', () => {
|
||||||
|
scrollUi.check();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{{ log.log('BODY end :: Page script might still be loading.') }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
source/templates/hippie/app.liquid
Normal file
39
source/templates/hippie/app.liquid
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% assign pageClass = 'html_ui' -%}
|
||||||
|
{% layout 'hippie/default.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="/css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script src="/vendor/jquery.min.js"></script>
|
||||||
|
<script src="/vendor/hippie-script.js"></script>
|
||||||
|
<script src="/js/globals.js"></script>
|
||||||
|
<script src="/js/app.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const frameHeader = document.querySelector('body > header.io');
|
||||||
|
const closeActionElements = document.querySelectorAll('[data-action=close]');
|
||||||
|
|
||||||
|
if (frameHeader) {
|
||||||
|
console.log('frame header found', frameHeader);
|
||||||
|
|
||||||
|
frameHeader.addEventListener('click', (e) => {
|
||||||
|
if (e.target.dataset.action === 'close') {
|
||||||
|
console.debug('close', e.target);
|
||||||
|
|
||||||
|
history.back();
|
||||||
|
|
||||||
|
if (closeActionElements.length > 1) {
|
||||||
|
console.debug('other frames present', closeActionElements.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
36
source/templates/hippie/default.liquid
Normal file
36
source/templates/hippie/default.liquid
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
{% if pageId %}
|
||||||
|
{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if pageClass %}
|
||||||
|
{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if bodyClass %}
|
||||||
|
{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
<html{{ idAttr }}{{ classAttr }} lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
{% block head %}
|
||||||
|
<title>
|
||||||
|
{{- hippie.titlePrefix -}}
|
||||||
|
{% block title %}{% endblock -%}
|
||||||
|
{{ hippie.titlePostfix -}}
|
||||||
|
</title>
|
||||||
|
{% block meta -%}
|
||||||
|
{% render 'hippie/partials/meta.liquid' %}
|
||||||
|
{% endblock -%}
|
||||||
|
{% block links -%}
|
||||||
|
{% render 'hippie/partials/links.liquid' %}
|
||||||
|
{% endblock -%}
|
||||||
|
{% endblock -%}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body{{ bodyClassAttr }}>
|
||||||
|
{%- block body %}{% endblock -%}
|
||||||
|
<script>
|
||||||
|
// {{ title }} script using default template
|
||||||
|
</script>
|
||||||
|
{%- block script %}{% endblock -%}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
source/templates/hippie/full.liquid
Normal file
48
source/templates/hippie/full.liquid
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
{% if pageId %}
|
||||||
|
{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if pageClass %}
|
||||||
|
{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if bodyClass %}
|
||||||
|
{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
<html{{ idAttr }}{{ classAttr }} lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
{% block head %}
|
||||||
|
<title>
|
||||||
|
{{- hippie.titlePrefix -}}
|
||||||
|
{% block title %}{{ title }}{% endblock -%}
|
||||||
|
{{ hippie.titlePostfix -}}
|
||||||
|
</title>
|
||||||
|
{% block meta -%}
|
||||||
|
{% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
|
||||||
|
{% comment %}<base href="/">{% endcomment %}
|
||||||
|
{% endblock -%}
|
||||||
|
{% render 'hippie/partials/script-log.liquid' %}
|
||||||
|
{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
|
||||||
|
{% render 'hippie/partials/log-start' -%}
|
||||||
|
{% block links -%}
|
||||||
|
{% render 'hippie/partials/links.liquid' %}
|
||||||
|
<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
|
||||||
|
{% endblock -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%}
|
||||||
|
{% endblock -%}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body{{ bodyClassAttr }}>
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
|
||||||
|
{%- block body %}{% endblock -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%}
|
||||||
|
<script>
|
||||||
|
// {{ title }} script using full template
|
||||||
|
</script>
|
||||||
|
{%- block script %}{% endblock -%}
|
||||||
|
{% render 'hippie/partials/log-assets', state: true -%}
|
||||||
|
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
source/templates/hippie/macros/_footer.njk
Normal file
23
source/templates/hippie/macros/_footer.njk
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
|
||||||
|
<footer class="pos_abs pin_bottom width_full">
|
||||||
|
<address class="txt_center">Kontakt:
|
||||||
|
<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
|
||||||
|
* Server:
|
||||||
|
{{ app }}/{{ version }}
|
||||||
|
({{ system }}) * Domain:
|
||||||
|
{{ domain }}
|
||||||
|
</address>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro pinned(pos = 'bottom') %}
|
||||||
|
<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
|
||||||
|
<p class="txt_center">Unten fixiert</p>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro main() %}
|
||||||
|
<footer class="footer_site">
|
||||||
|
<div id="end"></div>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
30
source/templates/hippie/macros/_gate.njk
Normal file
30
source/templates/hippie/macros/_gate.njk
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{% macro list(name, url, image, links) %}
|
||||||
|
<article class="portal__entry">
|
||||||
|
<section>
|
||||||
|
<h2>
|
||||||
|
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
||||||
|
</h2>
|
||||||
|
<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
|
||||||
|
<img src="{{ image.src }}" alt="{{ image.alt }}"/>
|
||||||
|
</a>
|
||||||
|
{% if links %}
|
||||||
|
<ul class="portal__list">
|
||||||
|
{% for link in links %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro simple(name, url) %}
|
||||||
|
<article class="portal__entry">
|
||||||
|
<section>
|
||||||
|
<h2>
|
||||||
|
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
||||||
|
</h2>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
{% endmacro %}
|
||||||
30
source/templates/hippie/macros/_header.njk
Normal file
30
source/templates/hippie/macros/_header.njk
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{% macro main() %}
|
||||||
|
<header class="header_site">
|
||||||
|
<div id="begin"></div>
|
||||||
|
</header>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro status(hippie, page) %}
|
||||||
|
{% import "hippie/macros/_state.njk" as state %}
|
||||||
|
<div id="top">
|
||||||
|
<h1 class="brand">
|
||||||
|
<a href="#">{{ hippie.brand | upper }}</a>
|
||||||
|
</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
{% for link in page %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="state">
|
||||||
|
<p>{{ state.coord("log")}}
|
||||||
|
/
|
||||||
|
{{ state.date("date")}}
|
||||||
|
/
|
||||||
|
{{ state.time("time")}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
49
source/templates/hippie/macros/_io.njk
Normal file
49
source/templates/hippie/macros/_io.njk
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
{% macro frameHeader(title) %}
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="menu">
|
||||||
|
<i class="bi bi-three-dots"></i>
|
||||||
|
</button>
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button title="minimize">
|
||||||
|
<i class="bi bi-dash"></i>
|
||||||
|
</button>
|
||||||
|
<button title="maximize">
|
||||||
|
<i class="bi bi-fullscreen"></i>
|
||||||
|
</button>
|
||||||
|
<button title="close" data-action="close">
|
||||||
|
<i class="bi bi-x-square"></i>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro frameFooter(title) %}
|
||||||
|
<footer class="io">
|
||||||
|
<nav>
|
||||||
|
<button>mode</button>
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button>action</button>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro statusBar(title) %}
|
||||||
|
<footer class="io">
|
||||||
|
<nav>
|
||||||
|
<span>## items</span>
|
||||||
|
<span># selected (size)</span>
|
||||||
|
<span># type(s)</span>
|
||||||
|
<span># shared</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<span>{{ title | default('status-bar') }}</span>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
24
source/templates/hippie/macros/_log.njk
Normal file
24
source/templates/hippie/macros/_log.njk
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{% macro start() %}
|
||||||
|
<script>
|
||||||
|
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
|
||||||
|
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||||
|
</script>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro log(msg, arg = '') %}
|
||||||
|
<script>
|
||||||
|
logPerf('{{ msg }}', {{ arg }});
|
||||||
|
</script>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro debug(state = false, display = false, assets = false) %}
|
||||||
|
{# {{ set hippie.debugMode = state }} #}
|
||||||
|
<script>
|
||||||
|
debugOn = {{ state }};
|
||||||
|
debugOnScreen = {{ display }};
|
||||||
|
assetsLoaded = {{ assets }};
|
||||||
|
</script>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro asset(state = false) %}
|
||||||
|
<script>
|
||||||
|
assetsLoaded = {{ state }};
|
||||||
|
</script>
|
||||||
|
{% endmacro %}
|
||||||
13
source/templates/hippie/macros/_nav.njk
Normal file
13
source/templates/hippie/macros/_nav.njk
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{% macro main(data, active = '') %}
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
{% for link in data %}
|
||||||
|
<li{%if active == link.text %} class="active_txt" {% endif %}>
|
||||||
|
{%if active == link.text %}{{ link.text }}{%else%}
|
||||||
|
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endmacro %}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue