]> dev.renevier.net Git - syp.git/blob - openlayers/examples/example-list.html
do not allow empty passwords
[syp.git] / 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>