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>