-
Notifications
You must be signed in to change notification settings - Fork 0
/
application.js
151 lines (122 loc) · 3.41 KB
/
application.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
var FooBar = {};
(function(w, undefined){
var
options = {
content: "FooBar Who?",
background_colour: 'white',
text_colour: [10,10,10],
border_colour: [0,0,0, 0.4],
},
foobar,
content,
open,
close;
var init = function(){
extend_options();
injectStyles();
inject();
bindHandlers();
if(isOpen()) {
foobar.classList.add("foobar-active");
} else {
open.classList.toggle("foobar-active");
};
content.innerHTML = options.content;
};
var supported = function(){
// https://developer.mozilla.org/en-US/docs/DOM/element.classList
//
// IE9 and under do not support classList. This is ideal, since we
// only want FooBar to work on the latest modern browsers.
return document.body.hasOwnProperty('classList');
};
var bindHandlers = function() {
close.addEventListener('click', toggle);
open.addEventListener('click', toggle);
};
var toggle = function(){
if(isOpen()) {
w.localStorage.setItem('foobar/close', "true");
} else {
w.localStorage.clear('foobar/close');
}
foobar.classList.toggle("foobar-active");
open.classList.toggle("foobar-active");
};
var isOpen = function(){
return w.localStorage.getItem('foobar/close') === null;
};
var inject = function(){
foobar = document.createElement("div");
foobar.id = "foobar";
content = document.createElement("div");
content.id = "foobar-content";
close = document.createElement("span");
close.id = "foobar-close";
foobar.appendChild(content);
foobar.appendChild(close);
open = document.createElement("div");
open.id = "foobar-open";
open.innerHTML = "<span class='foobar-plus'></span>"
document.body.appendChild(foobar);
document.body.appendChild(open);
};
var extend_options = function(){
if(typeof my_foobar === "object"){
for (var prop in my_foobar) {
if (options[prop] !== undefined) {
options[prop] = my_foobar[prop];
}
}
}
};
var injectStyles = function(){
var
// Create the style tag
tag = document.createElement('style'),
// Memo will hold our concatenated CSS string
memo = '';
// Iterate over each property in the styles object
for (element in styles()) {
memo += element + "{";
for( style in styles()[element]){
memo += style + ":" + styles()[element][style] + ';';
}
memo += "}";
}
tag.textContent = memo;
document.body.insertBefore(tag, document.body.childNodes[0]);
};
var colour = function(value){
// does value behave like an array?..
if(value.join) {
// ... and has frou elements, then assume it's an rgba color reference
if(value.length === 4){
return "rgba(" + value + ")";
} else {
return "rgb(" + value + ")";
}
} else {
// Doesn't behave like an array? Then assume it's a string.
return value;
}
};
var styles = function(){
return {
'#foobar': {
"background": colour(options.background_colour),
"color": options.text_colour,
"border-color": colour(options.border_colour),
},
'#foobar-open': {
"border-color": colour(options.border_colour),
"background": colour(options.background_colour)
}
};
};
w.onload = function(){
if(supported()){
init();
}
};
}(window));