Compare commits
No commits in common. "b295ee2ad84daccfbb717c4fbd0038f6088fd148" and "d852896c613f5df78c413502d0589ec4b80a37f5" have entirely different histories.
b295ee2ad8
...
d852896c61
|
|
@ -135,3 +135,46 @@ body {
|
|||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* viewer stuff */
|
||||
|
||||
#viewer-images {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#page-num, #duration {
|
||||
position: fixed;
|
||||
font-size: 14pt;
|
||||
top: 10px;
|
||||
font-weight: bold;
|
||||
opacity: 0.75;
|
||||
text-shadow: /* Duplicate the same shadow to make it very strong */
|
||||
0 0 2px #222,
|
||||
0 0 2px #222,
|
||||
0 0 2px #222;
|
||||
}
|
||||
|
||||
#page-num {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#duration {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#progress {
|
||||
background-color: #4488ffcc;
|
||||
height: 5px;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,33 +5,27 @@ html, body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#controls {
|
||||
.tap {
|
||||
background: #000000;
|
||||
opacity: 0.8;
|
||||
position: fixed;
|
||||
animation: 2s linear forwards fade;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.tap {
|
||||
background: #000000;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#tap-left, #tap-right {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 30vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#tap-left svg, #tap-right svg {
|
||||
width: min(90%, 100px);
|
||||
}
|
||||
|
||||
#tap-left {
|
||||
left: 0px;
|
||||
}
|
||||
|
|
@ -40,65 +34,9 @@ html, body {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
#tap-back, #tap-restart {
|
||||
#tap-back {
|
||||
top: 0px;
|
||||
left: 30vw;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
#tap-back svg {
|
||||
height: min(51%, 100px);
|
||||
}
|
||||
|
||||
#tap-restart svg {
|
||||
height: min(90%, 175px);
|
||||
}
|
||||
|
||||
#tap-back {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#tap-restart {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#viewer-images {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#page-num, #duration {
|
||||
position: fixed;
|
||||
font-size: 14pt;
|
||||
top: 10px;
|
||||
font-weight: bold;
|
||||
opacity: 0.75;
|
||||
text-shadow: /* Duplicate the same shadow to make it very strong */
|
||||
0 0 2px #222,
|
||||
0 0 2px #222,
|
||||
0 0 2px #222;
|
||||
}
|
||||
|
||||
#page-num {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#duration {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#progress {
|
||||
background-color: #4488ffcc;
|
||||
height: 5px;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
const PROGRESS_UPDATE_INTERVAL = 50;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
|
||||
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
||||
|
|
@ -18,13 +16,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
if (paused) {
|
||||
return;
|
||||
}
|
||||
elapsed += PROGRESS_UPDATE_INTERVAL;
|
||||
elapsed += 100;
|
||||
if (elapsed >= duration*1000) {
|
||||
changePage(currentPage + 1);
|
||||
}
|
||||
updateBar();
|
||||
},
|
||||
PROGRESS_UPDATE_INTERVAL,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -97,20 +95,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
changePage(currentPage + (rtl ? -1 : 1));
|
||||
}
|
||||
|
||||
function restart() {
|
||||
changePage(0);
|
||||
}
|
||||
|
||||
function exitToWork() {
|
||||
changeDuration(duration, true);
|
||||
if (currentPage === pages.length - 1) {
|
||||
localStorage.removeItem(`${WORK_ID}-currentPage`);
|
||||
}
|
||||
localStorage.setItem(`${WORK_ID}-currentPage`, 0);
|
||||
window.location.href = `../${INDEX}`;
|
||||
}
|
||||
|
||||
function hideTapZones() {
|
||||
document.getElementById('controls').style.opacity = 0;
|
||||
for (const el of document.getElementsByClassName('tap')) {
|
||||
el.style.opacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
changePage(currentPage);
|
||||
|
|
@ -119,21 +113,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
document.onkeydown = event => {
|
||||
hideTapZones();
|
||||
|
||||
switch (event.key) {
|
||||
case "ArrowLeft":
|
||||
event.preventDefault();
|
||||
left();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
event.preventDefault();
|
||||
right();
|
||||
break;
|
||||
case " ":
|
||||
event.preventDefault();
|
||||
switch (event.keyCode) {
|
||||
case 32: //space
|
||||
changeDuration(duration, !paused);
|
||||
break;
|
||||
case "ArrowUp":
|
||||
event.preventDefault();
|
||||
case 37: //left
|
||||
left();
|
||||
break;
|
||||
case 38: //up
|
||||
if (2 <= duration && duration <= 10) {
|
||||
changeDuration(duration - 1, false);
|
||||
} else if (10 < duration && duration <= 20) {
|
||||
|
|
@ -142,8 +129,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
changeDuration(duration - 5, false);
|
||||
}
|
||||
break;
|
||||
case "ArrowDown":
|
||||
event.preventDefault();
|
||||
case 39: //right
|
||||
right();
|
||||
break;
|
||||
case 40: //down
|
||||
if (duration < 10) {
|
||||
changeDuration(duration + 1, false);
|
||||
} else if (10 <= duration && duration < 20) {
|
||||
|
|
@ -152,12 +141,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
changeDuration(duration + 5, false);
|
||||
}
|
||||
break;
|
||||
case "Enter":
|
||||
event.preventDefault();
|
||||
restart();
|
||||
break;
|
||||
case "Escape":
|
||||
event.preventDefault();
|
||||
case 13: //enter
|
||||
exitToWork();
|
||||
break;
|
||||
}
|
||||
|
|
@ -166,6 +150,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
document.onclick = hideTapZones;
|
||||
document.getElementById("tap-left").onclick = left;
|
||||
document.getElementById("tap-right").onclick = right;
|
||||
document.getElementById("tap-restart").onclick = restart;
|
||||
document.getElementById("tap-back").onclick = exitToWork;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,13 +33,6 @@
|
|||
<path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tap-restart" class="tap">
|
||||
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
|
||||
<path d='M 54.16 9.55 A 55 55 0 1 1 54.16 -9.55' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||
<path d='M 54.16 -9.55 l 9.39 -17.66' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||
<path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="image-container"></div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue