Add extra information to search results. Add function for creating

search results from codelets.

static/js/index.js

@@ -29,6 +29,25 @@ var typingTimer, lastValue;
 var codeExample = '<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40</pre></div></td><td class="code"><div class="hll"><pre><span class="sd">&quot;&quot;&quot;</span>\n<span class="sd">Module to contain all the project&#39;s Flask server plumbing.</span>\n<span class="sd">&quot;&quot;&quot;</span>\n\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">render_template</span><span class="p">,</span> <span class="n">session</span>\n\n<span class="kn">from</span> <span class="nn">bitshift</span> <span class="kn">import</span> <span class="n">assets</span>\n<span class="c"># from bitshift.database import Database</span>\n<span class="c"># from bitshift.query import parse_query</span>\n\n<span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span>\n<span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_object</span><span class="p">(</span><span class="s">&quot;bitshift.config&quot;</span><span class="p">)</span>\n\n<span class="n">app_env</span> <span class="o">=</span> <span class="n">app</span><span class="o">.</span><span class="n">jinja_env</span>\n<span class="n">app_env</span><span class="o">.</span><span class="n">line_statement_prefix</span> <span class="o">=</span> <span class="s">&quot;=&quot;</span>\n<span class="n">app_env</span><span class="o">.</span><span class="n">globals</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">assets</span><span class="o">=</span><span class="n">assets</span><span class="p">)</span>\n\n<span class="c"># database = Database()</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">index</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;index.html&quot;</span><span class="p">)</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/search/&lt;query&gt;&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">search</span><span class="p">(</span><span class="n">query</span><span class="p">):</span>\n    <span class="c"># tree = parse_query(query)</span>\n    <span class="c"># database.search(tree)</span>\n    <span class="k">pass</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/about&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">about</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;about.html&quot;</span><span class="p">)</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/developers&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">developers</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;developers.html&quot;</span><span class="p">)</span>\n\n<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span>\n    <span class="n">app</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>\n</pre></div>\n</td></tr></table>'
 searchBar.onkeyup = typingTimer;
 
+var testCodelet = {
+    'code_url': 'https://github.com/earwig/bitshift/blob/develop/app.py',
+    'filename': 'app.py',
+    'language': 'Python',
+    'date_created': 'May 10, 2014',
+    'date_modified': '2 days ago',
+    'symbols': {
+        'vars': [
+            ['app', [ [12, -1, 12, -1] ],
+                    [ [13, -1, 13, -1],
+                    [15, -1, 15, -1],
+                    [16, -1, 16, -1],
+                    [17, -1, 17, -1] ]]
+        ]
+    },
+    'authors': ['sevko', 'earwig'],
+    'html_code': codeExample
+};
+
 // Enable infinite scrolling down the results page.
 $(window).scroll(function() {
     var searchField = $("div#search-field");
@@ -113,6 +132,93 @@ function populateResults(){
 }
 
 /*
+ * Create a result element based upon a codelet instance.
+ *
+ * @return {Element} The result element.
+ */
+function createResult(codelet) {
+    //Level 1
+    var newDiv = document.createElement("div"),
+        table = document.createElement("table"),
+        row = document.createElement("tr");
+    //Level 2
+    var displayInfo = document.createElement("div"),
+        sidebar = document.createElement("td"),
+        codeElt = document.createElement("td"),
+        hiddenInfo = document.createElement("td");
+    //Level 3
+    var title = document.createElement("span"),
+        site = document.createElement("span"),
+        dateModified = document.createElement("span"),
+        language = document.createElement("span"),
+        dateCreated = document.createElement("span"),
+        matches = document.createElement("div"),
+        authors = document.createElement("div");
+
+    //Classes and ID's
+    newDiv.classList.add('result');
+
+    displayInfo.id = 'display-info';
+    sidebar.id = 'sidebar';
+    codeElt.id = 'code';
+    hiddenInfo.id = 'hidden-info';
+
+    title.id = 'title';
+    site.id = 'site';
+    dateModified.id = 'date-modified';
+    language.id = 'language';
+    dateCreated.id = 'date-created';
+    matches.id = 'matches';
+    authors.id = 'authors';
+
+    //Add the bulk of the html
+    var hostUrl = codelet.code_url.match(/htt(p|ps):\/\/\w+\.\w+/)[0],
+        hostName = hostUrl.split('://')[1].split('.')[0];
+
+    title.innerHTML = 'File <a href="' + codelet.code_url + '">'
+                      + codelet.filename + '</a>';
+    site.innerHTML = 'on <a href="' + hostUrl + '">' + hostName +'</a>';
+    dateModified.innerHTML = 'Last modified ' + codelet.date_modified;
+    // Needs to be changed from int to string on the server
+    language.innerHTML = codelet.language;
+    dateCreated.innerHTML = 'Created ' + codelet.date_created;
+    matches.innerHTML = 'Symbol matches: ';
+    $.each(Object.keys(codelet.symbols), function(i, t) {
+        $.each(codelet.symbols[t], function(i, s) {
+            matches.innerHTML += '<span>' + s[0] + '</span>';
+        });
+    });
+    authors.innerHTML = 'Authors: ';
+    $.each(codelet.authors, function(i, a) {
+        authors.innerHTML += '<span>' + a + '; </span>';
+    });
+
+    sidebar.innerHTML = '';
+    // Needs to be processed on the server
+    codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';
+
+    //Finish and append elements to parent elements
+    row.appendChild(sidebar);
+    row.appendChild(codeElt);
+    row.appendChild(hiddenInfo);
+    table.appendChild(row);
+
+    displayInfo.appendChild(title);
+    displayInfo.appendChild(site);
+    displayInfo.appendChild(dateModified);
+
+    hiddenInfo.appendChild(dateCreated);
+    hiddenInfo.appendChild(language);
+    hiddenInfo.appendChild(matches);
+    hiddenInfo.appendChild(authors);
+
+    newDiv.appendChild(displayInfo);
+    newDiv.appendChild(table);
+
+    return newDiv;
+}
+
+/*
  * AJAX the current query string to the server, and return its response.
  *
  * @return {Array} The server's response in the form of `div.result` DOM
@@ -121,27 +227,7 @@ function populateResults(){
 function queryServer(){
     var resultDivs = []
     for(var result = 0; result < 20; result++){
-        var newDiv = document.createElement("div"),
-            table = document.createElement("table"),
-            row = document.createElement("tr"),
-            sidebar = document.createElement("td"),
-            codeElt = document.createElement("td"),
-            meta = document.createElement("td");
-
-        newDiv.classList.add("result");
-        sidebar.id = 'sidebar';
-        codeElt.id = 'code';
-        meta.id = 'meta';
-
-        sidebar.innerHTML = '';
-        codeElt.innerHTML = '<div id=tablecontainer>' + codeExample + '</div>';
-
-        row.appendChild(sidebar);
-        row.appendChild(codeElt);
-        row.appendChild(meta);
-        table.appendChild(row);
-        newDiv.appendChild(table);
-
+        var newDiv = createResult(testCodelet);
         resultDivs.push(newDiv);
     }
 

static/sass/index.sass

@@ -9,7 +9,7 @@ $minSearchFieldsWidth: 490px
 $resultWidth: 830px
 $sidebarWidth: 30px
 $codeWidth: 500px
-$metaWidth: 300px
+$hiddenInfoWidth: 300px
 
 .ui-datepicker
     font-size: 70%
@@ -286,10 +286,32 @@ div#results
     margin-right: auto
     width: 80%
 
+    /* TODO:
+        1) On the side
+            - add way to cycle through hits in the code.*/
     div.result
         width: $resultWidth
         height: 200px
-        margin-top: 3%
+        margin-top: 2%
+        margin-bottom: 6%
+
+        #display-info
+            a
+                text-decoration: none
+
+                &:hover
+                    color: orange
+
+            #title
+                margin-right: 50px
+
+            #site
+                text-transform: capitalize
+
+            #date-modified
+                font-family: monospace
+                color: #333
+                display: block
 
         table
             border-collapse: collapse
@@ -325,10 +347,32 @@ div#results
                             border: none
                             font-family: monospace
 
-                #meta
-                    width: $metaWidth
+                #hidden-info
+                    width: $hiddenInfoWidth
+                    text-align: center
+                    font-size: 1.2em
+
+                    #date-created
+                        display: block
+
+                    #language
+                        display: inline-block
+                        padding: 3px
+                        @include vendor(border-radius, 3px)
+                        background-color: #eee
+                        font-weight: bold
+                        color: purple
+
+                        &:hover
+                            background-color: #ddd
+
+                    #matches
+                        span
+                            color: red
+
+                    #authors
+                        span
+                            color: red
 
         &.cascade
             @extend .t3
-
-            margin-bottom: 0%