1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
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">
22 border-bottom: 1px solid #cccccc;
25 text-decoration: none;
29 .ex_container a:hover {
30 background-color: #eeeeee;
58 padding: 10px 1em 10px 1em;
61 border-top: 1px solid #cccccc;
88 border-left: 1px solid #cccccc;
92 <script type="text/javascript" src="Jugl.js"></script>
93 <script type="text/javascript" src="example-list.js"></script>
94 <script type="text/javascript">
96 var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
99 function listExamples(examples) {
100 target.innerHTML = "";
101 var node = template.process({
102 context: {examples: examples},
106 document.getElementById("count").innerHTML = "(" + examples.length + ")";
110 function inputChange() {
112 window.clearTimeout(timerId);
114 var text = this.value;
115 timerId = window.setTimeout(function() {
120 function filterList(text) {
122 if(text.length < 2) {
123 examples = info.examples;
125 var words = text.split(/\W+/);
127 for(var i=0; i<words.length; ++i) {
128 var word = words[i].toLowerCase()
129 var dict = info.index[word];
131 for(exIndex in dict) {
132 var count = dict[exIndex];
133 if(scores[exIndex]) {
134 if(scores[exIndex][word]) {
135 scores[exIndex][word] += count;
137 scores[exIndex][word] = count;
140 scores[exIndex] = {};
141 scores[exIndex][word] = count;
147 for(var j in scores) {
148 var ex = info.examples[j];
149 ex.score = scores[j];
152 // sort examples by first by number of words matched, then
154 examples.sort(function(a, b) {
156 var aWords = 0, bWords = 0;
157 var aScore = 0, bScore = 0;
158 for(var i in a.score) {
159 aScore += a.score[i];
162 for(var j in b.score) {
163 bScore += b.score[j];
166 if(aWords == bWords) {
167 cmp = bScore - aScore;
169 cmp = bWords - aWords;
174 listExamples(examples);
178 document.getElementById("keywords").value = "";
179 listExamples(info.examples);
182 function parseQuery() {
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]);
192 var input = document.getElementById("keywords");
193 input.value = params["q"];
194 inputChange.call(input);
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
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>
217 <div id="examples"></div>
219 <iframe id="exwin" name="exwin" frameborder="0"></iframe>
220 <div style="display: none;">
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>
228 <div class="ex_description" jugl:content="example.shortdesc">
229 Short Description goes here
231 <p class="ex_classes" jugl:content="example.classes">
232 Related Classes go here