1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * <iframe src='../../../examples/Button.html?noHeader' width = '320' height = '170' scrolling='no'></iframe>
  9  * <br/>
 10  * 示例:
 11  * <pre>
 12  * var btn = new Hilo.Button({
 13  *     image: buttonImage,
 14  *     upState: {rect:[0, 0, 64, 64]},
 15  *     overState: {rect:[64, 0, 64, 64]},
 16  *     downState: {rect:[128, 0, 64, 64]},
 17  *     disabledState: {rect:[192, 0, 64, 64]}
 18  * });
 19  * </pre>
 20  * @class Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。
 21  * @augments View
 22  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。此外还包括:
 23  * <ul>
 24  * <li><b>image</b> - 按钮图片所在的image对象。</li>
 25  * </ul>
 26  * @module hilo/view/Button
 27  * @requires hilo/core/Hilo
 28  * @requires hilo/core/Class
 29  * @requires hilo/view/View
 30  * @requires hilo/view/Drawable
 31  * @property {Object} upState 按钮弹起状态的属性或其drawable的属性的集合。
 32  * @property {Object} overState 按钮经过状态的属性或其drawable的属性的集合。
 33  * @property {Object} downState 按钮按下状态的属性或其drawable的属性的集合。
 34  * @property {Object} disabledState 按钮不可用状态的属性或其drawable的属性的集合。
 35  * @property {String} state 按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性。
 36  * @property {Boolean} enabled 指示按钮是否可用。默认为true。只读属性。
 37  * @property {Boolean} useHandCursor 当设置为true时,表示指针滑过按钮上方时是否显示手形光标。默认为true。
 38  */
 39  var Button = Class.create(/** @lends Button.prototype */{
 40     Extends: View,
 41     constructor: function(properties){
 42         properties = properties || {};
 43         this.id = this.id || properties.id || Hilo.getUid("Button");
 44         Button.superclass.constructor.call(this, properties);
 45 
 46         this.drawable = new Drawable(properties);
 47         this.setState(Button.UP);
 48     },
 49 
 50     upState: null,
 51     overState: null,
 52     downState: null,
 53     disabledState: null,
 54 
 55     state: null,
 56     enabled: true,
 57     useHandCursor: true,
 58 
 59     /**
 60      * 设置按钮是否可用。
 61      * @param {Boolean} enabled 指示按钮是否可用。
 62      * @returns {Button} 按钮本身。
 63      */
 64     setEnabled: function(enabled){
 65         if(this.enabled != enabled){
 66             if(!enabled){
 67                 this.setState(Button.DISABLED);
 68             }else{
 69                 this.setState(Button.UP);
 70             }
 71         }
 72         return this;
 73     },
 74 
 75     /**
 76      * 设置按钮的状态。此方法由Button内部调用,一般无需使用此方法。
 77      * @param {String} state 按钮的新的状态。
 78      * @returns {Button} 按钮本身。
 79      */
 80     setState: function(state){
 81         if(this.state !== state){
 82             this.state = state;
 83             this.pointerEnabled = this.enabled = state !== Button.DISABLED;
 84 
 85             var stateObj;
 86             switch(state){
 87                 case Button.UP:
 88                     stateObj = this.upState;
 89                     break;
 90                 case Button.OVER:
 91                     stateObj = this.overState;
 92                     break;
 93                 case Button.DOWN:
 94                     stateObj = this.downState;
 95                     break;
 96                 case Button.DISABLED:
 97                     stateObj = this.disabledState;
 98                     break;
 99             }
100 
101             if(stateObj){
102                 this.drawable.init(stateObj);
103                 Hilo.copy(this, stateObj, true);
104             }
105         }
106 
107         return this;
108     },
109 
110     /**
111      * overwrite
112      * @private
113      */
114     fire: function(type, detail){
115         if(!this.enabled) return;
116 
117         var evtType = typeof type === 'string' ? type : type.type;
118         switch(evtType){
119             case 'mousedown':
120             case 'touchstart':
121             case 'touchmove':
122                 this.setState(Button.DOWN);
123                 break;
124             case "mouseover":
125                 this.setState(Button.OVER);
126                 break;
127             case 'mouseup':
128                 if(this.overState) this.setState(Button.OVER);
129                 else if(this.upState) this.setState(Button.UP);
130                 break;
131             case 'touchend':
132             case 'touchout':
133             case 'mouseout':
134                 this.setState(Button.UP);
135                 break;
136         }
137 
138         return Button.superclass.fire.call(this, type, detail);
139     },
140 
141     Statics: /** @lends Button */ {
142         /**
143          * 按钮弹起状态的常量值,即:'up'。
144          * @type String
145          */
146         UP: 'up',
147         /**
148          * 按钮经过状态的常量值,即:'over'。
149          * @type String
150          */
151         OVER: 'over',
152         /**
153          * 按钮按下状态的常量值,即:'down'。
154          * @type String
155          */
156         DOWN: 'down',
157         /**
158          * 按钮不可用状态的常量值,即:'disabled'。
159          * @type String
160          */
161         DISABLED: 'disabled'
162     }
163  });