datatable-scroll-debug.js revision 9f61355243edf6ed98ab0e2994fb132ffd47dd66
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith// TODO: split this into a plugin and a class extension to add the ATTRS (ala
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith// Plugin.addHostAttr()
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithAdds the ability to make the table rows scrollable while preserving the header
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithThere are two types of scrolling, horizontal (x) and vertical (y). Horizontal
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smithscrolling is achieved by wrapping the entire table in a scrollable container.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithVertical scrolling is achieved by splitting the table headers and data into two
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smithseparate tables, the latter of which is wrapped in a vertically scrolling
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smithcontainer. In this case, column widths of header cells and data cells are kept
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smithin sync programmatically.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithSince the split table synchronization can be costly at runtime, the split is only done if the data in the table stretches beyond the configured `height` value.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithTo activate or deactivate scrolling, set the `scrollable` attribute to one of
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smiththe following values:
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * `false` - (default) Scrolling is disabled.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * `true` or 'xy' - If `height` is set, vertical scrolling will be activated, if
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `width` is set, horizontal scrolling will be activated.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * 'x' - Activate horizontal scrolling only. Requires the `width` attribute is
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * 'y' - Activate vertical scrolling only. Requires the `height` attribute is
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @module @datatable-scroll
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @class DataTable.Scrollable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @for DataTable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke SmithY.DataTable.Scrollable = Scrollable = function () {};
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Activates or deactivates scrolling in the table. Acceptable values are:
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * `false` - (default) Scrolling is disabled.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * `true` or 'xy' - If `height` is set, vertical scrolling will be activated, if
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `width` is set, horizontal scrolling will be activated.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * 'x' - Activate horizontal scrolling only. Requires the `width` attribute is
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith * 'y' - Activate vertical scrolling only. Requires the `height` attribute is
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @attribute scrollable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @type {String|Boolean}
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @value false
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Template for the `<table>` that is used to fix the caption in place when
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith the table is horizontally scrolling.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @property X_SCROLL_CAPTION_TABLE_TEMPLATE
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @type {HTML}
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @value '<table class="{className}"></table>'
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith X_SCROLL_CAPTION_TABLE_TEMPLATE: '<table class="{className}"></table>',
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Template for the `<div>` that is used to contain the table when the table is
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith horizontally scrolling.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @property X_SCROLLER_TEMPLATE
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @type {HTML}
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @value '<div class="{className}"></div>'
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith X_SCROLLER_TEMPLATE: '<div class="{className}"></div>',
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Template for the `<div>` that is used to contain the rows when the table is
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith vertically scrolling.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @property Y_SCROLLER_TEMPLATE
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @type {HTML}
d56b1611c63d6a01384b52aac3d617c681679173Luke Smith @value '<div class="{className}"><table class="{tableClassName}"></table></div>'
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Y_SCROLLER_TEMPLATE: '<div class="{className}"><table class="{tableClassName}"></table></div>',
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Scrolls a given row or cell into view if the table is scrolling. Pass the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `clientId` of a Model from the DataTable's `data` ModelList or its row
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith index to scroll to a row or a [row index, column index] array to scroll to
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith a cell. Alternately, to scroll to any element contained within the table's
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith scrolling areas, pass its ID, or the Node itself (though you could just as
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith well call `node.scrollIntoView()` yourself, but hey, whatever).
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method scrollTo
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {String|Number|Number[]|Node} id A row clientId, row index, cell
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith coordinate array, id string, or Node
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith if (id && this._tbodyNode && (this._yScrollNode || this._xScrollNode)) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // TODO: ancestor(yScrollNode, xScrollNode)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith id.ancestor('.yui3-datatable') === this.get('boundingBox')) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith //----------------------------------------------------------------------------
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Protected properties and methods
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith //----------------------------------------------------------------------------
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Relays changes in the table structure or content to trigger a reflow of the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith scrolling setup.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _afterContentChange
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {EventFacade} e The relevant change event (ignored)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Reacts to changes in the `scrollable` attribute by updating the `_xScroll`
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith and `_yScroll` properties and syncing the scrolling structure accordingly.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _afterScrollableChange
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {EventFacade} e The relevant change event (ignored)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Syncs the scrolling structure if the table is configured to scroll vertically.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _afterScrollHeightChange
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {EventFacade} e The relevant change event (ignored)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Attaches internal subscriptions to keep the scrolling structure up to date
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith with changes in the table's `data`, `columns`, `caption`, or `height`. The
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `width` is taken care of already.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith This executes after the table's native `bindUI` method.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _bindScrollUI
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith _bindScrollUI: function () {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith 'dataChange',
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith 'columnsChange',
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith 'captionChange',
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith 'heightChange'],
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Calculates the height of the div containing the vertically scrolling rows.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith The height is produced by subtracting the `offsetHeight` of the scrolling
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `<div>` from the `clientHeight` of the `contentBox`.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _calcScrollHeight
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith return this.get('contentBox').get('clientHeight') -
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // To account for padding and borders of the scroll div
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Populates the `_xScrollNode` property by creating the `<div>` Node described
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith by the `X_SCROLLER_TEMPLATE`.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @method _createXScrollNode
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Populates the `_yScrollNode` property by creating the `<div>` Node described
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith by the `Y_SCROLLER_TEMPLATE`.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _createYScrollNode
d56b1611c63d6a01384b52aac3d617c681679173Luke Smith tableClassName: this.getClassName('y', 'scroll', 'table')
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Assigns style widths to all columns based on their current `offsetWidth`s.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith This faciliates creating a clone of the `<colgroup>` so column widths are
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith the same after the table is split in to header and data tables.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _fixColumnWidths
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // The thead and tbody need to be in the same table to accurately
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // calculate column widths.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // FIXME? This may be fragile if the table has a fixed width and
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // increasing the size of the last column would push the overall
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // width beyond the configured width.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // bump up the width of the last column to account for the scrollbar.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Avoid assignment without scrollbar adjustment
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Two passes so assigned widths don't cause subsequent width changes
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // which would cost reflows.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Sets up event handlers and AOP advice methods to bind the DataTable's natural
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith behaviors with the scrolling APIs and state.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method initializer
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {Object} config The config object passed to the constructor (ignored)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith initializer: function () {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this.after(['scrollableChange', 'heightChange', 'widthChange'],
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Merges the caption and content tables back into one table if they are split.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @method _mergeXScrollContent
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith this.get('boundingBox').removeClass(this.getClassName('scrollable', 'x'));
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith captionTable = this._captionNode && this._captionNode.ancestor(
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith scrollNode.replace(scrollNode.get('childNodes').toFrag());
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Merges the header and data tables back into one table if they are split.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _mergeYScrollContent
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith this.get('boundingBox').removeClass(this.getClassName('scrollable', 'y'));
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Removes the additional padding added to the last cells in each header row to
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith allow the scrollbar to fit below.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _removeHeaderScrollPadding
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith var rows = this._theadNode.all('> tr').getDOMNodes(),
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // The last cell in all rows of the table headers
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith for (i = 0, len = rows.length; i < len; i += (cell.rowSpan || 1)) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith cell = Y.one(rows[i].cells[rows[i].cells.length - 1])
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Moves the ARIA "grid" role from the table to the `contentBox` and adds the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith "presentation" role to both header and data tables to support the two
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith tables reporting as one table for screen readers.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _setARIARoles
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith _setARIARoles: function () {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this._tableNode.setAttribute('role', 'presentation');
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this._yScrollNode.one('> table').setAttribute('role', 'presentation');
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Adds additional padding to the current amount of right padding on each row's
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith last cell to account for the width of the scrollbar below.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _setHeaderScrollPadding
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith var rows = this._theadNode.all('> tr').getDOMNodes(),
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith cell = Y.one(rows[0].cells[rows[0].cells.length - 1]);
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith parseInt(cell.getComputedStyle('paddingRight'), 10)) + 'px';
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // The last cell in all rows of the table headers
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith for (i = 0, len = rows.length; i < len; i += (cell.rowSpan || 1)) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith cell = Y.one(rows[i].cells[rows[i].cells.length - 1])
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Accepts (case insensitive) values "x", "y", "xy", `true`, and `false`.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith `true` is translated to "xy" and upper case values are converted to lower
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith case. All other values are invalid.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _setScrollable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {String|Boolea} val Incoming value for the `scrollable` attribute
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @return {String}
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith if (val === true) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith return (val === false || val === 'y' || val === 'x' || val === 'xy') ?
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Assigns the `_xScroll` and `_yScroll` properties to true if an
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith appropriate value is set in the `scrollable` attribute and the `height`
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith and/or `width` is set.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _setScrollProperties
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this._xScroll = width && scrollable.indexOf('x') > -1;
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this._yScroll = height && scrollable.indexOf('y') > -1;
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Clones the fixed (see `_fixColumnWidths` method) `<colgroup>` for use by the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith table in the vertical scrolling container. The last column's width is reduced
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith by the width of the scrollbar (which is offset by additional padding on the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith last header cell(s) in the header table - see `_setHeaderScrollPadding`).
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _setYScrollColWidths
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // hack to account for right border
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Browsers with proper support for column widths need the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // scrollbar width subtracted from the last column.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Subtract the scrollbar width added to the last col
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith table.insertBefore(colgroup, table.one('> thead, > tfoot, > tbody'));
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Splits the data table from its caption if it has one and wraps the table in
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith a horizontally scrollable container `<div>`.
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith @method _splitXScrollContent
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith // TODO: Please someone give this a shorter name!
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Y.Lang.sub(this.X_SCROLL_CAPTION_TABLE_TEMPLATE, {
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith captionTable.setStyle('width', this.get('width'));
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith this.get('contentBox').insertBefore(captionTable, this._xScrollNode);
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Splits the unified table with headers and data into two tables, the latter
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith contained within a vertically scrollable container `<div>`.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _splitYScrollContent
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith this.get('boundingBox').addClass(this.getClassName('scrollable','y'));
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // I don't want to take into account the added paddingRight done in
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // _setHeaderScrollPadding for the data cells that will be
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // scrolling below
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // lock the header table width in case the removal of the tbody would
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // allow the table to shrink (such as when the tbody data causes a
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // browser horizontal scrollbar).
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith width = parseInt(table.getComputedStyle('width'), 10);
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // FIXME: Lazy hack to account for scroll node borders
d56b1611c63d6a01384b52aac3d617c681679173Luke Smith scrollTable.setStyle('width', scrollNode.get('clientWidth') + 'px');
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith Splits or merges the table for X and Y scrolling depending on the current
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith widget state. If the table needs to be split, but is already, does nothing.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _syncScrollUI
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith _syncScrollUI: function () {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Only split the table if the content is longer than the height
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith if (table.get('scrollHeight') > node.get('clientHeight')) {
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith // Only split the table if the content is longer than the height
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith if (table.get('scrollWidth') > node.get('clientWidth')) {
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // TODO: fix X scroll. I'll need to split tables here as well for the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // caption if there is one present, so the horizontal scroll happens
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // under the stationary caption.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Also, similarly, only activate the x scrolling if the table is wider
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // than the configured width.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Overrides the default Widget `_uiSetWidth` to assign the width to either
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith the table or the `contentBox` (for horizontal scrolling) in addition to the
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith native behavior of setting the width of the `boundingBox`.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _uiSetWidth
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @param {String|Number} width CSS width value or number of pixels
9f61355243edf6ed98ab0e2994fb132ffd47dd66Luke Smith var scrollable = this._xScrollNode || this._yScrollNode;
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith this._tableNode.setStyle('width', scrollable ? '' : width);
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Assigns the appropriate class to the `boundingBox` to identify the DataTable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith as horizontally scrolling, vertically scrolling, or both (adds both classes).
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Classes added are "yui3-datatable-scrollable-x" or "...-y"
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @method _uiSetScrollable
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // Initially add classes. These may be purged by _syncScrollUI.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith .toggleClass(this.getClassName('scrollable','x'), this._xScroll)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith .toggleClass(this.getClassName('scrollable','y'), this._yScroll);
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Indicates horizontal table scrolling is enabled.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @property _xScroll
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @type {Boolean}
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @default undefined (not initially set)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Indicates vertical table scrolling is enabled.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @property _yScroll
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @type {Boolean}
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @default undefined (not initially set)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith Overflow Node used to contain the data rows in a vertically scrolling table.
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @property _yScrollNode
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @type {Node}
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith @default undefined (not initially set)
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith //_yScrollNode
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith // TODO: Add _xScrollNode
820d7f2eab2a78412c9803335bb10a2974e7fbf5Luke Smith}, '@VERSION@' ,{skinnable:true, requires:['datatable-base', 'dom-screen']});