390 lines
20 KiB
HTML
390 lines
20 KiB
HTML
<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">
|
|
<script type="text/javascript" src="player.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
Player.initializeYoutube(function() {});
|
|
</script>
|
|
<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>
|
|
<div class="filter_content rendering">
|
|
<span class="icon category rendering"></span><span class="text">rendering</span>
|
|
</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 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">
|
|
<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>
|
|
<div class="progress faded">
|
|
<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 class="progress main">
|
|
<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>
|
|
</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;
|
|
}
|
|
});
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
var filter = document.querySelector(".filter");
|
|
var filterModeElement = filter.querySelector(".filter_mode");
|
|
var filterMode = filterModeElement.classList[1];
|
|
var filterTopics = filter.querySelectorAll(".filter_topics .filter_content");
|
|
var filterTopicsNames = [];
|
|
for(var i = 0; i < filterTopics.length; ++i)
|
|
{
|
|
filterTopicsNames[i] = filterTopics[i].classList[1];
|
|
}
|
|
|
|
filterModeElement.addEventListener("click", function(ev) {
|
|
if(filterMode == "inclusive")
|
|
{
|
|
filterModeElement.classList.remove("inclusive");
|
|
filterModeElement.classList.add("exclusive");
|
|
filterMode = "exclusive";
|
|
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
filterModeElement.classList.remove("exclusive");
|
|
filterModeElement.classList.add("inclusive");
|
|
filterMode = "inclusive";
|
|
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
for (var i = 0; i < filterTopics.length; ++i)
|
|
{
|
|
filterTopics[i].addEventListener("click", function(ev) {
|
|
// NOTE(matt): Useful test
|
|
// if(this.parentNode.className == "filter_topics")
|
|
|
|
var selectedCategory = this.childNodes[1].classList[2];
|
|
|
|
// TODO(matt): Fix this routine! off seems to work, but not skip
|
|
var categorisedMarkers = document.querySelectorAll("." + selectedCategory);
|
|
if(!(this.classList.contains("off")))
|
|
{
|
|
this.classList.add("off");
|
|
var Skipping = 1;
|
|
for (var j = 0; j < categorisedMarkers.length; ++j)
|
|
{
|
|
categorisedMarkers[j].classList.add("off");
|
|
if(filterMode == "exclusive")
|
|
{
|
|
categorisedMarkers[j].parentNode.classList.add("skip");
|
|
}
|
|
else
|
|
{
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
this.classList.remove("off");
|
|
var Skipping = 0;
|
|
for (var j = 0; j < categorisedMarkers.length; ++j)
|
|
{
|
|
categorisedMarkers[j].classList.remove("off");
|
|
if(filterMode == "inclusive")
|
|
{
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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>
|