From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- js/components/tooltip.js | 234 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100755 js/components/tooltip.js (limited to 'js/components/tooltip.js') diff --git a/js/components/tooltip.js b/js/components/tooltip.js new file mode 100755 index 0000000..a38d49d --- /dev/null +++ b/js/components/tooltip.js @@ -0,0 +1,234 @@ +/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +(function(addon) { + var component; + + if (window.UIkit) { + component = addon(UIkit); + } + + if (typeof define == "function" && define.amd) { + define("uikit-tooltip", ["uikit"], function(){ + return component || addon(UIkit); + }); + } + +})(function(UI){ + + "use strict"; + + var $tooltip, // tooltip container + tooltipdelay, checkdelay; + + UI.component('tooltip', { + + defaults: { + "offset": 5, + "pos": "top", + "animation": false, + "delay": 0, // in miliseconds + "cls": "", + "activeClass": "uk-active", + "src": function(ele) { + var title = ele.attr('title'); + + if (title !== undefined) { + ele.data('cached-title', title).removeAttr('title'); + } + + return ele.data("cached-title"); + } + }, + + tip: "", + + boot: function() { + + // init code + UI.$html.on("mouseenter.tooltip.uikit focus.tooltip.uikit", "[data-uk-tooltip]", function(e) { + var ele = UI.$(this); + + if (!ele.data("tooltip")) { + UI.tooltip(ele, UI.Utils.options(ele.attr("data-uk-tooltip"))); + ele.trigger("mouseenter"); + } + }); + }, + + init: function() { + + var $this = this; + + if (!$tooltip) { + $tooltip = UI.$('
').appendTo("body"); + } + + this.on({ + focus : function(e) { $this.show(); }, + blur : function(e) { $this.hide(); }, + mouseenter : function(e) { $this.show(); }, + mouseleave : function(e) { $this.hide(); } + }); + }, + + show: function() { + + this.tip = typeof(this.options.src) === "function" ? this.options.src(this.element) : this.options.src; + + if (tooltipdelay) clearTimeout(tooltipdelay); + if (checkdelay) clearTimeout(checkdelay); + + if (typeof(this.tip) === 'string' ? !this.tip.length:true) return; + + $tooltip.stop().css({"top": -2000, "visibility": "hidden"}).removeClass(this.options.activeClass).show(); + $tooltip.html('
' + this.tip + '
'); + + var $this = this, + pos = UI.$.extend({}, this.element.offset(), {width: this.element[0].offsetWidth, height: this.element[0].offsetHeight}), + width = $tooltip[0].offsetWidth, + height = $tooltip[0].offsetHeight, + offset = typeof(this.options.offset) === "function" ? this.options.offset.call(this.element) : this.options.offset, + position = typeof(this.options.pos) === "function" ? this.options.pos.call(this.element) : this.options.pos, + tmppos = position.split("-"), + tcss = { + "display" : "none", + "visibility" : "visible", + "top" : (pos.top + pos.height + height), + "left" : pos.left + }; + + + // prevent strange position + // when tooltip is in offcanvas etc. + if (UI.$html.css('position')=='fixed' || UI.$body.css('position')=='fixed'){ + var bodyoffset = UI.$('body').offset(), + htmloffset = UI.$('html').offset(), + docoffset = {'top': (htmloffset.top + bodyoffset.top), 'left': (htmloffset.left + bodyoffset.left)}; + + pos.left -= docoffset.left; + pos.top -= docoffset.top; + } + + + if ((tmppos[0] == "left" || tmppos[0] == "right") && UI.langdirection == 'right') { + tmppos[0] = tmppos[0] == "left" ? "right" : "left"; + } + + var variants = { + "bottom" : {top: pos.top + pos.height + offset, left: pos.left + pos.width / 2 - width / 2}, + "top" : {top: pos.top - height - offset, left: pos.left + pos.width / 2 - width / 2}, + "left" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left - width - offset}, + "right" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left + pos.width + offset} + }; + + UI.$.extend(tcss, variants[tmppos[0]]); + + if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width); + + var boundary = this.checkBoundary(tcss.left, tcss.top, width, height); + + if(boundary) { + + switch(boundary) { + case "x": + + if (tmppos.length == 2) { + position = tmppos[0]+"-"+(tcss.left < 0 ? "left": "right"); + } else { + position = tcss.left < 0 ? "right": "left"; + } + + break; + + case "y": + if (tmppos.length == 2) { + position = (tcss.top < 0 ? "bottom": "top")+"-"+tmppos[1]; + } else { + position = (tcss.top < 0 ? "bottom": "top"); + } + + break; + + case "xy": + if (tmppos.length == 2) { + position = (tcss.top < 0 ? "bottom": "top")+"-"+(tcss.left < 0 ? "left": "right"); + } else { + position = tcss.left < 0 ? "right": "left"; + } + + break; + + } + + tmppos = position.split("-"); + + UI.$.extend(tcss, variants[tmppos[0]]); + + if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width); + } + + + tcss.left -= UI.$body.position().left; + + tooltipdelay = setTimeout(function(){ + + $tooltip.css(tcss).attr("class", ["uk-tooltip", "uk-tooltip-"+position, $this.options.cls].join(' ')); + + if ($this.options.animation) { + $tooltip.css({opacity: 0, display: 'block'}).addClass($this.options.activeClass).animate({opacity: 1}, parseInt($this.options.animation, 10) || 400); + } else { + $tooltip.show().addClass($this.options.activeClass); + } + + tooltipdelay = false; + + // close tooltip if element was removed or hidden + checkdelay = setInterval(function(){ + if(!$this.element.is(':visible')) $this.hide(); + }, 150); + + }, parseInt(this.options.delay, 10) || 0); + }, + + hide: function() { + if(this.element.is("input") && this.element[0]===document.activeElement) return; + + if(tooltipdelay) clearTimeout(tooltipdelay); + if (checkdelay) clearTimeout(checkdelay); + + $tooltip.stop(); + + if (this.options.animation) { + + var $this = this; + + $tooltip.fadeOut(parseInt(this.options.animation, 10) || 400, function(){ + $tooltip.removeClass($this.options.activeClass) + }); + + } else { + $tooltip.hide().removeClass(this.options.activeClass); + } + }, + + content: function() { + return this.tip; + }, + + checkBoundary: function(left, top, width, height) { + + var axis = ""; + + if(left < 0 || ((left - UI.$win.scrollLeft())+width) > window.innerWidth) { + axis += "x"; + } + + if(top < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) { + axis += "y"; + } + + return axis; + } + }); + + return UI.tooltip; +}); -- cgit v1.2.3