Powered Light with Event and Logging

fiddle.js

enyo.ready(function() {
    enyo.kind({
        name: 'Light',
        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',
        powered: true,
        events: {
            'onStateChanged' : ''
        },
        handlers: {
            'ontap': 'tapped'
        },
        create: function() {
            this.inherited(arguments);
            this.poweredChanged();
        },
        tapped: function(sender, event) {
            this.set('powered', !this.get('powered'));
        },
        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(sender, event) {
            enyo.log(sender.name + ' powered ' + (event.powered ? 'on' : 'off')
                + ' at ' + new Date());
        }
    });
 
    new enyo.Application({ name: 'app', view: 'TrafficLight' });
});

fiddle.manifest

name: Powered Light with Event and Logging
description: A traffic light that logs an event when powered on and off
authors:
  - Roy Sutton
normalize_css: no

Try it out on jsFiddle

From: Enyo: Up and Running by Roy Sutton