Bladeren bron

Add extra information to search results. Add function for creating

search results from codelets.
tags/v1.0^2
Benjamin Attal 10 jaren geleden
bovenliggende
commit
53a1d229ff
2 gewijzigde bestanden met toevoegingen van 157 en 27 verwijderingen
  1. +107
    -21
      static/js/index.js
  2. +50
    -6
      static/sass/index.sass

+ 107
- 21
static/js/index.js Bestand weergeven

@@ -12,6 +12,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");
@@ -95,6 +114,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
@@ -103,27 +209,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);
}



+ 50
- 6
static/sass/index.sass Bestand weergeven

@@ -8,7 +8,7 @@
$resultWidth: 830px
$sidebarWidth: 30px
$codeWidth: 500px
$metaWidth: 300px
$hiddenInfoWidth: 300px

div#search-field
@extend .t2
@@ -103,10 +103,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
@@ -142,10 +164,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%

Laden…
Annuleren
Opslaan