From 8eee2481170bec6785ff97d4250e3a9e2a063681 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 8 May 2008 08:27:54 +0000
Subject: [PATCH] create word index from examples and use it to filter example
 list

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7097 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 doc/examples.html      | 101 ++++++++++++++++++++++++++++++++++-------
 tools/exampleparser.py |  34 ++++++++++++--
 2 files changed, 116 insertions(+), 19 deletions(-)
diff --git a/doc/examples.html b/doc/examples.html
index 82d14d9e68..8ecf0a77ca 100644
--- a/doc/examples.html
+++ b/doc/examples.html
@@ -1,19 +1,21 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
 <html>
     <head>
-        <title>OL Docs</title>
+        <title>OpenLayers Examples</title>        
+        <link rel="stylesheet" href="../examples/style.css" type="text/css" />
         <style type="text/css">
             html, body {
                 height: 100%;
                 overflow: hidden;
                 margin: 0;
                 padding: 0;
-                font: 0.9em Verdana, Arial, sans serif;
+                line-height: 1.25em;
             }
             .ex_container{
                 border-bottom: 1px solid grey;
             }
             .ex_container a {
+                text-decoration: none;
                 padding: 5px 1em;
                 display: block;
             }
@@ -25,6 +27,11 @@
                 font-weight: bold;
                 color: #333;
             }
+            .ex_filename {
+                font-weight: normal;
+                font-size: 0.8em;
+                color: #ccc
+            }
             .ex_description{
                 color: #222;
                 padding: 3px;
@@ -56,32 +63,94 @@
         <script type="text/javascript" src="examples.js"></script>
         <script type="text/javascript">
             // import
-            var uri = "http://jugl.tschaub.net/trunk/lib/Jugl.js";
-            var Jugl = window[uri];
-            // this part does the actual template processing
-            window.onload = function() {
-                var template = new Jugl.Template("template");
-                var node = template.process(null, true);
-                document.getElementById("examples").appendChild(node);
-                document.getElementById("exwin").src = "../examples/example.html";
+            var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
+            var template, target;
+
+            function listExamples(examples) {
+                var node = template.process({examples: examples}, true);
+                target.innerHTML = "";
+                target.appendChild(node);
+                document.getElementById("count").innerHTML = "(" + examples.length + ")";
             }
+            
+            var timerId;
+            function inputChange() {
+                if(timerId) {
+                    window.clearTimeout(timerId);
+                }
+                var text = this.value;
+                timerId = window.setTimeout(function() {
+                    filterList(text);
+                }, 500);
+            }
+            
+            function filterList(text) {
+                var examples;
+                if(text.length < 2) {
+                    examples = info.examples;
+                } else {
+                    var words = text.split(/\W+/);
+                    var scores = {};
+                    for(var i=0; i<words.length; ++i) {
+                        var word = words[i].toLowerCase()
+                        var dict = info.index[word];
+                        if(dict) {
+                            for(exIndex in dict) {
+                                var count = dict[exIndex];
+                                if(scores[exIndex]) {
+                                    scores[exIndex] += count;
+                                } else {
+                                    scores[exIndex] = count;
+                                }
+                            }
+                        }
+                    }
+                    examples = [];
+                    for(var j in scores) {
+                        var ex = info.examples[j];
+                        ex.score = scores[j];
+                        examples.push(ex);
+                    }
+                    // sort examples by descending score
+                    examples.sort(function(a, b) {
+                        return (b.score - a.score);
+                    });
+                }
+                listExamples(examples);
+            }
+            
+            function showAll() {
+                document.getElementById("keywords").value = "";
+                listExamples(info.examples);
+            }
+            window.onload = function() {
+                template = new Jugl.Template("template");
+                target = document.getElementById("examples");
+                listExamples(info.examples);
+                document.getElementById("exwin").src = "../examples/example.html";
+                document.getElementById("keywords").onkeyup = inputChange
+            };
         </script>
     </head>
     <body>
         <div id="toc">
-            <p id="instructions">Click an example link below to view on the right.</p>
+            <p id="instructions">
+                <label for="keywords">Filter by keywords</label>
+                <input type="text" id="keywords" /><br />
+                <span id="count"></span>
+                <a href="javascript:void showAll();">show all</a>
+            </p>
             <div id="examples"></div>
         </div>
-        <iframe id="exwin" name="exwin"></iframe>
-        
+        <iframe id="exwin" name="exwin"></iframe>        
         <div style="display: none;">
             <div id="template">
                 <div class="ex_container" jugl:repeat="example examples">
                     <a jugl:attributes="href example.link" target="exwin">
-                        <h3 class="ex_title">
+                        <h5 class="ex_title">
                             <span jugl:replace="example.title">title</span><br />
-                            <span class="exampleName" jugl:content="'(' + example.example + ')'">filename</span>
-                        </h3>
+                            <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
+                        </h5>
                         <div class="ex_description" jugl:content="example.shortdesc">
                             Short Description goes here
                         </div>
diff --git a/tools/exampleparser.py b/tools/exampleparser.py
index 6c484b89cd..8b52d4d89f 100755
--- a/tools/exampleparser.py
+++ b/tools/exampleparser.py
@@ -81,7 +81,32 @@ def parseHtml(html,ids):
     d['classes'] = classes
     return d
     
-
+def wordIndex(examples):
+    """
+    Create an inverted index based on words in title and shortdesc.  Keys are
+    lower cased words.  Values are dictionaries with example index keys and
+    count values.
+    """
+    index = {}
+    unword = re.compile("\\W+")
+    keys = ["shortdesc", "title"]
+    for i in range(len(examples)):
+        for key in keys:
+            text = examples[i][key]
+            if text:
+                words = unword.split(text)
+                for word in words:
+                    if word:
+                        word = word.lower()
+                        if index.has_key(word):
+                            if index[word].has_key(i):
+                                index[word][i] += 1
+                            else:
+                                index[word][i] = 1
+                        else:
+                            index[word] = {i: 1}
+    return index
+    
 if __name__ == "__main__":
 
     if missing_deps:
@@ -114,9 +139,12 @@ if __name__ == "__main__":
         exampleList.append(tagvalues)
         
     exampleList.sort(key=lambda x:x['example'].lower())
-    json = simplejson.dumps(exampleList)
+    
+    index = wordIndex(exampleList)
+
+    json = simplejson.dumps({"examples": exampleList, "index": index})
     #give the json a global variable we can use in our js.  This should be replaced or made optional.
-    json = 'var examples=' + json 
+    json = 'var info=' + json 
     outFile.write(json)
     outFile.close()
     print 'complete'
