gistfile1.txt

// ==========================================================================
// Project:   Ux.ButtonView
// Copyright: ©2011 My Company, Inc.
// ==========================================================================
/*globals Ux Ki */


/** @class

  (Document Your View Here)

  @extends SC.View
*/
Ux.ButtonView = SC.TemplateView.extend(Ki.StatechartManager,
/** @scope Ux.ButtonView.prototype */ {

  templateName: 'button',
  
  title: 'Submit',
  
  value: false,
  
  toggleOnValue: true,
  toggleOffValue: false,
  
  buttonBehavior: 'toggle-on',
  
  action: null,
  target: null,
  
  isEnabled: true,

  isActive: false,  

  isSelected: false,
  
  trigger: function() {
    this.sendEvent('trigger');
  },
  
  // ..........................................................
  // DISPLAY PROPERTIES
  // 
  
  displayDisabled: false,

  actionStateName: function() {
    return this.get('buttonBehavior')===Ux.PUSH_BUTTON ? 'PUSH_BUTTON' : 'TOGGLE';
  }.property('buttonBehavior').cacheable(),
  
  enabledStateName: function() {
    return this.get('isEnabled') ? 'ENABLED' : 'DISABLED';
  }.property('isEnabled').cacheable(),

  toggleStateName: function() {
    switch(this.get('value')) {
      case this.get('toggleOnValue'):
        return 'ON';
      case this.get('toggleOffValue'):
        return 'OFF';
      default:
        return 'MIXED';
    }
  }.property('value', 'toggleOnValue', 'toggleOffValue').cacheable(),
  
  // ..........................................................
  // STATES
  // 

  mouseDown: function(evt) {
    return this.sendEvent('mouseDown', evt);
  },  
  
  trace: true,

  stateProperties: ['actionStateName', 'enabledStateName', 'toggleStateName'],
  
  rootState: Ki.State.design({
    
    substatesAreConcurrent: true,
    
    ACTIONS: Ki.State.design({
      
      initialSubstate: 'START',
      
      actionStateNameDidChange: function() {
        this.gotoState(this.getPath('owner.actionStateName'));
      },
      
      START: Ki.State.design({
        enterState: function() {
          this.get('parentState').actionStateNameDidChange();
        }
      }),
      
      PUSH_BUTTON: Ki.State.design({
        enterState: function() {
          this.get('owner').set('isSelected', false);
        },
        
        trigger: function() {
          var view   = this.get('owner'),
              target = this.get('target'),
              action = this.get('action');
              
          if (target && target.isStatechart) {
            target.sendEvent(action,this);
          } else if (target) target[action].call(target, this);
        }
      }),
      
      TOGGLE: Ki.State.design({
        
        initialSubstate: 'START',

        toggleStateNameDidChange: function() {
          this.gotoState(this.getPath('owner.toggleStateName'));
        },

        START: Ki.State.design({
          enterState: function() {
            this.get('parentState').toggleStateNameDidChange();
          }
        }),
        
        ON: Ki.State.design({
          enterState: function() {
            var view = this.get('owner');
            view.set('value', view.get('toggleOnValue'))
                .set('isSelected', true);
          },

          trigger: function() {
            var behavior = this.get('owner').get('buttonBehavior');
            if (behavior!==Ux.TOGGLE_ON) this.gotoState('OFF');
          }
        }),

        OFF: Ki.State.design({
          enterState: function() {
            var view = this.get('owner');
            view.set('value', view.get('toggleOffValue'))
                .set('isSelected', false);
          },

          trigger: function() {
            var behavior = this.get('owner').get('buttonBehavior');
            if (behavior!==Ux.TOGGLE_OFF) this.gotoState('ON');
          }
        })
      })
      
    }),
    
    INPUT: Ki.State.design({
      initialSubstate: 'START',

      enabledStateNameDidChange: function() {
        this.gotoState(this.getPath('owner.enabledStateName'));
      },
      
      START: Ki.State.design({
        enterState: function() {
          this.get('parentState').enabledStateNameDidChange();
        }
      }),
      
      ENABLED: Ki.State.design({
        enterState: function() {
          this.get('owner').set('displayDisabled', false);
        },

        initialSubstate: 'READY',
        
        READY: Ki.State.design({
          mouseDown: function() {
            this.gotoState('ACTIVE');
            return true;
          }
        }),
        
        ACTIVE: Ki.State.design({
          enterState: function() {
            this.get('owner').set('isActive', true);
          },
          
          exitState: function() {
            this.get('owner').set('isActive', false);
          },
          
          mouseUp: function() {
            this.gotoState('READY');
            this.get('statechart').sendEvent('trigger');
            return true;
          }
        })
      }),
      
      DISABLED: Ki.State.design({
        enterState: function() {
          this.get('owner').set('displayDisabled', true);
        }
      })
    })
  })

});

Ux.ButtonView.PUSH_BUTTON = 'button';
Ux.ButtonView.TOGGLE      = 'toggle';
Ux.ButtonView.TOGGLE_ON   = 'toggle-on';
Ux.ButtonView.TOGGLE_OFF  = 'toggle-off';