ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
A semantic search engine for source code https://bitshift.benkurtovic.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 Commits
2 Branches
108 MiB
 
 
 
 
 
 
Tree: bda63ad3ce
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bda63ad3ce'
${ noResults }
bitshift/static/js/index.js

332 lines
14 KiB
Raw Blame History 

  1. /*

  2.  * @file Manages all library initialization, jQuery callbacks, query entry

  3.  *      callbacks, server querying, and results diplay for `index.html`.

  4.  */

  5. 

  6. var advancedSearchDiv = $("div#advanced-search");

  7. var advancedSearchButton = $("button#advanced-search");

  8. FINISH_TYPING_INTERVAL = 650;

  9. var searchBar = $("form#search-bar input[type='text']")[0];

  10. var resultsDiv = $("div#results")[0];

  11. 

  12. var typingTimer, lastValue;

  13. var searchResultsPage = 1;

  14. /*

  15.  * Set all page callbacks.

  16.  */

  17. (function setHomePageCallbabacks(){

  18.     // Enable infinite scrolling down the results page.

  19.     $(window).scroll(function(){

  20.         if($(window).scrollTop() + $(window).height() == $(document).height() &&

  21.                 resultsDiv.querySelectorAll(".result").length > 0)

  22.             loadMoreResults();

  23.     });

  24. 

  25.     // Toggle the advanced-search form's visibility.

  26.     advancedSearchButton.click(function(){

  27.         var searchField = $("div#search-field");

  28.         if(!advancedSearchDiv.hasClass("visible")){

  29.             searchField.addClass("partly-visible");

  30.             advancedSearchDiv.fadeIn(500).addClass("visible");

  31.             advancedSearchButton.addClass("clicked");

  32.         }

  33.         else {

  34.             advancedSearchDiv.fadeOut(300).removeClass("visible");

  35.             advancedSearchButton.removeClass("clicked");

  36.             if($("div#results .result").length == 0)

  37.                 searchField.removeClass("partly-visible");

  38.         }

  39.     });

  40. 

  41.     // Enable capturing the `enter` key.

  42.     $("form#search-bar").submit(function(event){

  43.         event.preventDefault();

  44.         return false;

  45.     });

  46.     searchBar.onkeyup = typingTimer;

  47. }());

  48. 

  49. //Obtained by parsing python file with pygments

  50. 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="highlight"><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="hll"><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><span class="hll"><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</span>\n<span class="hll"><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><span class="hll"><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><span class="hll"><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</span>\n<span class="c"># database = Database()</span>\n\n<span class="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/&quot;</span><span class="p">)</span>\n</span><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="hll"><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><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="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/about&quot;</span><span class="p">)</span>\n</span><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="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/developers&quot;</span><span class="p">)</span>\n</span><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="hll">    <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</span></pre></div>\n</td></tr></table>'

  51. searchBar.onkeyup = typingTimer;

  52. 

  53. var testCodelet = {

  54.     'url': 'https://github.com/earwig/bitshift/blob/develop/app.py',

  55.     'filename': 'app.py',

  56.     'language': 'python',

  57.     'date_created': 'May 10, 2014',

  58.     'date_modified': '2 days ago',

  59.     'origin': ['GitHub', 'https://github.com', ''],

  60.     'authors': ['sevko', 'earwig'],

  61.     'html_code': codeExample

  62. };

  63. 

  64. // Enable infinite scrolling down the results page.

  65. $(window).scroll(function() {

  66.     var searchField = $("div#search-field");

  67.     if($(window).scrollTop() + $(window).height() == $(document).height() && searchField.hasClass('partly-visible')){

  68.         loadMoreResults();

  69.     }

  70. });

  71. 

  72. /*

  73.  * Clear the existing timer and set a new one the the user types text into the

  74.  * search bar.

  75.  */

  76. function typingTimer(event){

  77.     clearTimeout(typingTimer);

  78. 

  79.     var enterKeyCode = 13;

  80.     if(event.keyCode != enterKeyCode){

  81.         if(lastValue != searchBar.value)

  82.             typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);

  83.     }

  84.     else {

  85.         event.preventDefault();

  86.         finishedTyping();

  87.         return false;

  88.     }

  89. };

  90. 

  91. /*

  92.  * Callback which queries the server whenver the user stops typing.

  93.  *

  94.  * Whenever the user doesn't type for a `FINISH_TYPING_INTERVAL` after having

  95.  * entered new text in the search bar, send the current query request to the

  96.  * server.

  97.  */

  98. function finishedTyping(){

  99.     lastValue = searchBar.value;

  100.     var searchField = $("div#search-field");

  101. 

  102.     clearResults();

  103.     if(searchBar.value){

  104.         searchField.addClass("partly-visible");

  105.         populateResults();

  106.     }

  107.     else {

  108.         searchField.removeClass("partly-visible");

  109.         $("div#advanced-search").fadeOut(50);

  110.         advancedSearchButton.removeClass("clicked");

  111.     }

  112. }

  113. 

  114. /*

  115.  * Removes any child elements of `div#results`.

  116.  */

  117. function clearResults(){

  118.     while(resultsDiv.firstChild)

  119.         resultsDiv.removeChild(resultsDiv.firstChild);

  120. }

  121. 

  122. /*

  123.  * Query the server with the current search string, and populate `div#results`

  124.  * with its response.

  125.  */

  126. function populateResults(){

  127.     searchResultsPage = 1;

  128.     var results = queryServer();

  129. 

  130.     for(var result = 0; result < results.length; result++){

  131.         var newDiv = results[result];

  132.         resultsDiv.appendChild(newDiv);

  133.         setTimeout(

  134.             (function(divReference){

  135.                 return function(){

  136.                     divReference.classList.add("cascade");

  137.                 };

  138.             }(newDiv)), result * 20);

  139.     }

  140. }

  141. 

  142. /*

  143.  * Create a result element based upon a codelet instance.

  144.  *

  145.  * @return {Element} The result element.

  146.  */

  147. function createResult(codelet) {

  148.     //Level 1

  149.     var newDiv = document.createElement("div"),

  150.         table = document.createElement("table"),

  151.         row = document.createElement("tr");

  152.     //Level 2

  153.     var displayInfo = document.createElement("div"),

  154.         codeElt = document.createElement("td"),

  155.         hiddenInfoContainer = document.createElement("td"),

  156.         hiddenInfo = document.createElement("div"),

  157.         cycle = document.createElement("div");

  158.     //Level 3

  159.     var title = document.createElement("span"),

  160.         site = document.createElement("span"),

  161.         nextMatch = document.createElement("a"),

  162.         prevMatch = document.createElement("a"),

  163.         dateModified = document.createElement("div"),

  164.         language = document.createElement("div"),

  165.         dateCreated = document.createElement("div"),

  166.         authors = document.createElement("div");

  167. 

  168.     //Classes and ID's

  169.     newDiv.classList.add('result');

  170. 

  171.     displayInfo.id = 'display-info';

  172.     codeElt.id = 'code';

  173.     hiddenInfo.id = 'hidden-info';

  174.     cycle.id = 'cycle-matches'

  175. 

  176.     title.id = 'title';

  177.     site.id = 'site';

  178.     nextMatch.id = 'next-match';

  179.     nextMatch.href = '#';

  180.     prevMatch.id = 'prev-match';

  181.     prevMatch.href = '#';

  182.     dateModified.id = 'date-modified';

  183.     language.id = 'language';

  184.     dateCreated.id = 'date-created';

  185.     authors.id = 'authors';

  186. 

  187.     //Add the bulk of the html

  188.     title.innerHTML = ' &raquo; <a href="' + codelet.url + '">'

  189.                       + codelet.filename + '</a>';

  190.     site.innerHTML = '<a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';

  191.     nextMatch.innerHTML = 'next match';

  192.     prevMatch.innerHTML = 'prev match';

  193.     language.innerHTML = 'Language: <span>' + codelet.language + '</span>';

  194.     dateModified.innerHTML = 'Last modified: <span>' + codelet.date_modified + '</span>';

  195.     // Needs to be changed from int to string on the server

  196.     dateCreated.innerHTML = 'Created: <span>' + codelet.date_created + '</span>';

  197. 

  198.     var authorsHtml = 'Authors: <span>';

  199.     codelet.authors.forEach(function(a, i) {

  200.         if (i == codelet.authors.length - 1)

  201.             authorsHtml += '<a href=#>' + a + ' </a>';

  202.         else

  203.             authorsHtml += '<a href=#>' + a + ' </a>, ';

  204.     });

  205.     authors.innerHTML = authorsHtml;

  206. 

  207.     // Needs to be processed on the server

  208.     codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';

  209.     var matches = codeElt.querySelectorAll('.hll');

  210.     $.each(matches, function(i, a) {

  211.         a.id = 'match_' + i;

  212.     });

  213. 

  214.     //Event binding

  215.     $(codeElt).hover(function(e) {

  216.         $(row).addClass('display-all');

  217.     });

  218. 

  219.     $(newDiv).on('transitionend', function(e) {

  220.         $(codeElt).one('mouseleave', function(e) {

  221.             $(row).removeClass('display-all');

  222.         });

  223.     });

  224. 

  225.     var cur_match = -1;

  226.     var newMatch = function(e) {

  227.         var $code = $(newDiv).find('#tablecontainer'),

  228.             $match = $code.find('#match_' + cur_match);

  229. 

  230.         $code.scrollTop($code.scrollTop() - $code.height() / 2 +

  231.             $match.position().top + $match.height() / 2);

  232. 

  233.         $match.effect("highlight", {}, 750)

  234.     }

  235. 

  236.     $(nextMatch).click(function(e) {

  237.         e.stopPropagation()

  238.         e.preventDefault()

  239.         cur_match = cur_match >= matches.length - 1 ?  0 : cur_match + 1;

  240.         newMatch();

  241.     });

  242. 

  243.     $(prevMatch).click(function(e) {

  244.         e.stopPropagation()

  245.         cur_match = cur_match <= 0 ?  matches.length - 1 : cur_match - 1;

  246.         newMatch();

  247.     });

  248. 

  249.     //Finish and append elements to parent elements

  250.     hiddenInfo.appendChild(dateCreated);

  251.     hiddenInfo.appendChild(dateModified);

  252.     hiddenInfo.appendChild(language);

  253.     hiddenInfo.appendChild(authors);

  254. 

  255.     hiddenInfoContainer.appendChild(hiddenInfo);

  256. 

  257.     row.appendChild(codeElt);

  258.     row.appendChild(hiddenInfoContainer);

  259.     table.appendChild(row);

  260. 

  261.     displayInfo.appendChild(site);

  262.     displayInfo.appendChild(title);

  263. 

  264.     cycle.appendChild(prevMatch);

  265.     cycle.appendChild(nextMatch);

  266. 

  267.     newDiv.appendChild(displayInfo);

  268.     newDiv.appendChild(table);

  269.     newDiv.appendChild(cycle);

  270. 

  271.     return newDiv;

  272. }

  273. 

  274. /*

  275.  * AJAX the current query string to the server, and return its response.

  276.  *

  277.  * @return {Array} The server's response in the form of `div.result` DOM

  278.  *      elements, to fill `div#results`.

  279.  */

  280. function queryServer(){

  281.     var queryUrl = document.URL + "search.json?" + $.param({

  282.         "q" : searchBar.value,

  283.         "p" : searchResultsPage++

  284.     });

  285.     console.log(queryUrl);

  286.     var result = $.getJSON(queryUrl, function(result){

  287.         $.each(result, function(key, value){

  288.             if(key == "error")

  289.                 errorMessage(value);

  290.             else

  291.                 console.log("Success.");

  292.         });

  293.     });

  294.     // return [];

  295.     var resultDivs = [];

  296.     for(var result = 0; result < 20; result++){

  297.         var newDiv = createResult(testCodelet);

  298.         resultDivs.push(newDiv)

  299.     }

  300. 

  301.     return resultDivs;

  302. }

  303. 

  304. /*

  305.  * Adds more results to `div#results`.

  306.  */

  307. function loadMoreResults(){

  308.     var results = queryServer();

  309.     for(var result = 0; result < results.length; result++){

  310.         var newDiv = results[result];

  311.         resultsDiv.appendChild(newDiv);

  312.         setTimeout(

  313.             (function(divReference){

  314.                 return function(){

  315.                     divReference.classList.add("cascade");

  316.                 };

  317.             }(newDiv)),

  318.             result * 20);

  319.     }

  320. }

  321. 

  322. /*

  323.  * Displays a warning message in the UI.

  324.  *

  325.  * @param msg (str) The message string.

  326.  */

  327. function errorMessage(msg){

  328.     alert(msg);

  329. }

  330. 

  331. loadMoreResults();