forked from robnyman/Firefox-OS-Boilerplate-App
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
194 lines (174 loc) · 7.34 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html manifest="manifest.appcache">
<!--
Offline support
Please make your homework before doing this:
http://www.alistapart.com/articles/application-cache-is-a-douchebag/
http://appcachefacts.info
This might be necessary to set up on your server, to make sure
files are updated when the appcache file itself is:
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/.htaccess
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/headers.css">
<link rel="stylesheet" type="text/css" href="css/buttons.css">
<link rel="stylesheet" type="text/css" href="css/toolbars.css">
<link rel="stylesheet" type="text/css" href="css/webapp.css">
<title>kbt2</title>
</head>
<body class="skin-dark">
<section role="region">
<header>
<!-- Icon that will indicate whether you are online or offline - enabled if you are using offline/appcache (see above) -->
<!-- <div id="online-status" title="Online"></div> -->
<menu type="toolbar">
<button data-seconds="30" class="interval">30s</button>
<button id="install"><span class="icon icon-add">add</span></button>
<button data-seconds="60" class="interval">1m</button>
<button data-seconds="120" class="interval">2m</button>
<button data-seconds="180" class="interval">3m</button>
<button class="counter">Loading</button>
</menu>
<!-- <h1>
kbt2
</h1> -->
</header>
</section>
<div id="main">
<p class="top-bar-placeholder">
topbar placeholder
</p>
<p id="installation-instructions">
Press the + button in the top right corner to install this app.
</p>
<div id="lesson">Loading...</div>
<ul id="lesson-nav">
</ul>
<p id="statusbar">
<span id="completed">
</span>
<span id="chapter">
</span>
<span id="clock">
00:00:00
</span>
</p>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/marked.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/stopwatch.js"></script>
<script type="text/javascript" src="js/offline.js"></script>
<script type="text/javascript">
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
(function () {
// Stopwatch
var stopwatch = new Stopwatch({
"milliStep" : 500,
"fadeFactor" : 0.6,
"elements" : {
"clock" : document.querySelector('#clock'),
"completed" : document.querySelector('#completed'),
"body" : document.querySelector('body'),
"counter" : document.querySelector('button.counter'),
"lesson" : document.querySelector('#lesson'),
"intervals" : document.querySelectorAll('button.interval'),
}
});
stopwatch.bind();
// Load config
stopwatch.loadConfig(function(err, config) {
// Sticky chapters
var chapters = []
$(window).on('scroll touchmove', debounce(function() {
var scrollPos = window.pageYOffset || window.scrollY;
var bestMatch = {};
scrollPos += $('header').outerHeight() + 15;
for (var i in chapters) {
var chapter = chapters[i];
if (chapter.top < scrollPos) {
bestMatch = chapter;
}
}
$('#chapter').text(bestMatch.text);
}, 100));
// Show latest lesson
stopwatch.loadMarkdown(config.kbt2.markdownIndex, function () {
// Build chapter cache index for sticky chapters
chapters = []
$('h1').each(function (i, el) {
var $h1 = $(el);
chapters.push({
top : $h1.offset().top,
height: $h1.outerHeight(),
text : $h1.text()
})
});
$('#chapter').text(chapters[0].text)
});
// Adding lesson navigation gets me in more trouble than it solves
// // Show links to 5 latest lessons
// var number = (config.kbt2.markdownIndex+'').match(/(\d+)\.md$/)[1];
// if (number) {
// var lessonNav = document.querySelector('#lesson-nav');
// for (var i = number; i >= (number-5); i--) {
// lessonNav.innerHTML += '<li><a href="/lessons/lesson' + i + '.md">Lesson ' + i + '</li>'
// }
// }
// Show links to different disciplines in current lesson
// var number = (config.kbt2.markdownIndex+'').match(/(\d+)(\-[a-z]+)?\.md$/)[1];
// if (number) {
// var lessonNav = document.querySelector('#lesson-nav');
// lessonNav.innerHTML += '<li><a href="/lessons/lesson' + number + '-bb.md">Les ' + number + ' BB</li>'
// lessonNav.innerHTML += '<li><a href="/lessons/lesson' + number + '-bg.md">Les ' + number + ' BG</li>'
// lessonNav.innerHTML += '<li><a href="/lessons/lesson' + number + '-kz.md">Les ' + number + ' KZ</li>'
// }
// Make any markdown hrefs load markdown instantly
[].forEach.call(document.querySelectorAll('a[href$=".md"]'), function(el) {
el.onclick = function () {
var href = el.getAttribute('href');
stopwatch.loadMarkdown(href);
return false;
};
});
});
// Lock orientation
var lockOrientation = function (event) {
if ('mozLockOrientation' in screen) {
var portraitLock = screen.mozLockOrientation('portrait-primary');
if (portraitLock) {
console.log('locked to portrait');
} else {
console.log('Unable to lock orientation');
}
}
};
if (window.webAppIsInstalledAlready === true) {
window.addEventListener('focus', lockOrientation, false);
lockOrientation();
}
})();
</script>
</body>
</html>