      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  * @requires hilo/util/util
     32  * @property {Object} upState 按钮弹起状态的属性或其drawable的属性的集合。
     33  * @property {Object} overState 按钮经过状态的属性或其drawable的属性的集合。
     34  * @property {Object} downState 按钮按下状态的属性或其drawable的属性的集合。
     35  * @property {Object} disabledState 按钮不可用状态的属性或其drawable的属性的集合。
     36  * @property {String} state 按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性。
     37  * @property {Boolean} enabled 指示按钮是否可用。默认为true。只读属性。
     38  * @property {Boolean} useHandCursor 当设置为true时，表示指针滑过按钮上方时是否显示手形光标。默认为true。
     39  */
     40  var Button = Class.create(/** @lends Button.prototype */{
     41     Extends: View,
     42     constructor: function(properties){
     43         properties = properties || {};
     44         this.id = this.id || properties.id || Hilo.getUid("Button");
     45         Button.superclass.constructor.call(this, properties);
     46
     47         this.drawable = new Drawable(properties);
     48         this.setState(Button.UP);
     49     },
     50
     51     upState: null,
     52     overState: null,
     53     downState: null,
     54     disabledState: null,
     55
     56     state: null,
     57     enabled: true,
     58     useHandCursor: true,
     59
     60     /**
     61      * 设置按钮是否可用。
     62      * @param {Boolean} enabled 指示按钮是否可用。
     63      * @returns {Button} 按钮本身。
     64      */
     65     setEnabled: function(enabled){
     66         if(this.enabled != enabled){
     67             if(!enabled){
     68                 this.setState(Button.DISABLED);
     69             }else{
     70                 this.setState(Button.UP);
     71             }
     72         }
     73         return this;
     74     },
     75
     76     /**
     77      * 设置按钮的状态。此方法由Button内部调用，一般无需使用此方法。
     78      * @param {String} state 按钮的新的状态。
     79      * @returns {Button} 按钮本身。
     80      */
     81     setState: function(state){
     82         if(this.state !== state){
     83             this.state = state;
     84             this.pointerEnabled = this.enabled = state !== Button.DISABLED;
     85
     86             var stateObj;
     87             switch(state){
     88                 case Button.UP:
     89                     stateObj = this.upState;
     90                     break;
     91                 case Button.OVER:
     92                     stateObj = this.overState;
     93                     break;
     94                 case Button.DOWN:
     95                     stateObj = this.downState;
     96                     break;
     97                 case Button.DISABLED:
     98                     stateObj = this.disabledState;
     99                     break;
    100             }
    101
    102             if(stateObj){
    103                 this.drawable.init(stateObj);
    104                 util.copy(this, stateObj, true);
    105             }
    106         }
    107
    108         return this;
    109     },
    110
    111     /**
    112      * overwrite
    113      * @private
    114      */
    115     fire: function(type, detail){
    116         if(!this.enabled) return;
    117
    118         var evtType = typeof type === 'string' ? type : type.type;
    119         switch(evtType){
    120             case 'mousedown':
    121             case 'touchstart':
    122             case 'touchmove':
    123                 this.setState(Button.DOWN);
    124                 break;
    125             case "mouseover":
    126                 this.setState(Button.OVER);
    127                 break;
    128             case 'mouseup':
    129                 if(this.overState) this.setState(Button.OVER);
    130                 else if(this.upState) this.setState(Button.UP);
    131                 break;
    132             case 'touchend':
    133             case 'touchout':
    134             case 'mouseout':
    135                 this.setState(Button.UP);
    136                 break;
    137         }
    138
    139         return Button.superclass.fire.call(this, type, detail);
    140     },
    141
    142     Statics: /** @lends Button */ {
    143         /**
    144          * 按钮弹起状态的常量值，即：'up'。
    145          * @type String
    146          */
    147         UP: 'up',
    148         /**
    149          * 按钮经过状态的常量值，即：'over'。
    150          * @type String
    151          */
    152         OVER: 'over',
    153         /**
    154          * 按钮按下状态的常量值，即：'down'。
    155          * @type String
    156          */
    157         DOWN: 'down',
    158         /**
    159          * 按钮不可用状态的常量值，即：'disabled'。
    160          * @type String
    161          */
    162         DISABLED: 'disabled'
    163     }
    164  });