Updated html and css
This commit is contained in:
parent
16ae96b9cf
commit
664c288fea
|
|
@ -0,0 +1,5 @@
|
|||
body,
|
||||
.container-fluid, .row, .col,
|
||||
.error-styling, .dir-style, .movie-style, .file-style {
|
||||
background-color: rgba(0,0,0,0.0);
|
||||
}
|
||||
|
|
@ -5,6 +5,19 @@ window.onload = (eve) => {
|
|||
document.body.onload = (eve) => {
|
||||
getFavesAjax();
|
||||
reloadDirectory();
|
||||
if (window.self !== window.top) {
|
||||
setTimeout(function () {
|
||||
let elm = document.getElementById("bg");
|
||||
elm.parentElement.removeChild(elm);
|
||||
|
||||
// Stylesheet for iframe views
|
||||
var link = document.createElement("link");
|
||||
link.href = formatURL("static/css/iframe.css");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
const openFile = (eve) => {
|
||||
|
|
@ -16,6 +29,7 @@ const openFile = (eve) => {
|
|||
const openFileLocally = (eve) => {
|
||||
let target = eve.target;
|
||||
let hash = target.getAttribute("app");
|
||||
openWithLocalProgram(hash);
|
||||
}
|
||||
|
||||
$( "#search-files-field" ).bind( "keyup", async function(eve) {
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@ class FilesList extends React.Component {
|
|||
<div class="card-body">
|
||||
<img class="image-style" src={"api/file-manager-action/" + file[1]} alt={file[0]} />
|
||||
</div>
|
||||
<div class="card-footer justify-content-right">
|
||||
<input app={file[1]} onClick={this.openThis} class="btn btn-secondary btn-sm" type="button" value="Open"/>
|
||||
<input app={file[1]} onClick={this.openThisLocally} class="btn btn-secondary btn-sm" type="button" value="Open Locally"/>
|
||||
<div class="card-footer">
|
||||
<input app={file[1]} onClick={this.openThisLocally} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/>
|
||||
<input app={file[1]} onClick={this.openThis} class="btn btn-secondary btn-sm float-right" type="button" value="Open"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,9 +67,9 @@ class FilesList extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div class="row">
|
||||
<React.Fragment>
|
||||
{final}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,115 @@ const goUpADirectory = () => {
|
|||
}
|
||||
|
||||
const scrollFilesToTop = () => {
|
||||
let target = document.getElementById('file-grid')
|
||||
let target = document.getElementById('files');
|
||||
target.scrollTop = 0;
|
||||
}
|
||||
|
||||
|
||||
const showMedia = async (hash, extension, type) => {
|
||||
document.getElementById("image-viewer").style.display = "none";
|
||||
document.getElementById("text-viewer").style.display = "none";
|
||||
document.getElementById("pdf-viewer").style.display = "none";
|
||||
document.getElementById("video-viewer").style.display = "none";
|
||||
document.getElementById("video-controls").style.display = "none";
|
||||
|
||||
if (type === "video") {
|
||||
setupVideo(hash, extension);
|
||||
}
|
||||
if (type === "file") {
|
||||
setupFile(hash, extension);
|
||||
}
|
||||
}
|
||||
|
||||
const setupVideo = async (hash, extension) => {
|
||||
let video = document.getElementById("video-viewer");
|
||||
let controls = document.getElementById("video-controls");
|
||||
video.poster = "static/imgs/icons/loading.gif";
|
||||
video.style.display = "";
|
||||
video.src = "#"
|
||||
video_path = "files/" + hash;
|
||||
|
||||
try {
|
||||
if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) {
|
||||
if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) {
|
||||
data = await fetchData( "remux/" + hash );
|
||||
if ( data.hasOwnProperty('path') ) {
|
||||
video_path = data.path;
|
||||
} else {
|
||||
displayMessage(data.message.text, data.message.type);
|
||||
return ;
|
||||
}
|
||||
} else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) {
|
||||
$('#file-view-modal').modal({"focus": false, "show": false});
|
||||
openWithLocalProgram(hash, extension);
|
||||
return ;
|
||||
}
|
||||
}
|
||||
|
||||
$('#file-view-modal').modal({"focus": true, "show": true});
|
||||
controls.style.display = "none";
|
||||
video.src = video_path;
|
||||
// if ((/\.(flv|f4v)$/i).test(extension)) {
|
||||
// video.src = video_path;
|
||||
// } else {
|
||||
// // This is questionable in usage since it loads the full video before
|
||||
// showing; but, seeking doesn't work otherwise...
|
||||
// let response = await fetch(formatURL(video_path));
|
||||
// let vid_src = URL.createObjectURL(await response.blob()); // IE10+
|
||||
// video.src = vid_src;
|
||||
// video.src = video_path;
|
||||
// }
|
||||
} catch (e) {
|
||||
video.style.display = "none";
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
const setupFile = async (hash, extension) => {
|
||||
let viewer = null;
|
||||
let type = "local";
|
||||
|
||||
if ((/\.(png|jpg|jpeg|gif|ico)$/i).test(extension)) {
|
||||
type = "image";
|
||||
viewer = document.getElementById("image-viewer");
|
||||
}
|
||||
if ((/\.(txt|text|sh|cfg|conf)$/i).test(extension)) {
|
||||
type = "text";
|
||||
viewer = document.getElementById("text-viewer");
|
||||
}
|
||||
if ((/\.(mp3|ogg|flac)$/i).test(extension)) {
|
||||
type = "music";
|
||||
viewer = document.getElementById("video-viewer");
|
||||
}
|
||||
if ((/\.(pdf)$/i).test(extension)) {
|
||||
type = "pdf";
|
||||
viewer = document.getElementById("pdf-viewer");
|
||||
}
|
||||
|
||||
if (type !== "text" && type !== "local" ) {
|
||||
$('#file-view-modal').modal({"focus": true, "show": true});
|
||||
let response = await fetch(formatURL("files/" + hash));
|
||||
let src_obj = URL.createObjectURL(await response.blob()); // IE10+
|
||||
viewer.src = src_obj;
|
||||
}
|
||||
|
||||
if (type == "text") {
|
||||
let response = await fetch(formatURL("files/" + hash));
|
||||
let textData = await response.text(); // IE10+
|
||||
viewer.innerText = textData;
|
||||
}
|
||||
|
||||
if (type !== "local") {
|
||||
viewer.style.display = "";
|
||||
$('#file-view-modal').modal({"focus": true, "show": true});
|
||||
}
|
||||
|
||||
if (type == "local") {
|
||||
openWithLocalProgram(hash);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const openWithLocalProgram = async (hash, extension = "") => {
|
||||
const url = "run-locally/" + hash;
|
||||
let data = await fetchData(url);
|
||||
|
|
@ -23,9 +128,52 @@ const openWithLocalProgram = async (hash, extension = "") => {
|
|||
}
|
||||
|
||||
|
||||
const searchPage = () => {
|
||||
let query = document.getElementById('search-files-field').value.toLowerCase();
|
||||
let list = document.getElementById("file-grid").querySelectorAll("[title]");
|
||||
let size = list.length;
|
||||
|
||||
for (var i = 0; i < size; i++) {
|
||||
if (!list[i].tagName.includes("SPAN")) {
|
||||
if (!list[i].title.toLowerCase().includes(query)) {
|
||||
list[i].style.display = "none";
|
||||
} else {
|
||||
list[i].style.display = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
let list = document.getElementById("file-grid").querySelectorAll("[title]");
|
||||
let size = list.length;
|
||||
|
||||
document.getElementById('search-files-field').value = "";
|
||||
for (var i = 0; i < size; i++) {
|
||||
list[i].style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
const enableEdit = (elm) => {
|
||||
console.log(elm);
|
||||
elm.style.backgroundColor = "#ffffffff";
|
||||
elm.style.color = '#000000ff';
|
||||
elm.readOnly = '';
|
||||
formerFileName = elm.value;
|
||||
}
|
||||
|
||||
const disableEdit = (elm) => {
|
||||
elm.style.backgroundColor = "";
|
||||
elm.style.color = '';
|
||||
elm.value = formerFileName;
|
||||
elm.readOnly = "true";
|
||||
}
|
||||
|
||||
const updateBackground = (srcLink, isvideo = true) => {
|
||||
try {
|
||||
let elm = document.getElementById("bg");
|
||||
|
||||
console.log(srcLink);
|
||||
if (isvideo) {
|
||||
if (elm.getAttribute('src') === "") {
|
||||
elm.src = srcLink;
|
||||
|
|
@ -34,7 +182,7 @@ const updateBackground = (srcLink, isvideo = true) => {
|
|||
elm.src = "";
|
||||
elm.setAttribute("poster", srcLink);
|
||||
}
|
||||
} catch (e) {}
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
{% endblock body_header_additional %}
|
||||
|
||||
{% block body_content_additional %}
|
||||
<div id="files">
|
||||
<div id="files" class="row">
|
||||
</div>
|
||||
{% endblock body_content_additional %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue