Famo.us how to select the surfaces in a scrollView that were not clicked on?

Question

I have a scrollView that contains 5 surfaces. If I click on a surface, I would like the others to be either faded out, z-indexed far behind or translated off the screen. The problem is, I do not know how to implement the selection of the other surfaces.

Famo.us Code:

Famous.Engine = famous.core.Engine;
Famous.Surface = famous.core.Surface;
Famous.RenderNode = famous.core.RenderNode;
Famous.Transform = famous.core.Transform;
Famous.Modifier = famous.core.Modifier;
Famous.EventHandler = famous.core.EventHandler;

Famous.ContainerSurface = famous.surfaces.ContainerSurface;

Famous.ScrollView = famous.views.Scrollview;

Famous.Transitionable = famous.transitions.Transitionable;
Famous.SnapTransition = famous.transitions.SnapTransition;
Famous.Easing = famous.transitions.Easing;
Famous.TransitionableTransform = famous.transitions.TransitionableTransform;

Famous.StateModifier = famous.modifiers.StateModifier;

var projectsList = document.getElementById('projects-list');    
var mainContext = Famous.Engine.createContext(projectsList);


var scrollView = new Famous.ScrollView({
    direction: 0
});

Famous.Transitionable.registerMethod('snap', Famous.SnapTransition);

var snap = { method: 'snap', period: 600, dampingRatio: 0.6 }

var surfaces = [];

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

    var surface = new Famous.Surface({
        size: [undefined, undefined],
        properties: {
            backgroundColor: "#fff", // "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            textAlign: "center"
        }
    });


        surface.open = false;

        surface.state = new Famous.Modifier();

        surface.trans = new Famous.Transitionable(500);

        surface.state.sizeFrom(function(){
            return [this.trans.get(), undefined];
        }.bind(surface));

        surface.node = new Famous.RenderNode();

        surface.node.add(surface.state).add(surface);

        surface.pipe(scrollView);

        surface.on('click',function(event){
            if (this.open) {
                    this.trans.halt();
                    this.trans.set(500, snap);
                    /* place code to reverse the animation that placed the other surfaces off-screen here */
                } else {
                    this.trans.halt();
                    this.trans.set($(window).width(), snap);
                    /* how to implement the selection of the other surfaces that were not clicked */
                }
                this.open = !this.open;

        }.bind(surface));

        surfaces.push(surface.node);
        // sequenceFrom method sets the collection of renderables under the Scrollview instance's control. You can pass array of items or ViewSequence object.
        scrollView.sequenceFrom(surfaces);
}

mainContext.add(scrollView);

An example Surface HTML Generated:

<div class="famous-surface" style="background-color: rgb(255, 255, 255); text-align: center; width: 500px; height: 662px; opacity: 0.999999; transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
  <div class="surface-content-wrapper">
    <div class="container-fluid">
      <section class="row project-preview">
        <article class="col-lg-12">
          <img class="img-responsive" src="/images/project_name_header.png">
          <h1>A Surface</h1>
          <div class="project-stats">
        </article>
      </section>
    </div>
  </div>
</div>

All the surfaces in the scrollView have the same class attributes. So if I click on the first surface, how do I tell famo.us to do something with the remaining four surfaces?

When I click on the specific surface the console logs for this and event.currentTarget are:

this: Surface { _matrix=[16], _opacity=1, _origin=[2], more...}
project...875d127 (line 116)

event: <div class="famous-surface" style="background-color: rgb(255, 255, 255); text-align: center; width: 500px; height: 662px; opacity: 0.999999; transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">

I am able to select the siblings of the surface that was clicked via $(event.currentTarget).siblings(); but is this ok for famo.us to is this too much of "touching the DOM"? Is there a better way? — Joe C, Feb 24 '15 at 17:11

score 1 · Accepted Answer · answered Feb 25 '15 at 05:59

You can use the scrollview's backing array directly.

surfaces

Once you get here, you'll have access to the nodes that are in your surfaces array. From there, it's a matter of excluding the surface that was returned as this from the array and interacting with the properties that you placed on your surface object, which you can do using underscore.

_(surfaces).each(function(node) {
  surface = node._child;
  if (surface != clickedSurface) {
    //Do whatever you want to do to the node or surfaces
  }
});

Your instinct that you should avoid using the siblings relationship is right. Further, I'd bet that you'd run into same nasty bugs in the future if you tried to manipulate your layout at all. You should stick to your famo.us objects whenever possible.

Makes sense to me. I can't wait to get to work and try this. I'll follow up and credit your answer. Thank you! — Joe C, Feb 25 '15 at 12:39

Joe C · Answer 2 · 2015-02-25T14:16:12.970

UPDATE: Please see answer given by @obsidian06 for proper solution.

For now, I'm going with Underscore's each() block that animates the surface's opacity on the click event.

var $otherSurfacesNotClicked = $(event.currentTarget).siblings();

_.each($otherSurfacesNotClicked, function(surface){
  console.log("surface in each loop: ", surface);
  $(surface).animate({opacity: 0});
});

There's a performance hit on mobile. Most likely the problem is using the jQuery animate(). Need to find the native Famo.us way of performing the same task.

Famo.us how to select the surfaces in a scrollView that were not clicked on?

2 Answers2