fixed unworking infinite scroll

3-1-stable
Dmitriy Zaporozhets 2012-02-12 23:52:27 +02:00
parent 48bc4fc214
commit ece9f50fb1
11 changed files with 180 additions and 66 deletions

View File

@ -10,6 +10,7 @@
//= require jquery.ui.selectmenu
//= require jquery.tagify
//= require jquery.cookie
//= require jquery.endless-scroll
//= require modernizr
//= require chosen
//= require raphael

View File

@ -2,6 +2,7 @@ var CommitsList = {
ref:null,
limit:0,
offset:0,
disable:false,
init:
function(ref, limit) {
@ -36,15 +37,21 @@ var CommitsList = {
$("#commits_list").append(html);
if(count > 0) {
this.offset += count;
this.initLoadMore();
} else {
this.disable = true;
}
},
initLoadMore:
function() {
$(window).bind('scroll', function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$(window).unbind('scroll');
$(document).endlessScroll({
bottomPixels: 400,
fireDelay: 1000,
fireOnce:true,
ceaseFire: function() {
return CommitsList.disable;
},
callback: function(i) {
CommitsList.getOld();
}
});

View File

@ -3,6 +3,7 @@ var NoteList = {
first_id: 0,
last_id: 0,
resource_name: null,
disable:false,
init:
function(resource_name, first_id, last_id) {
@ -26,9 +27,12 @@ getOld:
append:
function(id, html) {
this.first_id = id;
$("#notes-list").append(html);
this.initLoadMore();
if(this.first_id == id) {
this.disable = true;
} else {
this.first_id = id;
$("#notes-list").append(html);
}
},
replace:
@ -76,11 +80,16 @@ initRefresh:
initLoadMore:
function() {
$(window).bind('scroll', function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$(window).unbind('scroll');
$(document).endlessScroll({
bottomPixels: 400,
fireDelay: 1000,
fireOnce:true,
ceaseFire: function() {
return NoteList.disable;
},
callback: function(i) {
NoteList.getOld();
}
});
});
}
}

View File

@ -1,11 +1,10 @@
var Pager = {
ref:null,
limit:0,
offset:0,
disable:false,
init:
function(ref, limit) {
this.ref=ref;
function(limit) {
this.limit=limit;
this.offset=limit;
this.initLoadMore();
@ -28,17 +27,24 @@ var Pager = {
$(".content_list").append(html);
if(count > 0) {
this.offset += count;
this.initLoadMore();
} else {
this.disable = true;
}
},
initLoadMore:
function() {
$(window).bind('scroll', function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$(window).unbind('scroll');
$(document).endlessScroll({
bottomPixels: 400,
fireDelay: 1000,
fireOnce:true,
ceaseFire: function() {
return Pager.disable;
},
callback: function(i) {
$('.loading').show();
Pager.getOld();
}
});
});
}
}

View File

@ -1,42 +0,0 @@
var ProjectsList = {
limit:0,
offset:0,
init:
function(limit) {
this.limit=limit;
this.offset=limit;
this.initLoadMore();
},
getOld:
function() {
$('.loading').show();
$.ajax({
type: "GET",
url: location.href,
data: "limit=" + this.limit + "&offset=" + this.offset,
complete: function(){ $('.loading').hide()},
dataType: "script"});
},
append:
function(count, html) {
$(".tile").append(html);
if(count > 0) {
this.offset += count;
this.initLoadMore();
}
},
initLoadMore:
function() {
$(window).bind('scroll', function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$(window).unbind('scroll');
$('.loading').show();
ProjectsList.getOld();
}
});
}
}

View File

@ -13,7 +13,7 @@ class CommitsController < ApplicationController
def index
@repo = project.repo
@limit, @offset = (params[:limit] || 20), (params[:offset] || 0)
@limit, @offset = (params[:limit] || 40), (params[:offset] || 0)
@commits = @project.commits(@ref, params[:path], @limit, @offset)
respond_to do |format|

View File

@ -26,6 +26,6 @@
- if @commits.count == @limit
:javascript
$(function(){
CommitsList.init("#{@ref}", 20);
CommitsList.init("#{@ref}", #{@limit});
});

View File

@ -14,3 +14,8 @@
- else
:plain
- else
- if params[:first_id]
:plain
NoteList.append(#{params[:first_id]}, "");

View File

@ -3,7 +3,7 @@
%small= "( #{current_user.projects.count} )"
%hr
- unless @projects.empty?
%div.tile= render "tile"
%div.content_list= render "tile"
-# If projects requris paging
-# We add ajax loader & init script
@ -13,7 +13,7 @@
:javascript
$(function(){
ProjectsList.init(16);
Pager.init(#{@limit});
});
- else
%h2 Nothing here

View File

@ -1,2 +1,2 @@
:plain
ProjectsList.append(#{@projects.count}, "#{escape_javascript(render(:partial => 'projects/tile'))}");
Pager.append(#{@projects.count}, "#{escape_javascript(render(:partial => 'projects/tile'))}");

View File

@ -0,0 +1,128 @@
/**
* Endless Scroll plugin for jQuery
*
* v1.4.8
*
* Copyright (c) 2008 Fred Wu
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
/**
* Usage:
*
* // using default options
* $(document).endlessScroll();
*
* // using some custom options
* $(document).endlessScroll({
* fireOnce: false,
* fireDelay: false,
* loader: "<div class=\"loading\"><div>",
* callback: function(){
* alert("test");
* }
* });
*
* Configuration options:
*
* bottomPixels integer the number of pixels from the bottom of the page that triggers the event
* fireOnce boolean only fire once until the execution of the current event is completed
* fireDelay integer delay the subsequent firing, in milliseconds, 0 or false to disable delay
* loader string the HTML to be displayed during loading
* data string|function plain HTML data, can be either a string or a function that returns a string,
* when passed as a function it accepts one argument: fire sequence (the number
* of times the event triggered during the current page session)
* insertAfter string jQuery selector syntax: where to put the loader as well as the plain HTML data
* callback function callback function, accepts one argument: fire sequence (the number of times
* the event triggered during the current page session)
* resetCounter function resets the fire sequence counter if the function returns true, this function
* could also perform hook actions since it is applied at the start of the event
* ceaseFire function stops the event (no more endless scrolling) if the function returns true
*
* Usage tips:
*
* The plugin is more useful when used with the callback function, which can then make AJAX calls to retrieve content.
* The fire sequence argument (for the callback function) is useful for 'pagination'-like features.
*/
(function($){
$.fn.endlessScroll = function(options) {
var defaults = {
bottomPixels : 50,
fireOnce : true,
fireDelay : 150,
loader : "<br />Loading...<br />",
data : "",
insertAfter : "div:last",
resetCounter : function() { return false; },
callback : function() { return true; },
ceaseFire : function() { return false; }
};
var options = $.extend({}, defaults, options),
firing = true,
fired = false,
fireSequence = 0,
is_scrollable;
if (options.ceaseFire.apply(this) === true)
firing = false;
if (firing === true) {
$(this).scroll(function() {
if (options.ceaseFire.apply(this) === true) {
firing = false;
return; // Scroll will still get called, but nothing will happen
}
if (this == document || this == window) {
is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels;
} else {
// calculates the actual height of the scrolling container
var inner_wrap = $(".endless_scroll_inner_wrap", this);
if (inner_wrap.length == 0)
inner_wrap = $(this).wrapInner("<div class=\"endless_scroll_inner_wrap\" />").find(".endless_scroll_inner_wrap");
is_scrollable = inner_wrap.length > 0 &&
(inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels);
}
if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) {
if (options.resetCounter.apply(this) === true) fireSequence = 0;
fired = true;
fireSequence++;
$(options.insertAfter).after("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");
data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;
if (data !== false) {
$(options.insertAfter).after("<div id=\"endless_scroll_data\">" + data + "</div>");
$("#endless_scroll_data").hide().fadeIn(250, function() {$(this).removeAttr("id");});
options.callback.apply(this, [fireSequence]);
if (options.fireDelay !== false || options.fireDelay !== 0) {
$("body").after("<div id=\"endless_scroll_marker\"></div>");
// slight delay for preventing event firing twice
$("#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() {
$(this).remove();
fired = false;
});
}
else
fired = false;
}
$("#endless_scroll_loader").remove();
}
});
}
};
})(jQuery);