Merge pull request #567 from adobe/jason-sanjose/rule-list-bugs

Fix for #532 and #537
adobe · Apr 5, 2012 · ed59359 · ed59359
2 parents a0579aa + f5eb2ac
commit ed59359
Showing 1 changed file with 37 additions and 6 deletions.
diff --git a/src/editor/CSSInlineEditor.js b/src/editor/CSSInlineEditor.js
@@ -50,7 +50,6 @@ define(function (require, exports, module) {
 
         // Container to hold all editors
         var self = this,
-            hostScroller = hostEditor._codeMirror.getScrollerElement(),
             $ruleItem,
             $location;
 
@@ -63,9 +62,9 @@ define(function (require, exports, module) {
 
         // Outer container for border-left and scrolling
         this.$relatedContainer = $(document.createElement("div")).addClass("relatedContainer");
-        // Position immediately to the left of the main editor's scrollbar.
-        var rightOffset = $(document.body).outerWidth() - ($(hostScroller).offset().left + $(hostScroller).get(0).clientWidth);
-        this.$relatedContainer.css("right", rightOffset + "px");
+        this._relatedContainerInserted = false;
+        this._relatedContainerInsertedHandler = this._relatedContainerInsertedHandler.bind(this);
+        this.$relatedContainer.on("DOMNodeInserted", this._relatedContainerInsertedHandler);
 
         // List "selection" highlight
         this.$selectedMarker = $(document.createElement("div")).appendTo(this.$relatedContainer).addClass("selection");
@@ -110,6 +109,10 @@ define(function (require, exports, module) {
         // Listen to the editor's scroll event to reposition the relatedContainer.
         $(this.hostEditor).on("scroll", this._updateRelatedContainer);
 
+        // Listen to the window resize event to reposition the relatedContainer
+        // when the hostEditor's scrollbars visibility changes
+        $(window).on("resize", this._updateRelatedContainer);
+
         // Listen for clicks directly on us, so we can set focus back to the editor
         this.$htmlContent.on("click", this._onClick);
 
@@ -195,6 +198,16 @@ define(function (require, exports, module) {
         $(this.hostEditor).off("change", this._updateRelatedContainer);
         $(this.editors[0]).off("change", this._updateRelatedContainer);
         $(this.hostEditor).off("scroll", this._updateRelatedContainer);
+        $(window).off("resize", this._updateRelatedContainer);
+    };
+
+    /**
+     * @private
+     * Set _relatedContainerInserted flag once the $relatedContainer is inserted in the DOM.
+     */
+    CSSInlineEditor.prototype._relatedContainerInsertedHandler = function () {
+        this.$relatedContainer.off("DOMNodeInserted", this._relatedContainerInsertedHandler);
+        this._relatedContainerInserted = true;
     };
 
     /**
@@ -230,14 +243,32 @@ define(function (require, exports, module) {
             rcTop = this.$relatedContainer.offset().top,
             rcHeight = this.$relatedContainer.outerHeight(),
             rcBottom = rcTop + rcHeight,
-            scrollerTop = $(hostScroller).offset().top,
-            scrollerBottom = scrollerTop + hostScroller.clientHeight;
+            scrollerOffset = $(hostScroller).offset(),
+            scrollerTop = scrollerOffset.top,
+            scrollerBottom = scrollerTop + hostScroller.clientHeight,
+            scrollerLeft = scrollerOffset.left,
+            rightOffset = $(document.body).outerWidth() - (scrollerLeft + hostScroller.clientWidth);
         if (rcTop < scrollerTop || rcBottom > scrollerBottom) {
             this.$relatedContainer.css("clip", "rect(" + Math.max(scrollerTop - rcTop, 0) + "px, auto, " +
                                        (rcHeight - Math.max(rcBottom - scrollerBottom, 0)) + "px, auto)");
         } else {
             this.$relatedContainer.css("clip", "");
         }
+
+        // Constrain relatedContainer width to half of the scroller width
+        var relatedContainerWidth = this.$relatedContainer.width();
+        if (this._relatedContainerInserted) {
+            if (this._relatedContainerDefaultWidth === undefined) {
+                this._relatedContainerDefaultWidth = relatedContainerWidth;
+            }
+
+            var halfWidth = Math.floor(hostScroller.clientWidth / 2);
+            relatedContainerWidth = Math.min(this._relatedContainerDefaultWidth, halfWidth);
+            this.$relatedContainer.width(relatedContainerWidth);
+        }
+
+        // Position immediately to the left of the main editor's scrollbar.
+        this.$relatedContainer.css("right", rightOffset + "px");
     };
 
     /**