jspanel4
Version:
A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
1 lines • 5.21 kB
JavaScript
import{jsPanel}from"../../jspanel.js";!function(t){try{return new e("test"),!1}catch(t){}var e=function(e,o){o=o||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,o.bubbles,o.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n};e.prototype=Event.prototype,t.MouseEvent=e}(window),jsPanel.tooltip||(jsPanel.tooltip={version:"1.4.0",date:"2021-03-13 11:20",defaults:{border:"1px",dragit:!1,resizeit:!1,headerControls:"none",delay:400,ttipEvent:"mouseenter",ttipName:"default",parentPanelFront:!1},create(t={},e){t.paneltype="tooltip",t.id?"function"==typeof t.id&&(t.id=t.id()):t.id=`jsPanel-${jsPanel.idCounter+=1}`;let o,n=t.target,r=t.mode||"default";if("string"==typeof n&&(n=document.querySelector(n)),!n){try{throw new jsPanel.jsPanelError("TOOLTIP SETUP FAILED!<br>Either option target is missing in the tooltip configuration or the target does nor exist in the document!")}catch(t){jsPanel.error(t)}return!1}jsPanel.pointerdown.forEach(function(t){n.addEventListener(t,t=>{t.stopPropagation()},!1)});let l=t;if(t.config&&delete(l=Object.assign({},t.config,t)).config,(l=Object.assign({},jsPanel.tooltip.defaults,l)).position=Object.assign({},t.position),l.position.of=t.position.of||n,n[l.ttipName]=(()=>{o=window.setTimeout(function(){if(document.getElementById(t.id))return!1;jsPanel.create(l,function(t){const o=t,i=()=>{o.close(),n.removeEventListener("mouseleave",i),t.removeEventListener("mouseleave",i)};if("default"===r?n.addEventListener("mouseleave",i,!1):"semisticky"===r&&t.addEventListener("mouseleave",i,!1),t.classList.add("jsPanel-tooltip"),t.style.overflow="visible",t.header.style.cursor="default",t.footer.style.cursor="default",n.closest(".jsPanel-modal")?t.style.zIndex=n.closest(".jsPanel-modal").style.zIndex:(n.closest(".jsPanel")&&l.parentPanelFront&&n.closest(".jsPanel").front(),t.style.zIndex=jsPanel.zi.next()),jsPanel.pointerdown.forEach(function(e){t.addEventListener(e,t=>{t.stopPropagation()},!1)}),l.connector){let e=jsPanel.tooltip.relativeTipPos(t.options.position);"over"!==e&&t.append(jsPanel.tooltip.addConnector(t,e))}e&&e.call(t,t)})},l.delay)}),n.addEventListener(l.ttipEvent,n[l.ttipName],!1),l.autoshow){let t=new MouseEvent("mouseenter");n.dispatchEvent(t)}n.addEventListener("mouseleave",()=>{window.clearTimeout(o)},!1)},relativeTipPos(t){let e;return e="center-bottom"===t.my&&"center-top"===t.at?"top":"left-center"===t.my&&"right-center"===t.at?"right":"center-top"===t.my&&"center-bottom"===t.at?"bottom":"right-center"===t.my&&"left-center"===t.at?"left":"right-bottom"===t.my&&"left-top"===t.at?"left-top-corner":"left-bottom"===t.my&&"right-right"===t.at?"right-top-corner":"left-top"===t.my&&"right-bottom"===t.at?"right-bottom-corner":"right-top"===t.my&&"left-bottom"===t.at?"left-bottom-corner":"left-bottom"===t.my&&"left-top"===t.at?"topleft":"right-bottom"===t.my&&"right-top"===t.at?"topright":"left-top"===t.my&&"right-top"===t.at?"righttop":"left-bottom"===t.my&&"right-bottom"===t.at?"rightbottom":"right-top"===t.my&&"right-bottom"===t.at?"bottomright":"left-top"===t.my&&"left-bottom"===t.at?"bottomleft":"right-bottom"===t.my&&"left-bottom"===t.at?"leftbottom":"right-top"===t.my&&"left-top"===t.at?"lefttop":"over"},addConnector(t,e){let o,n,r,l,i=document.createElement("div");if(i.className=`jsPanel-connector jsPanel-connector-${e}`,"top"===e||"topleft"===e||"topright"===e?t.style.top=`calc(${t.style.top} - 12px)`:"right"===e||"righttop"===e||"rightbottom"===e?t.style.left=`calc(${t.style.left} + 12px)`:"bottom"===e||"bottomleft"===e||"bottomright"===e?t.style.top=`calc(${t.style.top} + 12px)`:"left"!==e&&"lefttop"!==e&&"leftbottom"!==e||(t.style.left=`calc(${t.style.left} - 12px)`),l="string"==typeof t.options.connector?t.options.connector:window.getComputedStyle(t).borderBottomColor,e.match(/-/))r={left:o,top:n,backgroundColor:l};else{let i=window.getComputedStyle(t);if("topleft"===e||"topright"===e){if("topleft"===e)o=i.borderBottomLeftRadius;else{o=`calc(100% - ${24+parseInt(i.borderBottomLeftRadius)+"px"})`}e="top"}else if("bottomleft"===e||"bottomright"===e){if("bottomleft"===e)o=i.borderTopLeftRadius;else{o=`calc(100% - ${24+parseInt(i.borderTopRightRadius)+"px"})`}e="bottom"}else if("lefttop"===e||"leftbottom"===e){if("lefttop"===e)n=i.borderTopRightRadius;else{n=`calc(100% - ${24+parseInt(i.borderBottomRightRadius)+"px"})`}e="left"}else if("righttop"===e||"rightbottom"===e){if("righttop"===e)n=i.borderTopLeftRadius;else{n=`calc(100% - ${24+parseInt(i.borderBottomLeftRadius)+"px"})`}e="right"}r={left:o,top:n,[`border-${e}-color`]:l}}return jsPanel.setStyle(i,r),i},reposition(t,e,o){setTimeout(function(){if(e.of=t.options.position.of,t.reposition(e),t.options.connector){let o=t.querySelector("div.jsPanel-connector");t.removeChild(o);let n=jsPanel.tooltip.relativeTipPos(e);"over"!==n&&t.append(jsPanel.tooltip.addConnector(t,n))}return o&&o.call(t,t),t},200)},remove(t,e="mouseenter",o="default"){let n=t[o];t.removeEventListener(e,n)}},jsPanel.pointerdown.forEach(function(t){document.addEventListener(t,function(t){document.querySelectorAll(".jsPanel-tooltip").forEach(function(e){t.target.closest(".jsPanel-tooltip")||e.options.autoshow||e.close()})},!1)}));