How to add click event to each surface with specific effects, unable to add modifier

Question

How to add click event to each surface with specific effects, I am not able to add modifier.

I tried below code but its not working. I am unable to add StateModifier to each surface. Please help me to solve this problem as soon as possible.

var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var context = Engine.createContext();
var myModifier = new StateModifier({
    Transform: Transform.translate(0, 100, 1)
});
var surfaces1 = [];
var scrollers = [];
var scroll_h1_cont = new ContainerSurface({
    size: [window.innerWidth, 100],
    properties: {
        overflow: 'hidden'
    }
});
var scroll_h1 = new Scrollview({
    direction: 0
});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
scrollers.push(scroll_h1_cont);
for (var i = 0; i < 9; i++) {
    var surface1 = new Surface({
        content: "Surface: " + (i + 1),
        size: [window.innerWidth / 3, 100],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
            lineHeight: "100px",
            textAlign: "center"
        }
    });
    surface1.pipe(scroll_h1);
    surfaces1.push(surface1);
    surface1.pipe(myModifier);
};
context.add(scroll_h1_cont);

Any suggestions?

score 0 · Answer 1 · answered Jul 30 '14 at 13:42

0

This should at least get your scrollview working.

/* globals define */
define(function(require, exports, module) {
    'use strict';
    var Engine     = require('famous/core/Engine');
    var Surface    = require('famous/core/Surface');
    var Scrollview = require('famous/views/Scrollview');

    var context = Engine.createContext();

    var surfaces = [];

    // create ScrollView
    var scrollview = new Scrollview({
        direction: 0
    });

    // create 100 surfaces and add them into array
    for (var i = 0; i < 9; i++) {
        var temp = new Surface({
            content: 'Surface: ' + (i + 1),
            size: [undefined, 100],
            properties: {
                backgroundColor: 'hsl(' + (i * 360 / 40) + ', 100%, 50%)',
                lineHeight: '100px',
                textAlign: 'center'
            }
        });

        temp.pipe(scrollview);
        surfaces.push(temp);
    }

    // add array of surfaces into ScrollView
    scrollview.sequenceFrom(surfaces);

    // add ScrollView into context
    context.add(scrollview);
});

answered Jul 30 '14 at 13:42

Kraig Walker

812
13
25

Thnx @Kraig Walker, please tell me how to add modifier to each surface? – Amit Jul 31 '14 at 05:21
a modifier with a different value for *each* surface, or one that applies to all? – Kraig Walker Jul 31 '14 at 09:15
A modifier with same value for all, but the action will apply for on clicked surface. – Amit Jul 31 '14 at 09:39
After to much try I added modifiers & click event to each surface but on click of 1st surface ie. surfaces[0] gives a error:[Uncaught TypeError: Cannot read property 'setTransform' of undefined ], please help me to solve this error. – Amit Jul 31 '14 at 11:05
You need to follow good practice @Amit and post code. People can't help on pure speculation – Kraig Walker Jul 31 '14 at 11:06
Yeah, I know I required a good Practice, and I started also. For code please follow this url: https://github.com/Famous/events/issues/5 – Amit Jul 31 '14 at 11:25

How to add click event to each surface with specific effects, unable to add modifier

1 Answers1