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

Changed movie file styling and handling.

Browse Source
This commit is contained in:
Maxim Stewart 2019-04-12 13:20:47 -05:00
parent 8bd3605b65
commit 8366d2f07b
5 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -72,8 +72,7 @@
</div> </div>
</template> </template>
<template id="vidTemplate"> <template id="vidTemplate">
<span class="movieStyle" tabindex="1"> <span id="movieID" class="movieStyle" tabindex="1">
<img id="movieID" class="thumbnail" src="" />
<input id="titleID" class="movieTitle" type="text" value="" readonly="true" /> <input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
</span> </span>
</template> </template>

18
resources/css/main.css
View File

@ -155,17 +155,35 @@
.movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); } .movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); }
.movieStyle { .movieStyle {
position: relative;
float: left; float: left;
width: 15em; width: 15em;
height: 8.5em; height: 8.5em;
overflow: hidden; overflow: hidden;
margin: 0.5em; margin: 0.5em;
padding: 0.5em; padding: 0.5em;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.videoInputField {
position: absolute;
width: 100%;
bottom: 0.64em;
left: 0em;
background-color: rgba(0, 0, 0, 0.64);
color: rgb(255, 255, 255);
text-align: center;
border-top: 1px solid rgb(255, 255, 255);
border-bottom: 1px solid rgb(255, 255, 255);
text-overflow: ellipsis;
} }
.dirStyle:hover, .movieStyle:hover, .fileStyle:hover { .dirStyle:hover, .movieStyle:hover, .fileStyle:hover {
background-color: rgba(0, 141, 166, 0.56); background-color: rgba(0, 141, 166, 0.56);
cursor: pointer; cursor: pointer;
box-shadow: 0px 0px 15px rgb(114,184,199);
border-radius: 0.5em;
} }

12
resources/js/uiActions.js
View File

@ -39,13 +39,11 @@ const enableEdit = (obj) => {
formerFileName = obj.value; formerFileName = obj.value;
} }
const disableEdits = () => { const disableEdits = (elm) => {
// this references the passed object from elm.style.backgroundColor = "";
// addEventListener than us passing it elm.style.color = '';
this.style.backgroundColor = "#ffffff00"; elm.value = formerFileName;
this.style.color = '#ffffff'; elm.readOnly = "true";
this.value = formerFileName;
this.readOnly = "true";
} }
const showMedia = async (mediaLoc, type) => { const showMedia = async (mediaLoc, type) => {

3
resources/js/uiEvents.js
View File

@ -1,5 +1,6 @@
let itemObj = undefined; let itemObj = undefined;
// For context menu to have element
document.onclick = (event) => { document.onclick = (event) => {
let obj = event.target; let obj = event.target;
let callingID = obj.id; let callingID = obj.id;
@ -19,7 +20,7 @@ document.onclick = (event) => {
} }
} }
} }
// Actions for content
document.ondblclick = (event) => { document.ondblclick = (event) => {
let obj = event.target; let obj = event.target;
let callingID = obj.id; let callingID = obj.id;

20
resources/js/xmlParser.js
View File

@ -92,7 +92,7 @@ const updateHTMLDirList = async (data) => {
thumbnail = videos[i].children[1].innerHTML; thumbnail = videos[i].children[1].innerHTML;
let vidClone = document.importNode(vidTemplate.content, true); let vidClone = document.importNode(vidTemplate.content, true);
createElmBlock(vidClone, thumbnail, vidNme); createElmBlock(vidClone, thumbnail, vidNme, true);
} }
// Insert images // Insert images
@ -141,15 +141,25 @@ const sortElms = (obj) => {
}); });
} }
const createElmBlock = (elm, imgSrc, fileName) => { const createElmBlock = (elm, imgSrc, fileName, isVideo = null) => {
contnrTag = elm.firstElementChild; contnrTag = elm.firstElementChild;
let imgTag = elm.querySelector("img"); let imgTag = null;
let inputTag = elm.querySelector("input"); let inputTag = elm.querySelector("input");
contnrTag.title = fileName;
if (isVideo) {
contnrTag.style = "background-image: url('" + imgSrc + "')";
inputTag.className = "videoInputField";
} else {
imgTag = elm.querySelector("img");
imgTag.src = imgSrc; imgTag.src = imgSrc;
imgTag.alt = fileName; imgTag.alt = fileName;
}
contnrTag.title = fileName;
inputTag.value = fileName; inputTag.value = fileName;
inputTag.addEventListener("focusout", disableEdits); inputTag.addEventListener("focusout", function (eve) {
disableEdits(eve.target);
});
insertArea.appendChild(elm); insertArea.appendChild(elm);
} }