Last active
August 29, 2015 14:03
-
-
Save markmarijnissen/fa413a1ba7f94286af6a to your computer and use it in GitHub Desktop.
Famo.us: Adds goToFirst, goToLast and goToIndex methods to Scrollview
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
define(function(require,module,exports){ | |
var Scrollview = require('famous/views/Scrollview'); | |
var ViewSequence = require('famous/core/ViewSequence'); | |
var VELOCITY = 0; // default: No animation (i.e. the item isn't given any "swipe"-velocity when moved) | |
/*********************************** | |
* getIndex | |
************************************/ | |
Scrollview.prototype.getIndex = function () { | |
return this._node.getIndex(); | |
}; | |
/*********************************** | |
* goToIndex | |
************************************/ | |
Scrollview.prototype.goToIndex = function (i,velocity,position) { | |
// if we're already there, don't move! | |
if(i == this.getIndex()) return; | |
// create ViewSequence node at proper location | |
var _ = this._node._; | |
var node = new ViewSequence({ | |
_: _, | |
index: i | |
}); | |
// Animate the movement (default is no animation) | |
if(velocity === undefined) velocity = VELOCITY; | |
// If animated (i.e. velocity > 0), start at +/- height from the item, and swipe towards proper position (0); | |
if(position === undefined) position = velocity > 0? this._node.getSize()[this.options.direction]: 0; | |
// We're swiping from the top, start before (negative height) and swipe down (positive velocity) | |
position = -1.0 * position; | |
// Unless we're swiping from the bottom, then we reverse position/velocity; | |
if(i < this.getIndex()) { | |
velocity = -1.0 * velocity; | |
position = -1.0 * position; | |
} | |
// Set the Scrollview | |
this.sequenceFrom(node); | |
// Position a little bit away from the element | |
this.setPosition(position); | |
// And swipe from there -- (and hope that scrollview ends in the right position - it's a bit of guesswork...) | |
this.setVelocity(velocity); | |
}; | |
/*********************************** | |
* goToFirst | |
************************************/ | |
Scrollview.prototype.goToFirst = function (velocity,position) { | |
this.goToIndex(this._node._.firstIndex,velocity,position); | |
}; | |
/*********************************** | |
* goToLast | |
************************************/ | |
Scrollview.prototype.goToLast = function (velocity,position) { | |
var _ = this._node._; | |
var index = _.firstIndex + _.array.length - 1; | |
this.goToIndex(index,position,velocity); | |
}; | |
}); |
Also I suggest to write a constructor like "ScrollviewController" and put all the methods there.
This allows to use your methods together with other classes which subclass Scrollview, f.e. InfiniteScroll
function ScrollviewController(scrollview) {
this._scrollview = scrollview
}
module.exports = ScrollviewController
ScrollviewController.prototype.getIndex = function () {
return this._scrollview._node.getIndex()
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Basically we need to set a transition there, like {duration: 500, curve: 'easeOutQuad'}