-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
96 lines (92 loc) · 3.14 KB
/
example.html
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
<!DOCTYPE html>
<html>
<head>
<title>The Github-Fork</title>
<!-- Page style -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="example.css">
<!-- Webcomponents (cross-browser polyfill) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.6.0/webcomponents.min.js"></script>
<!-- Awesome Button -->
<link async rel="import" href="awesome-button.html" />
<link async rel="import" href="github-fork.html" />
</head>
<body>
<main>
<div>
<section>
<h1>Web components are awesome</h1>
<p>The github-fork is a cool option to quickly add the "Fork me on github" ribbon to your projects.</p>
<h2><github-fork/></h2>
<ul class="examples">
<!-- Awesome Button tags -->
<li>
<div class="code">
<span><github-fork</span> <em>href</em>=<b>"http://github.com/rcaferati/github-fork"</b><span>></span><span></github-fork></span>
</div>
</li>
<li>
<div class="code">
document.<i>querySelector</i>(<b>"github-fork"</b>).<i>exit</i>();
</div>
<awesome-button color="teal" type="source" id="run-exit">Run this code</awesome-button>
</li>
<li>
<div class="code">
document.<i>querySelector</i>(<b>"github-fork"</b>).<i>enter</i>();
</div>
<awesome-button color="teal" type="source" id="run-enter" disabled>Run <b>this</b> code</awesome-button>
</li>
<li>
<div class="code">
document.<i>querySelector</i>(<b>"github-fork"</b>).<i>background</i>(<b id="color">"#2196F3"</b>);
</div>
<awesome-button color="teal" type="source" id="run-color">Run this code</awesome-button>
</li>
</ul>
<footer>
<small>Check this and more projects at my <a href="http://caferati.me/labs">labs page</a>.</small>
</footer>
</section>
</div>
</main>
<github-fork href="http://github.com/rcaferati" hidden></github-fork>
<script>
(function () {
var github = document.querySelector("github-fork");
var enter = document.getElementById("run-enter");
var exit = document.getElementById("run-exit");
setTimeout(function () {
github.enter();
}, 900);
enter.addEventListener("action", function () {
exit.disabled(false);
enter.disabled(true);
color.disabled(false);
github.enter();
});
exit.addEventListener("action", function () {
exit.disabled(true);
enter.disabled(false);
color.disabled(true);
github.exit();
});
var colors = {
index: 0,
options: ["#5c5c5c", "#2196F3", "#9C27B0", "#607D8B", "#009688", "#F44336"],
},
color = document.getElementById("run-color"),
text = document.getElementById("color");
color.addEventListener("action", function () {
var current = (colors.index + 1) >= colors.options.length ? 0 : (colors.index + 1),
next = (current + 1) >= colors.options.length ? 0 : (current + 1);
console.log(current);
console.log(next);
github.background(colors.options[current]);
colors.index = current;
text.innerHTML = "\"" + colors.options[next] + "\"";
});
})();
</script>
</body>
</html>