Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/core/ToolTip.js
| /** | /** | ||||
| * @requires javelin-install | * @requires javelin-install | ||||
| * javelin-util | * javelin-util | ||||
| * javelin-dom | * javelin-dom | ||||
| * javelin-vector | * javelin-vector | ||||
| * @provides phabricator-tooltip | * @provides phabricator-tooltip | ||||
| * @javelin | * @javelin | ||||
| */ | */ | ||||
| JX.install('Tooltip', { | JX.install('Tooltip', { | ||||
| statics: { | statics: { | ||||
| _node: null, | _node: null, | ||||
| _last: null, | |||||
| _lock: 0, | _lock: 0, | ||||
| show : function(root, scale, align, content) { | show : function(root, scale, align, content) { | ||||
| var self = JX.Tooltip; | var self = JX.Tooltip; | ||||
| if (self._lock) { | if (self._lock) { | ||||
| return; | return; | ||||
| } | } | ||||
| Show All 19 Lines | show : function(root, scale, align, content) { | ||||
| { className: 'jx-tooltip-inner' }, | { className: 'jx-tooltip-inner' }, | ||||
| [ | [ | ||||
| JX.$N('div', { className: 'jx-tooltip' }, content), | JX.$N('div', { className: 'jx-tooltip' }, content), | ||||
| JX.$N('div', { className: 'jx-tooltip-anchor' }) | JX.$N('div', { className: 'jx-tooltip-anchor' }) | ||||
| ]); | ]); | ||||
| var node = JX.$N( | var node = JX.$N( | ||||
| 'div', | 'div', | ||||
| { className: 'jx-tooltip-container jx-tooltip-hidden' }, | { className: 'jx-tooltip-container' }, | ||||
| node_inner); | node_inner); | ||||
| node.style.maxWidth = scale + 'px'; | node.style.maxWidth = scale + 'px'; | ||||
| JX.Tooltip.hide(); | JX.Tooltip.hide(); | ||||
| self._node = node; | self._node = node; | ||||
| // Append the tip to the document, but offscreen, so we can measure it. | // Append the tip to the document, but offscreen, so we can measure it. | ||||
| node.style.left = '-10000px'; | node.style.left = '-10000px'; | ||||
| document.body.appendChild(node); | document.body.appendChild(node); | ||||
| // Jump through some hoops trying to auto-position the tooltip | // Jump through some hoops trying to auto-position the tooltip | ||||
| var pos = self._getSmartPosition(align, root, node); | var pos = self._getSmartPosition(align, root, node); | ||||
| pos.setPos(node); | pos.setPos(node); | ||||
| JX.DOM.alterClass(node, 'jx-tooltip-hidden', false); | |||||
| // Animate the tip if we haven't shown any tips recently. If we are | |||||
| // already showing a tip (or hid one very recently) just show the tip | |||||
| // immediately. This makes hunting for a particular item by mousing | |||||
| // through tips smoother: you only have to sit through the animation | |||||
| // once, at the beginning. | |||||
| var is_recent = false; | |||||
| var last_tip = self._last; | |||||
| if (last_tip) { | |||||
| // If we recently hid a tip, compute how many milliseconds ago we | |||||
| // hid it. | |||||
| var last_tip_age = (new Date().getTime() - self._last); | |||||
| if (last_tip_age < 500) { | |||||
| is_recent = true; | |||||
| } | |||||
| } | |||||
| if (!is_recent) { | |||||
| JX.DOM.alterClass(node, 'jx-tooltip-appear', true); | |||||
| } | |||||
| }, | }, | ||||
| _getSmartPosition: function (align, root, node) { | _getSmartPosition: function (align, root, node) { | ||||
| var self = JX.Tooltip; | var self = JX.Tooltip; | ||||
| // Figure out how to position the tooltip on screen. We will try the | // Figure out how to position the tooltip on screen. We will try the | ||||
| // configured aligment first. | // configured aligment first. | ||||
| var try_alignments = [align]; | var try_alignments = [align]; | ||||
| ▲ Show 20 Lines • Show All 116 Lines • ▼ Show 20 Lines | _setAnchor: function (align) { | ||||
| // Orient the little tail | // Orient the little tail | ||||
| JX.DOM.alterClass(this._node, 'jx-tooltip-align-' + align, true); | JX.DOM.alterClass(this._node, 'jx-tooltip-align-' + align, true); | ||||
| }, | }, | ||||
| hide : function() { | hide : function() { | ||||
| if (this._node) { | if (this._node) { | ||||
| JX.DOM.remove(this._node); | JX.DOM.remove(this._node); | ||||
| this._node = null; | this._node = null; | ||||
| this._last = new Date().getTime(); | |||||
| } | } | ||||
| }, | }, | ||||
| lock: function() { | lock: function() { | ||||
| var self = JX.Tooltip; | var self = JX.Tooltip; | ||||
| self.hide(); | self.hide(); | ||||
| self._lock++; | self._lock++; | ||||
| }, | }, | ||||
| unlock: function() { | unlock: function() { | ||||
| var self = JX.Tooltip; | var self = JX.Tooltip; | ||||
| self._lock--; | self._lock--; | ||||
| } | } | ||||
| } | } | ||||
| }); | }); | ||||