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