@geoblink/design-system/dist/components/GeoTooltip.js

Geoblink Design System for Vue.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("lodash")):"function"==typeof define&&define.amd?define(["lodash"],e):"object"==typeof exports?exports["components/GeoTooltip"]=e(require("lodash")):t["components/GeoTooltip"]=e(t.lodash)}(window,function(t){return i={},e.m=o={103:function(t,e,o){t.exports=o("74Nm")},"3Fcl":function(t,e,o){"use strict";var i=o("YLtl"),n=o.n(i);e.a=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:10;return n.a.throttle(t,e,{leading:!0,trailing:!0})}},"3iwg":function(t,e,o){"use strict";function i(){var t=0;return function(){return t++}}o.d(e,"a",function(){return i})},"74Nm":function(t,e,o){"use strict";o.r(e),o.d(e,"areEdgesInsideViewport",function(){return f}),o.d(e,"getViewportEdges",function(){return m}),o.d(e,"getTooltipEdges",function(){return v}),o.d(e,"getAvailableSpaceForTooltipContent",function(){return T}),o.d(e,"getTooltipFittingAlignment",function(){return b});var i=o("lSNA"),n=o.n(i),r=o("YLtl"),a=o.n(r),l=o("i4Qp"),s=o("3Fcl"),d=o("3iwg"),u=o("oEPP"),c=0,g=Object(d.a)(),p=null;function h(t){var e,o=t.requestedAbsoluteOffset,i=(t.triggerTargetSize,t.tooltipContentSize),r=t.tooltipPosition,a=v(o,i,r,t.tooltipAlignment);return(e={},n()(e,u.b.leading,{x:a.trailing,y:a.top}),n()(e,u.b.trailing,{x:a.leading,y:a.top}),n()(e,u.b.top,{x:a.leading,y:a.bottom}),n()(e,u.b.bottom,{x:a.leading,y:a.top}),e)[r]}function f(t,e,o,i){var n=m(),r=v(t,e,o,i),a={leading:r.leading>=n.leading,trailing:r.trailing<=n.trailing,top:r.top>=n.top,bottom:r.bottom<=n.bottom};return a.leading&&a.trailing&&a.top&&a.bottom}function m(){return{leading:document.documentElement.scrollLeft,trailing:document.documentElement.clientWidth+document.documentElement.scrollLeft,top:document.documentElement.scrollTop,bottom:document.documentElement.clientHeight+document.documentElement.scrollTop}}function v(t,e,o,i){var r,a,l,s,d;return(d={},n()(d,u.b.leading,(r={},n()(r,u.a.start,{leading:t.x-e.width,trailing:t.x,top:t.y,bottom:t.y+e.height}),n()(r,u.a.end,{leading:t.x-e.width,trailing:t.x,top:t.y-e.height,bottom:t.y}),n()(r,u.a.middle,{leading:t.x-e.width,trailing:t.x,top:t.y-e.height/2,bottom:t.y+e.height/2}),r)),n()(d,u.b.trailing,(a={},n()(a,u.a.start,{leading:t.x,trailing:t.x+e.width,top:t.y,bottom:t.y+e.height}),n()(a,u.a.end,{leading:t.x,trailing:t.x+e.width,top:t.y-e.height,bottom:t.y}),n()(a,u.a.middle,{leading:t.x,trailing:t.x+e.width,top:t.y-e.height/2,bottom:t.y+e.height/2}),a)),n()(d,u.b.top,(l={},n()(l,u.a.start,{leading:t.x,trailing:t.x+e.width,top:t.y-e.height,bottom:t.y}),n()(l,u.a.end,{leading:t.x-e.width,trailing:t.x,top:t.y-e.height,bottom:t.y}),n()(l,u.a.middle,{leading:t.x-e.width/2,trailing:t.x+e.width/2,top:t.y-e.height,bottom:t.y}),l)),n()(d,u.b.bottom,(s={},n()(s,u.a.start,{leading:t.x,trailing:t.x+e.width,top:t.y,bottom:t.y+e.height}),n()(s,u.a.end,{leading:t.x-e.width,trailing:t.x,top:t.y,bottom:t.y+e.height}),n()(s,u.a.middle,{leading:t.x-e.width/2,trailing:t.x+e.width/2,top:t.y,bottom:t.y+e.height}),s)),d)[o][i]}function T(t,e,o){var i,r,a,l,s,d=m(),c=v(t,{width:0,height:0},e,o);return(s={},n()(s,u.b.leading,(i={},n()(i,u.a.start,{horizontal:c.trailing-d.leading,vertical:d.bottom-c.top}),n()(i,u.a.end,{horizontal:c.trailing-d.leading,vertical:c.bottom-d.top}),n()(i,u.a.middle,{horizontal:c.trailing-d.leading,vertical:d.bottom-d.top}),i)),n()(s,u.b.trailing,(r={},n()(r,u.a.start,{horizontal:d.trailing-c.leading,vertical:d.bottom-c.top}),n()(r,u.a.end,{horizontal:d.trailing-c.leading,vertical:c.bottom-d.top}),n()(r,u.a.middle,{horizontal:d.trailing-c.leading,vertical:d.bottom-d.top}),r)),n()(s,u.b.top,(a={},n()(a,u.a.start,{horizontal:d.trailing-c.leading,vertical:c.bottom-d.top}),n()(a,u.a.end,{horizontal:c.trailing-d.leading,vertical:c.bottom-d.top}),n()(a,u.a.middle,{horizontal:d.trailing-d.leading,vertical:c.bottom-d.top}),a)),n()(s,u.b.bottom,(l={},n()(l,u.a.start,{horizontal:d.trailing-c.leading,vertical:d.bottom-c.top}),n()(l,u.a.end,{horizontal:c.trailing-d.leading,vertical:d.bottom-c.top}),n()(l,u.a.middle,{horizontal:d.trailing-d.leading,vertical:d.bottom-c.top}),l)),s)[e][o]}function b(t,e,o,i){var n=m(),r=[i,u.a.start,u.a.end,u.a.middle];return a.a.find(r,function(i){return function(t,e){return a.a.inRange(t.leading,e.leading,e.trailing)&&a.a.inRange(t.trailing,e.leading,e.trailing)&&a.a.inRange(t.top,e.top,e.bottom)&&a.a.inRange(t.bottom,e.top,e.bottom)}(v(t,e,o,i),n)})||u.a.middle}var y={name:"GeoTooltip",status:"ready",release:"24.4.0",constants:{POSITIONS:u.b,ALIGNMENTS:u.a},props:{position:Object(l.a)({componentName:"GeoTooltip",propertyName:"position",enumDictionary:u.b,defaultValue:u.b.top}),alignment:Object(l.a)({componentName:"GeoTooltip",propertyName:"alignment",enumDictionary:u.a,defaultValue:u.a.middle}),delay:{type:Number,default:0,validator:function(t){return 0<=t}},visible:{type:Boolean,default:void 0,required:!1},forcedTriggerTarget:{type:null,required:!1},static:{type:Boolean,default:!1}},data:function(){return{triggerTarget:null,isTriggerTargetHovered:!1,isTooltipContentHovered:!1,fittingPosition:null,fittingAlignment:null,originalParentElement:null,staticTooltipMutationObserver:null,staticTooltipId:null,staticTooltipContainer:null}},computed:{isVisible:function(){return a.a.isBoolean(this.visible)?this.visible:this.isTriggerTargetHovered||this.isTooltipContentHovered},debouncedOnTriggerTargetMouseleave:function(){return a.a.debounce(this.onTriggerTargetMouseleave,this.delay).bind(this)},debouncedOnTooltipContentMouseleave:function(){return a.a.debounce(this.onTooltipContentMouseleave,this.delay)},throttledRepositionTooltip:function(){return Object(s.a)(this.repositionTooltip).bind(this)},onTriggerTargetMouseoverBound:function(){return this.onTriggerTargetMouseover.bind(this)},canNotFitWarnThrottled:function(){var t=this;return Object(s.a)(function(){return console.warn("GeoTooltip [component] :: Tooltip content can't fit in «".concat(t.position,"» position with «").concat(t.alignment,"» alignment."))},500)}},watch:{debouncedOnTriggerTargetMouseleave:function(t,e){this.triggerTarget.removeEventListener("mouseleave",e),this.triggerTarget.addEventListener("mouseleave",t)},forcedTriggerTarget:function(){this.removeMouseEventHandlers(),this.reattachTooltipContent(),this.addMouseEventHandlers()},static:function(t,e){!0===t?(this.cleanUpRegularTooltip(),this.setUpStaticTooltip()):(this.cleanUpStaticTooltip(),this.setUpRegularTooltip())}},mounted:function(){this.originalParentElement=this.$el.parentElement,this.static?this.setUpStaticTooltip():this.setUpRegularTooltip(),this.reattachTooltipContent(),this.addMouseEventHandlers(),this.repositionTooltip()},updated:function(){this.repositionTooltip(),this.checkSeveralTooltips()},beforeDestroy:function(){this.$el.remove(),this.static?this.cleanUpStaticTooltip():this.cleanUpRegularTooltip()},methods:{reattachTooltipContent:function(){this.triggerTarget=this.forcedTriggerTarget||this.originalParentElement,this.$el.remove(),this.static?this.staticTooltipContainer.appendChild(this.$el):p.appendChild(this.$el)},addMouseEventHandlers:function(){this.triggerTarget.addEventListener("mouseover",this.onTriggerTargetMouseoverBound),this.triggerTarget.addEventListener("mouseleave",this.debouncedOnTriggerTargetMouseleave)},removeMouseEventHandlers:function(){this.triggerTarget.removeEventListener("mouseover",this.onTriggerTargetMouseoverBound),this.triggerTarget.removeEventListener("mouseleave",this.debouncedOnTriggerTargetMouseleave),this.onTooltipContentMouseleave(),this.onTriggerTargetMouseleave()},onTriggerTargetMouseover:function(){this.isTriggerTargetHovered=!0,this.repositionTooltip(),window.addEventListener("scroll",this.throttledRepositionTooltip)},onTriggerTargetMouseleave:function(){this.isTriggerTargetHovered=!1,window.removeEventListener("scroll",this.throttledRepositionTooltip)},onTooltipContentMouseover:function(){this.isTooltipContentHovered=!0},onTooltipContentMouseleave:function(){this.isTooltipContentHovered=!1},repositionTooltip:function(){var t=this;this.isVisible&&this.$nextTick().then(function(){var e;t.$el&&t.$el.style&&(t.$el.style.removeProperty("--available-width"),t.$el.style.removeProperty("--available-height"));var o=function(t){var e=t.getBoundingClientRect(),o=document.body,i=document.documentElement,n=window.pageYOffset||i.scrollTop||o.scrollTop,r=window.pageXOffset||i.scrollLeft||o.scrollLeft,a=i.clientTop||o.clientTop||0,l=i.clientLeft||o.clientLeft||0,s=e.top+n-a,d=e.left+r-l;return{top:Math.round(s),left:Math.round(d)}}(t.triggerTarget),i=t.triggerTarget.getBoundingClientRect(),r={width:i.right-i.left,height:i.bottom-i.top},a={width:t.$el.offsetWidth||0,height:t.$el.offsetHeight||0},l=t.$el.nodeType===Node.COMMENT_NODE?null:getComputedStyle(t.$el),s=l?parseInt(l.getPropertyValue("--spacing-to-trigger-target")||0,10):0,d=(e={},n()(e,u.b.top,{x:o.left+r.width/2,y:o.top-s}),n()(e,u.b.bottom,{x:o.left+r.width/2,y:o.top+r.height+s}),n()(e,u.b.leading,{x:o.left-s,y:o.top+r.height/2}),n()(e,u.b.trailing,{x:o.left+r.width+s,y:o.top+r.height/2}),e)[t.position];return f(d,a,t.position,t.alignment)||t.canNotFitWarnThrottled(),t.translateTooltipContainer({requestedAbsoluteOffset:d,triggerTargetSize:r,tooltipContentSize:a,tooltipPosition:t.position,tooltipAlignment:t.alignment})})},translateTooltipContainer:function(t){var e,o,i=t.requestedAbsoluteOffset,r=t.triggerTargetSize,a=t.tooltipContentSize,l=t.tooltipPosition,s=t.tooltipAlignment,d=T(i,l,s);this.$el&&this.$el.style&&(this.$el.style.setProperty("--available-width","".concat(d.horizontal,"px")),this.$el.style.setProperty("--available-height","".concat(d.vertical,"px")));var c=b(h({requestedAbsoluteOffset:i,triggerTargetSize:r,tooltipContentSize:a,tooltipPosition:l,tooltipAlignment:s}),a,l,s),g=h({requestedAbsoluteOffset:i,triggerTargetSize:r,tooltipContentSize:a,tooltipPosition:l,tooltipAlignment:c}),f=(e={},n()(e,u.a.start,{x:-r.width/2,y:-r.height/2}),n()(e,u.a.end,{x:r.width/2,y:r.height/2}),n()(e,u.a.middle,{x:0,y:0}),e)[c],m=(o={},n()(o,u.b.leading,{x:g.x,y:g.y+f.y}),n()(o,u.b.trailing,{x:g.x,y:g.y+f.y}),n()(o,u.b.top,{x:g.x+f.x,y:g.y}),n()(o,u.b.bottom,{x:g.x+f.x,y:g.y}),o)[l],v="translate(".concat(m.x,"px, ").concat(m.y,"px)");this.static?this.staticTooltipContainer&&(this.staticTooltipContainer.style.transform=v):p&&(p.style.transform=v),this.fittingPosition=l,this.fittingAlignment=c},setUpStaticTooltip:function(){var t=this;if(this.staticTooltipId=g(),this.addStaticTooltipContainer(),"undefined"!=typeof MutationObserver){var e=new MutationObserver(function(){return t.throttledRepositionTooltip()});e.observe(document.body,{attributes:!0,subtree:!0}),this.staticTooltipMutationObserver=e}},cleanUpStaticTooltip:function(){this.staticTooltipMutationObserver&&(this.staticTooltipMutationObserver.disconnect(),this.staticTooltipMutationObserver=null),this.removeMouseEventHandlers(),this.removeStaticTooltipContainer(),this.staticTooltipId=null},setUpRegularTooltip:function(){c++,p||((p=document.createElement("div")).className="geo-tooltip",document.body.appendChild(p))},cleanUpRegularTooltip:function(){this.removeMouseEventHandlers(),0<--c||!p||(p.remove(),p=null)},addStaticTooltipContainer:function(){this.staticTooltipContainer=document.createElement("div"),this.staticTooltipContainer.className="geo-tooltip-static geo-tooltip-static--".concat(this.staticTooltipId),document.body.appendChild(this.staticTooltipContainer)},removeStaticTooltipContainer:function(){this.staticTooltipContainer.remove(),this.staticTooltipContainer=null},checkSeveralTooltips:function(){var t=this;if(1<c){var e=document.querySelectorAll(".geo-tooltip .geo-tooltip__content");1<e.length&&e.forEach(function(e){e&&e===t.$el?e.style.display=null:e.style.display="none"})}}}},x=o("KHd+"),C=Object(x.a)(y,function(){var t,e=this,o=e.$createElement,i=e._self._c||o;return e.isVisible?i("div",{class:(t={"geo-tooltip__content":!0},t["geo-tooltip__content--"+e.fittingPosition]=e.fittingPosition,t["geo-tooltip__content--"+e.fittingAlignment]=e.fittingAlignment,t),on:{mouseover:function(t){return e.onTooltipContentMouseover()},mouseleave:function(t){return e.debouncedOnTooltipContentMouseleave()}}},[e._t("default"),e._v(" "),i("div",{staticClass:"geo-tooltip__arrow"})],2):e._e()},[],!1,null,null,null);e.default=C.exports},"KHd+":function(t,e,o){"use strict";function i(t,e,o,i,n,r,a,l){var s,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=o,d._compiled=!0),i&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),a?(s=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},d._ssrRegister=s):n&&(s=l?function(){n.call(this,this.$root.$options.shadowRoot)}:n),s)if(d.functional){d._injectStyles=s;var u=d.render;d.render=function(t,e){return s.call(e),u(t,e)}}else{var c=d.beforeCreate;d.beforeCreate=c?[].concat(c,s):[s]}return{exports:t,options:d}}o.d(e,"a",function(){return i})},YLtl:function(e,o){e.exports=t},i4Qp:function(t,e,o){"use strict";function i(t){var e={type:String,validator:function(e){if(t.checkUndefined&&void 0===e)return!0;var o=Object.values(t.enumDictionary);if(o.includes(e))return!0;var i=o.map(function(t){return"«".concat(t,"»")}).join(", ");return console.warn("".concat(t.componentName," [component] :: Unsupported value («").concat(e,"») for «").concat(t.propertyName,"» property. Use one of ").concat(i)),!1}};return"defaultValue"in t&&(e.default=t.defaultValue),"required"in t&&(e.required=!!t.required),e}o.d(e,"a",function(){return i})},lSNA:function(t,e){t.exports=function(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t},t.exports.__esModule=!0,t.exports.default=t.exports},oEPP:function(t,e,o){"use strict";o.d(e,"b",function(){return i}),o.d(e,"a",function(){return n});var i={bottom:"bottom",leading:"leading",top:"top",trailing:"trailing"},n={start:"start",end:"end",middle:"middle"}}},e.c=i,e.d=function(t,o,i){e.o(t,o)||Object.defineProperty(t,o,{enumerable:!0,get:i})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,o){if(1&o&&(t=e(t)),8&o)return t;if(4&o&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&o&&"string"!=typeof t)for(var n in t)e.d(i,n,function(e){return t[e]}.bind(null,n));return i},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=103);function e(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return o[t].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var o,i});