Last active
December 15, 2015 07:48
-
-
Save vadimdemedes/5225637 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Wookmark</title> | |
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> | |
<!-- Include Chute.js --> | |
<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script> | |
<!-- Template for a container element --> | |
<script class="container-template" type="application/x-template"> | |
<div class="assets"></div> | |
</script> | |
<!-- Template for a single image --> | |
<script class="item-template" type="application/x-template"> | |
<div class="asset"> | |
<img src="{{ asset.url }}/w/200"> | |
</div> | |
</script> | |
<script> | |
Chute.ready(function(){ | |
// run when all dependencies were loaded | |
// view component in this case, specified in data-load attribute of including script | |
var WallItemView = Chute.View.extend({ // view for a single data item | |
template: 'script.item-template' // specifying template via selector | |
}); | |
var scroll = Chute.View.Plugins.InfiniteScroll.extend({ // initializing infinite scroll plugin | |
global: true // telling to bind to window's scroll event | |
}); | |
var WallView = Chute.CollectionView.extend({ // view for a data collection | |
template: 'script.container-template', | |
itemView: WallItemView, // pointing to the view for every data item in the collection | |
dependencies: { // setting js & css dependencies, will be loaded asynchronously | |
js: ['lib/jquery.wookmark.min.js', 'lib/jquery.imagesloaded.min.js'], | |
css: ['stylesheets/grid.css'] | |
}, | |
plugins: [scroll], // injecting plugins | |
initialize: function(){ // custom initialize function | |
this.on('render', $.proxy(this.initWookmark, this)); // initialize wookmark when view was rendered | |
var self = this; | |
this.once('wookmark:init', function(){ | |
// custom-made event, responding only once | |
// binding to a data:load event and adding newly loaded images to the wall | |
self.on('data:load', $.proxy(self.addAssets, self)); | |
}); | |
}, | |
initWookmark: function(){ | |
var self = this; | |
this.$el.imagesLoaded(function(){ // waiting for all images to load | |
self.$el.find('div.asset').wookmark($.extend({}, { container: self.$el }, self.options.options.wookmark)); | |
self.trigger('wookmark:init'); // emitting custom event, for convenience | |
}); | |
}, | |
addAssets: function(){ // adding newly loaded assets to the wall | |
var self = this; | |
_(this.data.items()).forEach(function(item){ | |
self.add(item); // will insert a new WallItemView with a specified data in item variable | |
}); | |
this.initWookmark(); // re-initialize wookmark to pick up those new images | |
} | |
}); | |
var wall = new WallView({ | |
data: new Chute.API.Assets({ album: '9IZukfpi' }).toData(), // set of images | |
container: 'div.wall', // insert wall into div.wall | |
options: { // custom options for wookmark plugin | |
wookmark: { | |
offset: 2, | |
itemWidth: 210 | |
} | |
} | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="wall"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment