-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
150 lines (148 loc) · 5.58 KB
/
index.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
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
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
<title>Schedule | WDI 14 | Tabs</title>
<script>
var favicon = document.createElement("link")
favicon.setAttribute("rel","icon")
favicon.setAttribute("href","https://calendar.google.com/googlecalendar/images/favicon_v2013_"+(new Date().getDate())+".ico")
favicon.setAttribute("type","image/x-icon")
document.head.appendChild(favicon)
</script>
</head>
<body>
<a href="https://github.com/ga-dc/cr5" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<h1>Tabs</h1>
<label for='today'>
<small>Jump to Date: </small>
<input type='date' id='today'>
</label>
<script type='text/x-handlebars-template' id='app'>
{{#each weeks}}
<div class='week' id='{{this._index}}'>
<h1><a href='#{{this._index}}'>Week {{this._index}}</a></h1>
{{#each this}}
<div class='day' id={{this.yyyymmdd}}>
<h2 class='day-header'><a href='#{{this.yyyymmdd}}'>{{this.date}}</a></h2>
{{#each this.day}}
<div>
{{#if this.url}}
<h2 ><a style='color:{{this.color}}' href='{{this.url}}'>{{this.title}}</a></h2>
{{else}}
<h2 style='color:{{this.color}}'>{{this.title}}</h2>
{{/if}}
<time>{{this.time}}</time>
<ul>
{{#if this.urls}}
{{#each this.urls}}
{{#if this.href}}
<li><a href='{{this.href}}'>{{this.title}}</a></li>
{{else}}
<li>{{this.title}}</li>
{{/if}}
{{/each}}
{{/if}}
</ul>
<ul>
{{#if this.lead}}
<li>{{this.lead}}</li>
{{/if}}
{{#if this.support}}
<li>{{this.support}}</li>
{{/if}}
</ul>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/each}}
</script>
<div class='events' />
<script src='js-yaml.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type='text/javascript'>
var request = new XMLHttpRequest();
request.open('GET', './schedule.yml', true);
var context = []
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var doc = jsyaml.load(this.response)
var oi = 0
var week = []
for(var i = 0; i < doc[1].days.length; i++){
if( i % 5 === 0 && i !== 0 ){
week._index = context.length + 1
context.push(week)
week = []
oi += 2
}
var day = doc[1].days[i]
day.date = moment(doc[0]["start-date"]).add(oi,"days").format("ddd, MMM Do 'YY")
day.yyyymmdd = moment(doc[0]["start-date"]).add(oi,"days").format("YYYY-MM-DD")
day.day = day.day.map(function(event){
var time = Object.keys(event)[0]
if(typeof event[time].url === "string"){
var url = event[time].url
}
if(typeof event[time].url === "object"){
var urls = event[time].url.map(function(e){
var title = Object.keys(e)[0]
return {
title: title,
href: e[title]
}
})
}
var newDay = {
time: time,
url: url,
urls: urls
}
delete event[time].url
for(var k in event[time]){
newDay[k] = event[time][k]
}
return newDay
})
week.push(day)
oi++
}
var tpl = app.innerHTML
var template = Handlebars.compile(tpl)
var html = template({weeks:context})
document.querySelector(".events").innerHTML = html
if(window.location.hash){
if(window.location.hash === '#today' ){
window.location.hash = '#' + moment().format("YYYY-MM-DD")
}
goTo(window.location.hash)
}else{
window.location.hash = '#' + moment().format("YYYY-MM-DD")
goTo(window.location.hash)
}
}
};
request.send();
onhashchange = function(e){
goTo(location.hash)
}
function goTo(hash){
var id = hash.substr(1)
var target = document.getElementById(id)
try{
document.querySelector(".target").classList.remove("target")
} catch(e) {}
if(!target) return
target.classList.add("target")
target.scrollIntoView()
}
today.onchange = function(event){
window.location.hash = today.value
}
</script>
</body>
</html>