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
This commit is contained in:
Matt Mascarenhas 2021-02-12 23:48:02 +00:00
parent b6fff3cc24
commit 806c9feba8
5 changed files with 78 additions and 51 deletions

View File

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

View File

@ -54,7 +54,7 @@ var CineraProps = {
ScrollX: null, ScrollX: null,
ScrollY: null, ScrollY: null,
}; };
CineraProps.O = GetRealOrientation(CineraProps.IsMobile); CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
if(titleBar) if(titleBar)
{ {
@ -306,10 +306,16 @@ if(viewsMenu && localStorage.getItem(cineraViewStorageItem))
InitScrollEventListener(cinera); InitScrollEventListener(cinera);
function
DelayedUpdateSize()
{
player.updateSize();
}
window.addEventListener("resize", function() { window.addEventListener("resize", function() {
if(CineraProps.IsMobile) if(CineraProps.IsMobile)
{ {
setTimeout(player.updateSize, 512); setTimeout(DelayedUpdateSize, 512);
} }
else else
{ {
@ -320,7 +326,7 @@ window.addEventListener("resize", function() {
window.onorientationchange = function() { window.onorientationchange = function() {
if(CineraProps.IsMobile) if(CineraProps.IsMobile)
{ {
setTimeout(player.updateSize, 512); setTimeout(DelayedUpdateSize, 512);
} }
else else
{ {

View File

@ -293,13 +293,14 @@ ComputeAndSetTallest(Selector, Elements, UnhidingClass)
return Result; return Result;
} }
function ApplyMobileStyle(player) function ApplyMobileStyle(VideoContainer)
{ {
var WindowDim = DeriveReliableWindowDimensions(); var WindowDim = DeriveReliableWindowDimensions();
var MaxWidth = cinera.offsetWidth; var MaxWidth = MaxWidthOfElement(cinera, WindowDim);
var MaxHeight = MaxHeightOfElement(cinera, WindowDim); var MaxHeight = MaxHeightOfElement(cinera, WindowDim);
var IndicesBar = playerContainer.querySelector(".markers_container"); var IndicesBar = playerContainer.querySelector(".markers_container");
var Markers = IndicesBar.querySelector(".markers"); var Markers = IndicesBar.querySelector(".markers");
var CineraContentWidth = MaxWidth; var CineraContentWidth = MaxWidth;
@ -340,8 +341,13 @@ function ApplyMobileStyle(player)
Markers.style.width = CineraContentWidth + "px"; 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) switch(CineraProps.O)
{ {
@ -377,8 +383,6 @@ function ApplyMobileStyle(player)
VideoDimY = Math.floor(VideoDimYFromMaxX); VideoDimY = Math.floor(VideoDimYFromMaxX);
} }
var VideoContainer = cinera.querySelector(".video_container");
VideoContainer.style.width = VideoDimX + "px"; VideoContainer.style.width = VideoDimX + "px";
VideoContainer.style.height = VideoDimY + "px"; VideoContainer.style.height = VideoDimY + "px";
@ -461,7 +465,8 @@ function InitMobileStyle()
cinera.classList.add("mobile"); cinera.classList.add("mobile");
IconifyMenuTogglers(); IconifyMenuTogglers();
InitMobileControls(); InitMobileControls();
ApplyMobileStyle(); var VideoContainer = cinera.querySelector(".video_container");
ApplyMobileStyle(VideoContainer);
} }
function function
@ -502,7 +507,7 @@ Player.prototype.updateSize = function() {
} }
else else
{ {
ApplyMobileStyle(); ApplyMobileStyle(this.videoContainer);
width = this.videoContainer.offsetWidth; width = this.videoContainer.offsetWidth;
height = this.videoContainer.offsetHeight; height = this.videoContainer.offsetHeight;
} }

View File

@ -259,17 +259,38 @@ GetRulesOfStyleSheetIndex(Index)
return Result; 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 function
GetOrSetRule(SelectorText) GetOrSetRule(SelectorText)
{ {
var Result = GetRule(SelectorText); var Result = GetRule(SelectorText);
if(Result === undefined) 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 RuleIndex = StyleSheet.insertRule(SelectorText + "{}", StyleSheet.length - 1);
var Rules = GetRulesOfStyleSheetIndex(0);
Result = Rules[RuleIndex]; Result = Rules[RuleIndex];
} }
}
return Result; return Result;
} }
@ -379,32 +400,18 @@ function getElementYOffsetFromPage(el) {
function function
MaxWidthOfElement(Element, WindowDim) 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 Result = 0;
var OriginalWidth = Element.style.width; var OriginalWidth = Element.style.width;
Element.style.width = "100%"; 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; 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; return Result;
} }
@ -412,30 +419,36 @@ function
MaxHeightOfElement(Element, WindowDim) MaxHeightOfElement(Element, WindowDim)
{ {
var Result = 0; 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; var OriginalHeight = Element.style.height;
Element.style.height = "100%"; 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; var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight;
if(NaturalMax > 0)
if(Max > InnerHeight || Max == Default)
{ {
Result = InnerHeight; Result = Math.min(NaturalMax, InnerHeight);
} }
else 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; return Result;
} }

View File

@ -2955,6 +2955,7 @@ ComputeOptimalGridSize()
var GridWasHidden = Nav.GridContainer.classList.contains("hidden"); var GridWasHidden = Nav.GridContainer.classList.contains("hidden");
if(GridWasHidden) if(GridWasHidden)
{ {
Nav.List.classList.add("hidden");
Nav.GridContainer.classList.remove("hidden"); Nav.GridContainer.classList.remove("hidden");
} }
if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT)) 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; 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) if(GridWasHidden)
{ {
Nav.GridContainer.classList.add("hidden"); 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); var BodyStyle = window.getComputedStyle(document.body);
if(Nav.Nexus.parentNode == document.body) if(Nav.Nexus.parentNode == document.body)
{ {