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, D: IsMobile() ? devices.MOBILE : devices.DESKTOP, ScrollX: null, ScrollY: null, }; CineraProps.O = GetRealOrientation(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.D !== devices.MOBILE) { 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"); linkAnnotation = 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); } } }) } } 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.D == devices.MOBILE) { InitMobileStyle(); } else { var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - 4; MenuContainerRule.style.maxHeight = MenuMaxHeight + "px"; } var player = new Player(playerContainer, onRefChanged); if(CineraProps.D == devices.MOBILE) { ConnectMobileControls(player); } var cineraViewStorageItem = "cineraView"; if(viewsMenu && localStorage.getItem(cineraViewStorageItem)) { toggleTheatreMode(); } InitScrollEventListener(cinera); window.addEventListener("resize", function() { if(CineraProps.IsMobile) { setTimeout(player.updateSize, 512); } else { player.updateSize(); } }); window.onorientationchange = function() { if(CineraProps.IsMobile) { setTimeout(player.updateSize, 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 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); }