var menuState = []; var titleBar = document.querySelector(".cineraMenus"); var quotesMenu = titleBar.querySelector(".quotes_container"); if(quotesMenu) { 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; } 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"); 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) { 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") }; } } } var views = { REGULAR: 1, THEATRE: 2, SUPERTHEATRE: 3, }; var cineraProps = { C: null, V: views.REGULAR, Z: null, X: null, Y: null, W: null, mW: null, H: null, mH: null, P: null }; var viewsMenu = titleBar.querySelector(".views"); if(viewsMenu) { 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; } }); } } var baseURL = location.hash ? (location.toString().substr(0, location.toString().length - location.hash.length)) : location; var linkMenu = titleBar.querySelector(".link_container"); linkAnnotation = true; if(linkMenu) { menuState.push(linkMenu); var linkMode = linkMenu.querySelector("#cineraLinkMode"); var link = linkMenu.querySelector("#cineraLink"); linkMode.addEventListener("click", function(ev) { toggleLinkMode(linkMode, link); }); link.addEventListener("click", function(ev) { CopyToClipboard(link); toggleMenuVisibility(linkMenu); }); } 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) { supportIcons[i].style.backgroundImage = "url(\"" + supportIcons[i].getAttribute("data-sprite") + "\")"; setIconLightness(supportIcons[i]); } } } var sourceMenus = titleBar.querySelectorAll(".menu"); var helpButton = titleBar.querySelector(".help"); window.addEventListener("blur", function(){ helpButton.firstElementChild.innerText = "¿"; helpButton.firstElementChild.title = "Keypresses will not pass through to Cinera because focus is currently elsewhere.\n\nTo regain focus, please press Tab / Shift-Tab (multiple times) or click somewhere related to Cinera other than the video, e.g. this button"; }); window.addEventListener("focus", function(){ helpButton.firstElementChild.innerText = "?"; helpButton.firstElementChild.title = "" }); var helpDocumentation = helpButton.querySelector(".help_container"); helpButton.addEventListener("click", function(ev) { handleMouseOverMenu(this, ev.type); }) var focusedElement = null; var focusedIdentifier = null; var playerContainer = document.querySelector(".cineraPlayerContainer") var cinera = playerContainer.parentNode; var player = new Player(playerContainer, onRefChanged); var cineraViewStorageItem = "cineraView"; if(viewsMenu && localStorage.getItem(cineraViewStorageItem)) { toggleTheatreMode(); } window.addEventListener("resize", function() { 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) { handleMouseOverMenu(this, ev.type); }) sourceMenus[i].addEventListener("mouseleave", function(ev) { handleMouseOverMenu(this, ev.type); }) }; var prevEpisode = playerContainer.querySelector(".episodeMarker.prev"); var nextEpisode = playerContainer.querySelector(".episodeMarker.next"); var testMarkers = playerContainer.querySelectorAll(".marker"); 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]); } var lastAnnotationStorageItem = "cineraTimecode_" + window.location.pathname; var lastAnnotation; if(location.hash) { player.setTime(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash); } else if(lastAnnotation = localStorage.getItem(lastAnnotationStorageItem)) { player.setTime(lastAnnotation); }