summaryrefslogtreecommitdiffstatshomepage
path: root/includes/js/dijit/Tooltip.js
diff options
context:
space:
mode:
authorGravatar mensonge2008-11-13 09:49:11 +0000
committerGravatar mensonge2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/Tooltip.js
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/Tooltip.js')
-rw-r--r--includes/js/dijit/Tooltip.js292
1 files changed, 292 insertions, 0 deletions
diff --git a/includes/js/dijit/Tooltip.js b/includes/js/dijit/Tooltip.js
new file mode 100644
index 0000000..881a947
--- /dev/null
+++ b/includes/js/dijit/Tooltip.js
@@ -0,0 +1,292 @@
+if(!dojo._hasResource["dijit.Tooltip"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dijit.Tooltip"] = true;
+dojo.provide("dijit.Tooltip");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare(
+ "dijit._MasterTooltip",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary
+ // Internal widget that holds the actual tooltip markup,
+ // which occurs once per page.
+ // Called by Tooltip widgets which are just containers to hold
+ // the markup
+
+ // duration: Integer
+ // Milliseconds to fade in/fade out
+ duration: 200,
+
+ templateString:"<div class=\"dijitTooltip dijitTooltipLeft\" id=\"dojoTooltip\">\n\t<div class=\"dijitTooltipContainer dijitTooltipContents\" dojoAttachPoint=\"containerNode\" waiRole='alert'></div>\n\t<div class=\"dijitTooltipConnector\"></div>\n</div>\n",
+
+ postCreate: function(){
+ dojo.body().appendChild(this.domNode);
+
+ this.bgIframe = new dijit.BackgroundIframe(this.domNode);
+
+ // Setup fade-in and fade-out functions.
+ this.fadeIn = dojo.fadeIn({ node: this.domNode, duration: this.duration, onEnd: dojo.hitch(this, "_onShow") });
+ this.fadeOut = dojo.fadeOut({ node: this.domNode, duration: this.duration, onEnd: dojo.hitch(this, "_onHide") });
+
+ },
+
+ show: function(/*String*/ innerHTML, /*DomNode*/ aroundNode, /*String[]?*/ position){
+ // summary:
+ // Display tooltip w/specified contents to right specified node
+ // (To left if there's no space on the right, or if LTR==right)
+
+ if(this.aroundNode && this.aroundNode === aroundNode){
+ return;
+ }
+
+ if(this.fadeOut.status() == "playing"){
+ // previous tooltip is being hidden; wait until the hide completes then show new one
+ this._onDeck=arguments;
+ return;
+ }
+ this.containerNode.innerHTML=innerHTML;
+
+ // Firefox bug. when innerHTML changes to be shorter than previous
+ // one, the node size will not be updated until it moves.
+ this.domNode.style.top = (this.domNode.offsetTop + 1) + "px";
+
+ // position the element and change CSS according to position[] (a list of positions to try)
+ var align = {};
+ var ltr = this.isLeftToRight();
+ dojo.forEach( (position && position.length) ? position : dijit.Tooltip.defaultPosition, function(pos){
+ switch(pos){
+ case "after":
+ align[ltr ? "BR" : "BL"] = ltr ? "BL" : "BR";
+ break;
+ case "before":
+ align[ltr ? "BL" : "BR"] = ltr ? "BR" : "BL";
+ break;
+ case "below":
+ // first try to align left borders, next try to align right borders (or reverse for RTL mode)
+ align[ltr ? "BL" : "BR"] = ltr ? "TL" : "TR";
+ align[ltr ? "BR" : "BL"] = ltr ? "TR" : "TL";
+ break;
+ case "above":
+ default:
+ // first try to align left borders, next try to align right borders (or reverse for RTL mode)
+ align[ltr ? "TL" : "TR"] = ltr ? "BL" : "BR";
+ align[ltr ? "TR" : "TL"] = ltr ? "BR" : "BL";
+ break;
+ }
+ });
+ var pos = dijit.placeOnScreenAroundElement(this.domNode, aroundNode, align, dojo.hitch(this, "orient"));
+
+ // show it
+ dojo.style(this.domNode, "opacity", 0);
+ this.fadeIn.play();
+ this.isShowingNow = true;
+ this.aroundNode = aroundNode;
+ },
+
+ orient: function(/* DomNode */ node, /* String */ aroundCorner, /* String */ tooltipCorner){
+ // summary: private function to set CSS for tooltip node based on which position it's in
+ node.className = "dijitTooltip " +
+ {
+ "BL-TL": "dijitTooltipBelow dijitTooltipABLeft",
+ "TL-BL": "dijitTooltipAbove dijitTooltipABLeft",
+ "BR-TR": "dijitTooltipBelow dijitTooltipABRight",
+ "TR-BR": "dijitTooltipAbove dijitTooltipABRight",
+ "BR-BL": "dijitTooltipRight",
+ "BL-BR": "dijitTooltipLeft"
+ }[aroundCorner + "-" + tooltipCorner];
+ },
+
+ _onShow: function(){
+ if(dojo.isIE){
+ // the arrow won't show up on a node w/an opacity filter
+ this.domNode.style.filter="";
+ }
+ },
+
+ hide: function(aroundNode){
+ // summary: hide the tooltip
+ if(!this.aroundNode || this.aroundNode !== aroundNode){
+ return;
+ }
+ if(this._onDeck){
+ // this hide request is for a show() that hasn't even started yet;
+ // just cancel the pending show()
+ this._onDeck=null;
+ return;
+ }
+ this.fadeIn.stop();
+ this.isShowingNow = false;
+ this.aroundNode = null;
+ this.fadeOut.play();
+ },
+
+ _onHide: function(){
+ this.domNode.style.cssText=""; // to position offscreen again
+ if(this._onDeck){
+ // a show request has been queued up; do it now
+ this.show.apply(this, this._onDeck);
+ this._onDeck=null;
+ }
+ }
+
+ }
+);
+
+dijit.showTooltip = function(/*String*/ innerHTML, /*DomNode*/ aroundNode, /*String[]?*/ position){
+ // summary:
+ // Display tooltip w/specified contents in specified position.
+ // See description of dijit.Tooltip.defaultPosition for details on position parameter.
+ // If position is not specified then dijit.Tooltip.defaultPosition is used.
+ if(!dijit._masterTT){ dijit._masterTT = new dijit._MasterTooltip(); }
+ return dijit._masterTT.show(innerHTML, aroundNode, position);
+};
+
+dijit.hideTooltip = function(aroundNode){
+ // summary: hide the tooltip
+ if(!dijit._masterTT){ dijit._masterTT = new dijit._MasterTooltip(); }
+ return dijit._masterTT.hide(aroundNode);
+};
+
+dojo.declare(
+ "dijit.Tooltip",
+ dijit._Widget,
+ {
+ // summary
+ // Pops up a tooltip (a help message) when you hover over a node.
+
+ // label: String
+ // Text to display in the tooltip.
+ // Specified as innerHTML when creating the widget from markup.
+ label: "",
+
+ // showDelay: Integer
+ // Number of milliseconds to wait after hovering over/focusing on the object, before
+ // the tooltip is displayed.
+ showDelay: 400,
+
+ // connectId: String[]
+ // Id(s) of domNodes to attach the tooltip to.
+ // When user hovers over any of the specified dom nodes, the tooltip will appear.
+ connectId: [],
+
+ // position: String[]
+ // See description of dijit.Tooltip.defaultPosition for details on position parameter.
+ position: [],
+
+ postCreate: function(){
+ if(this.srcNodeRef){
+ this.srcNodeRef.style.display = "none";
+ }
+
+ this._connectNodes = [];
+
+ dojo.forEach(this.connectId, function(id) {
+ var node = dojo.byId(id);
+ if (node) {
+ this._connectNodes.push(node);
+ dojo.forEach(["onMouseOver", "onMouseOut", "onFocus", "onBlur", "onHover", "onUnHover"], function(event){
+ this.connect(node, event.toLowerCase(), "_"+event);
+ }, this);
+ if(dojo.isIE){
+ // BiDi workaround
+ node.style.zoom = 1;
+ }
+ }
+ }, this);
+ },
+
+ _onMouseOver: function(/*Event*/ e){
+ this._onHover(e);
+ },
+
+ _onMouseOut: function(/*Event*/ e){
+ if(dojo.isDescendant(e.relatedTarget, e.target)){
+ // false event; just moved from target to target child; ignore.
+ return;
+ }
+ this._onUnHover(e);
+ },
+
+ _onFocus: function(/*Event*/ e){
+ this._focus = true;
+ this._onHover(e);
+ this.inherited(arguments);
+ },
+
+ _onBlur: function(/*Event*/ e){
+ this._focus = false;
+ this._onUnHover(e);
+ this.inherited(arguments);
+ },
+
+ _onHover: function(/*Event*/ e){
+ if(!this._showTimer){
+ var target = e.target;
+ this._showTimer = setTimeout(dojo.hitch(this, function(){this.open(target)}), this.showDelay);
+ }
+ },
+
+ _onUnHover: function(/*Event*/ e){
+ // keep a tooltip open if the associated element has focus
+ if(this._focus){ return; }
+ if(this._showTimer){
+ clearTimeout(this._showTimer);
+ delete this._showTimer;
+ }
+ this.close();
+ },
+
+ open: function(/*DomNode*/ target){
+ // summary: display the tooltip; usually not called directly.
+ target = target || this._connectNodes[0];
+ if(!target){ return; }
+
+ if(this._showTimer){
+ clearTimeout(this._showTimer);
+ delete this._showTimer;
+ }
+ dijit.showTooltip(this.label || this.domNode.innerHTML, target, this.position);
+
+ this._connectNode = target;
+ },
+
+ close: function(){
+ // summary: hide the tooltip; usually not called directly.
+ dijit.hideTooltip(this._connectNode);
+ delete this._connectNode;
+ if(this._showTimer){
+ clearTimeout(this._showTimer);
+ delete this._showTimer;
+ }
+ },
+
+ uninitialize: function(){
+ this.close();
+ }
+ }
+);
+
+// dijit.Tooltip.defaultPosition: String[]
+// This variable controls the position of tooltips, if the position is not specified to
+// the Tooltip widget or *TextBox widget itself. It's an array of strings with the following values:
+//
+// * before: places tooltip to the left of the target node/widget, or to the right in
+// the case of RTL scripts like Hebrew and Arabic
+// * after: places tooltip to the right of the target node/widget, or to the left in
+// the case of RTL scripts like Hebrew and Arabic
+// * above: tooltip goes above target node
+// * below: tooltip goes below target node
+//
+// The list is positions is tried, in order, until a position is found where the tooltip fits
+// within the viewport.
+//
+// Be careful setting this parameter. A value of "above" may work fine until the user scrolls
+// the screen so that there's no room above the target node. Nodes with drop downs, like
+// DropDownButton or FilteringSelect, are especially problematic, in that you need to be sure
+// that the drop down and tooltip don't overlap, even when the viewport is scrolled so that there
+// is only room below (or above) the target node, but not both.
+dijit.Tooltip.defaultPosition = ["after", "before"];
+
+}