/**
* @ignore
* menu item ,child component for menu
* @author yiminghe@gmail.com
*/
KISSY.add("menu/menuitem", function (S, Component, MenuItemRender) {
var $ = S.all;
* @class KISSY.Menu.Item
* A menu item component which menu is consisted of.
* xclass: 'menuitem'.
* @extends KISSY.Component.Controller
*/
var MenuItem = Component.Controller.extend({
/**
* Handle mouseenter event. Make parent menu to highlight itself.
* Protected, should only be overridden by subclasses.
* @param {KISSY.Event.DOMEventObject} e Mouseenter event object.
* @protected
*/
handleMouseEnter: function (e) {
// 父亲不允许自己处理
if (MenuItem.superclass.handleMouseEnter.call(this, e)) {
return true;
}
this.get("parent").set("highlightedItem", this);
},
/**
* Handle mouseleave event. Make parent menu to unhighlight itself.
* Protected, should only be overridden by subclasses.
* @param {KISSY.Event.DOMEventObject} e Mouseleave event object.
* @protected
*
*/
handleMouseLeave: function (e) {
// 父亲不允许自己处理
if (MenuItem.superclass.handleMouseLeave.call(this, e)) {
return true;
}
this.get("parent").set("highlightedItem", null);
},
// for ios, ios only has touchdown
handleMouseDown: function (e) {
// 父亲不允许自己处理
if (MenuItem.superclass.handleMouseDown.call(this, e)) {
return true;
}
this.get("parent").set("highlightedItem", this);
},
* Perform default action when click on enter on this menuitem.
* If selectable, then make it selected.
* If checkable, then toggle it.
* Finally fire click on its parent menu.
* @protected
*/
performActionInternal: function () {
var self = this;
// 可选
if (self.get("selectable")) {
self.set("selected", true);
}
// 可选中,取消选中
if (self.get("checkable")) {
self.set("checked", !self.get("checked"));
}
self.fire("click");
return true;
},
_onSetHighlighted: function (v) {
// 是否要滚动到当前菜单项(横向,纵向)
if (v) {
var el = this.get("el"),
// 找到向上路径上第一个可以滚动的容器,直到父组件节点(包括)
// 找不到就放弃,为效率考虑不考虑 parent 的嵌套可滚动 div
p = el.parent(function (e) {
return $(e).css("overflow") != "visible";
}, this.get("parent").get("el").parent());
if (!p) {
return;
}
el.scrollIntoView(p, undefined, undefined, true);
}
},
* Check whether this menu item contains specified element.
* @param {KISSY.NodeList} element Element to be tested.
* @protected
*/
containsElement: function (element) {
return this.get('view') && this.get('view').containsElement(element);
}
}, {
ATTRS: {
focusable: {
value: false
},
handleMouseEvents: {
value: false
},
* Whether the menu item is selectable or not.
* Set to true for option.
* @cfg {Boolean} selectable
*/
/**
* @ignore
*/
selectable: {
view: 1
},
* Whether the menu item is checkable or not.
* Set to true for checkbox option.
* @cfg {Boolean} checkable
*/
/**
* @ignore
*/
checkable: {
view: 1
},
* The value associated with the menu item.
* @cfg {*} value
*/
* The value associated with the menu item.
* @property value
* @type {*}
*/
/**
* @ignore
*/
value: {},
* Whether the menu item is checked.
* @type {Boolean}
* @property checked
*/
* Whether the menu item is checked.
* @cfg {Boolean} checked
*/
/**
* @ignore
*/
checked: {
view: 1
},
* Whether the menu item is selected.
* @type {Boolean}
* @property selected
*/
* Whether the menu item is selected.
* @cfg {Boolean} selected
*/
/**
* @ignore
*/
selected: {
view: 1
},
xrender: {
value: MenuItemRender
}
}
}, {
xclass: "menuitem",
priority: 10
});
return MenuItem;
}, {
requires: ['component/base', './menuitem-render']
});