add responsive grid-view when thumbnails

pull/427/head
Sansui233 2021-09-21 19:53:29 +08:00
parent 4c14349c76
commit a167ce1376
1 changed files with 34 additions and 5 deletions

View File

@ -103,6 +103,10 @@
display: inline-block; display: inline-block;
position:relative position:relative
} }
.list-table tbody.grid-view td.file a > span {
position: absolute;
left: 3px;
}
.list-table tbody.grid-view td.file .download { .list-table tbody.grid-view td.file .download {
display: none; display: none;
} }
@ -746,13 +750,38 @@
} }
<!--ReadmemdEnd--> <!--ReadmemdEnd-->
<!--ShowThumbnailsStart--> <!--ShowThumbnailsStart-->
var isGrid = false;
var isthumbLoaded = false;
function showthumbnails(obj) { function showthumbnails(obj) {
images = [<!--ImgExts-->]; images = [<!--ImgExts-->];
var files=document.getElementsByName('filelist'); var files=document.getElementsByName('filelist');
// turn to grid view if (document.getElementById('originalpic').checked==true){
var list_body = document.getElementById('list-table').firstElementChild if(isGrid){
list_body.classList.add('grid-view') var list_body = document.getElementById('list-table').firstElementChild
list_body.classList.remove('grid-view')
isGrid = false
}
}else {
if(!isGrid){
// turn to grid view
var list_body = document.getElementById('list-table').firstElementChild
list_body.classList.add('grid-view')
isGrid = true
if (isthumbLoaded) {
return
}else {
isthumbLoaded = true
}
} else {
var list_body = document.getElementById('list-table').firstElementChild
list_body.classList.remove('grid-view')
isGrid = false
return
}
}
for ($i=0;$i<files.length;$i++) { for ($i=0;$i<files.length;$i++) {
str=files[$i].innerText; str=files[$i].innerText;
@ -772,7 +801,7 @@
} }
} }
} }
obj.disabled='disabled'; // obj.disabled='disabled';
} }
function get_thumbnails_url(url, name, filea) { function get_thumbnails_url(url, name, filea) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -780,7 +809,7 @@
xhr.send(''); xhr.send('');
xhr.onload = function(e){ xhr.onload = function(e){
if (xhr.status==200) { if (xhr.status==200) {
if (xhr.responseText!='') filea.innerHTML='<img src="'+xhr.responseText+'" alt="'+name+'">'; if (xhr.responseText!='') filea.innerHTML= '<span>' + filea.innerHTML + '</span>' + '<img src="'+xhr.responseText+'" alt="'+name+'">';
} else console.log(xhr.status+'\n'+xhr.responseText); } else console.log(xhr.status+'\n'+xhr.responseText);
} }
} }