Quellcode durchsuchen

Add jQuery; infinite scrolling to results.

Add:
    static/js/index.js
        -Add new results to the results `div` whenever the user scrolls to the
        bottom of the page.
tags/v1.0^2
Severyn Kozak vor 10 Jahren
Ursprung
Commit
9b2346c86b
5 geänderte Dateien mit 46 neuen und 14 gelöschten Zeilen
  1. +35
    -13
      static/js/index.js
  2. +4
    -0
      static/js/jquery.min.js
  3. +3
    -0
      static/sass/_mixins.sass
  4. +3
    -1
      static/sass/index.sass
  5. +1
    -0
      templates/index.html

+ 35
- 13
static/js/index.js Datei anzeigen

@@ -5,10 +5,17 @@

FINISH_TYPING_INTERVAL = 650;
searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
resultsDiv = document.querySelectorAll("div#results")[0];

var typingTimer, lastValue;
searchBar.onkeyup = typingTimer;

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadMoreResults();
}
});

/*
* Clear the existing timer and set a new one the the user types text into the
* search bar.
@@ -32,9 +39,10 @@ function finishedTyping(){

clearResults();
if(searchBar.value){
populateResults();
if(!searchField.classList.contains("partly-visible"))
searchField.classList.add("partly-visible");

populateResults();
}
else
searchField.classList.remove("partly-visible");
@@ -44,10 +52,8 @@ function finishedTyping(){
* Removes any child elements of `div#results`.
*/
function clearResults(){
var resultsPage = document.querySelectorAll("div#results")[0];

while(resultsPage.firstChild)
resultsPage.removeChild(resultsPage.firstChild);
while(resultsDiv.firstChild)
resultsDiv.removeChild(resultsDiv.firstChild);
}

/*
@@ -55,18 +61,17 @@ function clearResults(){
* with its response.
*/
function populateResults(){
var resultsPage = document.querySelectorAll("div#results")[0];
var results = queryServer();

for(var result = 0; result < results.length; result++){
var newDiv = results[result];
resultsPage.appendChild(newDiv);
resultsDiv.appendChild(newDiv);
setTimeout(
(function(divReference){
return function(){
divReference.classList.add("cascade");
};
}(newDiv)), result * 20);
(function(divReference){
return function(){
divReference.classList.add("cascade");
};
}(newDiv)), result * 20);
}

for(var result = 0; result < results.length; result++);
@@ -80,7 +85,7 @@ function populateResults(){
*/
function queryServer(){
var resultDivs = []
for(var result = 0; result < 200; result++){
for(var result = 0; result < 20; result++){
var newDiv = document.createElement("div");
newDiv.classList.add("result");
newDiv.innerHTML = Math.random();
@@ -92,3 +97,20 @@ function queryServer(){

return resultDivs;
}

/*
* Adds more results to `div#results`.
*/
function loadMoreResults(){
results = queryServer();
for(var result = 0; result < results.length; result++){
var newDiv = results[result];
resultsDiv.appendChild(newDiv);
setTimeout(
(function(divReference){
return function(){
divReference.classList.add("cascade");
};
}(newDiv)), result * 20);
}
}

+ 4
- 0
static/js/jquery.min.js
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 3
- 0
static/sass/_mixins.sass Datei anzeigen

@@ -13,5 +13,8 @@
.t1
@include vendor(transition, all 0.1s ease-out)

.t2
@include vendor(transition, all 0.2s ease-out)

.t3
@include vendor(transition, all 0.3s ease-out)

+ 3
- 1
static/sass/index.sass Datei anzeigen

@@ -6,7 +6,7 @@
@import variables

div#search-field
@extend .t3
@extend .t2

bottom: 0
height: 50%
@@ -48,4 +48,6 @@ div#results
padding: 1%

&.cascade
@extend .t3

margin-bottom: 0%

+ 1
- 0
templates/index.html Datei anzeigen

@@ -6,6 +6,7 @@

= block head
{{ assets.tag("index.css") }}
{{ assets.tag("jquery.min.js") }}
= endblock

= block body


Laden…
Abbrechen
Speichern