How can i create and trigger custom events in Framer Studio (Framer.js) using coffeescript?

Question

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

enter link description here This article demonstrates how to create and dispatch DOM events. Such events are commonly called synthetic events, as opposed to the events fired by the browser itself.

I know how to convert it to cs, but how can use it inside framer ? to create a custom event, to trigger it from a layer element , to catch event by a containing layer ? — Amitka, Jan 19 '17 at 08:33

score 3 · Answer 1 · answered Jan 20 '17 at 11:00

3

I'm not sure what you're trying to do, but probably you want custom events on Framer Layer objects, right?

The Layer object has some nice shorthand functions for this: on() and emit(). You use them like this:

layer = new Layer

customEventName = "something"

layer.on customEventName, (argument, layer) ->
    print "Custom event", argument, layer

layer.emit customEventName, 1

layer.emit customEventName, 2

This prints out the following:

» "Custom event", 1, <Layer layer id:1 (0, 0) 200x200>
» "Custom event", 2, <Layer layer id:1 (0, 0) 200x200>

answered Jan 20 '17 at 11:00

Niels

771
5
5

Thanks Niels. I didn't know this is possible and tried all sorts of workarounds. What about event bubbling ? can an parent layer listen to a child layer that fires a custom event ? – Amitka Jan 21 '17 at 12:37
I don't think we bubble custom events automatically. You can obviously set this up yourself, but that's a bit more work. – Niels Jan 22 '17 at 22:49
Thanks again. If it's not too much trouble can you show how to set it up ? a code example ? – Amitka Jan 24 '17 at 06:34

score 1 · Accepted Answer · answered Jan 19 '17 at 11:18

Got this link from Framer group at FB.

Here is a simple cs example that works for my needs

# npm install events
EventsEmitter = require('events')

class customEvent extends EventsEmitter
    constructor: ->
        @on "startScan", -> startAppsScan()
        @on "cancelScan", -> cancelScan()

startScanButton = new Layer
    x: Align.center
    y: Align.center(-150)
    backgroundColor: "yellow"

cancelScanButton = new Layer
    x: Align.center
    y: Align.center(150)
    backgroundColor: "red"

startScanButton.onClick ->
    evt = new customEvent
    evt.emit "startScan"

cancelScanButton.onClick ->
    evt = new customEvent
    evt.emit "cancelScan"

startAppsScan = ->
    print "starting scan...."

cancelScan = ->
    print "scan is cancelled !"

How can i create and trigger custom events in Framer Studio (Framer.js) using coffeescript?

2 Answers2