360 lines
9.3 KiB
JavaScript
360 lines
9.3 KiB
JavaScript
|
|
|
|
// Get Document ID
|
|
|
|
|
|
/**
|
|
* Récupère depuis le document l'identifiant de l'élément
|
|
* @param {string} id Identifiant de l'élément `id='identifiant'`
|
|
* @returns
|
|
*/
|
|
function getID(id) {
|
|
|
|
return document.getElementById(id)
|
|
}
|
|
|
|
/**
|
|
* Permet de faire une pop-up automatique
|
|
*/
|
|
class InfoPop {
|
|
constructor(name) {
|
|
this.name = name
|
|
this.element = getID(this.name)
|
|
this.element.innerHTML = " "
|
|
this.element.style.fontSize = "14px"
|
|
this.element.style.position = "sticky"
|
|
this.element.style.width = this.element.parentElement.offsetWidth + "px"
|
|
this.element.style.textAlign = "center"
|
|
}
|
|
|
|
clear() {
|
|
|
|
this.element.innerHTML = " "
|
|
}
|
|
|
|
err(text) {
|
|
|
|
this.element.classList.add("yellow")
|
|
this.element.innerHTML = "<i class='fa fa-warning'></i> " + text
|
|
|
|
}
|
|
|
|
info(text) {
|
|
|
|
this.element.classList.remove("yellow")
|
|
|
|
this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
|
|
}
|
|
|
|
setSize(size) {
|
|
|
|
this.element.style.fontSize = size
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const viewsAccessible = new Map()
|
|
|
|
var xMousePos = null;
|
|
var yMousePos = null;
|
|
|
|
document.onmousemove = function(e) {
|
|
xMousePos = e.clientX + window.scrollX;
|
|
yMousePos = e.clientY + window.scrollY;
|
|
|
|
}
|
|
|
|
document.oncontextmenu = function(e) {
|
|
|
|
xMousePos = e.clientX + window.scrollX;
|
|
yMousePos = e.clientY + window.scrollY;
|
|
|
|
}
|
|
|
|
var zIndex = 5
|
|
|
|
class ViewWindow {
|
|
ViewHTML = null
|
|
ViewProperties =null
|
|
ViewSpanInteger = null
|
|
ViewPopupSpanInteger = null
|
|
ViewPopupHTML = null
|
|
ViewPopupTitle = null
|
|
constructor(properties) {
|
|
if(!viewsAccessible.has(properties.title)) {
|
|
|
|
this.ViewProperties = properties
|
|
viewsAccessible.set(properties.title, true)
|
|
|
|
this.ViewHTML = `
|
|
<div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
|
|
|
|
<div id='${properties.title}_header' class='view-window-header'>
|
|
<span style='width: 40px'></span>
|
|
<p>${properties.title}</p>
|
|
<span id='${properties.title}_close' class='view-close'><i class='fa fa-xmark'></i></span>
|
|
</div>
|
|
<div id='${properties.title}_content' class='view-window-content'>
|
|
</div>
|
|
<div id='${properties.title}_popupDiv'></div>
|
|
|
|
</div>
|
|
`
|
|
this.ViewSpanInteger = document.createElement("div")
|
|
document.body.appendChild(this.ViewSpanInteger);
|
|
this.ViewSpanInteger.outerHTML = this.ViewHTML
|
|
|
|
const closeWindow = document.getElementById(properties.title + "_close")
|
|
closeWindow.addEventListener("click", () => {
|
|
|
|
this.destroy()
|
|
|
|
})
|
|
|
|
const header = document.getElementById(properties.title + "_header")
|
|
const windowDiv = document.getElementById(properties.title + "_window")
|
|
|
|
let isDragging = false;
|
|
let offsetX, offsetY;
|
|
windowDiv.style.zIndex = zIndex + 1
|
|
|
|
header.addEventListener('mousedown', (e) => {
|
|
isDragging = true;
|
|
|
|
zIndex+=2
|
|
windowDiv.style.zIndex = zIndex
|
|
|
|
|
|
// Enregistrez la position de la souris par rapport à la fenêtre
|
|
offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
|
|
offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
|
|
});
|
|
|
|
// Gérer le déplacement
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (isDragging) {
|
|
|
|
header.style.cursor = "grab"
|
|
|
|
// Calculez la nouvelle position de la fenêtre en fonction de la position de la souris
|
|
const newLeft = e.clientX - offsetX;
|
|
const newTop = e.clientY - offsetY;
|
|
|
|
// Limitation de la position pour éviter un débordement
|
|
const maxX = window.innerWidth - windowDiv.offsetWidth;
|
|
const maxY = window.innerHeight - windowDiv.offsetHeight;
|
|
|
|
windowDiv.style.left = Math.min(Math.max(newLeft, 0), maxX) + 'px';
|
|
windowDiv.style.top = Math.min(Math.max(newTop, 0), maxY) + 'px';
|
|
}
|
|
});
|
|
|
|
// Gérer la fin du glisser-déposer
|
|
document.addEventListener('mouseup', () => {
|
|
header.style.cursor = "unset"
|
|
isDragging = false;
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
destroy() {
|
|
const win = getID(`${this.ViewProperties.title}_window`)
|
|
win.outerHTML = " "
|
|
viewsAccessible.delete(this.ViewProperties.title)
|
|
}
|
|
|
|
setContent(text) {
|
|
const contentDiv = document.getElementById(this.ViewProperties.title + "_content")
|
|
contentDiv.innerHTML = text
|
|
}
|
|
|
|
getViewTitle() {
|
|
|
|
return this.ViewProperties.title
|
|
}
|
|
|
|
|
|
|
|
createPopup(properties) {
|
|
|
|
this.ViewPopupHTML = `<div id="${properties.title}_popup" class='view-popup'>
|
|
<div class='view-popup-bar'>
|
|
<p>${properties.title}</p>
|
|
<span id="${properties.title}_popupClose" class='btn-cover'><i class='fa fa-xmark'></i></span>
|
|
</div>
|
|
${properties.content}
|
|
</div>`
|
|
|
|
const contentDiv = getID(this.ViewProperties.title + "_content")
|
|
const popupDiv = getID(this.ViewProperties.title + "_popupDiv")
|
|
this.ViewPopupSpanInteger = document.createElement("div")
|
|
popupDiv.appendChild(this.ViewPopupSpanInteger);
|
|
this.ViewPopupSpanInteger.outerHTML = this.ViewPopupHTML
|
|
|
|
this.ViewPopupTitle = properties.title
|
|
|
|
const popup = getID(properties.title + "_popup")
|
|
const popupClose = getID(properties.title + "_popupClose")
|
|
|
|
popupClose.addEventListener("click", () => {
|
|
|
|
this.destroyPopup()
|
|
|
|
})
|
|
|
|
// Center the popup to the window div
|
|
|
|
popup.style.left = (contentDiv.offsetWidth / 2) - (popup.offsetWidth / 2) + "px"
|
|
popup.style.top = (contentDiv.offsetHeight / 2) - (popup.offsetHeight / 2) + "px"
|
|
|
|
// Render parent element styled blur
|
|
contentDiv.classList.add("blur")
|
|
|
|
// Disable all interractions like click and events with contentDiv children
|
|
|
|
for(var child of contentDiv.children) {
|
|
|
|
child.style.pointerEvents = "none"
|
|
}
|
|
|
|
}
|
|
|
|
destroyPopup() {
|
|
|
|
const contentDiv = getID(this.ViewProperties.title + "_content")
|
|
for(var child of contentDiv.children) {
|
|
|
|
child.style.pointerEvents = "unset"
|
|
}
|
|
contentDiv.classList.remove("blur")
|
|
|
|
const popup = getID(this.ViewPopupTitle + "_popup")
|
|
popup.outerHTML = ""
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function createView(viewType) {
|
|
if(viewType == 'files_explorer') {
|
|
|
|
generateFileExplorerView()
|
|
|
|
|
|
}
|
|
if(viewType == 'service') {
|
|
|
|
generateServiceView()
|
|
}
|
|
if(viewType == "links") {
|
|
|
|
generateLinksView()
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class DroppableMenu {
|
|
options = new Array()
|
|
id = null
|
|
DMSpanInteger = null
|
|
constructor(properties) {
|
|
|
|
this.id = properties.id
|
|
this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
|
|
|
|
}
|
|
|
|
add(action, string) {
|
|
|
|
this.options.push("<div id='" + this.id + "_" + action + "' class='dm-element'>" + string + "</div>")
|
|
|
|
}
|
|
|
|
show() {
|
|
|
|
|
|
this.options.push(`</div>`)
|
|
|
|
if(xMousePos && yMousePos) {
|
|
|
|
this.DMSpanInteger = document.createElement("span")
|
|
document.body.appendChild(this.DMSpanInteger);
|
|
this.DMSpanInteger.outerHTML = this.options.join('')
|
|
|
|
const menu = getID(`dm-${this.id}`)
|
|
|
|
menu.style.zIndex = zIndex + 2
|
|
zIndex+=1
|
|
|
|
|
|
menu.style.left = (xMousePos - 40) + "px"
|
|
menu.style.top = (yMousePos - 40) + "px"
|
|
|
|
menu.addEventListener('mouseleave', () => {
|
|
|
|
menu.outerHTML = ""
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
get(action) {
|
|
|
|
return getID(this.id + "_" + action)
|
|
}
|
|
|
|
hide() {
|
|
|
|
const menu = getID(`dm-${this.id}`)
|
|
menu.outerHTML = ""
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function getFormattedDate(GetDate) {
|
|
|
|
const date = new Date(GetDate)
|
|
|
|
var gmonth = date.getMonth() + 1
|
|
var gday = date.getDate()
|
|
var gHour = date.getHours()
|
|
var gMinute = date.getMinutes()
|
|
var gSecondes = date.getSeconds()
|
|
|
|
|
|
if(date.getMonth() + 1 < 10) {
|
|
gmonth = "0" + (date.getMonth() + 1)
|
|
}
|
|
|
|
if(date.getDate() + 1 <= 10) {
|
|
gday = "0" + date.getDate()
|
|
}
|
|
|
|
if(date.getHours() + 1 <= 10) {
|
|
gHour = "0" + date.getHours()
|
|
}
|
|
|
|
if(date.getMinutes() + 1 <= 10) {
|
|
gMinute = "0" + date.getMinutes()
|
|
}
|
|
|
|
if(date.getSeconds() + 1 <= 10) {
|
|
gSecondes = "0" + date.getSeconds()
|
|
}
|
|
|
|
return gday + "/" + gmonth + "/" + date.getFullYear() + " - " + gHour + ":" + gMinute
|
|
} |