Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cinera/cinera.c
View File

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

12
cinera/cinera_player_post.js
View File

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

21
cinera/cinera_player_pre.js
View File

@ -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;
}

85
cinera/cinera_pre.js
View File

@ -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;
}

9
cinera/cinera_search_pre.js
View File

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