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 });