Changeset 5505 for cowsclient


Ignore:
Timestamp:
23/07/09 11:58:59 (10 years ago)
Author:
pnorton
Message:

Split the layer parameters objects content up into 3 different object, layerDimensions, layerInfo and layerDisplayOptions. This was done to simplify the code and to allow the display options to be re-built when the style is changed.

Location:
cowsclient/branches/qesdi/cowsclient
Files:
4 added
8 deleted
3 edited

Legend:

Unmodified
Added
Removed
  • cowsclient/branches/qesdi/cowsclient/public/js/layerParameters.js

    r5502 r5505  
     1/** 
     2 * @requires Openlayer.Event 
     3 * @requires DisplayOptionsRetriever 
     4 * @requires utils 
     5 *  
     6 */ 
     7 
     8/** 
     9 * The LayerParameters manages the content of style properties, display options 
     10 * and the dimensions forms and updates them so that they remain consisntent  
     11 * with the currently selected layer. 
     12 *  
     13 * It also has the ability to show/hide all of the forms via the properties div. 
     14 * @constructor 
     15 */ 
    116LayerParameters = function(propertiesDivId, selectionFormId, wmcRetriever) { 
     17     
     18     
     19    this.layerDisplay = new LayerDisplayOpts(selectionFormId); 
     20    this.layerInfo = new LayerInfo('layer_info_form'); 
     21    this.layerDims = new LayerDimensions('WMSC_dimForm'); 
     22     
    223    this.propertiesDiv = document.getElementById(propertiesDivId); 
    3     this.selectionForm = document.getElementById(selectionFormId); 
    4     this.currentLayer = null; 
     24 
     25    this.currentOLLayer = null; 
     26    this.currentWMCLayer = null; 
    527    this.wmcRetriever = wmcRetriever; 
    6      
    7     this.displayOptsRetriever = new DisplayOptionsRetriever(); 
    8      
    9     this.dimFormID = 'WMSC_dimForm'; 
    10     this.hideControls(); 
    11      
    12     this.styleSelectFormId = 'style_select'; 
    13     this.styleSelectForm = document.getElementById(this.styleSelectFormId); 
    14  
    15      
     28         
    1629    this.events = new OpenLayers.Events(this, null, this.EVENTS_RAISED); 
    1730     
    18     this._selectionEventHandlers = {}; 
     31    this.layerDisplay.addCurrentWMCLayerChangedHandlers(this.events); 
     32    this.layerInfo.addCurrentWMCLayerChangedHandlers(this.events); 
     33    this.layerDims.addCurrentWMCLayerChangedHandlers(this.events); 
    1934     
     35    // monitor all the parameter changes 
     36    this.layerDisplay.events.register('LAYER_DISPLAY_CHANGED', this, this.onParamChange); 
     37    this.layerInfo.events.register('LAYER_STYLE_CHANGED', this, this.onParamChange); 
     38    this.layerDims.events.register('LAYER_DIMENSION_CHANGED', this, this.onParamChange); 
     39     
     40    // also need to let the display options know if the style has changed. 
     41    this.layerDisplay.addStyleChangedEvent(this.layerInfo.events);     
    2042} 
    2143 
    2244LayerParameters.prototype = { 
    2345         
    24         EVENTS_RAISED: ['LAYER_PROPERTY_CHANGED'], 
     46        EVENTS_RAISED: ['LAYER_PROPERTY_CHANGED', 'CURRENT_WMCLAYER_CHANGED'], 
    2547         
    26     addChangedListeners: function(form) { 
    27      
    28         for (var i=0; i< form.elements.length; i++) { 
    29                 element = form.elements[i]; 
     48    onParamChange: function (e) { 
    3049 
    31             handler = addHTMLEventListener(element, 'change', this.onSelectionChange, this); 
    32             this._selectionEventHandlers[element.id] = handler; 
     50        if (this.currentOLLayer != null) { 
     51            this.currentOLLayer.params[e.param.toUpperCase()] = e.value; 
     52            this.currentOLLayer.redraw(); 
    3353        } 
    3454 
     55        this.events.triggerEvent("LAYER_PROPERTY_CHANGED", {layer:this.currentOLLayer}); 
     56         
     57    },     
     58     
     59    /** 
     60     * registers the @see #onSelectedLayerChanged method to the SELECTED_LAYER_CHANGED 
     61     * event. 
     62     */ 
     63    addLayerListHandlers: function (events) { 
     64        events.register("SELECTED_LAYER_CHANGED", this, this.onSelectedLayerChanged); 
    3565    }, 
    36      
    37     removeChangedListeners: function() { 
     66 
     67    /** 
     68     * Handles the SELECTED_LAYER_CHANGED event, when the layer is changed the current 
     69     * controls are removed and new ones corresponding to the new layer are created. 
     70     *  
     71     * This also updates the this.currentLayer property. 
     72     */ 
     73    onSelectedLayerChanged: function(e) { 
     74                 
     75        this.currentOLLayer = e.layer; 
     76        this.currentWMCLayer = null; 
    3877         
    39          
    40         for (id in this._selectionEventHandlers) { 
    41 //            console.log("removing listeners form element " + id); 
    42                 element = document.getElementById(id); 
    43                 handler = this._selectionEventHandlers[id]; 
    44                  
    45                 if (handler != null) { 
    46                         removeHTMLEventListener(element, 'change', handler); 
    47                 } 
     78        if (e.layer == null) { 
     79            this.events.triggerEvent('CURRENT_WMCLAYER_CHANGED', {olLayer:null, 
     80                                                                  wmcLayer:null}); 
     81        } else { 
     82            this.updateControls(); 
    4883        } 
    4984 
    5085    }, 
    5186 
    52     onSelectionChange: function (e, target) { 
    53         param = target.id.substr(7); 
    54  
    55         if (this.currentLayer != null) { 
    56             this.currentLayer.params[param.toUpperCase()] = target.value; 
    57             //alert("param " + param.toUpperCase() + " = " + this.currentLayer.params[param.toUpperCase()] ); 
    58             this.currentLayer.redraw(); 
    59         } 
    60  
    61         this.events.triggerEvent("LAYER_PROPERTY_CHANGED", {layer:this.currentLayer}); 
    62          
     87    /** 
     88     * Hides the properties div 
     89     */ 
     90    hideControls: function() { 
     91        this.propertiesDiv.style.display = 'none'; 
    6392    }, 
    6493 
    65     addLayerListHandlers: function (events) { 
    66         events.register("SELECTED_LAYER_CHANGED", this, this.onSelectedLayerChanged); 
    67     }, 
    68  
    69     onSelectedLayerChanged: function(e) { 
    70          
    71         if (this.currentLayer != null) { 
    72                 this.removeChangedListeners(); 
    73         } 
    74          
    75         this.currentLayer = e.layer; 
    76  
    77         if (e.layer != null) { 
    78             this.showControls(); 
    79  
    80         } else { 
    81             this.hideControls(); 
    82         } 
    83  
    84     }, 
    85  
    86     selectValuesForCurrentLayer: function() { 
    87          
    88         this._setValuesFromForm(this.selectionForm); 
    89         this._setValuesFromForm($(this.dimFormID)); 
    90         this._setValuesFromForm(this.styleSelectForm); 
    91                  
    92         $('layer_url').innerHTML = this.currentLayer.url; 
    93         $('layer_name').innerHTML = this.currentLayer.params['LAYERS']; 
    94          
    95     }, 
    96  
    97     _setValuesFromForm: function(form) { 
    98         var elements = form.elements; 
    99          
    100         for (var i=0; i< elements.length; i++){ 
    101             param = elements[i].id.substr(7); 
    102  
    103             val = this.currentLayer.params[param.toUpperCase()]; 
    104             if (val != undefined) { 
    105                 elements[i].value = val; 
    106             } 
    107         } 
     94    /** 
     95     * Shows the properties div and re-builds all of the controls in it 
     96     */ 
     97    showControls: function() { 
     98        this.propertiesDiv.style.display = 'block'; 
    10899    }, 
    109100     
    110     hideControls: function() { 
    111         this.propertiesDiv.style.display = 'none'; 
    112          
    113         //clear the select controls 
    114     }, 
    115  
    116     showControls: function() { 
    117         this.propertiesDiv.style.display = 'block'; 
    118          
    119         successFn =this.buildControls.bindAsEventListener(this); 
    120          
    121         this.wmcRetriever.getWMC(this.currentLayer.url, successFn) 
    122  
     101    updateControls: function() { 
     102        successFn =this.buildControls.bindAsEventListener(this);    
     103        this.wmcRetriever.getWMC(this.currentOLLayer.url, successFn); 
    123104    }, 
    124105     
     106    /** 
     107     * Builds all the controls in the properties div using a WebMapCapabilities 
     108     * object. 
     109     */ 
    125110    buildControls: function(wmc) { 
    126111                         
    127112        //find the dimensions for the layer 
    128113        var wmcLayer = this.searchSubLayers(wmc.getSubLayers()); 
    129                  
    130         //add the style selection 
    131         this.buildStyleSelection(wmcLayer); 
    132114         
    133         //add the display options (if set) 
    134         dispURL = wmcLayer.getDisplayOptionsURL(); 
    135          
    136         if (dispURL != null) { 
    137              
    138             successFn =this._buildDisplayOptions.bindAsEventListener(this); 
    139              
    140             this.displayOptsRetriever.getDisplayOptions(dispURL, successFn ); 
    141         } 
    142          
    143         //build the select controls 
    144                 this.updateDomainDiv(wmcLayer.getDimensions()); 
    145  
     115        this.currentWMCLayer = wmcLayer; 
     116        this.events.triggerEvent('CURRENT_WMCLAYER_CHANGED', {olLayer:this.currentOLLayer, 
     117                                                              wmcLayer:this.currentWMCLayer}) 
    146118    }, 
    147119     
     120    /** 
     121     * Searches a list of WMC.Layer objects to find the one that corresponds 
     122     * to the current layer.  
     123     *  
     124     * @returns The WMC.Layer object corresponding to the currently selected layer 
     125     */ 
    148126    searchSubLayers: function(subLayers){ 
    149127        var wmcLayer = null; 
     
    151129        for (var i=0; i<subLayers.length; i++) { 
    152130                 
    153                         if (subLayers[i].getName() == this.currentLayer.params['LAYERS']){ 
     131                        if (subLayers[i].getName() == this.currentOLLayer.params['LAYERS']){ 
    154132                                wmcLayer = subLayers[i]; 
    155133                                break; 
     
    159137        return wmcLayer; 
    160138    }, 
    161      
    162     updateDomainDiv: function(dims)  
    163     { 
    164         //this.currentDims = dims; 
    165         //this._selectedDims={}; //added by domlowe - this clears out any dims left over from previous layers 
    166         //this.wmsParams={}; //and same for wms params 
    167                 var div, i; 
    168139 
    169                 $(this.dimFormID).innerHTML = ''; 
    170                 for (id in dims)  
    171                 { 
    172                 div = document.createElement('div'); 
    173                 div.innerHTML = '<b>'+dims[id].getName()+'</b> ' 
    174                  
    175                 extent = dims[id].getExtent(); 
    176              
    177                     var values = []; 
    178                     var descriptions = []; 
    179                      
    180                 for (i=0; i<extent.length; i++) { 
    181                     descriptions.push(this.getDimensionText(dims[id], extent[i])); 
    182                     values.push(extent[i]); 
    183                 } 
    184  
    185                 var select = this._buildSelect(id, descriptions, values); 
    186                 addHTMLEventListener(select, 'change', this.onSelectionChange, this); 
    187  
    188                 div.appendChild(select); 
    189                  
    190                 $(this.dimFormID).appendChild(div); 
    191                 } 
    192     }, 
    193    
    194      
    195     getDimensionText: function(dim, value) { 
    196         return value; 
    197     }, 
    198      
    199     buildStyleSelection: function(layer) { 
    200          
    201  
    202                 
    203  
    204         this._buildStyleSelector(layer); 
    205  
    206         this.addChangedListeners(this.styleSelectForm); 
    207         this.selectValuesForCurrentLayer(); 
    208  
    209          
    210     }, 
    211      
    212     _buildDisplayOptions: function(displayOptions) { 
    213         this.selectionForm.innerHTML = ''; 
    214         this.selectionForm.appendChild(this._buildDisplayOptionsList(displayOptions.common)); 
    215          
    216         this.addChangedListeners(this.selectionForm); 
    217         this.selectValuesForCurrentLayer();      
    218     }, 
    219      
    220     _buildDisplayOptionsList: function(optionsList) { 
    221         var div = document.createElement('div'); 
    222         div.innerHTML = '<b>Display Options</b> <br /> '; 
    223  
    224         for (var i=0; i< optionsList.length; i++) { 
    225             var opt = optionsList[i]; 
    226 //            console.log("opt.name = " + opt.name + " opt.type = " + opt.type); 
    227              
    228             if (opt.type == 'select') { 
    229                 div.appendChild(this._buildDisplayOptionSelect(opt)); 
    230             }  
    231             else if (opt.type == 'value') { 
    232                 div.appendChild(this._buildDisplayOptionValue(opt)); 
    233             } 
    234         } 
    235          
    236         return div 
    237     }, 
    238      
    239     _buildDisplayOptionSelect: function(opt) { 
    240         div = document.createElement('div'); 
    241         div.innerHTML = '<b>'+ opt.name +':</b> '; 
    242         select = this._buildSelect(opt.name , opt.options, opt.options); 
    243         div.appendChild(select); 
    244         return div 
    245     }, 
    246      
    247     _buildDisplayOptionValue: function(opt) { 
    248         div = document.createElement('div'); 
    249         div.innerHTML = '<b>'+ opt.name +':</b> '; 
    250         var input = document.createElement('input'); 
    251         input.id = 'select_' + opt.name; 
    252         input.name = 'select_' + opt.name; 
    253         input.type = 'text'; 
    254         input.value = ''; 
    255          
    256         div.appendChild(input); 
    257         return div 
    258     }, 
    259      
    260     _buildStyleSelector: function(layer) { 
    261              
    262         this.styleSelectForm.innerHTML = '<b>Style:</b> '; 
    263         var values = []; 
    264         var descriptions = []; 
    265          
    266         for (var i=0;i<layer.getStyles().length; i++) { 
    267             var style = layer.getStyles()[i]; 
    268             values.push(style.name); 
    269             descriptions.push(style.title); 
    270         } 
    271         select = this._buildSelect('styles', descriptions, values); 
    272          
    273         this.styleSelectForm.appendChild(select); 
    274     }, 
    275      
    276     _buildSelect: function(id, descritptions, values) { 
    277         var select = document.createElement('select'); 
    278         select.name = id; 
    279         select.id = 'select_' + id 
    280          
    281         for(var i=0; i<values.length; i++) { 
    282             option = document.createElement('option'); 
    283             option.innerHTML = descritptions[i]; 
    284             // Required for IE6 
    285             option.value = values[i]; 
    286             select.appendChild(option); 
    287         } 
    288          
    289         return select; 
    290     }, 
    291140} 
  • cowsclient/branches/qesdi/cowsclient/public/js/utils.js

    r5480 r5505  
    2727        return function(e) {fn.apply(scope,[e]); } 
    2828} 
     29 
     30 
     31buildSelectBox = function(id, descritptions, values, defaultVal) { 
     32    var select = document.createElement('select'); 
     33    select.name = id; 
     34    select.id = 'select_' + id 
     35     
     36    for(var i=0; i<values.length; i++) { 
     37        option = document.createElement('option'); 
     38        option.innerHTML = descritptions[i]; 
     39        // Required for IE6 
     40        option.value = values[i]; 
     41        select.appendChild(option); 
     42    } 
     43                 
     44    // select the default value 
     45    if (defaultVal != null && defaultVal != undefined) { 
     46        for (var i=0; i<values.length; i++) { 
     47            if (values[i] == defaultVal) { 
     48                select.selectedIndex = i; 
     49                break; 
     50            } 
     51        } 
     52    }      
     53     
     54    return select; 
     55} 
     56 
     57 
     58buildLabelInputDiv = function(labelText, inputElement, divClass, labelClass) { 
     59    var div = document.createElement("div"); 
     60    if (divClass != undefined) { 
     61        div.className = divClass; 
     62    } 
     63     
     64    var label = document.createElement("label"); 
     65    if (labelClass != undefined) { 
     66        label.className = labelClass; 
     67    } 
     68     
     69    label.innerHTML = labelText; 
     70    div.appendChild(label); 
     71    div.appendChild(inputElement); 
     72     
     73    return div; 
     74} 
     75 
     76addHandlerToFormElements = function(form, eventName, handlerFunction, scope) { 
     77    var handlerLookup = {}; 
     78     
     79    for (var i=0; i< form.elements.length; i++) { 
     80        var element = form.elements[i]; 
     81 
     82        handlerLookup[element.id] = addHTMLEventListener(element, eventName,  
     83                                                         handlerFunction, scope); 
     84    } 
     85     
     86    return handlerLookup; 
     87} 
     88 
     89removeEventHandlersFromLookup = function(lookup) { 
     90     
     91    for (id in lookup) { 
     92        element = document.getElementById(id); 
     93        handler = lookup[id]; 
     94         
     95        if (handler != null) { 
     96            removeHTMLEventListener(element, 'change', handler); 
     97        } 
     98    } 
     99 
     100} 
  • cowsclient/branches/qesdi/cowsclient/templates/wmsviz.html

    r5502 r5505  
    3131<script type="text/javascript" src="$g.server/js/yui/dragdrop/dragdrop.js" ></script> 
    3232 
    33 <script type="text/javascript" src="$g.server/js/toggleDiv.js" ></script> 
    3433 
    3534<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/> 
     
    5756 
    5857<script src="$g.server/js/layerList.js"></script> 
     58 
     59<!-- The layer properties stuff --> 
     60 
     61<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" /> 
     62 
     63<script src="$g.server/js/layerInformation.js"></script> 
     64<script src="$g.server/js/layerDisplayOptions.js"></script> 
     65<script src="$g.server/js/layerDimensions.js"></script> 
    5966<script src="$g.server/js/layerParameters.js"></script> 
     67 
    6068<script src="$g.server/js/legendContainer.js"></script> 
    6169<script src="$g.server/js/boundsControl.js"></script> 
     
    8391 
    8492    var wmcRetriever = new WMCRetriever(); 
    85                  
     93         
    8694        var layerList = new LayerList('layer_list'); 
    87     var layerParameters = new LayerParameters('parameters_select', 'selection_form', wmcRetriever); 
    88  
     95         
     96    var layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever); 
     97    console.log("loaded layer params"); 
    8998    var legendContainer = new LegendContainer('legend'); 
    9099     
    91100    var boundsControl = new WMSC.BoundsControl('dims'); 
    92     //var coordControl = new WMSC.DimControl('dims'); 
    93101     
    94102    var coordControl = null; 
     
    111119 
    112120    app.addBoundsControl(boundsControl); 
    113  
    114 //    app.addDimensionControl(coordControl); 
    115 //    app.addLayerControl(layerControl); 
    116121 
    117122    if (document.getElementById('wcsdownload') == null) { 
     
    251256                        </td> 
    252257            <td class="controlPanel"> 
    253                             <div id="parameters_select"> 
    254  
    255                 URL   : <span id='layer_url'> </span> <br /> 
    256                 Layers: <span id='layer_name'> </span> <br /> 
    257                             <br /> 
    258                              
    259                 <form id='style_select'> 
    260                 </form> 
    261                                              
    262                             <form id='selection_form'> 
    263                             </form> 
    264                              
    265                             Dimensions: 
    266                             <form id="WMSC_dimForm"> 
    267                             </form> 
     258             
     259                            <div id="layer_properties"> 
     260                     
     261                     
     262                     
     263                            <div id="layer_info_container"> 
     264                                       <form id='layer_info_form'> 
     265                                       </form> 
     266                                    </div> 
     267         
     268                            <div id="layer_display_options_container">       
     269                                                    <form id='selection_form'> 
     270                                                    </form> 
     271                                            </div> 
     272                                             
     273                                            <div id="layer_dimensions_container"> 
     274                                                    <form id="WMSC_dimForm"> 
     275                                                    </form> 
     276                                            </div> 
     277                                             
     278                     
    268279                            </div> 
    269280            </td> 
Note: See TracChangeset for help on using the changeset viewer.