class FileView{ path = "" parentElem = undefined selected = [] /** * @param {HTMLElement} fileViewElem * @param {Function} doubleClickCallback * @param {Function} rightClickCallback * @param {Function} updateFileViewCallback */ constructor(fileViewElem, doubleClickCallback, rightClickCallback, fileUploadCallback, updateFileViewCallback){ //TODO check all params this.parentElem = fileViewElem fileViewElem.addEventListener('click', (event) => { if (event.target.classList[0] == 'FileTileView') { this.DeselectAll() return } if (event.detail === 1){ this.DeselectAll() this.Select([event.target]) } else if (event.detail === 2) { doubleClickCallback(event) } }) fileViewElem.addEventListener('contextmenu', (event) => { event.preventDefault(); if (event.target.classList.contains("Tile")){ this.DeselectAll() this.Select([event.target]) } this.Select([event.target]) rightClickCallback(event) }) if (fileUploadCallback !== undefined) { let counter = 0 let draggedElem = undefined fileViewElem.addEventListener('dragstart', (event) => { // console.log(event.target) // console.log(this.path) // draggedElem = event.target event.dataTransfer.setData("fileName", event.target.getAttribute("name")) event.dataTransfer.setData("filePath", this.path + "/" + event.target.getAttribute("name")) event.dataTransfer.setData("dropType", "move") // console.log(updateFileViewCallback) // event.dataTransfer.setData("updateCallback", updateFileViewCallback) // event.dataTransfer.setData("fileName", ) // console.log(draggedElem) }) fileViewElem.addEventListener('dragenter', function(event) { event.preventDefault(); counter++ fileViewElem.classList.add("DragDropBorder") }) fileViewElem.addEventListener('dragend', function(event) { // console.log(fileViewElem) event.preventDefault(); counter-- if (counter === 0){ fileViewElem.classList.remove("DragDropBorder") } // updateFileViewCallback() // draggedElem = undefined }) fileViewElem.addEventListener('dragleave', function(event) { // console.log(fileViewElem) event.preventDefault(); counter-- if (counter === 0){ fileViewElem.classList.remove("DragDropBorder") } // draggedElem = undefined }) fileViewElem.addEventListener('dragover', function(event) { event.preventDefault(); }) fileViewElem.addEventListener("drop", (event) => { event.preventDefault(); fileUploadCallback(event) fileViewElem.classList.remove("DragDropBorder") // updateFileViewCallback() // this.OpenFolder(this.path) // draggedElem = undefined }) } } /** * @param {[]Element} elements */ Select(elements){ elements.forEach(element => { this.selected.push(element) element.classList.add("Selected") }); } DeselectAll(){ this.selected.forEach(element => { element.classList.remove("Selected") }); this.selected = [] } /** Get html of folder by path * @param {string} path */ OpenFolder(path){ this.path = path fetch(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`) //TODO Move to wde func. Or Not? .then((response) => response.text()) .then((html) => { //TODO // console.log(responseStatus) // if (responseStatus != 200) { // WebDesktopEnvironment.Alert("Error") // } this.parentElem.innerHTML = html }).catch((error) => { WebDesktopEnvironment.Alert(error); }) } }