Skip to content

Commit 5f5dd0b

Browse files
osahyounosahyoun
committed
Initial commit
0 parents  commit 5f5dd0b

File tree

5 files changed

+311
-0
lines changed

5 files changed

+311
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
post.md

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# FooBar
2+
3+
### A Hello Bar remake, with tutorial
4+
5+
The accompanying tutorial is posted on my blog: [eduvoyage.com](http://eduvoyage.com)

‎application.css

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
#foobar {
2+
height: 30px;
3+
margin: 0;
4+
padding: 0;
5+
left: 0;
6+
width: 100%;
7+
border-bottom-width: 1px;
8+
border-bottom-style: solid;
9+
top: -38px;
10+
-webkit-transition: top 500ms ease-in;
11+
-moz-transition: top 500ms ease-in;
12+
-op-transition: top 500ms ease-in;
13+
transition: top 500ms ease-in;
14+
box-shadow: 0 0px 5px #333;
15+
position: fixed;
16+
}
17+
18+
#foobar.foobar-active {
19+
top: 0;
20+
z-index: 5000;
21+
}
22+
23+
#foobar-content {
24+
width: 90%;
25+
overflow: hidden;
26+
padding: 3px;
27+
font-family: helvetica;
28+
font-size: 18px;
29+
margin: 0 auto;
30+
text-align: center;
31+
position: relative;
32+
}
33+
34+
#foobar-content a {
35+
text-decoration: none;
36+
}
37+
38+
#foobar-open {
39+
-webkit-transition: top 200ms ease-in;
40+
position: absolute;
41+
top: -29px;
42+
right: 30px;
43+
border: 1px solid #ddd;
44+
border-width: 0 1px 1px 1px;
45+
border-style: solid;
46+
47+
border-radius: 0px 0 5px 5px;
48+
border-top: 0px;
49+
box-shadow: 1px 1px 3px #c9c9c9;
50+
cursor: pointer;
51+
height: 25px;
52+
width: 30px;
53+
z-index: 5001;
54+
position: fixed;
55+
}
56+
57+
#foobar-open.foobar-active {
58+
top: 0;
59+
}
60+
61+
.foobar-plus {
62+
width: 15px;
63+
height: 15px;
64+
top: 10px;
65+
position: absolute;
66+
display: block;
67+
top: 5px;
68+
left: 7px;
69+
text-align: center;
70+
}
71+
72+
.foobar-plus:after {
73+
content: '\002B';
74+
}
75+
76+
#foobar-open, #foobar-close {
77+
font-size: 20px;
78+
font-weight: bold;
79+
line-height: 10px;
80+
text-align: center;
81+
}
82+
83+
#foobar-close {
84+
display: block;
85+
position: absolute;
86+
right: 15px;
87+
top: 5px;
88+
height: 20px;
89+
cursor: pointer;
90+
}
91+
92+
#foobar-close, .foobar-plus {
93+
opacity: 0.6;
94+
transition: opacity 400ms;
95+
}
96+
97+
#foobar-close:hover, .foobar-plus:hover {
98+
opacity: 1;
99+
}
100+
101+
#foobar-close:after {
102+
content: '\2A2F';
103+
}

‎application.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
var FooBar = {};
2+
3+
(function(w, undefined){
4+
var
5+
options = {
6+
content: "FooBar Who?",
7+
background_colour: 'white',
8+
text_colour: [10,10,10],
9+
border_colour: [0,0,0, 0.4],
10+
},
11+
12+
foobar,
13+
content,
14+
open,
15+
close;
16+
17+
18+
var init = function(){
19+
extend_options();
20+
injectStyles();
21+
22+
inject();
23+
24+
bindHandlers();
25+
26+
if(isOpen()) {
27+
foobar.classList.add("foobar-active");
28+
} else {
29+
open.classList.toggle("foobar-active");
30+
};
31+
32+
content.innerHTML = options.content;
33+
};
34+
35+
var supported = function(){
36+
// https://developer.mozilla.org/en-US/docs/DOM/element.classList
37+
//
38+
// IE9 and under do not support classList. This is ideal, since we
39+
// only want FooBar to work on the latest modern browsers.
40+
return document.body.hasOwnProperty('classList');
41+
};
42+
43+
var bindHandlers = function() {
44+
close.addEventListener('click', toggle);
45+
open.addEventListener('click', toggle);
46+
};
47+
48+
var toggle = function(){
49+
if(isOpen()) {
50+
w.localStorage.setItem('foobar/close', "true");
51+
} else {
52+
w.localStorage.clear('foobar/close');
53+
}
54+
foobar.classList.toggle("foobar-active");
55+
open.classList.toggle("foobar-active");
56+
};
57+
58+
var isOpen = function(){
59+
return w.localStorage.getItem('foobar/close') === null;
60+
};
61+
62+
var inject = function(){
63+
foobar = document.createElement("div");
64+
foobar.id = "foobar";
65+
66+
content = document.createElement("div");
67+
content.id = "foobar-content";
68+
69+
close = document.createElement("span");
70+
close.id = "foobar-close";
71+
72+
foobar.appendChild(content);
73+
foobar.appendChild(close);
74+
75+
open = document.createElement("div");
76+
open.id = "foobar-open";
77+
open.innerHTML = "<span class='foobar-plus'></span>"
78+
79+
document.body.appendChild(foobar);
80+
document.body.appendChild(open);
81+
};
82+
83+
var extend_options = function(){
84+
if(typeof my_foobar === "object"){
85+
for (var prop in my_foobar) {
86+
if (options[prop] !== undefined) {
87+
options[prop] = my_foobar[prop];
88+
}
89+
}
90+
}
91+
};
92+
93+
var injectStyles = function(){
94+
var
95+
// Create the style tag
96+
tag = document.createElement('style'),
97+
98+
// Memo will hold our concatenated CSS string
99+
memo = '';
100+
101+
// Iterate over each property in the styles object
102+
for (element in styles()) {
103+
memo += element + "{";
104+
for( style in styles()[element]){
105+
memo += style + ":" + styles()[element][style] + ';';
106+
}
107+
memo += "}";
108+
}
109+
110+
tag.textContent = memo;
111+
document.body.insertBefore(tag, document.body.childNodes[0]);
112+
};
113+
114+
var colour = function(value){
115+
116+
// does value behave like an array?..
117+
if(value.join) {
118+
119+
// ... and has frou elements, then assume it's an rgba color reference
120+
if(value.length === 4){
121+
return "rgba(" + value + ")";
122+
} else {
123+
return "rgb(" + value + ")";
124+
}
125+
} else {
126+
// Doesn't behave like an array? Then assume it's a string.
127+
return value;
128+
}
129+
};
130+
131+
var styles = function(){
132+
return {
133+
'#foobar': {
134+
"background": colour(options.background_colour),
135+
"color": options.text_colour,
136+
"border-color": colour(options.border_colour),
137+
},
138+
'#foobar-open': {
139+
"border-color": colour(options.border_colour),
140+
"background": colour(options.background_colour)
141+
}
142+
};
143+
};
144+
145+
w.onload = function(){
146+
if(supported()){
147+
init();
148+
}
149+
};
150+
151+
}(window));

‎index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<link rel="stylesheet" href="application.css" type="text/css" media="screen" title="no title" charset="utf-8">
5+
6+
<script type="text/javascript" charset="utf-8">
7+
my_foobar = {
8+
content: "Hello from Foo Bar"
9+
};
10+
</script>
11+
12+
<script src="application.js" type="text/javascript" charset="utf-8"></script>
13+
14+
<style type="text/css" media="screen">
15+
body {
16+
padding: 0;
17+
margin: 0;
18+
}
19+
section {
20+
width: 90%;
21+
font-family: arial;
22+
font-size: 2em;
23+
line-height: 1.5;
24+
margin: 0 auto;
25+
}
26+
</style>
27+
28+
</head>
29+
<body>
30+
<section>
31+
<p>
32+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
33+
</p>
34+
<p>
35+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
36+
</p>
37+
<p>
38+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
39+
</p>
40+
<p>
41+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
42+
</p>
43+
</section>
44+
45+
<script type="text/javascript" src="http://www.hellobar.com/hellobar.js"></script>
46+
<script type="text/javascript">
47+
// new HelloBar(12001,7986);
48+
</script>
49+
</body>
50+
51+
</html>

0 commit comments

Comments
 (0)