Pager
The Pager
is the element that holds the display images. Architecturally, it will also hold most of the carousel's browsing logic.
The images on display will be represented by a collection of imageNodes
. To give our app a realistic feel, we will animate the imageNode
elements using Famous' built-in physics engine.
Let's set up our Pager
class and the imageNodes
before adding the physics-based animation. Paste the code below into the file Pager.js
, and then uncomment all references to Pager
included in Carousel.js
.
/**
* Pager.js
*/
var DOMElement = require('famous/dom-renderables/DOMElement');
var PhysicsEngine = require('famous/physics/PhysicsEngine'); // To use later...
function Pager (node, options) {
this.node = node;
this.currentIndex = 0;
this.threshold = 4000;
this.pageWidth = 0;
this.pages = _createPages.call(this, node, options.pageData);
}
Pager.prototype.defineWidth = function(size){
this.pageWidth = size[0];
}
function _createPages(root, pageData) {
var pages = [];
for (var i = 0; i < pageData.length; i++) {
var imageNode = root.addChild();
imageNode.setSizeMode(1,1,1)
imageNode.setAbsoluteSize(500, 500, 0);
imageNode.setAlign(0.5, 0.5);
imageNode.setMountPoint(0.5, 0.5);
imageNode.setOrigin(0.5, 0.5);
var el = new DOMElement(imageNode);
el.setProperty('backgroundImage', 'url(' + pageData[i] + ')');
el.setProperty('background-repeat', 'no-repeat');
el.setProperty('background-size', 'cover');
pages.push(imageNode);
}
return pages;
}
module.exports = Pager;
Notice how we use the external private function _createPages
to construct and return an array of imageNodes
instead of using a new class for each node. This shows that classes aren't a necessity for Famous; using them is up to our discretion as developers.
Finding the width
Similar to our Dots
, let's get the width using an onSizeChange
method on a resize component for the Pager
. This value will come into play later when we want to position our imageNodes
off the screen.
var resizeComponent = {
onSizeChange: function(x, y, z) {
this.defineWidth(x);
}.bind(this)
};
this.node.addComponent(resizeComponent);
Add the lines above inside the Pager
constructor. Refer back to the previous Dots steps if you need a refresher on the onSizeChange
method.
Modified files: Pager.js | Carousel.js
Section recap: Code for this step