132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
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
|
|
*/
|
|
async OpenFolder(path){
|
|
this.path = path
|
|
const params = new URLSearchParams({
|
|
path: path
|
|
})
|
|
const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
|
|
if (response.status != 200){
|
|
//TODO Error text message
|
|
WebDesktopEnvironment.Alert("TODO")
|
|
return
|
|
}
|
|
let html = await response.text()
|
|
this.parentElem.innerHTML = html
|
|
}
|
|
} |