Refactor focus

comic_reader.css

@@ -2,6 +2,9 @@
   --reader-progressbar-height: 0.3em;
 }
 
+.animated {
+    transition: all 1.5s ease;
+}
 
 #reader-frame {
     display: flex;
@@ -19,7 +22,6 @@
     flex-direction: row;
     left: 0px;
     right: 0px;
-    transition: all 1.5s ease;
 }
 
 #reader-pages > img {
@@ -29,17 +31,33 @@
     flex-shrink: 0;
 }
 
-#focus-overlay, #focus-overlay * {
+.fill {
-    transition: all 1.5s ease;
-}
-
-#focus-overlay, #nav-controls {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    
+}
+
+.obscured {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.grow {
+    flex: 1
+}
+
+#nav-controls {
     display: grid;
     
     grid-template-areas: 
@@ -48,11 +66,6 @@
         "left bottom right";
 }
 
-#focus-overlay {
-    grid-template-columns: 50% auto 50%;
-    grid-template-rows: 50% auto 50%;
-}
-
 #nav-controls {
     grid-template-columns: 33% 0 1fr;
     grid-template-rows: auto;
@@ -82,11 +95,7 @@
     grid-area: bottom;
 }
 
-#focus-overlay > *:not(.center) {
+.focus {
-    background-color: rgba(0, 0, 0, 0.85);
-}
-
-#focus-overlay > .center {
     box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
 }
 

comic_reader.js

@@ -24,7 +24,8 @@ DELAY_BEFORE_HIDDING_CONTROLS = 4000;
 READER_FRAME = document.getElementById("reader-frame")
 READER_CONTENT_FRAME = document.getElementById("reader-content-frame")
 READER_PAGES = document.getElementById("reader-pages")
-FOCUS_OVERLAY = document.getElementById("focus-overlay")
+FOCUS_OVERLAY_HEIGHT = document.getElementById("focus-overlay-height")
+FOCUS_OVERLAY_WIDTH = document.getElementById("focus-overlay-width")
 HELP_CONTROLS = document.getElementById("help-controls")
 PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
 PROGRESS_BAR = document.getElementById("reader-progress-bar")
@@ -234,19 +235,13 @@ function moveReaderDisplayToZoom(index) {
 }
 
 function updateFocusByWidth(width){
-    
+    FOCUS_OVERLAY_WIDTH.style.width = (width / READER_CONTENT_FRAME.clientWidth * 100) + "%"
-    side_width = (READER_CONTENT_FRAME.clientWidth - width) / 2
+    FOCUS_OVERLAY_HEIGHT.style.height = "100%"
-    
-    FOCUS_OVERLAY.style.gridTemplateColumns = side_width +"px auto " + side_width + "px"
-    FOCUS_OVERLAY.style.gridTemplateRows = "0px auto 0px";
 }
 
 function updateFocusByHeight(height){
-    
+    FOCUS_OVERLAY_WIDTH.style.width = "100%"
-    side_width = (READER_CONTENT_FRAME.clientHeight - height) / 2
+    FOCUS_OVERLAY_HEIGHT.style.height = (height / READER_CONTENT_FRAME.clientHeight * 100) + "%"
-    
-    FOCUS_OVERLAY.style.gridTemplateRows = side_width +"px auto " + side_width + "px"
-    FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
 }
 
 function toggleViewMode() {

comic_reader_test_high_res.html

@@ -13,7 +13,7 @@
         <div id="reader-frame">
             <div id="reader-content-frame">
             
-                <div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
+                <div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
                     <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
                     <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
                     <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
@@ -28,15 +28,17 @@
                     <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
                 </div>
                 
-                <div id="focus-overlay">
+                <div id="focus-overlay" class="flex-col fill">
-                    <div class="top"></div>
+                    <div class="grow obscured animated"></div>
-                    <div class="left"></div>
+                    <div id="focus-overlay-height" class="flex animated" style="height:100%">
-                    <div class="center"></div>
+                        <div class="grow obscured animated"></div>
-                    <div class="right"></div>
+                        <div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
-                    <div class="bottom"></div>
+                        <div class="grow obscured animated"></div>
+                    </div>
+                    <div class="grow obscured animated"></div>
                 </div>
                 
-                <div id="nav-controls">
+                <div id="nav-controls" class="fill">
                     <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
                     <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
                 </div>