\n"}});
define("dijit/form/TextBox", [
"dojo/_base/declare", // declare
"dojo/dom-construct", // domConstruct.create
"dojo/dom-style", // domStyle.getComputedStyle
"dojo/_base/kernel", // kernel.deprecated
"dojo/_base/lang", // lang.hitch
"dojo/sniff", // has("ie") has("mozilla")
"./_FormValueWidget",
"./_TextBoxMixin",
"dojo/text!./templates/TextBox.html",
"../main" // to export dijit._setSelectionRange, remove in 2.0
], function(declare, domConstruct, domStyle, kernel, lang, has,
_FormValueWidget, _TextBoxMixin, template, dijit){
// module:
// dijit/form/TextBox
var TextBox = declare("dijit.form.TextBox", [_FormValueWidget, _TextBoxMixin], {
// summary:
// A base class for textbox form inputs
templateString: template,
_singleNodeTemplate: '',
_buttonInputDisabled: has("ie") ? "disabled" : "", // allows IE to disallow focus, but Firefox cannot be disabled for mousedown events
baseClass: "dijitTextBox",
postMixInProperties: function(){
var type = this.type.toLowerCase();
if(this.templateString && this.templateString.toLowerCase() == "input" || ((type == "hidden" || type == "file") && this.templateString == this.constructor.prototype.templateString)){
this.templateString = this._singleNodeTemplate;
}
this.inherited(arguments);
},
postCreate: function(){
this.inherited(arguments);
if(has("ie") < 9){
// IE INPUT tag fontFamily has to be set directly using STYLE
// the defer gives IE a chance to render the TextBox and to deal with font inheritance
this.defer(function(){
try{
var s = domStyle.getComputedStyle(this.domNode); // can throw an exception if widget is immediately destroyed
if(s){
var ff = s.fontFamily;
if(ff){
var inputs = this.domNode.getElementsByTagName("INPUT");
if(inputs){
for(var i=0; i < inputs.length; i++){
inputs[i].style.fontFamily = ff;
}
}
}
}
}catch(e){/*when used in a Dialog, and this is called before the dialog is
shown, s.fontFamily would trigger "Invalid Argument" error.*/}
});
}
},
_onInput: function(e){
this.inherited(arguments);
if(this.intermediateChanges){ // _TextBoxMixin uses onInput
// allow the key to post to the widget input box
this.defer(function(){ this._handleOnChange(this.get('value'), false); });
}
},
_setPlaceHolderAttr: function(v){
this._set("placeHolder", v);
if(!this._phspan){
this._attachPoints.push('_phspan');
// dijitInputField class gives placeHolder same padding as the input field
// parent node already has dijitInputField class but it doesn't affect this
// since it's position: absolute.
this._phspan = domConstruct.create('span',{ onmousedown:function(e){ e.preventDefault(); }, className:'dijitPlaceHolder dijitInputField'},this.textbox,'after');
}
this._phspan.innerHTML="";
this._phspan.appendChild(this._phspan.ownerDocument.createTextNode(v));
this._updatePlaceHolder();
},
_updatePlaceHolder: function(){
if(this._phspan){
this._phspan.style.display=(this.placeHolder&&!this.focused&&!this.textbox.value)?"":"none";
}
},
_setValueAttr: function(value, /*Boolean?*/ priorityChange, /*String?*/ formattedValue){
this.inherited(arguments);
this._updatePlaceHolder();
},
getDisplayedValue: function(){
// summary:
// Deprecated. Use get('displayedValue') instead.
// tags:
// deprecated
kernel.deprecated(this.declaredClass+"::getDisplayedValue() is deprecated. Use get('displayedValue') instead.", "", "2.0");
return this.get('displayedValue');
},
setDisplayedValue: function(/*String*/ value){
// summary:
// Deprecated. Use set('displayedValue', ...) instead.
// tags:
// deprecated
kernel.deprecated(this.declaredClass+"::setDisplayedValue() is deprecated. Use set('displayedValue', ...) instead.", "", "2.0");
this.set('displayedValue', value);
},
_onBlur: function(e){
if(this.disabled){ return; }
this.inherited(arguments);
this._updatePlaceHolder();
if(has("mozilla")){
if(this.selectOnClick){
// clear selection so that the next mouse click doesn't reselect
this.textbox.selectionStart = this.textbox.selectionEnd = undefined;
}
}
},
_onFocus: function(/*String*/ by){
if(this.disabled || this.readOnly){ return; }
this.inherited(arguments);
this._updatePlaceHolder();
}
});
if(has("ie")){
TextBox.prototype._isTextSelected = function(){
var range = this.ownerDocument.selection.createRange();
var parent = range.parentElement();
return parent == this.textbox && range.text.length > 0;
};
// Overrides definition of _setSelectionRange from _TextBoxMixin (TODO: move to _TextBoxMixin.js?)
dijit._setSelectionRange = _TextBoxMixin._setSelectionRange = function(/*DomNode*/ element, /*Number?*/ start, /*Number?*/ stop){
if(element.createTextRange){
var r = element.createTextRange();
r.collapse(true);
r.moveStart("character", -99999); // move to 0
r.moveStart("character", start); // delta from 0 is the correct position
r.moveEnd("character", stop-start);
r.select();
}
}
}
return TextBox;
});
},
'dijit/_base/scroll':function(){
define("dijit/_base/scroll", [
"dojo/window", // windowUtils.scrollIntoView
"../main" // export symbol to dijit
], function(windowUtils, dijit){
// module:
// dijit/_base/scroll
/*=====
return {
// summary:
// Back compatibility module, new code should use windowUtils directly instead of using this module.
};
=====*/
dijit.scrollIntoView = function(/*DomNode*/ node, /*Object?*/ pos){
// summary:
// Scroll the passed node into view, if it is not already.
// Deprecated, use `windowUtils.scrollIntoView` instead.
windowUtils.scrollIntoView(node, pos);
};
});
},
'dijit/_TemplatedMixin':function(){
define("dijit/_TemplatedMixin", [
"dojo/_base/lang", // lang.getObject
"dojo/touch",
"./_WidgetBase",
"dojo/string", // string.substitute string.trim
"dojo/cache", // dojo.cache
"dojo/_base/array", // array.forEach
"dojo/_base/declare", // declare
"dojo/dom-construct", // domConstruct.destroy, domConstruct.toDom
"dojo/sniff", // has("ie")
"dojo/_base/unload" // unload.addOnWindowUnload
], function(lang, touch, _WidgetBase, string, cache, array, declare, domConstruct, has, unload) {
// module:
// dijit/_TemplatedMixin
var _TemplatedMixin = declare("dijit._TemplatedMixin", null, {
// summary:
// Mixin for widgets that are instantiated from a template
// templateString: [protected] String
// A string that represents the widget template.
// Use in conjunction with dojo.cache() to load from a file.
templateString: null,
// templatePath: [protected deprecated] String
// Path to template (HTML file) for this widget relative to dojo.baseUrl.
// Deprecated: use templateString with require([... "dojo/text!..."], ...) instead
templatePath: null,
// skipNodeCache: [protected] Boolean
// If using a cached widget template nodes poses issues for a
// particular widget class, it can set this property to ensure
// that its template is always re-built from a string
_skipNodeCache: false,
// _earlyTemplatedStartup: Boolean
// A fallback to preserve the 1.0 - 1.3 behavior of children in
// templates having their startup called before the parent widget
// fires postCreate. Defaults to 'false', causing child widgets to
// have their .startup() called immediately before a parent widget
// .startup(), but always after the parent .postCreate(). Set to
// 'true' to re-enable to previous, arguably broken, behavior.
_earlyTemplatedStartup: false,
/*=====
// _attachPoints: [private] String[]
// List of widget attribute names associated with data-dojo-attach-point=... in the
// template, ex: ["containerNode", "labelNode"]
_attachPoints: [],
// _attachEvents: [private] Handle[]
// List of connections associated with data-dojo-attach-event=... in the
// template
_attachEvents: [],
=====*/
constructor: function(/*===== params, srcNodeRef =====*/){
// summary:
// Create the widget.
// params: Object|null
// Hash of initialization parameters for widget, including scalar values (like title, duration etc.)
// and functions, typically callbacks like onClick.
// The hash can contain any of the widget's properties, excluding read-only properties.
// srcNodeRef: DOMNode|String?
// If a srcNodeRef (DOM node) is specified, replace srcNodeRef with my generated DOM tree.
this._attachPoints = [];
this._attachEvents = [];
},
_stringRepl: function(tmpl){
// summary:
// Does substitution of ${foo} type properties in template string
// tags:
// private
var className = this.declaredClass, _this = this;
// Cache contains a string because we need to do property replacement
// do the property replacement
return string.substitute(tmpl, this, function(value, key){
if(key.charAt(0) == '!'){ value = lang.getObject(key.substr(1), false, _this); }
if(typeof value == "undefined"){ throw new Error(className+" template:"+key); } // a debugging aide
if(value == null){ return ""; }
// Substitution keys beginning with ! will skip the transform step,
// in case a user wishes to insert unescaped markup, e.g. ${!foo}
return key.charAt(0) == "!" ? value :
// Safer substitution, see heading "Attribute values" in
// http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.3.2
value.toString().replace(/"/g,"""); //TODO: add &? use encodeXML method?
}, this);
},
buildRendering: function(){
// summary:
// Construct the UI for this widget from a template, setting this.domNode.
// tags:
// protected
if(!this.templateString){
this.templateString = cache(this.templatePath, {sanitize: true});
}
// Lookup cached version of template, and download to cache if it
// isn't there already. Returns either a DomNode or a string, depending on
// whether or not the template contains ${foo} replacement parameters.
var cached = _TemplatedMixin.getCachedTemplate(this.templateString, this._skipNodeCache, this.ownerDocument);
var node;
if(lang.isString(cached)){
node = domConstruct.toDom(this._stringRepl(cached), this.ownerDocument);
if(node.nodeType != 1){
// Flag common problems such as templates with multiple top level nodes (nodeType == 11)
throw new Error("Invalid template: " + cached);
}
}else{
// if it's a node, all we have to do is clone it
node = cached.cloneNode(true);
}
this.domNode = node;
// Call down to _Widget.buildRendering() to get base classes assigned
// TODO: change the baseClass assignment to _setBaseClassAttr
this.inherited(arguments);
// recurse through the node, looking for, and attaching to, our
// attachment points and events, which should be defined on the template node.
this._attachTemplateNodes(node, function(n,p){ return n.getAttribute(p); });
this._beforeFillContent(); // hook for _WidgetsInTemplateMixin
this._fillContent(this.srcNodeRef);
},
_beforeFillContent: function(){
},
_fillContent: function(/*DomNode*/ source){
// summary:
// Relocate source contents to templated container node.
// this.containerNode must be able to receive children, or exceptions will be thrown.
// tags:
// protected
var dest = this.containerNode;
if(source && dest){
while(source.hasChildNodes()){
dest.appendChild(source.firstChild);
}
}
},
_attachTemplateNodes: function(rootNode, getAttrFunc){
// summary:
// Iterate through the template and attach functions and nodes accordingly.
// Alternately, if rootNode is an array of widgets, then will process data-dojo-attach-point
// etc. for those widgets.
// description:
// Map widget properties and functions to the handlers specified in
// the dom node and it's descendants. This function iterates over all
// nodes and looks for these properties:
//
// - dojoAttachPoint/data-dojo-attach-point
// - dojoAttachEvent/data-dojo-attach-event
// rootNode: DomNode|Widget[]
// the node to search for properties. All children will be searched.
// getAttrFunc: Function
// a function which will be used to obtain property for a given
// DomNode/Widget
// tags:
// private
var nodes = lang.isArray(rootNode) ? rootNode : (rootNode.all || rootNode.getElementsByTagName("*"));
var x = lang.isArray(rootNode) ? 0 : -1;
for(; x < 0 || nodes[x]; x++){ // don't access nodes.length on IE, see #14346
var baseNode = (x == -1) ? rootNode : nodes[x];
if(this.widgetsInTemplate && (getAttrFunc(baseNode, "dojoType") || getAttrFunc(baseNode, "data-dojo-type"))){
continue;
}
// Process data-dojo-attach-point
var attachPoint = getAttrFunc(baseNode, "dojoAttachPoint") || getAttrFunc(baseNode, "data-dojo-attach-point");
if(attachPoint){
var point, points = attachPoint.split(/\s*,\s*/);
while((point = points.shift())){
if(lang.isArray(this[point])){
this[point].push(baseNode);
}else{
this[point]=baseNode;
}
this._attachPoints.push(point);
}
}
// Process data-dojo-attach-event
var attachEvent = getAttrFunc(baseNode, "dojoAttachEvent") || getAttrFunc(baseNode, "data-dojo-attach-event");
if(attachEvent){
// NOTE: we want to support attributes that have the form
// "domEvent: nativeEvent; ..."
var event, events = attachEvent.split(/\s*,\s*/);
var trim = lang.trim;
while((event = events.shift())){
if(event){
var thisFunc = null;
if(event.indexOf(":") != -1){
// oh, if only JS had tuple assignment
var funcNameArr = event.split(":");
event = trim(funcNameArr[0]);
thisFunc = trim(funcNameArr[1]);
}else{
event = trim(event);
}
if(!thisFunc){
thisFunc = event;
}
// Map "press", "move" and "release" to keys.touch, keys.move, keys.release
this._attachEvents.push(this.connect(baseNode, touch[event] || event, thisFunc));
}
}
}
}
},
destroyRendering: function(){
// Delete all attach points to prevent IE6 memory leaks.
array.forEach(this._attachPoints, function(point){
delete this[point];
}, this);
this._attachPoints = [];
// And same for event handlers
array.forEach(this._attachEvents, this.disconnect, this);
this._attachEvents = [];
this.inherited(arguments);
}
});
// key is templateString; object is either string or DOM tree
_TemplatedMixin._templateCache = {};
_TemplatedMixin.getCachedTemplate = function(templateString, alwaysUseString, doc){
// summary:
// Static method to get a template based on the templatePath or
// templateString key
// templateString: String
// The template
// alwaysUseString: Boolean
// Don't cache the DOM tree for this template, even if it doesn't have any variables
// doc: Document?
// The target document. Defaults to document global if unspecified.
// returns: Mixed
// Either string (if there are ${} variables that need to be replaced) or just
// a DOM tree (if the node can be cloned directly)
// is it already cached?
var tmplts = _TemplatedMixin._templateCache;
var key = templateString;
var cached = tmplts[key];
if(cached){
try{
// if the cached value is an innerHTML string (no ownerDocument) or a DOM tree created within the
// current document, then use the current cached value
if(!cached.ownerDocument || cached.ownerDocument == (doc || document)){
// string or node of the same document
return cached;
}
}catch(e){ /* squelch */ } // IE can throw an exception if cached.ownerDocument was reloaded
domConstruct.destroy(cached);
}
templateString = string.trim(templateString);
if(alwaysUseString || templateString.match(/\$\{([^\}]+)\}/g)){
// there are variables in the template so all we can do is cache the string
return (tmplts[key] = templateString); //String
}else{
// there are no variables in the template so we can cache the DOM tree
var node = domConstruct.toDom(templateString, doc);
if(node.nodeType != 1){
throw new Error("Invalid template: " + templateString);
}
return (tmplts[key] = node); //Node
}
};
if(has("ie")){
unload.addOnWindowUnload(function(){
var cache = _TemplatedMixin._templateCache;
for(var key in cache){
var value = cache[key];
if(typeof value == "object"){ // value is either a string or a DOM node template
domConstruct.destroy(value);
}
delete cache[key];
}
});
}
// These arguments can be specified for widgets which are used in templates.
// Since any widget can be specified as sub widgets in template, mix it
// into the base widget class. (This is a hack, but it's effective.).
// Remove for 2.0. Also, hide from API doc parser.
lang.extend(_WidgetBase, /*===== {} || =====*/ {
dojoAttachEvent: "",
dojoAttachPoint: ""
});
return _TemplatedMixin;
});
},
'dijit/_CssStateMixin':function(){
define("dijit/_CssStateMixin", [
"dojo/_base/array", // array.forEach array.map
"dojo/_base/declare", // declare
"dojo/dom", // dom.isDescendant()
"dojo/dom-class", // domClass.toggle
"dojo/has",
"dojo/_base/lang", // lang.hitch
"dojo/on",
"dojo/ready",
"dojo/_base/window", // win.body
"./registry"
], function(array, declare, dom, domClass, has, lang, on, ready, win, registry){
// module:
// dijit/_CssStateMixin
var CssStateMixin = declare("dijit._CssStateMixin", [], {
// summary:
// Mixin for widgets to set CSS classes on the widget DOM nodes depending on hover/mouse press/focus
// state changes, and also higher-level state changes such becoming disabled or selected.
//
// description:
// By mixing this class into your widget, and setting the this.baseClass attribute, it will automatically
// maintain CSS classes on the widget root node (this.domNode) depending on hover,
// active, focus, etc. state. Ex: with a baseClass of dijitButton, it will apply the classes
// dijitButtonHovered and dijitButtonActive, as the user moves the mouse over the widget and clicks it.
//
// It also sets CSS like dijitButtonDisabled based on widget semantic state.
//
// By setting the cssStateNodes attribute, a widget can also track events on subnodes (like buttons
// within the widget).
// cssStateNodes: [protected] Object
// List of sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus
//
// Each entry in the hash is a an attachpoint names (like "upArrowButton") mapped to a CSS class names
// (like "dijitUpArrowButton"). Example:
// | {
// | "upArrowButton": "dijitUpArrowButton",
// | "downArrowButton": "dijitDownArrowButton"
// | }
// The above will set the CSS class dijitUpArrowButton to the this.upArrowButton DOMNode when it
// is hovered, etc.
cssStateNodes: {},
// hovering: [readonly] Boolean
// True if cursor is over this widget
hovering: false,
// active: [readonly] Boolean
// True if mouse was pressed while over this widget, and hasn't been released yet
active: false,
_applyAttributes: function(){
// This code would typically be in postCreate(), but putting in _applyAttributes() for
// performance: so the class changes happen before DOM is inserted into the document.
// Change back to postCreate() in 2.0. See #11635.
this.inherited(arguments);
// Monitoring changes to disabled, readonly, etc. state, and update CSS class of root node
array.forEach(["disabled", "readOnly", "checked", "selected", "focused", "state", "hovering", "active", "_opened"], function(attr){
this.watch(attr, lang.hitch(this, "_setStateClass"));
}, this);
// Track hover and active mouse events on widget root node, plus possibly on subnodes
for(var ap in this.cssStateNodes){
this._trackMouseState(this[ap], this.cssStateNodes[ap]);
}
this._trackMouseState(this.domNode, this.baseClass);
// Set state initially; there's probably no hover/active/focus state but widget might be
// disabled/readonly/checked/selected so we want to set CSS classes for those conditions.
this._setStateClass();
},
_cssMouseEvent: function(/*Event*/ event){
// summary:
// Handler for CSS event on this.domNode. Sets hovering and active properties depending on mouse state,
// which triggers _setStateClass() to set appropriate CSS classes for this.domNode.
if(!this.disabled){
switch(event.type){
case "mouseover":
this._set("hovering", true);
this._set("active", this._mouseDown);
break;
case "mouseout":
this._set("hovering", false);
this._set("active", false);
break;
case "mousedown":
case "touchstart":
this._set("active", true);
break;
case "mouseup":
case "touchend":
this._set("active", false);
break;
}
}
},
_setStateClass: function(){
// summary:
// Update the visual state of the widget by setting the css classes on this.domNode
// (or this.stateNode if defined) by combining this.baseClass with
// various suffixes that represent the current widget state(s).
//
// description:
// In the case where a widget has multiple
// states, it sets the class based on all possible
// combinations. For example, an invalid form widget that is being hovered
// will be "dijitInput dijitInputInvalid dijitInputHover dijitInputInvalidHover".
//
// The widget may have one or more of the following states, determined
// by this.state, this.checked, this.valid, and this.selected:
//
// - Error - ValidationTextBox sets this.state to "Error" if the current input value is invalid
// - Incomplete - ValidationTextBox sets this.state to "Incomplete" if the current input value is not finished yet
// - Checked - ex: a checkmark or a ToggleButton in a checked state, will have this.checked==true
// - Selected - ex: currently selected tab will have this.selected==true
//
// In addition, it may have one or more of the following states,
// based on this.disabled and flags set in _onMouse (this.active, this.hovering) and from focus manager (this.focused):
//
// - Disabled - if the widget is disabled
// - Active - if the mouse (or space/enter key?) is being pressed down
// - Focused - if the widget has focus
// - Hover - if the mouse is over the widget
// Compute new set of classes
var newStateClasses = this.baseClass.split(" ");
function multiply(modifier){
newStateClasses = newStateClasses.concat(array.map(newStateClasses, function(c){ return c+modifier; }), "dijit"+modifier);
}
if(!this.isLeftToRight()){
// For RTL mode we need to set an addition class like dijitTextBoxRtl.
multiply("Rtl");
}
var checkedState = this.checked == "mixed" ? "Mixed" : (this.checked ? "Checked" : "");
if(this.checked){
multiply(checkedState);
}
if(this.state){
multiply(this.state);
}
if(this.selected){
multiply("Selected");
}
if(this._opened){
multiply("Opened");
}
if(this.disabled){
multiply("Disabled");
}else if(this.readOnly){
multiply("ReadOnly");
}else{
if(this.active){
multiply("Active");
}else if(this.hovering){
multiply("Hover");
}
}
if(this.focused){
multiply("Focused");
}
// Remove old state classes and add new ones.
// For performance concerns we only write into domNode.className once.
var tn = this.stateNode || this.domNode,
classHash = {}; // set of all classes (state and otherwise) for node
array.forEach(tn.className.split(" "), function(c){ classHash[c] = true; });
if("_stateClasses" in this){
array.forEach(this._stateClasses, function(c){ delete classHash[c]; });
}
array.forEach(newStateClasses, function(c){ classHash[c] = true; });
var newClasses = [];
for(var c in classHash){
newClasses.push(c);
}
tn.className = newClasses.join(" ");
this._stateClasses = newStateClasses;
},
_subnodeCssMouseEvent: function(node, clazz, evt){
// summary:
// Handler for hover/active mouse event on widget's subnode
if(this.disabled || this.readOnly){
return;
}
function hover(isHovering){
domClass.toggle(node, clazz+"Hover", isHovering);
}
function active(isActive){
domClass.toggle(node, clazz+"Active", isActive);
}
function focused(isFocused){
domClass.toggle(node, clazz+"Focused", isFocused);
}
switch(evt.type){
case "mouseover":
hover(true);
break;
case "mouseout":
hover(false);
active(false);
break;
case "mousedown":
case "touchstart":
active(true);
break;
case "mouseup":
case "touchend":
active(false);
break;
case "focus":
case "focusin":
focused(true);
break;
case "blur":
case "focusout":
focused(false);
break;
}
},
_trackMouseState: function(/*DomNode*/ node, /*String*/ clazz){
// summary:
// Track mouse/focus events on specified node and set CSS class on that node to indicate
// current state. Usually not called directly, but via cssStateNodes attribute.
// description:
// Given class=foo, will set the following CSS class on the node
//
// - fooActive: if the user is currently pressing down the mouse button while over the node
// - fooHover: if the user is hovering the mouse over the node, but not pressing down a button
// - fooFocus: if the node is focused
//
// Note that it won't set any classes if the widget is disabled.
// node: DomNode
// Should be a sub-node of the widget, not the top node (this.domNode), since the top node
// is handled specially and automatically just by mixing in this class.
// clazz: String
// CSS class name (ex: dijitSliderUpArrow)
// Flag for listener code below to call this._cssMouseEvent() or this._subnodeCssMouseEvent()
// when node is hovered/active
node._cssState = clazz;
}
});
ready(function(){
// Document level listener to catch hover etc. events on widget root nodes and subnodes.
// Note that when the mouse is moved quickly, a single onmouseenter event could signal that multiple widgets
// have been hovered or unhovered (try test_Accordion.html)
function handler(evt){
// Poor man's event propagation. Don't propagate event to ancestors of evt.relatedTarget,
// to avoid processing mouseout events moving from a widget's domNode to a descendant node;
// such events shouldn't be interpreted as a mouseleave on the widget.
if(!dom.isDescendant(evt.relatedTarget, evt.target)){
for(var node = evt.target; node && node != evt.relatedTarget; node = node.parentNode){
// Process any nodes with _cssState property. They are generally widget root nodes,
// but could also be sub-nodes within a widget
if(node._cssState){
var widget = registry.getEnclosingWidget(node);
if(widget){
if(node == widget.domNode){
// event on the widget's root node
widget._cssMouseEvent(evt);
}else{
// event on widget's sub-node
widget._subnodeCssMouseEvent(node, node._cssState, evt);
}
}
}
}
}
}
function ieHandler(evt){
evt.target = evt.srcElement;
handler(evt);
}
// Use addEventListener() (and attachEvent() on IE) to catch the relevant events even if other handlers
// (on individual nodes) call evt.stopPropagation() or event.stopEvent().
// Currently typematic.js is doing that, not sure why.
// Don't monitor mouseover/mouseout on mobile because iOS generates "phantom" mouseover/mouseout events when
// drag-scrolling, at the point in the viewport where the drag originated. Test the Tree in api viewer.
var body = win.body(),
types = (has("touch") ? [] : ["mouseover", "mouseout"]).concat(["mousedown", "touchstart", "mouseup", "touchend"]);
array.forEach(types, function(type){
if(body.addEventListener){
body.addEventListener(type, handler, true); // W3C
}else{
body.attachEvent("on"+type, ieHandler); // IE
}
});
// Track focus events on widget sub-nodes that have been registered via _trackMouseState().
// However, don't track focus events on the widget root nodes, because focus is tracked via the
// focus manager (and it's not really tracking focus, but rather tracking that focus is on one of the widget's
// nodes or a subwidget's node or a popup node, etc.)
// Remove for 2.0 (if focus CSS needed, just use :focus pseudo-selector).
on(body, "focusin, focusout", function(evt){
var node = evt.target;
if(node._cssState && !node.getAttribute("widgetId")){
var widget = registry.getEnclosingWidget(node);
widget._subnodeCssMouseEvent(node, node._cssState, evt);
}
});
});
return CssStateMixin;
});
},
'dijit/layout/ScrollingTabController':function(){
require({cache:{
'url:dijit/layout/templates/ScrollingTabController.html':"
"}});
define("dijit/layout/ScrollingTabController", [
"dojo/_base/array", // array.forEach
"dojo/_base/declare", // declare
"dojo/dom-class", // domClass.add domClass.contains
"dojo/dom-geometry", // domGeometry.contentBox
"dojo/dom-style", // domStyle.style
"dojo/_base/fx", // Animation
"dojo/_base/lang", // lang.hitch
"dojo/on",
"dojo/query", // query
"dojo/sniff", // has("ie"), has("webkit"), has("quirks")
"../registry", // registry.byId()
"dojo/text!./templates/ScrollingTabController.html",
"dojo/text!./templates/_ScrollingTabControllerButton.html",
"./TabController",
"./utils", // marginBox2contextBox, layoutChildren
"../_WidgetsInTemplateMixin",
"../Menu",
"../MenuItem",
"../form/Button",
"../_HasDropDown",
"dojo/NodeList-dom" // NodeList.style
], function(array, declare, domClass, domGeometry, domStyle, fx, lang, on, query, has,
registry, tabControllerTemplate, buttonTemplate, TabController, layoutUtils, _WidgetsInTemplateMixin,
Menu, MenuItem, Button, _HasDropDown){
// module:
// dijit/layout/ScrollingTabController
var ScrollingTabController = declare("dijit.layout.ScrollingTabController", [TabController, _WidgetsInTemplateMixin], {
// summary:
// Set of tabs with left/right arrow keys and a menu to switch between tabs not
// all fitting on a single row.
// Works only for horizontal tabs (either above or below the content, not to the left
// or right).
// tags:
// private
baseClass: "dijitTabController dijitScrollingTabController",
templateString: tabControllerTemplate,
// useMenu: [const] Boolean
// True if a menu should be used to select tabs when they are too
// wide to fit the TabContainer, false otherwise.
useMenu: true,
// useSlider: [const] Boolean
// True if a slider should be used to select tabs when they are too
// wide to fit the TabContainer, false otherwise.
useSlider: true,
// tabStripClass: [const] String
// The css class to apply to the tab strip, if it is visible.
tabStripClass: "",
widgetsInTemplate: true,
// _minScroll: Number
// The distance in pixels from the edge of the tab strip which,
// if a scroll animation is less than, forces the scroll to
// go all the way to the left/right.
_minScroll: 5,
// Override default behavior mapping class to DOMNode
_setClassAttr: { node: "containerNode", type: "class" },
buildRendering: function(){
this.inherited(arguments);
var n = this.domNode;
this.scrollNode = this.tablistWrapper;
this._initButtons();
if(!this.tabStripClass){
this.tabStripClass = "dijitTabContainer" +
this.tabPosition.charAt(0).toUpperCase() +
this.tabPosition.substr(1).replace(/-.*/, "") +
"None";
domClass.add(n, "tabStrip-disabled")
}
domClass.add(this.tablistWrapper, this.tabStripClass);
},
onStartup: function(){
this.inherited(arguments);
// TabController is hidden until it finishes drawing, to give
// a less visually jumpy instantiation. When it's finished, set visibility to ""
// to that the tabs are hidden/shown depending on the container's visibility setting.
domStyle.set(this.domNode, "visibility", "");
this._postStartup = true;
// changes to the tab button label or iconClass will have changed the width of the
// buttons, so do a resize
this.own(on(this.containerNode, "attrmodified-label, attrmodified-iconclass", lang.hitch(this, function(evt){
if(this._dim){
this.resize(this._dim);
}
})));
},
onAddChild: function(page, insertIndex){
this.inherited(arguments);
// Increment the width of the wrapper when a tab is added
// This makes sure that the buttons never wrap.
// The value 200 is chosen as it should be bigger than most
// Tab button widths.
domStyle.set(this.containerNode, "width",
(domStyle.get(this.containerNode, "width") + 200) + "px");
},
onRemoveChild: function(page, insertIndex){
// null out _selectedTab because we are about to delete that dom node
var button = this.pane2button[page.id];
if(this._selectedTab === button.domNode){
this._selectedTab = null;
}
this.inherited(arguments);
},
_initButtons: function(){
// summary:
// Creates the buttons used to scroll to view tabs that
// may not be visible if the TabContainer is too narrow.
// Make a list of the buttons to display when the tab labels become
// wider than the TabContainer, and hide the other buttons.
// Also gets the total width of the displayed buttons.
this._btnWidth = 0;
this._buttons = query("> .tabStripButton", this.domNode).filter(function(btn){
if((this.useMenu && btn == this._menuBtn.domNode) ||
(this.useSlider && (btn == this._rightBtn.domNode || btn == this._leftBtn.domNode))){
this._btnWidth += domGeometry.getMarginSize(btn).w;
return true;
}else{
domStyle.set(btn, "display", "none");
return false;
}
}, this);
},
_getTabsWidth: function(){
var children = this.getChildren();
if(children.length){
var leftTab = children[this.isLeftToRight() ? 0 : children.length - 1].domNode,
rightTab = children[this.isLeftToRight() ? children.length - 1 : 0].domNode;
return rightTab.offsetLeft + rightTab.offsetWidth - leftTab.offsetLeft;
}else{
return 0;
}
},
_enableBtn: function(width){
// summary:
// Determines if the tabs are wider than the width of the TabContainer, and
// thus that we need to display left/right/menu navigation buttons.
var tabsWidth = this._getTabsWidth();
width = width || domStyle.get(this.scrollNode, "width");
return tabsWidth > 0 && width < tabsWidth;
},
resize: function(dim){
// summary:
// Hides or displays the buttons used to scroll the tab list and launch the menu
// that selects tabs.
// Save the dimensions to be used when a child is renamed.
this._dim = dim;
// Set my height to be my natural height (tall enough for one row of tab labels),
// and my content-box width based on margin-box width specified in dim parameter.
// But first reset scrollNode.height in case it was set by layoutChildren() call
// in a previous run of this method.
this.scrollNode.style.height = "auto";
var cb = this._contentBox = layoutUtils.marginBox2contentBox(this.domNode, {h: 0, w: dim.w});
cb.h = this.scrollNode.offsetHeight;
domGeometry.setContentSize(this.domNode, cb);
// Show/hide the left/right/menu navigation buttons depending on whether or not they
// are needed.
var enable = this._enableBtn(this._contentBox.w);
this._buttons.style("display", enable ? "" : "none");
// Position and size the navigation buttons and the tablist
this._leftBtn.layoutAlign = "left";
this._rightBtn.layoutAlign = "right";
this._menuBtn.layoutAlign = this.isLeftToRight() ? "right" : "left";
layoutUtils.layoutChildren(this.domNode, this._contentBox,
[this._menuBtn, this._leftBtn, this._rightBtn, {domNode: this.scrollNode, layoutAlign: "client"}]);
// set proper scroll so that selected tab is visible
if(this._selectedTab){
if(this._anim && this._anim.status() == "playing"){
this._anim.stop();
}
this.scrollNode.scrollLeft = this._convertToScrollLeft(this._getScrollForSelectedTab());
}
// Enable/disabled left right buttons depending on whether or not user can scroll to left or right
this._setButtonClass(this._getScroll());
this._postResize = true;
// Return my size so layoutChildren() can use it.
// Also avoids IE9 layout glitch on browser resize when scroll buttons present
return {h: this._contentBox.h, w: dim.w};
},
_getScroll: function(){
// summary:
// Returns the current scroll of the tabs where 0 means
// "scrolled all the way to the left" and some positive number, based on #
// of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right"
return (this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")) ? this.scrollNode.scrollLeft :
domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width")
+ (has("ie") >= 8 ? -1 : 1) * this.scrollNode.scrollLeft;
},
_convertToScrollLeft: function(val){
// summary:
// Given a scroll value where 0 means "scrolled all the way to the left"
// and some positive number, based on # of pixels of possible scroll (ex: 1000)
// means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft
// to achieve that scroll.
//
// This method is to adjust for RTL funniness in various browsers and versions.
if(this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")){
return val;
}else{
var maxScroll = domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width");
return (has("ie") >= 8 ? -1 : 1) * (val - maxScroll);
}
},
onSelectChild: function(/*dijit/_WidgetBase*/ page){
// summary:
// Smoothly scrolls to a tab when it is selected.
var tab = this.pane2button[page.id];
if(!tab || !page){return;}
var node = tab.domNode;
// Save the selection
if(node != this._selectedTab){
this._selectedTab = node;
// Scroll to the selected tab, except on startup, when scrolling is handled in resize()
if(this._postResize){
var sl = this._getScroll();
if(sl > node.offsetLeft ||
sl + domStyle.get(this.scrollNode, "width") <
node.offsetLeft + domStyle.get(node, "width")){
this.createSmoothScroll().play();
}
}
}
this.inherited(arguments);
},
_getScrollBounds: function(){
// summary:
// Returns the minimum and maximum scroll setting to show the leftmost and rightmost
// tabs (respectively)
var children = this.getChildren(),
scrollNodeWidth = domStyle.get(this.scrollNode, "width"), // about 500px
containerWidth = domStyle.get(this.containerNode, "width"), // 50,000px
maxPossibleScroll = containerWidth - scrollNodeWidth, // scrolling until right edge of containerNode visible
tabsWidth = this._getTabsWidth();
if(children.length && tabsWidth > scrollNodeWidth){
// Scrolling should happen
return {
min: this.isLeftToRight() ? 0 : children[children.length-1].domNode.offsetLeft,
max: this.isLeftToRight() ?
(children[children.length-1].domNode.offsetLeft + children[children.length-1].domNode.offsetWidth) - scrollNodeWidth :
maxPossibleScroll
};
}else{
// No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir)
var onlyScrollPosition = this.isLeftToRight() ? 0 : maxPossibleScroll;
return {
min: onlyScrollPosition,
max: onlyScrollPosition
};
}
},
_getScrollForSelectedTab: function(){
// summary:
// Returns the scroll value setting so that the selected tab
// will appear in the center
var w = this.scrollNode,
n = this._selectedTab,
scrollNodeWidth = domStyle.get(this.scrollNode, "width"),
scrollBounds = this._getScrollBounds();
// TODO: scroll minimal amount (to either right or left) so that
// selected tab is fully visible, and just return if it's already visible?
var pos = (n.offsetLeft + domStyle.get(n, "width")/2) - scrollNodeWidth/2;
pos = Math.min(Math.max(pos, scrollBounds.min), scrollBounds.max);
// TODO:
// If scrolling close to the left side or right side, scroll
// all the way to the left or right. See this._minScroll.
// (But need to make sure that doesn't scroll the tab out of view...)
return pos;
},
createSmoothScroll: function(x){
// summary:
// Creates a dojo._Animation object that smoothly scrolls the tab list
// either to a fixed horizontal pixel value, or to the selected tab.
// description:
// If an number argument is passed to the function, that horizontal
// pixel position is scrolled to. Otherwise the currently selected
// tab is scrolled to.
// x: Integer?
// An optional pixel value to scroll to, indicating distance from left.
// Calculate position to scroll to
if(arguments.length > 0){
// position specified by caller, just make sure it's within bounds
var scrollBounds = this._getScrollBounds();
x = Math.min(Math.max(x, scrollBounds.min), scrollBounds.max);
}else{
// scroll to center the current tab
x = this._getScrollForSelectedTab();
}
if(this._anim && this._anim.status() == "playing"){
this._anim.stop();
}
var self = this,
w = this.scrollNode,
anim = new fx.Animation({
beforeBegin: function(){
if(this.curve){ delete this.curve; }
var oldS = w.scrollLeft,
newS = self._convertToScrollLeft(x);
anim.curve = new fx._Line(oldS, newS);
},
onAnimate: function(val){
w.scrollLeft = val;
}
});
this._anim = anim;
// Disable/enable left/right buttons according to new scroll position
this._setButtonClass(x);
return anim; // dojo/_base/fx/Animation
},
_getBtnNode: function(/*Event*/ e){
// summary:
// Gets a button DOM node from a mouse click event.
// e:
// The mouse click event.
var n = e.target;
while(n && !domClass.contains(n, "tabStripButton")){
n = n.parentNode;
}
return n;
},
doSlideRight: function(/*Event*/ e){
// summary:
// Scrolls the menu to the right.
// e:
// The mouse click event.
this.doSlide(1, this._getBtnNode(e));
},
doSlideLeft: function(/*Event*/ e){
// summary:
// Scrolls the menu to the left.
// e:
// The mouse click event.
this.doSlide(-1,this._getBtnNode(e));
},
doSlide: function(/*Number*/ direction, /*DomNode*/ node){
// summary:
// Scrolls the tab list to the left or right by 75% of the widget width.
// direction:
// If the direction is 1, the widget scrolls to the right, if it is -1,
// it scrolls to the left.
if(node && domClass.contains(node, "dijitTabDisabled")){return;}
var sWidth = domStyle.get(this.scrollNode, "width");
var d = (sWidth * 0.75) * direction;
var to = this._getScroll() + d;
this._setButtonClass(to);
this.createSmoothScroll(to).play();
},
_setButtonClass: function(/*Number*/ scroll){
// summary:
// Disables the left scroll button if the tabs are scrolled all the way to the left,
// or the right scroll button in the opposite case.
// scroll: Integer
// amount of horizontal scroll
var scrollBounds = this._getScrollBounds();
this._leftBtn.set("disabled", scroll <= scrollBounds.min);
this._rightBtn.set("disabled", scroll >= scrollBounds.max);
}
});
var ScrollingTabControllerButtonMixin = declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
baseClass: "dijitTab tabStripButton",
templateString: buttonTemplate,
// Override inherited tabIndex: 0 from dijit/form/Button, because user shouldn't be
// able to tab to the left/right/menu buttons
tabIndex: "",
// Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it
// either (this override avoids focus() call in FormWidget.js)
isFocusable: function(){ return false; }
});
// Class used in template
declare("dijit.layout._ScrollingTabControllerButton",
[Button, ScrollingTabControllerButtonMixin]);
// Class used in template
declare(
"dijit.layout._ScrollingTabControllerMenuButton",
[Button, _HasDropDown, ScrollingTabControllerButtonMixin],
{
// id of the TabContainer itself
containerId: "",
// -1 so user can't tab into the button, but so that button can still be focused programatically.
// Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash.
tabIndex: "-1",
isLoaded: function(){
// recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
return false;
},
loadDropDown: function(callback){
this.dropDown = new Menu({
id: this.containerId + "_menu",
ownerDocument: this.ownerDocument,
dir: this.dir,
lang: this.lang,
textDir: this.textDir
});
var container = registry.byId(this.containerId);
array.forEach(container.getChildren(), function(page){
var menuItem = new MenuItem({
id: page.id + "_stcMi",
label: page.title,
iconClass: page.iconClass,
disabled: page.disabled,
ownerDocument: this.ownerDocument,
dir: page.dir,
lang: page.lang,
textDir: page.textDir,
onClick: function(){
container.selectChild(page);
}
});
this.dropDown.addChild(menuItem);
}, this);
callback();
},
closeDropDown: function(/*Boolean*/ focus){
this.inherited(arguments);
if(this.dropDown){
this.dropDown.destroyRecursive();
delete this.dropDown;
}
}
});
return ScrollingTabController;
});
},
'url:dijit/form/templates/ComboButton.html':"
▼
\n",
'dijit/DialogUnderlay':function(){
define("dijit/DialogUnderlay", [
"dojo/_base/declare", // declare
"dojo/dom-attr", // domAttr.set
"dojo/window", // winUtils.getBox
"./_Widget",
"./_TemplatedMixin",
"./BackgroundIframe"
], function(declare, domAttr, winUtils, _Widget, _TemplatedMixin, BackgroundIframe){
// module:
// dijit/DialogUnderlay
return declare("dijit.DialogUnderlay", [_Widget, _TemplatedMixin], {
// summary:
// The component that blocks the screen behind a `dijit.Dialog`
//
// description:
// A component used to block input behind a `dijit.Dialog`. Only a single
// instance of this widget is created by `dijit.Dialog`, and saved as
// a reference to be shared between all Dialogs as `dijit._underlay`
//
// The underlay itself can be styled based on and id:
// | #myDialog_underlay { background-color:red; }
//
// In the case of `dijit.Dialog`, this id is based on the id of the Dialog,
// suffixed with _underlay.
// Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe.
// Inner div has opacity specified in CSS file.
templateString: "
",
// Parameters on creation or updatable later
// dialogId: String
// Id of the dialog.... DialogUnderlay's id is based on this id
dialogId: "",
// class: String
// This class name is used on the DialogUnderlay node, in addition to dijitDialogUnderlay
"class": "",
_setDialogIdAttr: function(id){
domAttr.set(this.node, "id", id + "_underlay");
this._set("dialogId", id);
},
_setClassAttr: function(clazz){
this.node.className = "dijitDialogUnderlay " + clazz;
this._set("class", clazz);
},
postCreate: function(){
// summary:
// Append the underlay to the body
this.ownerDocumentBody.appendChild(this.domNode);
},
layout: function(){
// summary:
// Sets the background to the size of the viewport
//
// description:
// Sets the background to the size of the viewport (rather than the size
// of the document) since we need to cover the whole browser window, even
// if the document is only a few lines long.
// tags:
// private
var is = this.node.style,
os = this.domNode.style;
// hide the background temporarily, so that the background itself isn't
// causing scrollbars to appear (might happen when user shrinks browser
// window and then we are called to resize)
os.display = "none";
// then resize and show
var viewport = winUtils.getBox(this.ownerDocument);
os.top = viewport.t + "px";
os.left = viewport.l + "px";
is.width = viewport.w + "px";
is.height = viewport.h + "px";
os.display = "block";
},
show: function(){
// summary:
// Show the dialog underlay
this.domNode.style.display = "block";
this.layout();
this.bgIframe = new BackgroundIframe(this.domNode);
},
hide: function(){
// summary:
// Hides the dialog underlay
this.bgIframe.destroy();
delete this.bgIframe;
this.domNode.style.display = "none";
}
});
});
},
'dijit/place':function(){
define("dijit/place", [
"dojo/_base/array", // array.forEach array.map array.some
"dojo/dom-geometry", // domGeometry.position
"dojo/dom-style", // domStyle.getComputedStyle
"dojo/_base/kernel", // kernel.deprecated
"dojo/_base/window", // win.body
"dojo/window", // winUtils.getBox
"./main" // dijit (defining dijit.place to match API doc)
], function(array, domGeometry, domStyle, kernel, win, winUtils, dijit){
// module:
// dijit/place
function _place(/*DomNode*/ node, choices, layoutNode, aroundNodeCoords){
// summary:
// Given a list of spots to put node, put it at the first spot where it fits,
// of if it doesn't fit anywhere then the place with the least overflow
// choices: Array
// Array of elements like: {corner: 'TL', pos: {x: 10, y: 20} }
// Above example says to put the top-left corner of the node at (10,20)
// layoutNode: Function(node, aroundNodeCorner, nodeCorner, size)
// for things like tooltip, they are displayed differently (and have different dimensions)
// based on their orientation relative to the parent. This adjusts the popup based on orientation.
// It also passes in the available size for the popup, which is useful for tooltips to
// tell them that their width is limited to a certain amount. layoutNode() may return a value expressing
// how much the popup had to be modified to fit into the available space. This is used to determine
// what the best placement is.
// aroundNodeCoords: Object
// Size of aroundNode, ex: {w: 200, h: 50}
// get {x: 10, y: 10, w: 100, h:100} type obj representing position of
// viewport over document
var view = winUtils.getBox(node.ownerDocument);
// This won't work if the node is inside a
,
// so reattach it to win.doc.body. (Otherwise, the positioning will be wrong
// and also it might get cutoff)
if(!node.parentNode || String(node.parentNode.tagName).toLowerCase() != "body"){
win.body(node.ownerDocument).appendChild(node);
}
var best = null;
array.some(choices, function(choice){
var corner = choice.corner;
var pos = choice.pos;
var overflow = 0;
// calculate amount of space available given specified position of node
var spaceAvailable = {
w: {
'L': view.l + view.w - pos.x,
'R': pos.x - view.l,
'M': view.w
}[corner.charAt(1)],
h: {
'T': view.t + view.h - pos.y,
'B': pos.y - view.t,
'M': view.h
}[corner.charAt(0)]
};
// Clear left/right position settings set earlier so they don't interfere with calculations,
// specifically when layoutNode() (a.k.a. Tooltip.orient()) measures natural width of Tooltip
var s = node.style;
s.left = s.right = "auto";
// configure node to be displayed in given position relative to button
// (need to do this in order to get an accurate size for the node, because
// a tooltip's size changes based on position, due to triangle)
if(layoutNode){
var res = layoutNode(node, choice.aroundCorner, corner, spaceAvailable, aroundNodeCoords);
overflow = typeof res == "undefined" ? 0 : res;
}
// get node's size
var style = node.style;
var oldDisplay = style.display;
var oldVis = style.visibility;
if(style.display == "none"){
style.visibility = "hidden";
style.display = "";
}
var bb = domGeometry.position(node);
style.display = oldDisplay;
style.visibility = oldVis;
// coordinates and size of node with specified corner placed at pos,
// and clipped by viewport
var
startXpos = {
'L': pos.x,
'R': pos.x - bb.w,
'M': Math.max(view.l, Math.min(view.l + view.w, pos.x + (bb.w >> 1)) - bb.w) // M orientation is more flexible
}[corner.charAt(1)],
startYpos = {
'T': pos.y,
'B': pos.y - bb.h,
'M': Math.max(view.t, Math.min(view.t + view.h, pos.y + (bb.h >> 1)) - bb.h)
}[corner.charAt(0)],
startX = Math.max(view.l, startXpos),
startY = Math.max(view.t, startYpos),
endX = Math.min(view.l + view.w, startXpos + bb.w),
endY = Math.min(view.t + view.h, startYpos + bb.h),
width = endX - startX,
height = endY - startY;
overflow += (bb.w - width) + (bb.h - height);
if(best == null || overflow < best.overflow){
best = {
corner: corner,
aroundCorner: choice.aroundCorner,
x: startX,
y: startY,
w: width,
h: height,
overflow: overflow,
spaceAvailable: spaceAvailable
};
}
return !overflow;
});
// In case the best position is not the last one we checked, need to call
// layoutNode() again.
if(best.overflow && layoutNode){
layoutNode(node, best.aroundCorner, best.corner, best.spaceAvailable, aroundNodeCoords);
}
// And then position the node. Do this last, after the layoutNode() above
// has sized the node, due to browser quirks when the viewport is scrolled
// (specifically that a Tooltip will shrink to fit as though the window was
// scrolled to the left).
//
// In RTL mode, set style.right rather than style.left so in the common case,
// window resizes move the popup along with the aroundNode.
var l = domGeometry.isBodyLtr(node.ownerDocument),
s = node.style;
s.top = best.y + "px";
s[l ? "left" : "right"] = (l ? best.x : view.w - best.x - best.w) + "px";
s[l ? "right" : "left"] = "auto"; // needed for FF or else tooltip goes to far left
return best;
}
var place = {
// summary:
// Code to place a DOMNode relative to another DOMNode.
// Load using require(["dijit/place"], function(place){ ... }).
at: function(node, pos, corners, padding){
// summary:
// Positions one of the node's corners at specified position
// such that node is fully visible in viewport.
// description:
// NOTE: node is assumed to be absolutely or relatively positioned.
// node: DOMNode
// The node to position
// pos: dijit/place.__Position
// Object like {x: 10, y: 20}
// corners: String[]
// Array of Strings representing order to try corners in, like ["TR", "BL"].
// Possible values are:
//
// - "BL" - bottom left
// - "BR" - bottom right
// - "TL" - top left
// - "TR" - top right
// padding: dijit/place.__Position?
// optional param to set padding, to put some buffer around the element you want to position.
// example:
// Try to place node's top right corner at (10,20).
// If that makes node go (partially) off screen, then try placing
// bottom left corner at (10,20).
// | place(node, {x: 10, y: 20}, ["TR", "BL"])
var choices = array.map(corners, function(corner){
var c = { corner: corner, pos: {x:pos.x,y:pos.y} };
if(padding){
c.pos.x += corner.charAt(1) == 'L' ? padding.x : -padding.x;
c.pos.y += corner.charAt(0) == 'T' ? padding.y : -padding.y;
}
return c;
});
return _place(node, choices);
},
around: function(
/*DomNode*/ node,
/*DomNode|dijit/place.__Rectangle*/ anchor,
/*String[]*/ positions,
/*Boolean*/ leftToRight,
/*Function?*/ layoutNode){
// summary:
// Position node adjacent or kitty-corner to anchor
// such that it's fully visible in viewport.
// description:
// Place node such that corner of node touches a corner of
// aroundNode, and that node is fully visible.
// anchor:
// Either a DOMNode or a rectangle (object with x, y, width, height).
// positions:
// Ordered list of positions to try matching up.
//
// - before: places drop down to the left of the anchor node/widget, or to the right in the case
// of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down
// with the top of the anchor, or the bottom of the drop down with bottom of the anchor.
// - after: places drop down to the right of the anchor node/widget, or to the left in the case
// of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down
// with the top of the anchor, or the bottom of the drop down with bottom of the anchor.
// - before-centered: centers drop down to the left of the anchor node/widget, or to the right
// in the case of RTL scripts like Hebrew and Arabic
// - after-centered: centers drop down to the right of the anchor node/widget, or to the left
// in the case of RTL scripts like Hebrew and Arabic
// - above-centered: drop down is centered above anchor node
// - above: drop down goes above anchor node, left sides aligned
// - above-alt: drop down goes above anchor node, right sides aligned
// - below-centered: drop down is centered above anchor node
// - below: drop down goes below anchor node
// - below-alt: drop down goes below anchor node, right sides aligned
// layoutNode: Function(node, aroundNodeCorner, nodeCorner)
// For things like tooltip, they are displayed differently (and have different dimensions)
// based on their orientation relative to the parent. This adjusts the popup based on orientation.
// leftToRight:
// True if widget is LTR, false if widget is RTL. Affects the behavior of "above" and "below"
// positions slightly.
// example:
// | placeAroundNode(node, aroundNode, {'BL':'TL', 'TR':'BR'});
// This will try to position node such that node's top-left corner is at the same position
// as the bottom left corner of the aroundNode (ie, put node below
// aroundNode, with left edges aligned). If that fails it will try to put
// the bottom-right corner of node where the top right corner of aroundNode is
// (ie, put node above aroundNode, with right edges aligned)
//
// if around is a DOMNode (or DOMNode id), convert to coordinates
var aroundNodePos = (typeof anchor == "string" || "offsetWidth" in anchor)
? domGeometry.position(anchor, true)
: anchor;
// Compute position and size of visible part of anchor (it may be partially hidden by ancestor nodes w/scrollbars)
if(anchor.parentNode){
// ignore nodes between position:relative and position:absolute
var sawPosAbsolute = domStyle.getComputedStyle(anchor).position == "absolute";
var parent = anchor.parentNode;
while(parent && parent.nodeType == 1 && parent.nodeName != "BODY"){ //ignoring the body will help performance
var parentPos = domGeometry.position(parent, true),
pcs = domStyle.getComputedStyle(parent);
if(/relative|absolute/.test(pcs.position)){
sawPosAbsolute = false;
}
if(!sawPosAbsolute && /hidden|auto|scroll/.test(pcs.overflow)){
var bottomYCoord = Math.min(aroundNodePos.y + aroundNodePos.h, parentPos.y + parentPos.h);
var rightXCoord = Math.min(aroundNodePos.x + aroundNodePos.w, parentPos.x + parentPos.w);
aroundNodePos.x = Math.max(aroundNodePos.x, parentPos.x);
aroundNodePos.y = Math.max(aroundNodePos.y, parentPos.y);
aroundNodePos.h = bottomYCoord - aroundNodePos.y;
aroundNodePos.w = rightXCoord - aroundNodePos.x;
}
if(pcs.position == "absolute"){
sawPosAbsolute = true;
}
parent = parent.parentNode;
}
}
var x = aroundNodePos.x,
y = aroundNodePos.y,
width = "w" in aroundNodePos ? aroundNodePos.w : (aroundNodePos.w = aroundNodePos.width),
height = "h" in aroundNodePos ? aroundNodePos.h : (kernel.deprecated("place.around: dijit/place.__Rectangle: { x:"+x+", y:"+y+", height:"+aroundNodePos.height+", width:"+width+" } has been deprecated. Please use { x:"+x+", y:"+y+", h:"+aroundNodePos.height+", w:"+width+" }", "", "2.0"), aroundNodePos.h = aroundNodePos.height);
// Convert positions arguments into choices argument for _place()
var choices = [];
function push(aroundCorner, corner){
choices.push({
aroundCorner: aroundCorner,
corner: corner,
pos: {
x: {
'L': x,
'R': x + width,
'M': x + (width >> 1)
}[aroundCorner.charAt(1)],
y: {
'T': y,
'B': y + height,
'M': y + (height >> 1)
}[aroundCorner.charAt(0)]
}
})
}
array.forEach(positions, function(pos){
var ltr = leftToRight;
switch(pos){
case "above-centered":
push("TM", "BM");
break;
case "below-centered":
push("BM", "TM");
break;
case "after-centered":
ltr = !ltr;
// fall through
case "before-centered":
push(ltr ? "ML" : "MR", ltr ? "MR" : "ML");
break;
case "after":
ltr = !ltr;
// fall through
case "before":
push(ltr ? "TL" : "TR", ltr ? "TR" : "TL");
push(ltr ? "BL" : "BR", ltr ? "BR" : "BL");
break;
case "below-alt":
ltr = !ltr;
// fall through
case "below":
// first try to align left borders, next try to align right borders (or reverse for RTL mode)
push(ltr ? "BL" : "BR", ltr ? "TL" : "TR");
push(ltr ? "BR" : "BL", ltr ? "TR" : "TL");
break;
case "above-alt":
ltr = !ltr;
// fall through
case "above":
// first try to align left borders, next try to align right borders (or reverse for RTL mode)
push(ltr ? "TL" : "TR", ltr ? "BL" : "BR");
push(ltr ? "TR" : "TL", ltr ? "BR" : "BL");
break;
default:
// To assist dijit/_base/place, accept arguments of type {aroundCorner: "BL", corner: "TL"}.
// Not meant to be used directly.
push(pos.aroundCorner, pos.corner);
}
});
var position = _place(node, choices, layoutNode, {w: width, h: height});
position.aroundNodePos = aroundNodePos;
return position;
}
};
/*=====
place.__Position = {
// x: Integer
// horizontal coordinate in pixels, relative to document body
// y: Integer
// vertical coordinate in pixels, relative to document body
};
place.__Rectangle = {
// x: Integer
// horizontal offset in pixels, relative to document body
// y: Integer
// vertical offset in pixels, relative to document body
// w: Integer
// width in pixels. Can also be specified as "width" for backwards-compatibility.
// h: Integer
// height in pixels. Can also be specified as "height" for backwards-compatibility.
};
=====*/
return dijit.place = place; // setting dijit.place for back-compat, remove for 2.0
});
},
'dijit/_HasDropDown':function(){
define("dijit/_HasDropDown", [
"dojo/_base/declare", // declare
"dojo/_base/Deferred",
"dojo/_base/event", // event.stop
"dojo/dom", // dom.isDescendant
"dojo/dom-attr", // domAttr.set
"dojo/dom-class", // domClass.add domClass.contains domClass.remove
"dojo/dom-geometry", // domGeometry.marginBox domGeometry.position
"dojo/dom-style", // domStyle.set
"dojo/has", // has("touch")
"dojo/keys", // keys.DOWN_ARROW keys.ENTER keys.ESCAPE
"dojo/_base/lang", // lang.hitch lang.isFunction
"dojo/on",
"dojo/window", // winUtils.getBox
"./registry", // registry.byNode()
"./focus",
"./popup",
"./_FocusMixin"
], function(declare, Deferred, event,dom, domAttr, domClass, domGeometry, domStyle, has, keys, lang, on,
winUtils, registry, focus, popup, _FocusMixin){
// module:
// dijit/_HasDropDown
return declare("dijit._HasDropDown", _FocusMixin, {
// summary:
// Mixin for widgets that need drop down ability.
// _buttonNode: [protected] DomNode
// The button/icon/node to click to display the drop down.
// Can be set via a data-dojo-attach-point assignment.
// If missing, then either focusNode or domNode (if focusNode is also missing) will be used.
_buttonNode: null,
// _arrowWrapperNode: [protected] DomNode
// Will set CSS class dijitUpArrow, dijitDownArrow, dijitRightArrow etc. on this node depending
// on where the drop down is set to be positioned.
// Can be set via a data-dojo-attach-point assignment.
// If missing, then _buttonNode will be used.
_arrowWrapperNode: null,
// _popupStateNode: [protected] DomNode
// The node to set the popupActive class on.
// Can be set via a data-dojo-attach-point assignment.
// If missing, then focusNode or _buttonNode (if focusNode is missing) will be used.
_popupStateNode: null,
// _aroundNode: [protected] DomNode
// The node to display the popup around.
// Can be set via a data-dojo-attach-point assignment.
// If missing, then domNode will be used.
_aroundNode: null,
// dropDown: [protected] Widget
// The widget to display as a popup. This widget *must* be
// defined before the startup function is called.
dropDown: null,
// autoWidth: [protected] Boolean
// Set to true to make the drop down at least as wide as this
// widget. Set to false if the drop down should just be its
// default width
autoWidth: true,
// forceWidth: [protected] Boolean
// Set to true to make the drop down exactly as wide as this
// widget. Overrides autoWidth.
forceWidth: false,
// maxHeight: [protected] Integer
// The max height for our dropdown.
// Any dropdown taller than this will have scrollbars.
// Set to 0 for no max height, or -1 to limit height to available space in viewport
maxHeight: 0,
// dropDownPosition: [const] String[]
// This variable controls the position of the drop down.
// It's an array of strings with the following values:
//
// - before: places drop down to the left of the target node/widget, or to the right in
// the case of RTL scripts like Hebrew and Arabic
// - after: places drop down to the right of the target node/widget, or to the left in
// the case of RTL scripts like Hebrew and Arabic
// - above: drop down goes above target node
// - below: drop down goes below target node
//
// The list is positions is tried, in order, until a position is found where the drop down fits
// within the viewport.
//
dropDownPosition: ["below","above"],
// _stopClickEvents: Boolean
// When set to false, the click events will not be stopped, in
// case you want to use them in your subclass
_stopClickEvents: true,
_onDropDownMouseDown: function(/*Event*/ e){
// summary:
// Callback when the user mousedown's on the arrow icon
if(this.disabled || this.readOnly){ return; }
// Prevent default to stop things like text selection, but don't stop propagation, so that:
// 1. TimeTextBox etc. can focus the on mousedown
// 2. dropDownButtonActive class applied by _CssStateMixin (on button depress)
// 3. user defined onMouseDown handler fires
e.preventDefault();
this._docHandler = this.connect(this.ownerDocument, "mouseup", "_onDropDownMouseUp");
this.toggleDropDown();
},
_onDropDownMouseUp: function(/*Event?*/ e){
// summary:
// Callback when the user lifts their mouse after mouse down on the arrow icon.
// If the drop down is a simple menu and the mouse is over the menu, we execute it, otherwise, we focus our
// drop down widget. If the event is missing, then we are not
// a mouseup event.
//
// This is useful for the common mouse movement pattern
// with native browser `