caribaud/melpomene
1
0
Fork 0
Code Issues 9 Pull requests 1 Releases 3 Wiki Activity

Refactor focus

Browse source
This commit is contained in:
Christian Aribaud 2023-05-19 15:42:39 +02:00
parent e2d5e24319
commit 5c28982421
3 changed files with 42 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

41
comic_reader.css
View file

@ -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 * {
transition: all 1.5s ease;
}
#focus-overlay, #nav-controls {
.fill {
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) {
background-color: rgba(0, 0, 0, 0.85);
}
#focus-overlay > .center {
.focus {
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
}

17
comic_reader.js
View file

@ -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){
side_width = (READER_CONTENT_FRAME.clientWidth - width) / 2
FOCUS_OVERLAY.style.gridTemplateColumns = side_width +"px auto " + side_width + "px"
FOCUS_OVERLAY.style.gridTemplateRows = "0px auto 0px";
FOCUS_OVERLAY_WIDTH.style.width = (width / READER_CONTENT_FRAME.clientWidth * 100) + "%"
FOCUS_OVERLAY_HEIGHT.style.height = "100%"
}
function updateFocusByHeight(height){
side_width = (READER_CONTENT_FRAME.clientHeight - height) / 2
FOCUS_OVERLAY.style.gridTemplateRows = side_width +"px auto " + side_width + "px"
FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
FOCUS_OVERLAY_WIDTH.style.width = "100%"
FOCUS_OVERLAY_HEIGHT.style.height = (height / READER_CONTENT_FRAME.clientHeight * 100) + "%"
}
function toggleViewMode() {

18
comic_reader_test_high_res.html
View file

@ -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 class="top"></div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="bottom"></div>
<div id="focus-overlay" class="flex-col fill">
<div class="grow obscured animated"></div>
<div id="focus-overlay-height" class="flex animated" style="height:100%">
<div class="grow obscured animated"></div>
<div id="focus-overlay-width" class="focus animated" style="width:100%"></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>