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: 'button',
  
  action: null,
  target: null,
  
  isEnabled: true,

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

  mouseDown: function(evt) {
    return this.sendEvent('mouseDown', evt);
  },  
  
  behaviorDidChange: function() {
    this.sendEvent('behaviorDidChange');
  }.observes('behaviorDidChange'),

  valueDidChange: function() {
    this.sendEvent('valueDidChange');
  }.observes('value'),

  trace: true,
  
  rootState: Ki.State.design({
    
    substatesAreConcurrent: true,
    
    ACTIONS: Ki.State.design({
      initialSubstate: 'START',
      
      behaviorDidChange: function() {
        var view = this.get('statechart');
        this.gotoState(view.get('behavior') === 'PUSH_BUTTON' ? 'PUSH_BUTTON' : 'TOGGLE');
      },
      
      START: Ki.State.design({
        enterState: function() {
          this.get('parentState').behaviorDidChange();
        }
      }),

      PUSH_BUTTON: Ki.State.design({
        enterState: function() {
          var view = this.get('statechart');
          view.set('isSelected', false);
        },
        
        trigger: function() {
          var view   = this.get('statechart'),
              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',

        START: Ki.State.design({
          enterState: function() {
            this.get('parentState').valueDidChange();
          }
        }),

        valueDidChange: function() {
          var view = this.get('statechart');
          this.gotoState(view.get('value') === view.get('toggleOnValue') ? 'ON' : 'OFF');
        },

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

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

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

          trigger: function() {
            var behavior = this.get('statechart').get('behavior');
            if (behavior!==Ux.TOGGLE_OFF) this.gotoState('ON');
          }
        })
      })
      
    }),
    
    INPUT: Ki.State.design({
      initialSubstate: 'START',
      
      START: Ki.State.design({
        enterState: function() {
          var chart = this.get('statechart');
          this.gotoState(chart.get('isEnabled') ? 'ENABLED' : 'DISABLED');
        }
      }),

      ENABLED: Ki.State.design({
        enterState: function() {
          this.get('statechart').set('displayDisabled', false);
        },

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

});

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