pix2.0/!/index.html
2021-08-21 11:17:48 +05:30

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>