cinera.web: Fix sizing and CSS rule setting

• 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

@@ -23,7 +23,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 8,
-    .Patch = 8
+    .Patch = 9
 };
 
 #include <stdarg.h> // NOTE(matt): varargs

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
     {

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 VideoMaxDimX = MaxWidth;
-    var VideoMaxDimY = MaxHeight - HeightOfTallestIndex;
+    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;
     }

cinera/cinera_pre.js

@@ -259,17 +259,38 @@ 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 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);
-        var Rules = GetRulesOfStyleSheetIndex(0);
             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);
+    var NaturalMax = Element.offsetWidth;
-    Element.style.width = "unset";
+    Element.style.width = OriginalWidth;
-    var Default = parseInt(window.getComputedStyle(Element).width);
 
     var InnerWidth = WindowDim ? WindowDim.X : document.body.clientWidth;
-
+    Result = Math.min(NaturalMax, InnerWidth);
-    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;
     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);
+    var NaturalMax = Element.offsetHeight;
-    Element.style.height = "unset";
+    Element.style.height = OriginalHeight;
-    var Default = parseInt(window.getComputedStyle(Element).height);
 
     var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight;
-
+    if(NaturalMax > 0)
-    if(Max > InnerHeight || Max == Default)
     {
-        Result = InnerHeight;
+        Result = Math.min(NaturalMax, InnerHeight);
     }
     else
     {
-        Result = Max;
+        Result = InnerHeight;
     }
 
-    Element.style.height = Result + "px";
+    for(var i = 0; i < Element.children.length; ++i)
-    if(Element.scrollHeight > Element.clientHeight)
     {
-        Result = Element.clientHeight;
+        var Child = Element.children[i];
+        Child.style.display = DisplaySettings.shift();
     }
 
-    Element.style.height = OriginalHeight;
     return Result;
 }
 

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)
     {