2017-05-15 01:11:11 +00:00
< html >
< head >
< meta charset = "UTF-8" >
<!-- Load the player -->
< 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" >
2017-05-16 21:33:22 +00:00
< script type = "text/javascript" src = "player.js" > < / script >
2017-05-15 01:11:11 +00:00
< / head >
< body >
2017-05-16 21:33:22 +00:00
< script >
Player.initializeYoutube(function() {});
< / script >
2017-05-15 01:11:11 +00:00
< div class = "title riscy" >
< span class = "episode_name" > Coloured Nicks< / span >
< div class = "menu" >
< span > Quotes ▼ < / span >
< div class = "mouse_catcher" > < / div >
< div class = "refs" >
< 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" >
< span > References ▼ < / span >
< div class = "mouse_catcher" > < / div >
< div class = "refs" >
< 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" > [3]< / 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 = "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" > [4]< / span > < span class = "time" > 12:34< / span > < / span > < span data-timestamp = "992" class = "timecode" > < span class = "ref_index" > [5]< / span > < span class = "time" > 16:32< / span > < / span >
< / div >
< / a >
< / div >
< / div >
< div class = "menu" >
< span > < img src = "hues_HCL.png" > < / span >
< div class = "filter" >
< div class = "filter_mode inclusive" > Filter mode: < / div >
< div class = "filters" >
< div class = "filter_topics" >
< div class = "filter_title" > Topics< / div >
2017-05-17 00:28:38 +00:00
< div class = "filter_content rendering" >
2017-05-15 01:11:11 +00:00
< span class = "icon category rendering" > < / span > < span class = "text" > rendering< / span >
< / div >
2017-05-17 00:28:38 +00:00
< div class = "filter_content hardware" >
2017-05-15 01:11:11 +00:00
< span class = "icon category hardware" > < / span > < span class = "text" > hardware< / span >
< / div >
2017-05-17 00:28:38 +00:00
< div class = "filter_content mathematics" >
2017-05-15 01:11:11 +00:00
< 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 rant" >
< span class = "icon" > 💢 < / span > < span class = "text" > rant< / span >
< / div >
< div class = "filter_content blackboard" >
< span class = "icon" > 🖌 < / span > < span class = "text" > blackboard< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< span class = "annotator_container" > Annotator: < span class = "annotator" > Miblo< / span > < / span >
< / div >
< div class = "player_container" >
< div class = "video_container" data-videoId = "ug5WkCROkOk" > < / div >
< div class = "markers_container riscy" >
2017-05-15 22:52:03 +00:00
< div data-timestamp = "12" class = "marker cat_rendering cat_hardware" >
< div class = "content" > < span class = "timecode" > 0:12< / span > Basic test with a little longer text< span class = "categories" > < div class = "category rendering" > < / div > < div class = "category hardware" > < / div > < / span > < / div >
2017-05-15 01:11:11 +00:00
< div class = "progress faded" >
2017-05-15 22:52:03 +00:00
< div class = "content" > < span class = "timecode" > 0:12< / span > Basic test with a little longer text< span class = "categories" > < div class = "category rendering" > < / div > < div class = "category hardware" > < / div > < / span > < / div >
2017-05-15 01:11:11 +00:00
< / div >
< div class = "progress main" >
2017-05-15 22:52:03 +00:00
< div class = "content" > < span class = "timecode" > 0:12< / span > Basic test with a little longer text< span class = "categories" > < div class = "category rendering" > < / div > < div class = "category hardware" > < / div > < / span > < / div >
< / div >
< / div >
< div data-timestamp = "60" class = "marker authored cat_rendering cat_hardware research" data-ref = "https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X" >
< 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 > < span class = "categories" > < div class = "category rendering" > < / div > < 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 > < span class = "categories" > < div class = "category rendering" > < / div > < 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 > < span class = "categories" > < div class = "category rendering" > < / div > < div class = "category hardware" > < / div > < / span > < / div >
2017-05-15 01:11:11 +00:00
< / div >
< / div >
< div data-timestamp = "176" class = "marker" 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" 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 > 3< / 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 > 3< / 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 > 3< / 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" data-ref = "https://handmade.network/" >
< div class = "content" > < span class = "timecode" > 12:34< / span > Something about the Handmade.Network< sup > 4< / sup > < / div >
< div class = "progress faded" >
< div class = "content" > < span class = "timecode" > 12:34< / span > Something about the Handmade.Network< sup > 4< / sup > < / div >
< / div >
< div class = "progress main" >
< div class = "content" > < span class = "timecode" > 12:34< / span > Something about the Handmade.Network< sup > 4< / sup > < / div >
< / div >
< / div >
< div data-timestamp = "992" class = "marker" data-ref = "https://handmade.network/" >
< div class = "content" > < span class = "timecode" > 16:32< / span > Something else about the Handmade.Network< sup > 5< / sup > < / div >
< div class = "progress faded" >
< div class = "content" > < span class = "timecode" > 16:32< / span > Something else about the Handmade.Network< sup > 5< / sup > < / div >
< / div >
< div class = "progress main" >
< div class = "content" > < span class = "timecode" > 16:32< / span > Something else about the Handmade.Network< sup > 5< / sup > < / div >
< / div >
< / div >
< / div >
< / div >
< script >
var player = new Player(document.querySelector(".player_container"), onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keypress", function(ev) {
switch (ev.key) {
case 'n':
case 'd':
case 's': {
player.jumpToNextMarker();
} break;
case 'p':
case 'a':
case 'w': {
player.jumpToPrevMarker();
} break;
}
});
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;
}
});
}
2017-05-17 00:28:38 +00:00
function skipTest(filterMode)
{
// This must be called whenever you toggle a filter or the filter mode
// Unfortunately, when you toggle the mode, you'll have to go through and check the state of all the categories
}
2017-05-15 01:11:11 +00:00
2017-05-16 21:33:22 +00:00
var filter = document.querySelector(".filter");
var filterModeElement = filter.querySelector(".filter_mode");
2017-05-15 01:11:11 +00:00
var filterMode = filterModeElement.classList[1];
2017-05-17 00:28:38 +00:00
var filterTopics = filter.querySelectorAll(".filter_topics .filter_content");
var filterTopicsNames = [];
for(var i = 0; i < filterTopics.length ; + + i )
{
filterTopicsNames[i] = filterTopics[i].classList[1];
}
2017-05-15 01:11:11 +00:00
filterModeElement.addEventListener("click", function(ev) {
if(filterMode == "inclusive")
{
filterModeElement.classList.remove("inclusive");
filterModeElement.classList.add("exclusive");
filterMode = "exclusive";
2017-05-17 00:28:38 +00:00
for(var i = 0; i < filterTopicsNames.length ; + + i )
{
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
for(var j = 0; j < testMarkers.length ; + + j )
{
var testCategories = testMarkers[j].querySelectorAll(".category");
for(var l = 0; l < testCategories.length ; + + l )
{
if((testCategories[l].classList.contains("off")) & & !testMarkers[j].classList.contains("skip"))
{
testMarkers[j].classList.add("skip");
}
}
}
}
2017-05-15 01:11:11 +00:00
}
else
{
filterModeElement.classList.remove("exclusive");
filterModeElement.classList.add("inclusive");
filterMode = "inclusive";
2017-05-17 00:28:38 +00:00
for(var i = 0; i < filterTopicsNames.length ; + + i )
{
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
for(var j = 0; j < testMarkers.length ; + + j )
{
var testCategories = testMarkers[j].querySelectorAll(".category");
for(var l = 0; l < testCategories.length ; + + l )
{
if((!testCategories[l].classList.contains("off")) & & testMarkers[j].classList.contains("skip"))
{
testMarkers[j].classList.remove("skip");
}
}
}
}
2017-05-15 01:11:11 +00:00
}
});
for (var i = 0; i < filterTopics.length ; + + i )
{
filterTopics[i].addEventListener("click", function(ev) {
2017-05-15 22:52:03 +00:00
// NOTE(matt): Useful test
// if(this.parentNode.className == "filter_topics")
var selectedCategory = this.childNodes[1].classList[2];
2017-05-15 01:11:11 +00:00
2017-05-17 00:28:38 +00:00
// TODO(matt): Fix this routine! off seems to work, but not skip
2017-05-15 22:52:03 +00:00
var categorisedMarkers = document.querySelectorAll("." + selectedCategory);
2017-05-15 01:11:11 +00:00
if(!(this.classList.contains("off")))
{
this.classList.add("off");
2017-05-17 00:28:38 +00:00
var Skipping = 1;
2017-05-15 22:52:03 +00:00
for (var j = 0; j < categorisedMarkers.length ; + + j )
{
2017-05-17 00:28:38 +00:00
categorisedMarkers[j].classList.add("off");
if(filterMode == "exclusive")
{
categorisedMarkers[j].parentNode.classList.add("skip");
}
else
2017-05-15 22:52:03 +00:00
{
2017-05-17 00:28:38 +00:00
for(var k = 0; k < categorisedMarkers [ j ] . parentNode . childNodes . length ; + + k )
{
if(!categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
{
Skipping = 0;
}
}
if(Skipping)
{
categorisedMarkers[j].parentNode.classList.add("skip");
}
2017-05-15 22:52:03 +00:00
}
}
2017-05-15 01:11:11 +00:00
}
else
{
this.classList.remove("off");
2017-05-17 00:28:38 +00:00
var Skipping = 0;
2017-05-15 22:52:03 +00:00
for (var j = 0; j < categorisedMarkers.length ; + + j )
{
categorisedMarkers[j].classList.remove("off");
2017-05-17 00:28:38 +00:00
if(filterMode == "inclusive")
2017-05-15 22:52:03 +00:00
{
2017-05-17 00:28:38 +00:00
categorisedMarkers[j].parentNode.classList.remove("skip");
}
else
{
for(var k = 0; k < categorisedMarkers [ j ] . parentNode . childNodes . length ; + + k )
{
if(categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
{
Skipping = 1;
}
}
if(Skipping)
{
categorisedMarkers[j].parentNode.classList.add("skip");
}
2017-05-15 22:52:03 +00:00
}
}
2017-05-15 01:11:11 +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 onRefChanged(ref) {
var sourceMenus = document.querySelectorAll(".menu");
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 >