const body = document.body
function htmlDecode(input){
if(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes[0].nodeValue;
}
return ""
}
function showImage(fn, username, prevPost, nextPost){
var viewerDiv = document.createElement("div")
viewerDiv.className = "ViewerDiv"
var img = document.createElement("img")
img.className = "ViewerImg"
img.src = fn
aImg = document.createElement("a")
aImg.href = fn
aImg.target="_blank"
aImg.appendChild(img)
viewerDiv.appendChild(aImg)
var commentsDiv = document.createElement("div")
commentsDiv.className = "ViewerComment"
commentsDiv.innerHTML = htmlDecode(commentsHtml)
console.log(commentsDiv.innerHTML)
viewerDiv.appendChild(commentsDiv)
// alert(prevPost)
// alert(nextPost)
var arrowLeft = document.createElement("a")
arrowLeft.className = "Arrow Left"
arrowLeft.innerText = "<"
// arrowLeft.href = "/show_img?post_id=" + prevPost + "&t=" + new Date().getTime()
arrowLeft.onclick = function(event){
location = "/show_img?post_id=" + prevPost
// location.reload()
}
viewerDiv.appendChild(arrowLeft)
var arrowRight = document.createElement("a")
arrowRight.className = "Arrow Right"
arrowRight.innerText = ">"
// arrowRight.href = "/show_img?post_id=" + nextPost + "&t=" + new Date().getTime()
arrowRight.onclick = function(event){
location = "/show_img?post_id=" + nextPost
// location.reload()
}
viewerDiv.appendChild(arrowRight)
body.appendChild(viewerDiv)
const VIEWER_WF = 0.9
const VIEWER_HF = 0.9
let iw = img.naturalWidth
let ih = img.naturalHeight
let ww = window.innerWidth * VIEWER_WF
let wh = window.innerHeight * VIEWER_HF
let deltaw = ww - iw
let deltah = wh - ih
if(ww < iw || wh < ih){
let ratio = iw/ih
if(ww/ratio > wh){
iw = wh*ratio
ih = wh
}
else{
iw = ww
ih = ww/ratio
}
}
img.style.width = iw + "px"
img.style.height = ih + "px"
const TIME_BEFORE_HIDE_COMMENTS = 1000
const isHover = e => e.parentElement.querySelector(':hover') === e;
var lastMouseMove = Date.now()
function setHideCommentTimeOut(){
setTimeout(() => {
if(commentsDiv.style.display != "none"){//if visible
if(!isHover(commentsDiv)){
console.log(Date.now()-lastMouseMove)
if(Date.now()-lastMouseMove > TIME_BEFORE_HIDE_COMMENTS){
commentsDiv.style.display = 'none';
}
}
}
setHideCommentTimeOut()
}, 1000);
}
document.addEventListener('mousemove', e => {
if(commentsDiv.style.display!="block"){
commentsDiv.style.display = 'block';
}
lastMouseMove = Date.now()
});
document.addEventListener('keydown', function(event){
if(event.key === "Escape"){
//body.removeChild(viewerDiv)
window.location.href = "/found?username="+username;
}
});
setHideCommentTimeOut()
// setTimeout(() => {
// if(!isHover(commentsDiv))
// commentsDiv.style.display = 'none';
// }, 1000);
// img.onclick = function clickEvent(e) {
// var rect = e.target.getBoundingClientRect();
// var x = e.clientX - rect.left; //x position within the element.
// var y = e.clientY - rect.top; //y position within the element.
// }
function clickOnElement(x,y,e){
return (x > e.offsetLeft) && (x < e.offsetLeft+e.offsetWidth) &&
(y > e.offsetTop) && (y < e.offsetTop+e.offsetHeight)
}
viewerDiv.onclick = function clickEvent(e) {
let rect = viewerDiv.getBoundingClientRect();
let x = e.clientX - rect.left; //x position within the element.
let y = e.clientY - rect.top; //y position within the element.
// let clickImg = (x > img.offsetLeft) && (x < img.offsetLeft+img.offsetWidth) &&
// (y > img.offsetTop) && (y < img.offsetTop+img.offsetHeight)
let clickImg = clickOnElement(x,y,img)
let clickComments = false
let clickArrow = clickOnElement(x,y,arrowLeft) || clickOnElement(x,y,arrowRight)
if(clickImg){
//zoom
}
else if(clickComments){
//
}
else if(clickArrow){
//
}
else{
window.location.href = "/found?username="+username;
}
}
setTimeout(() => {
commentsDiv.style.display = 'none';
}, 1000);
}