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

Implimented templates for reused parts.

This commit is contained in:
Maxim Stewart 2019-04-01 18:51:34 -05:00
parent 10ff3f817f
commit 8bd3605b65
2 changed files with 61 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -60,10 +60,32 @@
</center> </center>
</div> </div>
<!-- Uploader processor --> <!-- Uploader processor -->
<div id="serverMsgView" style="display:none;"> <div id="serverMsgView" style="display:none;"> </div>
</div>
<!-- Templates -->
<template id="dirTemplate">
<div class="dirStyle" tabindex="1">
<img id="dirID" class="systemIcon" src="" />
<input id="titleID" class="dirTitle" type="text" value="" readonly="true" />
</div>
</template>
<template id="vidTemplate">
<span class="movieStyle" tabindex="1">
<img id="movieID" class="thumbnail" src="" />
<input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
</span>
</template>
<template id="imgTemplate">
<img id="imageID" class="iconImg" src="" alt="">
</template>
<template id="filTemplate">
<div class="fileStyle">
<img id="fileID" class="systemIcon" src="" />
<input id="titleID" class="fileTitle" type="text" value="" readonly="true" />
</div>
</template>
<script type="text/javascript"> <script type="text/javascript">

87
resources/js/xmlParser.js
View File

@ -34,15 +34,18 @@ const generateFavesList = (data) => {
} }
const updateHTMLDirList = async (data) => { const updateHTMLDirList = async (data) => {
let isInFaves = data.getElementsByTagName('IN_FAVE')[0].innerHTML; let isInFaves = data.getElementsByTagName('IN_FAVE')[0].innerHTML;
let dirPath = data.getElementsByTagName('PATH_HEAD')[0].innerHTML; let dirPath = data.getElementsByTagName('PATH_HEAD')[0].innerHTML;
let dirs = Array.prototype.slice.call(data.getElementsByTagName('DIR'), 0); let dirs = Array.prototype.slice.call(data.getElementsByTagName('DIR'), 0);
let videos = Array.prototype.slice.call(data.getElementsByTagName('VID_FILE'), 0); let videos = Array.prototype.slice.call(data.getElementsByTagName('VID_FILE'), 0);
let images = Array.prototype.slice.call(data.getElementsByTagName('IMG_FILE'), 0); let images = Array.prototype.slice.call(data.getElementsByTagName('IMG_FILE'), 0);
let files = Array.prototype.slice.call(data.getElementsByTagName('FILE'), 0); let files = Array.prototype.slice.call(data.getElementsByTagName('FILE'), 0);
let dirImg = "resources/images/icons/folder.png"; var dirTemplate = document.querySelector('#dirTemplate');
let i = 0; var vidTemplate = document.querySelector('#vidTemplate');
let size = 0; var imgTemplate = document.querySelector('#imgTemplate');
var filTemplate = document.querySelector('#filTemplate');
let i = 0;
let size = 0;
document.getElementById("path").innerHTML = dirPath; document.getElementById("path").innerHTML = dirPath;
@ -66,16 +69,16 @@ const updateHTMLDirList = async (data) => {
elm.style.color = ""; elm.style.color = "";
} }
// Insert dirs
size = dirs.length;
// Insert dirs
let dirImg = "resources/images/icons/folder.png";
size = dirs.length;
sortElms(dirs); sortElms(dirs);
for (; i < size; i++) { for (; i < size; i++) {
let dir = dirs[i].innerHTML; let dir = dirs[i].innerHTML;
if (dir != "resources/") { if (dir != "resources/") {
createElmBlock("DIV", "dirStyle", "dirID", "systemIcon", dirImg , let dirClone = document.importNode(dirTemplate.content, true);
"dirTitle", dir); createElmBlock(dirClone, dirImg, dir);
} }
} }
@ -83,43 +86,38 @@ const updateHTMLDirList = async (data) => {
let thumbnail = ""; let thumbnail = "";
let vidNme = ""; let vidNme = "";
size = videos.length; size = videos.length;
sortVidElms(videos); sortVidElms(videos);
for (i = 0; i < size; i++) { for (i = 0; i < size; i++) {
vidNme = videos[i].children[0].innerHTML; vidNme = videos[i].children[0].innerHTML;
thumbnail = videos[i].children[1].innerHTML; thumbnail = videos[i].children[1].innerHTML;
let vidClone = document.importNode(vidTemplate.content, true);
createElmBlock("SPAN", "movieStyle", "movieID", "thumbnail", thumbnail, createElmBlock(vidClone, thumbnail, vidNme);
"movieTitle", vidNme);
} }
// Insert images // Insert images
thumbnail = ""; thumbnail = "";
size = images.length; size = images.length;
sortElms(images);
// sortElms(images);
for (i = 0; i < size; i++) { for (i = 0; i < size; i++) {
thumbnail = images[i].innerHTML; thumbnail = images[i].innerHTML;
if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null && if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null &&
!thumbnail.includes("favicon.png")) { !thumbnail.includes("favicon.png")) {
let imgTag = document.createElement("IMG"); let imgClone = document.importNode(imgTemplate.content, true);
imgTag.id = "imageID"; let imgTag = imgClone.firstElementChild;
imgTag.className = "iconImg"; imgTag.src = dirPath + thumbnail;
imgTag.src = dirPath + thumbnail; imgTag.alt = thumbnail;
imgTag.alt = thumbnail; insertArea.appendChild(imgClone);
insertArea.appendChild(imgTag);
} }
} }
// Insert files // Insert files
size = files.length; size = files.length;
sortElms(files); sortElms(files);
for (i = 0; i < size; i++) { for (i = 0; i < size; i++) {
let filClone = document.importNode(filTemplate.content, true);
let fileName = files[i].innerHTML; let fileName = files[i].innerHTML;
createElmBlock("DIV", "fileStyle", "fileID", "systemIcon", setFileIconType(fileName), createElmBlock(filClone, setFileIconType(fileName), fileName);
"fileTitle", fileName);
} }
} }
@ -143,29 +141,16 @@ const sortElms = (obj) => {
}); });
} }
const createElmBlock = (contnrType, contnrClass, imgID, imgClass, const createElmBlock = (elm, imgSrc, fileName) => {
imgSrc, inputClass, fileName) => { contnrTag = elm.firstElementChild;
let contnrTag = document.createElement(contnrType); let imgTag = elm.querySelector("img");
let imgTag = document.createElement("IMG"); let inputTag = elm.querySelector("input");
let inputTag = document.createElement("INPUT"); contnrTag.title = fileName;
imgTag.src = imgSrc;
contnrTag.className = contnrClass; imgTag.alt = fileName;
contnrTag.title = fileName; inputTag.value = fileName;
contnrTag.tabIndex = "1";
imgTag.id = imgID;
imgTag.className = imgClass ;
imgTag.src = imgSrc;
imgTag.alt = fileName;
inputTag.type = "text";
inputTag.id = "titleID";
inputTag.className = inputClass;
inputTag.readOnly = "true";
inputTag.value = fileName;
inputTag.addEventListener("focusout", disableEdits); inputTag.addEventListener("focusout", disableEdits);
insertArea.appendChild(elm);
contnrTag.appendChild(imgTag);
contnrTag.appendChild(inputTag);
insertArea.appendChild(contnrTag);
} }
const setFileIconType = (fileName) => { const setFileIconType = (fileName) => {