Powered Light

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
    },
    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");
    }
});

enyo.kind({
    name: "TrafficLight",
    components: [
        { name: "stop", kind: "PoweredLight", color: "red" },
        { name: "slow", kind: "PoweredLight", color: "yellow" },
        { name: "go", kind: "PoweredLight", color: "green" }
    ]
});

fiddle.manifest

name: Powered Light
description: A light that can be powered on and off
authors:
  - Roy Sutton
normalize_css: no