1 /**
  2  * @fileOverview render base class for kissy
  3  * @author yiminghe@gmail.com
  4  * @see http://martinfowler.com/eaaDev/uiArchs.html
  5  */
  6 KISSY.add("component/render", function (S, Component, UIBase, Manager) {
  7 
  8     /**
  9      * @memberOf Component
 10      * @name Render
 11      * @extends Component.UIBase
 12      * @class
 13      * Base Render class for KISSY Component.
 14      */
 15     return UIBase.extend([UIBase.Box.Render],
 16         /**
 17          * @lends Component.Render#
 18          */
 19         {
 20 
 21             /**
 22              * Get all css class name to be applied to the root element of this component for given state.
 23              * the css class names are prefixed with component name.
 24              * @param {String} [state] This component's state info.
 25              */
 26             getComponentCssClassWithState:function (state) {
 27                 var self = this,
 28                     componentCls = this.__componentClasses;
 29                 state = state || "";
 30                 return self.getCssClassWithPrefix(componentCls.split(/\s+/).join(state + " ") + state);
 31             },
 32 
 33             /**
 34              * Get full class name (with prefix) for current component
 35              * @param classes {String} class names without prefixCls. Separated by space.
 36              * @function
 37              * @return {String} class name with prefixCls
 38              * @private
 39              */
 40             getCssClassWithPrefix:Manager.getCssClassWithPrefix,
 41 
 42             createDom:function () {
 43                 var self = this;
 44                 self.get("el").addClass(self.getComponentCssClassWithState());
 45             },
 46 
 47             /**
 48              * Returns the dom element which is responsible for listening keyboard events.
 49              * @return {NodeList}
 50              */
 51             getKeyEventTarget:function () {
 52                 return this.get("el");
 53             },
 54 
 55             /**
 56              * @protected
 57              */
 58             _uiSetHighlighted:function (v) {
 59                 var self = this,
 60                     componentCls = self.getComponentCssClassWithState("-hover"),
 61                     el = self.get("el");
 62                 el[v ? 'addClass' : 'removeClass'](componentCls);
 63             },
 64 
 65             /**
 66              * @protected
 67              */
 68             _uiSetDisabled:function (v) {
 69                 var self = this,
 70                     componentCls = self.getComponentCssClassWithState("-disabled"),
 71                     el = self.get("el");
 72                 el[v ? 'addClass' : 'removeClass'](componentCls)
 73                     .attr("aria-disabled", v);
 74                 if (self.get("focusable")) {
 75                     //不能被 tab focus 到
 76                     self.getKeyEventTarget().attr("tabIndex", v ? -1 : 0);
 77                 }
 78             },
 79             /**
 80              * @protected
 81              */
 82             _uiSetActive:function (v) {
 83                 var self = this,
 84                     componentCls = self.getComponentCssClassWithState("-active");
 85                 self.get("el")[v ? 'addClass' : 'removeClass'](componentCls)
 86                     .attr("aria-pressed", !!v);
 87             },
 88             /**
 89              * @protected
 90              */
 91             _uiSetFocused:function (v) {
 92                 var self = this,
 93                     el = self.get("el"),
 94                     componentCls = self.getComponentCssClassWithState("-focused");
 95                 el[v ? 'addClass' : 'removeClass'](componentCls);
 96             },
 97 
 98             /**
 99              * Return the dom element into which child component to be rendered.
100              * @return {NodeList}
101              */
102             getContentElement:function () {
103                 return this.get("contentEl") || this.get("el");
104             }
105 
106         }, {//  screen state
107             ATTRS:/**
108              * @lends Component.Render#
109              */
110             {
111                 /**
112                  * see {@link Component.Controller#prefixCls}
113                  */
114                 prefixCls:{
115                     value:"ks-"
116                 },
117                 /**
118                  * see {@link Component.Controller#focusable}
119                  */
120                 focusable:{
121                     value:true
122                 },
123                 /**
124                  * see {@link Component.Controller#focused}
125                  */
126                 focused:{},
127                 /**
128                  * see {@link Component.Controller#active}
129                  */
130                 active:{},
131                 /**
132                  * see {@link Component.Controller#disabled}
133                  */
134                 disabled:{},
135                 /**
136                  * see {@link Component.Controller#highlighted}
137                  */
138                 highlighted:{}
139             }
140         });
141 }, {
142     requires:['./base', './uibase', './manager']
143 });