-
Notifications
You must be signed in to change notification settings - Fork 31
/
purplecoat.js
78 lines (61 loc) · 2.58 KB
/
purplecoat.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
(function ($) {
var f = function(purplecoatToggleData, purplecoatColorData, target) {
var $purplecoatVisible = $("[data-purplecoat-for=" + purplecoatToggleData + "]:visible");
var $purplecoatHidden = $("[data-purplecoat-for=" + purplecoatToggleData + "]:hidden");
if ($purplecoatVisible.length) {
$purplecoatVisible.fadeOut();
} else if ($purplecoatHidden.length) {
$purplecoatHidden.fadeIn();
} else {
target.each(function () {
var $myself = $(this);
if ($myself.is(":hidden")) {
return;
}
var $purplecoat = $('<div class="purplecoat"></div>');
$('body').append($purplecoat);
var $purplecoatInner = $('<div class="purplecoat-inner"></div>');
$purplecoat.append($purplecoatInner);
var $purplecoatInnerText = $('<div class="purplecoat-inner-text"></div>');
$purplecoatInnerText.html($myself.data('purplecoat-label'));
$purplecoatInner.append($purplecoatInnerText);
if ($myself.data('purplecoat-color')) {
purplecoatColorData = $myself.data('purplecoat-color');
}
if (purplecoatColorData) {
$purplecoat.css('background-color', purplecoatColorData);
}
$purplecoat
.attr('data-purplecoat-for', purplecoatToggleData)
.css({
'top': $myself.offset().top,
'left': $myself.offset().left,
'width': $myself.outerWidth(),
'height': $myself.outerHeight() })
.fadeIn();
});
}
}
$.fn.purplecoat = function() {
var purplecoatToggleData = this.data("purplecoat");
var purplecoatColorData = this.data("purplecoat-color");
var target = this;
f(purplecoatToggleData,
purplecoatColorData,
target);
}
$(function () {
var styles = '.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}';
var $style = $('<style/>');
$style.html(styles);
$('head').prepend($style);
$('[data-purplecoat-toggle]').on('click', function () {
var purplecoatToggleData = $(this).data('purplecoat-toggle');
var purplecoatColorData = $(this).data('purplecoat-color');
var target = $("[data-purplecoat=" + purplecoatToggleData + "]");
f(purplecoatToggleData,
purplecoatColorData,
target);
});
});
})(jQuery);