1 /**
  2  * @fileOverview simple split button ,common usecase :button + menubutton
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("button/split", function (S) {
  6 
  7     var handles = {
  8         content:function (e) {
  9             var self = this,
 10                 first = self.get("first"),
 11                 t = e.target;
 12             first.set("content", t.get("content"));
 13             first.set("value", t.get("value"));
 14             if (self.get("hideAfterMenuClick")) {
 15                 self.get("second").set("collapsed", true);
 16             }
 17         },
 18         value:function (e) {
 19             var self = this,
 20                 first = self.get("first"),
 21                 t = e.target;
 22             first.set("value", t.get("value"));
 23             if (self.get("hideAfterMenuClick")) {
 24                 self.get("second").set("collapsed", true);
 25             }
 26         }
 27     };
 28 
 29     /**
 30      * Combining button and menubutton to form SplitButton.
 31      * @class
 32      * @memberOf Button
 33      * @extends Base
 34      */
 35     function Split() {
 36         Split.superclass.constructor.apply(this, arguments);
 37     }
 38 
 39     Split.ATTRS =
 40     /**
 41      * @lends Button.Split#
 42      */
 43     {
 44         /**
 45          * Button instance.
 46          * @type {Button}
 47          */
 48         first:{},
 49         /**
 50          * MenuButton instance.
 51          * @type {MenuButton}
 52          */
 53         second:{},
 54         /**
 55          * Event type to listen on the menubutton.
 56          * Default : click.
 57          * @type String
 58          */
 59         eventType:{
 60             value:"click"
 61         },
 62         /**
 63          * Event handler type.
 64          * Enum : "content", "value".
 65          * "content" : sync first button with second menubutton 's content and value.
 66          * "value" : sync first button with second menubutton 's  value only.
 67          * @type String
 68          */
 69         eventHandler:{
 70             // 或者 value
 71             value:"content"
 72         },
 73         /**
 74          * Whether hide menubutton 's drop menu after click on it.
 75          * Default : true
 76          * @type Boolean
 77          */
 78         hideAfterMenuClick:{
 79             value:true
 80         }
 81     };
 82 
 83     S.extend(Split, S.Base,
 84         /**
 85          * @lends Button.Split#
 86          */
 87         {
 88             /**
 89              * Render button and menubutton together.
 90              */
 91             render:function () {
 92                 var self = this,
 93                     eventType = self.get("eventType"),
 94                     eventHandler = handles[self.get("eventHandler")],
 95                     first = self.get("first"),
 96                     second = self.get("second");
 97                 first.set("collapseSide", "right");
 98                 second.set("collapseSide", "left");
 99                 first.render();
100                 second.render();
101                 if (eventType && eventHandler) {
102                     second.on(eventType, eventHandler, self);
103                 }
104             }
105         });
106 
107     return Split;
108 
109 }, {
110     requires:['base']
111 });