cinera.web: Prevent auto-scroll to hidden elements

The search page could auto-scroll to the top when the grid is not
displayed. This commit fixes that problem by ensuring that the grid
element has a width and height before seeking to auto-scroll to it.

Thanks to Leonardo Serafim Eid for the report

cinera/cinera.c

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

cinera/cinera_pre.js

@@ -63,6 +63,16 @@ GetWindowDim(IsMobile)
     return Result;
 }
 
+function IsVisible(Element, WindowDim) {
+    var BoundingRect = Element.getBoundingClientRect();
+    return ((BoundingRect.top >= 0 && BoundingRect.top <= WindowDim.Y) ||
+        (BoundingRect.bottom >= 0 && BoundingRect.bottom <= WindowDim.Y) ||
+        (BoundingRect.top < 0 && BoundingRect.bottom > WindowDim.Y))
+        && ((BoundingRect.left >= 0 && BoundingRect.left <= WindowDim.X) ||
+        (BoundingRect.right >= 0 && BoundingRect.right <= WindowDim.X) ||
+            (BoundingRect.left < 0 && BoundingRect.right > WindowDim.X));
+}
+
 function
 GetRealOrientation(PreferredLandscape, IsMobile)
 {
@@ -306,6 +316,8 @@ var ScrollerFunction;
 var ScrollCondition;
 
 function ScrollTo(Element, ScrollPos, IsMobile, StickyObscuringElement) {
+    if(Element.offsetWidth && Element.offsetHeight)
+    {
         var ScrolledToTop = ScrollPos == 0;
         var ScrolledToBottom = (window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.scrollHeight;
         if(!ScrolledToTop || !ScrolledToBottom)
@@ -357,6 +369,7 @@ function ScrollTo(Element, ScrollPos, IsMobile, StickyObscuringElement) {
                 });
             }
         }
+    }
 }
 
 function

cinera/cinera_search_pre.js

@@ -553,28 +553,6 @@ function renderResults() {
     }
 }
 
-function IsVisible(el) {
-    var xPos = 0;
-    var yPos = 0;
-    var Height = parseInt(getComputedStyle(el).height);
-
-    while (el) {
-        if (el.tagName == "BODY") {
-            var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
-            var yScroll = el.scrollTop || document.documentElement.scrollTop;
-
-            xPos += (el.offsetLeft - xScroll + el.clientLeft)
-            yPos += (el.offsetTop - yScroll + el.clientTop)
-        } else {
-            xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
-            yPos += (el.offsetTop - el.scrollTop + el.clientTop);
-        }
-
-        el = el.offsetParent;
-    }
-    return ((xPos > 0 && xPos < window.innerWidth) && (yPos > 0 && yPos + Height < window.innerHeight));
-}
-
 function
 InitQuery(QueryElement)
 {
@@ -588,7 +566,7 @@ InitQuery(QueryElement)
         QueryElement.value = decodeURIComponent(initialQuery);
     }
 
-    if(document.hasFocus() && IsVisible(QueryElement)) { QueryElement.focus(); }
+    if(document.hasFocus() && IsVisible(QueryElement, GetWindowDim(CineraProps.IsMobile))) { QueryElement.focus(); }
 }
 
 function