Powered Light

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,
        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');
        }
    });
    
    enyo.kind({
        name: 'TrafficLight',
        components: [
            { name: 'stop', kind: 'PoweredLight', color: 'red' },
            { name: 'slow', kind: 'PoweredLight', color: 'yellow' },
            { name: 'go', kind: 'PoweredLight', color: 'green' }
        ]
    });
 
    new enyo.Application({ name: 'app', view: 'TrafficLight' });
});

fiddle.manifest

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

Try it out on jsFiddle

From: Enyo: Up and Running by Roy Sutton