From 8f15329c5ceee91bd1c6aa6ead915b30f6b41a34 Mon Sep 17 00:00:00 2001 From: Jason San Jose Date: Wed, 4 Apr 2012 14:01:37 -0700 Subject: [PATCH 1/2] Fix for #532 and #537 Shrink rule list when host editor width shrinks. Update rule list position when scroll bars appear in the host editor. --- src/editor/CSSInlineEditor.js | 46 +++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/src/editor/CSSInlineEditor.js b/src/editor/CSSInlineEditor.js index 9074bfa7def..25fed22ca8a 100644 --- 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; @@ -62,9 +61,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"); @@ -108,6 +107,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); return (new $.Deferred()).resolve(); }; @@ -191,6 +194,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; }; /** @@ -209,13 +222,36 @@ define(function (require, exports, module) { rcHeight = this.$relatedContainer.outerHeight(), rcBottom = rcTop + rcHeight, scrollerTop = $(hostScroller).offset().top, - scrollerBottom = scrollerTop + hostScroller.clientHeight; + scrollerBottom = scrollerTop + hostScroller.clientHeight, + scrollerLeft = $(hostScroller).offset().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 = hostScroller.clientWidth / 2; + + if (this._relatedContainerDefaultWidth >= halfWidth) { + relatedContainerWidth = halfWidth; + } else { + relatedContainerWidth = this._relatedContainerDefaultWidth; + } + + this.$relatedContainer.width(Math.floor(relatedContainerWidth)); + } + + // Position immediately to the left of the main editor's scrollbar. + this.$relatedContainer.css("right", rightOffset + "px"); }; /** From f5eb2ac1467658a58e53da1d088e5ed2ccc3d242 Mon Sep 17 00:00:00 2001 From: Jason San Jose Date: Thu, 5 Apr 2012 14:19:32 -0700 Subject: [PATCH 2/2] Code review comments --- src/editor/CSSInlineEditor.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/editor/CSSInlineEditor.js b/src/editor/CSSInlineEditor.js index 201f96ba0f8..6f8417bf9a1 100644 --- a/src/editor/CSSInlineEditor.js +++ b/src/editor/CSSInlineEditor.js @@ -243,9 +243,10 @@ define(function (require, exports, module) { rcTop = this.$relatedContainer.offset().top, rcHeight = this.$relatedContainer.outerHeight(), rcBottom = rcTop + rcHeight, - scrollerTop = $(hostScroller).offset().top, + scrollerOffset = $(hostScroller).offset(), + scrollerTop = scrollerOffset.top, scrollerBottom = scrollerTop + hostScroller.clientHeight, - scrollerLeft = $(hostScroller).offset().left, + 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, " + @@ -261,15 +262,9 @@ define(function (require, exports, module) { this._relatedContainerDefaultWidth = relatedContainerWidth; } - var halfWidth = hostScroller.clientWidth / 2; - - if (this._relatedContainerDefaultWidth >= halfWidth) { - relatedContainerWidth = halfWidth; - } else { - relatedContainerWidth = this._relatedContainerDefaultWidth; - } - - this.$relatedContainer.width(Math.floor(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.