diff options
author | webchick <webchick@24967.no-reply.drupal.org> | 2011-08-22 03:52:10 +0100 |
---|---|---|
committer | webchick <webchick@24967.no-reply.drupal.org> | 2011-08-22 03:52:10 +0100 |
commit | cf9c0729fa3620669c99e5675192399f32824852 (patch) | |
tree | 7480150f37b58fc6dfd5cae84825853214c63374 /modules/overlay | |
parent | f6227eea35cbf12b0023c5b57f4a7341403f541e (diff) | |
download | brdo-cf9c0729fa3620669c99e5675192399f32824852.tar.gz brdo-cf9c0729fa3620669c99e5675192399f32824852.tar.bz2 |
Issue #766170 by aspilicious, casey, tsi, xjm: Fixed Overlay lacks rtl styling.
Diffstat (limited to 'modules/overlay')
-rw-r--r-- | modules/overlay/images/close-rtl.png | bin | 0 -> 368 bytes | |||
-rw-r--r-- | modules/overlay/overlay-child.css | 18 | ||||
-rw-r--r-- | modules/overlay/overlay-parent.js | 32 |
3 files changed, 40 insertions, 10 deletions
diff --git a/modules/overlay/images/close-rtl.png b/modules/overlay/images/close-rtl.png Binary files differnew file mode 100644 index 000000000..ae05d1114 --- /dev/null +++ b/modules/overlay/images/close-rtl.png diff --git a/modules/overlay/overlay-child.css b/modules/overlay/overlay-child.css index a832fc8c2..d31952e59 100644 --- a/modules/overlay/overlay-child.css +++ b/modules/overlay/overlay-child.css @@ -17,7 +17,7 @@ html.js body { min-width: 700px; position: relative; padding: .2em; - padding-right: 26px; + padding-right: 26px; /* LTR */ width: 88%; } #overlay-titlebar { @@ -39,7 +39,7 @@ html.js body { } #overlay-title { color: #fff; - float: left; + float: left; /* LTR */ font-size: 20px; margin: 0; padding: 0.3em 0; @@ -58,14 +58,14 @@ html.js body { #overlay-close-wrapper { position: absolute; - right: 0; + right: 0; /* LTR */ } #overlay-close, #overlay-close:hover { - background: transparent url(images/close.png) no-repeat; - -moz-border-radius-topleft: 0; - -webkit-border-top-left-radius: 0; - border-top-left-radius: 0; + background: transparent url(images/close.png) no-repeat; /* LTR */ + -moz-border-radius-topleft: 0; /* LTR */ + -webkit-border-top-left-radius: 0; /* LTR */ + border-top-left-radius: 0; /* LTR */ display: block; height: 26px; margin: 0; @@ -82,13 +82,13 @@ html.js body { line-height: 27px; margin: -28px 0 0 0; position: absolute; - right: 20px; + right: 20px; /* LTR */ text-transform: uppercase; } #overlay-tabs li { display: inline; list-style: none; - margin: 0 0 0 -3px; + margin: 0 0 0 -3px; /* LTR */ padding: 0; } #overlay-tabs li a, diff --git a/modules/overlay/overlay-parent.js b/modules/overlay/overlay-parent.js index 8010d01b2..f9789f14a 100644 --- a/modules/overlay/overlay-parent.js +++ b/modules/overlay/overlay-parent.js @@ -431,6 +431,27 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) { // IE6 doesn't support maxWidth, use width instead. var maxWidthName = (typeof document.body.style.maxWidth == 'string') ? 'maxWidth' : 'width'; + if (Drupal.overlay.leftSidedScrollbarOffset === undefined && $(document.documentElement).attr('dir') === 'rtl') { + // We can't use element.clientLeft to detect whether scrollbars are placed + // on the left side of the element when direction is set to "rtl" as most + // browsers dont't support it correctly. + // http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html + // There seems to be absolutely no way to detect whether the scrollbar + // is on the left side in Opera; always expect scrollbar to be on the left. + if ($.browser.opera) { + Drupal.overlay.leftSidedScrollbarOffset = document.documentElement.clientWidth - this.iframeWindow.document.documentElement.clientWidth + this.iframeWindow.document.documentElement.clientLeft; + } + else if (this.iframeWindow.document.documentElement.clientLeft) { + Drupal.overlay.leftSidedScrollbarOffset = this.iframeWindow.document.documentElement.clientLeft; + } + else { + var el1 = $('<div style="direction: rtl; overflow: scroll;"></div>').appendTo(document.body); + var el2 = $('<div></div>').appendTo(el1); + Drupal.overlay.leftSidedScrollbarOffset = parseInt(el2[0].offsetLeft - el1[0].offsetLeft); + el1.remove(); + } + } + // Consider any element that should be visible above the overlay (such as // a toolbar). $('.overlay-displace-top, .overlay-displace-bottom').each(function () { @@ -441,6 +462,10 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) { maxWidth -= 1; } + if (Drupal.overlay.leftSidedScrollbarOffset) { + $(this).css('left', Drupal.overlay.leftSidedScrollbarOffset); + } + // Prevent displaced elements overlapping window's scrollbar. var currentMaxWidth = parseInt($(this).css(maxWidthName)); if ((data.drupalOverlay && data.drupalOverlay.maxWidth) || isNaN(currentMaxWidth) || currentMaxWidth > maxWidth || currentMaxWidth <= 0) { @@ -453,7 +478,12 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) { var offset = $(this).offset(); var offsetRight = offset.left + $(this).outerWidth(); if ((data.drupalOverlay && data.drupalOverlay.clip) || offsetRight > maxWidth) { - $(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)'); + if (Drupal.overlay.leftSidedScrollbarOffset) { + $(this).css('clip', 'rect(auto, auto, ' + (documentHeight - offset.top) + 'px, ' + (Drupal.overlay.leftSidedScrollbarOffset + 2) + 'px)'); + } + else { + $(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)'); + } (data.drupalOverlay = data.drupalOverlay || {}).clip = true; } }); |