source: TI05-delivery/ows_framework/trunk/ows_server/ows_server/templates/viewItems.kid @ 3588

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/TI05-delivery/ows_framework/trunk/ows_server/ows_server/templates/viewItems.kid@3588
Revision 3588, 4.3 KB checked in by cbyrom, 13 years ago (diff)

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.

Line 
1<html py:extends="'ndgPage.kid','meta.kid'" xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#">
2<head>
3<link type="text/css" rel="stylesheet" href="/layout/ddc_style.css"/>
4<link type="text/css" rel="stylesheet" href="/layout/ddc_vis.css"/>
5
6<!-- BEGIN: Yahoo Interface Library -->
7<link type="text/css" rel="stylesheet"
8        href="/js/yui/treeview/assets/skins/sam/treeview.css"/>
9         
10<!-- Dependency source files --> 
11<script src = "js/yui/yahoo/yahoo-min.js" ></script> 
12<script src = "js/yui/event/event-min.js" ></script> 
13 
14<!-- TreeView source file --> 
15<script src = "js/yui/treeview/treeview-min.js" ></script> 
16
17<!-- TreeView Menu Style -->
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
29<!-- END: Yahoo Interface Library -->
30
31<!-- BEGIN: WMSC library -->
32<link type="text/css" rel="stylesheet" href="/layout/control.css"/>
33
34<script src="js/wmsc.js"></script>
35<script src="js/prototype.js"></script>
36<script src="js/xpath.js"></script>
37<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
38<script src="js/openlayers-x.js"></script>
39<script src="js/capabilities.js"></script>
40<script src="js/wmscControl.js"></script>
41<script src="js/vis-app.js"></script>
42      <script src="js/OLMapBox.js"/>
43<!-- END: WMSC library -->
44
45<!-- DDC specialisation of WMSC -->
46<script src="js/ddc-control.js"></script>
47
48<script type="text/javascript">
49
50// Hook into application for debugging.   
51var app = null;
52var control = null;
53
54function init()
55{
56    control = new WMSC.Control('layerTree', 'layerLeaves', 'dims');
57    <for py:for="i in session['viewItems']" class="dataset" py:strip="True">
58        <span py:if="i.wmcURL" py:strip="True">
59                control.addWebMapContext('viewItems', '${i.wmcURL}');
60            </span>
61    </for>
62
63    app = new WMSC.VisApp('map', control);
64    control.events.register('changeWMS', null, updateDescription);
65}
66
67function cleanup()
68{
69    app.destroy();
70}
71
72function updateDescription()
73{
74    $('description').innerHTML = control.getStateDescription().join('<br/>');
75}
76
77</script>
78
79<replace py:replace="pagehead()"/>
80</head>
81
82<body onload="init()" onunload="cleanup()">
83        <div id="entirepage">
84    <div py:replace="header()"/>
85        <div py:replace="PageTabs('View')"/>
86    <div py:replace="searchOneLine()"/>
87
88<div id="visBody">
89<table>
90  <tr>
91    <td>
92        <div id="mapBox">
93                        <div id="map"></div>
94                        <div id="legend"></div>
95                </div>
96    </td>
97    <td valign="top">
98      <div class="optDiv">
99        <b>Selection Description</b>
100        <div id="description">
101          Complete your selection below to view.
102        </div>
103      </div>
104      <div class="optDiv">
105        <b>Domain</b>
106        <div id="dims"></div>
107      </div>
108      <div class="optDiv">
109        <form id="figureForm">
110          <b>Plot type</b><br/>
111          <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
112          <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
113          <b>Format</b><br/>
114          <select name="figFormat">
115            <option value="image/png" name="figFormat" selected="1"> PNG </option>
116            <option value="image/jpeg" name="figFormat"> JPEG </option>
117            <option value="application/postscript" name="figFormat"> EPS </option>
118            <option value="image/svg+xml" name="figFormat"> SVG </option>
119          </select>
120          <input type="button" value="Make Figure"
121                onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/>
122        </form>
123      </div>
124    </td>
125  </tr>
126</table>
127
128<table class="controlTable">
129<tr class="controlHeadings">
130<th>Dataset</th><th>Layer</th>
131</tr>
132<tr>
133<td class="controlPanel"><div class="controlContent" id="layerTree">
134        Please wait while datasets load</div>
135</td>
136<td class="controlPanel">
137        <div class="controlContent" id="layerLeaves">
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>
145        </div>
146</td>
147</tr>
148</table>
149
150</div>
151</div>
152</body>
153</html>
Note: See TracBrowser for help on using the repository browser.