From 806c9feba8afb800bbe2a2f613889dcd398e2cda Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Fri, 12 Feb 2021 23:48:02 +0000 Subject: [PATCH] cinera.web: Fix sizing and CSS rule setting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Max{Height,Width}OfElement() should now produce saner values • Video can now resize upon orientation change on mobile • Search grid now sizes to the correct area • CSS rule setting only tries to touch local stylesheets --- cinera/cinera.c | 2 +- cinera/cinera_player_post.js | 12 +++-- cinera/cinera_player_pre.js | 21 +++++---- cinera/cinera_pre.js | 85 +++++++++++++++++++++--------------- cinera/cinera_search_pre.js | 9 ++-- 5 files changed, 78 insertions(+), 51 deletions(-) diff --git a/cinera/cinera.c b/cinera/cinera.c index b9c6fe2..e9aa9bc 100644 --- a/cinera/cinera.c +++ b/cinera/cinera.c @@ -23,7 +23,7 @@ typedef struct version CINERA_APP_VERSION = { .Major = 0, .Minor = 8, - .Patch = 8 + .Patch = 9 }; #include // NOTE(matt): varargs diff --git a/cinera/cinera_player_post.js b/cinera/cinera_player_post.js index e6511b5..720e34c 100644 --- a/cinera/cinera_player_post.js +++ b/cinera/cinera_player_post.js @@ -54,7 +54,7 @@ var CineraProps = { ScrollX: null, ScrollY: null, }; -CineraProps.O = GetRealOrientation(CineraProps.IsMobile); +CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile); if(titleBar) { @@ -306,10 +306,16 @@ if(viewsMenu && localStorage.getItem(cineraViewStorageItem)) InitScrollEventListener(cinera); +function +DelayedUpdateSize() +{ + player.updateSize(); +} + window.addEventListener("resize", function() { if(CineraProps.IsMobile) { - setTimeout(player.updateSize, 512); + setTimeout(DelayedUpdateSize, 512); } else { @@ -320,7 +326,7 @@ window.addEventListener("resize", function() { window.onorientationchange = function() { if(CineraProps.IsMobile) { - setTimeout(player.updateSize, 512); + setTimeout(DelayedUpdateSize, 512); } else { diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js index 466881e..aa37dd5 100644 --- a/cinera/cinera_player_pre.js +++ b/cinera/cinera_player_pre.js @@ -293,13 +293,14 @@ ComputeAndSetTallest(Selector, Elements, UnhidingClass) return Result; } -function ApplyMobileStyle(player) +function ApplyMobileStyle(VideoContainer) { var WindowDim = DeriveReliableWindowDimensions(); - var MaxWidth = cinera.offsetWidth; + var MaxWidth = MaxWidthOfElement(cinera, WindowDim); var MaxHeight = MaxHeightOfElement(cinera, WindowDim); var IndicesBar = playerContainer.querySelector(".markers_container"); + var Markers = IndicesBar.querySelector(".markers"); var CineraContentWidth = MaxWidth; @@ -340,8 +341,13 @@ function ApplyMobileStyle(player) Markers.style.width = CineraContentWidth + "px"; } - var VideoMaxDimX = CineraContentWidth; - var VideoMaxDimY = MaxHeight - HeightOfTallestIndex; + var VideoMaxDimX = MaxWidth; + var VideoMaxDimY = MaxHeight; + var MinimumVideoHeight = 32; + if(MaxHeight - HeightOfTallestIndex > MinimumVideoHeight) + { + VideoMaxDimY -= HeightOfTallestIndex; + } switch(CineraProps.O) { @@ -377,8 +383,6 @@ function ApplyMobileStyle(player) VideoDimY = Math.floor(VideoDimYFromMaxX); } - var VideoContainer = cinera.querySelector(".video_container"); - VideoContainer.style.width = VideoDimX + "px"; VideoContainer.style.height = VideoDimY + "px"; @@ -461,7 +465,8 @@ function InitMobileStyle() cinera.classList.add("mobile"); IconifyMenuTogglers(); InitMobileControls(); - ApplyMobileStyle(); + var VideoContainer = cinera.querySelector(".video_container"); + ApplyMobileStyle(VideoContainer); } function @@ -502,7 +507,7 @@ Player.prototype.updateSize = function() { } else { - ApplyMobileStyle(); + ApplyMobileStyle(this.videoContainer); width = this.videoContainer.offsetWidth; height = this.videoContainer.offsetHeight; } diff --git a/cinera/cinera_pre.js b/cinera/cinera_pre.js index 9f449fb..bdbf988 100644 --- a/cinera/cinera_pre.js +++ b/cinera/cinera_pre.js @@ -259,16 +259,37 @@ GetRulesOfStyleSheetIndex(Index) return Result; } +function +GetLocalStyleSheet() +{ + var Result; + var StyleSheets = document.styleSheets; + for(var StyleSheetIndex = StyleSheets.length - 1; StyleSheetIndex >= 0; --StyleSheetIndex) + { + var This = StyleSheets[StyleSheetIndex]; + if(This.href.includes(location.hostname) && !This.disabled) + { + Result = This; + break; + } + } + return Result; +} + function GetOrSetRule(SelectorText) { var Result = GetRule(SelectorText); if(Result === undefined) { - var StyleSheet = document.styleSheets[0]; - var RuleIndex = StyleSheet.insertRule(SelectorText + "{}", StyleSheet.length - 1); - var Rules = GetRulesOfStyleSheetIndex(0); - Result = Rules[RuleIndex]; + var StyleSheet = GetLocalStyleSheet(); + if(StyleSheet) + { + var cssRuleCode = document.all ? 'rules' : 'cssRules'; // account for IE and FF + var Rules = StyleSheet[cssRuleCode]; + var RuleIndex = StyleSheet.insertRule(SelectorText + "{}", StyleSheet.length - 1); + Result = Rules[RuleIndex]; + } } return Result; } @@ -379,32 +400,18 @@ function getElementYOffsetFromPage(el) { function MaxWidthOfElement(Element, WindowDim) { + // NOTE(matt): This works fine for Elements whose natural max width fills the whole line, i.e. block elements and children + // thereof. To support inline elements, we'll need to mirror MaxHeightOfElement() and may as well roll the two + // functions into one. var Result = 0; + var OriginalWidth = Element.style.width; Element.style.width = "100%"; - var Max = parseInt(window.getComputedStyle(Element).width); - Element.style.width = "unset"; - var Default = parseInt(window.getComputedStyle(Element).width); + var NaturalMax = Element.offsetWidth; + Element.style.width = OriginalWidth; var InnerWidth = WindowDim ? WindowDim.X : document.body.clientWidth; - - if(Max > InnerWidth || Max == Default) - { - Result = InnerWidth; - - } - else - { - Result = Max; - } - - Element.style.width = Result + "px"; - if(Element.scrollWidth > Element.clientWidth) - { - Result = Element.clientWidth; - } - - Element.style.width = OriginalWidth; + Result = Math.min(NaturalMax, InnerWidth); return Result; } @@ -412,30 +419,36 @@ function MaxHeightOfElement(Element, WindowDim) { var Result = 0; + + var DisplaySettings = []; + for(var i = 0; i < Element.children.length; ++i) + { + var Child = Element.children[i]; + DisplaySettings.push(Child.style.display); + Child.style.display = "none"; + } + var OriginalHeight = Element.style.height; Element.style.height = "100%"; - var Max = parseInt(window.getComputedStyle(Element).height); - Element.style.height = "unset"; - var Default = parseInt(window.getComputedStyle(Element).height); + var NaturalMax = Element.offsetHeight; + Element.style.height = OriginalHeight; var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight; - - if(Max > InnerHeight || Max == Default) + if(NaturalMax > 0) { - Result = InnerHeight; + Result = Math.min(NaturalMax, InnerHeight); } else { - Result = Max; + Result = InnerHeight; } - Element.style.height = Result + "px"; - if(Element.scrollHeight > Element.clientHeight) + for(var i = 0; i < Element.children.length; ++i) { - Result = Element.clientHeight; + var Child = Element.children[i]; + Child.style.display = DisplaySettings.shift(); } - Element.style.height = OriginalHeight; return Result; } diff --git a/cinera/cinera_search_pre.js b/cinera/cinera_search_pre.js index 4f9ec40..1f57a1e 100644 --- a/cinera/cinera_search_pre.js +++ b/cinera/cinera_search_pre.js @@ -2955,6 +2955,7 @@ ComputeOptimalGridSize() var GridWasHidden = Nav.GridContainer.classList.contains("hidden"); if(GridWasHidden) { + Nav.List.classList.add("hidden"); Nav.GridContainer.classList.remove("hidden"); } if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT)) @@ -2965,14 +2966,16 @@ ComputeOptimalGridSize() { DimReduction.Y += Nav.Controls.GridTraversal.Container.offsetHeight; } + + var MaxWidth = MaxWidthOfElement(Nav.GridContainer, WindowDim) - DimReduction.X; + var MaxHeight = MaxHeightOfElement(Nav.GridContainer, WindowDim) - DimReduction.Y; + if(GridWasHidden) { Nav.GridContainer.classList.add("hidden"); + Nav.List.classList.remove("hidden"); } - var MaxWidth = MaxWidthOfElement(Nav.Nexus, WindowDim) - DimReduction.X; - var MaxHeight = MaxHeightOfElement(Nav.Nexus, WindowDim) - DimReduction.Y; - var BodyStyle = window.getComputedStyle(document.body); if(Nav.Nexus.parentNode == document.body) {