Changeset 3588 for TI05-delivery


Ignore:
Timestamp:
11/03/08 17:13:29 (11 years ago)
Author:
cbyrom
Message:

Add code to utilise the new drag and drop control - allowing layers
to be selected from the viewItems tab treeviews. These then populate
a list which can be re-ordered by dragging and dropping. Also the
items can be deleted one at a time. Supporting icons and stylesheet
added.

Location:
TI05-delivery/ows_framework/trunk/ows_server/ows_server
Files:
3 added
2 edited

Legend:

Unmodified
Added
Removed
  • TI05-delivery/ows_framework/trunk/ows_server/ows_server/public/js/wmscControl.js

    r3547 r3588  
    2929    // The WMS domain and layer parameters of the current selection 
    3030    wmsParams: null, 
     31     
     32    // The number of layers currently displayed 
     33    layerNo: 0, 
    3134 
    3235    initialize: function(treeDiv, layerDiv, domainDiv)  
     
    112115                        this.tree.getRoot(),  
    113116                        treeNode); 
    114 /* 
    115                         treeNode.data.label = wmc.getTitle(); 
    116                         treeNode.label = wmc.getTitle(); 
    117                         treeNode.data.abstract = wmc.getTitle(); 
    118 */                       
    119117                this.tree.draw(); 
    120118                }; 
     
    247245                if (node.children.length == 0)  
    248246                { 
    249                 $(this.layerDiv).innerHTML = ''; 
     247                        // check this isn't the 'loading...' leaf; escape if it is 
     248                        if (node.label == "...loading") 
     249                                return; 
     250                                 
    250251                        var params = {REQUEST: 'GetCapabilities', 
    251252                                CONTEXT: treeLayer}; 
     
    256257                                    ENDPOINT: node.data.wmcEndpoint }; 
    257258                        } 
    258                  
     259 
    259260/*               
    260261                new Ajax.Request(this.wmsEndpoint,  
     
    265266                }); 
    266267*/ 
     268                // add the selected layer to the layers panel 
     269                this._updateLeafLayer(); 
    267270                 
    268271                // set the selected layer 
     
    274277                else  
    275278                { 
    276                 $(this.layerDiv).innerHTML = 'Incomplete Selection.  Select a dataset to view available fields'; 
    277                 } 
     279//              $(this.layerDiv).innerHTML = 'Incomplete Selection.  Select a layer to view'; 
     280                } 
     281    }, 
     282     
     283    // respond to the user clicking on the delete icon for layer - by removing this layer 
     284    _removeLayer: function(evt) 
     285    { 
     286                var delIcon = Event.element(evt); 
     287 
     288                // get the layer number from the icon ID 
     289                layerIndex = delIcon.id.substring(delIcon.id.indexOf("_") + 1, delIcon.id.length);                   
     290        alert('blah' + layerIndex); 
     291         
     292        layer = document.getElementById("li_" + layerIndex); 
     293         
     294        // now remove this layer 
     295        layer.parentNode.removeChild(layer); 
     296         
     297        // reduce the layer counter 
     298        this.layerNo--; 
     299    }, 
     300     
     301    _updateLeafLayerMessage: function() 
     302    { 
     303                // Adjust message displayed in the leaf layer panel according to the current context 
     304                message = document.getElementById("layerMessage"); 
     305                messageText = ''; 
     306 
     307                if (this.layerNo > 1) 
     308            { 
     309                messageText = 'Adjust display order of layers by dragging and dropping them'; 
     310            } 
     311            else if (this.layerNo == 0) 
     312            { 
     313                messageText = 'Expand a dataset and select a layer to view'; 
     314            } 
     315            message.innerHTML = messageText; 
    278316    }, 
    279317     
     
    283321        // load this info, if not, load the capabilities 
    284322        var node = this._selectedTreeNode; 
    285         var leaves; 
    286             if (node.data.wmcEndpoint != null) 
     323 
     324                layers = document.getElementById("layerlist"); 
     325            this.layerNo++;// = layers.childNodes.length; 
     326            if (this.layerNo >= 10) 
    287327            { 
    288                 var wmc = new WMSC.WebMapContext(xhr.responseXML.documentElement); 
    289                 leaves = wmc.getSubLayers(); 
    290                 } 
    291                 else 
    292                 { 
    293                         this.leafCapabilities = new WMSC.Capabilities(xhr.responseXML.documentElement); 
    294                         leaves = this.leafCapabilities.getRootLayer().getSubLayers(); 
    295                 }     
    296  
     328                alert('Can only select 10 layers at once; please delete an existing layer and try again.'); 
     329                this.layerNo--; 
     330                return; 
     331            } 
     332             
     333            this._updateLeafLayerMessage(); 
     334                                 
    297335                // Populate the leafLayer div 
    298                 for (i=0; i<leaves.length; i++)  
    299                 { 
    300                 layer = leaves[i]; 
    301                     leafDiv = document.createElement('div'); 
    302                     leafDiv.innerHTML = '<a class="WMSC_leafLayer">' + 
    303                         layer.getTitle() + '</a>'; 
     336            leafDiv = document.createElement('div'); 
     337            leafDiv.innerHTML =  
     338                '<li class="list" id="li_' + this.layerNo + '"><table><tr><td class="layerTitle">' + node.data.label + 
     339                '</td><td class="delIcon"><img id="del_' + this.layerNo + '" src="js/img/close.gif" />' + 
     340                '</td></tr></table></li>'; 
     341                layers.appendChild(leafDiv); 
    304342             
    305                     Event.observe(leafDiv.firstChild,  
    306                         'click', this._makeTreeNodeListener(layer)); 
    307              
    308                 $(this.layerDiv).appendChild(leafDiv); 
    309                 } 
     343            deleteIcon = document.getElementById("del_" + this.layerNo); 
     344            deleteIcon.onclick = this._removeLayer.bindAsEventListener(this); 
    310345    }, 
    311346     
  • TI05-delivery/ows_framework/trunk/ows_server/ows_server/templates/viewItems.kid

    r3547 r3588  
    1616 
    1717<!-- TreeView Menu Style --> 
    18 <link   rel="stylesheet" type="text/css" href="/js/yui/treeview/assets/treeview-menu.css"/>  
     18<link rel="stylesheet" type="text/css" href="/js/yui/treeview/assets/treeview-menu.css"/>  
     19 
     20<link rel="stylesheet" type="text/css" href="/js/yui/fonts/fonts-min.css?_yuiversion=2.5.0" /> 
     21<script type="text/javascript" src="/js/yui/utilities/utilities.js?_yuiversion=2.5.0"></script> 
     22 
     23<script type="text/javascript" src="/js/yui/yahoo-dom-event/yahoo-dom-event.js" ></script>  
     24<script type="text/javascript" src="/js/yui/dragdrop/dragdrop-min.js" ></script> 
     25<link type="text/css" rel="stylesheet" href="/layout/drag_drop_style.css"/> 
     26<script src = "js/dragAndDrop.js" ></script>  
     27 
     28 
    1929<!-- END: Yahoo Interface Library --> 
    2030 
     
    118128<table class="controlTable"> 
    119129<tr class="controlHeadings"> 
    120 <th>Dataset</th><th>Field</th> 
     130<th>Dataset</th><th>Layer</th> 
    121131</tr> 
    122132<tr> 
     
    126136<td class="controlPanel"> 
    127137        <div class="controlContent" id="layerLeaves"> 
    128                 Select a dataset to view available fields 
     138                <div id="layerMessage"> 
     139                        Expand a dataset and select a layer to view 
     140                </div> 
     141                <div class="workarea"> 
     142                        <ul class="draglist" id="layerlist"> 
     143                        </ul> 
     144                </div> 
    129145        </div> 
    130146</td> 
Note: See TracChangeset for help on using the changeset viewer.