The thumbnails browser is now functional; other minor changes
This commit is contained in:
pezcurrel
parent
32bbec81fe
commit
88a431217b
1 changed files with 143 additions and 22 deletions
165
pfaltgall
165
pfaltgall
|
|
@ -19,7 +19,7 @@
|
|||
// todo: add a "last updated on" header
|
||||
|
||||
$SCRIPTNAME='pfaltgall';
|
||||
$SCRIPTVERSION='0.2.1';
|
||||
$SCRIPTVERSION='0.3';
|
||||
$SCRIPTURL='https://git.lattuga.net/Jones/pfaltgall';
|
||||
|
||||
require 'lib/ckratelimit.php';
|
||||
|
|
@ -145,6 +145,8 @@ $acc=$acc['content'];
|
|||
|
||||
$imgurls=[];
|
||||
$imgs='';
|
||||
$thumburls=[];
|
||||
$thumbs='';
|
||||
$i=0;
|
||||
$ic=0;
|
||||
do {
|
||||
|
|
@ -161,6 +163,7 @@ do {
|
|||
$count=count($res['content']);
|
||||
if ($count>0) {
|
||||
foreach ($res['content'] as $status) {
|
||||
//print_r($status);die();
|
||||
if (isset($status['created_at']) && preg_match('#^\s+$#',$status['created_at'])!==1) {
|
||||
$date=strtotime($status['created_at']);
|
||||
$date=' <span class="grey">['.date('Y/m/d',$date).']</span>';
|
||||
|
|
@ -179,6 +182,8 @@ do {
|
|||
$ia=0;
|
||||
foreach ($status['media_attachments'] as $attachment) {
|
||||
if (isset($attachment['url'])) {
|
||||
$thumburl=$attachment['preview_url'];
|
||||
$thumburls[]=$thumburl;
|
||||
$imgurl=$attachment['url'];
|
||||
$imgurls[]=$imgurl;
|
||||
$ia++;
|
||||
|
|
@ -190,7 +195,10 @@ do {
|
|||
$icnt=" ({$ia}/{$ca})";
|
||||
else
|
||||
$icnt='';
|
||||
$imgs.="<div class=\"page\"><table class=\"imgtab\"><tr><td class=\"imgcel\"><a href=\"{$imgurl}\" name=\"img{$ic}\"><img class=\"img\" decoding=\"async\" loading=\"lazy\" id=\"img{$ic}\" src=\"{$acc['avatar_static']}\"{$altdesc}></a></td></tr><caption class=\"imgcaptcel\">{$desc}{$icnt}{$date}</caption></table></div>\n";
|
||||
/* $imgs.="<div class=\"page\"><table class=\"imgtab\"><tr><td class=\"imgcel\"><a href=\"{$imgurl}\" name=\"img{$ic}\"><img class=\"img\" decoding=\"async\" loading=\"lazy\" id=\"img{$ic}\" src=\"{$imgurl}\"{$altdesc}></a></td></tr><caption class=\"imgcaptcel\">{$desc}{$icnt}{$date}</caption></table></div>\n";
|
||||
$thumbs.="<div class=\"thumbd\" id=\"thumbdiv{$ic}\" onclick=\"goto({$ic});\"><img class=\"thumb\" id=\"thumb{$ic}\" decoding=\"async\" loading=\"lazy\" src=\"{$thumburl}\"{$altdesc}></div>";*/
|
||||
$imgs.="<div class=\"page\"><table class=\"imgtab\"><tr><td class=\"imgcel\"><a href=\"{$imgurl}\" name=\"img{$ic}\"><img class=\"img\" decoding=\"async\" loading=\"eager\" id=\"img{$ic}\" src=\"{$acc['avatar_static']}\"{$altdesc}></a></td></tr><caption class=\"imgcaptcel\">{$desc}{$icnt}{$date}</caption></table></div>\n";
|
||||
$thumbs.="<div class=\"thumbd\" id=\"thumbdiv{$ic}\" onclick=\"goto({$ic});\"><img class=\"thumb\" id=\"thumb{$ic}\" decoding=\"async\" loading=\"lazy\" src=\"{$acc['avatar_static']}\"{$altdesc}></div>";
|
||||
$ic++;
|
||||
}
|
||||
}
|
||||
|
|
@ -214,9 +222,8 @@ if ($acc['display_name']!='') {
|
|||
$profhead="<strong>{$accdispname}</strong><br>({$profhead})";
|
||||
}
|
||||
|
||||
|
||||
$html='<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<html lang="it">
|
||||
<head>
|
||||
<title>'.$title.'</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
|
@ -382,17 +389,60 @@ hr {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tools {
|
||||
/*display: none;*/
|
||||
#toolbar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*background-color: rgb(0 0 0 / .85);*/
|
||||
background-color: #444444;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
user-select: none; /* Standard */
|
||||
}
|
||||
|
||||
#browser {
|
||||
display: none;/*default: block*/
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgb(51 51 51 / .85);;
|
||||
padding: 4px 6px 4px 6px;
|
||||
color: white;
|
||||
font-size: 10pt;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
background-color: rgb(0 0 0 / .85);
|
||||
padding: 3px;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
/*border: 1px solid yellow;*/
|
||||
}
|
||||
|
||||
.thumbd {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background-color: white;
|
||||
margin: 3px;
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
overflow: clip;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/*width: auto;
|
||||
height: auto;*/
|
||||
}
|
||||
|
||||
@media only screen and (max-width:15cm) {
|
||||
|
|
@ -414,16 +464,21 @@ hr {
|
|||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
let totimgs='.$ic.';
|
||||
let thumburls=["'.implode('", "',$thumburls).'"];
|
||||
let imgurls=["'.implode('", "',$imgurls).'"];
|
||||
let phimgurl="'.$acc['avatar_static'].'";//placeholder image url
|
||||
window.onresize=setToolBar;
|
||||
function prel() {
|
||||
var md=document.getElementById("maindiv"),
|
||||
ph=window.innerHeight,
|
||||
th=md.scrollHeight,
|
||||
pages=Math.round(th/ph),
|
||||
sy=Math.round(md.scrollTop),
|
||||
page=Math.round(pages-(th-sy)/ph)+1,
|
||||
img;
|
||||
let ph=window.innerHeight;
|
||||
if (window.innerWidth < window.innerHeight)
|
||||
ph-=48;
|
||||
let md=document.getElementById("maindiv"),
|
||||
th=md.scrollHeight,
|
||||
pages=th/ph,
|
||||
sy=md.scrollTop,
|
||||
page=Math.floor(pages-(th-sy)/ph)+1,
|
||||
img;
|
||||
//console.log(ph+" "+th+" "+pages+" "+sy+" "+page);
|
||||
if (page>1) {//current
|
||||
img=document.getElementById("img"+(page-2));
|
||||
|
|
@ -432,7 +487,7 @@ function prel() {
|
|||
img.loading="eager";
|
||||
}
|
||||
}
|
||||
if (page<pages) {//next
|
||||
if (page+1<pages) {//next
|
||||
img=document.getElementById("img"+(page-1));
|
||||
if (img.src==phimgurl) {
|
||||
img.src=imgurls[page-1];
|
||||
|
|
@ -446,7 +501,7 @@ function prel() {
|
|||
img.loading="eager";
|
||||
}
|
||||
}
|
||||
if (page+1<pages) {//next-next
|
||||
if (page+2<pages) {//next-next
|
||||
img=document.getElementById("img"+page);
|
||||
if (img.src==phimgurl) {
|
||||
img.src=imgurls[page];
|
||||
|
|
@ -461,9 +516,75 @@ function prel() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isInViewport(el) {
|
||||
let rect=el.getBoundingClientRect(),
|
||||
wh=(window.innerHeight || document.documentElement.clientHeight),
|
||||
ww=(window.innerWidth || document.documentElement.clientWidth);
|
||||
return (
|
||||
(rect.top>=0 && rect.top<=wh && rect.left>=0 && rect.left<=ww) ||
|
||||
(rect.bottom>=0 && rect.bottom<=wh && rect.right>=0 && rect.right<=ww)
|
||||
);
|
||||
}
|
||||
|
||||
function prelb() {
|
||||
let i, timg;
|
||||
for (i=0; i<totimgs; i++) {
|
||||
timg=document.getElementById("thumb"+i);
|
||||
if (timg.src==phimgurl && isInViewport(timg)) {
|
||||
// console.log(i);
|
||||
timg.src=thumburls[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setToolBar() {
|
||||
var md=document.getElementById("maindiv"),
|
||||
td=document.getElementById("toolbar"),
|
||||
bd=document.getElementById("browser"),
|
||||
dw=window.innerWidth,
|
||||
dh=window.innerHeight;
|
||||
//console.log("dw: "+dw+"; dh: "+dh);
|
||||
if (dw >= dh) {
|
||||
dw-=48;
|
||||
md.style.width=dw+"px";
|
||||
md.style.height="100%";
|
||||
bd.style.width=dw+"px";
|
||||
bd.style.height="100%";
|
||||
td.setAttribute("style","width:48px;height:100%;padding-left:15px;padding-top:0;writing-mode:vertical-lr;text-orientation:upright;");
|
||||
} else {
|
||||
dh-=48;
|
||||
md.style.width="100%";
|
||||
md.style.height=dh+"px";
|
||||
bd.style.width="100%";
|
||||
bd.style.height=dh+"px";
|
||||
td.setAttribute("style","width:100%;height:48px;padding-left:0;padding-top:13px;writing-mode:horizontal-tb;text-orientation:mixed;");
|
||||
}
|
||||
}
|
||||
let bshows=false;
|
||||
function shbrowser() {
|
||||
bd=document.getElementById("browser");
|
||||
if (bshows) {
|
||||
bd.style.display="none";
|
||||
bshows=false;
|
||||
} else {
|
||||
bd.style.display="block";
|
||||
bshows=true;
|
||||
prelb();
|
||||
}
|
||||
}
|
||||
function goto(i) {
|
||||
document.location.href="#img"+i;
|
||||
document.getElementById("browser").style.display="none";
|
||||
bshows=false;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="prel();">
|
||||
<body onload="setToolBar();prel();">
|
||||
<div id="browser" onscroll="prelb();">
|
||||
'.$thumbs."\n".'
|
||||
</div>
|
||||
<div id="toolbar" onclick="shbrowser();">Miniature</div>
|
||||
<div id="maindiv" onscroll="prel();">
|
||||
<div class="page">
|
||||
<div class="profile">
|
||||
|
|
|
|||
Loading…
Reference in a new issue