guide.js

function userGuide(meta){
    var self = this;
    self.meta = meta; // containts leaflet, map, doc [i.e. the page], tabs, pointer
    self.mapguide = { label: "", descr: "" }
    self.state = {  ready: true,
                    active: true,
                    visible: true
                 }
    setupCtls();

    function setupCtls(){
        self.headerInterface = [/*
                        { id:"shMapguide", 
                          html:"<div id='mapGuide' class='mapGuide'><strong>Map specific guidance:</strong><div id='maptext'></div></div>", 
                          type:"info"},*/
                        { id:"shDataHeader", 
                          html:"<p><div id='shDataHeader'><strong>London Planning Data - map and data browser</strong></div></p>", 
                          type:"head"},
                        { id:"shSrcHeader", 
                          html:"<p><div id='shSrcHeader'>A data tool by Concrete Action</div></p>", 
                          type:"head"},
                        { id: "guide1",
                          html: "<p><div id='guide1'>This is a planning data map and browser designed for those interested in housing justice to review the data " +
                                "gathered and produced by local authorities. It offers a number of maps based on London Development Database which is published " + 
                                " as open data by the GLA.</div></p>",
                          type: "info" },
                        { id: "guide2",
                          html: "<p><div id='guide2'>It differs from official approaches to this data in a number of respects. It frames data to highlight key issues from a housing" +
                                "and spatial justice perspective. To enable " +
                                "accountability, dates are filtered based on when decisions were made rather than when construction happened.</div></p>",
                          type: "info" },
                        { id: "guide2",
                          html: "<p><div id='guide3'>Nevertheless this is data collected and processed by and for local governments. " +
                                "We don't have capacity ourselves to verify that this data is accurate in any way. Its structure inevitably carries " +
                                "biases and ommissions, and in all cases should be treated with caution.</div></p>",
                          type: "info" }
                      ]

        self.ctlRef = {};
    }


    
    self.outputControls = function(){
        var rtn = "";
        for(var i=0; i<self.headerInterface.length; i++){
            rtn +=  self.headerInterface[i].html;
        }
        return rtn;
    }

    self.outputActiveTab = function(){
        var tabCtls = "";
        for(var i=0; i<self.innerTabInterface.length; i++){
            if (self.innerTabInterface[i].id == self.activeInnerTab){
                console.log("Correct inner tab found");
                for(var j=0; j<self.innerTabInterface[i].ctls.length; j++){
                    var ctlhtml = self.innerTabInterface[i].ctls[j].html;
                    console.log("html is : " + ctlhtml);
                    tabCtls += ctlhtml;
                }
            }else{
              console.log(self.innerTabInterface[i].id + " does not equal " + self.activeInnerTab + " at all");
            }
        }
        return tabCtls;
    }

    // Once we have outputted the controls, we need to be able to read them. Is there a better way? Almost certainly yes.
    self.initControls = function(doc){
        for (var i=0; i<self.headerInterface.length; i++){
            console.log(self.headerInterface[i].id);
            self.headerInterface[i].ctl = doc.getElementById(self.headerInterface[i].id);
            self.ctlRef[self.headerInterface[i].id] = self.headerInterface[i].ctl;
            //console.log(self.ctls[i].id + " added");
            if (self.headerInterface[i].type == "control"){
                self.headerInterface[i].ctl.value = self.headerInterface[i].value;
                self.headerInterface[i].ctl.oninput = self.headerInterface[i].refresh;
            }
        }
        self.meta.doc.getElementById('maptext').innerHTML =  self.mapguide.descr ;
    }

    function buildHTMLdropdown(ctl, arr){
        rtn = "\t<strong>" + ctl.label + ": </strong>\n";
        rtn += "\t<select class='" + ctl.className + "' name='" + ctl.idName + "' id = '" + ctl.idName + "'>";
        for(var i=0; i<arr.length; i++){
            rtn += "\t\t<option value='" + arr[i].val + "'>" + arr[i].itemName + "</option>\n";
        }        
        rtn += "</select>";
        return rtn;
    }

    self.storeTabValues = function(tabId){
        for (var i=0; i<self.innerTabInterface.length; i++){
            if (self.innerTabInterface[i].id == tabId){
                for (var j=0; j<self.innerTabInterface[i].ctls.length; j++){
                    if (self.innerTabInterface[i].ctls[j].type == "control"){
                        self.innerTabInterface[i].ctls[j].value = self.innerTabInterface[i].ctls[j].ctl.value;
                    }else if(self.innerTabInterface[i].ctls[j].id == "applyBtn"){
                        self.innerTabInterface[i].ctls[j].disabledState = false;
                    }
                }
             }
          }
        self.ctlRef["applyBtn"].disabled = false;
    }
  

  }