u2ui 1.0.1 → 1.4.6

package/el/tooltip/manifest.json

@@ -1,69 +1,56 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "tooltip.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "tooltip",
-                    "members": [
-                    ],
-                    "events": [
-                        {
-                            "name": "u2-show",
-                            "type": {
-                                "text": "Event"
-                            }
-                        }
-                    ],
-                    "attributes": [
-                        {
-                            "name": "position",
-                            "description": "Position of the tooltip, will flip if there is not enough space",
-                            "u2-type": ["top", "bottom", "left", "right"]
-                        },{
-                            "name": "tabindex",
-                            "description": "Tabindex to make the tooltip focusable",
-                            "u2-type": "number"
-                        },{
-                            "name": "id",
-                            "description": "Other Elements can use this id to reference the Tooltip, if not set the Tooltip refers to its parent Element"
-                        },{
-                            "name": "open",
-                            "description": "Deprecated! It is just used to animate show and open. When animating popovers is supported, this will be removed.",
-                            "u2-type": "boolean",
-                            "deprecated": true
-                        },{
-                            "name": ":position-x",
-                            "description": "Read Only! Deprecated! Real position of the tooltip in x direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
-                            "u2-type": ["after", "before", "center"],
-                            "deprecated": true
-                        },{
-                            "name": ":position-y",
-                            "description": "Read Only! Deprecated! Real position of the tooltip in y direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
-                            "u2-type": ["after", "before", "center"],
-                            "deprecated": true
-                        }
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-tooltip",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-tooltip",
-                    "declaration": {
-                        "name": "tooltip",
-                        "module": "tooltip.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "tooltip.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Tooltip",
+            "members": [],
+            "events": [{
+                "name": "u2-show",
+                "type": { "text": "Event" }
+            }],
+            "attributes": [{
+                "name": "position",
+                "description": "Position of the tooltip, will flip if there is not enough space",
+                "u2-type": ["top", "bottom", "left", "right"]
+            },{
+                "name": "tabindex",
+                "description": "Tabindex to make the tooltip focusable",
+                "u2-type": "number"
+            },{
+                "name": "id",
+                "description": "Other Elements can use this id to reference the Tooltip, if not set the Tooltip refers to its parent Element"
+            },{
+                "name": "open",
+                "description": "Deprecated! It is just used to animate show and open. When animating popovers is supported, this will be removed.",
+                "u2-type": "boolean",
+                "deprecated": true
+            },{
+                "name": ":position-x",
+                "description": "Read Only! Deprecated! Real position of the tooltip in x direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
+                "u2-type": ["after", "before", "center"],
+                "deprecated": true
+            },{
+                "name": ":position-y",
+                "description": "Read Only! Deprecated! Real position of the tooltip in y direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
+                "u2-type": ["after", "before", "center"],
+                "deprecated": true
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-tooltip",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-tooltip",
+            "declaration": {
+                "name": "U2Tooltip",
+                "module": "tooltip.js"
+            }
+        }]
+    }]
+}

package/el/tooltip/tooltip.css

@@ -1,97 +1,100 @@
-/* Currently, we cannot animate "hide" as after hidePopover() it might not be top-layer, potentially disrupting layouts. */
-u2-tooltip {
-    /* relevant */
-    opacity: 0;
-    visibility:hidden;
-    position: absolute;
-    left: -9999px;
-    top: -9999px;
-    z-index: 9999;
-    transition-property:opacity, visibility;
-
-    /* hide transition */
-    transition-duration:400ms;
-    transition-delay: 10ms;
-
-    /* customisable */
-    pointer-events: none;
-    padding: .5em .7em;
-    max-width:14rem;
-    background: Canvas;
-    color: CanvasText;
-
-    /* style */
-    font-size:max(12px, .7rem);
-    border-radius:.8em;
-    background: var(--color-text, CanvasText);
-    color: var(--color-bg, Canvas);
-    border:1px solid var(--color-text, CanvasText);
-
-
-    /* popover */
-    margin: 0;
-    overflow: visible;
-    /* display: block; bad, as it is not top-layer */
-    /* */
-}
-
-u2-tooltip[tabindex="-1"] {
-    pointer-events:auto;
-}
-
-u2-tooltip:is(:focus-within, :hover, [open]) { /* :popover-open will not animate */
-    /* show transition */
-    transition-duration:250ms;
-    transition-delay: 160ms;
-    visibility:visible;
-    opacity: 1;
-}
-
-
-/* css only fallback */
-u2-tooltip:not(:defined):not([id]) {
-    :hover > &,
-    :focus > & {
-        left:auto;
-        top:auto;
-        margin: 2rem 0;
-        visibility:visible;
-        opacity: 1;
-    }
-}
-/* */
-
-
-/* arrow:
-u2-tooltip::after {
-    --size:1em;
-    content: "";
-    position:absolute;
-    transform:rotate(45deg);
-    width:var(--size);
-    height:var(--size);
-    background-color: inherit;
-    margin:auto;
-    z-index:-1;
-}
-u2-tooltip[\:position-x="after"]::after {
-    left:calc( var(--size) * -.5);
-}
-u2-tooltip[\:position-x="before"]::after {
-    right:calc( var(--size) * -.5);
-}
-u2-tooltip[\:position-x="center"]::after {
-    right:0;
-    left:0;
-}
-u2-tooltip[\:position-y="after"]::after {
-    top:calc( var(--size) * -.5);
-}
-u2-tooltip[\:position-y="before"]::after {
-    bottom:calc( var(--size) * -.5);
-}
-u2-tooltip[\:position-y="center"]::after {
-    top:0;
-    bottom:0;
-}
-*/
+/* Currently, we cannot animate "hide" as after hidePopover() it might not be top-layer, potentially disrupting layouts. */
+u2-tooltip {
+    /* relevant */
+    opacity: 0;
+    visibility:hidden;
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    z-index: 9999;
+    transition-property:opacity, visibility;
+
+    /* hide transition */
+    transition-duration:400ms;
+    /* transition-delay: 10ms; */
+
+    /* customisable */
+    pointer-events: none;
+    padding: .5em 1em;
+    max-width:16rem;
+
+    /* style */
+    font-size:max(12px, .7rem);
+    --line-height: 1.4em;
+    border-radius:.5em;
+    background: var(--color-text, CanvasText);
+    color: var(--color-bg, Canvas);
+    border:1px solid var(--color-text, CanvasText);
+    box-shadow: var(--shadow);
+
+
+    /* popover */
+    margin: 0;
+    overflow: visible;
+    /* display: block; bad, as it is not top-layer */
+    /* */
+}
+
+u2-tooltip[tabindex="-1"] {
+    pointer-events:auto;
+}
+
+u2-tooltip:is(:focus-within, :hover, [open]) { /* :popover-open will not animate */
+    /* show transition */
+    transition-duration:250ms;
+    transition-delay: 160ms;
+    visibility:visible;
+    opacity: 1;
+}
+
+
+/* css only fallback */
+u2-tooltip:not(:defined):not([id]) {
+    :hover > &,
+    :focus > & {
+        left:auto;
+        top:auto;
+        margin: 2rem 0;
+        visibility:visible;
+        opacity: 1;
+    }
+}
+/* */
+
+
+/* arrow: */
+u2-tooltip {
+    &::before {
+        --size:.7em;
+        --halfMinus:calc(var(--size) * -.5);
+        content: "";
+        position:absolute;
+        transform:rotate(45deg);
+        width:var(--size);
+        height:var(--size);
+        background-color: inherit;
+        margin:auto;
+        z-index:-1;
+        border:inherit;
+    }
+    &[\:position-x="after"]::before { left:var(--halfMinus); }
+    &[\:position-x="before"]::before { right:var(--halfMinus); }
+    &[\:position-x="center"]::before { right:0; left:0; }
+    &[\:position-y="after"]::before { top:var(--halfMinus); }
+    &[\:position-y="before"]::before { bottom:var(--halfMinus); }
+    &[\:position-y="center"]::before { top:0; bottom:0; }
+    &::after {
+        content:'';
+        background:inherit;
+        position:absolute;
+        inset:0;
+        z-index:-1;
+        border-radius:inherit;
+    }
+    &:not(:defined)::before {
+        left: 0;
+        right: 0;
+        top: var(--halfMinus);
+    }
+}
+/* */

package/el/tooltip/tooltip.js

@@ -1,82 +1,146 @@
-import {Placer} from '../../js/Placer/Placer.js';
-
-let idCounter = 0;
-
-customElements.define('u2-tooltip', class extends HTMLElement {
-    constructor() {
-        super();
-        this.placer = new Placer(this, { x:'center', y:'after', margin:20 });
-    }
-    connectedCallback() {
-        if (!this.id) { // if no id is set, set one an make it the tooltip for its parent
-            this.id = 'u2-tooltip-' + idCounter++;
-            this.parentNode.setAttribute('aria-labelledby', this.id);
-        }
-        this.setAttribute('role', 'tooltip');
-        this.setAttribute('popover','auto');
-    }
-    _showFor(el){
-        let event = new CustomEvent('u2-tooltip-show', {bubbles: true, cancelable: true, detail: {tooltip: this} });
-        el.dispatchEvent(event);
-        if (event.defaultPrevented) return;
-
-        let sEvent = new CustomEvent('u2-show', {bubbles: true, cancelable: true, detail: {target: el} });
-        this.dispatchEvent(sEvent);
-        if (event.defaultPrevented) return;
-
-        return this.showFor(el);
-    }
-    showFor(el){
-        clearTimeout(this.hideTimeout);
-        setTimeout(()=>this.setAttribute('open',''),0); // to make sure the css transition is triggered
-        this.showPopover();
-        this.placer.toElement(el);
-        this.setAttribute(':position-x', this.placer.positionX);
-        this.setAttribute(':position-y', this.placer.positionY);
-    }
-    hide(){
-        this.removeAttribute('open');
-        clearTimeout(this.hideTimeout);
-        this.hideTimeout = setTimeout(()=>this.hidePopover(),400); // wait for the css transition to finish
-    }
-    attributeChangedCallback(name, old, value) {
-        if (name === 'position') {
-            if (value === 'top')    this.placer.setOptions({y:'before',x:'center'});
-            if (value === 'bottom') this.placer.setOptions({y:'after',x:'center'});
-            if (value === 'left')   this.placer.setOptions({y:'center',x:'before'});
-            if (value === 'right')  this.placer.setOptions({y:'center',x:'after'});
-        }
-    }
-    static observedAttributes = ['position'];
-});
-
-
-document.addEventListener('mouseenter',function(e){
-    if (e.target.shadowRoot) {
-        e.target.shadowRoot.addEventListener('mouseenter',checkOn,true);
-        e.target.shadowRoot.addEventListener('mouseleave',checkOff,true);
-    }
-},true);
-
-
-document.addEventListener('mouseenter',checkOn,true); // on document: chrome
-addEventListener('focusin',checkOn,true);
-document.addEventListener('mouseleave',checkOff,true);
-addEventListener('focusout',checkOff,true);
-
-
-function checkOn(e){
-    // todo: composedPath() for shadowdom? console.log(e.composedPath())
-    getTooltipForElement(e.target)?._showFor(e.target);
-}
-function checkOff(e){
-    getTooltipForElement(e.target)?.hide();
-}
-function getTooltipForElement(el) {
-    if (!el.getAttribute) return; // if document
-    const id = el.getAttribute('aria-labelledby') || el.getAttribute('aria-describedby');
-    if (!id) return;
-    const tooltip = document.getElementById(id);
-    if (!tooltip || tooltip.tagName !== 'U2-TOOLTIP') return;
-    return tooltip;
-}
+import {Placer} from '../../js/Placer/Placer.js';
+
+let idCounter = 0;
+
+export default class U2Tooltip extends HTMLElement {
+    constructor() {
+        super();
+        this.placer = new Placer(this, { x:'center', y:'after', margin:15 });
+    }
+    connectedCallback() {
+        this.role = 'tooltip';
+        this.popover = 'manual';
+        this.popover = 'hint';
+        //this.popover = 'auto';
+
+        if (!this.id) { // if no id is set, set one an make it the tooltip for its parent
+            this.id = 'u2-tooltip-' + idCounter++;
+            this.parentNode.setAttribute('aria-labelledby', this.id);
+            //this.parentNode.ariaLabelledByElements = [this]; // new variant, todo if supported everywhere
+            this.connectedByChildhood = this.parentNode;
+        }
+    }
+    disconnectedCallback() {
+        if (this.connectedByChildhood) {
+            this.removeAttribute('id');
+            this.connectedByChildhood.removeAttribute('aria-labelledby');
+        }
+    }
+    _showFor(el){
+        let event = new CustomEvent('u2-tooltip-show', {bubbles: true, cancelable: true, detail: {tooltip: this} });
+        el.dispatchEvent(event);
+        if (event.defaultPrevented) return;
+
+        let sEvent = new CustomEvent('u2-show', {bubbles: true, cancelable: true, detail: {target: el} });
+        this.dispatchEvent(sEvent);
+        if (sEvent.defaultPrevented) return;
+
+        return this.showFor(el);
+    }
+    showFor(el){
+        clearTimeout(this.hideTimeout);
+        setTimeout(()=>this.setAttribute('open',''),0); // to make sure the css transition is triggered
+        this.showPopover();
+
+        // beta
+        if (this.getAttribute('position') === 'auto') {
+            const xy = isSpaceOccupied(el, 'right')? {y:'after',x:'center'} : {y:'center',x:'after'};
+            this.placer.setOptions(xy);
+        }
+
+        this.placer.toElement(el);
+        this.setAttribute(':position-x', this.placer.positionX); // just for css arrow-placement
+        this.setAttribute(':position-y', this.placer.positionY);
+    }
+    hide(){
+        this.removeAttribute('open');
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = setTimeout(()=>this.hidePopover(),400); // wait for the css transition to finish
+    }
+    attributeChangedCallback(name, old, value) {
+        if (name === 'position') {
+            if (value === 'top')    this.placer.setOptions({y:'before',x:'center'});
+            if (value === 'bottom') this.placer.setOptions({y:'after',x:'center'});
+            if (value === 'left')   this.placer.setOptions({y:'center',x:'before'});
+            if (value === 'right')  this.placer.setOptions({y:'center',x:'after'});
+        }
+    }
+    static observedAttributes = ['position'];
+}
+customElements.define('u2-tooltip', U2Tooltip);
+
+
+document.addEventListener('mouseenter',function(e){
+    if (e.target.shadowRoot) {
+        e.target.shadowRoot.addEventListener('mouseenter',checkOn,true);
+        e.target.shadowRoot.addEventListener('mouseleave',checkOff,true);
+    }
+},true);
+
+
+document.addEventListener('mouseenter',checkOn,true); // on document: chrome
+addEventListener('focusin',checkOn,true);
+document.addEventListener('mouseleave',checkOff,true);
+addEventListener('focusout',checkOff,true);
+
+
+function checkOn(e){
+    // todo: composedPath() for shadowdom? console.log(e.composedPath())
+    getTooltipForElement(e.target)?._showFor(e.target);
+}
+function checkOff(e){
+    getTooltipForElement(e.relatedTarget)?._showFor(e.relatedTarget);
+    getTooltipForElement(e.target)?.hide();
+}
+function getTooltipForElement(el) {
+    if (!el?.getAttribute) return; // if document
+    let tt = null;
+    tt = el.ariaLabelledByElements?.find(tt => tt.tagName === 'U2-TOOLTIP') || el.ariaDescribedByElements?.find(tt => tt.tagName === 'U2-TOOLTIP');
+    if (tt) return tt;
+    // zzz fallback remove if supported everywhere
+    const id = el.getAttribute('aria-labelledby') || el.getAttribute('aria-describedby');
+    if (!id) return;
+    const tooltip = document.getElementById(id);
+    if (!tooltip || tooltip.tagName !== 'U2-TOOLTIP') return;
+    return tooltip;
+}
+
+
+
+// position "auto"
+function isSpaceOccupied(referenceElement, position) {
+    const importantSelector = 'button, p, h1, h2, h3, h4, h5, h6, input, textarea, a, strong, em, li, dt, dd, td, th, label';
+    const offset = 30; 
+    const refRect = referenceElement.getBoundingClientRect();
+    let testX, testY;
+    switch (position) {
+        case 'right':
+            testX = refRect.right + offset;
+            testY = refRect.top + refRect.height / 2;
+            break;
+        case 'left':
+            testX = refRect.left - offset;
+            testY = refRect.top + refRect.height / 2;
+            break;
+        case 'bottom':
+            testX = refRect.left + refRect.width / 2;
+            testY = refRect.bottom + offset;
+            break;
+        case 'top':
+            testX = refRect.left + refRect.width / 2;
+            testY = refRect.top - offset;
+            break;
+        default:
+            console.error(`Ungültige Position: ${position}`);
+            return true; // Im Zweifel: Keine Platzierung erlauben
+    }
+    if (testX < 0 || testX > window.innerWidth || testY < 0 || testY > window.innerHeight) {
+        return true; 
+    }
+    const elementsAtPoint = document.elementsFromPoint(testX, testY);
+    for (const element of elementsAtPoint) {
+        if (element === referenceElement || referenceElement.contains(element)) continue;
+        if (element.matches(importantSelector)) return true;
+    }
+    return false;
+}