384 lines
13 KiB
HTML
384 lines
13 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link href="../icon.png" rel="shortcut icon"/>
|
|
<meta charset="utf-8"/>
|
|
<style>
|
|
a {
|
|
color: rgb(224,220,220);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
line-height: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
div#bottom {
|
|
background-color: rgba(198, 192, 192, 0.6);
|
|
bottom: 0;
|
|
color: black;
|
|
height: auto;
|
|
left: 0;
|
|
line-height: 18px;
|
|
padding: 8px 32px;
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: center;
|
|
text-transform: none; }
|
|
div#main {
|
|
/* background-color: rgb(112, 107, 107); */
|
|
background-color: rgb(0, 0, 0);
|
|
background-position: 0 0, 16px 16px;
|
|
background-size: 32px 32px;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: calc(60px - 1vw);
|
|
}
|
|
div#top_center {
|
|
background-color: rgb(104, 100, 100);
|
|
color: rgb(224,220,220);
|
|
height: calc(60px - 1vw);
|
|
left: 25%;
|
|
font-size: calc(36px - 1vw);
|
|
line-height: 32px;
|
|
padding: 8px 32px;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 0;
|
|
right: 25%;
|
|
}
|
|
div#top_left {
|
|
background-color: rgb(104, 100, 100);
|
|
color: rgb(224,220,220);
|
|
height: calc(60px - 1vw);
|
|
left: 0;
|
|
line-height: 32px;
|
|
padding: 8px 32px;
|
|
position: absolute;
|
|
text-align: left;
|
|
top: 0;
|
|
width: 25%;
|
|
}
|
|
div#top_right {
|
|
background-color: rgb(104, 100, 100);
|
|
color: rgb(224,220,220);
|
|
height: calc(60px - 1vw);
|
|
line-height: 32px;
|
|
padding: 8px 32px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
text-align: right;
|
|
width: 25%;
|
|
}
|
|
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
span:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
span:active {
|
|
color: rgb(178, 56, 50);
|
|
}
|
|
|
|
span.disabled {
|
|
cursor: default;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="top_left">
|
|
<span id="back">back</span>
|
|
</div>
|
|
<div id="top_center">
|
|
<span id="previous">previous</span> | <span id="play">play</span> | <span id="next">next</span>
|
|
</div>
|
|
<div id="top_right">
|
|
<span id="small">1080p</span> | <span id="large">original</span>
|
|
</div>
|
|
<div id="main"></div>
|
|
<div id="bottom">loading...</div>
|
|
</body>
|
|
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
|
|
<script type="text/javascript" src="../js/hammer.min.js"></script>
|
|
|
|
<script>
|
|
var path
|
|
var current, previous, next
|
|
var img
|
|
var imageWidth, imageHeight, imageRatio
|
|
var timeout
|
|
var back = document.getElementById('back')
|
|
var previous = document.getElementById('previous')
|
|
var playPause = document.getElementById('play')
|
|
var next = document.getElementById('next')
|
|
var small = document.getElementById('small')
|
|
var large = document.getElementById('large')
|
|
var main = document.getElementById('main')
|
|
var bottom = document.getElementById('bottom')
|
|
var elements = {
|
|
27: back,
|
|
32: playPause,
|
|
37: previous,
|
|
39: next,
|
|
187: large,
|
|
189: small
|
|
}
|
|
var captions
|
|
$.getJSON("../js/captions.json", function(data) {
|
|
captions = data;
|
|
})
|
|
var hammertime = new Hammer(main)
|
|
hammertime.get('swipe').set({velocity: 3.0})
|
|
function hammerIt(elm) {
|
|
hammertime = new Hammer(elm, {});
|
|
hammertime.get('pinch').set({
|
|
enable: true
|
|
});
|
|
var posX = 0,
|
|
posY = 0,
|
|
scale = 1,
|
|
last_scale = 1,
|
|
last_posX = 0,
|
|
last_posY = 0,
|
|
max_pos_x = 0,
|
|
max_pos_y = 0,
|
|
transform = "",
|
|
el = elm;
|
|
|
|
hammertime.on('pan pinch panend pinchend', function(ev) {
|
|
|
|
//pan
|
|
if (scale != 1) {
|
|
posX = last_posX + ev.deltaX;
|
|
posY = last_posY + ev.deltaY;
|
|
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
|
|
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
|
|
if (posX > max_pos_x) {
|
|
posX = max_pos_x;
|
|
}
|
|
if (posX < -max_pos_x) {
|
|
posX = -max_pos_x;
|
|
}
|
|
if (posY > max_pos_y) {
|
|
posY = max_pos_y;
|
|
}
|
|
if (posY < -max_pos_y) {
|
|
posY = -max_pos_y;
|
|
}
|
|
}
|
|
|
|
|
|
//pinch
|
|
if (ev.type == "pinch") {
|
|
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
|
|
}
|
|
if(ev.type == "pinchend"){last_scale = scale;}
|
|
|
|
//panend
|
|
if(ev.type == "panend"){
|
|
last_posX = posX < max_pos_x ? posX : max_pos_x;
|
|
last_posY = posY < max_pos_y ? posY : max_pos_y;
|
|
}
|
|
|
|
if (scale != 1) {
|
|
transform =
|
|
"translate3d(" + posX + "px," + posY + "px, 0) " +
|
|
"scale3d(" + scale + ", " + scale + ", 1)";
|
|
}
|
|
|
|
if (transform) {
|
|
el.style.webkitTransform = transform;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function get(url, callback) {
|
|
var request = new XMLHttpRequest()
|
|
request.open('GET', url, true)
|
|
request.onreadystatechange = function() {
|
|
if (request.readyState == 4) {
|
|
if (request.status == 200) {
|
|
callback(request.responseText, null)
|
|
} else {
|
|
callback(null, {
|
|
code: request.status,
|
|
text: request.statusText
|
|
})
|
|
}
|
|
}
|
|
};
|
|
request.send()
|
|
}
|
|
function loadImage() {
|
|
if (!['small', 'large'].includes(localStorage['pix.size'])) {
|
|
localStorage['pix.size'] = 'small'
|
|
}
|
|
small.className = localStorage['pix.size'] == 'small'
|
|
? 'disabled' : ''
|
|
large.className = localStorage['pix.size'] == 'large'
|
|
? 'disabled' : ''
|
|
bottom.style.display = 'block'
|
|
img = document.createElement('img')
|
|
img.style.position = 'absolute'
|
|
img.onload = function() {
|
|
imageWidth = img.width
|
|
imageHeight = img.height
|
|
imageRatio = imageWidth / imageHeight
|
|
onResize()
|
|
document.title = path.split('/').pop().toUpperCase()
|
|
// uncomment below for no captions
|
|
// bottom.style.display = 'none'
|
|
main.innerHTML = ''
|
|
main.appendChild(img)
|
|
//var img_alt = captions[current.split('/').pop()]
|
|
var img_alt = captions[current.split('/').slice(-2).join('/')]
|
|
if (img_alt != "") {
|
|
img.setAttribute('alt', img_alt)
|
|
bottom.innerHTML = img_alt
|
|
} else {
|
|
bottom.style.display = 'none'
|
|
}
|
|
}
|
|
img.setAttribute('src', '../' + (
|
|
localStorage['pix.size'] == 'small'
|
|
? current.replace('/', '/1080/') : current
|
|
))
|
|
hammerIt(img)
|
|
}
|
|
function mod(a, b) {
|
|
return (a % b + b) % b
|
|
}
|
|
function onHashchange() {
|
|
bottom.innerHTML = 'loading...'
|
|
current = null
|
|
previous = null
|
|
next = null
|
|
var hash = document.location.hash.slice(1)
|
|
if (!hash) return
|
|
var parts = hash.split('/')
|
|
var name = parts.pop().replace(/%20/g, ' ')
|
|
path = parts.join('/')
|
|
get('../' + path + '/index.html', function(html, error) {
|
|
if (error) return
|
|
var matches = html.match(/src="(.*?)"/g).map(function(match) {
|
|
return match.slice(5, -1).replace(/^256\//g, '')
|
|
})
|
|
var index = matches.indexOf(name)
|
|
if (index == -1) return
|
|
current = path + '/' + name
|
|
previous = path + '/' + matches[mod(index - 1, matches.length)]
|
|
next = path + '/' + matches[mod(index + 1, matches.length)]
|
|
loadImage()
|
|
})
|
|
}
|
|
function onKeydown(e) {
|
|
elements[e.keyCode] && elements[e.keyCode].onclick()
|
|
}
|
|
function onResize() {
|
|
var screenWidth = window.innerWidth
|
|
var screenHeight = window.innerHeight - 32
|
|
var screenRatio = screenWidth / screenHeight
|
|
var isSmaller = imageWidth < screenWidth
|
|
&& imageHeight < screenHeight
|
|
var isWider = imageRatio > screenRatio
|
|
img.style.width = (
|
|
isSmaller ? imageWidth
|
|
: isWider ? screenWidth
|
|
: screenHeight * imageRatio
|
|
) + 'px'
|
|
img.style.height = (
|
|
isSmaller ? imageHeight
|
|
: isWider ? screenWidth / imageRatio
|
|
: screenHeight
|
|
) + 'px'
|
|
img.style.left = (
|
|
isSmaller ? (screenWidth - imageWidth) / 2
|
|
: isWider ? 0
|
|
: (screenWidth - screenHeight * imageRatio) / 2
|
|
) + 'px'
|
|
img.style.top = (
|
|
isSmaller ? (screenHeight - imageHeight) / 2
|
|
: isWider ? (screenHeight - screenWidth / imageRatio) / 2
|
|
: 0
|
|
) + 'px'
|
|
}
|
|
function pause() {
|
|
timeout && clearTimeout(timeout)
|
|
timeout = null
|
|
}
|
|
function play() {
|
|
pause()
|
|
timeout = setTimeout(playing, 5000)
|
|
function playing() {
|
|
document.location.hash = next.replace(/ /g, '%20')
|
|
timeout = setTimeout(playing, 5000)
|
|
}
|
|
}
|
|
back.onclick = function() {
|
|
document.location = '../' + path
|
|
}
|
|
previous.onclick = function() {
|
|
document.location.hash = previous.replace(/ /g, '%20')
|
|
timeout && play()
|
|
}
|
|
playPause.onclick = function() {
|
|
if (playPause.innerHTML == 'play') {
|
|
playPause.innerHTML = 'pause'
|
|
play()
|
|
} else {
|
|
playPause.innerHTML = 'play'
|
|
pause()
|
|
}
|
|
}
|
|
next.onclick = function() {
|
|
document.location.hash = next.replace(/ /g, '%20')
|
|
timeout && play()
|
|
}
|
|
small.onclick = function() {
|
|
localStorage['pix.size'] = 'small'
|
|
loadImage()
|
|
}
|
|
large.onclick = function() {
|
|
localStorage['pix.size'] = 'large'
|
|
loadImage()
|
|
}
|
|
hammertime.on("swiperight", function(ev) {
|
|
document.location.hash = previous.replace(/ /g, '%20')
|
|
timeout && play()
|
|
})
|
|
hammertime.on("swipeleft", function(ev) {
|
|
document.location.hash = next.replace(/ /g, '%20')
|
|
timeout && play()
|
|
})
|
|
hammertime.on("tap", function(ev) {
|
|
var screenWidth = window.innerWidth
|
|
var clickX = ev.center.x
|
|
console.log(screenWidth)
|
|
if (clickX > screenWidth/2) {
|
|
document.location.hash = next.replace(/ /g, '%20')
|
|
timeout && play()
|
|
} else {
|
|
document.location.hash = previous.replace(/ /g, '%20')
|
|
timeout && play()
|
|
}
|
|
})
|
|
|
|
window.onhashchange = onHashchange
|
|
window.onkeydown = onKeydown
|
|
window.onresize = onResize
|
|
onHashchange()
|
|
</script>
|
|
</html>
|