diff options
Diffstat (limited to 'js/components/tooltip.js')
-rwxr-xr-x | js/components/tooltip.js | 234 |
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 | }); | ||