u2ui 1.0.1 → 1.4.6

package/js/dialog/README.md

@@ -11,27 +11,28 @@ alert, prompt, confirm but async
 ## Usage
 
 ```html
-<button onclick="module.prompt('Just a test').then(console.log)">run</button>
+<button onclick="u2_dialog.prompt('Just a test').then((res)=>this.innerHTML = 'value: '+res)">run</button>
 ```
 
 ```css
-dialog:where(.\:modal, :modal) {
-    box-shadow: 0 0 1rem #0008;
-    border: 0;
-    border-radius: .3rem;
+dialog:modal {
+    box-shadow: 0 0 1rem #0008;
+    border: 0;
+    border-radius: .3rem;
 }
 ```
 
 ## Install
 
 ```js
-import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/dialog/dialog.min.js"
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/dialog/dialog.js"
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/js/dialog/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/js/dialog/tests/test.html)  
+[tests.html](http://gcdn.li/u2ui/u2@main/js/dialog/tests/tests.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/dialog/tests/minimal.html)  
 
 ## Pro-Tip
 

package/js/dialog/dialog.js

@@ -1,261 +1,228 @@
-// TODO: 
-// - should we move the dom inside shadowDom to avoid style conflicts?
-//  or should we add an option to use shadowDom or just to define the container for the dialog-element?
-// - rename to modal.js? see <iframe sandbox="allow-modals">
-
-class Dialog {
-    constructor(options) {
-
-        const element = this.element = d.createElement('dialog');
-        element.classList.add('u2x-modal');
-        //element.setAttribute('role','alertdialog'); // todo: internals.role = 'alertdialog'; ?
-        element.innerHTML = 
-            `<form method=dialog>
-                ${options.body}
-                ${options.buttons?'<div class=-buttons u2-focusgroup></div>':''}
-            </form>`;
-
-        const btnCont = element.querySelector('.-buttons');
-        if (options.buttons) {
-
-            import('../../attr/focusgroup/focusgroup.js');
-
-            options.buttons.forEach((btn, i)=>{
-                const el = d.createElement('button');
-                el.innerHTML = btn.title;
-                el.value = btn.value;
-                el.type = btn.type || 'submit';
-                el.addEventListener('click', e=>{
-                    btn.then && btn.then.call(this,e);
-                });
-                btnCont.appendChild(el);
-                if (i === 0) setTimeout(()=>el.focus());
-            });
-        }
-        this.options = options;
-        options.init && options.init(this.element);
-    }
-    show(){
-        const element = this.element;
-        d.body.appendChild(element);
-        element.showModal();
-        element.classList.add(':modal'); // fallback for browsers that don't support :modal
-        if (this.options.audio) {
-            const url = this.options.audio === true ? import.meta.url + '/../notification.mp3' : this.options.audio;
-            const audio = new Audio();
-            audio.volume = 0.2;
-            audio.src = url;
-            audio.play();            
-        }
-
-        return new Promise((resolve, reject)=>{
-            element.addEventListener('close',()=>{
-                resolve(this.value);
-                element.remove();
-            });
-        });
-
-    }
-}
-
-/**
- * Creates and shows a dialog with an alert message.
- * @param {string} text - The text to be displayed in the alert dialog.
- * @returns {Promise<undefined>} A Promise that resolves to undefined when the dialog is closed.
- * @example
- * await alert('This is an alert message');
- */
-export function alert(text) {
-    const options = toOptions(text);
-    options.buttons = [{title:'OK'}];
-    return new Dialog(options).show();
-};
-
-/**
- * Creates and shows a dialog with a confirmation message.
- * @param {string} text - The text to be displayed in the confirmation dialog.
- * @returns {Promise<boolean>} A Promise that resolves to true if the user clicks the OK button, and false if the user clicks the Cancel button.
- * @example
- * if (await confirm('Do you want to delete this item?')) {
- *    deleteItem();
- * }
- */
-export function confirm(text) {
-    const options = toOptions(text);
-    options.buttons = [
-        {title: 'OK',then(){ dialog.value = true; } },
-        {title: translate(options.lang, 'Cancel')}
-    ];
-    const dialog = new Dialog(options);
-    dialog.value = false;
-    return dialog.show();
-};
-
-/**
- * Creates and shows a dialog with a prompt message.
- * @param {string} text - The text to be displayed in the prompt dialog.
- * @param {string} [initial] - The initial value of the input field.
- * @returns {Promise<string>} A Promise that resolves to the value entered by the user, or null if the user clicks the Cancel button.
- * @example
- * const name = await prompt('Enter your name:');
- */
-export function prompt(text, initial) {
-    const options = toOptions(text);
-    options.body = '<label>'+options.body+'<input style="width:100%;display:block;margin-top:.5rem"></label>';
-    options.buttons = [
-        {title: 'OK', then(){ dialog.value = input.value; } },
-        {title: translate(options.lang, 'Cancel')}
-    ];
-    const dialog = new Dialog(options);
-    const input = dialog.element.querySelector('input');
-    input.value = initial ?? '';
-    setTimeout(()=>input.focus());
-    dialog.value = null;
-    return dialog.show();
-};
-
-/* */
-export function form(html){
-    if (typeof html === 'string') html = { body: html };
-    const options = toOptions(html);
-    options.buttons = 
-        [{title:'OK',then(){ // TODO: triggers by click but would be better by form.submit?
-            const form = dialog.element.querySelector('form');
-            if (!form.checkValidity()) dialog.value = null;
-            else {
-                const data = Object.fromEntries(new FormData(form).entries());
-                dialog.value = data;
-            }
-        }},{title: translate(lang(), 'Cancel'), type:'button', then(){
-            dialog.element.close();
-        }}];
-
-    const dialog = new Dialog(options);
-    return dialog.show();
-}
-/* */
-
-
-/* init */
-const d = document;
-
-d.head.insertAdjacentHTML(
-    'afterbegin',
-    '<style>'+
-    '.u2x-modal .-buttons {'+
-        'display:flex;'+
-        'flex-wrap:wrap;'+
-        'justify-content:flex-end;'+
-        'gap:.5rem;'+
-        'margin-top:1rem;'+
-    '}'+
-    '</style>'
-);
-
-
-
-// close dialog on backdrop-click if it has the backdropClose-class
-addEventListener('click', event=>{
-    const el = event.target;
-    if (el.tagName !== 'DIALOG') return;
-    if (!el.classList.contains('backdropClose')) return;
-    const rect = el.getBoundingClientRect();
-    let isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
-    if (isInDialog) return;
-    el.close();
-    //hideAnimated(el, ()=>el.close());
-});
-
-
-
-// helper functions
-
-function toOptions(options) {
-    if (typeof options === 'string') {
-        options = { body: htmlEntities(options) };
-    }
-    options.lang ??= lang();
-    return options;
-}
-
-
-function htmlEntities(str) {
-    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-function translate(lang, v) {
-    return text[v][lang] || v;
-}
-function lang() {
-    return navigator.language.substring(0,2);
-}
-const text = {
-    'Cancel':{
-        'de':'Abbrechen',
-        'fr':'Annuler',
-        'es':'Cancelar',
-        'it':'Annulla',
-        'pt':'Cancelar',
-        'ua':'Скасувати',
-        'ru':'Отмена',
-        'ja':'キャンセル',
-        'ko':'취소',
-        'zh':'取消',
-        'nl':'Annuleren',
-    }
-}
-
-
-/* 
-
-Works! Waiting for demand
-There are standards on the way that allow animations (@starting-style, transition-behavior: allow-discrete;)
-
-needs css:
-dialog.animated[hidden] {
-    display:block !important;
-    pointer-events:none !important;
-}
-
-function hideAnimated(el, then) {
-    if (!el.classList.contains('animated')) {
-        then();
-        return;
-    }
-    el.style.animation = 'none'; // animation can be the same in reverse, so remove it first to avoid it not triggering
-    setTimeout(()=>{
-        el.style.animation = '';
-        const end = e=>{
-            if (e && e.type && e.target !== el) return;
-            el.hidden = false;
-            then && then();
-            el.removeEventListener('animationend',end);
-            el.removeEventListener('transitionend',end);
-            clearTimeout(timeout);
-            return;
-        }
-        el.addEventListener('animationend',end);
-        el.addEventListener('transitionend',end);
-        const timeout = setTimeout(end,2000);
-        el.hidden = true;
-    });
-
-};
-addEventListener('cancel', e=>{
-    if (e.defaultPrevented) return;
-    const el = e.target;
-    if (el.hidden) return;
-    if (!el.classList.contains('animated')) return;
-    e.preventDefault();
-    hideAnimated(el, ()=>el.close());
-}, true)
-addEventListener('submit', e=>{
-    if (e.defaultPrevented) return;
-    const form = e.target;
-    if (form.method!=='dialog') return;
-    const el = el.closest('.dialog');
-    if (el.hidden) return;
-    if (!el.classList.contains('animated')) return;
-    e.preventDefault();
-    hideAnimated(el, ()=>form.submit());
-}, true)
-/* */
+// TODO: 
+// - should we move the dom inside shadowDom to avoid style conflicts?
+//  or should we add an option to use shadowDom or just to define the container for the dialog-element?
+// - rename to modal.js? see <iframe sandbox="allow-modals">
+
+const d = document;
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(`.u2x-modal .-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: .5rem;
+    margin-top: 1rem;
+}`);
+
+
+class Dialog {
+    constructor(options) {
+
+        const element = this.element = d.createElement('dialog');
+        element.classList.add('u2x-modal');
+        // element.role = 'alertdialog'; // todo: internals.role = 'alertdialog'; ?
+        element.innerHTML = 
+            `<form method=dialog>
+                ${options.body}
+                ${options.buttons?'<div class=-buttons u2-focusgroup></div>':''}
+            </form>`;
+
+        const btnCont = element.querySelector('.-buttons');
+        if (options.buttons) {
+
+            import('../../attr/focusgroup/focusgroup.js');
+
+            options.buttons.forEach((btn, i)=>{
+                const el = d.createElement('button');
+                el.innerHTML = btn.title;
+                el.value = btn.value;
+                el.type = btn.type || 'submit';
+                el.addEventListener('click', e=>{
+                    if (btn.value !== undefined) this.value = btn.value; // default to button value, like native returnValue
+                    btn.action?.call(this, e);                           // action may override this.value
+                });
+                btnCont.appendChild(el);
+                if (i === 0) setTimeout(()=>el.focus());
+            });
+        }
+        this.options = options;
+        options.init && options.init(this.element);
+    }
+    show(){
+        const element = this.element;
+        (this.options.root ?? d.body).appendChild(element);
+        // make our styles available in the current root (document or a shadow root)
+        const root = element.getRootNode();
+        if (!root.adoptedStyleSheets.includes(sheet)) root.adoptedStyleSheets.push(sheet);
+        element.showModal();
+        if (this.options.audio) {
+            const url = this.options.audio === true ? import.meta.url + '/../notification.mp3' : this.options.audio;
+            const audio = new Audio();
+            audio.volume = 0.2;
+            audio.src = url;
+            audio.play().catch(()=>{}); // autoplay policy may reject
+        }
+
+        return new Promise(resolve=>{
+            element.addEventListener('close',()=>{
+                resolve(this.value);
+                element.remove();
+            });
+        });
+
+    }
+}
+
+/**
+ * Creates and shows a dialog with an alert message.
+ * @param {string} text - The text to be displayed in the alert dialog.
+ * @returns {Promise<undefined>} A Promise that resolves to undefined when the dialog is closed.
+ * @example
+ * await alert('This is an alert message');
+ */
+export function alert(text, defaults) {
+    const options = toOptions(text, defaults);
+    options.buttons = [{title:'OK'}];
+    return new Dialog(options).show();
+};
+
+/**
+ * Creates and shows a dialog with a confirmation message.
+ * @param {string} text - The text to be displayed in the confirmation dialog.
+ * @returns {Promise<boolean>} A Promise that resolves to true if the user clicks the OK button, and false if the user clicks the Cancel button.
+ * @example
+ * if (await confirm('Do you want to delete this item?')) {
+ *    deleteItem();
+ * }
+ */
+export function confirm(text, defaults) {
+    const options = toOptions(text, defaults);
+    options.buttons = [
+        {title: 'OK',action(){ dialog.value = true; } },
+        {title: translate(options.lang, 'Cancel')}
+    ];
+    const dialog = new Dialog(options);
+    dialog.value = false;
+    return dialog.show();
+};
+
+/**
+ * Creates and shows a dialog with a prompt message.
+ * @param {string} text - The text to be displayed in the prompt dialog.
+ * @param {string} [initial] - The initial value of the input field.
+ * @returns {Promise<string>} A Promise that resolves to the value entered by the user, or null if the user clicks the Cancel button.
+ * @example
+ * const name = await prompt('Enter your name:');
+ */
+export function prompt(text, initial, defaults) {
+    const options = toOptions(text, defaults);
+    options.body = '<label>'+options.body+'<input style="width:100%;display:block;margin-top:.5rem"></label>';
+    options.buttons = [
+        {title: 'OK', action(){ dialog.value = input.value; } },
+        {title: translate(options.lang, 'Cancel')}
+    ];
+    const dialog = new Dialog(options);
+    const input = dialog.element.querySelector('input');
+    input.value = initial ?? '';
+    setTimeout(()=>input.focus());
+    dialog.value = null;
+    return dialog.show();
+};
+
+/* */
+export function form(html, defaults){
+    if (typeof html === 'string') html = { body: html };
+    const options = toOptions(html, defaults);
+    options.buttons =
+        [{title:'OK',action(){ // TODO: triggers by click but would be better by form.submit?
+            const form = dialog.element.querySelector('form');
+            if (!form.checkValidity()) dialog.value = null;
+            else {
+                const data = Object.fromEntries(new FormData(form).entries());
+                dialog.value = data;
+            }
+        }},{title: translate(options.lang, 'Cancel'), type:'button', action(){
+            dialog.element.close();
+        }}];
+
+    const dialog = new Dialog(options);
+    return dialog.show();
+}
+/* */
+
+/**
+ * Creates and shows a modal dialog with arbitrary content and buttons.
+ * Resolves to `this.value` — set via the clicked button's `value`, or in a button `action`.
+ * @param {string|object} options - HTML body string, or { body, buttons, root, lang, init, audio }.
+ * @returns {Promise<*>} Resolves to the dialog's value when closed.
+ * @example
+ * const choice = await modal({ body:'Pick one', buttons:[{title:'A',value:'a'},{title:'B',value:'b'}] });
+ */
+export function modal(options, defaults) {
+    return new Dialog(toOptions(options, defaults)).show();
+}
+
+// bind default options (e.g. a shadow root and/or lang) to all dialogs:
+// const m = scope({root: this.shadowRoot, lang:'de'}); m.alert('hi')
+export function scope(defaults){
+    return {
+        alert:   (text)          => alert(text, defaults),
+        confirm: (text)          => confirm(text, defaults),
+        prompt:  (text, initial) => prompt(text, initial, defaults),
+        form:    (html)          => form(html, defaults),
+        modal:   (options)       => modal(options, defaults),
+    };
+}
+
+
+// close dialog on backdrop-click if it has the backdropClose-class / deprecated "closedby" is the future
+addEventListener('click', event=>{
+    const el = event.composedPath()[0]; // composedPath: real target, also inside shadow DOM
+    if (el.tagName !== 'DIALOG') return;
+    if (!el.classList.contains('backdropClose')) return;
+    const rect = el.getBoundingClientRect();
+    let isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+    if (isInDialog) return;
+    el.close();
+    //hideAnimated(el, ()=>el.close());
+});
+
+
+
+// helper functions
+
+function toOptions(input, defaults) {
+    const options = typeof input === 'string'
+        ? { body: htmlEntities(input).replace(/\n/g, '<br>') } // plain string: escape it
+        : input;                                               // object: trusted html body
+    return { lang: lang(), ...defaults, ...options };
+}
+
+
+function htmlEntities(str) {
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function translate(lang, v) {
+    return text[v]?.[lang] || v;
+}
+function lang() {
+    return navigator.language.substring(0,2);
+}
+const text = {
+    'Cancel':{
+        'ar':'إلغاء',
+        'de':'Abbrechen',
+        'es':'Cancelar',
+        'fr':'Annuler',
+        'it':'Annulla',
+        'ja':'キャンセル',
+        'ko':'취소',
+        'nl':'Annuleren',
+        'pl':'Anuluj',
+        'pt':'Cancelar',
+        'ru':'Отмена',
+        'tr':'İptal',
+        'ua':'Скасувати',
+        'zh':'取消',
+    }
+}
+

package/js/drag/README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```html
+
+```
+
+## Usage
+
+```html
+
+```
+
+## Install
+
+```js
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/drag/drag.js"
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/js/drag/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/drag/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/js/drag/drag.js

@@ -0,0 +1,38 @@
+
+export let dragged = null;
+
+document.addEventListener('dragstart', (e) => {
+    dragged = null;
+    // composedPath() statt e.target: bei Events aus einem Shadow-Root ist e.target auf den
+    // Host retargetiert -> wir würden das falsche Element ziehen. Das gezogene Element ist
+    // das erste [draggable] im Pfad (funktioniert in Light- und Shadow-DOM gleich).
+    dragged = e.composedPath().find(n => n.nodeType === 1 && n.draggable);
+    if (!dragged) return;
+    dragged.classList.add(':dragging-image');
+    requestAnimationFrame(() => { // add styles after native dragImage is created
+        dragged.classList.remove(':dragging-image')
+        dragged.classList.add(':dragging');
+    });
+});
+
+document.addEventListener('dragend', () => {
+    if (!dragged) return; // just handle elements
+    dragged.classList.remove(':dragging');
+});
+
+
+
+
+
+
+
+/* this works *
+document.addEventListener('dragstart', (e) => {
+    const element = e.target;
+    const clone = element.cloneNode(true);
+    clone.innerHTML = 'Dragging...';
+    document.body.appendChild(clone);
+    e.dataTransfer.setDragImage(clone, 20, 20);
+    requestAnimationFrame(() => clone.remove());
+});
+*/