u2ui 1.0.0

package/u2/old-stuff/viewport.js

@@ -0,0 +1,64 @@
+
+const docEl = document.documentElement
+let lastY = 0;
+const onScroll = function(){
+    const upScroll = lastY >= scrollY;
+    docEl.classList[upScroll?'add':'remove']('u2-scroll-up');
+    lastY = scrollY;
+    const isTop = lastY <= 20; // 0 is not enough on iOS
+    docEl.classList[isTop?'remove':'add']('u2-scroll-not-top');
+};
+onScroll();
+addEventListener('scroll',onScroll);
+
+
+
+
+let lastHMin = null;
+function check(){
+    let hMin = window.innerHeight;
+    if (lastHMin !== null) {
+        hMin = Math.abs(hMin - lastHMin) > 150 ? hMin : lastHMin; // tested: 114px
+    }
+    document.documentElement.style.setProperty('--u2-vh-min', hMin +'px');
+    lastHMin = hMin;
+};
+check();
+addEventListener('resize',check);
+
+
+
+
+
+/*
+// https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill/blob/master/src/index.js
+const docEl = document.documentElement;
+
+if (CSS.supports('height:1svh')) {
+    docEl.style.setProperty('--1svh', "1svh");
+    docEl.style.setProperty('--1dvh', "1dvh");
+    docEl.style.setProperty('--1lvh', "1lvh");
+} else {
+    recalc();
+    document.addEventListener('DOMContentLoaded', recalc)
+    window.addEventListener('resize', recalc);
+}
+
+function recalc() {
+    const svh = docEl.clientHeight * 0.01;
+    docEl.style.setProperty('--1svh', (svh + "px"));
+    const dvh = window.innerHeight * 0.01;
+    docEl.style.setProperty('--1dvh', (dvh + "px"));
+
+    //const parent = docEl;
+    const parent = document.body;
+    if (parent) {
+        const fixed = document.createElement("div");
+        fixed.style.cssText = 'width:1px;height:100vh;position:fixed;left:0;top:0;bottom:0;visibility:hidden';
+        parent.append(fixed);
+        const lvh = fixed.clientHeight * 0.01;
+        docEl.style.setProperty('--1lvh', (lvh + "px"));
+        fixed.remove();
+    }
+};
+*/

package/u2/projects.json

@@ -0,0 +1,468 @@
+{
+  "attr": {
+    "behavior": {
+      "name": "behavior",
+      "description": "behavior before action",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "confirm": {
+      "name": "confirm",
+      "description": "Confirm before action",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "draghandle": {
+      "name": "draghandle",
+      "description": "Define a drag handle-element for an element that uses the draggable attribute.",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "focusgroup": {
+      "name": "focusgroup",
+      "description": "Focus movement by arrow keys",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "href": {
+      "name": "href",
+      "description": "Every element can be a link",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "intersect": {
+      "name": "intersect",
+      "description": "declarativ intersection-observer",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "navigable": {
+      "name": "navigable",
+      "description": "Make elements navigatable",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "parallax": {
+      "name": "parallax",
+      "description": "Make every element scrolling at different speed",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "skin": {
+      "name": "skin",
+      "description": "Change the skin of a widget\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    }
+  },
+  "class": {
+    "badge": {
+      "name": "badge",
+      "description": "Rendering badges",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "card1": {
+      "name": "card1",
+      "description": "card-class (beta)\r",
+      "beta": true,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "flex": {
+      "name": "flex",
+      "description": "Most wanted flexbox case",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "grid": {
+      "name": "grid",
+      "description": "Most wanted grid case\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "input": {
+      "name": "input",
+      "description": "custom inputs (beta)",
+      "beta": true,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "reset": {
+      "name": "reset",
+      "description": "A class to reset Styles (beta)\r",
+      "beta": true,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "table": {
+      "name": "table",
+      "description": "Better tables",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "unstyle": {
+      "name": "unstyle",
+      "description": "Unstyle elements eg. buttons\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "width": {
+      "name": "width",
+      "description": "The main width of your layout\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    }
+  },
+  "el": {
+    "accordion": {
+      "name": "accordion",
+      "description": "rendering accordion",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "alert": {
+      "name": "alert",
+      "description": "Prominent hints, alerts, and facts",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "buttongroup": {
+      "name": "buttongroup",
+      "description": "buttongroup element\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "bytes": {
+      "name": "bytes",
+      "description": "Displays formatted bytess",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "carousel": {
+      "name": "carousel",
+      "description": "Simple carousel component",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "carousel-nav": {
+      "name": "carousel-nav",
+      "description": "null",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "code": {
+      "name": "code",
+      "description": "Highlighted, editable code-blocks.",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "copy": {
+      "name": "copy",
+      "description": "Displays formatted copys",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "counter": {
+      "name": "counter",
+      "description": "Animated Number Counter",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "ico": {
+      "name": "ico",
+      "description": "Universal icon-element",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "input": {
+      "name": "input",
+      "description": "Input elements (very beta)",
+      "beta": true,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "masonry": {
+      "name": "masonry",
+      "description": "Masonry layout with CSS grid fallback\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "number": {
+      "name": "number",
+      "description": "Displays formatted numbers",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "out": {
+      "name": "out",
+      "description": "Output variables (beta)",
+      "beta": true,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "parallax-bg": {
+      "name": "parallax-bg",
+      "description": "Parallax backgrounds",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "qrcode": {
+      "name": "qrcode",
+      "description": "QR-Code element",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "rating": {
+      "name": "rating",
+      "description": "\r",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "rte": {
+      "name": "rte",
+      "description": "\"Rich\" Rich Text Editor (alpha)",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "skeleton": {
+      "name": "skeleton",
+      "description": "Display a skeleton of the element. This is useful for showing the user where the element will be rendered before the actual content is loaded.",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "splitbutton": {
+      "name": "splitbutton",
+      "description": "Buttons with options",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "splitpanel": {
+      "name": "splitpanel",
+      "description": "A splitpanel is a container that can be split horizontally or vertically. It is a simple container that can be used to split the screen into two or more parts.",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "table": {
+      "name": "table",
+      "description": "Enhanced tables (sortable, responsive...)",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "tabs": {
+      "name": "tabs",
+      "description": "rendering tabs",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "textfit": {
+      "name": "textfit",
+      "description": "Exactly fit text",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "time": {
+      "name": "time",
+      "description": "The better time-element, e.g. live changing relative dates",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "tooltip": {
+      "name": "tooltip",
+      "description": "Tooltips",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "tree1": {
+      "name": "tree1",
+      "description": "Treeview component",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
+    "typewriter": {
+      "name": "typewriter",
+      "description": "Simple typewriter element",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    }
+  },
+  "css": {
+    "base": {
+      "name": "base",
+      "description": "⏚ Usefull css defaults",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "classes": {
+      "name": "classes",
+      "description": "deprecated",
+      "beta": false,
+      "deprecated": true,
+      "css": true,
+      "js": false
+    },
+    "classless": {
+      "name": "classless",
+      "description": "null",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    },
+    "norm": {
+      "name": "norm",
+      "description": "CSS normalization for crossbrowser compatibility",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": false
+    }
+  },
+  "js": {
+    "contextmenu": {
+      "name": "contextmenu",
+      "description": "context menus, simple and highly customisable",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "dialog": {
+      "name": "dialog",
+      "description": "alert, prompt, confirm but async",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "Placer": {
+      "name": "Placer",
+      "description": "Absolute place elements relative to others",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "PointerObserver": {
+      "name": "PointerObserver",
+      "description": "Observe mouse and touches",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "rte": {
+      "name": "rte",
+      "description": "Easily Make Elements Editable with Intuitive Controls",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "SelectorObserver": {
+      "name": "SelectorObserver",
+      "description": "Monitor elements by CSS selector",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
+    "shortcut": {
+      "name": "shortcut",
+      "description": "Easy keyboard shortcuts",
+      "beta": false,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    }
+  }
+}

package/u2/tests/boilerplate.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <meta charset=utf-8>
+        <title>Todo: Title</title>
+        <meta name=viewport content="width=device-width, viewport-fit=cover">
+        <meta name=theme-color content="#ff0">
+        <meta name=apple-mobile-web-app-capable content="yes">
+        <meta name=apple-mobile-web-app-status-bar-style content="black-translucent">
+
+        <script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.js" type=module crossorigin></script>
+        <script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.js" type=module crossorigin></script>
+
+        <script src="../../../u2/auto.min.js?debug=1" type=module crossorigin></script>
+
+        <!--
+        Inspiration:
+        https://www.matuzo.at/blog/html-boilerplate/
+        -->
+
+<body>
+
+    <header role=banner>
+        <div class=u2-width>
+            Header
+        </div>
+    </header>
+
+    <main>
+        <section>
+            <div class=u2-width>
+                Section 1
+            </div>
+        </section>
+        <section>
+            <div class=u2-width>
+                Section 2
+            </div>
+        </section>
+    </main>
+
+    <footer role=contentinfo>
+        <div class=u2-width>
+            Footer
+        </div>
+    </footer>