diff --git a/.jshintrc b/.jshintrc index 24ef2fe..134e601 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,9 +1,9 @@ { "bitwise": true, - "curly": false, + "curly": true, "devel": true, "eqeqeq": true, - "esversion": 11, + "esversion": 9, "forin": true, "freeze": true, "jquery": true, diff --git a/README.md b/README.md index 83ea378..7430cb6 100644 --- a/README.md +++ b/README.md @@ -44,25 +44,9 @@ Everything has its default style. CSS classes follow a naming scheme of `_`. -- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling +- *Object* usually is the name of the HTML element. If it is not a elemtn 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). diff --git a/TODO.md b/TODO.md index 6704e8e..1fea50d 100644 --- a/TODO.md +++ b/TODO.md @@ -11,126 +11,120 @@ - Add build process for normalize.css from github.com/necolas/normalize.css - Add build process for bourbon from https://github.com/thoughtbot/bourbon -# CSS - -- Check style for every basic element -- Uniform spelling of classes and identifiers - # 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 -- *Clock* - - Add overlays to better distinguish day, week and year \ No newline at end of file +- Complete *Intro* 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 +- Check style for every basic element +- Uniform spelling of classes and identifiers \ No newline at end of file diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 81d2494..f00f364 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -351,12 +351,12 @@ function checkButtonAndTarget(event, element, button = 0) { function getClosestEdgeToElement(element) { 'use strict'; - const bounding = element.getBoundingClientRect(); + const rect = element.getBoundingClientRect(); const distances = { - top: bounding.top, - right: window.innerWidth - bounding.right, - bottom: window.innerHeight - bounding.bottom, - left: bounding.left + top: rect.top, + right: window.innerWidth - rect.right, + bottom: window.innerHeight - rect.bottom, + left: rect.left }; return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b); @@ -459,70 +459,6 @@ function getRandomColor() { 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); -} - // CONCEPTS // NOTE: Benutzt private Zuweisungen diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 34fb1d5..da8f5a4 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -11,7 +11,7 @@ tags:

- +

{% endblock %} @@ -27,9 +27,9 @@ tags: const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim(); const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim(); - document.getElementById('tglFormat').addEventListener('click', () => { + document.getElementById('toggleFormat').addEventListener('click', () => { is24HourFormat = !is24HourFormat; - document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; + document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid index 3155921..b4b1d98 100644 --- a/source/screens/demo/examples/start.liquid +++ b/source/screens/demo/examples/start.liquid @@ -11,7 +11,7 @@ tags: {% block body %}
@@ -69,7 +69,7 @@ tags: document.getElementById('www-search').addEventListener('submit', function (e) { e.preventDefault(); - const query = document.getElementById('qrySearch').value.trim(); + const query = document.getElementById('query').value.trim(); if (!query) return; diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid deleted file mode 100644 index 18f4cd4..0000000 --- a/source/screens/demo/examples/ui/cli.liquid +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CLI -tags: -- ui ---- -{% assign bodyClass = "body_cli" -%} -{% layout "hippie/app.liquid" %} - -{% block body %} -
-
- 
Previous prompt
-
-
- - -
-
-{% endblock %} - -{%- block script %} -{{ block.super -}} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk new file mode 100755 index 0000000..dc0800f --- /dev/null +++ b/source/screens/demo/examples/ui/cli.njk @@ -0,0 +1,62 @@ +--- +title: CLI +tags: + - ui +--- +{% set pageId = page.fileSlug %} +{% set bodyClass = "body_cli" %} + +{% extends "hippie/_app_frame.njk" %} + +{% block body %} +
+
+ 
Previous prompt
+
+
+ + +
+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid deleted file mode 100644 index f8e66fa..0000000 --- a/source/screens/demo/examples/ui/explorer.liquid +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Explorer -tags: -- ui ---- -{% assign bodyClass = "body_frame" -%} -{% layout "hippie/app.liquid" %} - -{% block body %} -{% render 'hippie/partials/frame-header.liquid' %} -
- -
-
- - -
-
- -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
-
- {% render 'hippie/partials/frame-status.liquid' %} -
-
-{% render 'hippie/partials/frame-mode.liquid' %} -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk new file mode 100755 index 0000000..c54ea0a --- /dev/null +++ b/source/screens/demo/examples/ui/explorer.njk @@ -0,0 +1,146 @@ +--- +title: GUI explorer +tags: + - ui +--- +{% set pageId = page.fileSlug %} + +{% extends "hippie/_app_frame.njk" %} + +{% block body %} + {{ io.frameHeader('title-bar') }} +
+ +
+
+ + +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
+
+ {{ io.statusBar() }} +
+
+ {{ io.frameFooter('mode-bar') }} +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid index 8128023..c548374 100755 --- a/source/screens/demo/examples/ui/gallery.liquid +++ b/source/screens/demo/examples/ui/gallery.liquid @@ -12,9 +12,9 @@ tags: