Skip to content

Commit 2808ed1

Browse files
author
jordanmccullough
committed
Support full-width slide, updated TOC controls
1 parent d2be422 commit 2808ed1

File tree

4 files changed

+5999
-416
lines changed

4 files changed

+5999
-416
lines changed

‎_javascript/curriculum.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ $(function(){
1717
if(teacherQuery && teacherQuery.length == 1){
1818
username = teacherQuery[0].substring(8, teacherQuery[0].length);
1919

20-
console.log(username);
21-
2220
$.ajax(
2321
{
2422
url: "https://api.github.com/users/"+username,
@@ -101,6 +99,13 @@ $(function(){
10199
});
102100
}
103101

102+
// Bind checkbox toggle for TOC
103+
$(".toc-toggle-check").change(function(){
104+
console.log("shiftleft on both.");
105+
$(".col-content").toggleClass("shift-left");
106+
$(".col-toc").toggleClass("shift-left");
107+
});
108+
104109
// Render the TOC
105110
buildToc();
106111
// Reframe slides on any window resize
@@ -109,10 +114,11 @@ $(function(){
109114
});
110115
// Ensure slide scale at start
111116
updateSlideSize();
117+
112118
// Startup slide scrollsnap watching
113119
$(document).scrollsnap({
114120
snaps: '.slide',
115-
proximity: 160
121+
proximity: 100
116122
});
117123

118124
function updateSlideSize(){
@@ -122,21 +128,26 @@ $(function(){
122128
}
123129

124130
//Time toggle keybinding
125-
$(".timer-toggle").click(function(){
131+
$(".timer-label").click(function(){
126132
$(".timer-wrapper").toggleClass("fade-out");
133+
$(".timer-amount").show();
134+
resetTimer();
135+
});
136+
$(".timer-exit").click(function(){
137+
$(".timer-wrapper").toggleClass("fade-out");
138+
$("#timer-check").removeAttr("checked");
139+
// $(".timer-amount").();
127140
resetTimer();
128-
129-
if($(".timer-wrapper").hasClass("fade-out")){
130-
$(".timer-amount").toggle();
131-
}
132141
});
133142
$("#start-stop").click(function(){
134143
var timeLeftDisplay = $("#time-left")
135144
var min = $("#minutes").attr("value");
136145
var duration = min*60;
137146

138-
$(".timer-amount").toggle();
139147
resetTimer();
148+
149+
$(".timer-amount").hide();
150+
140151
timeLeftInterval = setInterval(function(){
141152
timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
142153
duration = --duration;
@@ -153,7 +164,7 @@ $(function(){
153164

154165
// Table of Contents header parsing and builder
155166
function buildToc(){
156-
var headings = $(".curriculum h2"),
167+
var headings = $(".deck h2"),
157168
toc = $("#toc-list");
158169

159170
for(var h=0; h<headings.length; h++){
@@ -180,7 +191,7 @@ $(function(){
180191
headings[h].setAttribute("id", headingSep);
181192
}
182193

183-
$('.curriculum').scrollspy({ target: '#toc' });
194+
$('.deck').scrollspy({ target: '#toc' });
184195
}
185196
}
186197
});

‎_layouts/curriculum.html

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33
leadingpath: ../
44
---
55

6+
67
<div class="timer-wrapper fade-out">
78
<div class="timer">
8-
<div class="timer-toggle">
9-
<span class="octicon octicon-clock"></span>
10-
</div>
9+
<div class="timer-exit"><span class="octicon octicon-x"></span></div>
1110
<div class="timer-amount">
1211
<input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
1312
<!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
@@ -19,71 +18,76 @@
1918
</div>
2019
</div>
2120

22-
<div class="container curriculum">
23-
24-
25-
26-
<div class="row">
27-
<div class="col-md-9 materials">
28-
<div id="teacher" class="hidden">
29-
<div class="alignment">
30-
<div id="teacher-avatar" class=""></div>
31-
<div class="" id="teacher-info">
32-
<div id="teacher-name"></div>
33-
34-
<span id="teacher-username">
35-
<span class="octicon octicon-octoface"></span>
36-
</span>
37-
38-
<span id="teacher-email">
39-
<span class="octicon octicon-mail"></span>
40-
</span>
41-
42-
<span id="teacher-organization">
43-
<span class="octicon octicon-organization"></span>
44-
</span>
4521

46-
<span id="teacher-location">
47-
<span class="octicon octicon-location"></span>
48-
</span>
49-
50-
<div class="teacher-badges">
51-
<span id="teacher-repo" class="">
52-
<span class="octicon octicon-repo"></span>
53-
</span>
54-
55-
<span id="teacher-followers" class="">
56-
<span class="octicon octicon-person"></span>
57-
</span>
22+
<div id="toc-toggle">
23+
<input type="checkbox" class="toc-toggle-check" id="toc-toggle-check" name="toc-toggle-check" value="true">
24+
<label class="toc-toggle-label" for="toc-toggle-check">
25+
<span class="octicon octicon-list-unordered"></span>
26+
<!-- <span class="toc-header">Table of Contents</span> -->
27+
</label>
28+
</div>
5829

59-
<span id="teacher-following" class="">
60-
<span class="octicon octicon-steps"></span>
61-
</span>
62-
</div>
63-
</div>
30+
<div class="col-content deck col-md-12 col-sm-12 col-xs-12 materials curriculum">
31+
<div id="teacher" class="hidden">
32+
<div class="alignment">
33+
<div id="teacher-avatar" class=""></div>
34+
<div class="" id="teacher-info">
35+
<div id="teacher-name"></div>
36+
37+
<span id="teacher-username">
38+
<span class="octicon octicon-octoface"></span>
39+
</span>
40+
41+
<span id="teacher-email">
42+
<span class="octicon octicon-mail"></span>
43+
</span>
44+
45+
<span id="teacher-organization">
46+
<span class="octicon octicon-organization"></span>
47+
</span>
48+
49+
<span id="teacher-location">
50+
<span class="octicon octicon-location"></span>
51+
</span>
52+
53+
<div class="teacher-badges">
54+
<span id="teacher-repo" class="">
55+
<span class="octicon octicon-repo"></span>
56+
</span>
57+
58+
<span id="teacher-followers" class="">
59+
<span class="octicon octicon-person"></span>
60+
</span>
61+
62+
<span id="teacher-following" class="">
63+
<span class="octicon octicon-steps"></span>
64+
</span>
6465
</div>
6566
</div>
66-
67-
{{ content }}
6867
</div>
69-
<div class="col-md-3">
70-
<div id="toc-wrapper">
68+
</div>
7169

72-
<div id="toc" data-spy="affix" data-offset-top="145">
73-
<ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
74-
<li>
70+
{{ content }}
71+
</div>
7572

7673

77-
</li>
78-
</ul>
79-
<ul class="nav display-controls">
80-
<li>
81-
<input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
82-
<label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
83-
</li>
84-
</ul>
85-
</div>
86-
</div>
74+
<div class="col-toc col-md-2 col-sm-2 col-xs-2">
75+
<div id="toc-wrapper">
76+
<div id="toc" data-spy="affix" data-offset-top="145">
77+
<ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
78+
<li></li>
79+
</ul>
80+
<ul class="nav display-controls">
81+
<li>
82+
<input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
83+
<label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
84+
</li>
85+
<li>
86+
<div class="timer-toggle"></div>
87+
<input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
88+
<label for="timer-check" class="timer-label">Timer</label>
89+
</li>
90+
</ul>
8791
</div>
8892
</div>
8993
</div>

0 commit comments

Comments
 (0)