Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | Scrollview: goToFirst(), goToLast(), goToIndex(i)
550
post-template-default,single,single-post,postid-550,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Scrollview: goToFirst(), goToLast(), goToIndex(i)

14 Jul Scrollview: goToFirst(), goToLast(), goToIndex(i)

Hi everybody,

Currently (0.2.2), Scrollview lacks a few functions:

  1. goToFirst()
  2. goToLast()
  3. goToIndex(i);

According to Github, this will be solved soon.

In the meanwhile, we can use a little hack. Check out Gist and fiddle below:

The hack involves exploiting the default ViewSequence Backing to find the first or last node, and then we simply sequenceFrom that node.

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);
    };
});

 

 

  • zawaung

    Well done, looks like Famo.us will implement this in the next release!!