Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

mock_keys.html: Keyboard Documentation [#24]

This commit is contained in:
Matt Mascarenhas 2017-05-31 01:21:21 +01:00
parent 4eb2f8af1c
commit 00f6dbed51
3 changed files with 1040 additions and 915 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1080
hmml_to_html/mock_keys.html
View File

File diff suppressed because it is too large Load Diff

792
hmml_to_html/player.js
View File

@ -311,3 +311,795 @@ Player.prototype.onYoutubeReady = function() {
};
Player.youtubePlayerCount = 0;
// NOTE(matt): Hereafter is my stuff. Beware!
function toggleMenuVisibility(element) {
if(element.classList.contains("visible"))
{
element.classList.remove("visible");
element.parentNode.classList.remove("visible");
focusedElement.classList.remove("focused");
focusedElement = null;
if(focusedIdentifier)
{
focusedIdentifier.classList.remove("focused");
focusedIdentifier = null;
}
}
else
{
for(menuIndex in menuState)
{
menuState[menuIndex].classList.remove("visible");
menuState[menuIndex].parentNode.classList.remove("visible");
if(focusedElement)
{
focusedElement.classList.remove("focused");
}
if(focusedIdentifier)
{
focusedIdentifier.classList.remove("focused");
}
}
element.classList.add("visible");
element.parentNode.classList.add("visible");
if(element.classList.contains("quotes_container"))
{
if(!lastFocusedQuote)
{
lastFocusedQuote = element.querySelectorAll(".ref")[0];
}
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
else if(element.classList.contains("references_container"))
{
if(!lastFocusedReference || !lastFocusedIdentifier)
{
lastFocusedReference = element.querySelectorAll(".ref")[0];
lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild;
}
focusedElement = lastFocusedReference;
focusedElement.classList.add("focused");
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
else if(element.classList.contains("filter_container"))
{
if(!lastFocusedCategory)
{
lastFocusedCategory = element.querySelectorAll(".filter_content")[0];
}
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
else if(element.classList.contains("credits_container"))
{
if(!lastFocusedCreditItem)
{
if(element.querySelectorAll(".credit .support")[0])
{
lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
}
else
{
lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0];
}
}
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
}
}
function handleKey(key) {
var gotKey = true;
switch (key) {
case "q": {
if(quotesMenu)
{
toggleMenuVisibility(quotesMenu)
}
} break;
case "r": {
if(referencesMenu)
{
toggleMenuVisibility(referencesMenu)
}
} break;
case "f": {
if(filterMenu)
{
toggleMenuVisibility(filterMenu)
}
} break;
case "c": {
if(creditsMenu)
{
toggleMenuVisibility(creditsMenu)
}
} break;
case "Enter": {
if(focusedElement)
{
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)
{
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": case "k": case "ArrowUp": {
if(focusedElement)
{
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
if(focusedElement.previousElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.previousElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
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");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.previousElementSibling &&
focusedElement.previousElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.previousElementSibling;
focusedElement = lastFocusedCategory;
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"))
{
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support");
focusedElement = lastFocusedCreditItem;
}
else
{
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person");
focusedElement = lastFocusedCreditItem;
}
focusedElement.classList.add("focused");
}
}
}
} break;
case "s": case "j": case "ArrowDown": {
if(focusedElement)
{
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
if(focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.nextElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
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");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.nextElementSibling &&
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.nextElementSibling;
focusedElement = lastFocusedCategory;
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"))
{
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support");
focusedElement = lastFocusedCreditItem;
}
else
{
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person");
focusedElement = lastFocusedCreditItem;
}
focusedElement.classList.add("focused");
}
}
}
} break;
case "a": case "h": case "ArrowLeft": {
if(focusedElement)
{
if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedIdentifier.previousElementSibling)
{
focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_media") &&
focusedElement.parentNode.previousElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedMedium = focusedElement;
if(!lastFocusedTopic)
{
lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1];
}
lastFocusedCategory = lastFocusedTopic;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("support"))
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.previousElementSibling;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
}
}
} break;
case "d": case "l": case "ArrowRight": {
if(focusedElement)
{
if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedIdentifier.nextElementSibling)
{
focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_topics") &&
focusedElement.parentNode.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedTopic = focusedElement;
if(!lastFocusedMedium)
{
lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1];
}
lastFocusedCategory = lastFocusedMedium;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("person") &&
focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.nextElementSibling;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
}
}
} break;
case "x": case " ": {
if(focusedElement && focusedElement.classList.contains("filter_content"))
{
filterItemToggle(focusedElement);
if(focusedElement.nextElementSibling &&
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
} break;
case "X": case "capitalSpace": {
if(focusedElement && focusedElement.classList.contains("filter_content"))
{
filterItemToggle(focusedElement);
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": {
if(focusedElement && focusedElement.classList.contains("filter_content"))
{
invertFilter(focusedElement)
}
} break;
case "V": {
resetFilter();
} break;
case "?": {
helpDocumentation.classList.toggle("visible");
}
case 'N':
case 'D':
case 'S': {
player.jumpToNextMarker();
} break;
case 'P':
case 'A':
case 'W': {
player.jumpToPrevMarker();
} break;
default: {
gotKey = false;
} break;
}
return gotKey;
}
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();
}
function filterItemToggle(filterItem) {
var selectedCategory = filterItem.classList[1];
filterState[selectedCategory].off = !filterState[selectedCategory].off;
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)
{
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
{
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)
{
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");
}
}
}
}
}
function resetFilter() {
for(i in filterItems)
{
if(filterItems[i].classList && filterItems[i].classList.contains("off"))
{
filterItemToggle(filterItems[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]);
}
}
}
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");
}
}
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");
}
}
}
}
function navigateFilter(filterItem) {
if(filterItem != lastFocusedCategory)
{
lastFocusedCategory.classList.remove("focused");
if(filterItem.parentNode.classList.contains("filter_topics"))
{
lastFocusedTopic = filterItem;
lastFocusedCategory = lastFocusedTopic;
}
else
{
lastFocusedMedium = filterItem;
lastFocusedCategory = lastFocusedMedium;
}
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
function mouseOverQuotes(quote) {
if(focusedElement && quote != lastFocusedQuote)
{
focusedElement.classList.remove("focused");
lastFocusedQuote = quote;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
}
function mouseOverReferences(reference) {
if(focusedElement && reference != lastFocusedReference)
{
focusedElement.classList.remove("focused")
lastFocusedReference = reference;
}
focusedElement = lastFocusedReference;
focusedElement.classList.add("focused");
var ourIdentifiers = reference.querySelector(".ref_indices").children;
weWereLastFocused = false;
for(var k = 0; k < ourIdentifiers.length; ++k)
{
if(ourIdentifiers[k] == lastFocusedIdentifier)
{
weWereLastFocused = true;
}
}
if(!weWereLastFocused)
{
lastFocusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = reference.querySelector(".ref_indices").firstElementChild;
}
focusedIdentifer = lastFocusedIdentifier;
focusedIdentifer.classList.add("focused");
for(var l = 0; l < ourIdentifiers.length; ++l)
{
ourIdentifiers[l].addEventListener("mouseenter", function(ev) {
if(this != lastFocusedIdentifier)
{
lastFocusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = this;
lastFocusedIdentifier.classList.add("focused");
}
})
}
}
function mouseSkipToTimecode(player, time, ev)
{
player.setTime(parseInt(time, 10));
player.play();
ev.preventDefault();
ev.stopPropagation();
return false;
}
function handleMouseOverMenu(menu, eventType)
{
if(!menu.classList.contains("visible" && eventType == "mouseenter") ||
menu.classList.contains("visible" && eventType == "mouseleave"))
{
if(menu.classList.contains("quotes"))
{
toggleMenuVisibility(quotesMenu);
}
else if(menu.classList.contains("references"))
{
toggleMenuVisibility(referencesMenu);
}
else if(menu.classList.contains("filter"))
{
toggleMenuVisibility(filterMenu);
}
else if(menu.classList.contains("credits"))
{
toggleMenuVisibility(creditsMenu);
}
else if(menu.classList.contains("help"))
{
helpDocumentation.classList.toggle("visible");
}
}
}

83
hmml_to_html/style.css
View File

@ -39,9 +39,90 @@
animation-iteration-count: 1;
}
.help_key {
font-family: Inconsolata;
font-size: 16px;
border: 1px solid;
display: inline-block;
background-color: #111; /* Per project */
border-radius: 4px;
height: 16px;
width: 16px;
padding: 4px;
line-height: 16px;
margin: 2px;
}
.key_block {
display: inline-flex;
align-items: flex-end;
flex-direction: row;
margin-right: 4px;
}
.help_text {
margin: 0 8px 0 2px;
}
.help_container h1 {
display: inline;
margin-left: 4px;
}
.help_container h1:after {
content: "\a";
}
.help_container h2 {
font-size: 16px;
margin-bottom: 8px;
}
.help_paragraph {
display: inline-flex;
align-items: center;
}
.title > .help {
cursor: default;
border: 1px solid;
border-radius: 4px;
height: 6px;
padding: 4px;
width: 6px;
margin: 2px;
font-size: 12px;
font-weight: bold;
line-height: 6px;
text-align: center;
}
.help_grid {
display: inline-flex;
flex-direction: column;
}
.help_container {
background-color: black; /* Per project */
color: #EEE; /* Per project */
display: none;
font-weight: normal;
line-height: 12px;
opacity: 0.9;
padding: 8px;
position: fixed;
right: 612px;
top: 42px;
}
.help_container.visible {
display: block;
}
.title > .menu .refs,
.title > .menu .filter_container,
.title > .menu .credits_container {
.title > .menu .credits_container{
border: 1px solid;
border-top: none;
display: none;