jungle-server/js/grids/makeClearPanelGrid.js

import { makeDiv,
         makeCenteredTextDiv,
         setElementPosition,
         getInputHeight } from '/domUtilities.js';

import { getGridCoordinates,
         returnPanels } from './gridUtilities.js';


import { jc as jcGlobal } from '/configuration.js';


function makeTabsClearPanel(coords,
                            tabs,
                            gridContents,
                            i,
                            redraw,
                            availablePanels) {

    const jc = jcGlobal.jc;

    const inputHeight = getInputHeight();
    
    const div = makeDiv();
    setElementPosition(div, coords);
    
    const tabsCoords = [coords[0],
                        coords[1],
                        coords[2],
                        inputHeight];

    const contentCoords = [coords[0],
                           coords[1] + inputHeight,
                           coords[2],
                           coords[3] - inputHeight];
    



    const tabsPanel = makeDiv(); 
    tabsPanel.style.background = jc.General.clearPanelColor;
    tabsPanel.style.opacity = 0;
    setElementPosition(tabsPanel, tabsCoords);

    const tabsDisplayPanel = makeCenteredTextDiv('clear panel');
    tabsDisplayPanel.style.background = jc.General.clearPanelColor;
    tabsDisplayPanel.style.opacity = 0;
    setElementPosition(tabsDisplayPanel, coords);

    div.append(tabsDisplayPanel, tabsPanel);

    tabsPanel.onmouseover = () => {
        tabsDisplayPanel.style.opacity = 1;
    };
    
    
    tabsPanel.onmouseleave = () => {
        tabsDisplayPanel.style.opacity = 0;
    };

    tabsPanel.onmousedown = () => {


        returnPanels(tabs.contents, availablePanels);
        
        gridContents[i] = undefined;

        redraw();
        
    };


     const currentContent = tabs.contents[tabs.getCurrentIndex()];

    if(currentContent.type  === 'grid') {

        div.append(makeClearPanelGrid(contentCoords[0],
                                      contentCoords[1],
                                      contentCoords[2],
                                      contentCoords[3],
                                      currentContent.contents,
                                      currentContent.splits,
                                      currentContent.direction,
                                      redraw,
                                      jc,
                                      availablePanels));

        
    }else if(currentContent.type === 'tabs') {

        div.append(makeTabsClearPanel(contentCoords,
                                      currentContent,
                                      tabs.contents,
                                      tabs.getCurrentIndex(),
                                      redraw,
                                      availablePanels));

        
    }else {

        const panel = makeCenteredTextDiv('clear panel');
        setElementPosition(panel, contentCoords);
        panel.style.background = jc.General.clearPanelColor;
        panel.style.opacity = 0;

        panel.onmouseover = () => {
            panel.style.opacity = 1;
        };

        panel.onmouseleave = () => {
            panel.style.opacity = 0;
        };

        
        
        
        panel.onmousedown = () => {

            if(currentContent.type === 'grid' ||
               currentContent.type === 'tabs') {

                returnPanels(currentContent.contents, availablePanels);
                
            }else if(currentContent.label) {
                availablePanels.push(currentContent);
            }

            tabs.contents[tabs.getCurrentIndex()] = undefined;

            redraw();

        };

        
        div.append(panel);
        
    
        
        
    };
    
    

    return div;

    
}


function makeClearPanelGrid(x,
                            y,
                            width,
                            height,
                            contents,
                            splits,
                            direction,
                            redraw,
                            jc,
                            availablePanels) {

    const div = makeDiv();
    setElementPosition(div, [x, y, width, height]);

    const coords = getGridCoordinates(x, y, width, height, splits, direction);

    contents.forEach((content, i) => {

        if(content.type === 'tabs') {

            div.append(makeTabsClearPanel(coords[i],
                                          contents[i],
                                          contents,
                                          i,
                                          redraw,
                                          availablePanels));

            
        }else if(content.type !== 'grid') {
            const panel = makeCenteredTextDiv('clear');
            panel.style.background = jc.General.clearPanelColor;
            setElementPosition(panel, coords[i]);
            panel.style.opacity = 0;

            
            panel.onmouseover = () => {
                panel.style.opacity = 1;
            };

            panel.onmouseleave = () => {
                panel.style.opacity = 0;
            };

            panel.onmousedown = () => {

                if(contents[i].label) {
                    availablePanels.push(contents[i]);
                }
                contents[i] = undefined;
                
                redraw();
            };
            
            div.append(panel);
            
        }else {

            div.append(makeClearPanelGrid(coords[i][0],
                                          coords[i][1],
                                          coords[i][2],
                                          coords[i][3],
                                          contents[i].contents,
                                          contents[i].splits,
                                          contents[i].direction,
                                          redraw,
                                          jc,
                                          availablePanels));

        }

    });

    return div;
}

export { makeClearPanelGrid }