@striven-erp/striven-tooltip
Version:
Striven Tooltips UI
1 lines • 11.8 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.striventooltip=e():t.striventooltip=e()}(window,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=5)}([function(t,e,n){var o=n(2),i=n(3);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[t.i,i,""]]);var r={insert:"head",singleton:!1},s=(o(t.i,i,r),i.locals?i.locals:{});t.exports=s},function(t,e,n){var o,i,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[e,n(0)],void 0===(r="function"==typeof(o=function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function o(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?n(Object(o),!0).forEach((function(e){i(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a={viewBox:"0 0 1792 1792",d:"M1152 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"},c=function(){function t(e,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};r(this,t);var s={direction:"South"};this.el=n,this.tip=e,this.config=o({},s,{},i),this.config.icon&&this.initIcon(),this.initTooltip();var a=this;this.el.StrivenTooltip=function(){return a}}var e,n,i;return e=t,(n=[{key:"initTooltip",value:function(){var t=this,e=document.createElement("div");e.classList.add("s-tooltip");var n=document.createElement("div");n.classList.add("s-tooltip-stem"),this.stem=n;var o=document.createElement("p");o.classList.add("s-tooltip-content"),o.textContent=this.tip,this.content=o,e.append(n),e.append(o),this.tooltip=e,this.el.style.position="relative",this.el.onmouseenter=function(){t.el.append(e),setTimeout((function(){t.inView(t.tooltip)?t.setDirection(t.config.direction):t.correctPosition(),t.showTooltip(),t.config.onShow&&t.config.onShow()}),0)},this.el.onmouseleave=function(){t.hideTooltip(),t.tooltip.setAttribute("style",null),t.stem.setAttribute("style",null),e.remove(),setTimeout((function(){return t.config.onHide&&t.config.onHide()}),0)},this.config.onInit&&this.config.onInit(this.el)}},{key:"initIcon",value:function(){var t=this.constructSVG(a);t.setAttribute("style","cursor: pointer"),t.onmouseenter=function(){return t.getElementsByTagName("path")[0].setAttribute("fill","#2a6496")},t.onmouseleave=function(){return t.getElementsByTagName("path")[0].setAttribute("fill","#428bca")},this.el.style.height="16px",this.el.style.width="16px",this.el.append(t)}},{key:"constructSVG",value:function(t){var e=t.viewBox,n=t.d,o=document.createElement("span"),i='<svg width="'.concat("16",'" height="').concat("16",'" viewBox="').concat(e,'" xmlns="').concat("http://www.w3.org/2000/svg",'">'),r='<path fill="'.concat("#428bca",'" d="').concat(n,'"/>');return o.innerHTML="".concat(i).concat(r,"</svg>"),o}},{key:"inView",value:function(t){var e=t.getBoundingClientRect(),n=e.left,o=e.right;return!(n-t.offsetWidth/2<0||o>window.innerWidth)}},{key:"setTip",value:function(t){this.tip=t,this.content.textContent=t}},{key:"showTooltip",value:function(){this.tooltip.classList.add("s-tooltip-show")}},{key:"hideTooltip",value:function(){this.tooltip.classList.remove("s-tooltip-show")}},{key:"correctPosition",value:function(){var t=this.tooltip.getBoundingClientRect(),e=t.left,n=t.right;return e-this.tooltip.offsetWidth/2<0?(this.setDirection("East"),!0):n>window.innerWidth?(this.setDirection("West"),!0):void 0}},{key:"setDirection",value:function(t){switch(t){case"East":this.tooltip.style.left="".concat(this.el.offsetWidth+5,"px"),this.tooltip.style.top="50%",this.tooltip.style.marginTop="-".concat(this.tooltip.offsetHeight/2,"px"),this.stem.style.left="-5px",this.stem.style.transform="translateY(".concat(this.tooltip.offsetHeight/2-15,"px) rotate(45deg)"),this.stem.style.borderBottom="1px solid #acacac",this.stem.style.borderLeft="1px solid #acacac";break;case"West":this.tooltip.style.right="".concat(this.el.offsetWidth+5,"px"),this.tooltip.style.top="50%",this.tooltip.style.marginTop="-".concat(this.tooltip.offsetHeight/2,"px"),this.stem.style.right="-5px",this.stem.style.transform="translateY(".concat(this.tooltip.offsetHeight/2-15,"px) rotate(45deg)"),this.stem.style.borderTop="1px solid #acacac",this.stem.style.borderRight="1px solid #acacac";break;case"North":this.tooltip.style.right="50%",this.tooltip.style.marginRight="-".concat(this.tooltip.offsetWidth/2,"px"),this.tooltip.style.top="-".concat(this.tooltip.offsetHeight,"px"),this.stem.style.transform="translateY(".concat(this.tooltip.offsetHeight-this.stem.offsetHeight-5,"px) rotate(45deg)"),this.stem.style.right="50%",this.stem.style.marginRight="-5px",this.stem.style.borderBottom="1px solid #acacac",this.stem.style.borderRight="1px solid #acacac";break;case"South":default:this.tooltip.style.top="".concat(this.el.offsetHeight+5,"px"),this.tooltip.style.left="50%",this.tooltip.style.bottom="0px",this.tooltip.style.marginLeft="-".concat(this.tooltip.offsetWidth/2,"px"),this.stem.style.transform="translateY(-145%) rotate(45deg)",this.stem.style.left="50%",this.stem.style.marginLeft="-5px",this.stem.style.borderTop="1px solid #acacac",this.stem.style.borderLeft="1px solid #acacac"}}}])&&s(e.prototype,n),i&&s(e,i),t}();t.default=c})?o.apply(e,i):o)||(t.exports=r)},function(t,e,n){"use strict";var o,i=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},r=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),s={};function a(t,e,n){for(var o=0;o<e.length;o++){var i={css:e[o][1],media:e[o][2],sourceMap:e[o][3]};s[t][o]?s[t][o](i):s[t].push(y(i,n))}}function c(t){var e=document.createElement("style"),o=t.attributes||{};if(void 0===o.nonce){var i=n.nc;i&&(o.nonce=i)}if(Object.keys(o).forEach((function(t){e.setAttribute(t,o[t])})),"function"==typeof t.insert)t.insert(e);else{var s=r(t.insert||"head");if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(e)}return e}var l,u=(l=[],function(t,e){return l[t]=e,l.filter(Boolean).join("\n")});function f(t,e,n,o){var i=n?"":o.css;if(t.styleSheet)t.styleSheet.cssText=u(e,i);else{var r=document.createTextNode(i),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function p(t,e,n){var o=n.css,i=n.media,r=n.sourceMap;if(i?t.setAttribute("media",i):t.removeAttribute("media"),r&&btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleSheet)t.styleSheet.cssText=o;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(o))}}var h=null,d=0;function y(t,e){var n,o,i;if(e.singleton){var r=d++;n=h||(h=c(e)),o=f.bind(null,n,r,!1),i=f.bind(null,n,r,!0)}else n=c(e),o=p.bind(null,n,e),i=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(n)};return o(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;o(t=e)}else i()}}t.exports=function(t,e,n){return(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=i()),t=n.base?t+n.base:t,e=e||[],s[t]||(s[t]=[]),a(t,e,n),function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){s[t]||(s[t]=[]),a(t,e,n);for(var o=e.length;o<s[t].length;o++)s[t][o]();s[t].length=e.length,0===s[t].length&&delete s[t]}}}},function(t,e,n){(e=n(4)(!1)).push([t.i,".s-tooltip {\n font-family: 'Segoe UI';\n background-color: #fff;\n color: #000;\n line-height: 1.4;\n font-size: 14px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n position: absolute;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n opacity: 0;\n transition: opacity 500ms;\n height: fit-content;\n width: fit-content;\n padding: 10px;\n z-index: 1;\n text-align: center;\n}\n\n.s-tooltip-show {\n opacity: 1;\n}\n\n.s-tooltip-stem {\n position: absolute;\n background-color: #fff;\n height: 11px;\n width: 10px;\n}\n\n.s-tooltip-content {\n min-width: 250px;\n user-select: none;\n text-decoration: center;\n font-weight: normal;\n}\n",""]),t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var i=(s=o,a=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(c," */")),r=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(t," */")}));return[n].concat(r).concat([i]).join("\n")}var s,a,c;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o=0;o<t.length;o++){var i=[].concat(t[o]);n&&(i[2]?i[2]="".concat(n," and ").concat(i[2]):i[2]=n),e.push(i)}},e}},function(t,e,n){var o,i,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[e,n(1)],void 0===(r="function"==typeof(o=function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,e=(o=e)&&o.__esModule?o:{default:o},t.default=function t(o){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"striventooltip";n(this,t),o.bindingHandlers[i]={init:function(t,n,i,r,s){var a=n(),c=o.utils.unwrapObservable(a),l=c.tip,u=o.utils.unwrapObservable(l);u||(u="");var f=new e.default(u,t,c);l.subscribe((function(t){return f.setTip(t)})),a.tooltip=f}}}})?o.apply(e,i):o)||(t.exports=r)}])}));