smart.tooltip.js

/* Smart UI v15.2.0 (2023-04-20) 
Copyright (c) 2011-2023 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-tooltip",class extends Smart.ContentElement{static get properties(){return{arrow:{value:!1,type:"boolean"},arrowDirection:{allowedValues:["bottom","top","left","right"],value:"bottom",type:"string"},align:{allowedValues:["left","center","right"],value:"center",type:"string"},delay:{value:0,type:"number"},messages:{extend:!0,value:{en:{invalidSelector:'{{elementType}}: "{{property}}" must be a String, an HTMLElement or null.',htmlTemplateNotSuported:"{{elementType}}: Browser doesn't support HTMLTemplate elements.",invalidTemplate:'{{elementType}}: "{{property}}" property accepts a string that must match the id of an HTMLTemplate element from the DOM.',invalidNode:'{{elementType}}: Invalid parameter "{{node}}" when calling {{method}}.'}},type:"object"},iframeRect:{value:null,type:"object?"},offset:{value:[],type:"array"},openMode:{allowedValues:["click","focus","hover","manual"],value:"hover",type:"string"},position:{allowedValues:["bottom","top","left","right","absolute","auto"],value:"top",type:"string"},selector:{value:null,type:"any?"},tooltipTemplate:{value:null,type:"any"},value:{value:"",type:"string",reflectToAttribute:!1},visible:{value:!1,type:"boolean"}}}static get styleUrls(){return["smart.tooltip.css"]}template(){return'<div id="container" role="presentation">\n                    <div id="content" class="smart-tooltip-content" inner-h-t-m-l="[[innerHTML]]" role="presentation">\n                        <content></content>\n                    </div>\n                </div>'}propertyChangedHandler(e,t,n){super.propertyChangedHandler(e,t,n);const o=this;let l;switch(e){case"align":o._applyPosition(n);break;case"openMode":o.close(),o._handleEventListeners(t),o._handleResize();break;case"selector":o._oldOwnerElement=o._ownerElement,o._handleSelector(n,t),o._handleEventListeners();break;case"tooltipTemplate":o._handleTemplate(t);break;case"value":o.tooltipTemplate?o._handleTemplate():o.$.content.innerHTML=o.value;break;case"visible":l=n?"open":"close",o.$.fireEvent(l,{owner:o._ownerElement},o.isInShadowDOM?{composed:!0,bubbles:!0,cancelable:!0}:void 0);break;case"position":return void o._applyPosition(t)}o._applyPosition()}ready(){super.ready()}render(){const e=this;super.render(),e.getAttribute("role")||e.setAttribute("role","tooltip"),e._isParentPositionStatic="static"===window.getComputedStyle(e.parentElement||document.querySelector("body")).position,e._handleSelector(e.selector),e.visible&&e._applyPosition(),e._handleEventListeners(),e._handleResize(),e.value=e.$.content.innerHTML=e.value?e.value:e.innerHTML,e._handleTemplate()}appendChild(e){const t=this;if(!t.isCompleted){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.appendChild.apply(t,e.concat(Array.prototype.slice.call(arguments)))}e?(t.$.content.appendChild(e),t._applyPosition()):t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"appendChild",node:"node"}))}close(){const e=this;if(e._isOpening&&clearTimeout(e._isOpening),!e.visible)return;const t=e.isInShadowDOM?{composed:!0,bubbles:!0,cancelable:!0}:void 0;e.$.fireEvent("closing",{owner:e._ownerElement},t).defaultPrevented||(e.$.fireEvent("close",{owner:e._ownerElement},t),e.visible=!1)}clear(){const e=this.$.content;if(e)for(;e.childNodes.length;)e.removeChild(e.firstChild)}insertBefore(e,t){const n=this;if(!n.isCompleted){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.insertBefore.apply(n,e.concat(Array.prototype.slice.call(arguments)))}e&&t?(n.$.content.insertBefore(e,t),n._applyPosition()):n.error(n.localize("invalidNode",{elementType:n.nodeName.toLowerCase(),method:"insertBefore",node:"newNode/referenceNode"}))}open(){const e=this;e.disabled||e.readonly||e.visible||(clearTimeout(e._isOpening),e._isOpening=setTimeout((function(){const t=e.isInShadowDOM?{composed:!0,bubbles:!0,cancelable:!0}:void 0;if(e.$.fireEvent("opening",{owner:e._ownerElement},t).defaultPrevented)return void clearTimeout(e._isOpening);e._applyPosition(),e.$.fireEvent("open",{owner:e._ownerElement},t);const n=e.context;e.context=e,e.visible=!0,e.context=n}),e.delay))}removeChild(e){const t=this;if(!t.isCompleted){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.insertBefore.apply(t,e.concat(Array.prototype.slice.call(arguments)))}e?(t.$.content.removeChild(e),t._applyPosition()):t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"removeChild",node:"node"}))}reposition(){const e=this;e.isRendered&&e._applyPosition()}toggle(){const e=this;e.visible?e.close():e.open()}_getDomElementPosition(e){let t=[],n=e.parentElement;for(;n&&"BODY"!==n.nodeName;)t.push(n),n=!this.enableShadowDOM||n.parentElement?n.parentElement:n.getRootNode().host;return t}_getElementAndOwnerRelation(e){const t=this._getDomElementPosition(e||this),n=t.length;let o=null;for(let e=0;e<n;e++)if("static"!==window.getComputedStyle(t[e]).getPropertyValue("position")){o=t[e];break}return o}_applyPosition(e){const t=this;if(!t._ownerElement)return;if(!t.parentElement)return;t._isParentPositionStatic="static"===window.getComputedStyle(t.parentElement).position;const n=t._ownerElement.getBoundingClientRect(),o=t.parentElement?t.parentElement.getBoundingClientRect():{top:0,left:0};let l,i;t.parentElement&&"BODY"===t.parentElement.nodeName.toUpperCase()?(l=n.top+window.scrollY,i=n.left+window.scrollX):(l=n.top-o.top,i=n.left-o.left);const r=t.position,s=t.iframeRect;let a,p={top:n.top,left:n.left,right:n.right,width:n.width,height:n.height,nonStaticParent:t._getElementAndOwnerRelation()};switch(s&&(p.top+=s.top,p.left+=s.left,p.right+=s.right),r){case"auto":case"bottom":case"top":case"left":case"right":{t.style.left="";const e=t["_position"+r.charAt(0).toUpperCase()+r.slice(1)](i,l,p);l=e.top,i=e.left,a=e.translate;break}case"absolute":e?(t.style.top=t.style.left="",l=i=0):(l=parseFloat(t.style.top),i=parseFloat(t.style.left))}const d=t.getAttribute("arrow-direction");a?t.$.container.style.setProperty("--smart-tooltip-arrow-translate",a+"px"):t.$.container.style.removeProperty("--smart-tooltip-arrow-translate"),void 0===l||isNaN(l)||(l+=("auto"===r&&"top"===d?-1:1)*parseInt(t.offset[1])||0,t.style.top=l+"px"),void 0===i||isNaN(i)||(i+=("auto"===r&&"left"===d?-1:1)*parseInt(t.offset[0])||0,t.style.left=i+"px")}_positionAuto(e,t,n){const o=this;let l,i,r=o.parentElement;for(;r;){if("hidden"===getComputedStyle(r).getPropertyValue("overflow")){l=r;break}r=r.parentElement}if(l)i=l.getBoundingClientRect();else{const e=document.scrollingElement;let t,n;document.scrollingElement?(t=e.offsetWidth,n=e.offsetHeight):(t=window.innerWidth,n=window.innerHeight),l=document.body,i={width:t,height:n,left:0,top:0,right:t,bottom:n}}const s=parseFloat(window.getComputedStyle(o).getPropertyValue("--smart-tooltip-arrow-width"))||0;let a=o._positionTop(e,t,n),p=n.nonStaticParent,d=o.offsetWidth/2-s,c=0,f=0,m=a.left,h=i.right-(m+f+o.offsetWidth),u=Math.min(0,h);if(m<=0&&h>0&&(m=Math.min(e,m+h)),u<=0&&(u=Math.sign(u)*(Math.abs(u)+i.right-(e+n.width))),p){const e=p.getBoundingClientRect();c=e.top,f=e.left}return a.top+c>=i.top?(m<=0&&(m=e),t=a.top,{left:e=Math.max(i.left-f,m+u),top:t,translate:Math.max(-d,Math.min(d,a.left-e))}):(a=o._positionBottom(e,t,n),a.top+o.offsetHeight+c<=i.bottom?(m=a.left,m<=0&&(m=e),t=a.top,{left:e=Math.max(i.left-f,m+u),top:t,translate:Math.max(-d,Math.min(d,a.left-e))}):(a=o._positionLeft(e,t,n),t=a.top,d=o.offsetHeight/2-s,t=Math.max(i.top-c,a.top+Math.min(0,i.bottom-(a.top+c+o.offsetHeight))),a.left+f>=i.left?e=a.left:(a=o._positionRight(e,t,n),e=a.left+o.offsetWidth+f<=i.right?a.left:i.right-o.offsetWidth),{left:e,top:t,translate:Math.max(-d,Math.min(d,a.top-t))}))}_getRelativeParentOffset(e){const t=this,n=t._ownerElement;let o=t._getElementAndOwnerRelation(n),l=0,i=0;if(!e)return{left:i,top:l};for(;e&&o&&e!==o;)l+=o.offsetTop,i+=o.offsetLeft,o=t._getElementAndOwnerRelation(o);return{left:i,top:l}}_positionTop(e,t,n){const o=this,l=o._getRelativeParentOffset(n.nonStaticParent);if(o.set("arrowDirection","bottom"),null===n.nonStaticParent)return t=n.top+window.scrollY-o.offsetHeight,{left:(e=o._getAlignmentOffset(n.left,o.offsetWidth,n.width)+window.scrollX)+l.left,top:t+l.top};if(o._isParentPositionStatic){if(t=o._ownerElement.offsetTop-o.offsetHeight,e=o._getAlignmentOffset(o._ownerElement.offsetLeft,o.offsetWidth,n.width),o._ownerElement instanceof SVGElement){const n=o._ownerElement.getBoundingClientRect(),l=o._ownerElement.parentNode.getBoundingClientRect();t=n.top-l.top-o.offsetHeight/2,e=o._getAlignmentOffset(n.left,o.offsetWidth,l.left)}return{left:e+l.left,top:t+l.top}}if(o._ownerElement instanceof SVGElement&&o._ownerElement.parentElement){const n=o._ownerElement.getBoundingClientRect(),i=o._ownerElement.parentNode.getBoundingClientRect();return t=n.top-i.top-o.offsetHeight,{left:(e=o._getAlignmentOffset(n.left-i.left,o.offsetWidth,n.width))+l.left,top:t+l.top}}return t-=o.offsetHeight,{left:(e=o._getAlignmentOffset(e,o.offsetWidth,n.width))+l.left,top:t+l.top}}_positionBottom(e,t,n){const o=this,l=o._getRelativeParentOffset(n.nonStaticParent);return o.set("arrowDirection","top"),null===n.nonStaticParent?(t=n.top+window.scrollY+n.height,{left:(e=o._getAlignmentOffset(n.left,o.offsetWidth,n.width)+window.scrollX)+l.left,top:t+l.top}):o._isParentPositionStatic?(t=o._ownerElement.offsetTop+n.height,{left:(e=o._getAlignmentOffset(o._ownerElement.offsetLeft,o.offsetWidth,n.width))+l.left,top:t+l.top}):(t+=n.height,{left:(e=o._getAlignmentOffset(e,o.offsetWidth,n.width))+l.left,top:t+l.top})}_getAlignmentOffset(e,t,n){switch(this.align){case"left":return e;case"right":return e-t+n;default:return e-t/2+n/2}}_positionLeft(e,t,n){const o=this,l=o._getRelativeParentOffset(n.nonStaticParent);return o.set("arrowDirection","right"),null===n.nonStaticParent?(t=n.top+window.scrollY+n.height/2-o.$.content.offsetHeight/2,{left:(e=n.left+window.scrollX-o.offsetWidth)+l.left,top:t+l.top}):o._isParentPositionStatic?(t=o._ownerElement.offsetTop+n.height/2-o.$.content.offsetHeight/2,{left:(e=o._ownerElement.offsetLeft-o.offsetWidth)+l.left,top:t+l.top}):(t=t+n.height/2-o.$.content.offsetHeight/2,{left:(e-=o.offsetWidth)+l.left,top:t+l.top})}_positionRight(e,t,n){const o=this,l=o._getRelativeParentOffset(n.nonStaticParent);return o.set("arrowDirection","left"),null===n.nonStaticParent?(t=n.top+window.scrollY+n.height/2-o.$.content.offsetHeight/2,{left:(e=n.left+window.scrollX+n.width)+l.left,top:t+l.top}):o._isParentPositionStatic?(t=o._ownerElement.offsetTop+n.height/2-o.$.content.offsetHeight/2,{left:(e=o._ownerElement.offsetLeft+n.width)+l.left,top:t+l.top}):(t=t+n.height/2-o.$.content.offsetHeight/2,{left:(e+=n.width)+l.left,top:t+l.top})}_eventsHandler(e){const t=this;t.disabled||t.readonly||("click"!==e.type?"mouseenter"===e.type||"focus"===e.type?this.open():this.close():t.visible?this.close():this.open())}_handleEventListeners(e){const t=this;if(t._oldOwnerElement&&"manual"!==t.openMode){let e=t._oldOwnerElement.getAttribute("aria-describedby");e&&"tooltip"===t.getAttribute("role")&&(e===t.id?t._oldOwnerElement.removeAttribute("aria-describedby"):(e=e.replace(" "+t.id,""),e=e.replace(t.id+" ",""),t._oldOwnerElement.setAttribute("aria-describedby",e))),t._oldOwnerElement.$.unlisten("mouseenter.tooltip"),t._oldOwnerElement.$.unlisten("mouseleave.tooltip"),t._oldOwnerElement.$.unlisten("focus.tooltip"),t._oldOwnerElement.$.unlisten("blur.tooltip"),t._oldOwnerElement.$.unlisten("click.tooltip"),t._oldOwnerElement=null}if(t._ownerElement){if(e)switch(e){case"hover":t._ownerElement.$.unlisten("mouseenter.tooltip"),t._ownerElement.$.unlisten("mouseleave.tooltip");break;case"focus":t._ownerElement.$.unlisten("focus.tooltip"),t._ownerElement.$.unlisten("blur.tooltip");break;case"click":t._ownerElement.$.unlisten("click.tooltip")}if("manual"!==t.openMode)switch(t._ownerElement instanceof Smart.BaseElement||(t._ownerElement.$=Smart.Utilities.Extend(t._ownerElement)),t.openMode){case"hover":t._ownerElement.$.listen("mouseenter.tooltip",t._eventsHandler.bind(t)),t._ownerElement.$.listen("mouseleave.tooltip",t._eventsHandler.bind(t));break;case"focus":t._ownerElement.$.listen("focus.tooltip",t._eventsHandler.bind(t)),t._ownerElement.$.listen("blur.tooltip",t._eventsHandler.bind(t));break;case"click":t._ownerElement.$.listen("click.tooltip",t._eventsHandler.bind(t))}}}_handleResize(){const e=this;function t(){e._applyPosition()}"click"===e.openMode?window.addEventListener("resize",t):window.removeEventListener("resize",t)}_handleSelector(e,t){const n=this;if(t&&t.removeAttribute&&t.removeAttribute("aria-describedby"),"string"==typeof e)n._ownerElement=e.length>0?document.getElementById(e):void 0;else if(e&&e.nodeType===Node.ELEMENT_NODE)n._ownerElement=e;else{if(null===e)return void(n._ownerElement=void 0);n.error(n.localize("invalidSelector",{elementType:n.nodeName.toLowerCase(),property:"selector"}))}if(!n._ownerElement||"tooltip"!==n.getAttribute("role"))return;if(!n.value)return;const o=n._ownerElement?n._ownerElement.getAttribute("aria-describedby"):null;o?o.indexOf(n.id)<0&&n._ownerElement.setAttribute("aria-describedby",o+" "+n.id):n._ownerElement.setAttribute("aria-describedby",n.id)}_handleTemplate(e){const t=this;let n=t.tooltipTemplate;if(e&&(t.$.content.innerHTML=t.value?t.value:""),null===n||!n)return;if("function"==typeof t.tooltipTemplate)return void t.tooltipTemplate(t.$.content,{value:t.value});if(!("content"in document.createElement("template")))return void t.error(t.localize("htmlTemplateNotSuported",{elementType:t.nodeName.toLowerCase()}));if(n=document.getElementById(n),null===n||!("content"in n))return void t.error(t.localize("invalidTemplate",{elementType:t.nodeName.toLowerCase(),property:"template"}));const o=n.content,l=o.childNodes.length,i=/{{\w+}}/g;let r,s=[];for(let e=0;e<l;e++)for(r=i.exec(o.childNodes[e].innerHTML);r;)s.push({childNodeIndex:e,bindingString:r[0]}),r=i.exec(o.childNodes[e].innerHTML);const a=s.length;let p,d,c=document.importNode(n.content,!0);for(let e=0;e<a;e++){p=c.childNodes[s[e].childNodeIndex],d=s.length;for(let n=0;n<d;n++)p.innerHTML=p.innerHTML.replace(s[e].bindingString,t.value)}t.$.content.innerHTML="";for(let e=0;e<c.childNodes.length;e++)c.childNodes[e].outerHTML&&(t.$.content.innerHTML+=c.childNodes[e].outerHTML)}}),function(){const e=()=>{const e=document.querySelectorAll('[data-toggle="tooltip"');if(e.length>0)for(let t=0;t<e.length;t++){if(!e[t].hasAttribute("data-title"))continue;const n=document.createElement("smart-tooltip");n.selector=e[t],n.innerHTML=e[t].getAttribute("data-title"),document.body.appendChild(n),e[t].hasAttribute("data-placement")&&(n.position=e[t].getAttribute("data-placement"))}};"complete"===document.readyState?e():(window.removeEventListener("load",e),window.addEventListener("load",e))}();