patternjavascriptMinor
Infinite scroll pagination with a Wookmark layout
Viewed 0 times
paginationinfinitewithscrolllayoutwookmark
Problem
```
/* Infinite Scroll Pagination with a Wookmark layout
*
* Requires: jQuery, Wookmark
*/
var myApp = myApp || {};
;(function(myApp,$){
var WookmarkPagination = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
};
WookmarkPagination.prototype = {
defaults: {
url: '',
page: 2,
per_page: 5,
template: '',
scroll: true,
item: ".item",
items: ".items",
loader_image: ''
},
fetchReady: {
status: true
},
/**
* Initiate app. Bind the scroll event and onScroll function to the document.
*
* @return this
*/
init: function(){
var _this = this;
_this.config = $.extend({}, _this.defaults, _this.options);
var loader = '';
// Set loader
$(loader).appendTo("body").hide();
// Build wookmark layout
wookmark_handler = this.$elem.find(_this.config.item);
wookmark_handler.wookmark({
container: _this.$elem,
offset: 15,
itemWidth: 160,
autoResize: true
});
if(_this.config.scroll){
$(document).bind('scroll', function(){
_this.onScroll();
});
}
return _this;
},
/**
* Rebuild Wookmark layout
*
* @return void
*/
refreshLayout: function(){
var _this = this;
var opt = _this.config;
//console.log(wookmark_handler);
// Rebuild wookmark positions
if(wookmark_handler) wookmark_handler.wookmarkClear();
wookmark_handler = _this.$elem.find(_this.config.item);
// Initialize Wookmark to build layout container
wookmark_handler.wookmark({
container: _this.$elem,
offset: 15,
itemWidth: 160,
autoResize: true
});
},
/**
* Fetches the JSON from the server. On success rebuilds Wookmark positioning.
*
* @return the JSON object
*/
fetch: function(){
var _this = this
/* Infinite Scroll Pagination with a Wookmark layout
*
* Requires: jQuery, Wookmark
*/
var myApp = myApp || {};
;(function(myApp,$){
var WookmarkPagination = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
};
WookmarkPagination.prototype = {
defaults: {
url: '',
page: 2,
per_page: 5,
template: '',
scroll: true,
item: ".item",
items: ".items",
loader_image: ''
},
fetchReady: {
status: true
},
/**
* Initiate app. Bind the scroll event and onScroll function to the document.
*
* @return this
*/
init: function(){
var _this = this;
_this.config = $.extend({}, _this.defaults, _this.options);
var loader = '';
// Set loader
$(loader).appendTo("body").hide();
// Build wookmark layout
wookmark_handler = this.$elem.find(_this.config.item);
wookmark_handler.wookmark({
container: _this.$elem,
offset: 15,
itemWidth: 160,
autoResize: true
});
if(_this.config.scroll){
$(document).bind('scroll', function(){
_this.onScroll();
});
}
return _this;
},
/**
* Rebuild Wookmark layout
*
* @return void
*/
refreshLayout: function(){
var _this = this;
var opt = _this.config;
//console.log(wookmark_handler);
// Rebuild wookmark positions
if(wookmark_handler) wookmark_handler.wookmarkClear();
wookmark_handler = _this.$elem.find(_this.config.item);
// Initialize Wookmark to build layout container
wookmark_handler.wookmark({
container: _this.$elem,
offset: 15,
itemWidth: 160,
autoResize: true
});
},
/**
* Fetches the JSON from the server. On success rebuilds Wookmark positioning.
*
* @return the JSON object
*/
fetch: function(){
var _this = this
Solution
The code looks pretty good, but here are a couple suggestions:
-
This is a little confusing. I don't write jQuery much, but it isn't clear what the first
- The semicolon at the top is unnecessary:
;(function(myApp,$){
- You use
_thisin many places wherethiswould work:
- Consider Function.bind (see MDN, only works on modern browsers)
- This very much depends on personal style
-
This is a little confusing. I don't write jQuery much, but it isn't clear what the first
this is referring to (and the second this has a different meaning than the one above, which is also confusing):$.fn.wookmark_pagination = function(options) {
return this.each(function() {
new WookmarkPagination(this, options).init();
});
};Code Snippets
$.fn.wookmark_pagination = function(options) {
return this.each(function() {
new WookmarkPagination(this, options).init();
});
};Context
StackExchange Code Review Q#16183, answer score: 2
Revisions (0)
No revisions yet.