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
|
// todo: add a "last updated on" header
|
||||||
|
|
||||||
$SCRIPTNAME='pfaltgall';
|
$SCRIPTNAME='pfaltgall';
|
||||||
$SCRIPTVERSION='0.2.1';
|
$SCRIPTVERSION='0.3';
|
||||||
$SCRIPTURL='https://git.lattuga.net/Jones/pfaltgall';
|
$SCRIPTURL='https://git.lattuga.net/Jones/pfaltgall';
|
||||||
|
|
||||||
require 'lib/ckratelimit.php';
|
require 'lib/ckratelimit.php';
|
||||||
|
|
@ -145,6 +145,8 @@ $acc=$acc['content'];
|
||||||
|
|
||||||
$imgurls=[];
|
$imgurls=[];
|
||||||
$imgs='';
|
$imgs='';
|
||||||
|
$thumburls=[];
|
||||||
|
$thumbs='';
|
||||||
$i=0;
|
$i=0;
|
||||||
$ic=0;
|
$ic=0;
|
||||||
do {
|
do {
|
||||||
|
|
@ -161,6 +163,7 @@ do {
|
||||||
$count=count($res['content']);
|
$count=count($res['content']);
|
||||||
if ($count>0) {
|
if ($count>0) {
|
||||||
foreach ($res['content'] as $status) {
|
foreach ($res['content'] as $status) {
|
||||||
|
//print_r($status);die();
|
||||||
if (isset($status['created_at']) && preg_match('#^\s+$#',$status['created_at'])!==1) {
|
if (isset($status['created_at']) && preg_match('#^\s+$#',$status['created_at'])!==1) {
|
||||||
$date=strtotime($status['created_at']);
|
$date=strtotime($status['created_at']);
|
||||||
$date=' <span class="grey">['.date('Y/m/d',$date).']</span>';
|
$date=' <span class="grey">['.date('Y/m/d',$date).']</span>';
|
||||||
|
|
@ -179,6 +182,8 @@ do {
|
||||||
$ia=0;
|
$ia=0;
|
||||||
foreach ($status['media_attachments'] as $attachment) {
|
foreach ($status['media_attachments'] as $attachment) {
|
||||||
if (isset($attachment['url'])) {
|
if (isset($attachment['url'])) {
|
||||||
|
$thumburl=$attachment['preview_url'];
|
||||||
|
$thumburls[]=$thumburl;
|
||||||
$imgurl=$attachment['url'];
|
$imgurl=$attachment['url'];
|
||||||
$imgurls[]=$imgurl;
|
$imgurls[]=$imgurl;
|
||||||
$ia++;
|
$ia++;
|
||||||
|
|
@ -190,7 +195,10 @@ do {
|
||||||
$icnt=" ({$ia}/{$ca})";
|
$icnt=" ({$ia}/{$ca})";
|
||||||
else
|
else
|
||||||
$icnt='';
|
$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++;
|
$ic++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -214,9 +222,8 @@ if ($acc['display_name']!='') {
|
||||||
$profhead="<strong>{$accdispname}</strong><br>({$profhead})";
|
$profhead="<strong>{$accdispname}</strong><br>({$profhead})";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$html='<!DOCTYPE HTML>
|
$html='<!DOCTYPE HTML>
|
||||||
<html lang="en">
|
<html lang="it">
|
||||||
<head>
|
<head>
|
||||||
<title>'.$title.'</title>
|
<title>'.$title.'</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
|
@ -382,17 +389,60 @@ hr {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tools {
|
#toolbar {
|
||||||
/*display: none;*/
|
display: block;
|
||||||
width: 100%;
|
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;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
top: 0;
|
||||||
background-color: rgb(51 51 51 / .85);;
|
background-color: rgb(0 0 0 / .85);
|
||||||
padding: 4px 6px 4px 6px;
|
padding: 3px;
|
||||||
color: white;
|
z-index: 2;
|
||||||
font-size: 10pt;
|
overflow: auto;
|
||||||
z-index: 1;
|
/*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) {
|
@media only screen and (max-width:15cm) {
|
||||||
|
|
@ -414,16 +464,21 @@ hr {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
let totimgs='.$ic.';
|
||||||
|
let thumburls=["'.implode('", "',$thumburls).'"];
|
||||||
let imgurls=["'.implode('", "',$imgurls).'"];
|
let imgurls=["'.implode('", "',$imgurls).'"];
|
||||||
let phimgurl="'.$acc['avatar_static'].'";//placeholder image url
|
let phimgurl="'.$acc['avatar_static'].'";//placeholder image url
|
||||||
|
window.onresize=setToolBar;
|
||||||
function prel() {
|
function prel() {
|
||||||
var md=document.getElementById("maindiv"),
|
let ph=window.innerHeight;
|
||||||
ph=window.innerHeight,
|
if (window.innerWidth < window.innerHeight)
|
||||||
th=md.scrollHeight,
|
ph-=48;
|
||||||
pages=Math.round(th/ph),
|
let md=document.getElementById("maindiv"),
|
||||||
sy=Math.round(md.scrollTop),
|
th=md.scrollHeight,
|
||||||
page=Math.round(pages-(th-sy)/ph)+1,
|
pages=th/ph,
|
||||||
img;
|
sy=md.scrollTop,
|
||||||
|
page=Math.floor(pages-(th-sy)/ph)+1,
|
||||||
|
img;
|
||||||
//console.log(ph+" "+th+" "+pages+" "+sy+" "+page);
|
//console.log(ph+" "+th+" "+pages+" "+sy+" "+page);
|
||||||
if (page>1) {//current
|
if (page>1) {//current
|
||||||
img=document.getElementById("img"+(page-2));
|
img=document.getElementById("img"+(page-2));
|
||||||
|
|
@ -432,7 +487,7 @@ function prel() {
|
||||||
img.loading="eager";
|
img.loading="eager";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (page<pages) {//next
|
if (page+1<pages) {//next
|
||||||
img=document.getElementById("img"+(page-1));
|
img=document.getElementById("img"+(page-1));
|
||||||
if (img.src==phimgurl) {
|
if (img.src==phimgurl) {
|
||||||
img.src=imgurls[page-1];
|
img.src=imgurls[page-1];
|
||||||
|
|
@ -446,7 +501,7 @@ function prel() {
|
||||||
img.loading="eager";
|
img.loading="eager";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (page+1<pages) {//next-next
|
if (page+2<pages) {//next-next
|
||||||
img=document.getElementById("img"+page);
|
img=document.getElementById("img"+page);
|
||||||
if (img.src==phimgurl) {
|
if (img.src==phimgurl) {
|
||||||
img.src=imgurls[page];
|
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>
|
</script>
|
||||||
</head>
|
</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 id="maindiv" onscroll="prel();">
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue