394 lines
12 KiB
JavaScript
394 lines
12 KiB
JavaScript
var cinera = document.querySelector(".cinera");
|
|
var baseURL = location.hash ? (location.toString().substr(0, location.toString().length - location.hash.length)) : location;
|
|
|
|
var originalTextContent = {
|
|
TitleQuotes: null,
|
|
TitleReferences: null,
|
|
TitleCredits: null,
|
|
EpisodePrev: null,
|
|
EpisodeNext: null,
|
|
};
|
|
|
|
var menuState = [];
|
|
var titleBar = cinera.querySelector(".cineraMenus");
|
|
var quotesMenu = null;
|
|
var referencesMenu = null;
|
|
var filterMenu = null;
|
|
var viewsMenu = null;
|
|
var linkMenu = null;
|
|
var creditsMenu = null;
|
|
var sourceMenus = null;
|
|
var helpButton = null;
|
|
var helpDocumentation = null;
|
|
|
|
// NOTE(matt): One set of markers per page. There is code to support multiple, which we may want to extend everywhere
|
|
var MarkersContainer = cinera.querySelector(".markers_container");
|
|
|
|
var views = {
|
|
REGULAR: 0,
|
|
THEATRE: 1,
|
|
SUPERTHEATRE: 2,
|
|
};
|
|
|
|
var devices = {
|
|
DESKTOP: 0,
|
|
MOBILE: 1,
|
|
};
|
|
|
|
var CineraProps = {
|
|
C: null,
|
|
V: views.REGULAR,
|
|
Z: null,
|
|
X: null,
|
|
Y: null,
|
|
W: null,
|
|
mW: null,
|
|
H: null,
|
|
mH: null,
|
|
P: null,
|
|
Display: null,
|
|
FlexDirection: null,
|
|
JustifyContent: null,
|
|
O: null,
|
|
IsMobile: IsMobile(),
|
|
ScrollX: null,
|
|
ScrollY: null,
|
|
VODPlatform: null,
|
|
};
|
|
CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
|
|
|
|
if(titleBar)
|
|
{
|
|
quotesMenu = titleBar.querySelector(".quotes_container");
|
|
if(quotesMenu)
|
|
{
|
|
originalTextContent.TitleQuotes = quotesMenu.previousElementSibling.textContent;
|
|
menuState.push(quotesMenu);
|
|
var quoteItems = quotesMenu.querySelectorAll(".ref");
|
|
if(quoteItems)
|
|
{
|
|
for(var i = 0; i < quoteItems.length; ++i)
|
|
{
|
|
quoteItems[i].addEventListener("mouseenter", function(ev) {
|
|
mouseOverQuotes(this);
|
|
})
|
|
};
|
|
}
|
|
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;
|
|
}
|
|
|
|
referencesMenu = titleBar.querySelector(".references_container");
|
|
if(referencesMenu)
|
|
{
|
|
originalTextContent.TitleReferences = referencesMenu.previousElementSibling.textContent;
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
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) {
|
|
ev.stopPropagation();
|
|
toggleFilterMode();
|
|
});
|
|
|
|
var filterMode = filterModeElement.classList[1];
|
|
var filterItems = filter.querySelectorAll(".filter_content");
|
|
|
|
var filterInitState = new Object();
|
|
var filterState = new Object();
|
|
for(var i = 0; i < filterItems.length; ++i)
|
|
{
|
|
filterItems[i].addEventListener("mouseenter", function(ev) {
|
|
navigateFilter(this);
|
|
})
|
|
|
|
filterItems[i].addEventListener("click", function(ev) {
|
|
ev.stopPropagation();
|
|
filterItemToggle(this);
|
|
});
|
|
|
|
var filterItemName = filterItems[i].classList.item(1);
|
|
if(filterItems[i].parentNode.classList.contains("filter_topics"))
|
|
{
|
|
filterInitState[filterItemName] = { "type" : "topic", "off": (filterItems[i].classList.item(2) == "off") };
|
|
filterState[filterItemName] = { "type" : "topic", "off": (filterItems[i].classList.item(2) == "off") };
|
|
}
|
|
else
|
|
{
|
|
filterInitState[filterItemName] = { "type" : "medium", "off": (filterItems[i].classList.item(2) == "off") };
|
|
filterState[filterItemName] = { "type" : "medium", "off": (filterItems[i].classList.item(2) == "off") };
|
|
}
|
|
}
|
|
}
|
|
|
|
viewsMenu = titleBar.querySelector(".views");
|
|
if(viewsMenu && !CineraProps.IsMobile)
|
|
{
|
|
menuState.push(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;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
linkMenu = titleBar.querySelector(".link_container");
|
|
linkTimestamp = true;
|
|
if(linkMenu)
|
|
{
|
|
menuState.push(linkMenu);
|
|
|
|
var linkMode = linkMenu.querySelector("#cineraLinkMode");
|
|
var link = linkMenu.querySelector("#cineraLink");
|
|
|
|
linkMode.addEventListener("click", function(ev) {
|
|
ev.stopPropagation();
|
|
toggleLinkMode(linkMode, link);
|
|
});
|
|
|
|
link.addEventListener("click", function(ev) {
|
|
CopyToClipboard(link);
|
|
toggleMenuVisibility(linkMenu);
|
|
});
|
|
}
|
|
|
|
creditsMenu = titleBar.querySelector(".credits_container");
|
|
if(creditsMenu)
|
|
{
|
|
originalTextContent.TitleCredits = creditsMenu.previousElementSibling.textContent;
|
|
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");
|
|
unfocusSprite(lastFocusedCreditItem);
|
|
if(lastFocusedCreditItem.classList.contains("support"))
|
|
{
|
|
setSpriteLightness(lastFocusedCreditItem.firstChild);
|
|
}
|
|
lastFocusedCreditItem = this;
|
|
focusedElement = lastFocusedCreditItem;
|
|
focusedElement.classList.add("focused");
|
|
focusSprite(focusedElement);
|
|
if(focusedElement.classList.contains("support"))
|
|
{
|
|
setSpriteLightness(focusedElement.firstChild);
|
|
}
|
|
}
|
|
});
|
|
if(creditItems[i].tagName == "A")
|
|
{
|
|
creditItems[i].addEventListener("click", function(ev) {
|
|
if(player)
|
|
{
|
|
player.pause();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
sourceMenus = titleBar.querySelectorAll(".menu");
|
|
|
|
helpButton = titleBar.querySelector(".cineraHelp");
|
|
helpDocumentation = helpButton.querySelector(".help_container");
|
|
BindHelp(helpButton, helpDocumentation);
|
|
}
|
|
|
|
var focusedElement = null;
|
|
var focusedIdentifier = null;
|
|
|
|
var playerContainer = cinera.querySelector(".cineraPlayerContainer")
|
|
var prevEpisode = playerContainer.querySelector(".episodeMarker.prev");
|
|
if(prevEpisode) { originalTextContent.EpisodePrev = prevEpisode.firstChild.textContent; }
|
|
var nextEpisode = playerContainer.querySelector(".episodeMarker.next");
|
|
if(nextEpisode) { originalTextContent.EpisodeNext = nextEpisode.firstChild.textContent; }
|
|
var testMarkers = playerContainer.querySelectorAll(".marker");
|
|
|
|
// NOTE(matt): All the originalTextContent values must be set by this point, because the player's construction may need them
|
|
var MobileCineraContentRuleSelector = ".cinera.mobile .cineraPlayerContainer .markers_container > .markers .marker .cineraContent";
|
|
var MobileCineraContentRule = GetOrSetRule(MobileCineraContentRuleSelector);
|
|
|
|
var MenuContainerRuleSelector = ".cineraMenus > .menu .quotes_container, .cineraMenus > .menu .references_container, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .views_container, .cineraMenus > .menu .link_container, .cineraMenus > .menu .credits_container";
|
|
var MenuContainerRule = GetOrSetRule(MenuContainerRuleSelector);
|
|
|
|
if(CineraProps.IsMobile)
|
|
{
|
|
InitMobileStyle();
|
|
}
|
|
else
|
|
{
|
|
var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - 4;
|
|
MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
|
|
}
|
|
|
|
var player = new Player(playerContainer, onRefChanged);
|
|
|
|
if(CineraProps.IsMobile)
|
|
{
|
|
ConnectMobileControls(player);
|
|
}
|
|
|
|
var cineraViewStorageItem = "cineraView";
|
|
|
|
if(viewsMenu && localStorage.getItem(cineraViewStorageItem))
|
|
{
|
|
toggleTheatreMode();
|
|
}
|
|
|
|
InitScrollEventListener(cinera);
|
|
|
|
function
|
|
DelayedUpdateSize()
|
|
{
|
|
player.updateSize();
|
|
}
|
|
|
|
window.addEventListener("resize", function() {
|
|
if(CineraProps.IsMobile)
|
|
{
|
|
setTimeout(DelayedUpdateSize, 512);
|
|
}
|
|
else
|
|
{
|
|
player.updateSize();
|
|
}
|
|
});
|
|
|
|
window.onorientationchange = function() {
|
|
if(CineraProps.IsMobile)
|
|
{
|
|
setTimeout(DelayedUpdateSize, 512);
|
|
}
|
|
else
|
|
{
|
|
player.updateSize();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", function(ev) {
|
|
var key = ev.key;
|
|
if(ev.getModifierState("Shift") && key == " ")
|
|
{
|
|
key = "capitalSpace";
|
|
}
|
|
|
|
if(!ev.getModifierState("Control") && handleKey(key) == true && focusedElement)
|
|
{
|
|
ev.preventDefault();
|
|
}
|
|
});
|
|
|
|
for(var i = 0; i < sourceMenus.length; ++i)
|
|
{
|
|
sourceMenus[i].addEventListener("mouseenter", function(ev) {
|
|
handleMenuTogglerInteraction(this, ev.type);
|
|
})
|
|
sourceMenus[i].addEventListener("mouseleave", function(ev) {
|
|
handleMenuTogglerInteraction(this, ev.type);
|
|
})
|
|
sourceMenus[i].addEventListener("click", function(ev) {
|
|
handleMenuTogglerInteraction(this, ev.type);
|
|
})
|
|
};
|
|
|
|
var colouredItems = playerContainer.querySelectorAll(".author, .member, .project");
|
|
for(i = 0; i < colouredItems.length; ++i)
|
|
{
|
|
setTextLightness(colouredItems[i]);
|
|
}
|
|
|
|
var topicDots = cinera.querySelectorAll(".category");
|
|
for(var i = 0; i < topicDots.length; ++i)
|
|
{
|
|
setDotLightness(topicDots[i]);
|
|
}
|
|
|
|
var lastTimestampStorageItem = "cineraTimecode_" + window.location.pathname;
|
|
var lastTimestamp;
|
|
if(location.hash) {
|
|
player.setTimeThenPlay(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash);
|
|
}
|
|
else if(lastTimestamp = localStorage.getItem(lastTimestampStorageItem))
|
|
{
|
|
player.setTimeThenPlay(lastTimestamp);
|
|
}
|