rejetto forum

Custom folder previews

D · 4 · 372

0 Members and 1 Guest are viewing this topic.

Offline D

  • Occasional poster
  • *
    • Posts: 16
    • View Profile
Let's say I have following folders

New folder
New folder 2
New folder 3

Each contains a "p.jpg", I want to use these as folder preview. Attached an example

The code for diff template I'm currently using:
Code: [Select]
[+]
<script>
var list=document.querySelectorAll("table#files>tbody>tr");
function changepic(a1)
{
  var alink=a1.querySelector("a");
  var adress=alink.getAttribute("href");
  if(adress.endsWith("/"))
  {
  adress+="p.jpg";
  var img=document.createElement("img");
  img.setAttribute("src",adress);
  img.setAttribute("onerror","this.style.display='none'");
  a1.children[3].appendChild(img);
  }
}
list.forEach(changepic);
</script>
eats too much cpu if there are too many folders. Because script doesn't check if p.jpg is actually present in folder

How can I fix it? Thanks in advance.
« Last Edit: September 15, 2021, 09:45:20 AM by D »


Offline D

  • Occasional poster
  • *
    • Posts: 16
    • View Profile
Okay, variant with images behind buttons:
Code: [Select]
[+]
<script>
var list=document.querySelectorAll("table#files>tbody>tr");
function changepic(a1)
{
  var alink=a1.querySelector("a");
  var adress=alink.getAttribute("href");
  if(adress.endsWith("/"))
  {
  adress+="p.jpg";
  var button=document.createElement("button");
  button.setAttribute("onclick","showPreview(this)");
  button.setAttribute("link",adress);
  button.setAttribute("type","button");
  a1.children[3].setAttribute("style","text-align:center");
  a1.children[3].appendChild(button);
  button.appendChild(document.createTextNode("Preview"));
  } 
}
list.forEach(changepic);
function showPreview(butt)
{
  butt.setAttribute("style","display:none");
  var par=butt.parentElement;
  var img=document.createElement("img");
  img.setAttribute("src",butt.getAttribute("link"));
  par.appendChild(img);
}
</script>


Offline dj

  • Tireless poster
  • ****
    • Posts: 279
  • 👣 🐾
    • View Profile
    • PWAs
for hfs2.4

Code: [Select]
[+]
<script>
function folderth(){
 [...document.querySelectorAll('#files a[href$="/"]')].forEach(item =>
 item.insertAdjacentHTML('afterend', '<img loading=lazy height=128 src='+item.href+'folder.jpg>')  //p.jpg
 )
}

if(!document.querySelector('main')) folderth()  //hfs2.4
else document.addEventListener('render', folderth)  //mobil-light_V5.6
</script>
« Last Edit: September 15, 2021, 08:32:30 AM by dj »


Offline D

  • Occasional poster
  • *
    • Posts: 16
    • View Profile