source: CMIP6dreqbuild/trunk/src/framework/websiteExtras/mipVars.html @ 742

Subversion URL: http://proj.badc.rl.ac.uk/svn/exarch/CMIP6dreqbuild/trunk/src/framework/websiteExtras/mipVars.html@742
Revision 742, 6.8 KB checked in by mjuckes, 3 years ago (diff)

corrected mipVars.html

Line 
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5  <link rel="stylesheet" href="/css/SlickGrid/jquery-ui-1.8.16.custom.css" type="text/css"/>
6  <link rel="stylesheet" href="/css/SlickGrid/slick.grid.css" type="text/css"/>
7  <link rel="stylesheet" href="/css/SlickGrid/slick.css" type="text/css"/>
8  <style>
9    .slick-headerrow-column {
10      background: #87ceeb;
11      text-overflow: clip;
12      -moz-box-sizing: border-box;
13      box-sizing: border-box;
14    }
15
16    .slick-headerrow-column input {
17      margin: 0;
18      padding: 0;
19      width: 100%;
20      height: 100%;
21      -moz-box-sizing: border-box;
22      box-sizing: border-box;
23    }
24  </style>
25
26</head>
27<body>
28<link rel="stylesheet" type="text/css" href="css/dreq.css">
29</head><body>
30
31<div id="top">
32   <div id="corner"></div>
33   CMIP6 Data Request
34</div>
35<div id="nav" style="height:600px"><div><a href="index.html" title="Home">Home</a></div></div>
36
37<div id="section">
38    <h1>MIP Variables -- search</h1>
39
40<a id="export" class="myButton" download="" href="#">export</a>
41<center><it><sm>Powered bc <a href="https://github.com/mleibman/SlickGrid/">SlickGrid</a> JavaScript</sm></it></center>
42<div>
43  <div class="info-panel">
44      <p>The search allows records to be filtered based on short name, long name, standard name, units or unique identifier.</p>
45<p>
46      Type text in boxes at column heads to filter grid; Preface term with "$" to match start of record;
47       Preface list of words with "&" to show only records that match all words.
48      <a href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html" target="_sourcewindow">Based on this example on Github</a>.
49</p>
50  </div>
51
52  <div style="width:1100px;">
53    <div id="myGrid" style="width:100%;height:500px;"></div>
54  </div>
55</div>
56</div>
57
58<script src="/js/SlickGrid/lib/firebugx.js"></script>
59
60<script src="/js/SlickGrid/lib/jquery-1.7.min.js"></script>
61<script src="/js/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
62<script src="/js/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
63
64<script src="/js/SlickGrid/slick.core.js"></script>
65<script src="/js/SlickGrid/slick.dataview.js"></script>
66<script src="/js/SlickGrid/slick.gridP.js"></script>
67
68<script src="data/mipVarsData.js"></script>
69<script>
70var urlParams;
71(window.onpopstate = function () {
72    var match,
73        pl     = /\+/g,  // Regex for replacing addition symbol with a space
74        search = /([^&=]+)=?([^&]*)/g,
75        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
76        query  = window.location.search.substring(1);
77
78    urlParams = {};
79    while (match = search.exec(query))
80       urlParams[decode(match[1])] = decode(match[2]);
81})();
82</script>
83
84<script>
85  var dataView;
86  var grid;
87  var options = {
88    showHeaderRow: true,
89    headerRowHeight: 30,
90    explicitInitialization: true,
91    enableCellNavigation: true
92  };
93  var columnFilters = {};
94
95  var columns = getData.cols();
96
97  var data = getData.data();
98  function colFilter( t, s ) {
99          var res = t.split(" ");
100          for (i = 0; i < res.length; i++) {
101            if (s.indexOf(res[i]) !== -1 ) {
102               return true;
103             }
104          }
105          return false;
106      }
107  function colAndFilter( t, s ) {
108          var res = t.split(" ");
109          for (i = 0; i < res.length; i++) {
110            if (s.indexOf(res[i]) === -1 ) {
111               return false;
112             }
113          }
114          return true;
115      }
116  function filter(item) {
117    for (var columnId in columnFilters) {
118      if (columnId !== undefined && columnFilters[columnId] !== "") {
119        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
120        var t = columnFilters[columnId].toLowerCase()
121        var s = item[c.field].toLowerCase()
122        if (t.substr(0,1) == '$') {
123          if ( s.substr(0,t.length-1) != t.substr(1,t.length) ) {
124            return false;
125          }
126        } else if (t.substr(0,1) == '&') {
127            if (!colAndFilter(t.substr(1,t.length),s) ) {
128               return false;
129            }
130        } else {
131/**
132            if (s.indexOf(t) === -1 ) {
133               return false;
134            }
135***/
136            if (!colFilter(t,s) ) {
137               return false;
138            }
139        }
140      }
141    }
142    return true;
143  }
144
145  /*** function to enable download of selected items. Passed to dataView below.
146 ... could replace items with getItems and place assignment in anchorSelector.onclick/click
147  ***/
148  function createDownloadLink(items){
149        var anchorSelector = "#export";
150        var fileName = "selected_json.txt";
151        if(window.navigator.msSaveOrOpenBlob) {
152            blobObject = new Blob(items.json());
153            $(anchorSelector).click(function(){
154                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
155            });
156        } else {
157            /***
158             var url = "data:text/plain;charset=utf-8," + encodeURIComponent(items());
159             $(anchorSelector).attr("download", fileName);
160             $(anchorSelector).attr("href", url);
161           ***/
162            $(anchorSelector).click( function(){
163            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(items.json());
164            $(anchorSelector).attr("download", fileName);
165            $(anchorSelector).attr("href", url);
166           });
167        }
168  }
169
170  $(function () {
171    dataView = new Slick.Data.DataView();
172    grid = new Slick.Grid("#myGrid", dataView, columns, options);
173
174    dataView.onRowCountChanged.subscribe(function (e, args) {
175      grid.updateRowCount();
176      grid.render();
177    });
178
179    dataView.onRowsChanged.subscribe(function (e, args) {
180      grid.invalidateRows(args.rows);
181      grid.render();
182    });
183
184    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
185      var columnId = $(this).data("columnId");
186      if (columnId != null) {
187        columnFilters[columnId] = $.trim($(this).val());
188        dataView.refresh();
189      }
190    });
191
192    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
193        $(args.node).empty();
194        $("<input type='text'>")
195           .data("columnId", args.column.id)
196           .val(columnFilters[args.column.id])
197           .appendTo(args.node);
198    });
199
200    grid.init();
201
202    dataView.beginUpdate();
203    dataView.setItems(data);
204
205    dataView.setDownl(createDownloadLink);
206    dataView.setFilter(filter);
207
208    dataView.endUpdate();
209
210  /*** this writes text to the input box, but fails to trigger the filter action ...
211  Multiple variations of trigger, onchange etc tried ....
212  Explicit setting of columnFilters appears to be critical here.
213  ***/
214    if ("variable" in urlParams) {
215      document.getElementsByTagName("input")[0].value = urlParams["variable"] ;
216      columnFilters[0] = urlParams["variable"] ;
217      dataView.refresh();
218      };
219
220  })
221
222
223</script>
224<script>
225
226</script>
227</body>
228</html>
Note: See TracBrowser for help on using the repository browser.