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

461 lines
19 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, scrollTimer, lastValue;

  13. var searchResultsPage = 1;

  14. 

  15. /*

  16.  * Set all page callbacks.

  17.  */

  18. (function setHomePageCallbabacks(){

  19.     var results = $('#results').get(0);

  20. 

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

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

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

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

  25.             loadMoreResults();

  26. 

  27.         clearTimeout(scrollTimer);

  28.         if (!results.classList.contains('disable-hover'))

  29.             results.classList.add('disable-hover')

  30. 

  31.         scrollTimer = setTimeout(function(){

  32.             if (results.classList.contains('disable-hover'))

  33.                 results.classList.remove('disable-hover');

  34.         }, 200);

  35.     });

  36. 

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

  38.     advancedSearchButton.click(function(){

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

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

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

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

  43.             advancedSearchButton.addClass("clicked");

  44.         }

  45.         else {

  46.             advancedSearchDiv.hide().removeClass("visible");

  47.             advancedSearchButton.removeClass("clicked");

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

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

  50.             clearResults();

  51.         }

  52.     });

  53. 

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

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

  56.         event.preventDefault();

  57.         return false;

  58.     });

  59.     searchBar.onkeyup = typingTimer;

  60. }());

  61. 

  62. /*

  63.  * Set keyboard shortcut mappings.

  64.  */

  65. (function resultsHotkeys(){

  66.     /*

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

  68.      * result.

  69.      */

  70.     var previousResult = function(){

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

  72.         if(currResult.length) {

  73.             currResult.removeClass("display-all");

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

  75.         } else {

  76.             currResult = $(document.querySelectorAll(".result")[0]);

  77.         }

  78. 

  79.         currResult.addClass("display-all");

  80.         currResult.each(function(){

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

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

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

  84.             }, 140);

  85.         });

  86.     };

  87. 

  88.     /*

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

  90.      * result.

  91.      */

  92.     var nextResult = function(){

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

  94.         if(currResult.length) {

  95.             currResult.removeClass("display-all");

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

  97.         } else {

  98.             currResult = $(document.querySelectorAll(".result")[0]);

  99.         }

  100. 

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

  102.         currResult.each(function(){

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

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

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

  106.             }, 140);

  107.         });

  108.     };

  109. 

  110.     var displayHotkeyHelp = function(){

  111.         var help = $("div#hotkey-help");

  112.         if(help.hasClass("hidden"))

  113.             help.fadeIn(420);

  114.         else

  115.             help.fadeOut(420);

  116. 

  117.         $("div#body").toggleClass("faded");

  118.         help.toggleClass("hidden");

  119.     }

  120. 

  121.     var hotkeyActions = {

  122.         "k" : previousResult,

  123.         "j" : nextResult,

  124.         "h" : previousSymbolMatch,

  125.         "l" : nextSymbolMatch,

  126.         "?" : displayHotkeyHelp

  127.     };

  128. 

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

  130.         for(var hotkey in hotkeyActions){

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

  132.             if(keyChar == hotkey &&

  133.                 !($(key.target).is("textarea") || $(key.target).is("input")))

  134.                 hotkeyActions[keyChar]();

  135.         }

  136.     });

  137. }());

  138. 

  139. //Obtained by parsing python file with pygments

  140. 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">deaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>\n</span></pre></div>\n</td></tr></table>'

  141. 

  142. var testCodelet = {

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

  144.     'name': 'app.py',

  145.     'lang': 'python',

  146.     'created': 'May 10, 2014 aaaaaaaaaa',

  147.     'modified': '2 days ago',

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

  149.     'authors': ['sevko', 'earwig', 'another author', 'a'],

  150.     'code': codeExample

  151. };

  152. 

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

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

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

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

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

  158.         loadMoreResults();

  159.     }

  160. });

  161. 

  162. /*

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

  164.  * search bar.

  165.  */

  166. function typingTimer(event){

  167.     clearTimeout(typingTimer);

  168. 

  169.     var enterKeyCode = 13;

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

  171.         if(lastValue != searchBar.value)

  172.             typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);

  173.     }

  174.     else {

  175.         event.preventDefault();

  176.         finishedTyping();

  177.         return false;

  178.     }

  179. };

  180. 

  181. /*

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

  183.  *

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

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

  186.  * server.

  187.  */

  188. function finishedTyping(){

  189.     lastValue = searchBar.value;

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

  191. 

  192.     clearResults();

  193.     if(searchBar.value){

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

  195.         populateResults();

  196.     }

  197.     else {

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

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

  200.         advancedSearchButton.removeClass("clicked");

  201.         clearResults();

  202.     }

  203. }

  204. 

  205. /*

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

  207.  */

  208. function clearResults(){

  209.     while(resultsDiv.firstChild)

  210.         resultsDiv.removeChild(resultsDiv.firstChild);

  211. }

  212. 

  213. /*

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

  215.  *

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

  217.  */

  218. function createResult(codelet) {

  219.     var maxAttributeLength = 20;

  220. 

  221.     //Level 1

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

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

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

  225.     //Level 2

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

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

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

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

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

  231.     //Level 3

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

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

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

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

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

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

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

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

  240. 

  241.     //Classes and ID's

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

  243. 

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

  245.     codeElt.id = 'code';

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

  247.     cycle.id = 'cycle-matches'

  248. 

  249.     title.id = 'title';

  250.     site.id = 'site';

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

  252.     nextMatch.href = '#';

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

  254.     prevMatch.href = '#';

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

  256.     language.id = 'language';

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

  258.     authors.id = 'authors';

  259. 

  260.     //Add the bulk of the html

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

  262.             + codelet.name + '</a>';

  263.     site.innerHTML = '<a href="' + codelet.origin[1] + '">' +

  264.             codelet.origin[0] +'</a>';

  265.     nextMatch.innerHTML = 'next match';

  266.     prevMatch.innerHTML = 'prev match';

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

  268.     dateModified.innerHTML = 'Last modified: <span>' + codelet.modified +

  269.             '</span>';

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

  271.     dateCreated.innerHTML = 'Created: <span>' +

  272.             codelet.created.substring(0, maxAttributeLength) + '</span>';

  273. 

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

  275.     var currLength = 0;

  276.     var authorsList = [];

  277.     for(var auth = 0; auth < codelet.authors.length; auth++){

  278.         currLength += codelet.authors[auth].length;

  279.         if(maxAttributeLength < currLength){

  280.             authorsList.push("...");

  281.             break;

  282.         }

  283.         else

  284.             authorsList.push('<a href=#>' + codelet.authors[auth] + '</a>');

  285.     }

  286.     authors.innerHTML = "Authors: <span>" + authorsList.join(", ") + "</span>";

  287. 

  288.     // Needs to be processed on the server

  289.     codeElt.innerHTML = '<div id=tablecontainer>' + codelet.code + '</div>';

  290. 

  291.     //Event binding

  292.     $(newDiv).on('mousemove', function(e) {

  293.         var holdCondition = $('.disable-hover');

  294. 

  295.         if(holdCondition.length == 0) {

  296.             $(this).siblings().removeClass('display-all');

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

  298.         }

  299.     });

  300. 

  301.     $(newDiv).on('mouseleave', function(e) {

  302.         var holdCondition = $('.disable-hover');

  303. 

  304.         if(holdCondition.length == 0)

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

  306.     });

  307. 

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

  309.         e.stopPropagation();

  310.         e.preventDefault();

  311.         nextSymbolMatch();

  312.     });

  313. 

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

  315.         e.stopPropagation();

  316.         e.preventDefault();

  317.         previousSymbolMatch();

  318.     });

  319. 

  320.     //Finish and append elements to parent elements

  321.     hiddenInfo.appendChild(dateCreated);

  322.     hiddenInfo.appendChild(dateModified);

  323.     hiddenInfo.appendChild(language);

  324.     hiddenInfo.appendChild(authors);

  325. 

  326.     hiddenInfoContainer.appendChild(hiddenInfo);

  327. 

  328.     row.appendChild(codeElt);

  329.     row.appendChild(hiddenInfoContainer);

  330.     table.appendChild(row);

  331. 

  332.     displayInfo.appendChild(site);

  333.     displayInfo.appendChild(title);

  334. 

  335.     cycle.appendChild(prevMatch);

  336.     cycle.appendChild(nextMatch);

  337. 

  338.     newDiv.appendChild(displayInfo);

  339.     newDiv.appendChild(table);

  340. 

  341.     return newDiv;

  342. }

  343. 

  344. function previousSymbolMatch() {

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

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

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

  348.         scrollDiv = currResult.find("#tablecontainer");

  349. 

  350.     if (currMatch.length == 0)

  351.         currMatch = matches[0];

  352.     else

  353.         currMatch.removeClass('current');

  354. 

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

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

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

  358. 

  359.     scrollDiv.scrollTop(scrollDiv.scrollTop()

  360.             - scrollDiv.height() / 2

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

  362. 

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

  364.     newMatch.addClass('current');

  365. };

  366. 

  367. function nextSymbolMatch() {

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

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

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

  371.         scrollDiv = currResult.find("#tablecontainer");

  372. 

  373.     if (currMatch.length == 0)

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

  375.     else

  376.         currMatch.removeClass("current");

  377. 

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

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

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

  381. 

  382.     scrollDiv.scrollTop(scrollDiv.scrollTop()

  383.             - scrollDiv.height() / 2

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

  385. 

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

  387.     newMatch.addClass("current");

  388. };

  389. 

  390. /*

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

  392.  *

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

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

  395.  */

  396. function queryServer(){

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

  398.         "q" : searchBar.value,

  399.         "p" : searchResultsPage++

  400.     });

  401. 

  402.     var results = $.Deferred();

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

  404.         var resultDivs = [];

  405.         if("error" in result)

  406.             insertErrorMessage(result["error"]);

  407.         else if(result["results"].length == 0 && searchResultsPage == 1)

  408.             insertErrorMessage("No search results.");

  409.         else

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

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

  412.         results.resolve(resultDivs);

  413.     });

  414. 

  415.     return results;

  416. }

  417. 

  418. /*

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

  420.  * with its response.

  421.  */

  422. function populateResults(){

  423.     searchResultsPage = 1;

  424.     loadMoreResults();

  425. }

  426. 

  427. /*

  428.  * Query the server for the next results page, and add its codelets to

  429.  * `div#results`.

  430.  */

  431. function loadMoreResults(){

  432.     queryServer().done(function(results){

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

  434.             var newDiv = results[result];

  435.             resultsDiv.appendChild(newDiv);

  436.             setTimeout(

  437.                 (function(divReference){

  438.                     return function(){

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

  440.                     };

  441.                 }(newDiv)),

  442.                 result * 20);

  443.         }

  444.     });

  445. }

  446. 

  447. /*

  448.  * Displays a warning message in the UI.

  449.  *

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

  451.  */

  452. function insertErrorMessage(msg){

  453.     var error = $(

  454.             [

  455.                 "<div id='error'><span id='s1'>Error</span> ",

  456.                 "<span id='s2'>&raquo;</span> </div>"

  457.             ].join(""));

  458.     error.append(msg);

  459.     resultsDiv.appendChild(error[0]);

  460. }