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.
240 Commits
2 Branches
82 MiB
 
 
 
 
 
 
Tree: 21067ef5fd
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '21067ef5fd'
${ noResults }
bitshift/static/js/index.js

425 lines
16 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. /*

  50.  * Set keyboard shortcut mappings.

  51.  */

  52. (function resultsHotkeys(){

  53.     /*

  54.      * If the currently viewed result is not the first, scroll to the previous

  55.      * result.

  56.      */

  57.     var previousResult = function(){

  58.         var currResult = $(".display-all");

  59.         if(currResult.length) {

  60.             currResult.removeClass('display-all');

  61.             currResult = currResult.closest(".result").prev(".result");

  62.         } else {

  63.             currResult = $(document.querySelectorAll('.result')[0]);

  64.         }

  65. 

  66.         currResult.addClass('display-all');

  67.         currResult.each(function(){

  68.             $('html,body').stop().animate({

  69.                 scrollTop: $(this).offset().top - (

  70.                     $(window).height() - $(this).outerHeight(true)) / 2

  71.             }, 140);

  72.         });

  73.     };

  74. 

  75.     /*

  76.      * If the currently viewed result is not the last, scroll to the next

  77.      * result.

  78.      */

  79.     var nextResult = function(){

  80.         var currResult = $(".display-all");

  81.         if(currResult.length) {

  82.             currResult.removeClass('display-all');

  83.             currResult = currResult.closest(".result").next(".result");

  84.         } else {

  85.             currResult = $(document.querySelectorAll('.result')[0]);

  86.         }

  87. 

  88.         currResult.addClass('display-all');

  89.         currResult.each(function(){

  90.             $('html,body').stop().animate({

  91.                 scrollTop: $(this).offset().top - (

  92.                     $(window).height() - $(this).outerHeight(true)) / 2

  93.             }, 140);

  94.         });

  95.     };

  96. 

  97.     var hotkeyActions = {

  98.         "k" : previousResult,

  99.         "j" : nextResult,

  100.         "h" : previousSymbolMatch,

  101.         "l" : nextSymbolMatch

  102.     };

  103. 

  104.     $(window).keypress(function(key){

  105.         for(var hotkey in hotkeyActions){

  106.             var keyChar = String.fromCharCode(key.keyCode);

  107.             if(keyChar == hotkey)

  108.                 hotkeyActions[keyChar]();

  109.         }

  110.     });

  111. }());

  112. 

  113. //Obtained by parsing python file with pygments

  114. 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>'

  115. searchBar.onkeyup = typingTimer;

  116. 

  117. var testCodelet = {

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

  119.     'filename': 'app.py',

  120.     'language': 'python',

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

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

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

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

  125.     'html_code': codeExample

  126. };

  127. 

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

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

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

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

  132.         searchField.hasClass('partly-visible')){

  133.         loadMoreResults();

  134.     }

  135. });

  136. 

  137. /*

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

  139.  * search bar.

  140.  */

  141. function typingTimer(event){

  142.     clearTimeout(typingTimer);

  143. 

  144.     var enterKeyCode = 13;

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

  146.         if(lastValue != searchBar.value)

  147.             typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);

  148.     }

  149.     else {

  150.         event.preventDefault();

  151.         finishedTyping();

  152.         return false;

  153.     }

  154. };

  155. 

  156. /*

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

  158.  *

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

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

  161.  * server.

  162.  */

  163. function finishedTyping(){

  164.     lastValue = searchBar.value;

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

  166. 

  167.     clearResults();

  168.     if(searchBar.value){

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

  170.         populateResults();

  171.     }

  172.     else {

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

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

  175.         advancedSearchButton.removeClass("clicked");

  176.     }

  177. }

  178. 

  179. /*

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

  181.  */

  182. function clearResults(){

  183.     while(resultsDiv.firstChild)

  184.         resultsDiv.removeChild(resultsDiv.firstChild);

  185. }

  186. 

  187. /*

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

  189.  * with its response.

  190.  */

  191. function populateResults(){

  192.     searchResultsPage = 1;

  193.     var results = queryServer();

  194. 

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

  196.         var newDiv = results[result];

  197.         resultsDiv.appendChild(newDiv);

  198.         setTimeout(

  199.             (function(divReference){

  200.                 return function(){

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

  202.                 };

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

  204.     }

  205. }

  206. 

  207. /*

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

  209.  *

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

  211.  */

  212. function createResult(codelet) {

  213.     //Level 1

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

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

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

  217.     //Level 2

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

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

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

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

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

  223.     //Level 3

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

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

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

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

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

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

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

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

  232. 

  233.     //Classes and ID's

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

  235. 

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

  237.     codeElt.id = 'code';

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

  239.     cycle.id = 'cycle-matches'

  240. 

  241.     title.id = 'title';

  242.     site.id = 'site';

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

  244.     nextMatch.href = '#';

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

  246.     prevMatch.href = '#';

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

  248.     language.id = 'language';

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

  250.     authors.id = 'authors';

  251. 

  252.     //Add the bulk of the html

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

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

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

  256.     nextMatch.innerHTML = 'next match';

  257.     prevMatch.innerHTML = 'prev match';

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

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

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

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

  262. 

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

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

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

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

  267.         else

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

  269.     });

  270.     authors.innerHTML = authorsHtml;

  271. 

  272.     // Needs to be processed on the server

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

  274. 

  275.     //Event binding

  276.     $(newDiv).hover(function(e) {

  277.         $(this).addClass('display-all');

  278.     });

  279. 

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

  281.         $(this).on('mouseleave', function(e) {

  282.             $(this).removeClass('display-all');

  283.         });

  284.     });

  285. 

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

  287.         e.stopPropagation();

  288.         e.preventDefault();

  289.         nextSymbolMatch();

  290.     });

  291. 

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

  293.         e.stopPropagation();

  294.         e.preventDefault();

  295.         previousSymbolMatch();

  296.     });

  297. 

  298.     //Finish and append elements to parent elements

  299.     hiddenInfo.appendChild(dateCreated);

  300.     hiddenInfo.appendChild(dateModified);

  301.     hiddenInfo.appendChild(language);

  302.     hiddenInfo.appendChild(authors);

  303. 

  304.     hiddenInfoContainer.appendChild(hiddenInfo);

  305. 

  306.     row.appendChild(codeElt);

  307.     row.appendChild(hiddenInfoContainer);

  308.     table.appendChild(row);

  309. 

  310.     displayInfo.appendChild(site);

  311.     displayInfo.appendChild(title);

  312. 

  313.     cycle.appendChild(prevMatch);

  314.     cycle.appendChild(nextMatch);

  315. 

  316.     newDiv.appendChild(displayInfo);

  317.     newDiv.appendChild(table);

  318. 

  319.     return newDiv;

  320. }

  321. 

  322. function previousSymbolMatch() {

  323.     var currResult = $(".display-all"),

  324.         currMatch = currResult.find(".hll.current"),

  325.         matches = currResult.find(".hll"),

  326.         scrollDiv = currResult.find('#tablecontainer');

  327. 

  328.     if (currMatch.length == 0)

  329.         currMatch = matches[0];

  330.     else

  331.         currMatch.removeClass('current');

  332. 

  333.     var index = matches.index(currMatch.get(0)) - 1;

  334.     index = index <= 0 ? matches.length - 1 : index;

  335.     var newMatch = $(matches[index]);

  336. 

  337.     scrollDiv.scrollTop(scrollDiv.scrollTop()

  338.             - scrollDiv.height() / 2

  339.             + newMatch.position().top + newMatch.height() / 2);

  340. 

  341.     newMatch.effect("highlight", {color: '#FFFF00'}, 750)

  342.     newMatch.addClass('current');

  343. };

  344. 

  345. function nextSymbolMatch() {

  346.     var currResult = $(".display-all"),

  347.         currMatch = currResult.find(".hll.current"),

  348.         matches = currResult.find(".hll"),

  349.         scrollDiv = currResult.find('#tablecontainer');

  350. 

  351.     if (currMatch.length == 0)

  352.         currMatch = $(matches[0]);

  353.     else

  354.         currMatch.removeClass('current');

  355. 

  356.     var index = matches.index(currMatch.get(0)) + 1;

  357.     index = index >= matches.length ? 0 : index;

  358.     var newMatch = $(matches[index]);

  359. 

  360.     scrollDiv.scrollTop(scrollDiv.scrollTop()

  361.             - scrollDiv.height() / 2

  362.             + newMatch.position().top + newMatch.height() / 2);

  363. 

  364.     newMatch.effect("highlight", {color: '#FFF'}, 750)

  365.     newMatch.addClass('current');

  366. };

  367. 

  368. /*

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

  370.  *

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

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

  373.  */

  374. function queryServer(){

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

  376.         "q" : searchBar.value,

  377.         "p" : searchResultsPage++

  378.     });

  379. 

  380.     var resultDivs = [];

  381.     $.getJSON(queryUrl, function(result){

  382.         if("error" in result)

  383.             errorMessage(result["error"]);

  384.         else

  385.             for(var codelet = 0; codelet < result["results"].length; codelet++)

  386.                 resultDivs.push(result["results"][codelet]);

  387.     });

  388. 

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

  390.         var newDiv = createResult(testCodelet);

  391.         resultDivs.push(newDiv)

  392.     }

  393. 

  394.     return resultDivs;

  395. }

  396. 

  397. /*

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

  399.  */

  400. function loadMoreResults(){

  401.     var results = queryServer();

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

  403.         var newDiv = results[result];

  404.         resultsDiv.appendChild(newDiv);

  405.         setTimeout(

  406.             (function(divReference){

  407.                 return function(){

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

  409.                 };

  410.             }(newDiv)),

  411.             result * 20);

  412.     }

  413. }

  414. 

  415. /*

  416.  * Displays a warning message in the UI.

  417.  *

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

  419.  */

  420. function errorMessage(msg){

  421.     alert(msg);

  422. }

  423. 

  424. loadMoreResults();