2017-11-11 00:34:47 +00:00
|
|
|
var menuState = [];
|
2017-12-10 00:17:19 +00:00
|
|
|
var titleBar = document.querySelector(".cineraMenus");
|
2017-11-11 00:34:47 +00:00
|
|
|
var quotesMenu = titleBar.querySelector(".quotes_container");
|
|
|
|
if(quotesMenu)
|
|
|
|
{
|
|
|
|
menuState.push(quotesMenu);
|
2017-12-08 01:04:59 +00:00
|
|
|
var quoteItems = quotesMenu.querySelectorAll(".ref");
|
|
|
|
if(quoteItems)
|
|
|
|
{
|
|
|
|
for(var i = 0; i < quoteItems.length; ++i)
|
|
|
|
{
|
|
|
|
quoteItems[i].addEventListener("mouseenter", function(ev) {
|
|
|
|
mouseOverQuotes(this);
|
|
|
|
})
|
|
|
|
};
|
|
|
|
}
|
2017-11-11 00:34:47 +00:00
|
|
|
var quoteTimecodes = quotesMenu.querySelectorAll(".refs .ref .ref_indices .timecode");
|
|
|
|
for (var i = 0; i < quoteTimecodes.length; ++i) {
|
|
|
|
quoteTimecodes[i].addEventListener("click", function(ev) {
|
|
|
|
if (player) {
|
|
|
|
var time = ev.currentTarget.getAttribute("data-timestamp");
|
|
|
|
mouseSkipToTimecode(player, time, ev);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
var lastFocusedQuote = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
var referencesMenu = titleBar.querySelector(".references_container");
|
|
|
|
if(referencesMenu)
|
|
|
|
{
|
|
|
|
menuState.push(referencesMenu);
|
|
|
|
var referenceItems = referencesMenu.querySelectorAll(".ref");
|
|
|
|
if(referenceItems)
|
|
|
|
{
|
|
|
|
for(var i = 0; i < referenceItems.length; ++i)
|
|
|
|
{
|
|
|
|
referenceItems[i].addEventListener("mouseenter", function(ev) {
|
|
|
|
mouseOverReferences(this);
|
|
|
|
})
|
|
|
|
};
|
|
|
|
var lastFocusedReference = null;
|
|
|
|
var lastFocusedIdentifier = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
var refTimecodes = referencesMenu.querySelectorAll(".refs .ref .ref_indices .timecode");
|
|
|
|
for (var i = 0; i < refTimecodes.length; ++i) {
|
|
|
|
refTimecodes[i].addEventListener("click", function(ev) {
|
|
|
|
if (player) {
|
|
|
|
var time = ev.currentTarget.getAttribute("data-timestamp");
|
|
|
|
mouseSkipToTimecode(player, time, ev);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if(referencesMenu || quotesMenu)
|
|
|
|
{
|
|
|
|
var refSources = titleBar.querySelectorAll(".refs .ref"); // This is for both quotes and refs
|
|
|
|
for (var i = 0; i < refSources.length; ++i) {
|
|
|
|
refSources[i].addEventListener("click", function(ev) {
|
|
|
|
if (player) {
|
|
|
|
player.pause();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var filterMenu = titleBar.querySelector(".filter_container");
|
|
|
|
if(filterMenu)
|
|
|
|
{
|
|
|
|
menuState.push(filterMenu);
|
|
|
|
var lastFocusedCategory = null;
|
|
|
|
var lastFocusedTopic = null;
|
|
|
|
var lastFocusedMedium = null;
|
|
|
|
|
|
|
|
var filter = filterMenu.parentNode;
|
|
|
|
|
|
|
|
var filterModeElement = filter.querySelector(".filter_mode");
|
|
|
|
filterModeElement.addEventListener("click", function(ev) {
|
|
|
|
toggleFilterMode();
|
|
|
|
});
|
|
|
|
|
|
|
|
var filterMode = filterModeElement.classList[1];
|
|
|
|
var filterItems = filter.querySelectorAll(".filter_content");
|
|
|
|
for(var i = 0; i < filterItems.length; ++i)
|
|
|
|
{
|
|
|
|
filterItems[i].addEventListener("mouseenter", function(ev) {
|
|
|
|
navigateFilter(this);
|
|
|
|
})
|
|
|
|
|
|
|
|
filterItems[i].addEventListener("click", function(ev) {
|
|
|
|
filterItemToggle(this);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-17 20:15:00 +00:00
|
|
|
var views = {
|
|
|
|
REGULAR: 1,
|
|
|
|
THEATRE: 2,
|
|
|
|
SUPERTHEATRE: 3,
|
|
|
|
};
|
|
|
|
var cineraProps = {
|
|
|
|
C: null,
|
|
|
|
V: views.REGULAR,
|
|
|
|
Z: null,
|
|
|
|
X: null,
|
|
|
|
Y: null,
|
|
|
|
W: null,
|
|
|
|
H: null,
|
|
|
|
P: null
|
|
|
|
};
|
|
|
|
|
|
|
|
var viewsMenu = titleBar.querySelector(".views");
|
|
|
|
if(viewsMenu)
|
|
|
|
{
|
|
|
|
var viewsContainer = viewsMenu.querySelector(".views_container");
|
|
|
|
viewsMenu.addEventListener("mouseenter", function(ev) {
|
|
|
|
handleMouseOverViewsMenu();
|
|
|
|
});
|
|
|
|
viewsMenu.addEventListener("mouseleave", function(ev) {
|
|
|
|
viewsContainer.style.display = "none";
|
|
|
|
});
|
|
|
|
|
|
|
|
var viewItems = viewsMenu.querySelectorAll(".view");
|
|
|
|
for(var i = 0; i < viewItems.length; ++i)
|
|
|
|
{
|
|
|
|
viewItems[i].addEventListener("click", function(ev) {
|
|
|
|
switch(this.getAttribute("data-id"))
|
|
|
|
{
|
|
|
|
case "regular":
|
|
|
|
case "theatre":
|
|
|
|
{
|
|
|
|
toggleTheatreMode();
|
|
|
|
} break;
|
|
|
|
case "super":
|
|
|
|
{
|
|
|
|
toggleSuperTheatreMode();
|
|
|
|
} break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-11 00:34:47 +00:00
|
|
|
var creditsMenu = titleBar.querySelector(".credits_container");
|
|
|
|
if(creditsMenu)
|
|
|
|
{
|
|
|
|
menuState.push(creditsMenu);
|
|
|
|
var lastFocusedCreditItem = null;
|
|
|
|
|
|
|
|
var creditItems = creditsMenu.querySelectorAll(".person, .support");
|
|
|
|
for(var i = 0; i < creditItems.length; ++i)
|
|
|
|
{
|
|
|
|
creditItems[i].addEventListener("mouseenter", function(ev) {
|
|
|
|
if(this != lastFocusedCreditItem)
|
|
|
|
{
|
|
|
|
lastFocusedCreditItem.classList.remove("focused");
|
|
|
|
if(lastFocusedCreditItem.classList.contains("support"))
|
|
|
|
{
|
|
|
|
setIconLightness(lastFocusedCreditItem.firstChild);
|
|
|
|
}
|
|
|
|
lastFocusedCreditItem = this;
|
|
|
|
focusedElement = lastFocusedCreditItem;
|
|
|
|
focusedElement.classList.add("focused");
|
|
|
|
if(focusedElement.classList.contains("support"))
|
|
|
|
{
|
|
|
|
setIconLightness(focusedElement.firstChild);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
var supportIcons = creditsMenu.querySelectorAll(".support_icon");
|
|
|
|
{
|
|
|
|
for(var i = 0; i < supportIcons.length; ++i)
|
|
|
|
{
|
|
|
|
setIconLightness(supportIcons[i]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
var sourceMenus = titleBar.querySelectorAll(".menu");
|
|
|
|
|
|
|
|
var helpButton = titleBar.querySelector(".help");
|
|
|
|
var helpDocumentation = helpButton.querySelector(".help_container");
|
|
|
|
helpButton.addEventListener("click", function(ev) {
|
|
|
|
handleMouseOverMenu(this, ev.type);
|
|
|
|
})
|
|
|
|
|
|
|
|
var focusedElement = null;
|
|
|
|
var focusedIdentifier = null;
|
|
|
|
|
2017-12-10 00:17:19 +00:00
|
|
|
var playerContainer = document.querySelector(".cineraPlayerContainer")
|
2018-01-15 21:52:24 +00:00
|
|
|
var cinera = playerContainer.parentNode;
|
|
|
|
|
2017-11-11 00:34:47 +00:00
|
|
|
var player = new Player(playerContainer, onRefChanged);
|
|
|
|
window.addEventListener("resize", function() { player.updateSize(); });
|
|
|
|
document.addEventListener("keydown", function(ev) {
|
|
|
|
var key = ev.key;
|
|
|
|
if(ev.getModifierState("Shift") && key == " ")
|
|
|
|
{
|
|
|
|
key = "capitalSpace";
|
|
|
|
}
|
|
|
|
|
|
|
|
if(handleKey(key) == true && focusedElement)
|
|
|
|
{
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
for(var i = 0; i < sourceMenus.length; ++i)
|
|
|
|
{
|
|
|
|
sourceMenus[i].addEventListener("mouseenter", function(ev) {
|
|
|
|
handleMouseOverMenu(this, ev.type);
|
|
|
|
})
|
|
|
|
sourceMenus[i].addEventListener("mouseleave", function(ev) {
|
|
|
|
handleMouseOverMenu(this, ev.type);
|
|
|
|
})
|
|
|
|
};
|
|
|
|
|
|
|
|
var testMarkers = playerContainer.querySelectorAll(".marker");
|
|
|
|
|
|
|
|
window.addEventListener("blur", function(){
|
|
|
|
document.getElementById("focus-warn").style.display = "block";
|
|
|
|
});
|
|
|
|
|
|
|
|
window.addEventListener("focus", function(){
|
|
|
|
document.getElementById("focus-warn").style.display = "none";
|
|
|
|
});
|
|
|
|
|
|
|
|
var colouredItems = playerContainer.querySelectorAll(".author, .member, .project");
|
|
|
|
for(i = 0; i < colouredItems.length; ++i)
|
|
|
|
{
|
|
|
|
setTextLightness(colouredItems[i]);
|
|
|
|
}
|
|
|
|
|
|
|
|
var topicDots = document.querySelectorAll(".category");
|
|
|
|
for(var i = 0; i < topicDots.length; ++i)
|
|
|
|
{
|
|
|
|
setDotLightness(topicDots[i]);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(location.hash) {
|
|
|
|
player.setTime(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash);
|
|
|
|
}
|