u2ui 1.0.0

package/el/code/code.js

@@ -0,0 +1,289 @@
+// other highlighter that could be used: https://github.com/shikijs/shiki
+
+const libRoot = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/';
+const libPromise = import(libRoot + 'es/highlight.min.js');
+
+class code extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode:'open'});
+        shadowRoot.innerHTML =
+        `<style>
+        :host {
+            position:relative;
+            white-space:normal !important;
+            display:grid !important; /* todo, move main css? would also be useful there. Why important? could be problematic */
+        }
+        :host > * {
+            grid-area:1/1;
+            line-height:inherit;
+            font:inherit;
+            white-space:pre;
+        }
+        #code {
+            inline-size:max-content;
+        }
+        textarea {
+            display:none;
+            resize:none;
+            background-color:transparent;
+            color:#0000;
+            caret-color:#000;
+            border:0;
+            margin:0;
+            padding:0;
+            outline:none;
+        }
+        #tools {
+            white-space:normal;
+            transition:.1s;
+            display:flex;
+            justify-content:flex-end;
+            align-items:start;
+            gap:.3em;
+            pointer-events:none;
+        }
+        #tools::slotted(button) {
+            position:sticky !important;
+            right:0;
+            top:0;
+            pointer-events:all;
+            margin:0 !important;
+            padding:.3rem !important;
+            text-align:center !important;
+            background-color:transparent !important;
+            color:inherit !important;
+        }
+        :host(:not(:hover)) #tools {
+            opacity:0;
+            visibility:hidden;
+        }
+        :host([editable]) textarea {
+            display:block !important;
+        }
+        </style>
+
+        <div id=code></div>
+        <textarea autocomplete=off autocorrect=off autocapitalize=off spellcheck=false autocorrect=off></textarea>
+        <slot id=tools name=tools></slot>
+        <link rel="stylesheet" href="${libRoot}styles/github.min.css">
+        `;
+        // would be great, if in the case of a hightlighted textarea, the original textarea would be used
+
+        this.sourceMutationObserver = new MutationObserver(()=>{
+            this.value = this.getSourceValue();
+        });
+            
+        this.textarea = this.shadowRoot.querySelector('textarea');
+    }
+    connectedCallback() {
+        requestAnimationFrame(()=>this._init());
+    }
+    _init(){
+
+        this.textarea.addEventListener('input', e => {
+            this.setHightlightValue(e.target.value);
+            this.setSourceValue(e.target.value);
+        });
+
+        this.textarea.addEventListener('blur', e => { // if textarea is focused, the code is not updated
+            if (this.unUpdatedValue == null) return;
+            this.value = this.unUpdatedValue;
+        });
+
+        const elementId = this.getAttribute('element');
+        if (elementId) {
+            this.setForeignElement(document.getElementById(elementId));
+            return;
+        } else {
+            this.sourceElement = this.querySelector('pre>code,textarea,style,script') || this;
+        }
+
+        if (this.sourceElement.tagName === 'TEXTAREA') {
+            this.setAttribute('editable','');
+        }
+
+        this.value = this.getSourceValue();
+    }
+    get language(){
+        if (this.hasAttribute('language')) return this.getAttribute('language');
+        const el = this.sourceElement;
+        if (el.tagName === 'STYLE') return 'css';
+        if (el.tagName === 'TEMPLATE') return 'html';
+        if (el.tagName === 'SCRIPT') {
+            const type = el.getAttribute('type');
+            if (type==='module') return 'javascript';
+            if (type) return type.replace(/^text\/(x-)?/, '');
+            return 'javascript';
+        }
+        if (this.isForeign) return 'html';
+        return false;
+    }
+    setHightlightValue(value){
+        if (!this.libLoaded) this.shadowRoot.querySelector('#code').innerHTML = htmlEncode(value); // fast display and then highlight
+        libPromise.then( ({default:hljs})=>{
+            this.libLoaded = true;
+            const language = this.language;
+            requestAnimationFrame(()=>{
+                this.shadowRoot.querySelector('#code').innerHTML = (
+                    language ?
+                      hljs.highlight(value, {language}) :
+                      hljs.highlightAuto(value)
+                  ).value + '<br>';
+            });
+        });
+    }
+    setSourceValue(value){
+
+        // //this._recentlySetSourceValue = true;
+        // setTimeout(()=>this._recentlySetSourceValue = false);
+
+        const el = this.sourceElement;
+        if (el.tagName === 'TEXTAREA') { el.value = value; return; }
+        if (this.isForeign) {
+            el.innerHTML = value;
+        } else {
+            el.textContent = value;
+        }
+    }
+    getSourceValue(){
+        const el = this.sourceElement;
+        if (el.tagName === 'TEXTAREA') return el.value;
+        if (el.tagName === 'SCRIPT') return el.textContent.replaceAll('\\/script>','/script>');
+        if (this.isForeign) {
+            return el.innerHTML;
+        } else {
+            return el.textContent;
+        }
+    }
+    setForeignElement(element){
+        this.isForeign = true;
+        this.sourceElement = element;
+        if (!element) console.error('u2-code: element not found');
+        this.sourceMutationObserver.disconnect();
+        this.sourceMutationObserver.observe(element, {subtree:true, characterData:true, attributes:true, childList:true});
+        this.value = this.getSourceValue();
+    }
+    get value(){
+        return this.textarea.value; // better this one
+        //return this.getSourceValue();
+    }
+    set value(value){
+        if (this.trim) value = trimCode(value);
+
+        if (value === this.textarea.value) return;
+
+        // setInputValueKeepSelection(this.textarea, value); way too slow
+        this.unUpdatedValue = null;
+        if (this.textarea.matches(':focus')) {
+            this.unUpdatedValue = value;
+            return;
+        }
+
+        this.setHightlightValue(value);
+        this.textarea.value = value;
+
+    }
+    setSelectionRange(start, end){
+        this.textarea.setSelectionRange(start, end);
+    }
+    focus(){
+        this.textarea.focus();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'trim') {
+            this.trim = newValue!=null;
+            if (this.sourceElement) this.value = this.getSourceValue();
+        }
+        if (name === 'editable') this.shadowRoot.getElementById('code').inert = newValue!=null;
+        if (name === 'element') this.setForeignElement(document.getElementById(newValue));
+    }
+    static observedAttributes = ['trim', 'editable', 'element'];
+
+}
+
+customElements.define('u2-code', code);
+
+
+function trimCode(value){
+    const lines = value.split('\n');
+    // remove first and last lines if only contains whitespaces
+    while (lines[0] != null && lines[0].trim() === '') lines.shift();
+    while (lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+    // evaluate min num of starting whitespace
+    let minWhitespace = 999;
+    for (const line of lines) {
+        if (line.match(/^\s*$/)) continue; // ignore empty lines
+        const num = line.match(/^\s*/)[0].length;
+        if (num < minWhitespace) minWhitespace = num;
+    }
+    // remove starting minWhitespaces and join lines
+    return lines.map(line => line.slice(minWhitespace)).join('\n');
+}
+function htmlEncode(input) {
+    return input.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
+        return '&#'+i.charCodeAt(0)+';';
+    });
+}
+
+
+
+/* helper */
+
+
+// /* functions */
+// function setInputValueKeepSelection(input, newValue) {
+//     // if (document.activeElement !== input) { // not good for shadow dom
+//     //     input.value = newValue;
+//     //     return;
+//     // }
+//     if (!input.matches(':focus')) {
+//         input.value = newValue;
+//         return;
+//     }
+//     if (input.value === newValue) return;
+//     const selectionStart = input.selectionStart;
+//     const selectionEnd = input.selectionEnd;
+//     const oldString = input.value;
+//     const newPositionStart = positionAfterUpdate(oldString, selectionStart, newValue);
+//     const newPositionEnd = positionAfterUpdate(oldString, selectionEnd, newValue);
+//     input.value = newValue;
+//     input.setSelectionRange(newPositionStart, newPositionEnd);
+// }
+
+// function positionAfterUpdate(initialString, initialPosition, newString) {
+//     let minDistance = Infinity;
+//     let newPosition = -1;
+//     for (let i = 0; i <= newString.length; i++) {
+//         const a = initialString.substring(0, initialPosition) + newString.substring(i);
+//         const b = newString.substring(0, i) + initialString.substring(initialPosition);
+//         const distance = levenshteinDistance(a, b);
+//         if (distance < minDistance) {
+//             minDistance = distance;
+//             newPosition = i;
+//         }
+//     }
+//     return newPosition;
+// }
+
+
+
+// function levenshteinDistance(a, b) {
+//     if (a.length > b.length) [a, b] = [b, a];
+//     const previousRow = Array.from({length: a.length + 1}, (_, i) => i);
+//     const currentRow = new Array(a.length + 1);
+//     for (let i = 1; i <= b.length; i++) {
+//         currentRow[0] = i;
+//         for (let j = 1; j <= a.length; j++) {
+//             const cost = a[j - 1] === b[i - 1] ? 0 : 1;
+//             currentRow[j] = Math.min(
+//                 currentRow[j - 1] + 1,
+//                 previousRow[j] + 1,
+//                 previousRow[j - 1] + cost
+//             );
+//         }
+//         [previousRow, currentRow] = [currentRow, previousRow];
+//     }
+//     return previousRow[a.length];
+// }

package/el/code/manifest.json

@@ -0,0 +1,66 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "code.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "A custom HTML element for displaying highlighted, editable code blocks.",
+            "name": "code",
+            "members": [
+              {
+                "kind": "getter",
+                "name": "language",
+                "description": "Gets the language of the code block."
+              },{
+                "kind": "getter",
+                "name": "value",
+                "description": "Gets the value of the code block."
+              }
+            ],
+            "events": [],
+            "attributes": [
+              {
+                "name": "trim",
+                "u2-type": "boolean",
+                "description": "Trims empty first and last lines, and most importantly, indentation."
+              },
+              {
+                "name": "editable",
+                "u2-type": "boolean",
+                "description": "Makes the code block editable."
+              },
+              {
+                "name": "language",
+                "description": "Defines the code language (auto-detect if not set). See https://highlightjs.readthedocs.io/en/latest/supported-languages.html for a list of supported languages.",
+                "u2Examples": ["javascript", "html", "css", "json", "xml", "markdown", "php"]
+              },
+              {
+                "name": "element",
+                "description": "ID of the element whose innerHTML should be used as code."
+              }
+            ],
+            "cssProperties": [],
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-code",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-code",
+            "declaration": {
+              "name": "code",
+              "module": "code.js"
+            }
+          }
+        ]
+      }
+    ]
+  }

package/el/code/tests/minimal.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <link href="../code.css" rel=stylesheet>
+    <script src="../code.js" type=module async></script>
+
+<body>
+
+
+<section class="main">
+    <u2-code trim editable>
+        <script>
+            // Code-Element
+            if (de) {
+                alert('Hallo, Welt!');
+            } else {
+                alert('Hello, World!');
+            }
+        </script>
+    </u2-code>
+</section>
+
+<style class="main">
+    u2-code {
+        font-size:15px;
+        max-block-size:11rem;
+    }
+</style>

package/el/code/tests/test.html

@@ -0,0 +1,162 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>u2-code</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+    <link href="../../../el/ico/ico.css" rel=stylesheet>
+    <script src="../../../el/ico/ico.js" type=module async></script>
+
+    <style>
+    html {
+        --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@adobe/spectrum-css-workflow-icons@1.4.2/24/{IconName}.svg';
+    }
+    </style>
+        
+    <link href="../../../el/tooltip/tooltip.css" rel=stylesheet>
+    <script src="../../../el/tooltip/tooltip.js" type=module async></script>
+
+    <style>
+    u2-tooltip {
+        font-size:max(12px, .7rem);
+        background:var(--color-text);
+        color:var(--color-bg);
+        border-radius:.3rem;
+    }
+    </style>
+
+
+    <link href="../code.css" rel=stylesheet >
+    <script src="../code.js" type=module async></script>
+
+    <style>
+    button::after {
+        display: none !important;
+        content: '' !important;
+        background: red;
+    }
+    </style>
+
+</head>
+
+<body>
+    
+    <section>
+
+        <h2>pre > code (preferred) + buttons</h2>
+        <u2-code trim editable>
+
+<pre><code>&lt;u2-code&gt;
+    &lt;pre&gt;
+        &lt;code&gt;
+            Shows decoded innerHTML
+        &lt;/code&gt;
+    &lt;/pre&gt;
+&lt;/u2-code&gt;</code></pre>
+
+            <button slot=tools onclick="document.fullscreenElement ? document.exitFullscreen() : this.parentNode.requestFullscreen()">
+                <u2-ico icon=full-screen style="font-size:1.2rem"></u2-ico>
+                <u2-ico icon=full-screen-exit style="font-size:1.2rem"></u2-ico>
+                <style>
+                    u2-code:fullscreen [icon=full-screen] { display:none }
+                    u2-code:not(:fullscreen) [icon=full-screen-exit] { display:none }
+                </style>
+                <u2-tooltip>Fullscreen</u2-tooltip>
+            </button>
+            <button slot=tools onclick="navigator.clipboard.writeText(this.parentNode.value); this.querySelector('.-done').showFor(this)" style="bottom:0; top:auto">
+                <u2-ico icon=copy style="font-size:1.2rem"></u2-ico>
+                <span><u2-tooltip class=-done>Copied</u2-tooltip></span>
+                <u2-tooltip>Copy</u2-tooltip>
+            </button>
+
+        </u2-code>
+
+        <h2>direct, no tag</h2>
+        <u2-code trim editable language=html>
+            &lt;u2-code&gt;
+                Shows decoded innerHTML
+            &lt;/u2-code&gt;
+        </u2-code>
+
+        <h2>foreign element (live! innerHTML)</h2>
+        <u2-code element=demo trim editable language=html> </u2-code>
+        <div id=demo contenteditable>
+            <div style="padding:.5rem; border-radius:1em; background:#0004">
+                Change the <b>code</b> or change this box
+                <b style="font-size:1.3em">
+                    directly!
+                </b>
+            </div>
+        </div>
+
+        <h2>Style Tag (live!)</h2>
+        <u2-code trim editable>
+            <style contenteditable>
+u2-code {
+    padding:.5rem;
+    font-size:14px;
+    background:#fff;
+    box-shadow:0 0 .3rem #0003;
+    max-block-size:11rem;
+    border-radius:.5rem;
+}
+            </style>
+        </u2-code>
+
+        <h2>Script Tag</h2>
+        <u2-code trim editable>
+            <script type=html>
+                <script type="html">
+                    alert('Shows raw content');
+                    alert('Exeption: /script> has to be translated to \\/script> to not break out');
+                <\/script>
+            </script>
+        </u2-code>
+
+        <h2>Textarea</h2>
+        <label>
+            Label
+
+            <u2-code trim>
+                <textarea>
+                &lt;u2-code&gt;
+                    &lt;textarea&gt;
+                        &amp;lt;u2-code&amp;gt;...
+                    &lt;/textarea&gt;
+                &lt;/u2-code&gt;
+                </textarea>
+            </u2-code>
+
+        </label>
+        
+        <h2>Textarea auto-height when js disabled</h2>
+
+        <label>
+            Label
+            <u2-code language=html trim style="min-block-size:140px; max-block-size:200px">
+                
+<textarea autocomplete=off autocorrect=off autocapitalize=off spellcheck=false>&lt;u2-code&gt;
+    For this test, you should deactivate javascript.
+    This u2-code element has min-height:140px; max-block-size:200px
+    It resizes between these values even without js (only chromium for now)
+&lt;/u2-code&gt;</textarea>
+            </u2-code>
+
+        </label>
+
+        <!--h2>Template tag</h2>
+        <u2-code trim editable>
+            <template>
+                Shows parsed DOM, useful?
+                <input type=checkbox checked>
+            </template>
+        </u2-code-->
+
+    </section>

package/el/copy/README.md

@@ -0,0 +1,35 @@
+# <u2-copy> - element
+Displays formatted copys
+
+## Usage
+
+```html
+original: <span id=source contenteditable>Hello <b>World</b></span>
+<br>
+copy: <u2-copy for=source sync></u2-copy>
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/copy/copy.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/copy/copy.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/copy/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/copy/tests/test.html)  
+
+## Attributes
+
+Attribute        | Description                  
+---              | ---                          
+`for`            | ID of the original-element, has to be present to be useful
+`sync`           | bool, if present changes are reflected immediately
+
+## 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/copy/copy.css

@@ -0,0 +1,3 @@
+u2-copy {
+    display: contents;
+}