sidebar&boxes.js

var boolskNav = false; /* boolsk verdi som forteller om en sidebar er åpen foran kartet */
var boolskBox = false; /* boolsk verdi som forteller om en boks er åpen foran kartet */
var box = null; /* Streng som forteller hvilken boks-id som er åpen */

/* Set the width of the sidebar to 25vw */
function openNav() {
    if (boolskBox) {
        closeBox(box);
    }
    document.getElementById("dataLayers").style.width = "25vw";
    boolskNav = true;
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("dataLayers").style.width = "0vw";
    boolskNav = false;
}

function openBox(id) {
    if (boolskBox) {
        closeBox(box);
    }
    if (boolskNav) {
        closeNav();
    }

    // Fyller aktuell select med alternativ avhengig av hvilken boks en åpner:
    if (id == "bufferBox") {
        fillSelect("bufferSelect");
    } else if (id == "differenceBox") {
        fillDoubleSelect("differenceSelect");
    } else if (id == "dissolveBox") {
        fillSelect("dissolveSelect");
    } else if (id == "extractBox") {
        fillSelect("extractSelect");
    } else if (id == "intersectionBox") {
        fillDoubleSelect("intersectionSelect");
    } else if (id == "unionBox") {
        fillDoubleSelect("unionSelect");
    }
    
    document.getElementById(String(id)).style.width = "40vw";
    document.getElementById(String(id)).style.height = "40vh";
    document.getElementById(String(id)).style.borderWidth = "20px";
    boolskBox = true;
    box = id;
    deactivateMap();
}

function closeBox(id) {
    document.getElementById(String(id)).style.width = "0vw";
    document.getElementById(String(id)).style.height = "0vh";
    document.getElementById(String(id)).style.borderWidth = "0px";
    boolskBox = false;
    box = null;
    activateMap();
}

// Fyller select i de ulike boksene med alternativ:

function fillSelect(id) {
    var select = document.getElementById(id);
    select.innerHTML = "";
    select.add(new Option(text="- - -"));
    
    for (key in overlayMaps) {
        select.add(new Option(text = key, value = key));
    }
}

function fillDoubleSelect(id) {
    var select1 = document.getElementById(id + "_1");
    var select2 = document.getElementById(id + "_2");
    select1.innerHTML = "";
    select2.innerHTML = "";
    select1.add(new Option(text="- - -"));
    select2.add(new Option(text="- - -"));

    for (key in overlayMaps) {
        select1.add(new Option(text = key, value = key));
        select2.add(new Option(text = key, value = key));
    }
}