From ece9f50fb1076c1efee54b4ab3b161f2cac70046 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Sun, 12 Feb 2012 23:52:27 +0200 Subject: [PATCH] fixed unworking infinite scroll --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/commits.js | 15 +- app/assets/javascripts/note.js | 23 +++- app/assets/javascripts/pager.js | 22 +-- app/assets/javascripts/projects.js | 42 ------ app/controllers/commits_controller.rb | 2 +- app/views/commits/index.html.haml | 2 +- app/views/notes/_load.js.haml | 5 + app/views/projects/index.html.haml | 4 +- app/views/projects/index.js.haml | 2 +- .../javascripts/jquery.endless-scroll.js | 128 ++++++++++++++++++ 11 files changed, 180 insertions(+), 66 deletions(-) delete mode 100644 app/assets/javascripts/projects.js create mode 100644 vendor/assets/javascripts/jquery.endless-scroll.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 5782f0af..1a011c7d 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -10,6 +10,7 @@ //= require jquery.ui.selectmenu //= require jquery.tagify //= require jquery.cookie +//= require jquery.endless-scroll //= require modernizr //= require chosen //= require raphael diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js index bb06df55..b31fe485 100644 --- a/app/assets/javascripts/commits.js +++ b/app/assets/javascripts/commits.js @@ -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(); } }); diff --git a/app/assets/javascripts/note.js b/app/assets/javascripts/note.js index c791623b..831150ff 100644 --- a/app/assets/javascripts/note.js +++ b/app/assets/javascripts/note.js @@ -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(); } - }); + }); } } diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js index f34f198d..d42ae1e0 100644 --- a/app/assets/javascripts/pager.js +++ b/app/assets/javascripts/pager.js @@ -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(); } - }); + }); } } diff --git a/app/assets/javascripts/projects.js b/app/assets/javascripts/projects.js deleted file mode 100644 index 90de73a1..00000000 --- a/app/assets/javascripts/projects.js +++ /dev/null @@ -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(); - } - }); - } -} diff --git a/app/controllers/commits_controller.rb b/app/controllers/commits_controller.rb index 74ea018a..18f27587 100644 --- a/app/controllers/commits_controller.rb +++ b/app/controllers/commits_controller.rb @@ -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| diff --git a/app/views/commits/index.html.haml b/app/views/commits/index.html.haml index a1a5eed7..048ee733 100644 --- a/app/views/commits/index.html.haml +++ b/app/views/commits/index.html.haml @@ -26,6 +26,6 @@ - if @commits.count == @limit :javascript $(function(){ - CommitsList.init("#{@ref}", 20); + CommitsList.init("#{@ref}", #{@limit}); }); diff --git a/app/views/notes/_load.js.haml b/app/views/notes/_load.js.haml index 62d44fe1..8d1b83f4 100644 --- a/app/views/notes/_load.js.haml +++ b/app/views/notes/_load.js.haml @@ -14,3 +14,8 @@ - else :plain + +- else + - if params[:first_id] + :plain + NoteList.append(#{params[:first_id]}, ""); diff --git a/app/views/projects/index.html.haml b/app/views/projects/index.html.haml index c52a7f85..32c4685f 100644 --- a/app/views/projects/index.html.haml +++ b/app/views/projects/index.html.haml @@ -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 diff --git a/app/views/projects/index.js.haml b/app/views/projects/index.js.haml index 25da7cb4..15bbd973 100644 --- a/app/views/projects/index.js.haml +++ b/app/views/projects/index.js.haml @@ -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'))}"); diff --git a/vendor/assets/javascripts/jquery.endless-scroll.js b/vendor/assets/javascripts/jquery.endless-scroll.js new file mode 100644 index 00000000..38db6b05 --- /dev/null +++ b/vendor/assets/javascripts/jquery.endless-scroll.js @@ -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: "
", + * 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 : "
Loading...
", + 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("
").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("
" + options.loader + "
"); + + data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data; + + if (data !== false) { + $(options.insertAfter).after("
" + data + "
"); + $("#endless_scroll_data").hide().fadeIn(250, function() {$(this).removeAttr("id");}); + + options.callback.apply(this, [fireSequence]); + + if (options.fireDelay !== false || options.fireDelay !== 0) { + $("body").after("
"); + // 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); \ No newline at end of file