Surface render events in famo.us

Question

I\'m looking for an event that tells me when a surface has been rendered so I can call methods like surface.focus().

If I call focus immediately after I create the s

Answer 1

This is another case of when subclassing may be your easiest and most straight forward approach. In this example, Surface is subclassed and I am sure to grab the deploy function of the Surface and bind it to the MySurface instance for later use. Then when we override deploy later on, we can call super for the surface and not have to worry about altering core code. eventHandler is a property built into Surface, so that is used to send the render event.

An interesting test happened while making this example. If you refresh the code, and grunt pushes the changes to an unopened tab.. You event will not be fired until you open the tab again. Makes sense, but it was nice to see!

Here is what I did..

Good Luck!

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler')


function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.elementType = 'div';
MySurface.prototype.elementClass = 'famous-surface';


MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  this.eventHandler.trigger('surface-has-rendered', this);
};


var context = Engine.createContext();

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(data){
  console.log("Hello Render!");
  console.log(data);
})

var surface = new MySurface({
  size: [200,200],
  content: "Hello",
  properties: {
    color: 'white',
    textAlign: 'center',
    lineHeight: '200px',
    backgroundColor: 'green'
  }
});

surface.pipe(event_handler);

context.add(new StateModifier({origin:[0.5,0.5]})).add(surface);