diff --git a/static/js/index.js b/static/js/index.js index 8c31631..e8901de 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -155,6 +155,8 @@ function createResult(codelet) { //Level 3 var title = document.createElement("span"), site = document.createElement("span"), + nextMatch = document.createElement("a"), + prevMatch = document.createElement("a"), dateModified = document.createElement("div"), language = document.createElement("div"), dateCreated = document.createElement("div"), @@ -169,6 +171,10 @@ function createResult(codelet) { title.id = 'title'; site.id = 'site'; + nextMatch.id = 'next-match'; + nextMatch.href = '#'; + prevMatch.id = 'prev-match'; + prevMatch.href = '#'; dateModified.id = 'date-modified'; language.id = 'language'; dateCreated.id = 'date-created'; @@ -178,6 +184,8 @@ function createResult(codelet) { title.innerHTML = 'File ' + codelet.filename + ''; site.innerHTML = 'on ' + codelet.origin[0] +''; + nextMatch.innerHTML = 'next match'; + prevMatch.innerHTML = 'prev match'; language.innerHTML = 'Language: ' + codelet.language + ''; dateModified.innerHTML = 'Last modified: ' + codelet.date_modified + ''; // Needs to be changed from int to string on the server @@ -200,28 +208,37 @@ function createResult(codelet) { }); //Event binding - $(newDiv).hover(function(e) { + $(codeElt).hover(function(e) { $(row).addClass('display-all'); }); $(newDiv).on('transitionend', function(e) { - $(newDiv).one('mouseleave', function(e) { + $(codeElt).one('mouseleave', function(e) { $(row).removeClass('display-all'); }); }); - var cur_match = 0; - $(newDiv).click(function(e) { - var $code = $(this).find('#tablecontainer'), + var cur_match = -1; + var newMatch = function(e) { + var $code = $(newDiv).find('#tablecontainer'), $match = $code.find('#match_' + cur_match); $code.scrollTop($code.scrollTop() - $code.height() / 2 + $match.position().top + $match.height() / 2); $match.effect("highlight", {}, 750) + } + + $(nextMatch).click(function(e) { + e.stopPropagation() + cur_match = cur_match >= matches.length - 1 ? 0 : cur_match + 1; + newMatch(); + }); - cur_match = cur_match === codeElt.querySelectorAll('.hll').length - 1 ? - 0 : cur_match + 1; + $(prevMatch).click(function(e) { + e.stopPropagation() + cur_match = cur_match <= 0 ? matches.length - 1 : cur_match - 1; + newMatch(); }); //Finish and append elements to parent elements @@ -238,6 +255,8 @@ function createResult(codelet) { displayInfo.appendChild(title); displayInfo.appendChild(site); + displayInfo.appendChild(prevMatch); + displayInfo.appendChild(nextMatch); newDiv.appendChild(displayInfo); newDiv.appendChild(table); diff --git a/static/sass/index.sass b/static/sass/index.sass index 645b875..909051d 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -33,6 +33,7 @@ div#search-field max-height: 100px right: 0 position: absolute + z-index: 2 top: 0 width: 40% @@ -102,7 +103,6 @@ div#search-field &.partly-visible margin-top: 0% - padding-bottom: 3% position: absolute width: 100% @@ -311,7 +311,7 @@ div#results div#display-info font-size: 1.3em padding: 5px 0px 5px 5px - width: 400px + width: 100% a text-decoration: none @@ -325,14 +325,13 @@ div#display-info #site text-transform: capitalize - #language - font-size: 0.8em - font-weight: bold - margin-left: 100px - padding: 3px - @include vendor(border-radius, 2px) - background: #eee - color: #aaa + #prev-match + font-size: 0.7em + margin-left: 125px + + #next-match + font-size: 0.7em + margin-left: 20px td#code width: $codeWidth @@ -348,6 +347,7 @@ td#code height: inherit background-color: #49483e position: relative + z-index: 1 table table-layout:fixed @@ -363,6 +363,8 @@ div#hidden-info font-size: 1.2em line-height: 1.5em @include vendor(transition, margin-left 0.2s ease-in-out) + position: relative + z-index: 0 .display-all & margin-left: 0px