From 415ce622c36341c0f7e72192e3b004ee67286bab Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Fri, 1 Feb 2013 10:05:45 +0000 Subject: [PATCH] New: Scrolling support for rtl language layout - When scrolling is enabled, the scrollbar can be placed on the right or the left of the scrolling container by the browser for rtl layout (of the current browsers, only Safari appears to place it on the right) - when placed on the left the padding adjustment that DataTables makes for the scrollbar area was added to the wrong side. - To cope with this, the browser compat method (moved to the compat file) will check for the position of the scrollbar and set a flag so the scroll draw can adjust the position as needed. --- media/src/core/core.compat.js | 32 ++++++++++++++++++++++++++++--- media/src/core/core.scrolling.js | 5 +++-- media/src/core/core.support.js | 25 ------------------------ media/src/model/model.settings.js | 11 ++++++++++- 4 files changed, 42 insertions(+), 31 deletions(-) diff --git a/media/src/core/core.compat.js b/media/src/core/core.compat.js index 15cc77ed..798d896f 100644 --- a/media/src/core/core.compat.js +++ b/media/src/core/core.compat.js @@ -37,8 +37,8 @@ function _fnHungarianMap ( o ) /** * Convert from camel case parameters to Hungarian, based on a Hungarian map * created by _fnHungarianMap. - * @param {object} src The model object which holds all parameters can has - * previously been run through `_fnHungarianMap`. + * @param {object} src The model object which holds all parameters that can be + * mapped. * @param {object} user The object to convert from camel case to Hungarian. * @param {boolean} force When set to `true`, properties which already have a * Hungarian value in the `user` object will be overwritten. Otherwise they @@ -49,7 +49,7 @@ function _fnCamelToHungarian ( src, user, force ) { if ( ! src._hungaianMap ) { - return; + _fnHungarianMap( src ); } var hungarianKey; @@ -98,3 +98,29 @@ function _fnLanguageCompat( oLanguage ) } } + +/** + * From some browsers (specifically IE6/7) we need special handling to work around browser + * bugs - this function is used to detect when these workarounds are needed. + * @param {object} oSettings dataTables settings object + * @memberof DataTable#oApi + */ +function _fnBrowserDetect( oSettings ) +{ + /* IE6/7 will oversize a width 100% element inside a scrolling element, to include the + * width of the scrollbar, while other browsers ensure the inner element is contained + * without forcing scrolling + */ + var n = $( + '
'+ + '
'+ + '
'+ + '
'+ + '
')[0]; + + document.body.appendChild( n ); + oSettings.oBrowser.bScrollOversize = $('#DT_BrowserTest', n)[0].offsetWidth === 100 ? true : false; + oSettings.oBrowser.bScrollbarLeft = $('#DT_BrowserTest', n).offset().left !== 1 ? true : false; + document.body.removeChild( n ); +} + diff --git a/media/src/core/core.scrolling.js b/media/src/core/core.scrolling.js index a5547b5c..56ad96c7 100644 --- a/media/src/core/core.scrolling.js +++ b/media/src/core/core.scrolling.js @@ -451,13 +451,14 @@ function _fnScrollDraw ( o ) // Figure out if there are scrollbar present - if so then we need a the header and footer to // provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar) var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll"; - nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; + var padding = o.oBrowser.bScrollbarLeft ? 'paddingLeft' : 'paddingRight'; + nScrollHeadInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; if ( o.nTFoot !== null ) { nScrollFootTable.style.width = _fnStringToCss( iOuterWidth ); nScrollFootInner.style.width = _fnStringToCss( iOuterWidth ); - nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; + nScrollFootInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; } /* Adjust the position of the header in case we loose the y-scrollbar */ diff --git a/media/src/core/core.support.js b/media/src/core/core.support.js index bf987ef9..74a8ba75 100644 --- a/media/src/core/core.support.js +++ b/media/src/core/core.support.js @@ -267,28 +267,3 @@ function _fnCallbackFire( oSettings, sStore, sTrigger, aArgs ) return aRet; } - -/** - * From some browsers (specifically IE6/7) we need special handling to work around browser - * bugs - this function is used to detect when these workarounds are needed. - * @param {object} oSettings dataTables settings object - * @memberof DataTable#oApi - */ -function _fnBrowserDetect( oSettings ) -{ - /* IE6/7 will oversize a width 100% element inside a scrolling element, to include the - * width of the scrollbar, while other browsers ensure the inner element is contained - * without forcing scrolling - */ - var n = $( - '
'+ - '
'+ - '
'+ - '
'+ - '
')[0]; - - document.body.appendChild( n ); - oSettings.oBrowser.bScrollOversize = $('#DT_BrowserTest', n)[0].offsetWidth === 100 ? true : false; - document.body.removeChild( n ); -} - diff --git a/media/src/model/model.settings.js b/media/src/model/model.settings.js index 00c420f7..6378c444 100644 --- a/media/src/model/model.settings.js +++ b/media/src/model/model.settings.js @@ -239,7 +239,16 @@ DataTable.models.oSettings = { * @type boolean * @default false */ - "bScrollOversize": false + "bScrollOversize": false, + + /** + * Determine if the vertical scrollbar is on the right or left of the + * scrolling container - needed for rtl language layout, although not + * all browsers move the scrollbar (Safari). + * @type boolean + * @default false + */ + "bScrollbarLeft": false }, /**