/** * @ignore * render base class for kissy * @author yiminghe@gmail.com * refer: http://martinfowler.com/eaaDev/uiArchs.html */ KISSY.add("component/base/render", function (S, BoxRender, Component, UIBase, Manager) { /** * @ignore * Base Render class for KISSY Component. */ return UIBase.extend([BoxRender], { /** * Get all css class name to be applied to the root element of this component for given state. * the css class names are prefixed with component name. * @param {String} [state] This component's state info. * @ignore */ getCssClassWithState: function (state) { var self = this, componentCls = self.get("ksComponentCss") || ""; state = state || ""; return self.getCssClassWithPrefix(componentCls.split(/\s+/).join(state + " ") + state); }, /** * Get full class name (with prefix) for current component * @param classes {String} class names without prefixCls. Separated by space. * @method * @return {String} class name with prefixCls * @ignore */ getCssClassWithPrefix: Manager.getCssClassWithPrefix, createDom: function () { var self = this; self.get("el").addClass(self.getCssClassWithState()); }, /** * Returns the dom element which is responsible for listening keyboard events. * @return {KISSY.NodeList} * @ignore */ getKeyEventTarget: function () { return this.get("el"); }, /** * @ignore */ _onSetHighlighted: function (v) { var self = this, componentCls = self.getCssClassWithState("-hover"), el = self.get("el"); el[v ? 'addClass' : 'removeClass'](componentCls); }, /** * @ignore */ _onSetDisabled: function (v) { var self = this, componentCls = self.getCssClassWithState("-disabled"), el = self.get("el"); el[v ? 'addClass' : 'removeClass'](componentCls) .attr("aria-disabled", v); if (self.get("focusable")) { //不能被 tab focus 到 self.getKeyEventTarget().attr("tabIndex", v ? -1 : 0); } }, /** * @ignore */ _onSetActive: function (v) { var self = this, componentCls = self.getCssClassWithState("-active"); self.get("el")[v ? 'addClass' : 'removeClass'](componentCls) .attr("aria-pressed", !!v); }, /** * @ignore */ _onSetFocused: function (v) { var self = this, el = self.get("el"), componentCls = self.getCssClassWithState("-focused"); el[v ? 'addClass' : 'removeClass'](componentCls); }, /** * Return the dom element into which child component to be rendered. * @return {KISSY.NodeList} * @ignore */ getContentElement: function () { return this.get("contentEl") || this.get("el"); } }, {// screen state ATTRS: { prefixCls: { value: "ks-" }, focusable: { value: true }, focused: {}, active: {}, disabled: {}, highlighted: {} }, HTML_PARSER: { disabled: function (el) { var self = this, componentCls = self.getCssClassWithState("-disabled"); return self.get("el").hasClass(componentCls); } } }); }, { requires: ['./box-render', './impl', './uibase', './manager'] });