Events test

index.js

'use strict';

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var GestureHandler = require('famous/components/GestureHandler')
FamousEngine.init();


// UI events are sent up to parent nodes. 
// Parent nodes emit events down
var parent = FamousEngine.createScene().addChild()

// Add an onReceive method that catches all UI events
// from children
parent.onReceive = function(event, payload){
    // use conditional if multiple events
    if(event==="keyup"){
       // Nodes have an emit method that emits events 
       // to all of the child nodes
       this.emit('custom_event',payload.value)
    }
    if(event==='click'){
       console.log('clicked')
    }
}

// Adding a custom component will also work

// parent.addComponent({
//     onReceive: function(e, p){
//        if(e==="keyup"){
//          parent.emit('custom_event',p.value)
//        }
//     }
// })


/******  Child Nodes   ******/

// Node for textarea
var daughter = parent.addChild()
    .setAlign(0.5, 0.5)
    .setMountPoint(0.5, 0.5)
    .setSizeMode('absolute', 'absolute', 'absolute')
    .setAbsoluteSize(250, 250)


// Styled grey textarea 
daughter.el = new DOMElement(daughter, {
                tagName: 'textarea',
                 content:'Enter text here',
                properties:{
                    'background': 'grey',
                    'color':'white',
                    'font-size': '25px'
                }
            })

// Listen for keyup events, can also use keydown or change 
daughter.addUIEvent('keyup')


// Node for dragging
var son = parent.addChild()
           .setSizeMode(1,1)
           .setAbsoluteSize(200,200)

// Teal box that will be draggable
son.el = new DOMElement(son, {
    content:'Drag Me or change my content from the <textarea>',
    properties: {
        'background':'teal', 
        'cursor':'pointer'
    }

})



// Listen for custom event from parent

//(this is working)

// son.onReceive = function(event, payload){
//   if(event==="custom_event"){
//     son.el.setContent(payload)
//   }
// }

// ( this does not work )

son.addComponent({
    onReceive: function(event, payload){
      console.log(event)
      if(event==="custom_event"){
        son.el.setContent(payload)
      }
    },
    onSizeChange: function(x,y){
      // size change working
      console.log(x,y)
    }

})

// Create a Gesture Handler to handle dragging
var sonGesture = new GestureHandler(son)

// Update son node's position with drag position
sonGesture.on('drag', function(e,p){
    var currentPos = son.getPosition()
    var newPosX = currentPos[0] + e.centerDelta.x
    var newPosY = currentPos[1] + e.centerDelta.y
    son.setPosition(newPosX,newPosY)

})