Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bug 426672 - Content assist doesn't size itself wide enough and has n… 
…o horizontal scroll bars

--Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
  • Loading branch information
@elijahe
elijahe committed Jan 29, 2014
1 parent d24066d commit 7785a1c
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 5 deletions.
82 changes: 82 additions & 0 deletions bundles/org.eclipse.orion.client.editor/web/orion/editor/contentAssist.js
View file
Expand Up @@ -936,6 +936,9 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$
throw new Error("parentNode is required"); //$NON-NLS-0$
}
}

this.parentNode.addEventListener("scroll", this.onScroll.bind(this)); //$NON-NLS-0$

var self = this;
this.textViewListener = {
onMouseDown: function(event) {
Expand Down Expand Up @@ -965,6 +968,14 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$
this.textView.focus();
},
/** @private */
onScroll: function(e) {
if (this.previousCloneNode && !this.preserveCloneThroughScroll) {
this._removeCloneNode();
this.previousSelectedNode.classList.add(STYLES.selected);
}
this.preserveCloneThroughScroll = false;
},
/** @private */
createDiv: function(proposal, parent, itemIndex) {
var document = parent.ownerDocument;
var div = util.createElement(document, "div"); //$NON-NLS-0$
Expand Down Expand Up @@ -1097,6 +1108,10 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$

if (this.previousSelectedNode) {
this.previousSelectedNode.classList.remove(STYLES.selected);
this.previousSelectedNode = null;
if (this.previousCloneNode) {
this._removeCloneNode();
}
}

if (-1 !== nodeIndex) {
Expand All @@ -1106,8 +1121,62 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$
node.focus();
if (node.offsetTop < this.parentNode.scrollTop) {
node.scrollIntoView(true);
this.preserveCloneThroughScroll = true;
} else if ((node.offsetTop + node.offsetHeight) > (this.parentNode.scrollTop + this.parentNode.clientHeight)) {
node.scrollIntoView(false);
this.preserveCloneThroughScroll = true;
}

var textNode = node.firstChild || node;
var textBounds = lib.bounds(textNode);
var parentBounds = lib.bounds(this.parentNode);
var parentStyle = window.getComputedStyle(this.parentNode);
var nodeStyle = window.getComputedStyle(node);
var allPadding = parseInt(parentStyle.paddingLeft) + parseInt(parentStyle.paddingRight) + parseInt(nodeStyle.paddingLeft) + parseInt(nodeStyle.paddingRight);
if (textBounds.width >= (parentBounds.width - allPadding)) {
var parentTop = parseInt(parentStyle.top);

// create clone node
var clone = node.cloneNode(true); // deep clone
clone.classList.add("cloneProposal"); //$NON-NLS-0$
clone.style.top = parentTop + node.offsetTop - this.parentNode.scrollTop + "px"; //$NON-NLS-0$
clone.style.left = parentStyle.left;
clone.setAttribute("id", clone.id + "_clone"); //$NON-NLS-1$ //$NON-NLS-0$

// try to fit clone node on page horizontally
var viewportWidth = document.documentElement.clientWidth;
var horizontalOffset = (textBounds.left + textBounds.width) - parseInt(viewportWidth);
if (horizontalOffset > 0) {
var cloneLeft = parseInt(parentStyle.left) - horizontalOffset;
if (0 > cloneLeft) {
cloneLeft = 0;
}
clone.style.left = cloneLeft + "px";
}

// create wrapper parent node (to replicate css class hierarchy)
var parentClone = document.createElement("div");
parentClone.id = "clone_contentassist"; //$NON-NLS-0$
parentClone.classList.add("contentassist"); //$NON-NLS-0$
parentClone.classList.add("cloneWrapper"); //$NON-NLS-0$
parentClone.appendChild(clone);
parentClone.onclick = this.parentNode.onclick;
this.parentNode.parentNode.insertBefore(parentClone, this.parentNode);

// make all the cloned nodes clickable by setting their contentAssistProposalIndex
var recursiveSetIndex = function(cloneNode){
cloneNode.contentAssistProposalIndex = node.contentAssistProposalIndex;
if (cloneNode.hasChildNodes()) {
for (var i = 0 ; i < cloneNode.childNodes.length ; i++){
recursiveSetIndex(cloneNode.childNodes[i]);
}
}
};
recursiveSetIndex(parentClone);

node.classList.remove(STYLES.selected);

this.previousCloneNode = parentClone;
}
}

Expand Down Expand Up @@ -1147,6 +1216,13 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$
this.textView.removeEventListener("MouseDown", this.textViewListener.onMouseDown); //$NON-NLS-0$
this.textViewListenerAdded = false;
}

if (this.previousSelectedNode) {
this.previousSelectedNode = null;
if (this.previousCloneNode) {
this._removeCloneNode();
}
}
},
position: function() {
var contentAssist = this.contentAssist;
Expand Down Expand Up @@ -1180,6 +1256,12 @@ define("orion/editor/contentAssist", [ //$NON-NLS-0$
if (caretLocation.x + this.parentNode.offsetWidth > viewportWidth) {
this.parentNode.style.left = (viewportWidth - this.parentNode.offsetWidth) + "px"; //$NON-NLS-0$
}
},
_removeCloneNode: function(){
if (this.parentNode.parentNode.contains(this.previousCloneNode)) {
this.parentNode.parentNode.removeChild(this.previousCloneNode);
}
this.previousCloneNode = null;
}
};
return {
Expand Down
25 changes: 20 additions & 5 deletions bundles/org.eclipse.orion.client.editor/web/orion/editor/contentassist.css
View file
Expand Up @@ -77,19 +77,34 @@


.contentassist > div:hover {
background-color: #fab467;
background-color: #fab467; /* for browsers that don't support linear-gradient */
background: linear-gradient(#fabb76, #e1a25c);
border-radius: 3px;
}

.contentassist>div.proposal-hr:hover {
background-color: white;
background-color: white; /* for browsers that don't support linear-gradient */
background: none;
}

.contentassist .selected {
background-color: rgb(48, 135, 179);
color: white;
background-color: rgb(48, 135, 179); /* for browsers that don't support linear-gradient */
background: linear-gradient(rgb(60, 150, 190), rgb(30, 120, 160));
border-radius: 3px;
color: white;
}

.contentassist .cloneProposal {
box-shadow: rgba(0, 0, 0, 0.9) 2px 2px 8px;
position: fixed;
z-index: 1000; /* must be greater than .contentassist z-index */
}

.contentassist>div {
padding: 1px 3px 0 5px;
padding: 1px 3px 1px 5px;
}

.cloneWrapper {
display: block;
z-index: 1000; /* must be greater than .contentassist z-index */
}

0 comments on commit 7785a1c

Please sign in to comment.