Skip to content

Instantly share code, notes, and snippets.

@simkimsia
Created October 29, 2013 12:52
Show Gist options
  • Save simkimsia/7214074 to your computer and use it in GitHub Desktop.
Save simkimsia/7214074 to your computer and use it in GitHub Desktop.
How I use nginfinite scroll to fetch works
var fetchMyWorks = angular.module('fetchMyWorks', ['infinite-scroll']);
var bookContainerHeight = 341;
var bookContainerWidth = 180;
var gapBetweenEachColumn = 13;
var gapBetweenEachRow = 13;
var initial = 46; // height from top
var defaultHeight = 662;
fetchMyWorks.controller('StoriesController', function($scope, MyWorks) {
$scope.my_works = new MyWorks();
$scope.row_gap_style = function(n) {
if (n == 0) {
rowGapStyle = "top: " + initial + "px;";
} else {
rowGapStyle = "top: " + ((bookContainerHeight + gapBetweenEachRow) * n) + "px;";
}
return rowGapStyle;
};
$scope.col_gap_style = function(index) {
colGapStyle = "left: 0px;";
if (index % 3 == 1) {
colGapStyle = "left: " + (bookContainerWidth + gapBetweenEachRow) + "px;";
}
if (index % 3 == 2) {
colGapStyle = "left: " + ((bookContainerWidth + gapBetweenEachRow) * 2) + "px;";
}
return colGapStyle;
};
$scope.fetch_s3_cover = function(s3_url_prefix, item) {
cover = item.Cover.filename;
if (cover !== null) {
coverUrl = s3_url_prefix + 'files/story_file/filename/' + item.Cover.id + '/' + cover;
return "width:180px; height: 254px; top:0px; left:0px; background: url('" + coverUrl + "') no-repeat; background-size: cover; border: 1px solid #DCDDDE;"
}
return '';
};
$scope.update_height = function() {
return "height: " + defaultHeight + "px;";
if ($scope.my_works.page > 1) {
var newHeight = defaultHeight + (($scope.my_works.page - 1) * 308)
return "height: " + newHeight + "px;";
}
};
});
// MyWorks constructor function to encapsulate HTTP and pagination logic
fetchMyWorks.factory('MyWorks', function($http) {
var MyWorks = function() {
this.items = [];
this.busy = false;
this.page = 1;
this.after = '';
this.perPage = 6;
this.maxLimit = 100;
};
MyWorks.prototype.nextPage = function() {
if (this.busy) return;
this.busy = true;
var url = "/my_works.json?page=" + this.page + "&top=" + this.perPage + "&callback=JSON_CALLBACK";
$http.defaults.headers.jsonp = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
$http.jsonp(url).success(function(data, status, headers, config) {
var items = data.stories;
this.maxLimit = data.paging.count;
for (var i = 0; i < items.length; i++) {
if (this.items.length < this.maxLimit) {
this.items.push(items[i]);
}
}
this.page = parseInt(this.items.length / this.perPage) + 1;
this.busy = false;
}.bind(this));
};
return MyWorks;
});
fetchMyWorks.filter('range', function() {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment