uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
3 lines (2 loc) • 6.64 kB
JavaScript
/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("uikit-util")):"function"==typeof define&&define.amd?define("uikittooltip",["uikit-util"],i):(t=t||self).UIkitTooltip=i(t.UIkit.util)}(this,function(f){"use strict";var t={props:{container:Boolean},data:{container:!0},computed:{container:function(t){var i=t.container;return!0===i&&this.$container||i&&f.$(i)}}},i={props:{cls:Boolean,animation:"list",duration:Number,origin:String,transition:String,queued:Boolean},data:{cls:!1,animation:[!1],duration:200,origin:!1,transition:"linear",queued:!1,initProps:{overflow:"",height:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:""},hideProps:{overflow:"hidden",height:0,paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0}},computed:{hasAnimation:function(t){return!!t.animation[0]},hasTransition:function(t){var i=t.animation;return this.hasAnimation&&!0===i[0]}},methods:{toggleElement:function(l,u,d){var c=this;return new f.Promise(function(t){l=f.toNodes(l);function i(t){return f.Promise.all(t.map(function(t){return c._toggleElement(t,u,d)}))}var n,o=l.filter(function(t){return c.isToggled(t)}),e=l.filter(function(t){return!f.includes(o,t)});if(c.queued&&f.isUndefined(d)&&f.isUndefined(u)&&c.hasAnimation&&!(l.length<2)){var s=document.body,r=s.scrollTop,a=o[0],h=f.Animation.inProgress(a)&&f.hasClass(a,"uk-animation-leave")||f.Transition.inProgress(a)&&"0px"===a.style.height;n=i(o),h||(n=n.then(function(){var t=i(e);return s.scrollTop=r,t}))}else n=i(e.concat(o));n.then(t,f.noop)})},toggleNow:function(i,n){var o=this;return new f.Promise(function(t){return f.Promise.all(f.toNodes(i).map(function(t){return o._toggleElement(t,n,!1)})).then(t,f.noop)})},isToggled:function(t){var i=f.toNodes(t||this.$el);return this.cls?f.hasClass(i,this.cls.split(" ")[0]):!f.hasAttr(i,"hidden")},updateAria:function(t){!1===this.cls&&f.attr(t,"aria-hidden",!this.isToggled(t))},_toggleElement:function(t,i,n){var o=this;if(i=f.isBoolean(i)?i:f.Animation.inProgress(t)?f.hasClass(t,"uk-animation-leave"):f.Transition.inProgress(t)?"0px"===t.style.height:!this.isToggled(t),!f.trigger(t,"before"+(i?"show":"hide"),[this]))return f.Promise.reject();var e=(f.isFunction(n)?n:!1!==n&&this.hasAnimation?this.hasTransition?function(t){var r=t.isToggled,a=t.duration,h=t.initProps,l=t.hideProps,u=t.transition,d=t._toggle;return function(t,i){var n=f.Transition.inProgress(t),o=t.hasChildNodes?f.toFloat(f.css(t.firstElementChild,"marginTop"))+f.toFloat(f.css(t.lastElementChild,"marginBottom")):0,e=f.isVisible(t)?f.height(t)+(n?0:o):0;f.Transition.cancel(t),r(t)||d(t,!0),f.height(t,""),f.fastdom.flush();var s=f.height(t)+(n?0:o);return f.height(t,e),(i?f.Transition.start(t,f.assign({},h,{overflow:"hidden",height:s}),Math.round(a*(1-e/s)),u):f.Transition.start(t,l,Math.round(a*(e/s)),u).then(function(){return d(t,!1)})).then(function(){return f.css(t,h)})}}(this):function(t){var n=t.animation,o=t.duration,e=t.origin,s=t._toggle;return function(t,i){return f.Animation.cancel(t),i?(s(t,!0),f.Animation.in(t,n[0],o,e)):f.Animation.out(t,n[1]||n[0],o,e).then(function(){return s(t,!1)})}}(this):this._toggle)(t,i);f.trigger(t,i?"show":"hide",[this]);function s(){f.trigger(t,i?"shown":"hidden",[o]),o.$update(t)}return e?e.then(s):f.Promise.resolve(s())},_toggle:function(t,i){var n;t&&(i=Boolean(i),this.cls?(n=f.includes(this.cls," ")||i!==f.hasClass(t,this.cls))&&f.toggleClass(t,this.cls,f.includes(this.cls," ")?void 0:i):(n=i===f.hasAttr(t,"hidden"))&&f.attr(t,"hidden",i?null:""),f.$$("[autofocus]",t).some(function(t){return f.isVisible(t)?t.focus()||!0:t.blur()}),this.updateAria(t),n&&this.$update(t))}}};var n,o={props:{pos:String,offset:null,flip:Boolean,clsPos:String},data:{pos:"bottom-"+(f.isRtl?"right":"left"),flip:!0,offset:!1,clsPos:""},computed:{pos:function(t){var i=t.pos;return(i+(f.includes(i,"-")?"":"-center")).split("-")},dir:function(){return this.pos[0]},align:function(){return this.pos[1]}},methods:{positionAt:function(t,i,n){var o;f.removeClasses(t,this.clsPos+"-(top|bottom|left|right)(-[a-z]+)?"),f.css(t,{top:"",left:""});var e=this.offset,s=this.getAxis();f.isNumeric(e)||(e=(o=f.$(e))?f.offset(o)["x"===s?"left":"top"]-f.offset(i)["x"===s?"right":"bottom"]:0);var r=f.positionAt(t,i,"x"===s?f.flipPosition(this.dir)+" "+this.align:this.align+" "+f.flipPosition(this.dir),"x"===s?this.dir+" "+this.align:this.align+" "+this.dir,"x"===s?""+("left"===this.dir?-e:e):" "+("top"===this.dir?-e:e),null,this.flip,n).target,a=r.x,h=r.y;this.dir="x"===s?a:h,this.align="x"===s?h:a,f.toggleClass(t,this.clsPos+"-"+this.dir+"-"+this.align,!1===this.offset)},getAxis:function(){return"top"===this.dir||"bottom"===this.dir?"y":"x"}}},e=[],s={mixins:[t,i,o],args:"title",props:{delay:Number,title:String},data:{pos:"top",title:"",delay:0,animation:["uk-animation-scale-up"],duration:100,cls:"uk-active",clsPos:"uk-tooltip"},beforeConnect:function(){this._hasTitle=f.hasAttr(this.$el,"title"),f.attr(this.$el,{title:"","aria-expanded":!1})},disconnected:function(){this.hide(),f.attr(this.$el,{title:this._hasTitle?this.title:null,"aria-expanded":null})},methods:{show:function(){var i=this;!this.isActive()&&this.title&&(e.forEach(function(t){return t.hide()}),e.push(this),this._unbind=f.on(document,f.pointerUp,function(t){return!f.within(t.target,i.$el)&&i.hide()}),clearTimeout(this.showTimer),this.showTimer=setTimeout(function(){i._show(),i.hideTimer=setInterval(function(){f.isVisible(i.$el)||i.hide()},150)},this.delay))},hide:function(){this.isActive()&&!f.matches(this.$el,"input:focus")&&(e.splice(e.indexOf(this),1),clearTimeout(this.showTimer),clearInterval(this.hideTimer),f.attr(this.$el,"aria-expanded",!1),this.toggleElement(this.tooltip,!1),this.tooltip&&f.remove(this.tooltip),this.tooltip=!1,this._unbind())},_show:function(){this.tooltip=f.append(this.container,'<div class="'+this.clsPos+'" aria-expanded="true" aria-hidden> <div class="'+this.clsPos+'-inner">'+this.title+"</div> </div>"),this.positionAt(this.tooltip,this.$el),this.origin="y"===this.getAxis()?f.flipPosition(this.dir)+"-"+this.align:this.align+"-"+f.flipPosition(this.dir),this.toggleElement(this.tooltip,!0)},isActive:function(){return f.includes(e,this)}},events:(n={focus:"show",blur:"hide"},n[f.pointerEnter+" "+f.pointerLeave]=function(t){f.isTouch(t)||(t.type===f.pointerEnter?this.show():this.hide())},n[f.pointerDown]=function(t){f.isTouch(t)&&(this.isActive()?this.hide():this.show())},n)};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("tooltip",s),s});