-
Notifications
You must be signed in to change notification settings - Fork 9
/
tipped.js
99 lines (88 loc) · 3.42 KB
/
tipped.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/*global angular*/
(function () {
'use strict';
var tipped = angular.module('decipher.tipped', []);
var defaults = {
showOn: 'mouseenter',
showDelay: 1000,
hideOn: 'mouseleave',
hideDelay: 500,
target: 'self'
};
/**
* Grab this constant and put stuff in it to override the defaults above
* or set any defaults you please.
*/
tipped.constant('tippedOptions', {});
/**
* There are two ways to use this directive:
*
* An inline template, with interpolation available:
*
* <div data-tipped title="your {{mom}}"></div>
*
* Or a templateUrl, which will fetch the template via AJAX and be fancy.
*
* <div data-tipped data-template-url="'something.html'"></div>
*
* (the template URL is an AngularJS expression)
*
* To override any defaults, pass an options object to the tipped directive:
*
* <div data-tipped="{skin: 'grey'}" title="Derp"></div>
*
*/
tipped.directive('tipped',
function ($window, $http, $interpolate, $compile, $templateCache, $timeout,
tippedOptions) {
return {
restrict: 'A',
link: function link(scope, element, attrs) {
var tipped = attrs.tipped || '{}', skin,
tippedDefaults = angular.copy(defaults),
moduleDefaults = angular.copy(tippedOptions),
ttDefaults = scope.$eval(tipped),
options;
options =
angular.extend(tippedDefaults, angular.extend(moduleDefaults,
ttDefaults));
// explicitly get options from skin since we have to do stuff manually.
if (options.skin && (skin = $window.Tipped.Skins[options.skin])) {
options = angular.extend(options, skin);
}
if (attrs.title) {
$window.Tipped.create(element[0], $interpolate(attrs.title)(scope),
options);
}
else if (attrs.templateUrl) {
$http.get(scope.$eval(attrs.templateUrl), {cache: $templateCache})
.then(function receiveTemplate(res) {
// we have to interpolate and compile the template first because Tipped
// will size its tooltip based on the HTML. if we left the
// uninterpolated values in the HTML, the resulting tooltip
// could be larger/smaller than what actually should be shown.
// this means, unfortunately, we must compile once for this reason,
// and again to actually wire up the resulting tooltip.
// we wrap in a <div> in order to get the html of the tooltip;
// this allows us to use templates without wrappers. we wrap in a
// SECOND div because interpolation is wonky and becomes confused
// if there is no wrapper.
var template, tt;
template = $compile('<div>' +
$interpolate('<div>' + res.data + '</div>')(scope) +
'</div>')(scope);
options.afterUpdate = function afterUpdate(content, element) {
var c = angular.element(content),
el = angular.element(element);
scope.$apply(function () {
c.html($compile('<div>' + c.html() + '</div>')(scope));
});
};
tt = $window.Tipped.create(element[0], template.html(), options);
});
}
}
};
}
);
})();