1 /**
  2  * @fileOverview simple menuitem render
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("menu/menuitemRender", function (S, Node, Component) {
  6 
  7     var CHECK_CLS = "ks-menuitem-checkbox";
  8 
  9     function setUpCheckEl(self) {
 10         var el = self.get("el"),
 11             checkEl = el.one("." + CHECK_CLS);
 12         if (!checkEl) {
 13             checkEl = new Node("<div class='" + CHECK_CLS + "'/>").prependTo(el);
 14             // if not ie will lose focus when click
 15             checkEl.unselectable();
 16         }
 17         return checkEl;
 18     }
 19 
 20     return Component.Render.extend({
 21 
 22         _uiSetChecked:function (v) {
 23             var self = this,
 24                 el = self.get("el"),
 25                 cls = self.getComponentCssClassWithState("-checked");
 26             el[v ? 'addClass' : 'removeClass'](cls);
 27         },
 28 
 29         _uiSetSelected:function (v) {
 30             var self = this,
 31                 el = self.get("el"),
 32                 cls = self.getComponentCssClassWithState("-selected");
 33             el[v ? 'addClass' : 'removeClass'](cls);
 34         },
 35 
 36         _uiSetSelectable:function (v) {
 37             this.get("el").attr("role", v ? 'menuitemradio' : 'menuitem');
 38         },
 39 
 40         _uiSetCheckable:function (v) {
 41             if (v) {
 42                 setUpCheckEl(this);
 43             }
 44             this.get("el").attr("role", v ? 'menuitemcheckbox' : 'menuitem');
 45         },
 46 
 47         containsElement:function (element) {
 48             var el = this.get("el");
 49             return el && ( el[0] == element || el.contains(element));
 50         }
 51     }, {
 52         ATTRS:{
 53             elAttrs:{
 54                 valueFn:function () {
 55                     return {
 56                         role:"menuitem",
 57                         id:S.guid("ks-menuitem")
 58                     };
 59                 }
 60             },
 61             selected:{},
 62             // @inheritedDoc
 63             // content:{},
 64             // 属性必须声明,否则无法和 _uiSetChecked 绑定在一起
 65             checked:{}
 66         },
 67         HTML_PARSER:{
 68             selectable:function (el) {
 69                 var cls = this.getCssClassWithPrefix("menuitem-selectable");
 70                 return el.hasClass(cls);
 71             },
 72             checkable:function (el) {
 73                 var cls = this.getCssClassWithPrefix("menuitem-checkable");
 74                 return el.hasClass(cls);
 75             }
 76         }
 77     });
 78 }, {
 79     requires:['node', 'component']
 80 });