summaryrefslogtreecommitdiff
path: root/js/components/tooltip.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/tooltip.js')
-rwxr-xr-xjs/components/tooltip.js234
1 files changed, 0 insertions, 234 deletions
diff --git a/js/components/tooltip.js b/js/components/tooltip.js
deleted file mode 100755
index a38d49d..0000000
--- a/js/components/tooltip.js
+++ /dev/null
@@ -1,234 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3 var component;
4
5 if (window.UIkit) {
6 component = addon(UIkit);
7 }
8
9 if (typeof define == "function" && define.amd) {
10 define("uikit-tooltip", ["uikit"], function(){
11 return component || addon(UIkit);
12 });
13 }
14
15})(function(UI){
16
17 "use strict";
18
19 var $tooltip, // tooltip container
20 tooltipdelay, checkdelay;
21
22 UI.component('tooltip', {
23
24 defaults: {
25 "offset": 5,
26 "pos": "top",
27 "animation": false,
28 "delay": 0, // in miliseconds
29 "cls": "",
30 "activeClass": "uk-active",
31 "src": function(ele) {
32 var title = ele.attr('title');
33
34 if (title !== undefined) {
35 ele.data('cached-title', title).removeAttr('title');
36 }
37
38 return ele.data("cached-title");
39 }
40 },
41
42 tip: "",
43
44 boot: function() {
45
46 // init code
47 UI.$html.on("mouseenter.tooltip.uikit focus.tooltip.uikit", "[data-uk-tooltip]", function(e) {
48 var ele = UI.$(this);
49
50 if (!ele.data("tooltip")) {
51 UI.tooltip(ele, UI.Utils.options(ele.attr("data-uk-tooltip")));
52 ele.trigger("mouseenter");
53 }
54 });
55 },
56
57 init: function() {
58
59 var $this = this;
60
61 if (!$tooltip) {
62 $tooltip = UI.$('<div class="uk-tooltip"></div>').appendTo("body");
63 }
64
65 this.on({
66 focus : function(e) { $this.show(); },
67 blur : function(e) { $this.hide(); },
68 mouseenter : function(e) { $this.show(); },
69 mouseleave : function(e) { $this.hide(); }
70 });
71 },
72
73 show: function() {
74
75 this.tip = typeof(this.options.src) === "function" ? this.options.src(this.element) : this.options.src;
76
77 if (tooltipdelay) clearTimeout(tooltipdelay);
78 if (checkdelay) clearTimeout(checkdelay);
79
80 if (typeof(this.tip) === 'string' ? !this.tip.length:true) return;
81
82 $tooltip.stop().css({"top": -2000, "visibility": "hidden"}).removeClass(this.options.activeClass).show();
83 $tooltip.html('<div class="uk-tooltip-inner">' + this.tip + '</div>');
84
85 var $this = this,
86 pos = UI.$.extend({}, this.element.offset(), {width: this.element[0].offsetWidth, height: this.element[0].offsetHeight}),
87 width = $tooltip[0].offsetWidth,
88 height = $tooltip[0].offsetHeight,
89 offset = typeof(this.options.offset) === "function" ? this.options.offset.call(this.element) : this.options.offset,
90 position = typeof(this.options.pos) === "function" ? this.options.pos.call(this.element) : this.options.pos,
91 tmppos = position.split("-"),
92 tcss = {
93 "display" : "none",
94 "visibility" : "visible",
95 "top" : (pos.top + pos.height + height),
96 "left" : pos.left
97 };
98
99
100 // prevent strange position
101 // when tooltip is in offcanvas etc.
102 if (UI.$html.css('position')=='fixed' || UI.$body.css('position')=='fixed'){
103 var bodyoffset = UI.$('body').offset(),
104 htmloffset = UI.$('html').offset(),
105 docoffset = {'top': (htmloffset.top + bodyoffset.top), 'left': (htmloffset.left + bodyoffset.left)};
106
107 pos.left -= docoffset.left;
108 pos.top -= docoffset.top;
109 }
110
111
112 if ((tmppos[0] == "left" || tmppos[0] == "right") && UI.langdirection == 'right') {
113 tmppos[0] = tmppos[0] == "left" ? "right" : "left";
114 }
115
116 var variants = {
117 "bottom" : {top: pos.top + pos.height + offset, left: pos.left + pos.width / 2 - width / 2},
118 "top" : {top: pos.top - height - offset, left: pos.left + pos.width / 2 - width / 2},
119 "left" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left - width - offset},
120 "right" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left + pos.width + offset}
121 };
122
123 UI.$.extend(tcss, variants[tmppos[0]]);
124
125 if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
126
127 var boundary = this.checkBoundary(tcss.left, tcss.top, width, height);
128
129 if(boundary) {
130
131 switch(boundary) {
132 case "x":
133
134 if (tmppos.length == 2) {
135 position = tmppos[0]+"-"+(tcss.left < 0 ? "left": "right");
136 } else {
137 position = tcss.left < 0 ? "right": "left";
138 }
139
140 break;
141
142 case "y":
143 if (tmppos.length == 2) {
144 position = (tcss.top < 0 ? "bottom": "top")+"-"+tmppos[1];
145 } else {
146 position = (tcss.top < 0 ? "bottom": "top");
147 }
148
149 break;
150
151 case "xy":
152 if (tmppos.length == 2) {
153 position = (tcss.top < 0 ? "bottom": "top")+"-"+(tcss.left < 0 ? "left": "right");
154 } else {
155 position = tcss.left < 0 ? "right": "left";
156 }
157
158 break;
159
160 }
161
162 tmppos = position.split("-");
163
164 UI.$.extend(tcss, variants[tmppos[0]]);
165
166 if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
167 }
168
169
170 tcss.left -= UI.$body.position().left;
171
172 tooltipdelay = setTimeout(function(){
173
174 $tooltip.css(tcss).attr("class", ["uk-tooltip", "uk-tooltip-"+position, $this.options.cls].join(' '));
175
176 if ($this.options.animation) {
177 $tooltip.css({opacity: 0, display: 'block'}).addClass($this.options.activeClass).animate({opacity: 1}, parseInt($this.options.animation, 10) || 400);
178 } else {
179 $tooltip.show().addClass($this.options.activeClass);
180 }
181
182 tooltipdelay = false;
183
184 // close tooltip if element was removed or hidden
185 checkdelay = setInterval(function(){
186 if(!$this.element.is(':visible')) $this.hide();
187 }, 150);
188
189 }, parseInt(this.options.delay, 10) || 0);
190 },
191
192 hide: function() {
193 if(this.element.is("input") && this.element[0]===document.activeElement) return;
194
195 if(tooltipdelay) clearTimeout(tooltipdelay);
196 if (checkdelay) clearTimeout(checkdelay);
197
198 $tooltip.stop();
199
200 if (this.options.animation) {
201
202 var $this = this;
203
204 $tooltip.fadeOut(parseInt(this.options.animation, 10) || 400, function(){
205 $tooltip.removeClass($this.options.activeClass)
206 });
207
208 } else {
209 $tooltip.hide().removeClass(this.options.activeClass);
210 }
211 },
212
213 content: function() {
214 return this.tip;
215 },
216
217 checkBoundary: function(left, top, width, height) {
218
219 var axis = "";
220
221 if(left < 0 || ((left - UI.$win.scrollLeft())+width) > window.innerWidth) {
222 axis += "x";
223 }
224
225 if(top < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) {
226 axis += "y";
227 }
228
229 return axis;
230 }
231 });
232
233 return UI.tooltip;
234});