personal-website/resources/sys/wde/file-view.js

133 lines
4.5 KiB
JavaScript
Raw Normal View History

2023-03-22 21:53:06 +00:00
class FileView{
2023-05-10 12:39:49 +00:00
path = ""
2023-04-29 13:58:39 +00:00
parentElem = undefined
selected = []
2023-03-22 21:53:06 +00:00
/**
* @param {HTMLElement} fileViewElem
* @param {Function} doubleClickCallback
2023-05-04 00:38:24 +00:00
* @param {Function} rightClickCallback
2023-05-10 22:56:28 +00:00
* @param {Function} updateFileViewCallback
2023-03-22 21:53:06 +00:00
*/
2023-05-10 22:56:28 +00:00
constructor(fileViewElem, doubleClickCallback, rightClickCallback, fileUploadCallback, updateFileViewCallback){
2023-04-12 17:04:25 +00:00
//TODO check all params
2023-04-29 13:58:39 +00:00
this.parentElem = fileViewElem
2023-03-22 21:53:06 +00:00
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)
}
2023-03-22 21:53:06 +00:00
})
2023-05-04 00:38:24 +00:00
fileViewElem.addEventListener('contextmenu', (event) => {
event.preventDefault();
if (event.target.classList.contains("Tile")){
this.DeselectAll()
this.Select([event.target])
}
this.Select([event.target])
2023-05-04 00:38:24 +00:00
rightClickCallback(event)
})
if (fileUploadCallback !== undefined) {
2023-05-10 12:39:49 +00:00
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")
2023-05-10 22:56:28 +00:00
// console.log(updateFileViewCallback)
// event.dataTransfer.setData("updateCallback", updateFileViewCallback)
2023-05-10 12:39:49 +00:00
// event.dataTransfer.setData("fileName", )
// console.log(draggedElem)
})
fileViewElem.addEventListener('dragenter', function(event) {
2023-05-10 12:39:49 +00:00
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")
}
2023-05-10 22:56:28 +00:00
// updateFileViewCallback()
2023-05-10 12:39:49 +00:00
// 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();
2023-05-10 12:39:49 +00:00
fileUploadCallback(event)
fileViewElem.classList.remove("DragDropBorder")
2023-05-10 22:56:28 +00:00
// updateFileViewCallback()
// this.OpenFolder(this.path)
2023-05-10 12:39:49 +00:00
// draggedElem = undefined
})
}
2023-03-22 21:53:06 +00:00
}
/**
* @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 = []
}
2023-03-22 21:53:06 +00:00
/** Get html of folder by path
* @param {string} path
*/
2023-04-29 13:58:39 +00:00
OpenFolder(path){
2023-05-10 12:39:49 +00:00
this.path = path
2023-03-22 21:53:06 +00:00
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) => {
2023-04-29 13:58:39 +00:00
//TODO
// console.log(responseStatus)
// if (responseStatus != 200) {
// WebDesktopEnvironment.Alert("Error")
// }
this.parentElem.innerHTML = html
2023-03-22 21:53:06 +00:00
}).catch((error) => {
WebDesktopEnvironment.Alert(error);
})
}
}