more broadly, see
// http://support.microsoft.com/kb/829907 and the whole mess in the
// heavy stack. But I seem to have gotten away without cloning into the
// documentFragment below, so this may be a nonissue.
}
this._content = str;
},
members : {
_content : null,
/**
* Convert the raw HTML string into a DOM node tree.
*
* @task nodes
* @return DocumentFragment A document fragment which contains the nodes
* corresponding to the HTML string you provided.
*/
getFragment : function() {
var wrapper = JX.$N('div');
wrapper.innerHTML = this._content;
var fragment = document.createDocumentFragment();
while (wrapper.firstChild) {
// TODO(epriestley): Do we need to do a bunch of cloning junk here?
// See heavy stack. I'm disconnecting the nodes instead; this seems
// to work but maybe my test case just isn't extensive enough.
fragment.appendChild(wrapper.removeChild(wrapper.firstChild));
}
return fragment;
},
/**
* Convert the raw HTML string into a single DOM node. This only works
* if the element has a single top-level element. Otherwise, use
* @{method:getFragment} to get a document fragment instead.
*
* @return Node Single node represented by the object.
* @task nodes
*/
getNode : function() {
var fragment = this.getFragment();
if (__DEV__) {
if (fragment.childNodes.length < 1) {
JX.$E('JX.HTML.getNode(): Markup has no root node!');
}
if (fragment.childNodes.length > 1) {
JX.$E('JX.HTML.getNode(): Markup has more than one root node!');
}
}
return fragment.firstChild;
}
}
});
/**
* Build a new HTML object from a trustworthy string. JX.$H is a shortcut for
* creating new JX.HTML instances.
*
* @task build
* @param string A string which you want to be treated as HTML, because you
* know it is from a trusted source and any data in it has been
* properly escaped.
* @return JX.HTML HTML object, suitable for use with @{JX.$N}.
*
* @group dom
*/
JX.$H = function(str) {
return new JX.HTML(str);
};
/**
* Create a new DOM node with attributes and content.
*
* var link = JX.$N('a');
*
* This creates a new, empty anchor tag without any attributes. The equivalent
* markup would be:
*
* LANG=HTML
* Visit the Javelin Homepage
*
* If you only want to specify content, you can omit the attribute parameter.
* That is, these calls are equivalent:
*
* JX.$N('div', {}, 'Lorem ipsum...'); // No attributes.
* JX.$N('div', 'Lorem ipsum...') // Same as above.
*
* Both are equivalent to:
*
* LANG=HTML
* Lorem ipsum...
*
* Note that the content is treated as plain text, not HTML. This means it is
* safe to use untrusted strings:
*
* JX.$N('div', '');
*
* This is equivalent to:
*
* LANG=HTML
* <script src="evil.com" />
*
* That is, the content will be properly escaped and will not create a
* vulnerability. If you want to set HTML content, you can use @{JX.HTML}:
*
* JX.$N('div', JX.$H(some_html));
*
* **This is potentially unsafe**, so make sure you understand what you're
* doing. You should usually avoid passing HTML around in string form. See
* @{JX.HTML} for discussion.
*
* You can create new nodes with a Javelin sigil (and, optionally, metadata) by
* providing "sigil" and "meta" keys in the attribute dictionary.
*
* @param string Tag name, like 'a' or 'div'.
* @param dict|string|@{JX.HTML}? Property dictionary, or content if you don't
* want to specify any properties.
* @param string|@{JX.HTML}? Content string (interpreted as plain text)
* or @{JX.HTML} object (interpreted as HTML,
* which may be dangerous).
* @return Node New node with whatever attributes and
* content were specified.
*
* @group dom
*/
JX.$N = function(tag, attr, content) {
if (typeof content == 'undefined' &&
(typeof attr != 'object' || attr instanceof JX.HTML)) {
content = attr;
attr = {};
}
if (__DEV__) {
if (tag.toLowerCase() != tag) {
JX.$E(
'$N("'+tag+'", ...): '+
'tag name must be in lower case; '+
'use "'+tag.toLowerCase()+'", not "'+tag+'".');
}
}
var node = document.createElement(tag);
if (attr.style) {
JX.copy(node.style, attr.style);
delete attr.style;
}
if (attr.sigil) {
JX.Stratcom.addSigil(node, attr.sigil);
delete attr.sigil;
}
if (attr.meta) {
JX.Stratcom.addData(node, attr.meta);
delete attr.meta;
}
if (__DEV__) {
if (('metadata' in attr) || ('data' in attr)) {
JX.$E(
'$N(' + tag + ', ...): ' +
'use the key "meta" to specify metadata, not "data" or "metadata".');
}
}
JX.copy(node, attr);
if (content) {
JX.DOM.setContent(node, content);
}
return node;
};
/**
* Query and update the DOM. Everything here is static, this is essentially
* a collection of common utility functions.
*
* @task stratcom Attaching Event Listeners
* @task content Changing DOM Content
* @task nodes Updating Nodes
* @task serialize Serializing Forms
* @task test Testing DOM Properties
* @task convenience Convenience Methods
* @task query Finding Nodes in the DOM
* @task view Changing View State
*
* @group dom
*/
JX.install('DOM', {
statics : {
_autoid : 0,
_uniqid : 0,
_metrics : {},
/* -( Changing DOM Content )----------------------------------------------- */
/**
* Set the content of some node. This uses the same content semantics as
* other Javelin content methods, see @{function:JX.$N} for a detailed
* explanation. Previous content will be replaced: you can also
* @{method:prependContent} or @{method:appendContent}.
*
* @param Node Node to set content of.
* @param mixed Content to set.
* @return void
* @task content
*/
setContent : function(node, content) {
if (__DEV__) {
if (!JX.DOM.isNode(node)) {
JX.$E(
'JX.DOM.setContent(, ...): '+
'first argument must be a DOM node.');
}
}
while (node.firstChild) {
JX.DOM.remove(node.firstChild);
}
JX.DOM.appendContent(node, content);
},
/**
* Prepend content to some node. This method uses the same content semantics
* as other Javelin methods, see @{function:JX.$N} for an explanation. You
* can also @{method:setContent} or @{method:appendContent}.
*
* @param Node Node to prepend content to.
* @param mixed Content to prepend.
* @return void
* @task content
*/
prependContent : function(node, content) {
if (__DEV__) {
if (!JX.DOM.isNode(node)) {
JX.$E(
'JX.DOM.prependContent(, ...): '+
'first argument must be a DOM node.');
}
}
this._insertContent(node, content, this._mechanismPrepend, true);
},
/**
* Append content to some node. This method uses the same content semantics
* as other Javelin methods, see @{function:JX.$N} for an explanation. You
* can also @{method:setContent} or @{method:prependContent}.
*
* @param Node Node to append the content of.
* @param mixed Content to append.
* @return void
* @task content
*/
appendContent : function(node, content) {
if (__DEV__) {
if (!JX.DOM.isNode(node)) {
JX.$E(
'JX.DOM.appendContent(, ...): '+
'first argument must be a DOM node.');
}
}
this._insertContent(node, content, this._mechanismAppend);
},
/**
* Internal, add content to a node by prepending.
*
* @param Node Node to prepend content to.
* @param Node Node to prepend.
* @return void
* @task content
*/
_mechanismPrepend : function(node, content) {
node.insertBefore(content, node.firstChild);
},
/**
* Internal, add content to a node by appending.
*
* @param Node Node to append content to.
* @param Node Node to append.
* @task content
*/
_mechanismAppend : function(node, content) {
node.appendChild(content);
},
/**
* Internal, add content to a node using some specified mechanism.
*
* @param Node Node to add content to.
* @param mixed Content to add.
* @param function Callback for actually adding the nodes.
* @param bool True if array elements should be passed to the mechanism
* in reverse order, i.e. the mechanism prepends nodes.
* @return void
* @task content
*/
_insertContent : function(parent, content, mechanism, reverse) {
if (JX.isArray(content)) {
if (reverse) {
content = [].concat(content).reverse();
}
for (var ii = 0; ii < content.length; ii++) {
JX.DOM._insertContent(parent, content[ii], mechanism, reverse);
}
} else {
var type = typeof content;
if (content instanceof JX.HTML) {
content = content.getFragment();
} else if (type == 'string' || type == 'number') {
content = document.createTextNode(content);
}
if (__DEV__) {
if (content && !content.nodeType) {
JX.$E(
'JX.DOM._insertContent(, ...): '+
'second argument must be a string, a number, ' +
'a DOM node or a JX.HTML instance');
}
}
content && mechanism(parent, content);
}
},
/* -( Updating Nodes )----------------------------------------------------- */
/**
* Remove a node from its parent, so it is no longer a child of any other
* node.
*
* @param Node Node to remove.
* @return Node The node.
* @task nodes
*/
remove : function(node) {
node.parentNode && JX.DOM.replace(node, null);
return node;
},
/**
* Replace a node with some other piece of content. This method obeys
* Javelin content semantics, see @{function:JX.$N} for an explanation.
* You can also @{method:setContent}, @{method:prependContent}, or
* @{method:appendContent}.
*
* @param Node Node to replace.
* @param mixed Content to replace it with.
* @return Node the original node.
* @task nodes
*/
replace : function(node, replacement) {
if (__DEV__) {
if (!node.parentNode) {
JX.$E(
'JX.DOM.replace(, ...): '+
'node has no parent node, so it can not be replaced.');
}
}
var mechanism;
if (node.nextSibling) {
mechanism = JX.bind(node.nextSibling, function(parent, content) {
parent.insertBefore(content, this);
});
} else {
mechanism = this._mechanismAppend;
}
var parent = node.parentNode;
parent.removeChild(node);
this._insertContent(parent, replacement, mechanism);
return node;
},
-/* -( Serializing Froms )-------------------------------------------------- */
+/* -( Serializing Forms )-------------------------------------------------- */
/**
* Converts a form into a list of pairs.
*
* Note: This function explicity does not match for submit inputs as there
* could be multiple in a form. It's the caller's obligation to add the
* submit input value if desired.
*
* @param Node The form element to convert into a list of pairs.
* @return List A list of pairs.
* @task serialize
*/
convertFormToListOfPairs : function(form) {
var elements = form.getElementsByTagName('*');
var data = [];
for (var ii = 0; ii < elements.length; ++ii) {
if (!elements[ii].name) {
continue;
}
if (elements[ii].disabled) {
continue;
}
var type = elements[ii].type;
var tag = elements[ii].tagName;
if ((type in {radio: 1, checkbox: 1} && elements[ii].checked) ||
type in {text: 1, hidden: 1, password: 1, email: 1, tel: 1,
number: 1} ||
tag in {TEXTAREA: 1, SELECT: 1}) {
data.push([elements[ii].name, elements[ii].value]);
}
}
return data;
},
/**
* Converts a form into a dictionary mapping input names to values. This
* will overwrite duplicate inputs in an undefined way.
*
* @param Node The form element to convert into a dictionary.
* @return Dict A dictionary of form values.
* @task serialize
*/
convertFormToDictionary : function(form) {
var data = {};
var pairs = JX.DOM.convertFormToListOfPairs(form);
for (var ii = 0; ii < pairs.length; ii++) {
data[pairs[ii][0]] = pairs[ii][1];
}
return data;
},
/* -( Testing DOM Properties )--------------------------------------------- */
/**
* Test if an object is a valid Node.
*
* @param wild Something which might be a Node.
* @return bool True if the parameter is a DOM node.
* @task test
*/
isNode : function(node) {
return !!(node && node.nodeName && (node !== window));
},
/**
* Test if an object is a node of some specific (or one of several) types.
* For example, this tests if the node is an ##, ...): '+
'first argument must be a DOM node.');
}
}
var nodes = root.getElementsByTagName(tagname);
if (!sigil) {
return JX.$A(nodes);
}
var result = [];
for (var ii = 0; ii < nodes.length; ii++) {
if (JX.Stratcom.hasSigil(nodes[ii], sigil)) {
result.push(nodes[ii]);
}
}
return result;
},
/**
* Select a node uniquely identified by a root, tagname and sigil. This
* is similar to JX.DOM.scry() but expects exactly one result.
*
* @task query
*
* @param Node Root node to search beneath.
* @param string Tag name, like 'a' or 'textarea'.
* @param string Optionally, sigil which selected node must have.
*
* @return Node Node uniquely identified by the criteria.
*/
find : function(root, tagname, sigil) {
if (__DEV__) {
if (!JX.DOM.isNode(root)) {
JX.$E(
'JX.DOM.find(, "'+tagname+'", "'+sigil+'"): '+
'first argument must be a DOM node.');
}
}
var result = JX.DOM.scry(root, tagname, sigil);
if (__DEV__) {
if (result.length > 1) {
JX.$E(
'JX.DOM.find(, "'+tagname+'", "'+sigil+'"): '+
'matched more than one node.');
}
}
if (!result.length) {
JX.$E(
'JX.DOM.find(, "' + tagname + '", "' + sigil + '"): ' +
'matched no nodes.');
}
return result[0];
},
/**
* Select a node uniquely identified by an anchor, tagname, and sigil. This
* is similar to JX.DOM.find() but walks up the DOM tree instead of down
* it.
*
* @param Node Node to look above.
* @param string Tag name, like 'a' or 'textarea'.
* @param string Optionally, sigil which selected node must have.
* @return Node Matching node.
*
* @task query
*/
findAbove : function(anchor, tagname, sigil) {
if (__DEV__) {
if (!JX.DOM.isNode(anchor)) {
JX.$E(
'JX.DOM.findAbove(, "' + tagname + '", "' + sigil + '"): ' +
'first argument must be a DOM node.');
}
}
var result = anchor.parentNode;
while (true) {
if (!result) {
break;
}
if (JX.DOM.isType(result, tagname)) {
if (!sigil || JX.Stratcom.hasSigil(result, sigil)) {
break;
}
}
result = result.parentNode;
}
if (!result) {
JX.$E(
'JX.DOM.findAbove(, "' + tagname + '", "' + sigil + '"): ' +
'no matching node.');
}
return result;
},
/**
* Focus a node safely. This is just a convenience wrapper that allows you
* to avoid IE's habit of throwing when nearly any focus operation is
* invoked.
*
* @task convenience
* @param Node Node to move cursor focus to, if possible.
* @return void
*/
focus : function(node) {
try { node.focus(); } catch (lol_ie) {}
},
/**
* Scroll to the position of an element in the document.
* @task view
* @param Node Node to move document scroll position to, if possible.
* @return void
*/
scrollTo : function(node) {
window.scrollTo(0, JX.$V(node).y);
},
_getAutoID : function(node) {
if (!node.getAttribute('data-autoid')) {
node.setAttribute('data-autoid', 'autoid_'+(++JX.DOM._autoid));
}
return node.getAttribute('data-autoid');
}
}
});
diff --git a/webroot/rsrc/js/core/ToolTip.js b/webroot/rsrc/js/core/ToolTip.js
index 399c937d63..4793a31c0e 100644
--- a/webroot/rsrc/js/core/ToolTip.js
+++ b/webroot/rsrc/js/core/ToolTip.js
@@ -1,82 +1,167 @@
/**
* @requires javelin-install
* javelin-util
* javelin-dom
* javelin-vector
* @provides phabricator-tooltip
* @javelin
*/
JX.install('Tooltip', {
statics : {
_node : null,
show : function(root, scale, align, content) {
if (__DEV__) {
switch (align) {
case 'N':
case 'E':
case 'S':
case 'W':
break;
default:
JX.$E(
"Only alignments 'N' (north), 'E' (east), 'S' (south), " +
"and 'W' (west) are supported."
);
break;
}
}
var node = JX.$N(
'div',
- { className: 'jx-tooltip-container jx-tooltip-align-' + align },
+ { className: 'jx-tooltip-container' },
[
JX.$N('div', { className: 'jx-tooltip' }, content),
JX.$N('div', { className: 'jx-tooltip-anchor' })
]);
node.style.maxWidth = scale + 'px';
JX.Tooltip.hide();
this._node = node;
// Append the tip to the document, but offscreen, so we can measure it.
node.style.left = '-10000px';
document.body.appendChild(node);
+ // Jump through some hoops trying to auto-position the tooltip
+ var pos = this._getSmartPosition(align, root, node);
+ pos.setPos(node);
+ },
+
+ _getSmartPosition: function (align, root, node) {
+ var pos = JX.Tooltip._proposePosition(align, root, node);
+
+ // If toolip is offscreen, try to be clever
+ if (!JX.Tooltip.isOnScreen(pos, node)) {
+ align = JX.Tooltip._getImprovedOrientation(pos, node);
+ pos = JX.Tooltip._proposePosition(align, root, node);
+ }
+
+ JX.Tooltip._setAnchor(align);
+ return pos;
+ },
+
+ _proposePosition: function (align, root, node) {
var p = JX.$V(root);
var d = JX.Vector.getDim(root);
var n = JX.Vector.getDim(node);
+ var l = 0;
+ var t = 0;
- // Move the tip so it's nicely aligned.
-
+ // Caculate the tip so it's nicely aligned.
switch (align) {
case 'N':
- node.style.left = parseInt(p.x - ((n.x - d.x) / 2), 10) + 'px';
- node.style.top = parseInt(p.y - n.y, 10) + 'px';
+ l = parseInt(p.x - ((n.x - d.x) / 2), 10);
+ t = parseInt(p.y - n.y, 10);
break;
case 'E':
- node.style.left = parseInt(p.x + d.x, 10) + 'px';
- node.style.top = parseInt(p.y - ((n.y - d.y) / 2), 10) + 'px';
+ l = parseInt(p.x + d.x, 10);
+ t = parseInt(p.y - ((n.y - d.y) / 2), 10);
break;
case 'S':
- node.style.left = parseInt(p.x - ((n.x - d.x) / 2), 10) + 'px';
- node.style.top = parseInt(p.y + d.y + 5, 10) + 'px';
+ l = parseInt(p.x - ((n.x - d.x) / 2), 10);
+ t = parseInt(p.y + d.y + 5, 10);
break;
case 'W':
- node.style.left = parseInt(p.x - n.x - 5, 10) + 'px';
- node.style.top = parseInt(p.y - ((n.y - d.y) / 2), 10) + 'px';
+ l = parseInt(p.x - n.x - 5, 10);
+ t = parseInt(p.y - ((n.y - d.y) / 2), 10);
break;
}
+
+ return new JX.Vector(l, t);
+ },
+
+ isOnScreen: function (a, node) {
+ var s = JX.Vector.getScroll();
+ var v = JX.Vector.getViewport();
+ var max_x = s.x + v.x;
+ var max_y = s.y + v.y;
+
+ var corners = this._getNodeCornerPositions(a, node);
+
+ // Check if any of the corners are offscreen
+ for (var i = 0; i < corners.length; i++) {
+ var corner = corners[i];
+ if (corner.x < s.x ||
+ corner.y < s.y ||
+ corner.x > max_x ||
+ corner.y > max_y) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ _getImprovedOrientation: function (a, node) {
+ // Try to predict the "more correct" orientation
+ var s = JX.Vector.getScroll();
+ var v = JX.Vector.getViewport();
+ var max_x = s.x + v.x;
+ var max_y = s.y + v.y;
+
+ var corners = this._getNodeCornerPositions(a, node);
+
+ for (var i = 0; i < corners.length; i++) {
+ var corner = corners[i];
+ if (corner.y < v.y) {
+ return 'S';
+ } else
+ if (corner.x < v.x) {
+ return 'E';
+ } else
+ if (corner.y > max_y) {
+ return 'N';
+ } else
+ if (corner.x > max_x) {
+ return 'W';
+ } else {
+ return 'N';
+ }
+ }
+ },
+
+ _getNodeCornerPositions: function(pos, node) {
+ // Get positions of all four corners of a node
+ var n = JX.Vector.getDim(node);
+ return [new JX.Vector(pos.x, pos.y),
+ new JX.Vector(pos.x + n.x, pos.y),
+ new JX.Vector(pos.x, pos.y + n.y),
+ new JX.Vector(pos.x + n.x, pos.y + n.y)];
+ },
+
+ _setAnchor: function (align) {
+ // Orient the little tail
+ JX.DOM.alterClass(this._node, 'jx-tooltip-align-' + align, true);
},
hide : function() {
if (this._node) {
JX.DOM.remove(this._node);
this._node = null;
}
}
}
});