itdominator
/
WebFM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Files listing work'

This commit is contained in:
maximstewart 2021-02-07 23:31:20 -06:00
parent a477654021
commit 340b9a54fd
5 changed files with 116 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
src/core/static/js/post-ajax.js
View File

@ -5,10 +5,8 @@ const postAjaxController = (data, action) => {
return ; return ;
} }
console.log(data);
if (data.hasOwnProperty('path_head')) if (data.hasOwnProperty('path_head'))
console.log(); updateHTMLDirList(data);
// updateHTMLDirList(data);
if (data.hasOwnProperty('faves_list')) if (data.hasOwnProperty('faves_list'))
// generateFavesList(data.faves_list); // generateFavesList(data.faves_list);
console.log("faves stub..."); console.log("faves stub...");
@ -47,39 +45,26 @@ const generateFavesList = (data) => {
const updateHTMLDirList = async (data) => { const updateHTMLDirList = async (data) => {
var dirTemplate = document.querySelector('#dirTemplate'); console.log(data);
var vidTemplate = document.querySelector('#vidTemplate');
var imgTemplate = document.querySelector('#imgTemplate');
var filTemplate = document.querySelector('#filTemplate');
let insertArea = document.getElementById('file-grid');
let pathElm = document.getElementById("path"); let pathElm = document.getElementById("path");
let thumbnail = formatURL("static/imgs/icons/folder.png"); let dirs = (data.list.dirs) ? data.list.dirs[0] : [];
let pathParts = data.path_head.split("/"); let videos = (data.list.vids) ? data.list.vids[0] : [];
let dirPath = pathParts[pathParts.length - 1] + "/"; let images = (data.list.images) ? data.list.images[0] : [];
let files = (data.list.ungrouped) ? data.list.ungrouped[0] : [];
let title = "";
let hash = "";
// Can still set the path info if locked...
pathElm.innerText = dirPath;
// If locked return and create password field....
let dirs = (data.list.dirs) ? data.list.dirs : [];
let videos = (data.list.vids) ? data.list.vids : [];
let images = (data.list.imgs) ? data.list.imgs : [];
let files = (data.list.files) ? data.list.files : [];
let isInFaves = data.in_fave; let isInFaves = data.in_fave;
let background_image = images[0] ? images[0][0] : "";
let i = 0;
let size = 0;
console.log(data.list.images);
let background_image = (images[0]) ? images[0][0] : "";
console.log(background_image);
pathElm.innerText = data.path_head; // Can still set the path info if locked...
// Setup background if there is a 000.* in selection // Setup background if there is a 000.* in selection
if (background_image.match(/000\.(jpg|png|gif)\b/) != null) { if (background_image.match(/000\.(jpg|png|gif)\b/) != null) {
// Due to same hash for 000 we add date to make link unique for each run to bypass cache issues... // Due to same hash for 000 we add date to make link unique for each run to bypass cache issues...
background_image = formatURL("files/" + images[i][1] + '?d=' + Date.now()); background_image = "api/file-manager-action/files/" + images[0][1] + '?d=' + Date.now();
updateBackground(background_image, false); updateBackground(background_image, false);
} else { } else {
background_image = formatURL("static/imgs/backgrounds/particles.mp4"); background_image = "static/imgs/backgrounds/particles.mp4";
updateBackground(background_image); updateBackground(background_image);
} }
@ -90,89 +75,92 @@ const updateHTMLDirList = async (data) => {
else else
elm.classList.remove("btn-info"); elm.classList.remove("btn-info");
clearChildNodes(insertArea);
// Insert dirs
let dirClone = document.importNode(dirTemplate.content, true);
let dir = null;
size = dirs.length;
for (; i < size; i++) {
const clone = dirClone.cloneNode(true);
title = dirs[i][0];
hash = dirs[i][1];
createElmBlock(insertArea, clone, thumbnail, title, hash);
}
// Insert videos renderFilesList(data.list);
let vidClone = document.importNode(vidTemplate.content, true);
size = videos.length;
for (i = 0; i < size; i++) {
const clone = vidClone.cloneNode(true);
title = videos[i][0];
thumbnail = formatURL(videos[i][1]);
hash = videos[i][2];
createElmBlock(insertArea, clone, thumbnail, title, hash, true);
}
// Insert images // clearChildNodes(insertArea);
let imgClone = document.importNode(imgTemplate.content, true); // // Insert dirs
thumbnail = ""; // let dirClone = document.importNode(dirTemplate.content, true);
size = images.length; // let dir = null;
for (i = 0; i < size; i++) { // size = dirs.length;
title = images[i][0]; // for (; i < size; i++) {
thumbnail = formatURL("files/" + images[i][1]); // const clone = dirClone.cloneNode(true);
hash = images[i][1]; // title = dirs[i][0];
// hash = dirs[i][1];
if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null && // createElmBlock(insertArea, clone, thumbnail, title, hash);
!thumbnail.includes("favicon.png") && !thumbnail.includes("000")) { // }
const clone = imgClone.cloneNode(true); //
createElmBlock(insertArea, clone, thumbnail, title, hash); // // Insert videos
} // let vidClone = document.importNode(vidTemplate.content, true);
} // size = videos.length;
// for (i = 0; i < size; i++) {
// Insert files // const clone = vidClone.cloneNode(true);
let fileClone = document.importNode(filTemplate.content, true); // title = videos[i][0];
size = files.length; // thumbnail = formatURL(videos[i][1]);
for (i = 0; i < size; i++) { // hash = videos[i][2];
const clone = fileClone.cloneNode(true); // createElmBlock(insertArea, clone, thumbnail, title, hash, true);
title = files[i][0]; // }
thumbnail = setFileIconType(files[i][0]); //
hash = files[i][1]; // // Insert images
createElmBlock(insertArea, clone, thumbnail, title, hash); // let imgClone = document.importNode(imgTemplate.content, true);
} // thumbnail = "";
} // size = images.length;
// for (i = 0; i < size; i++) {
const createElmBlock = (ulElm, clone, thumbnail, title, hash, isVideo=false) => { // title = images[i][0];
let containerTag = clone.firstElementChild; // thumbnail = formatURL("files/" + images[i][1]);
containerTag.setAttribute("style", "background-image: url('" + thumbnail + "')"); // hash = images[i][1];
containerTag.setAttribute("title", title); //
containerTag.setAttribute("hash", hash); // if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null &&
// !thumbnail.includes("favicon.png") && !thumbnail.includes("000")) {
// If image tag this sink to oblivion since there are no input tags in the template // const clone = imgClone.cloneNode(true);
try { // createElmBlock(insertArea, clone, thumbnail, title, hash);
let inputTag = clone.querySelector("input"); // }
inputTag.setAttribute("value", title); // }
// NOTE: Keeping this just incase i do want to rename stuff... //
// // // Insert files
// inputTag.addEventListener("dblclick", function (eve) { // let fileClone = document.importNode(filTemplate.content, true);
// enableEdit(eve.target); // size = files.length;
// }); // for (i = 0; i < size; i++) {
// inputTag.addEventListener("focusout", function (eve) { // const clone = fileClone.cloneNode(true);
// disableEdit(eve.target); // title = files[i][0];
// }); // thumbnail = setFileIconType(files[i][0]);
} catch (e) { } // hash = files[i][1];
// createElmBlock(insertArea, clone, thumbnail, title, hash);
if (isVideo) { // }
let popoutTag = clone.querySelector(".card-popout-btn"); // }
popoutTag.setAttribute("hash", hash); //
popoutTag.addEventListener("click", function (eve) { // const createElmBlock = (ulElm, clone, thumbnail, title, hash, isVideo=false) => {
let target = eve.target; // let containerTag = clone.firstElementChild;
const hash = target.getAttribute("hash"); // containerTag.setAttribute("style", "background-image: url('" + thumbnail + "')");
openWithLocalProgram(hash); // containerTag.setAttribute("title", title);
}); // containerTag.setAttribute("hash", hash);
} //
// // If image tag this sink to oblivion since there are no input tags in the template
// try {
ulElm.appendChild(clone); // let inputTag = clone.querySelector("input");
// inputTag.setAttribute("value", title);
// // NOTE: Keeping this just incase i do want to rename stuff...
// //
// // inputTag.addEventListener("dblclick", function (eve) {
// // enableEdit(eve.target);
// // });
// // inputTag.addEventListener("focusout", function (eve) {
// // disableEdit(eve.target);
// // });
// } catch (e) { }
//
// if (isVideo) {
// let popoutTag = clone.querySelector(".card-popout-btn");
// popoutTag.setAttribute("hash", hash);
// popoutTag.addEventListener("click", function (eve) {
// let target = eve.target;
// const hash = target.getAttribute("hash");
// openWithLocalProgram(hash);
// });
// }
//
//
// ulElm.appendChild(clone);
} }
const setFileIconType = (fileName) => { const setFileIconType = (fileName) => {

15
src/core/static/js/react-ui-logic.js vendored
View File

@ -30,15 +30,14 @@ class FilesList extends React.Component {
} }
} }
const renderFilesList = (data = {"files": ['Dir 1', 'Dir 2', 'Dir 3', 'Dir 4', 'Dir 5']}) => { const renderFilesList = (data = null) => {
// Obtain the root // Obtain the root
const filesListElm = document.getElementById('files') const filesListElm = document.getElementById('files')
console.log(data);
// Use the ReactDOM.render to show our component on the browser // // Use the ReactDOM.render to show our component on the browser
ReactDOM.render( // ReactDOM.render(
React.createElement(FilesList, data), // React.createElement(FilesList, data),
filesListElm // filesListElm
) // )
} }
renderFilesList()

4
src/core/static/js/ui-logic.js
View File

@ -20,8 +20,6 @@ const scrollFilesToTop = () => {
const updateBackground = (srcLink, isvideo = true) => { const updateBackground = (srcLink, isvideo = true) => {
try { try {
let elm = document.getElementById("bg"); let elm = document.getElementById("bg");
console.log(srcLink);
if (isvideo) { if (isvideo) {
if (elm.getAttribute('src') === "") { if (elm.getAttribute('src') === "") {
elm.src = srcLink; elm.src = srcLink;
@ -30,7 +28,7 @@ const updateBackground = (srcLink, isvideo = true) => {
elm.src = ""; elm.src = "";
elm.setAttribute("poster", srcLink); elm.setAttribute("poster", srcLink);
} }
} catch (e) { } } catch (e) {}
} }

2
src/core/templates/body-footer.html
View File

@ -10,7 +10,7 @@
<div class="col col-lg-auto"> <div class="col col-lg-auto">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<span id="currentDirectory">{{current_directory}}</span> <span id="path">{{current_directory}}</span>
</li> </li>
</ul> </ul>
</div> </div>

10
src/core/templates/body-header.html
View File

@ -22,6 +22,16 @@
<button title="File viewer..." class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#file-view-modal">🖼</button> <button title="File viewer..." class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#file-view-modal">🖼</button>
</div> </div>
</li> </li>
<li class="nav-item">
<div class="input-group input-group-sm justify-content-center">
<button class="btn btn-sm btn-secondary" data-toggle="modal"
data-target="#favorites-modal">Faves List &#8597;</button>
<button id="tggl-faves-btn" class="btn btn-sm btn-secondary" title="Add/Delete from favorites..." >&#9734;</button>
<button id="lock-folders-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >&#x1F512;</button>
<button id="scroll-files-to-top-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >Scroll Files To Top</button>
</div>
</li>
{% else %} {% else %}
<!-- Branding --> <!-- Branding -->
<div class="navbar-brand"> <div class="navbar-brand">