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 >
2017-05-31 00:21:21 +00:00
< div class = "help" >
< span > ?< / span >
< div class = "help_container" >
< span class = "help_key" > ?< / span > < h1 > Keyboard Navigation< / h1 >
< h2 > Global Keys< / h2 >
< span class = "help_key" > W< / span > , < span class = "help_key" > A< / span > , < span class = "help_key" > P< / span > / < span class = "help_key" > S< / span > , < span class = "help_key" > D< / span > , < span class = "help_key" > N< / span > < span class = "help_text" > Jump to previous / next marker< / span > < br >
< span class = "help_key" > V< / span > < span class = "help_text" > Reset filter< / span > < span class = "help_key" > z< / span > < span class = "help_text" > Toggle filter mode between "inclusive" and "exclusive"< / span >
< h2 > Menu toggling< / h2 >
< span class = "help_key" > q< / span > < span class = "help_text" > Quotes< / span >
< span class = "help_key" > r< / span > < span class = "help_text" > References< / span >
< span class = "help_key" > f< / span > < span class = "help_text" > Filter< / span >
< span class = "help_key" > c< / span > < span class = "help_text" > Credits< / span >
< h2 > Movement< / h2 >
< div class = "help_paragraph" >
< div class = "key_block" >
< div class = "key_column" style = "flex-grow: 1" >
< span class = "help_key" > a< / span >
< / div >
< div class = "key_column" style = "flex-grow: 2" >
< span class = "help_key" > w< / span > < br >
< span class = "help_key" > s< / span >
< / div >
< div class = "key_column" style = "flex-grow: 1" >
< span class = "help_key" > d< / span >
< / div >
< / div >
< span class = "help_text" > /< / span >
< div class = "key_block" >
< div style = "flex-grow: 1" >
< span class = "help_key" > ←< / span >
< / div >
< div style = "flex-grow: 2" >
< span class = "help_key" > ↑< / span > < br >
< span class = "help_key" > ↓< / span >
< / div >
< div style = "flex-grow: 1" >
< span class = "help_key" > →< / span >
< / div >
< / div >
< span class = "help_text" > /< / span >
< div class = "key_block" >
< span class = "help_key" > h< / span >
< span class = "help_key" > j< / span >
< span class = "help_key" > k< / span >
< span class = "help_key" > l< / span >
< / div >
< / div >
< br >
< h2 > Quotes and References Menus< / h2 >
< span style = "width: auto" class = "help_key" > Enter< / span > < span class = "help_text" > Jump to timecode< / span > < br >
< h2 > References and Credits Menus< / h2 >
< span class = "help_key" > o< / span > < span class = "help_text" > Open URL (in new tab)< / span >
< h2 > Filter Menu< / h2 >
< span class = "help_key" > x< / span > , < span style = "width: auto" class = "help_key" > Space< / span > < span class = "help_text" > Toggle category and focus next< / span > < br >
< span class = "help_key" > X< / span > , < span style = "width: auto; margin-right: 0px" class = "help_key" > Shift< / span > < span style = "width: auto" class = "help_key" > Space< / span > < span class = "help_text" > Toggle category and focus previous< / span > < br >
< span class = "help_key" > v< / span > < span class = "help_text" > Invert topics / media as per focus< / span >
< h2 > Credits Menu< / h2 >
< span style = "width: auto" class = "help_key" > Enter< / span > , < span class = "help_key" > o< / span > < span class = "help_text" > Open URL (in new tab)< / span > < br >
< / div >
< / div >
2017-05-26 23:11:53 +00:00
< / 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 >
< script >
2017-05-31 00:21:21 +00:00
var menuState = [];
// TODO(matt): Do all this conditional stuff in hmml_to_html.c
2017-05-26 23:11:53 +00:00
var quotesMenu = document.querySelector(".quotes_container");
2017-05-31 00:21:21 +00:00
if(quotesMenu)
{
menuState.push(quotesMenu);
var quoteItems = quotesMenu.querySelectorAll(".ref");
for(var i = 0; i < quoteItems.length ; + + i )
{
quoteItems[i].addEventListener("mouseenter", function(ev) {
mouseOverQuotes(this);
})
};
var lastFocusedQuote = null;
}
2017-05-26 23:11:53 +00:00
var referencesMenu = document.querySelector(".references_container");
2017-05-31 00:21:21 +00:00
if(referencesMenu)
{
menuState.push(referencesMenu);
var referenceItems = referencesMenu.querySelectorAll(".ref");
for(var i = 0; i < referenceItems.length ; + + i )
{
referenceItems[i].addEventListener("mouseenter", function(ev) {
mouseOverReferences(this);
})
};
var lastFocusedReference = null;
var lastFocusedIdentifier = null;
}
2017-05-26 23:11:53 +00:00
var filterMenu = document.querySelector(".filter_container");
2017-05-31 00:21:21 +00:00
if(filterMenu)
{
menuState.push(filterMenu);
var lastFocusedCategory = null;
var lastFocusedTopic = null;
var lastFocusedMedium = null;
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
var filter = filterMenu.parentNode;
2017-05-27 22:04:33 +00:00
2017-05-31 00:21:21 +00:00
var filterModeElement = filter.querySelector(".filter_mode");
filterModeElement.addEventListener("click", function(ev) {
toggleFilterMode();
});
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
var filterMode = filterModeElement.classList[1];
var filterItems = filter.querySelectorAll(".filter_content");
for(var i = 0; i < filterItems.length ; + + i )
2017-05-26 23:11:53 +00:00
{
2017-05-31 00:21:21 +00:00
filterItems[i].addEventListener("mouseenter", function(ev) {
navigateFilter(this);
})
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
filterItems[i].addEventListener("click", function(ev) {
filterItemToggle(this);
});
2017-05-26 23:11:53 +00:00
}
2017-05-31 00:21:21 +00:00
// TODO(matt): Generate this
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 },
};
2017-05-26 23:11:53 +00:00
}
2017-05-31 00:21:21 +00:00
var creditsMenu = document.querySelector(".credits_container");
if(creditsMenu)
2017-05-26 23:11:53 +00:00
{
2017-05-31 00:21:21 +00:00
menuState.push(creditsMenu);
var lastFocusedCreditItem = null;
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
var creditItems = creditsMenu.querySelectorAll(".person, .support");
for(var i = 0; i < creditItems.length ; + + i )
{
creditItems[i].addEventListener("mouseenter", function(ev) {
if(this != lastFocusedCreditItem)
2017-05-26 23:11:53 +00:00
{
2017-05-31 00:21:21 +00:00
lastFocusedCreditItem.classList.remove("focused");
lastFocusedCreditItem = this;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
2017-05-26 23:11:53 +00:00
}
2017-05-31 00:21:21 +00:00
})
}
}
2017-05-27 22:04:33 +00:00
2017-05-31 00:21:21 +00:00
var sourceMenus = document.querySelectorAll(".menu");
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
var helpButton = document.querySelector(".help");
var helpDocumentation = helpButton.querySelector(".help_container");
helpButton.addEventListener("click", function(ev) {
handleMouseOverMenu(this, ev.type);
})
2017-05-26 23:11:53 +00:00
2017-05-31 00:21:21 +00:00
var focusedElement = null;
var focusedIdentifier = null;
2017-05-26 23:11:53 +00:00
var player = new Player(document.querySelector(".player_container"), onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); });
2017-05-30 00:07:13 +00:00
document.addEventListener("keydown", function(ev) {
var key = ev.key;
if(ev.getModifierState("Shift") & & key == " ")
{
key = "capitalSpace";
}
if(handleKey(key) == true & & focusedElement)
2017-05-27 22:04:33 +00:00
{
ev.preventDefault();
}
2017-05-26 23:11:53 +00:00
});
2017-05-31 00:21:21 +00:00
for(var i = 0; i < sourceMenus.length ; + + i )
2017-05-30 00:07:13 +00:00
{
2017-05-31 00:21:21 +00:00
sourceMenus[i].addEventListener("mouseenter", function(ev) {
handleMouseOverMenu(this, ev.type);
2017-05-30 00:07:13 +00:00
})
2017-05-31 00:21:21 +00:00
sourceMenus[i].addEventListener("mouseleave", function(ev) {
handleMouseOverMenu(this, ev.type);
2017-05-30 00:07:13 +00:00
})
};
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");
2017-05-31 00:21:21 +00:00
mouseSkipToTimecode(player, time, ev);
2017-05-26 23:11:53 +00:00
}
});
}
2017-05-31 00:21:21 +00:00
var refSources = document.querySelectorAll(".refs .ref"); // This is for both quotes and refs
2017-05-26 23:11:53 +00:00
for (var i = 0; i < refSources.length ; + + i ) {
refSources[i].addEventListener("click", function(ev) {
if (player) {
player.pause();
}
});
}
2017-05-31 00:21:21 +00:00
var testMarkers = document.querySelectorAll(".marker");
2017-05-26 23:11:53 +00:00
< / script >
< / body >
< / html >
