]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
1 | require({cache:{ |
2 | 'url:dijit/templates/TooltipDialog.html':"<div role=\"presentation\" tabIndex=\"-1\">\n\t<div class=\"dijitTooltipContainer\" role=\"presentation\">\n\t\t<div class =\"dijitTooltipContents dijitTooltipFocusNode\" data-dojo-attach-point=\"containerNode\" role=\"dialog\"></div>\n\t</div>\n\t<div class=\"dijitTooltipConnector\" role=\"presentation\" data-dojo-attach-point=\"connectorNode\"></div>\n</div>\n"}}); | |
3 | define("dijit/TooltipDialog", [ | |
4 | "dojo/_base/declare", // declare | |
5 | "dojo/dom-class", // domClass.replace | |
6 | "dojo/_base/event", // event.stop | |
7 | "dojo/keys", // keys | |
8 | "dojo/_base/lang", // lang.hitch | |
9 | "./focus", | |
10 | "./layout/ContentPane", | |
11 | "./_DialogMixin", | |
12 | "./form/_FormMixin", | |
13 | "./_TemplatedMixin", | |
14 | "dojo/text!./templates/TooltipDialog.html", | |
15 | "./main" // exports methods to dijit global | |
16 | ], function(declare, domClass, event, keys, lang, | |
17 | focus, ContentPane, _DialogMixin, _FormMixin, _TemplatedMixin, template, dijit){ | |
18 | ||
19 | // module: | |
20 | // dijit/TooltipDialog | |
21 | ||
22 | ||
23 | return declare("dijit.TooltipDialog", | |
24 | [ContentPane, _TemplatedMixin, _FormMixin, _DialogMixin], { | |
25 | // summary: | |
26 | // Pops up a dialog that appears like a Tooltip | |
27 | ||
28 | // title: String | |
29 | // Description of tooltip dialog (required for a11y) | |
30 | title: "", | |
31 | ||
32 | // doLayout: [protected] Boolean | |
33 | // Don't change this parameter from the default value. | |
34 | // This ContentPane parameter doesn't make sense for TooltipDialog, since TooltipDialog | |
35 | // is never a child of a layout container, nor can you specify the size of | |
36 | // TooltipDialog in order to control the size of an inner widget. | |
37 | doLayout: false, | |
38 | ||
39 | // autofocus: Boolean | |
40 | // A Toggle to modify the default focus behavior of a Dialog, which | |
41 | // is to focus on the first dialog element after opening the dialog. | |
42 | // False will disable autofocusing. Default: true. | |
43 | autofocus: true, | |
44 | ||
45 | // baseClass: [protected] String | |
46 | // The root className to use for the various states of this widget | |
47 | baseClass: "dijitTooltipDialog", | |
48 | ||
49 | // _firstFocusItem: [private readonly] DomNode | |
50 | // The pointer to the first focusable node in the dialog. | |
51 | // Set by `dijit/_DialogMixin._getFocusItems()`. | |
52 | _firstFocusItem: null, | |
53 | ||
54 | // _lastFocusItem: [private readonly] DomNode | |
55 | // The pointer to which node has focus prior to our dialog. | |
56 | // Set by `dijit/_DialogMixin._getFocusItems()`. | |
57 | _lastFocusItem: null, | |
58 | ||
59 | templateString: template, | |
60 | ||
61 | _setTitleAttr: function(/*String*/ title){ | |
62 | this.containerNode.title = title; | |
63 | this._set("title", title); | |
64 | }, | |
65 | ||
66 | postCreate: function(){ | |
67 | this.inherited(arguments); | |
68 | this.connect(this.containerNode, "onkeypress", "_onKey"); | |
69 | }, | |
70 | ||
71 | orient: function(/*DomNode*/ node, /*String*/ aroundCorner, /*String*/ tooltipCorner){ | |
72 | // summary: | |
73 | // Configure widget to be displayed in given position relative to the button. | |
74 | // This is called from the dijit.popup code, and should not be called | |
75 | // directly. | |
76 | // tags: | |
77 | // protected | |
78 | ||
79 | // Note: intentionally not using dijitTooltip class since that sets position:absolute, which | |
80 | // confuses dijit/popup trying to get the size of the tooltip. | |
81 | var newC = { | |
82 | "MR-ML": "dijitTooltipRight", | |
83 | "ML-MR": "dijitTooltipLeft", | |
84 | "TM-BM": "dijitTooltipAbove", | |
85 | "BM-TM": "dijitTooltipBelow", | |
86 | "BL-TL": "dijitTooltipBelow dijitTooltipABLeft", | |
87 | "TL-BL": "dijitTooltipAbove dijitTooltipABLeft", | |
88 | "BR-TR": "dijitTooltipBelow dijitTooltipABRight", | |
89 | "TR-BR": "dijitTooltipAbove dijitTooltipABRight", | |
90 | "BR-BL": "dijitTooltipRight", | |
91 | "BL-BR": "dijitTooltipLeft" | |
92 | }[aroundCorner + "-" + tooltipCorner]; | |
93 | ||
94 | domClass.replace(this.domNode, newC, this._currentOrientClass || ""); | |
95 | this._currentOrientClass = newC; | |
96 | ||
97 | // Tooltip.orient() has code to reposition connector for when Tooltip is before/after anchor. | |
98 | // Not putting here to avoid code bloat, and since TooltipDialogs are generally above/below. | |
99 | // Should combine code from Tooltip and TooltipDialog. | |
100 | }, | |
101 | ||
102 | focus: function(){ | |
103 | // summary: | |
104 | // Focus on first field | |
105 | this._getFocusItems(this.containerNode); | |
106 | focus.focus(this._firstFocusItem); | |
107 | }, | |
108 | ||
109 | onOpen: function(/*Object*/ pos){ | |
110 | // summary: | |
111 | // Called when dialog is displayed. | |
112 | // This is called from the dijit.popup code, and should not be called directly. | |
113 | // tags: | |
114 | // protected | |
115 | ||
116 | this.orient(this.domNode,pos.aroundCorner, pos.corner); | |
117 | ||
118 | // Position the tooltip connector for middle alignment. | |
119 | // This could not have been done in orient() since the tooltip wasn't positioned at that time. | |
120 | var aroundNodeCoords = pos.aroundNodePos; | |
121 | if(pos.corner.charAt(0) == 'M' && pos.aroundCorner.charAt(0) == 'M'){ | |
122 | this.connectorNode.style.top = aroundNodeCoords.y + ((aroundNodeCoords.h - this.connectorNode.offsetHeight) >> 1) - pos.y + "px"; | |
123 | this.connectorNode.style.left = ""; | |
124 | }else if(pos.corner.charAt(1) == 'M' && pos.aroundCorner.charAt(1) == 'M'){ | |
125 | this.connectorNode.style.left = aroundNodeCoords.x + ((aroundNodeCoords.w - this.connectorNode.offsetWidth) >> 1) - pos.x + "px"; | |
126 | } | |
127 | ||
128 | this._onShow(); // lazy load trigger (TODO: shouldn't we load before positioning?) | |
129 | }, | |
130 | ||
131 | onClose: function(){ | |
132 | // summary: | |
133 | // Called when dialog is hidden. | |
134 | // This is called from the dijit.popup code, and should not be called directly. | |
135 | // tags: | |
136 | // protected | |
137 | this.onHide(); | |
138 | }, | |
139 | ||
140 | _onKey: function(/*Event*/ evt){ | |
141 | // summary: | |
142 | // Handler for keyboard events | |
143 | // description: | |
144 | // Keep keyboard focus in dialog; close dialog on escape key | |
145 | // tags: | |
146 | // private | |
147 | ||
148 | var node = evt.target; | |
149 | if(evt.charOrCode === keys.TAB){ | |
150 | this._getFocusItems(this.containerNode); | |
151 | } | |
152 | var singleFocusItem = (this._firstFocusItem == this._lastFocusItem); | |
153 | if(evt.charOrCode == keys.ESCAPE){ | |
154 | // Use defer to avoid crash on IE, see #10396. | |
155 | this.defer("onCancel"); | |
156 | event.stop(evt); | |
157 | }else if(node == this._firstFocusItem && evt.shiftKey && evt.charOrCode === keys.TAB){ | |
158 | if(!singleFocusItem){ | |
159 | focus.focus(this._lastFocusItem); // send focus to last item in dialog | |
160 | } | |
161 | event.stop(evt); | |
162 | }else if(node == this._lastFocusItem && evt.charOrCode === keys.TAB && !evt.shiftKey){ | |
163 | if(!singleFocusItem){ | |
164 | focus.focus(this._firstFocusItem); // send focus to first item in dialog | |
165 | } | |
166 | event.stop(evt); | |
167 | }else if(evt.charOrCode === keys.TAB){ | |
168 | // we want the browser's default tab handling to move focus | |
169 | // but we don't want the tab to propagate upwards | |
170 | evt.stopPropagation(); | |
171 | } | |
172 | } | |
173 | }); | |
174 | }); |