neutral/public/javascripts/basics.js

// 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"
    }

    clear() {

        this.element.innerHTML = "&nbsp"
    }
    
    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
    }

}


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;
  
}


class ViewWindow {
    ViewHTML = null
    ViewProperties =null
    ViewSpanInteger = 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>
                    <button id='${properties.title}_close' class='btn min red'><span><i class='fa fa-xmark'></i></span></button>
                    </div>
                    <div id='${properties.title}_content' class='view-window-content'>
                    </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;
    
            header.addEventListener('mousedown', (e) => {
                isDragging = true;
            
                // 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
    }

}

createView("files_explorer")

function createView(viewType) {
    if(viewType == 'files_explorer') {

        generateFileExplorer()


    }
    if(viewType == 'service') {

        const View = new ViewWindow({
            title: "Gestionnaire des services",
            width: "1000px",
            height: "600px"
        })
    }
   
}


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.left = (xMousePos - 40) + "px" 
                menu.style.top = (yMousePos - 40) + "px"
    
                menu.addEventListener('mouseleave', () => {
    
                    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
}