hmml_to_html.c: Keyboard navigation [#24]

Incomplete, but mostly done
This commit is contained in:
Matt Mascarenhas 2017-05-27 00:11:53 +01:00
parent 49f5a9e3ea
commit bfc145e8df
3 changed files with 904 additions and 53 deletions

839
hmml_to_html/mock_keys.html Normal file
View File

@ -0,0 +1,839 @@
<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 &#9660;</span>
<div class="mouse_catcher"></div>
<div class="refs quotes_container">
<span data-id="&#945;" class="ref">
<span class="ref_content">
<div class="source">Quote 1</div>
<div class="ref_title">Stay RISCY, everyone</div>
<div class="quote_byline">&mdash;miotatsu, Wed Nov 16 21:03:26 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="176" class="timecode"><span class="ref_index">[&#945;]</span><span class="time">2:56</span></span>
</div>
</span>
<span data-id="&#946;" 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">&mdash;miotatsu, Fri Dec 2 21:00:05 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="312" class="timecode"><span class="ref_index">[&#946;]</span><span class="time">5:12</span></span>
</div>
</span>
</div>
</div>
<div class="menu references">
<span>References &#9660;</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">&#128396;</span><span class="text">Blackboard</span>
</div>
<div class="filter_content authored">
<span class="icon">&#128490;</span><span class="text">Chat Comment</span>
</div>
<div class="filter_content default">
<span class="icon">&#128430;</span><span class="text">Programming</span>
</div>
<div class="filter_content rant">
<span class="icon">&#128162;</span><span class="text">Rant</span>
</div>
<div class="filter_content research">
<span class="icon">&#128214;</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="&#945;">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
</div>
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="&#946;">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</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>&#946;</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>&#946;</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>
var quotesMenu = document.querySelector(".quotes_container");
var quoteItems = quotesMenu.querySelectorAll(".ref");
var referencesMenu = document.querySelector(".references_container");
var filterMenu = document.querySelector(".filter_container");
var creditsMenu = document.querySelector(".credits_container");
var menuState = {
quotesMenu,
referencesMenu,
filterMenu,
creditsMenu
};
var focusedElement;
var focusedIdentifier;
function toggleMenuVisibility(element) {
if(element.classList.contains("visible"))
{
element.classList.remove("visible");
element.parentNode.classList.remove("visible");
focusedElement.classList.remove("focused");
focusedElement = null;
focusedIdentifier = null;
}
else
{
for(menuIndex in menuState)
{
menuState[menuIndex].classList.remove("visible");
menuState[menuIndex].parentNode.classList.remove("visible");
}
element.classList.add("visible");
element.parentNode.classList.add("visible");
if(element.classList.contains("quotes_container"))
{
focusedElement = element.querySelectorAll(".ref")[0];
focusedElement.classList.add("focused");
}
else if(element.classList.contains("references_container"))
{
focusedElement = element.querySelectorAll(".ref")[0];
focusedElement.classList.add("focused");
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier.classList.add("focused");
}
else if(element.classList.contains("filter_container"))
{
focusedElement = element.querySelectorAll(".filter_content")[0];
focusedElement.classList.add("focused");
}
else if(element.classList.contains("credits_container"))
{
if(element.querySelectorAll(".credit .support")[0])
{
focusedElement = element.querySelectorAll(".credit .support")[0];
}
else
{
focusedElement = element.querySelectorAll(".credit .person")[0];
}
focusedElement.classList.add("focused");
}
}
}
function handleKey(key)
{
switch (key) {
case "q": {
toggleMenuVisibility(quotesMenu)
} break;
case "r": {
toggleMenuVisibility(referencesMenu)
} break;
case "f": {
toggleMenuVisibility(filterMenu)
} break;
case "c": {
toggleMenuVisibility(creditsMenu)
} break;
case "Enter": {
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
var time = focusedIdentifier.getAttribute("data-timestamp");
player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.hasAttribute)
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
}
else
{
console.log("TODO(matt): Implement me, perhaps?\n");
}
} break;
case "o": {
if(focusedElement.parentNode.classList.contains("references_container"))
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.hasAttribute("href"))
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
}
} break;
case "w": {
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
if(focusedElement.previousElementSibling)
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedElement.previousElementSibling)
{
focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.previousElementSibling &&
focusedElement.previousElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.previousElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".support");
}
else
{
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".person");
}
focusedElement.classList.add("focused");
}
}
} break;
case "s": {
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
if(focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.nextElementSibling &&
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.nextElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".support");
}
else
{
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".person");
}
focusedElement.classList.add("focused");
}
}
} break;
case "a": {
if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedIdentifier.previousElementSibling)
{
focusedIdentifier.classList.remove("focused");
focusedIdentifier = focusedIdentifier.previousElementSibling;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_media"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.parentNode.previousElementSibling.children[1];
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("support"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "d": {
if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedIdentifier.nextElementSibling)
{
focusedIdentifier.classList.remove("focused");
focusedIdentifier = focusedIdentifier.nextElementSibling;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_topics"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.parentNode.nextElementSibling.children[1];
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("person") &&
focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "x": {
console.log("TODO(matt): Implement me!\n");
if(focusedElement.classList.contains("filter_content"))
{
focusedElement.classList.toggle("off");
if(focusedElement.nextElementSibling &&
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "X": {
console.log("TODO(matt): Implement me!\n");
if(focusedElement.classList.contains("filter_content"))
{
focusedElement.classList.toggle("off");
filterState[focusedElement.classList[1]].off = !filterState[focusedElement.classList[1]].off;
applyFilter()
if(focusedElement.previousElementSibling &&
focusedElement.previousElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "z": {
toggleFilterMode();
} break;
case "V": {
console.log("TODO(matt): Implement me!\n");
for(category in filterState)
{
filterState[category].off = false;
}
if(filterMode == "exclusive")
{
filterModeElement.classList.remove("exclusive");
filterModeElement.classList.add("inclusive");
filterMode = "inclusive";
}
applyFilter();
} break;
case 'N':
case 'D':
case 'S': {
player.jumpToNextMarker();
} break;
case 'P':
case 'A':
case 'W': {
player.jumpToPrevMarker();
} break;
}
}
var player = new Player(document.querySelector(".player_container"), onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keypress", function(ev) {
handleKey(ev.key);
});
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();
});
// Filter Toggle
var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
for(var i = 0; i < filterCategories.length; ++i)
{
filterCategories[i].addEventListener("click", function(ev) {
var selectedCategory = this.classList[1];
filterState[selectedCategory].off = !filterState[selectedCategory].off;
if(filterState[selectedCategory].off)
{
this.classList.add("off");
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{
if(filterState[selectedCategory].type == "topic")
{
testMarkers[j].classList.remove("cat_" + selectedCategory);
testMarkers[j].classList.add("off_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.add("off");
}
}
}
else
{
testMarkers[j].classList.remove(selectedCategory);
testMarkers[j].classList.add("off_" + selectedCategory);
}
Skipping = 1;
if(filterMode == "exclusive")
{
testMarkers[j].classList.add("skip");
}
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
{
Skipping = 0;
}
}
if(Skipping)
{
testMarkers[j].classList.add("skip");
}
}
}
}
else
{
this.classList.remove("off");
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{
if(filterState[selectedCategory].type == "topic")
{
testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add("cat_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.remove("off");
}
}
}
else
{
testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add(selectedCategory);
}
Skipping = 0;
if(filterMode == "inclusive")
{
testMarkers[j].classList.remove("skip");
}
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k].startsWith("off_"))
{
Skipping = 1;
}
}
if(!Skipping)
{
testMarkers[j].classList.remove("skip");
}
}
}
}
});
}
var 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>

View File

@ -24,16 +24,42 @@
box-shadow: inset 0 0 0 #2A3172; box-shadow: inset 0 0 0 #2A3172;
} }
.title.riscy > .menu.current {
box-shadow: inset 0px 0px 30px #2A3172;
}
.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover,
.title.riscy > .menu > .refs .ref .ref_indices .timecode.focused,
.markers_container.riscy > .marker.current > .content {
color: #2A3172;
}
.title.riscy > .menu > .refs .ref.current .ref_indices .timecode.focused {
color: rgb(246, 178, 26);
}
.title.riscy > .menu:hover, .title.riscy > .menu:hover,
.title.riscy > .menu.visible,
.title.riscy > .menu > .refs .ref:hover, .title.riscy > .menu > .refs .ref:hover,
.title.riscy > .menu > .quotes_container .ref.focused,
.title.riscy > .menu > .references_container .ref.focused,
.title.riscy > .menu > .filter_container .filter_mode:hover, .title.riscy > .menu > .filter_container .filter_mode:hover,
.title.riscy > .menu > .filter_container .filter_content:hover, .title.riscy > .menu > .filter_container .filter_content:hover,
.title.riscy > .menu > .filter_container .filter_content.focused,
.title.riscy > .menu > .credits_container .credit *:hover,
.title.riscy > .menu > .credits_container .credit *.focused,
.markers_container.riscy > .marker:hover > .content { .markers_container.riscy > .marker:hover > .content {
background-color: #FFF8E7; background-color: #FFF8E7;
} }
.title.riscy > .menu.current { .title.riscy > .menu > .refs .ref.current .source,
box-shadow: inset 0px 0px 30px #2A3172; .title.riscy > .menu > .refs .ref.current .quote_byline,
.title.riscy > .menu > .refs .ref.current .ref_indices .timecode.focused:before {
color: #FFF8E7;
} }
.title.riscy > .menu > .refs .ref.current, .title.riscy > .menu > .refs .ref.current,
@ -47,27 +73,16 @@
background-color: rgb(42, 49, 114); background-color: rgb(42, 49, 114);
} }
.title.riscy > .menu > .refs .ref .source,
.title.riscy > .menu > .refs .ref .quote_byline,
.title.riscy > .menu > .filter_container .filter_content.off .text,
.title.riscy > .menu > .credits_container .credit .role {
color: #888;
}
.title.riscy > .menu > .refs .ref.current .source,
.title.riscy > .menu > .refs .ref.current .quote_byline {
color: #FFF8E7;
}
.title.riscy > .menu > .refs .ref.current:hover, .title.riscy > .menu > .refs .ref.current:hover,
.markers_container.riscy > .marker:hover > .faded .content { .markers_container.riscy > .marker:hover > .faded .content {
background-color: rgba(42, 49, 114, 0.7); background-color: rgba(42, 49, 114, 0.7);
} }
/* Regular */ .title.riscy > .menu > .refs .ref .source,
.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover, .title.riscy > .menu > .refs .ref .quote_byline,
.markers_container.riscy > .marker.current > .content { .title.riscy > .menu > .filter_container .filter_content.off .text,
color: #2A3172; .title.riscy > .menu > .credits_container .credit .role {
color: #888;
} }
/* Blackboard */ /* Blackboard */
@ -135,4 +150,3 @@
.title.riscy > .menu > .filter_container .filter_mode.responsible { .title.riscy > .menu > .filter_container .filter_mode.responsible {
animation-name: riscy_fade_background; animation-name: riscy_fade_background;
} }

View File

@ -1,12 +1,16 @@
/* Structure */ /* Structure */
.title { .title,
display: flex; .title > .menu > .refs .ref,
flex-direction: row; .title > .menu > .credits_container .credit {
border-bottom: 1px solid; border-bottom: 1px solid;
display: flex;
text-decoration: none;
} }
.title > * { .title > *,
.title > .menu > .refs .ref,
.title > .menu > .credits_container .credit .person {
padding: 10px; padding: 10px;
} }
@ -60,37 +64,27 @@
} }
.title > .menu:hover .refs, .title > .menu:hover .refs,
.title > .menu.quotes .refs.visible,
.title > .menu.references .refs.visible,
.title > .menu:hover .filter_container, .title > .menu:hover .filter_container,
.title > .menu.filter .filter_container.visible,
.title > .menu.credits .credits_container.visible,
.title > .menu:hover .credits_container { .title > .menu:hover .credits_container {
display: block; display: block;
} }
.title > .menu > .refs .ref, .title > .menu > .refs .ref {
.title > .menu > .refs .filter_container, /* TODO(matt): See what this is! */
.title > .menu > .credits_container .credit {
border-bottom: 1px solid;
padding: 10px;
display: flex;
align-items: center;
text-decoration: none;
}
.title > .menu > .refs .ref,
.title > .menu > .refs .filter_container { /* TODO(matt): See what this is! */
flex-direction: column; flex-direction: column;
} }
.title > .menu > .credits_container .credit {
flex-direction: row;
justify-content: space-between;
}
.title > .menu > .credits_container .credit .person { .title > .menu > .credits_container .credit .person {
text-decoration: none; text-decoration: none;
} }
.title > .menu > .credits_container .credit .support { .title > .menu > .credits_container .credit .support {
margin: 4px; flex-grow: 1;
text-align: right;
padding: 16px;
} }
.title > .menu > .refs .ref:last-child, .title > .menu > .refs .ref:last-child,
@ -98,10 +92,14 @@
border: none; border: none;
} }
.title > .menu > .refs .ref .timecode,
.title > .menu > .filter_container .filter_mode {
font-size: 12px;
}
.title > .menu > .refs .ref .timecode { .title > .menu > .refs .ref .timecode {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 12px;
padding: 0; padding: 0;
} }
@ -115,25 +113,30 @@
width: 100%; width: 100%;
} }
.title > .menu > .refs .ref .quote_byline,
.title > .menu > .refs .ref .source, .title > .menu > .refs .ref .source,
.title > .menu > .refs .ref .quote_byline,
.title > .menu > .filter_container .filter_title,
.title > .menu > .credits_container .credit .role { .title > .menu > .credits_container .credit .role {
font-size: 10px; font-size: 10px;
}
.title > .menu > .refs .ref .source,
.title > .menu > .refs .ref .quote_byline,
.title > .menu > .credits_container .credit .role {
line-height: 8px; line-height: 8px;
} }
.title > .menu > .refs .ref .ref_title { .title > .menu > .refs .ref .quote_byline,
font-style: oblique; .title > .menu > .refs .ref .ref_indices {
width: 100%;
} }
.title > .menu > .refs .ref .quote_byline { .title > .menu > .refs .ref .quote_byline {
text-align: right; text-align: right;
width: 100%;
} }
.title > .menu > .refs .ref .ref_indices { .title > .menu > .refs .ref .ref_indices {
text-align: center; text-align: center;
width: 100%;
} }
.title > .menu > .refs .ref .ref_indices .timecode:first-child::before { .title > .menu > .refs .ref .ref_indices .timecode:first-child::before {
@ -153,7 +156,6 @@
cursor: pointer; cursor: pointer;
border-bottom: 1px solid; border-bottom: 1px solid;
text-align: center; text-align: center;
font-size: 12px;
} }
.title > .menu > .filter_container .filter_mode.exclusive:after { .title > .menu > .filter_container .filter_mode.exclusive:after {
@ -165,7 +167,6 @@
} }
.title > .menu > .filter_container .filter_title { .title > .menu > .filter_container .filter_title {
font-size: 9px;
text-align: center; text-align: center;
} }
@ -186,10 +187,6 @@
margin: 0 4px; margin: 0 4px;
} }
.title > .menu > .filter_container > .filter_media .filter_content .icon {
margin: 0 .5em 0 4px;
}
.title > .menu > .filter_container .filter_content.off .icon { .title > .menu > .filter_container .filter_content.off .icon {
background: transparent; background: transparent;
} }
@ -251,6 +248,7 @@
font-weight: bold; font-weight: bold;
} }
.title > .menu > .refs .ref .ref_title,
.title .filter_content.authored .text, .title .filter_content.authored .text,
.markers_container > .marker.authored { .markers_container > .marker.authored {
font-style: oblique; font-style: oblique;