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"
        this.element.style.width = this.element.parentElement.offsetWidth + "px"
        this.element.style.textAlign = "center"
    }

    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
    }

    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()
    }
   
}


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
}