Traffic Light Listening for Events

fiddle.html

<script>
new TrafficLight().renderInto(document.body);
</script>

fiddle.js

enyo.kind({
    name: "Light",
    published: {
        "color" : "yellow"
    },
    style: "width: 50px; height: 50px; border-radius: 50%;",
    create: function() {
        this.inherited(arguments);
        this.colorChanged();
    },
    colorChanged: function(oldValue) {
        this.applyStyle("background-color", this.color);
    }
});

enyo.kind({
    name: "PoweredLight",
    kind: "Light",
    published: {
        powered: true
    },
    events: {
        "onStateChanged" : ""
    },
    handlers: {
        "ontap": "tapped"
    },
    create: function() {
        this.inherited(arguments);
        this.poweredChanged();
    },
    tapped: function(inSender, inEvent) {
        this.setPowered(!this.getPowered());
    },
    poweredChanged: function(oldValue) {
        this.applyStyle("opacity", this.powered ? "1" : "0.2");
        this.doStateChanged({ "powered" : this.powered });
    }
});

enyo.kind({
    name: "TrafficLight",
    handlers: {
        "onStateChanged": "logStateChanged"
    },
    components: [
        { name: "stop", kind: "PoweredLight", color: "red" },
        { name: "slow", kind: "PoweredLight", color: "yellow" },
        { name: "go", kind: "PoweredLight", color: "green" }
    ],
    logStateChanged: function(inSender, inEvent) {
        enyo.log(inSender.name + " powered " + (inEvent.powered ? "on" : "off") + " at " + new Date());
    }
});

fiddle.manifest

name: Traffic Light Listening for Events
description: Listening for the state changed event
authors:
  - Roy Sutton
normalize_css: no