Famo.us: Scrollview with draggable items: having problems with background surfaces and setPosition transitions

Question

I'm very new to famo.us. I'm trying to extend this previous question about swiping items in a scrollview.

I want my version to have background surfaces behind the draggable which are revealed as the user swipes. I also want the draggable to snap back if the user does not complete a full swipe.

The two problems with it right now are:

1) The surfaces which I want to be behind the draggable are not behind the draggable. They should be hidden by it until the user swipes (I've made them transparent so the draggable can be seen).

2) the setPosition w/ transition causes an error: Uncaught TypeError: Cannot read property 'SUPPORTS_MULTIPLE' of undefined. If I don't provide the transition it works, but a transition would be preferred.

I should note also that I don't know if using a ContainerSurface is a good way of doing this so that could be part of the problem.

Code:

using: http://code.famo.us/famous/0.2/famous.js

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();

var scrollview = new Scrollview();
var surfaces = [];

scrollview.sequenceFrom(surfaces);

var inFrontModifier = new StateModifier({
  transform: Transform.translate(0, 0, 1)
});

for (var i = 0; i < 15; i++) {

  var container = new ContainerSurface({
    size: [undefined, 50],
    properties: {
      overflow: 'hidden'
    }
  });
  var draggable = new Draggable( {
    xRange: [-160, 160],
    yRange: [0, 0]
  });

  draggable.dragId = i;

  draggable.on('end', function(e) {
    if (e.position[0] == 160) {
      console.log('yes surface', this.dragId);
    }
    else if (e.position[0] == -160) {
      console.log('no surface', this.dragId);
    }
    else {
      this.setPosition([0,0,0], {
        method: 'snap',
        period: 300
      });
    }
  });

  var item = new Surface({
    content: "Item: " + (i + 1),
    size: [undefined, 50],
    properties: {
      backgroundColor: "lightgrey",
      borderBottom: "1px solid grey",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var backgroundYesModifier = new StateModifier({
    //on the left
    origin: [0,0]
  });
  var backgroundYes = new Surface({
    content: "Yes",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(0,255,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });
  var backgroundNoModifier = new StateModifier({
    //on the right
    origin: [1,0]
  });
  var backgroundNo = new Surface({
    content: "No",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(255,0,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var node = new RenderNode(draggable);
  node.add(item);
  //try to put the draggable in front of the background

  container.add(inFrontModifier).add(node);
  //add the background
  container.add(backgroundNoModifier).add(backgroundNo);
  container.add(backgroundYesModifier).add(backgroundYes);

  item.pipe(draggable);
  item.pipe(scrollview);
  surfaces.push(container);
}

mainContext.add(scrollview);

score 0 · Answer 1 · answered Jun 02 '14 at 21:38

The "on top of" can be solved simply by adding a zIndex=4 (4 is an arbitrary choice above your other zIndexes.)

I added the transition by using a slightly different form of the transition.

And while it is known that you don't want to create very many ContainerSurfaces in famo.us, I don't know what "too many" is and I don't know how to get the "hidden" to work otherwise.

Here is my version which I think does what you want:

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');

var mainContext = Engine.createContext();

var scrollview = new Scrollview();
var surfaces = [];

scrollview.sequenceFrom(surfaces);

var inFrontModifier = new StateModifier({
  transform: Transform.translate(0, 0, 1)
});

for (var i = 0; i < 15; i++) {

  var container = new ContainerSurface({
    size: [undefined, 50],
    properties: {
      overflow: 'hidden'
    }
  });
  var draggable = new Draggable( {
    xRange: [-160, 160],
    yRange: [0, 0]
  });

  draggable.dragId = i;

  draggable.on('end', function(e) {
    if (e.position[0] == 160) {
      console.log('yes surface', this.dragId);
    }
    else if (e.position[0] == -160) {
      console.log('no surface', this.dragId);
    }
    else {
      this.setPosition([0,0,0], {
        curve: Easing.outBounce,
        duration: 300
      });
    }
  });

  var item = new Surface({
    content: "Item: " + (i + 1),
    size: [undefined, 50],
    properties: {
      backgroundColor: "lightgrey",
      borderBottom: "1px solid grey",
      lineHeight: "50px",
      textAlign: "center",
      zIndex:4
    }
  });

  var backgroundYesModifier = new StateModifier({
    //on the left
    origin: [0,0]
  });
  var backgroundYes = new Surface({
    content: "Yes",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(0,255,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });
  var backgroundNoModifier = new StateModifier({
    //on the right
    origin: [1,0]
  });
  var backgroundNo = new Surface({
    content: "No",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(255,0,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var node = new RenderNode(draggable);
  node.add(item);
  //try to put the draggable in front of the background

  container.add(inFrontModifier).add(node);
  //add the background
  container.add(backgroundNoModifier).add(backgroundNo);
  container.add(backgroundYesModifier).add(backgroundYes);

  item.pipe(draggable);
  item.pipe(scrollview);
  surfaces.push(container);
}

mainContext.add(scrollview);

Not sure why the transition didn't work but using easing does work. Using zIndex here to determine which surfaces are in front does work... but I thought you were able to control that stuff in famous itself (ex this comment in the timbre lesson: "We also know that our page view is going to slide in front of our menu view. Let's add a state modifier to translate it forward in the z-direction by 0.1.") — MarkWheeler, Jun 11 '14 at 22:22

Famo.us: Scrollview with draggable items: having problems with background surfaces and setPosition transitions

Code:

1 Answers1