u2ui 1.0.1 → 1.4.5

package/el/typewriter/manifest.json

@@ -1,66 +1,45 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "typewriter.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "carousel",
-                    "members": [
-                        {
-                            "kind": "method",
-                            "name": "play"
-                        }
-                    ],
-                    "events": [
-                        {
-                            "name": "u2-typewriter-play",
-                            "type": {
-                                "text": "Event"
-                            }
-                        },
-                        {
-                            "name": "u2-typewriter-end",
-                            "type": {
-                                "text": "Event"
-                            }
-                        },
-                        {
-                            "name": "u2-typewriter-pause",
-                            "type": {
-                                "text": "Event"
-                            }
-                        }
-                    ],
-                    "attributes": [
-                        {
-                            "name": "autoplay",
-                            "u2-type": "boolean"
-                        },
-                        {
-                            "name": "loop",
-                            "u2-type": "boolean"
-                        }
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-typewriter",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-typewriter",
-                    "declaration": {
-                        "name": "MyElement",
-                        "module": "typewriter.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "typewriter.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Simple typewriter element",
+            "name": "U2Typewriter",
+            "members": [{
+                "kind": "method",
+                "name": "play"
+            }],
+            "events": [{
+                "name": "u2-typewriter-play",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-typewriter-end",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-typewriter-pause",
+                "type": { "text": "Event" }
+            }],
+            "attributes": [{
+                "name": "autoplay",
+                "u2-type": "boolean"
+            },{
+                "name": "loop",
+                "u2-type": "boolean"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-typewriter",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-typewriter",
+            "declaration": {
+                "name": "U2Typewriter",
+                "module": "typewriter.js"
+            }
+        }]
+    }]
+}

package/el/typewriter/typewriter.css

@@ -1,6 +1,6 @@
-/* firefox wraps otherwise when opacity:0? *
-u2-typewriter {
-    -webkit-hyphens: none;
-    hyphens: none;
-}
-*/
+/* firefox wraps otherwise when opacity:0? *
+u2-typewriter {
+    -webkit-hyphens: none;
+    hyphens: none;
+}
+*/

package/el/typewriter/typewriter.js

@@ -1,166 +1,161 @@
-
-const style = document.createElement('style');
-style.innerHTML = `
-u2-typewriter .-Symbol {
-    position:relative;
-}
-u2-typewriter .-Char { opacity: 0; }
-u2-typewriter .-Active .-Char { opacity: 1; }
-u2-typewriter .-Caret {
-    position:absolute;
-    animation: u2-typewriter-caret-ani .5s infinite alternate;
-    height:1em;
-    width:2px;
-    margin:auto;
-    top:-.2em;
-    bottom:-.2em;
-    left: .1em;
-    background:currentColor;
-}
-@keyframes u2-typewriter-caret-ani {
-    0% { opacity: 1; }
-    25% { opacity: 1; }
-    50% { opacity: 0; }
-    100% { opacity: 0; }
-}
-`;
-document.head.prepend(style);
-
-
-class Typewriter extends HTMLElement {
-    constructor() {
-        super();
-
-        this.innerHTML += ' '; // one more char for caret
-        separateChars(this);
-
-        this.caretElement = document.createElement('span');
-        this.caretElement.classList.add('-Caret');
-
-        this.playInterval = null;
-        this.intersectionObserver = new IntersectionObserver((entries)=>{
-            entries[0].isIntersecting ? this.play() : this.pause();
-        });
-
-    }
-
-    static observedAttributes = ['autoplay', 'loop'];
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'autoplay') this.intersectionObserver[newValue===null?'unobserve':'observe'](this);
-    }
-
-
-    connectedCallback() {
-        this.reset();
-    }
-    disconnectedCallback() {
-        this.pause();
-    }
-
-    play(){
-        this.pause();
-        this.dispatchEvent(new CustomEvent('u2-typewriter-play', {bubbles:true}));
-        this._playNext();
-    }
-    _playNext() {
-        const speed = getComputedStyle(this).getPropertyValue('--u2-typewriter-speed') || 60;
-        this.playInterval = setTimeout(() => {
-            this._playNext();
-        }, speed);
-        if (this.next() === false) {
-            this.pause();
-            this.dispatchEvent(new CustomEvent('u2-typewriter-end', {bubbles:true}));
-            if (this.hasAttribute('loop')) {
-                setTimeout(() => {
-                    this.reset();
-                    this.play();
-                }, speed*12 + 1500);
-            }
-        }
-    }
-    pause() {
-        this.dispatchEvent(new CustomEvent('u2-typewriter-pause', {bubbles:true}));
-        clearInterval(this.playInterval);
-    }
-    next() {
-        this.activeChar.classList.add('-Active');
-        let next = findNextChar(this, this.activeChar);
-        if (!next) {
-            return false;
-        }
-        next.append(this.caretElement)
-        return this.activeChar = next;
-    }
-    reset(){
-        this.pause();
-        this.querySelectorAll('.-Symbol').forEach(char => char.classList.remove('-Active'));
-        let next = findNextChar(this, this);
-        this.activeChar = next;
-        next.append(this.caretElement)
-    }
-
-}
-customElements.define('u2-typewriter', Typewriter);
-
-
-// find the next Char in children or sibling of the node but not outside the root
-function findNextChar(root, node) {
-    let next = null;
-    if (node.classList.contains('-Symbol')) {
-        next = node.nextElementSibling;
-    } else {
-        next = node.firstElementChild || node.nextElementSibling;
-    }
-    if (!next) {
-        while (1) {
-            node = node.parentNode;
-            if (node === null || node === root) return null;
-            next = node.nextElementSibling
-            if (next) break;
-        }
-    }
-    if (next.classList.contains('-Symbol')) {
-        return next;
-    } else {
-        return findNextChar(root, next);
-    }
-}
-
-function separateChars(parent) {
-    for (let node of Array.from(parent.childNodes)) {
-        if (node.nodeType === 3) {
-            let str = node.data;
-            //str = str.trim(); // bad for html-formated text
-            str = str.replace(/\s+/g, ' ');
-            for (let char of str) {
-                let span = document.createElement('span');
-                span.classList.add('-Symbol');
-                span.innerHTML = '<span class=-Char>'+char+'</span>';
-                node.parentNode.insertBefore(span, node);
-            }
-            node.remove();
-        } else {
-            separateChars(node);
-        }
-    }
-}
-
-
-
-/* audio-extension */
-
-document.addEventListener('u2-typewriter-play', (e)=>{
-    const el = e.target;
-    if (!el.hasAttribute('audio')) return;
-    if (!el.audioObj) {
-        el.audioObj = new Audio();
-        el.audioObj.loop = true;
-        el.audioObj.volume = 0.3;
-    }
-    el.audioObj.src = el.getAttribute('src') || import.meta.url + '/../typewriter.mp3';
-    el.audioObj.play();
-});
-document.addEventListener('u2-typewriter-pause', e=>{
-    const el = e.target;
-    el.audioObj && el.audioObj.pause();
-})
+
+const style = document.createElement('style');
+style.innerHTML = `
+u2-typewriter .-Symbol {
+    position:relative;
+}
+u2-typewriter .-Char { opacity: 0; }
+u2-typewriter .-Active .-Char { opacity: 1; }
+u2-typewriter .-Caret {
+    position:absolute;
+    animation: u2-typewriter-caret-ani .5s infinite alternate;
+    height:1em;
+    width:2px;
+    margin:auto;
+    top:-.2em;
+    bottom:-.2em;
+    left: .1em;
+    background:currentColor;
+}
+@keyframes u2-typewriter-caret-ani {
+    0% { opacity: 1; }
+    25% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 0; }
+}
+`;
+document.head.prepend(style);
+
+
+export default class U2Typewriter extends HTMLElement {
+    constructor() {
+        super();
+
+        this.innerHTML += '&nbsp;'; // one more char for caret
+        separateChars(this);
+
+        this.caretElement = document.createElement('span');
+        this.caretElement.classList.add('-Caret');
+
+        this.playInterval = null;
+        this.intersectionObserver = new IntersectionObserver((entries)=>{
+            entries[0].isIntersecting ? this.play() : this.pause();
+        });
+
+    }
+
+    static observedAttributes = ['autoplay', 'loop'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'autoplay') this.intersectionObserver[newValue===null?'unobserve':'observe'](this);
+    }
+
+
+    connectedCallback() {
+        this.reset();
+    }
+    disconnectedCallback() {
+        this.pause();
+    }
+
+    play(){
+        this.pause();
+        this.dispatchEvent(new CustomEvent('u2-typewriter-play', {bubbles:true}));
+        this._playNext();
+    }
+    _playNext() {
+        const speed = getComputedStyle(this).getPropertyValue('--u2-typewriter-speed') || 60;
+        this.playInterval = setTimeout(() => {
+            this._playNext();
+        }, speed);
+        if (this.next() === false) {
+            this.pause();
+            this.dispatchEvent(new CustomEvent('u2-typewriter-end', {bubbles:true}));
+            if (this.hasAttribute('loop')) {
+                this.playInterval = setTimeout(() => {
+                    this.reset();
+                    this.play();
+                }, speed*12 + 1500);
+            }
+        }
+    }
+    pause() {
+        this.dispatchEvent(new CustomEvent('u2-typewriter-pause', {bubbles:true}));
+        clearInterval(this.playInterval);
+    }
+    next() {
+        this.activeChar.classList.add('-Active');
+        let next = findNextChar(this, this.activeChar);
+        if (!next) {
+            return false;
+        }
+        next.append(this.caretElement)
+        return this.activeChar = next;
+    }
+    reset(){
+        this.pause();
+        this.querySelectorAll('.-Symbol').forEach(char => char.classList.remove('-Active'));
+        let next = findNextChar(this, this);
+        this.activeChar = next;
+        next.append(this.caretElement)
+    }
+
+}
+customElements.define('u2-typewriter', U2Typewriter);
+
+
+// find the next Char in children or sibling of the node but not outside the root
+function findNextChar(root, node) {
+    let next = node.classList.contains('-Symbol') ? node.nextElementSibling : node.firstElementChild || node.nextElementSibling;
+    if (!next) {
+        while (1) {
+            node = node.parentNode;
+            if (node === null || node === root) return null;
+            next = node.nextElementSibling
+            if (next) break;
+        }
+    }
+    if (next.classList.contains('-Symbol')) {
+        return next;
+    } else {
+        return findNextChar(root, next);
+    }
+}
+
+function separateChars(parent) {
+    for (let node of Array.from(parent.childNodes)) {
+        if (node.nodeType === 3) {
+            let str = node.data;
+            //str = str.trim(); // bad for html-formated text
+            str = str.replace(/\s+/g, ' ');
+            for (let char of str) {
+                let span = document.createElement('span');
+                span.classList.add('-Symbol');
+                span.innerHTML = '<span class=-Char>'+char+'</span>';
+                node.parentNode.insertBefore(span, node);
+            }
+            node.remove();
+        } else {
+            separateChars(node);
+        }
+    }
+}
+
+
+
+/* audio-extension */
+
+document.addEventListener('u2-typewriter-play', (e)=>{
+    const el = e.target;
+    if (!el.hasAttribute('audio')) return;
+    if (!el.audioObj) {
+        el.audioObj = new Audio();
+        el.audioObj.loop = true;
+        el.audioObj.volume = 0.3;
+    }
+    el.audioObj.src = el.getAttribute('src') || import.meta.url + '/../typewriter.mp3';
+    el.audioObj.play();
+});
+document.addEventListener('u2-typewriter-pause', e=>{
+    const el = e.target;
+    el.audioObj && el.audioObj.pause();
+})

package/el/video/README.md

@@ -0,0 +1,37 @@
+# <u2-video> - element
+Video-element with controls and keyboard shortcuts.
+
+## Usage
+
+```html
+<u2-video controls keyboard-shortcuts playback-speed
+          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
+</u2-video>
+```
+
+```css
+u2-video {
+    font-size:13px;
+    color:pink;
+    border-radius: 1rem;
+    box-shadow:0 0 1rem #0008;
+    --gap:.5em;
+}
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/video/video.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/video/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/video/tests/minimal.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/video/manifest.json

@@ -0,0 +1,96 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "video.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Video element with custom controls and keyboard shortcuts",
+            "name": "U2Video",
+            "members": [{
+                "kind": "method",
+                "name": "togglePlay",
+                "description": "Plays or pauses the video"
+            },{
+                "kind": "method",
+                "name": "toggleMute",
+                "description": "Mutes or unmutes the video"
+            },{
+                "kind": "method",
+                "name": "skip",
+                "description": "Skips by the given number of seconds"
+            },{
+                "kind": "method",
+                "name": "toggleFullscreen",
+                "description": "Enters or exits fullscreen"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "src",
+                "description": "URL of the video"
+            },{
+                "name": "poster",
+                "description": "URL of the poster image"
+            },{
+                "name": "preload",
+                "description": "How the video is preloaded",
+                "u2Examples": ["none", "metadata", "auto"]
+            },{
+                "name": "autoplay",
+                "description": "Starts playing automatically",
+                "u2-type": "boolean"
+            },{
+                "name": "loop",
+                "description": "Restarts the video when finished",
+                "u2-type": "boolean"
+            },{
+                "name": "muted",
+                "description": "Mutes the audio",
+                "u2-type": "boolean"
+            },{
+                "name": "controls",
+                "description": "Shows the custom controls",
+                "u2-type": "boolean"
+            },{
+                "name": "width",
+                "description": "Width of the video"
+            },{
+                "name": "height",
+                "description": "Height of the video"
+            },{
+                "name": "playsinline",
+                "description": "Plays inline on mobile instead of fullscreen",
+                "u2-type": "boolean"
+            },{
+                "name": "crossorigin",
+                "description": "CORS setting",
+                "u2Examples": ["anonymous", "use-credentials"]
+            },{
+                "name": "picture-in-picture",
+                "description": "Enables picture-in-picture",
+                "u2-type": "boolean"
+            }],
+            "cssProperties": [{
+                "name": "--u2-video-bg",
+                "description": "Background color of the video area",
+                "syntax": "<color>"
+            },{
+                "name": "--gap",
+                "description": "Spacing of the controls",
+                "syntax": "<length>"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-video",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-video",
+            "declaration": {
+                "name": "U2Video",
+                "module": "video.js"
+            }
+        }]
+    }]
+}