root / snf-cyclades-app / synnefo / ui / new_ui / ui / vendor / foundation / foundation.tooltips.js @ faad3c72
History | View | Annotate | Download (6.6 kB)
1 |
/*jslint unparam: true, browser: true, indent: 2 */
|
---|---|
2 |
|
3 |
;(function ($, window, document, undefined) { |
4 |
'use strict';
|
5 |
|
6 |
Foundation.libs.tooltips = { |
7 |
name: 'tooltips', |
8 |
|
9 |
version : '4.0.2', |
10 |
|
11 |
settings : {
|
12 |
selector : '.has-tip', |
13 |
additionalInheritableClasses : [],
|
14 |
tooltipClass : '.tooltip', |
15 |
posBottom: 10, |
16 |
tipTemplate : function (selector, content) { |
17 |
return '<span data-selector="' + selector + '" class="' |
18 |
+ Foundation.libs.tooltips.settings.tooltipClass.substring(1)
|
19 |
+ '">' + content + '<span class="nub"></span></span>'; |
20 |
} |
21 |
}, |
22 |
|
23 |
cache : {},
|
24 |
|
25 |
init : function (scope, method, options) { |
26 |
var self = this; |
27 |
this.scope = scope || this.scope; |
28 |
|
29 |
if (typeof method === 'object') { |
30 |
$.extend(true, this.settings, method); |
31 |
} |
32 |
|
33 |
if (typeof method != 'string') { |
34 |
if (Modernizr.touch) {
|
35 |
$(this.scope) |
36 |
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
|
37 |
'[data-tooltip]', function (e) { |
38 |
e.preventDefault(); |
39 |
$(self.settings.tooltipClass).hide();
|
40 |
self.showOrCreateTip($(this)); |
41 |
}) |
42 |
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
|
43 |
this.settings.tooltipClass, function (e) { |
44 |
e.preventDefault(); |
45 |
$(this).fadeOut(150); |
46 |
}); |
47 |
} else {
|
48 |
$(this.scope) |
49 |
.on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip',
|
50 |
'[data-tooltip]', function (e) { |
51 |
var $this = $(this); |
52 |
|
53 |
if (e.type === 'mouseover' || e.type === 'mouseenter') { |
54 |
self.showOrCreateTip($this);
|
55 |
} else if (e.type === 'mouseout' || e.type === 'mouseleave') { |
56 |
self.hide($this);
|
57 |
} |
58 |
}); |
59 |
} |
60 |
|
61 |
// $(this.scope).data('fndtn-tooltips', true);
|
62 |
} else {
|
63 |
return this[method].call(this, options); |
64 |
} |
65 |
|
66 |
}, |
67 |
|
68 |
showOrCreateTip : function ($target) { |
69 |
var $tip = this.getTip($target); |
70 |
|
71 |
if ($tip && $tip.length > 0) { |
72 |
return this.show($target); |
73 |
} |
74 |
|
75 |
return this.create($target); |
76 |
}, |
77 |
|
78 |
getTip : function ($target) { |
79 |
var selector = this.selector($target), |
80 |
tip = null;
|
81 |
|
82 |
if (selector) {
|
83 |
tip = $('span[data-selector=' + selector + ']' + this.settings.tooltipClass); |
84 |
} |
85 |
|
86 |
return (typeof tip === 'object') ? tip : false; |
87 |
}, |
88 |
|
89 |
selector : function ($target) { |
90 |
var id = $target.attr('id'), |
91 |
dataSelector = $target.attr('data-tooltip') || $target.attr('data-selector'); |
92 |
|
93 |
if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') { |
94 |
dataSelector = 'tooltip' + Math.random().toString(36).substring(7); |
95 |
$target.attr('data-selector', dataSelector); |
96 |
} |
97 |
|
98 |
return (id && id.length > 0) ? id : dataSelector; |
99 |
}, |
100 |
|
101 |
create : function ($target) { |
102 |
var $tip = $(this.settings.tipTemplate(this.selector($target), $('<div>').html($target.attr('title')).html())), |
103 |
classes = this.inheritable_classes($target); |
104 |
|
105 |
$tip.addClass(classes).appendTo('body'); |
106 |
if (Modernizr.touch) {
|
107 |
$tip.append('<span class="tap-to-close">tap to close </span>'); |
108 |
} |
109 |
$target.removeAttr('title').attr('title',''); |
110 |
this.show($target); |
111 |
}, |
112 |
|
113 |
reposition : function (target, tip, classes) { |
114 |
var width, nub, nubHeight, nubWidth, column, objPos;
|
115 |
var self = this; |
116 |
|
117 |
tip.css('visibility', 'hidden').show(); |
118 |
|
119 |
width = target.data('width');
|
120 |
nub = tip.children('.nub');
|
121 |
nubHeight = this.outerHeight(nub);
|
122 |
nubWidth = this.outerHeight(nub);
|
123 |
|
124 |
objPos = function (obj, top, right, bottom, left, width) { |
125 |
return obj.css({
|
126 |
'top' : (top) ? top : 'auto', |
127 |
'bottom' : (bottom) ? bottom : 'auto', |
128 |
'left' : (left) ? left : 'auto', |
129 |
'right' : (right) ? right : 'auto', |
130 |
'width' : (width) ? width : 'auto' |
131 |
}).end(); |
132 |
}; |
133 |
|
134 |
objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', target.offset().left, width); |
135 |
|
136 |
if ($(window).width() < 767) { |
137 |
objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', 12.5, $(this.scope).width()); |
138 |
tip.addClass('tip-override');
|
139 |
objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left); |
140 |
} else {
|
141 |
objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', target.offset().left, width); |
142 |
tip.removeClass('tip-override');
|
143 |
if (classes && classes.indexOf('tip-top') > -1) { |
144 |
objPos(tip, (target.offset().top - this.outerHeight(tip)), 'auto', 'auto', target.offset().left, width) |
145 |
.removeClass('tip-override');
|
146 |
} else if (classes && classes.indexOf('tip-left') > -1) { |
147 |
objPos(tip, (target.offset().top + (this.outerHeight(target) / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left - this.outerWidth(tip) - nubHeight), width) |
148 |
.removeClass('tip-override');
|
149 |
} else if (classes && classes.indexOf('tip-right') > -1) { |
150 |
objPos(tip, (target.offset().top + (this.outerHeight(target) / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left + this.outerWidth(target) + nubHeight), width) |
151 |
.removeClass('tip-override');
|
152 |
} |
153 |
} |
154 |
|
155 |
tip.css('visibility', 'visible').hide(); |
156 |
}, |
157 |
|
158 |
inheritable_classes : function (target) { |
159 |
var inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'noradius'].concat(this.settings.additionalInheritableClasses), |
160 |
classes = target.attr('class'),
|
161 |
filtered = classes ? $.map(classes.split(' '), function (el, i) { |
162 |
if ($.inArray(el, inheritables) !== -1) { |
163 |
return el;
|
164 |
} |
165 |
}).join(' ') : ''; |
166 |
|
167 |
return $.trim(filtered); |
168 |
}, |
169 |
|
170 |
show : function ($target) { |
171 |
var $tip = this.getTip($target); |
172 |
|
173 |
this.reposition($target, $tip, $target.attr('class')); |
174 |
$tip.fadeIn(150); |
175 |
}, |
176 |
|
177 |
hide : function ($target) { |
178 |
var $tip = this.getTip($target); |
179 |
|
180 |
$tip.fadeOut(150); |
181 |
}, |
182 |
|
183 |
// deprecate reload
|
184 |
reload : function () { |
185 |
var $self = $(this); |
186 |
|
187 |
return ($self.data('fndtn-tooltips')) ? $self.foundationTooltips('destroy').foundationTooltips('init') : $self.foundationTooltips('init'); |
188 |
}, |
189 |
|
190 |
off : function () { |
191 |
$(this.scope).off('.fndtn.tooltip'); |
192 |
$(this.settings.tooltipClass).each(function (i) { |
193 |
$('[data-tooltip]').get(i).attr('title', $(this).text()); |
194 |
}).remove(); |
195 |
} |
196 |
}; |
197 |
}(Foundation.zj, this, this.document)); |