← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/example-list.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/openlayers/examples/example-list.html
 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
 
2
<html>
 
3
    <head>
 
4
        <!-- This is the example list source: if you are trying to look at the 
 
5
        source of an example, YOU ARE IN THE WRONG PLACE. If you want to view
 
6
        the source of just one example, you can typically choose 
 
7
        "This Frame -> View source" when right clicking on the exmaple. If not,
 
8
        choose to open the example in a new window (via the context menu 
 
9
        click on the link), and view source from there. -->  
 
10
        <title>OpenLayers Examples</title>
 
11
        <link rel="alternate" href="example-list.xml" type="application/atom+xml" />
 
12
        <link rel="stylesheet" href="style.css" type="text/css" />
 
13
        <style type="text/css">
 
14
            html, body {
 
15
                height: 100%;
 
16
                overflow: hidden;
 
17
                margin: 0;
 
18
                padding: 0;
 
19
                line-height: 1.25em;
 
20
            }
 
21
            .ex_container{
 
22
                border-bottom: 1px solid #cccccc;
 
23
            }
 
24
            .ex_container a {
 
25
                text-decoration: none;
 
26
                padding: 5px 1em;
 
27
                display: block;
 
28
            }
 
29
            .ex_container a:hover {
 
30
                background-color: #eeeeee;
 
31
            }
 
32
            .ex_title{
 
33
                display: inline;
 
34
                font-weight: bold;
 
35
                color: #333;
 
36
            }
 
37
            .ex_filename {
 
38
                font-weight: normal;
 
39
                font-size: 0.8em;
 
40
                color: #ccc
 
41
            }
 
42
            .ex_description{
 
43
                color: #222;
 
44
                padding: 3px;
 
45
            }
 
46
            .ex_classes{
 
47
                font-size: .7em;
 
48
                color: grey;
 
49
                display: none;
 
50
            }
 
51
            #toc {
 
52
                width: 30%;
 
53
                height: 100%;
 
54
            }
 
55
            #filter {
 
56
                top: 0px;
 
57
                height: 50px;
 
58
                padding: 10px 1em 10px 1em;
 
59
            }
 
60
            #examples {
 
61
                border-top: 1px solid #cccccc;
 
62
                position: absolute;
 
63
                width: 30%;
 
64
                top: 70px;
 
65
                bottom: 0px;
 
66
                overflow: auto;
 
67
                list-style: none;
 
68
                margin: 0;
 
69
                padding: 0;
 
70
            }
 
71
            #examples ul {
 
72
                list-style: none;
 
73
                margin: 0;
 
74
                padding: 0;
 
75
            }
 
76
            #examples ul li {
 
77
                display: block;
 
78
                margin: 0;
 
79
                padding: 0;
 
80
            }
 
81
            #exwin {
 
82
                position: absolute;
 
83
                top: 0;
 
84
                left: 30%;
 
85
                width: 70%;
 
86
                height: 100%;
 
87
                border: none;
 
88
                border-left: 1px solid #cccccc;
 
89
                margin: 0;
 
90
            }
 
91
        </style>
 
92
        <script type="text/javascript" src="Jugl.js"></script>
 
93
        <script type="text/javascript" src="example-list.js"></script>
 
94
        <script type="text/javascript">
 
95
            // import
 
96
            var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
 
97
            var template, target;
 
98
 
 
99
            function listExamples(examples) {
 
100
                target.innerHTML = "";
 
101
                var node = template.process({
 
102
                    context: {examples: examples},
 
103
                    clone: true,
 
104
                    parent: target
 
105
                });
 
106
                document.getElementById("count").innerHTML = "(" + examples.length + ")";
 
107
            }
 
108
            
 
109
            var timerId;
 
110
            function inputChange() {
 
111
                if(timerId) {
 
112
                    window.clearTimeout(timerId);
 
113
                }
 
114
                var text = this.value;
 
115
                timerId = window.setTimeout(function() {
 
116
                    filterList(text);
 
117
                }, 500);
 
118
            }
 
119
            
 
120
            function filterList(text) {
 
121
                var examples;
 
122
                if(text.length < 2) {
 
123
                    examples = info.examples;
 
124
                } else {
 
125
                    var words = text.split(/\W+/);
 
126
                    var scores = {};
 
127
                    for(var i=0; i<words.length; ++i) {
 
128
                        var word = words[i].toLowerCase()
 
129
                        var dict = info.index[word];
 
130
                        if(dict) {
 
131
                            for(exIndex in dict) {
 
132
                                var count = dict[exIndex];
 
133
                                if(scores[exIndex]) {
 
134
                                    if(scores[exIndex][word]) {
 
135
                                        scores[exIndex][word] += count;
 
136
                                    } else {
 
137
                                        scores[exIndex][word] = count;
 
138
                                    }
 
139
                                } else {
 
140
                                    scores[exIndex] = {};
 
141
                                    scores[exIndex][word] = count;
 
142
                                }
 
143
                            }
 
144
                        }
 
145
                    }
 
146
                    examples = [];
 
147
                    for(var j in scores) {
 
148
                        var ex = info.examples[j];
 
149
                        ex.score = scores[j];
 
150
                        examples.push(ex);
 
151
                    }
 
152
                    // sort examples by first by number of words matched, then
 
153
                    // by word frequency
 
154
                    examples.sort(function(a, b) {
 
155
                        var cmp;
 
156
                        var aWords = 0, bWords = 0;
 
157
                        var aScore = 0, bScore = 0;
 
158
                        for(var i in a.score) {
 
159
                            aScore += a.score[i];
 
160
                            aWords += 1;
 
161
                        }
 
162
                        for(var j in b.score) {
 
163
                            bScore += b.score[j];
 
164
                            bWords += 1;
 
165
                        }
 
166
                        if(aWords == bWords) {
 
167
                            cmp = bScore - aScore;
 
168
                        } else {
 
169
                            cmp = bWords - aWords;
 
170
                        }
 
171
                        return cmp;
 
172
                    });
 
173
                }
 
174
                listExamples(examples);
 
175
            }
 
176
            
 
177
            function showAll() {
 
178
                document.getElementById("keywords").value = "";
 
179
                listExamples(info.examples);
 
180
            }
 
181
            
 
182
            function parseQuery() {
 
183
                var params = {};
 
184
                var list = window.location.search.substring(1).split("&");
 
185
                for(var i=0; i<list.length; ++i) {
 
186
                    var pair = list[i].split("=");
 
187
                    if(pair.length == 2) {
 
188
                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
 
189
                    }
 
190
                }
 
191
                if(params["q"]) {
 
192
                    var input = document.getElementById("keywords");
 
193
                    input.value = params["q"];
 
194
                    inputChange.call(input);
 
195
                }
 
196
            }
 
197
            window.onload = function() {
 
198
                template = new Jugl.Template("template");
 
199
                target = document.getElementById("examples");
 
200
                listExamples(info.examples);
 
201
                document.getElementById("exwin").src = "../examples/example.html";
 
202
                document.getElementById("keywords").onkeyup = inputChange
 
203
                parseQuery();
 
204
            };
 
205
        </script>
 
206
    </head>
 
207
    <body>
 
208
        <div id="toc">
 
209
            <div id="filter">
 
210
                <p>
 
211
                    <label for="keywords">Filter by keywords</label><br />
 
212
                    <input type="text" id="keywords" />
 
213
                    <span id="count"></span><br />
 
214
                    <a href="javascript:void showAll();">show all</a>
 
215
                </p>
 
216
            </div>
 
217
            <div id="examples"></div>
 
218
        </div>
 
219
        <iframe id="exwin" name="exwin" frameborder="0"></iframe>        
 
220
        <div style="display: none;">
 
221
            <ul id="template">
 
222
                <li class="ex_container" jugl:repeat="example examples">
 
223
                    <a jugl:attributes="href example.link" target="exwin">
 
224
                        <h5 class="ex_title">
 
225
                            <span jugl:replace="example.title">title</span><br />
 
226
                            <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
 
227
                        </h5>
 
228
                        <div class="ex_description" jugl:content="example.shortdesc">
 
229
                            Short Description goes here
 
230
                        </div>
 
231
                        <p class="ex_classes" jugl:content="example.classes">
 
232
                            Related Classes go here
 
233
                        </p>
 
234
                    </a>
 
235
                </li>
 
236
            </ul>
 
237
        </div>
 
238
    </body>
 
239
</html>