2017-05-26 23:11:53 +00:00
< 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 >
2017-05-27 22:04:33 +00:00
< 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 = toggle currently focused category and focus next category< br >
X = 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 >
2017-05-26 23:11:53 +00:00
< 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
};
2017-05-27 22:04:33 +00:00
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;
2017-05-26 23:11:53 +00:00
function toggleMenuVisibility(element) {
if(element.classList.contains("visible"))
{
element.classList.remove("visible");
element.parentNode.classList.remove("visible");
focusedElement.classList.remove("focused");
focusedElement = null;
2017-05-27 22:04:33 +00:00
if(focusedIdentifier)
{
focusedIdentifier.classList.remove("focused");
focusedIdentifier = null;
}
2017-05-26 23:11:53 +00:00
}
else
{
for(menuIndex in menuState)
{
menuState[menuIndex].classList.remove("visible");
menuState[menuIndex].parentNode.classList.remove("visible");
2017-05-27 22:04:33 +00:00
if(focusedElement)
{
focusedElement.classList.remove("focused");
}
if(focusedIdentifier)
{
focusedIdentifier.classList.remove("focused");
}
2017-05-26 23:11:53 +00:00
}
element.classList.add("visible");
element.parentNode.classList.add("visible");
if(element.classList.contains("quotes_container"))
{
2017-05-27 22:04:33 +00:00
if(!lastFocusedQuote)
{
lastFocusedQuote = element.querySelectorAll(".ref")[0];
}
focusedElement = lastFocusedQuote;
2017-05-26 23:11:53 +00:00
focusedElement.classList.add("focused");
}
else if(element.classList.contains("references_container"))
{
2017-05-27 22:04:33 +00:00
if(!lastFocusedReference || !lastFocusedIdentifier)
{
lastFocusedReference = element.querySelectorAll(".ref")[0];
lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild;
}
focusedElement = lastFocusedReference;
2017-05-26 23:11:53 +00:00
focusedElement.classList.add("focused");
2017-05-27 22:04:33 +00:00
focusedIdentifier = lastFocusedIdentifier;
2017-05-26 23:11:53 +00:00
focusedIdentifier.classList.add("focused");
}
else if(element.classList.contains("filter_container"))
{
2017-05-27 22:04:33 +00:00
if(!lastFocusedCategory)
{
lastFocusedCategory = element.querySelectorAll(".filter_content")[0];
}
focusedElement = lastFocusedCategory;
2017-05-26 23:11:53 +00:00
focusedElement.classList.add("focused");
}
else if(element.classList.contains("credits_container"))
{
2017-05-27 22:04:33 +00:00
if(!lastFocusedCreditItem)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(element.querySelectorAll(".credit .support")[0])
{
lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
}
else
{
lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0];
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
focusedElement = lastFocusedCreditItem;
2017-05-26 23:11:53 +00:00
focusedElement.classList.add("focused");
}
}
}
function handleKey(key)
{
2017-05-27 22:04:33 +00:00
var gotKey = true;
2017-05-26 23:11:53 +00:00
switch (key) {
case "q": {
toggleMenuVisibility(quotesMenu)
} break;
case "r": {
toggleMenuVisibility(referencesMenu)
} break;
case "f": {
toggleMenuVisibility(filterMenu)
} break;
case "c": {
toggleMenuVisibility(creditsMenu)
} break;
case "Enter": {
2017-05-27 22:04:33 +00:00
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("quotes_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
}
2017-05-26 23:11:53 +00:00
}
}
else
{
console.log("TODO(matt): Implement me, perhaps?\n");
}
} break;
case "o": {
2017-05-27 22:04:33 +00:00
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("references_container"))
2017-05-26 23:11:53 +00:00
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.classList.contains("credit"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.hasAttribute("href"))
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
2017-05-26 23:11:53 +00:00
}
}
2017-05-27 22:04:33 +00:00
} break;
case "w": case "ArrowUp": {
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("quotes_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.previousElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.previousElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.classList.contains("references_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.previousElementSibling & &
focusedElement.previousElementSibling.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.previousElementSibling;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.previousElementSibling)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
2017-05-26 23:11:53 +00:00
}
}
}
} break;
2017-05-27 22:04:33 +00:00
case "s": case "ArrowDown": {
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("quotes_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.nextElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.classList.contains("references_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.nextElementSibling & &
focusedElement.nextElementSibling.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.nextElementSibling;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.nextElementSibling)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
2017-05-26 23:11:53 +00:00
}
}
}
} break;
2017-05-27 22:04:33 +00:00
case "a": case "ArrowLeft": {
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("references_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedIdentifier.previousElementSibling)
{
focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.classList.contains("credit"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.classList.contains("support"))
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.previousElementSibling;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
}
} break;
2017-05-27 22:04:33 +00:00
case "d": case "ArrowRight": {
if(focusedElement)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.parentNode.classList.contains("references_container"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedIdentifier.nextElementSibling)
{
focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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");
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else if(focusedElement.parentNode.classList.contains("credit"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(focusedElement.classList.contains("person") & &
focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.nextElementSibling;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
2017-05-26 23:11:53 +00:00
}
}
} break;
case "x": {
2017-05-27 22:04:33 +00:00
if(focusedElement & & focusedElement.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
filterItemToggle(focusedElement);
2017-05-26 23:11:53 +00:00
if(focusedElement.nextElementSibling & &
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "X": {
2017-05-27 22:04:33 +00:00
if(focusedElement & & focusedElement.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
filterItemToggle(focusedElement);
2017-05-26 23:11:53 +00:00
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;
2017-05-27 22:04:33 +00:00
case "v": {
if(focusedElement & & focusedElement.classList.contains("filter_content"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
invertFilter(focusedElement)
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
} break;
case "V": {
resetFilter();
2017-05-26 23:11:53 +00:00
} break;
case 'N':
case 'D':
case 'S': {
player.jumpToNextMarker();
} break;
case 'P':
case 'A':
case 'W': {
player.jumpToPrevMarker();
} break;
2017-05-27 22:04:33 +00:00
default: {
gotKey = false;
} break;
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
return gotKey;
2017-05-26 23:11:53 +00:00
}
var player = new Player(document.querySelector(".player_container"), onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keypress", function(ev) {
2017-05-27 22:04:33 +00:00
if(handleKey(ev.key) == true & & focusedElement)
{
ev.preventDefault();
}
2017-05-26 23:11:53 +00:00
});
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();
});
2017-05-27 22:04:33 +00:00
function filterItemToggle(filterItem)
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
var selectedCategory = filterItem.classList[1];
filterState[selectedCategory].off = !filterState[selectedCategory].off;
2017-05-26 23:11:53 +00:00
2017-05-27 22:04:33 +00:00
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 )
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(filterState[selectedCategory].type == "topic")
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
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 )
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(markerCategories[k].classList.contains(selectedCategory))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
markerCategories[k].classList.add("off");
2017-05-26 23:11:53 +00:00
}
}
2017-05-27 22:04:33 +00:00
}
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 )
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
{
Skipping = 0;
}
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
if(Skipping)
2017-05-26 23:11:53 +00:00
{
testMarkers[j].classList.add("skip");
}
2017-05-27 22:04:33 +00:00
}
}
}
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 )
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(markerCategories[k].classList.contains(selectedCategory))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
markerCategories[k].classList.remove("off");
2017-05-26 23:11:53 +00:00
}
}
2017-05-27 22:04:33 +00:00
}
else
{
testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add(selectedCategory);
}
2017-05-26 23:11:53 +00:00
2017-05-27 22:04:33 +00:00
Skipping = 0;
if(filterMode == "inclusive")
{
testMarkers[j].classList.remove("skip");
2017-05-26 23:11:53 +00:00
}
2017-05-27 22:04:33 +00:00
else
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length ; + + k )
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
if(markerClasses[k].startsWith("off_"))
2017-05-26 23:11:53 +00:00
{
2017-05-27 22:04:33 +00:00
Skipping = 1;
2017-05-26 23:11:53 +00:00
}
}
2017-05-27 22:04:33 +00:00
if(!Skipping)
2017-05-26 23:11:53 +00:00
{
testMarkers[j].classList.remove("skip");
}
}
}
2017-05-27 22:04:33 +00:00
}
}
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);
2017-05-26 23:11:53 +00:00
});
}
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 >
