You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
5.3 KiB
182 lines
5.3 KiB
define([ |
|
"dojo/_base/declare", // declare |
|
"dojo/dom", // dom.setSelectable |
|
"dojo/dom-attr", // domAttr.set |
|
"dojo/dom-class", // domClass.toggle |
|
"dojo/_base/kernel", // kernel.deprecated |
|
"dojo/sniff", // has("ie") |
|
"dojo/_base/lang", // lang.hitch |
|
"./_Widget", |
|
"./_TemplatedMixin", |
|
"./_Contained", |
|
"./_CssStateMixin", |
|
"dojo/text!./templates/MenuItem.html" |
|
], function(declare, dom, domAttr, domClass, kernel, has, lang, |
|
_Widget, _TemplatedMixin, _Contained, _CssStateMixin, template){ |
|
|
|
// module: |
|
// dijit/MenuItem |
|
|
|
var MenuItem = declare("dijit.MenuItem" + (has("dojo-bidi") ? "_NoBidi" : ""), |
|
[_Widget, _TemplatedMixin, _Contained, _CssStateMixin], { |
|
// summary: |
|
// A line item in a Menu Widget |
|
|
|
// Make 3 columns |
|
// icon, label, and expand arrow (BiDi-dependent) indicating sub-menu |
|
templateString: template, |
|
|
|
baseClass: "dijitMenuItem", |
|
|
|
// label: String |
|
// Menu text as HTML |
|
label: "", |
|
_setLabelAttr: function(val){ |
|
this._set("label", val); |
|
var shortcutKey = ""; |
|
var text; |
|
var ndx = val.search(/{\S}/); |
|
if(ndx >= 0){ |
|
shortcutKey = val.charAt(ndx + 1); |
|
var prefix = val.substr(0, ndx); |
|
var suffix = val.substr(ndx + 3); |
|
text = prefix + shortcutKey + suffix; |
|
val = prefix + '<span class="dijitMenuItemShortcutKey">' + shortcutKey + '</span>' + suffix; |
|
}else{ |
|
text = val; |
|
} |
|
this.domNode.setAttribute("aria-label", text + " " + this.accelKey); |
|
this.containerNode.innerHTML = val; |
|
this._set('shortcutKey', shortcutKey); |
|
}, |
|
|
|
/*===== |
|
// shortcutKey: [readonly] String |
|
// Single character (underlined when the parent Menu is focused) used to navigate directly to this widget, |
|
// also known as [a mnemonic](http://en.wikipedia.org/wiki/Mnemonics_(keyboard%29). |
|
// This is denoted in the label by surrounding the single character with {}. |
|
// For example, if label="{F}ile", then shortcutKey="F". |
|
shortcutKey: "", |
|
=====*/ |
|
|
|
// iconClass: String |
|
// Class to apply to DOMNode to make it display an icon. |
|
iconClass: "dijitNoIcon", |
|
_setIconClassAttr: { node: "iconNode", type: "class" }, |
|
|
|
// accelKey: String |
|
// Text for the accelerator (shortcut) key combination, a control, alt, etc. modified keystroke meant to |
|
// execute the menu item regardless of where the focus is on the page. |
|
// |
|
// Note that although Menu can display accelerator keys, there is no infrastructure to actually catch and |
|
// execute those accelerators. |
|
accelKey: "", |
|
|
|
// disabled: Boolean |
|
// If true, the menu item is disabled. |
|
// If false, the menu item is enabled. |
|
disabled: false, |
|
|
|
_fillContent: function(/*DomNode*/ source){ |
|
// If button label is specified as srcNodeRef.innerHTML rather than |
|
// this.params.label, handle it here. |
|
if(source && !("label" in this.params)){ |
|
this._set('label', source.innerHTML); |
|
} |
|
}, |
|
|
|
buildRendering: function(){ |
|
this.inherited(arguments); |
|
var label = this.id + "_text"; |
|
domAttr.set(this.containerNode, "id", label); // only needed for backward compat |
|
if(this.accelKeyNode){ |
|
domAttr.set(this.accelKeyNode, "id", this.id + "_accel"); // only needed for backward compat |
|
} |
|
dom.setSelectable(this.domNode, false); |
|
}, |
|
|
|
onClick: function(/*Event*/){ |
|
// summary: |
|
// User defined function to handle clicks |
|
// tags: |
|
// callback |
|
}, |
|
|
|
focus: function(){ |
|
// summary: |
|
// Focus on this MenuItem |
|
try{ |
|
if(has("ie") == 8){ |
|
// needed for IE8 which won't scroll TR tags into view on focus yet calling scrollIntoView creates flicker (#10275) |
|
this.containerNode.focus(); |
|
} |
|
this.focusNode.focus(); |
|
}catch(e){ |
|
// this throws on IE (at least) in some scenarios |
|
} |
|
}, |
|
|
|
_setSelected: function(selected){ |
|
// summary: |
|
// Indicate that this node is the currently selected one |
|
// tags: |
|
// private |
|
|
|
domClass.toggle(this.domNode, "dijitMenuItemSelected", selected); |
|
}, |
|
|
|
setLabel: function(/*String*/ content){ |
|
// summary: |
|
// Deprecated. Use set('label', ...) instead. |
|
// tags: |
|
// deprecated |
|
kernel.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0"); |
|
this.set("label", content); |
|
}, |
|
|
|
setDisabled: function(/*Boolean*/ disabled){ |
|
// summary: |
|
// Deprecated. Use set('disabled', bool) instead. |
|
// tags: |
|
// deprecated |
|
kernel.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0"); |
|
this.set('disabled', disabled); |
|
}, |
|
|
|
_setDisabledAttr: function(/*Boolean*/ value){ |
|
// summary: |
|
// Hook for attr('disabled', ...) to work. |
|
// Enable or disable this menu item. |
|
|
|
this.focusNode.setAttribute('aria-disabled', value ? 'true' : 'false'); |
|
this._set("disabled", value); |
|
}, |
|
|
|
_setAccelKeyAttr: function(/*String*/ value){ |
|
// summary: |
|
// Hook for attr('accelKey', ...) to work. |
|
// Set accelKey on this menu item. |
|
|
|
if(this.accelKeyNode){ |
|
this.accelKeyNode.style.display = value ? "" : "none"; |
|
this.accelKeyNode.innerHTML = value; |
|
//have to use colSpan to make it work in IE |
|
domAttr.set(this.containerNode, 'colSpan', value ? "1" : "2"); |
|
} |
|
this._set("accelKey", value); |
|
} |
|
}); |
|
|
|
if(has("dojo-bidi")){ |
|
MenuItem = declare("dijit.MenuItem", MenuItem, { |
|
_setLabelAttr: function(val){ |
|
this.inherited(arguments); |
|
if(this.textDir === "auto"){ |
|
this.applyTextDir(this.textDirNode); |
|
} |
|
} |
|
}); |
|
} |
|
|
|
return MenuItem; |
|
});
|
|
|