1170 lines
48 KiB
HTML
1170 lines
48 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Coloured Nicks</title>
|
|
|
|
<!-- Load the player -->
|
|
<script type="text/javascript" src="player.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link rel="stylesheet" type="text/css" href="riscy.css">
|
|
<link rel="stylesheet" type="text/css" href="topics.css">
|
|
</head>
|
|
<body>
|
|
<div class="title riscy">
|
|
<span class="episode_name">Coloured Nicks</span>
|
|
<div class="menu quotes">
|
|
<span>Quotes ▼</span>
|
|
<div class="mouse_catcher"></div>
|
|
<div class="refs quotes_container">
|
|
<span data-id="α" class="ref">
|
|
<span class="ref_content">
|
|
<div class="source">Quote 1</div>
|
|
<div class="ref_title">Stay RISCY, everyone</div>
|
|
<div class="quote_byline">—miotatsu, Wed Nov 16 21:03:26 2016</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span>
|
|
</div>
|
|
</span>
|
|
<span data-id="β" class="ref">
|
|
<span class="ref_content">
|
|
<div class="source">Quote 2</div>
|
|
<div class="ref_title">I dream of nice things</div>
|
|
<div class="quote_byline">—miotatsu, Fri Dec 2 21:00:05 2016</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="menu references">
|
|
<span>References ▼</span>
|
|
<div class="mouse_catcher"></div>
|
|
<div class="refs references_container">
|
|
<a data-id="https://en.wikipedia.org/wiki/Logic_gate" href="https://en.wikipedia.org/wiki/Logic_gate" target="_blank" class="ref">
|
|
<span class="ref_content">
|
|
<div class="source">Wikipedia</div>
|
|
<div class="ref_title">Logic gate</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[4]</span><span class="time">10:24</span></span>
|
|
</div>
|
|
</a>
|
|
<a data-id="0-7356-0505-X" href="http://www.charlespetzold.com/code/" target="_blank" class="ref">
|
|
<span class="ref_content">
|
|
<div class="source">Charles Petzold (Microsoft Press)</div>
|
|
<div class="ref_title">Code: The Hidden Language of Computer Hardware and Software</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
|
|
</div>
|
|
</a>
|
|
<a data-id="0-7356-0505-Y" href="http://www.charlespetzold.com/code/again" target="_blank" class="ref">
|
|
<span class="ref_content">
|
|
<div class="source">Charles Petzold (Microsoft Press)</div>
|
|
<div class="ref_title">Code Again: The Hidden Language of Computer Hardware and Software</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="60" class="timecode"><span class="ref_index">[3]</span><span class="time">1:00</span></span>
|
|
</div>
|
|
</a>
|
|
<a data-id="https://handmade.network/" href="https://handmade.network/" target="_blank" class="ref">
|
|
<span class="ref_content">
|
|
<div class="ref_title">Handmade Network</div>
|
|
</span>
|
|
<div class="ref_indices">
|
|
<span data-timestamp="754" class="timecode"><span class="ref_index">[5]</span><span class="time">12:34</span></span><span data-timestamp="992" class="timecode"><span class="ref_index">[6]</span><span class="time">16:32</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="menu filter">
|
|
<span><img src="hues_HCL.png"></span>
|
|
<div class="filter_container">
|
|
<div class="filter_mode inclusive">Filter mode: </div>
|
|
<div class="filters">
|
|
<div class="filter_topics">
|
|
<div class="filter_title">Topics</div>
|
|
<div class="filter_content hardware">
|
|
<span class="icon category hardware"></span><span class="text">hardware</span>
|
|
</div>
|
|
<div class="filter_content mathematics">
|
|
<span class="icon category mathematics"></span><span class="text">mathematics</span>
|
|
</div>
|
|
</div>
|
|
<div class="filter_media">
|
|
<div class="filter_title">Media</div>
|
|
<div class="filter_content blackboard">
|
|
<span class="icon">🖌</span><span class="text">Blackboard</span>
|
|
</div>
|
|
<div class="filter_content authored">
|
|
<span class="icon">🗪</span><span class="text">Chat Comment</span>
|
|
</div>
|
|
<div class="filter_content default">
|
|
<span class="icon">🖮</span><span class="text">Programming</span>
|
|
</div>
|
|
<div class="filter_content rant">
|
|
<span class="icon">💢</span><span class="text">Rant</span>
|
|
</div>
|
|
<div class="filter_content research">
|
|
<span class="icon">📖</span><span class="text">Research</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu credits">
|
|
<div class="mouse_catcher"></div>
|
|
<span>Credits</span>
|
|
<div class="credits_container">
|
|
<span class="credit">
|
|
<a class="person" href="http://riscy.tv/" target="_blank">
|
|
<div class="role">Host</div>
|
|
<div class="name">Mio Iwakura</div>
|
|
</a>
|
|
<a class="support" href="http://patreon.com/miotatsu" target="_blank"><img src="patreon_logo.png"></a>
|
|
</span>
|
|
<span class="credit">
|
|
<a class="person" href="http://miblodelcarpio.co.uk" target="_blank">
|
|
<div class="role">Annotator</div>
|
|
<div class="name">Matt Mascarenhas</div>
|
|
</a>
|
|
<a class="support" href="http://patreon.com/miblo" target="_blank"><img src="patreon_logo.png"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="player_container">
|
|
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
|
<div class="markers_container riscy">
|
|
<div data-timestamp="60" class="marker authored cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X,0-7356-0505-Y">
|
|
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="176" class="marker default" data-ref="α">
|
|
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="β">
|
|
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="624" class="marker default" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
|
|
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="642" class="marker rant">
|
|
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="754" class="marker default" data-ref="https://handmade.network/">
|
|
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
|
</div>
|
|
</div>
|
|
<div data-timestamp="992" class="marker default" data-ref="https://handmade.network/">
|
|
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
|
<div class="progress faded">
|
|
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
|
</div>
|
|
<div class="progress main">
|
|
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p>Temporary Keybinding Documentation:</p>
|
|
|
|
<p>Menu toggling:<br>
|
|
q = quotes<br>
|
|
r = references<br>
|
|
f = filter<br>
|
|
c = credits<br>
|
|
|
|
<p>Global Keys:<br>
|
|
W,A,P / S,D,N = jump to previous / next marker<br>
|
|
V = Reset filter<br>
|
|
z = Toggle filter mode between "inclusive" and "exclusive"<br>
|
|
</p>
|
|
|
|
<p>Quote menu:<br>
|
|
w,↑ / s,↓ = focus previous / next quote<br>
|
|
Enter = jump to marker<br>
|
|
</p>
|
|
|
|
<p>Reference menu:<br>
|
|
w,↑ / s,↓ = focus previous / next reference<br>
|
|
a,← / d,→ = focus previous / next identifier of current reference<br>
|
|
Enter = jump to marker<br>
|
|
o = follow link to current reference<br>
|
|
</p>
|
|
|
|
<p>Filter menu:<br>
|
|
w,↑ / s,↓ = focus previous / next category<br>
|
|
a,← / d,→ = move left / right between topics and media<br>
|
|
v = invert topics / media, as per focus<br>
|
|
x,Space = toggle currently focused category and focus next category<br>
|
|
X,Shift-Space = toggle currently focused category and focus previous category<br>
|
|
</p>
|
|
|
|
<p>Credits menu:<br>
|
|
w,↑ / s,↓ = focus previous / next credit<br>
|
|
a,← / d,→ = move left / right between homepage / support urls<br>
|
|
Enter / o = follow currently focused link<br>
|
|
</p>
|
|
</div>
|
|
<script>
|
|
|
|
var quotesMenu = document.querySelector(".quotes_container");
|
|
var quoteItems = quotesMenu.querySelectorAll(".ref");
|
|
|
|
var referencesMenu = document.querySelector(".references_container");
|
|
var filterMenu = document.querySelector(".filter_container");
|
|
var creditsMenu = document.querySelector(".credits_container");
|
|
|
|
var menuState = {
|
|
quotesMenu,
|
|
referencesMenu,
|
|
filterMenu,
|
|
creditsMenu
|
|
};
|
|
|
|
var focusedElement = null;
|
|
var focusedIdentifier = null;
|
|
|
|
var lastFocusedQuote = null;
|
|
var lastFocusedReference = null;
|
|
var lastFocusedIdentifier = null;
|
|
var lastFocusedCategory = null;
|
|
var lastFocusedTopic = null;
|
|
var lastFocusedMedium = null;
|
|
var lastFocusedCreditItem = null;
|
|
|
|
function toggleMenuVisibility(element) {
|
|
if(element.classList.contains("visible"))
|
|
{
|
|
element.classList.remove("visible");
|
|
element.parentNode.classList.remove("visible");
|
|
focusedElement.classList.remove("focused");
|
|
focusedElement = null;
|
|
if(focusedIdentifier)
|
|
{
|
|
focusedIdentifier.classList.remove("focused");
|
|
focusedIdentifier = null;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for(menuIndex in menuState)
|
|
{
|
|
menuState[menuIndex].classList.remove("visible");
|
|
menuState[menuIndex].parentNode.classList.remove("visible");
|
|
if(focusedElement)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
}
|
|
if(focusedIdentifier)
|
|
{
|
|
focusedIdentifier.classList.remove("focused");
|
|
}
|
|
}
|
|
element.classList.add("visible");
|
|
element.parentNode.classList.add("visible");
|
|
|
|
if(element.classList.contains("quotes_container"))
|
|
{
|
|
if(!lastFocusedQuote)
|
|
{
|
|
lastFocusedQuote = element.querySelectorAll(".ref")[0];
|
|
}
|
|
focusedElement = lastFocusedQuote;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
else if(element.classList.contains("references_container"))
|
|
{
|
|
if(!lastFocusedReference || !lastFocusedIdentifier)
|
|
{
|
|
lastFocusedReference = element.querySelectorAll(".ref")[0];
|
|
lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild;
|
|
}
|
|
focusedElement = lastFocusedReference;
|
|
focusedElement.classList.add("focused");
|
|
focusedIdentifier = lastFocusedIdentifier;
|
|
focusedIdentifier.classList.add("focused");
|
|
}
|
|
else if(element.classList.contains("filter_container"))
|
|
{
|
|
if(!lastFocusedCategory)
|
|
{
|
|
lastFocusedCategory = element.querySelectorAll(".filter_content")[0];
|
|
}
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
else if(element.classList.contains("credits_container"))
|
|
{
|
|
if(!lastFocusedCreditItem)
|
|
{
|
|
if(element.querySelectorAll(".credit .support")[0])
|
|
{
|
|
lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
|
|
}
|
|
else
|
|
{
|
|
lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0];
|
|
}
|
|
}
|
|
focusedElement = lastFocusedCreditItem;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleKey(key)
|
|
{
|
|
var gotKey = true;
|
|
switch (key) {
|
|
case "q": {
|
|
toggleMenuVisibility(quotesMenu)
|
|
} break;
|
|
case "r": {
|
|
toggleMenuVisibility(referencesMenu)
|
|
} break;
|
|
case "f": {
|
|
toggleMenuVisibility(filterMenu)
|
|
} break;
|
|
case "c": {
|
|
toggleMenuVisibility(creditsMenu)
|
|
} break;
|
|
|
|
case "Enter": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
|
{
|
|
var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
|
|
player.setTime(parseInt(time, 10));
|
|
player.play();
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
var time = focusedIdentifier.getAttribute("data-timestamp");
|
|
player.setTime(parseInt(time, 10));
|
|
player.play();
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.hasAttribute)
|
|
{
|
|
var url = focusedElement.getAttribute("href");
|
|
window.open(url, "_blank");
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
console.log("TODO(matt): Implement me, perhaps?\n");
|
|
}
|
|
} break;
|
|
|
|
case "o": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
var url = focusedElement.getAttribute("href");
|
|
window.open(url, "_blank");
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.hasAttribute("href"))
|
|
{
|
|
var url = focusedElement.getAttribute("href");
|
|
window.open(url, "_blank");
|
|
}
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "w": case "ArrowUp": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
|
{
|
|
if(focusedElement.previousElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedQuote = focusedElement.previousElementSibling;
|
|
focusedElement = lastFocusedQuote;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
if(focusedElement.previousElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
focusedIdentifier.classList.remove("focused");
|
|
|
|
lastFocusedReference = focusedElement.previousElementSibling;
|
|
focusedElement = lastFocusedReference;
|
|
focusedElement.classList.add("focused");
|
|
|
|
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
|
focusedIdentifier = lastFocusedIdentifier;
|
|
focusedIdentifier.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
|
|
{
|
|
if(focusedElement.previousElementSibling &&
|
|
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedCategory = focusedElement.previousElementSibling;
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.parentNode.previousElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
|
|
focusedElement.classList.contains("support"))
|
|
{
|
|
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support");
|
|
focusedElement = lastFocusedCreditItem;
|
|
}
|
|
else
|
|
{
|
|
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person");
|
|
focusedElement = lastFocusedCreditItem;
|
|
}
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "s": case "ArrowDown": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
|
{
|
|
if(focusedElement.nextElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedQuote = focusedElement.nextElementSibling;
|
|
focusedElement = lastFocusedQuote;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
if(focusedElement.nextElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
focusedIdentifier.classList.remove("focused");
|
|
|
|
lastFocusedReference = focusedElement.nextElementSibling;
|
|
focusedElement = lastFocusedReference;
|
|
focusedElement.classList.add("focused");
|
|
|
|
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
|
focusedIdentifier = lastFocusedIdentifier;
|
|
focusedIdentifier.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
|
|
{
|
|
if(focusedElement.nextElementSibling &&
|
|
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedCategory = focusedElement.nextElementSibling;
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.parentNode.nextElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
|
|
focusedElement.classList.contains("support"))
|
|
{
|
|
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support");
|
|
focusedElement = lastFocusedCreditItem;
|
|
}
|
|
else
|
|
{
|
|
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person");
|
|
focusedElement = lastFocusedCreditItem;
|
|
}
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "a": case "ArrowLeft": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
if(focusedIdentifier.previousElementSibling)
|
|
{
|
|
focusedIdentifier.classList.remove("focused");
|
|
|
|
lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
|
|
focusedIdentifier = lastFocusedIdentifier;
|
|
focusedIdentifier.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.classList.contains("filter_content"))
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("filter_media"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
lastFocusedMedium = focusedElement;
|
|
|
|
if(!lastFocusedTopic)
|
|
{
|
|
lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1];
|
|
}
|
|
lastFocusedCategory = lastFocusedTopic;
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.classList.contains("support"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedCreditItem = focusedElement.previousElementSibling;
|
|
focusedElement = lastFocusedCreditItem;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "d": case "ArrowRight": {
|
|
if(focusedElement)
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
|
{
|
|
if(focusedIdentifier.nextElementSibling)
|
|
{
|
|
focusedIdentifier.classList.remove("focused");
|
|
|
|
lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
|
|
focusedIdentifier = lastFocusedIdentifier;
|
|
focusedIdentifier.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.classList.contains("filter_content"))
|
|
{
|
|
if(focusedElement.parentNode.classList.contains("filter_topics"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
lastFocusedTopic = focusedElement;
|
|
|
|
if(!lastFocusedMedium)
|
|
{
|
|
lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1];
|
|
}
|
|
lastFocusedCategory = lastFocusedMedium;
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
else if(focusedElement.parentNode.classList.contains("credit"))
|
|
{
|
|
if(focusedElement.classList.contains("person") &&
|
|
focusedElement.nextElementSibling)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
|
|
lastFocusedCreditItem = focusedElement.nextElementSibling;
|
|
focusedElement = lastFocusedCreditItem;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "x": case " ": {
|
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
|
{
|
|
filterItemToggle(focusedElement);
|
|
if(focusedElement.nextElementSibling &&
|
|
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
focusedElement = focusedElement.nextElementSibling;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "X": case "capitalSpace": {
|
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
|
{
|
|
filterItemToggle(focusedElement);
|
|
if(focusedElement.previousElementSibling &&
|
|
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
focusedElement = focusedElement.previousElementSibling;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case "z": {
|
|
toggleFilterMode();
|
|
} break;
|
|
|
|
case "v": {
|
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
|
{
|
|
invertFilter(focusedElement)
|
|
}
|
|
} break;
|
|
|
|
case "V": {
|
|
resetFilter();
|
|
} break;
|
|
|
|
case 'N':
|
|
case 'D':
|
|
case 'S': {
|
|
player.jumpToNextMarker();
|
|
} break;
|
|
|
|
case 'P':
|
|
case 'A':
|
|
case 'W': {
|
|
player.jumpToPrevMarker();
|
|
} break;
|
|
default: {
|
|
gotKey = false;
|
|
} break;
|
|
}
|
|
return gotKey;
|
|
}
|
|
|
|
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
|
window.addEventListener("resize", function() { player.updateSize(); });
|
|
document.addEventListener("keydown", function(ev) {
|
|
var key = ev.key;
|
|
if(ev.getModifierState("Shift") && key == " ")
|
|
{
|
|
key = "capitalSpace";
|
|
}
|
|
|
|
if(handleKey(key) == true && focusedElement)
|
|
{
|
|
ev.preventDefault();
|
|
}
|
|
});
|
|
|
|
var menuButtons = document.querySelectorAll(".menu");
|
|
|
|
for(var i = 0; i < menuButtons.length; ++i)
|
|
{
|
|
menuButtons[i].addEventListener("mouseenter", function(ev) {
|
|
{
|
|
if(!this.classList.contains("visible"))
|
|
{
|
|
if(this.classList.contains("quotes"))
|
|
{
|
|
toggleMenuVisibility(quotesMenu);
|
|
}
|
|
else if(this.classList.contains("references"))
|
|
{
|
|
toggleMenuVisibility(referencesMenu);
|
|
}
|
|
else if(this.classList.contains("filter"))
|
|
{
|
|
toggleMenuVisibility(filterMenu);
|
|
}
|
|
else if(this.classList.contains("credits"))
|
|
{
|
|
toggleMenuVisibility(creditsMenu);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
for(var i = 0; i < menuButtons.length; ++i)
|
|
{
|
|
menuButtons[i].addEventListener("mouseleave", function(ev) {
|
|
{
|
|
if(this.classList.contains("visible"))
|
|
{
|
|
if(this.classList.contains("quotes"))
|
|
{
|
|
toggleMenuVisibility(quotesMenu);
|
|
}
|
|
else if(this.classList.contains("references"))
|
|
{
|
|
toggleMenuVisibility(referencesMenu);
|
|
}
|
|
else if(this.classList.contains("filter"))
|
|
{
|
|
toggleMenuVisibility(filterMenu);
|
|
}
|
|
else if(this.classList.contains("credits"))
|
|
{
|
|
toggleMenuVisibility(creditsMenu);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
for(var i = 0; i < quoteItems.length; ++i)
|
|
{
|
|
quoteItems[i].addEventListener("mouseenter", function(ev) {
|
|
{
|
|
if(focusedElement && this != lastFocusedQuote)
|
|
{
|
|
focusedElement.classList.remove("focused");
|
|
lastFocusedQuote = this;
|
|
focusedElement = lastFocusedQuote;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
referenceItems = referencesMenu.querySelectorAll(".ref");
|
|
for(var i = 0; i < referenceItems.length; ++i)
|
|
{
|
|
referenceItems[i].addEventListener("mouseenter", function(ev) {
|
|
{
|
|
if(focusedElement && this != lastFocusedReference)
|
|
{
|
|
focusedElement.classList.remove("focused")
|
|
lastFocusedReference = this;
|
|
}
|
|
focusedElement = lastFocusedReference;
|
|
focusedElement.classList.add("focused");
|
|
|
|
var ourIdentifiers = this.querySelector(".ref_indices").children;
|
|
weWereLastFocused = false;
|
|
for(var k = 0; k < ourIdentifiers.length; ++k)
|
|
{
|
|
if(ourIdentifiers[k] == lastFocusedIdentifier)
|
|
{
|
|
weWereLastFocused = true;
|
|
}
|
|
}
|
|
if(!weWereLastFocused)
|
|
{
|
|
lastFocusedIdentifier.classList.remove("focused");
|
|
lastFocusedIdentifier = this.querySelector(".ref_indices").firstElementChild;
|
|
}
|
|
focusedIdentifer = lastFocusedIdentifier;
|
|
focusedIdentifer.classList.add("focused");
|
|
|
|
for(var l = 0; l < ourIdentifiers.length; ++l)
|
|
{
|
|
ourIdentifiers[l].addEventListener("mouseenter", function(ev) {
|
|
if(this != lastFocusedIdentifier)
|
|
{
|
|
lastFocusedIdentifier.classList.remove("focused");
|
|
lastFocusedIdentifier = this;
|
|
lastFocusedIdentifier.classList.add("focused");
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
};
|
|
|
|
var filterItems = filterMenu.querySelectorAll(".filter_content");
|
|
for(var i = 0; i < filterItems.length; ++i)
|
|
{
|
|
filterItems[i].addEventListener("mouseenter", function(ev) {
|
|
if(this != lastFocusedCategory)
|
|
{
|
|
lastFocusedCategory.classList.remove("focused");
|
|
if(this.parentNode.classList.contains("filter_topics"))
|
|
{
|
|
lastFocusedTopic = this;
|
|
lastFocusedCategory = lastFocusedTopic;
|
|
}
|
|
else
|
|
{
|
|
lastFocusedMedium = this;
|
|
lastFocusedCategory = lastFocusedMedium;
|
|
}
|
|
focusedElement = lastFocusedCategory;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
})
|
|
};
|
|
|
|
var creditItems = creditsMenu.querySelectorAll(".person, .support");
|
|
for(var i = 0; i < creditItems.length; ++i)
|
|
{
|
|
creditItems[i].addEventListener("mouseenter", function(ev) {
|
|
if(this != lastFocusedCreditItem)
|
|
{
|
|
lastFocusedCreditItem.classList.remove("focused");
|
|
lastFocusedCreditItem = this;
|
|
focusedElement = lastFocusedCreditItem;
|
|
focusedElement.classList.add("focused");
|
|
}
|
|
})
|
|
}
|
|
|
|
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
|
for (var i = 0; i < refTimecodes.length; ++i) {
|
|
refTimecodes[i].addEventListener("click", function(ev) {
|
|
if (player) {
|
|
var time = ev.currentTarget.getAttribute("data-timestamp");
|
|
player.setTime(parseInt(time, 10));
|
|
player.play();
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
var filter = document.querySelector(".filter");
|
|
var filterModeElement = filter.querySelector(".filter_mode");
|
|
var filterMode = filterModeElement.classList[1];
|
|
var filterState = {
|
|
"hardware": { "type": "topic", "off": false },
|
|
"mathematics": { "type": "topic", "off": false },
|
|
"blackboard": { "type": "medium", "off": false },
|
|
"authored": { "type": "medium", "off": false },
|
|
"default": { "type": "medium", "off": false },
|
|
"rant": { "type": "medium", "off": false },
|
|
"research": { "type": "medium", "off": false },
|
|
};
|
|
|
|
function applyFilter()
|
|
{
|
|
if(filterMode == "exclusive")
|
|
{
|
|
for(var i = 0; i < testMarkers.length; ++i)
|
|
{
|
|
var testCategories = testMarkers[i].classList;
|
|
for(var j = 0; j < testCategories.length; ++j)
|
|
{
|
|
if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip"))
|
|
{
|
|
testMarkers[i].classList.add("skip");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for(var i = 0; i < testMarkers.length; ++i)
|
|
{
|
|
var testCategories = testMarkers[i].classList;
|
|
for(var j = 0; j < testCategories.length; ++j)
|
|
{
|
|
if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip"))
|
|
{
|
|
testMarkers[i].classList.remove("skip");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleFilterMode()
|
|
{
|
|
if(filterMode == "inclusive")
|
|
{
|
|
filterModeElement.classList.remove("inclusive");
|
|
filterModeElement.classList.add("exclusive");
|
|
filterMode = "exclusive";
|
|
}
|
|
else
|
|
{
|
|
filterModeElement.classList.remove("exclusive");
|
|
filterModeElement.classList.add("inclusive");
|
|
filterMode = "inclusive";
|
|
}
|
|
applyFilter();
|
|
}
|
|
|
|
var testMarkers = document.querySelectorAll(".marker");
|
|
filterModeElement.addEventListener("click", function(ev) {
|
|
toggleFilterMode();
|
|
});
|
|
|
|
function filterItemToggle(filterItem)
|
|
{
|
|
var selectedCategory = filterItem.classList[1];
|
|
filterState[selectedCategory].off = !filterState[selectedCategory].off;
|
|
|
|
if(filterState[selectedCategory].off)
|
|
{
|
|
filterItem.classList.add("off");
|
|
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
|
|
for(var j = 0; j < testMarkers.length; ++j)
|
|
{
|
|
if(filterState[selectedCategory].type == "topic")
|
|
{
|
|
testMarkers[j].classList.remove("cat_" + selectedCategory);
|
|
testMarkers[j].classList.add("off_" + selectedCategory);
|
|
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
|
|
for(var k = 0; k < markerCategories.length; ++k)
|
|
{
|
|
if(markerCategories[k].classList.contains(selectedCategory))
|
|
{
|
|
markerCategories[k].classList.add("off");
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
testMarkers[j].classList.remove(selectedCategory);
|
|
testMarkers[j].classList.add("off_" + selectedCategory);
|
|
}
|
|
|
|
Skipping = 1;
|
|
if(filterMode == "exclusive")
|
|
{
|
|
testMarkers[j].classList.add("skip");
|
|
}
|
|
else
|
|
{
|
|
var markerClasses = testMarkers[j].classList;
|
|
for(var k = 0; k < markerClasses.length; ++k)
|
|
{
|
|
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
|
|
{
|
|
Skipping = 0;
|
|
}
|
|
}
|
|
if(Skipping)
|
|
{
|
|
testMarkers[j].classList.add("skip");
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
else
|
|
{
|
|
filterItem.classList.remove("off");
|
|
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
|
|
for(var j = 0; j < testMarkers.length; ++j)
|
|
{
|
|
if(filterState[selectedCategory].type == "topic")
|
|
{
|
|
testMarkers[j].classList.remove("off_" + selectedCategory);
|
|
testMarkers[j].classList.add("cat_" + selectedCategory);
|
|
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
|
|
for(var k = 0; k < markerCategories.length; ++k)
|
|
{
|
|
if(markerCategories[k].classList.contains(selectedCategory))
|
|
{
|
|
markerCategories[k].classList.remove("off");
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
testMarkers[j].classList.remove("off_" + selectedCategory);
|
|
testMarkers[j].classList.add(selectedCategory);
|
|
}
|
|
|
|
Skipping = 0;
|
|
if(filterMode == "inclusive")
|
|
{
|
|
testMarkers[j].classList.remove("skip");
|
|
}
|
|
else
|
|
{
|
|
var markerClasses = testMarkers[j].classList;
|
|
for(var k = 0; k < markerClasses.length; ++k)
|
|
{
|
|
if(markerClasses[k].startsWith("off_"))
|
|
{
|
|
Skipping = 1;
|
|
}
|
|
}
|
|
if(!Skipping)
|
|
{
|
|
testMarkers[j].classList.remove("skip");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
|
|
|
|
function resetFilter()
|
|
{
|
|
for(i in filterCategories)
|
|
{
|
|
if(filterCategories[i].classList && filterCategories[i].classList.contains("off"))
|
|
{
|
|
filterItemToggle(filterCategories[i]);
|
|
}
|
|
}
|
|
if(filterMode == "exclusive")
|
|
{
|
|
toggleFilterMode();
|
|
}
|
|
}
|
|
|
|
function invertFilter(focusedElement)
|
|
{
|
|
var siblings = focusedElement.parentNode.querySelectorAll(".filter_content");
|
|
for(i in siblings)
|
|
{
|
|
if(siblings[i].classList)
|
|
{
|
|
filterItemToggle(siblings[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
for(var i = 0; i < filterCategories.length; ++i)
|
|
{
|
|
filterCategories[i].addEventListener("click", function(ev) {
|
|
filterItemToggle(this);
|
|
});
|
|
}
|
|
|
|
var refSources = document.querySelectorAll(".refs .ref");
|
|
for (var i = 0; i < refSources.length; ++i) {
|
|
refSources[i].addEventListener("click", function(ev) {
|
|
if (player) {
|
|
player.pause();
|
|
}
|
|
});
|
|
}
|
|
|
|
function resetFade()
|
|
{
|
|
filter.classList.remove("responsible");
|
|
filter.querySelector(".filter_mode").classList.remove("responsible");
|
|
var responsibleCategories = filter.querySelectorAll(".filter_content.responsible");
|
|
for(var i = 0; i < responsibleCategories.length; ++i)
|
|
{
|
|
responsibleCategories[i].classList.remove("responsible");
|
|
}
|
|
}
|
|
|
|
var sourceMenus = document.querySelectorAll(".menu");
|
|
function onRefChanged(ref, element) {
|
|
if(element.classList.contains("skip"))
|
|
{
|
|
if(!filter.classList.contains("responsible"))
|
|
{
|
|
filter.classList.add("responsible");
|
|
}
|
|
|
|
for(var selector = 0; selector < element.classList.length; ++selector)
|
|
{
|
|
if(element.classList[selector].startsWith("off_"))
|
|
{
|
|
if(!filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.contains("responsible"))
|
|
{
|
|
filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.add("responsible");
|
|
}
|
|
}
|
|
if((element.classList[selector].startsWith("cat_") || element.classList[selector] in filterState))
|
|
{
|
|
if(!filter.querySelector(".filter_mode").classList.add("responsible"))
|
|
{
|
|
filter.querySelector(".filter_mode").classList.add("responsible");
|
|
}
|
|
}
|
|
setTimeout(resetFade, 8000);
|
|
}
|
|
player.jumpToNextMarker();
|
|
return;
|
|
}
|
|
|
|
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
|
|
{
|
|
var SetMenu = 0;
|
|
if (ref !== undefined && ref !== null) {
|
|
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
|
var refs = ref.split(",");
|
|
|
|
for (var i = 0; i < refElements.length; ++i) {
|
|
if (refs.includes(refElements[i].getAttribute("data-id"))) {
|
|
refElements[i].classList.add("current");
|
|
SetMenu = 1;
|
|
} else {
|
|
refElements[i].classList.remove("current");
|
|
}
|
|
}
|
|
if(SetMenu) {
|
|
sourceMenus[MenuIndex].classList.add("current");
|
|
} else {
|
|
sourceMenus[MenuIndex].classList.remove("current");
|
|
}
|
|
|
|
} else {
|
|
sourceMenus[MenuIndex].classList.remove("current");
|
|
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
|
for (var i = 0; i < refs.length; ++i) {
|
|
refs[i].classList.remove("current");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|