1 | define([ |
---|
2 | "dojo/_base/array", // array.forEach |
---|
3 | "dijit/registry", |
---|
4 | "dojo/_base/declare", |
---|
5 | "dojo/_base/lang", |
---|
6 | "dojo/dom-class", |
---|
7 | "dojo/dom-construct", |
---|
8 | "dojo/dom-geometry", |
---|
9 | "dojo/dom-style", |
---|
10 | "dijit/place", |
---|
11 | "dijit/_WidgetBase" |
---|
12 | ], function(array, registry, declare, lang, domClass, domConstruct, domGeometry, domStyle, place, WidgetBase){ |
---|
13 | |
---|
14 | /*===== |
---|
15 | WidgetBase = dijit._WidgetBase; |
---|
16 | =====*/ |
---|
17 | return declare("dojox.mobile.Tooltip", WidgetBase, { |
---|
18 | // summary: |
---|
19 | // A non-templated popup bubble widget |
---|
20 | // |
---|
21 | |
---|
22 | baseClass: "mblTooltip mblTooltipHidden", |
---|
23 | |
---|
24 | buildRendering: function(){ |
---|
25 | // create the helper nodes here in case the user overwrote domNode.innerHTML |
---|
26 | this.inherited(arguments); |
---|
27 | this.anchor = domConstruct.create("div", {"class":"mblTooltipAnchor"}, this.domNode, "first"); |
---|
28 | this.arrow = domConstruct.create("div", {"class":"mblTooltipArrow"}, this.anchor); |
---|
29 | this.innerArrow = domConstruct.create("div", {"class":"mblTooltipInnerArrow"}, this.anchor); |
---|
30 | }, |
---|
31 | |
---|
32 | show: function(/*DomNode*/ aroundNode, positions){ |
---|
33 | // summary: |
---|
34 | // Pop up the tooltip and point to aroundNode using the best position |
---|
35 | // positions: |
---|
36 | // Ordered list of positions to try matching up. |
---|
37 | // * before: places drop down before the aroundNode |
---|
38 | // * after: places drop down after the aroundNode |
---|
39 | // * above-centered: drop down goes above aroundNode |
---|
40 | // * below-centered: drop down goes below aroundNode |
---|
41 | var domNode = this.domNode; |
---|
42 | var connectorClasses = { |
---|
43 | "MRM": "mblTooltipAfter", |
---|
44 | "MLM": "mblTooltipBefore", |
---|
45 | "BMT": "mblTooltipBelow", |
---|
46 | "TMB": "mblTooltipAbove", |
---|
47 | "BLT": "mblTooltipBelow", |
---|
48 | "TLB": "mblTooltipAbove", |
---|
49 | "BRT": "mblTooltipBelow", |
---|
50 | "TRB": "mblTooltipAbove", |
---|
51 | "TLT": "mblTooltipBefore", |
---|
52 | "TRT": "mblTooltipAfter", |
---|
53 | "BRB": "mblTooltipAfter", |
---|
54 | "BLB": "mblTooltipBefore" |
---|
55 | }; |
---|
56 | domClass.remove(domNode, ["mblTooltipAfter","mblTooltipBefore","mblTooltipBelow","mblTooltipAbove"]); |
---|
57 | array.forEach(registry.findWidgets(domNode), function(widget){ |
---|
58 | if(widget.height == "auto" && typeof widget.resize == "function"){ |
---|
59 | if(!widget.fixedFooterHeight){ |
---|
60 | widget.fixedFooterHeight = domGeometry.getPadBorderExtents(domNode).b; |
---|
61 | } |
---|
62 | widget.resize(); |
---|
63 | } |
---|
64 | }); |
---|
65 | var best = place.around(domNode, aroundNode, positions || ['below-centered', 'above-centered', 'after', 'before'], this.isLeftToRight()); |
---|
66 | var connectorClass = connectorClasses[best.corner + best.aroundCorner.charAt(0)] || ''; |
---|
67 | domClass.add(domNode, connectorClass); |
---|
68 | var pos = domGeometry.position(aroundNode, true); |
---|
69 | domStyle.set(this.anchor, (connectorClass == "mblTooltipAbove" || connectorClass == "mblTooltipBelow") |
---|
70 | ? { top: "", left: Math.max(0, pos.x - best.x + (pos.w >> 1) - (this.arrow.offsetWidth >> 1)) + "px" } |
---|
71 | : { left: "", top: Math.max(0, pos.y - best.y + (pos.h >> 1) - (this.arrow.offsetHeight >> 1)) + "px" } |
---|
72 | ); |
---|
73 | domClass.replace(domNode, "mblTooltipVisible", "mblTooltipHidden"); |
---|
74 | this.resize = lang.hitch(this, "show", aroundNode, positions); // orientation changes |
---|
75 | return best; |
---|
76 | }, |
---|
77 | |
---|
78 | hide: function(){ |
---|
79 | // summary: |
---|
80 | // Pop down the tooltip |
---|
81 | this.resize = undefined; |
---|
82 | domClass.replace(this.domNode, "mblTooltipHidden", "mblTooltipVisible"); |
---|
83 | }, |
---|
84 | |
---|
85 | onBlur: function(/*Event*/e){ |
---|
86 | return true; // touching outside the overlay area does call hide() by default |
---|
87 | }, |
---|
88 | |
---|
89 | destroy: function(){ |
---|
90 | if(this.anchor){ |
---|
91 | this.anchor.removeChild(this.innerArrow); |
---|
92 | this.anchor.removeChild(this.arrow); |
---|
93 | this.domNode.removeChild(this.anchor); |
---|
94 | this.anchor = this.arrow = this.innerArrow = undefined; |
---|
95 | } |
---|
96 | this.inherited(arguments); |
---|
97 | } |
---|
98 | }); |
---|
99 | }); |
---|