From: Thierry Parmentelat <thierry.parmentelat@inria.fr> Date: Fri, 6 Dec 2013 14:28:40 +0000 (+0100) Subject: dos2unix’ed X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=5327c6744c2724a803013258eeae4d920ba8590f;p=myslice.git dos2unix’ed --- diff --git a/third-party/slickgrid-2.1/slick.grid.js b/third-party/slickgrid-2.1/slick.grid.js index 6fdbdba4..d9deb767 100644 --- a/third-party/slickgrid-2.1/slick.grid.js +++ b/third-party/slickgrid-2.1/slick.grid.js @@ -1,3309 +1,3309 @@ -/** - * @license - * (c) 2009-2012 Michael Leibman - * michael{dot}leibman{at}gmail{dot}com - * http://github.com/mleibman/slickgrid - * - * Distributed under MIT license. - * All rights reserved. - * - * SlickGrid v2.1 - * - * NOTES: - * Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods. - * This increases the speed dramatically, but can only be done safely because there are no event handlers - * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() - * and do proper cleanup. - */ - -// make sure required JavaScript modules are loaded -if (typeof jQuery === "undefined") { - throw "SlickGrid requires jquery module to be loaded"; -} -if (!jQuery.fn.drag) { - throw "SlickGrid requires jquery.event.drag module to be loaded"; -} -if (typeof Slick === "undefined") { - throw "slick.core.js not loaded"; -} - - -(function ($) { - // Slick.Grid - $.extend(true, window, { - Slick: { - Grid: SlickGrid - } - }); - - // shared across all grids on the page - var scrollbarDimensions; - var maxSupportedCssHeight; // browser's breaking point - - ////////////////////////////////////////////////////////////////////////////////////////////// - // SlickGrid class implementation (available as Slick.Grid) - - /** - * Creates a new instance of the grid. - * @class SlickGrid - * @constructor - * @param {Node} container Container node to create the grid in. - * @param {Array,Object} data An array of objects for databinding. - * @param {Array} columns An array of column definitions. - * @param {Object} options Grid options. - **/ - function SlickGrid(container, data, columns, options) { - // settings - var defaults = { - explicitInitialization: false, - rowHeight: 25, - defaultColumnWidth: 80, - enableAddRow: false, - leaveSpaceForNewRows: false, - editable: false, - autoEdit: true, - enableCellNavigation: true, - enableColumnReorder: true, - asyncEditorLoading: false, - asyncEditorLoadDelay: 100, - forceFitColumns: false, - enableAsyncPostRender: false, - asyncPostRenderDelay: 50, - autoHeight: false, - editorLock: Slick.GlobalEditorLock, - showHeaderRow: false, - headerRowHeight: 25, - showTopPanel: false, - topPanelHeight: 25, - formatterFactory: null, - editorFactory: null, - cellFlashingCssClass: "flashing", - selectedCellCssClass: "selected", - multiSelect: true, - enableTextSelectionOnCells: false, - dataItemColumnValueExtractor: null, - fullWidthRows: false, - multiColumnSort: false, - defaultFormatter: defaultFormatter, - forceSyncScrolling: false - }; - - var columnDefaults = { - name: "", - resizable: true, - sortable: false, - minWidth: 30, - rerenderOnResize: false, - headerCssClass: null, - defaultSortAsc: true, - focusable: true, - selectable: true - }; - - // scroller - var th; // virtual height - var h; // real scrollable height - var ph; // page height - var n; // number of pages - var cj; // "jumpiness" coefficient - - var page = 0; // current page - var offset = 0; // current page offset - var vScrollDir = 1; - - // private - var initialized = false; - var $container; - var uid = "slickgrid_" + Math.round(1000000 * Math.random()); - var self = this; - var $focusSink, $focusSink2; - var $headerScroller; - var $headers; - var $headerRow, $headerRowScroller, $headerRowSpacer; - var $topPanelScroller; - var $topPanel; - var $viewport; - var $canvas; - var $style; - var $boundAncestors; - var stylesheet, columnCssRulesL, columnCssRulesR; - var viewportH, viewportW; - var canvasWidth; - var viewportHasHScroll, viewportHasVScroll; - var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding - cellWidthDiff = 0, cellHeightDiff = 0; - var absoluteColumnMinWidth; - var numberOfRows = 0; - - var tabbingDirection = 1; - var activePosX; - var activeRow, activeCell; - var activeCellNode = null; - var currentEditor = null; - var serializedEditorValue; - var editController; - - var rowsCache = {}; - var renderedRows = 0; - var numVisibleRows; - var prevScrollTop = 0; - var scrollTop = 0; - var lastRenderedScrollTop = 0; - var lastRenderedScrollLeft = 0; - var prevScrollLeft = 0; - var scrollLeft = 0; - - var selectionModel; - var selectedRows = []; - - var plugins = []; - var cellCssClasses = {}; - - var columnsById = {}; - var sortColumns = []; - var columnPosLeft = []; - var columnPosRight = []; - - - // async call handles - var h_editorLoader = null; - var h_render = null; - var h_postrender = null; - var postProcessedRows = {}; - var postProcessToRow = null; - var postProcessFromRow = null; - - // perf counters - var counter_rows_rendered = 0; - var counter_rows_removed = 0; - - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Initialization - - function init() { - $container = $(container); - if ($container.length < 1) { - throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM."); - } - - // calculate these only once and share between grid instances - maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight(); - scrollbarDimensions = scrollbarDimensions || measureScrollbar(); - - options = $.extend({}, defaults, options); - validateAndEnforceOptions(); - columnDefaults.width = options.defaultColumnWidth; - - columnsById = {}; - for (var i = 0; i < columns.length; i++) { - var m = columns[i] = $.extend({}, columnDefaults, columns[i]); - columnsById[m.id] = i; - if (m.minWidth && m.width < m.minWidth) { - m.width = m.minWidth; - } - if (m.maxWidth && m.width > m.maxWidth) { - m.width = m.maxWidth; - } - } - - // validate loaded JavaScript modules against requested options - if (options.enableColumnReorder && !$.fn.sortable) { - throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded"); - } - - editController = { - "commitCurrentEdit": commitCurrentEdit, - "cancelCurrentEdit": cancelCurrentEdit - }; - - $container - .empty() - .css("overflow", "hidden") - .css("outline", 0) - .addClass(uid) - .addClass("ui-widget"); - - // set up a positioning container if needed - if (!/relative|absolute|fixed/.test($container.css("position"))) { - $container.css("position", "relative"); - } - - $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container); - - $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); - $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller); - $headers.width(getHeadersWidth()); - - $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); - $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller); - $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>") - .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") - .appendTo($headerRowScroller); - - $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); - $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller); - - if (!options.showTopPanel) { - $topPanelScroller.hide(); - } - - if (!options.showHeaderRow) { - $headerRowScroller.hide(); - } - - $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container); - $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); - - $canvas = $("<div class='grid-canvas' />").appendTo($viewport); - - $focusSink2 = $focusSink.clone().appendTo($container); - - if (!options.explicitInitialization) { - finishInitialization(); - } - } - - function finishInitialization() { - if (!initialized) { - initialized = true; - - viewportW = parseFloat($.css($container[0], "width", true)); - - // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?) - // calculate the diff so we can set consistent sizes - measureCellPaddingAndBorder(); - - // for usability reasons, all text selection in SlickGrid is disabled - // with the exception of input and textarea elements (selection must - // be enabled there so that editors work as expected); note that - // selection in grid cells (grid body) is already unavailable in - // all browsers except IE - disableSelection($headers); // disable all text selection in header (including input and textarea) - - if (!options.enableTextSelectionOnCells) { - // disable text selection in grid cells except in input and textarea elements - // (this is IE-specific, because selectstart event will only fire in IE) - $viewport.bind("selectstart.ui", function (event) { - return $(event.target).is("input,textarea"); - }); - } - - updateColumnCaches(); - createColumnHeaders(); - setupColumnSort(); - createCssRules(); - resizeCanvas(); - bindAncestorScrollEvents(); - - $container - .bind("resize.slickgrid", resizeCanvas); - $viewport - .bind("scroll", handleScroll); - $headerScroller - .bind("contextmenu", handleHeaderContextMenu) - .bind("click", handleHeaderClick) - .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter) - .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave); - $headerRowScroller - .bind("scroll", handleHeaderRowScroll); - $focusSink.add($focusSink2) - .bind("keydown", handleKeyDown); - $canvas - .bind("keydown", handleKeyDown) - .bind("click", handleClick) - .bind("dblclick", handleDblClick) - .bind("contextmenu", handleContextMenu) - .bind("draginit", handleDragInit) - .bind("dragstart", {distance: 3}, handleDragStart) - .bind("drag", handleDrag) - .bind("dragend", handleDragEnd) - .delegate(".slick-cell", "mouseenter", handleMouseEnter) - .delegate(".slick-cell", "mouseleave", handleMouseLeave); - } - } - - function registerPlugin(plugin) { - plugins.unshift(plugin); - plugin.init(self); - } - - function unregisterPlugin(plugin) { - for (var i = plugins.length; i >= 0; i--) { - if (plugins[i] === plugin) { - if (plugins[i].destroy) { - plugins[i].destroy(); - } - plugins.splice(i, 1); - break; - } - } - } - - function setSelectionModel(model) { - if (selectionModel) { - selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged); - if (selectionModel.destroy) { - selectionModel.destroy(); - } - } - - selectionModel = model; - if (selectionModel) { - selectionModel.init(self); - selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged); - } - } - - function getSelectionModel() { - return selectionModel; - } - - function getCanvasNode() { - return $canvas[0]; - } - - function measureScrollbar() { - var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body"); - var dim = { - width: $c.width() - $c[0].clientWidth, - height: $c.height() - $c[0].clientHeight - }; - $c.remove(); - return dim; - } - - function getHeadersWidth() { - var headersWidth = 0; - for (var i = 0, ii = columns.length; i < ii; i++) { - var width = columns[i].width; - headersWidth += width; - } - headersWidth += scrollbarDimensions.width; - return Math.max(headersWidth, viewportW) + 1000; - } - - function getCanvasWidth() { - var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW; - var rowWidth = 0; - var i = columns.length; - while (i--) { - rowWidth += columns[i].width; - } - return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth; - } - - function updateCanvasWidth(forceColumnWidthsUpdate) { - var oldCanvasWidth = canvasWidth; - canvasWidth = getCanvasWidth(); - - if (canvasWidth != oldCanvasWidth) { - $canvas.width(canvasWidth); - $headerRow.width(canvasWidth); - $headers.width(getHeadersWidth()); - viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width); - } - - $headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); - - if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) { - applyColumnWidths(); - } - } - - function disableSelection($target) { - if ($target && $target.jquery) { - $target - .attr("unselectable", "on") - .css("MozUserSelect", "none") - .bind("selectstart.ui", function () { - return false; - }); // from jquery:ui.core.js 1.7.2 - } - } - - function getMaxSupportedCssHeight() { - var supportedHeight = 1000000; - // FF reports the height back but still renders blank after ~6M px - var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000; - var div = $("<div style='display:none' />").appendTo(document.body); - - while (true) { - var test = supportedHeight * 2; - div.css("height", test); - if (test > testUpTo || div.height() !== test) { - break; - } else { - supportedHeight = test; - } - } - - div.remove(); - return supportedHeight; - } - - // TODO: this is static. need to handle page mutation. - function bindAncestorScrollEvents() { - var elem = $canvas[0]; - while ((elem = elem.parentNode) != document.body && elem != null) { - // bind to scroll containers only - if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) { - var $elem = $(elem); - if (!$boundAncestors) { - $boundAncestors = $elem; - } else { - $boundAncestors = $boundAncestors.add($elem); - } - $elem.bind("scroll." + uid, handleActiveCellPositionChange); - } - } - } - - function unbindAncestorScrollEvents() { - if (!$boundAncestors) { - return; - } - $boundAncestors.unbind("scroll." + uid); - $boundAncestors = null; - } - - function updateColumnHeader(columnId, title, toolTip) { - if (!initialized) { return; } - var idx = getColumnIndex(columnId); - if (idx == null) { - return; - } - - var columnDef = columns[idx]; - var $header = $headers.children().eq(idx); - if ($header) { - if (title !== undefined) { - columns[idx].name = title; - } - if (toolTip !== undefined) { - columns[idx].toolTip = toolTip; - } - - trigger(self.onBeforeHeaderCellDestroy, { - "node": $header[0], - "column": columnDef - }); - - $header - .attr("title", toolTip || "") - .children().eq(0).html(title); - - trigger(self.onHeaderCellRendered, { - "node": $header[0], - "column": columnDef - }); - } - } - - function getHeaderRow() { - return $headerRow[0]; - } - - function getHeaderRowColumn(columnId) { - var idx = getColumnIndex(columnId); - var $header = $headerRow.children().eq(idx); - return $header && $header[0]; - } - - function createColumnHeaders() { - function onMouseEnter() { - $(this).addClass("ui-state-hover"); - } - - function onMouseLeave() { - $(this).removeClass("ui-state-hover"); - } - - $headers.find(".slick-header-column") - .each(function() { - var columnDef = $(this).data("column"); - if (columnDef) { - trigger(self.onBeforeHeaderCellDestroy, { - "node": this, - "column": columnDef - }); - } - }); - $headers.empty(); - $headers.width(getHeadersWidth()); - - $headerRow.find(".slick-headerrow-column") - .each(function() { - var columnDef = $(this).data("column"); - if (columnDef) { - trigger(self.onBeforeHeaderRowCellDestroy, { - "node": this, - "column": columnDef - }); - } - }); - $headerRow.empty(); - - for (var i = 0; i < columns.length; i++) { - var m = columns[i]; - - var header = $("<div class='ui-state-default slick-header-column' />") - .html("<span class='slick-column-name'>" + m.name + "</span>") - .width(m.width - headerColumnWidthDiff) - .attr("id", "" + uid + m.id) - .attr("title", m.toolTip || "") - .data("column", m) - .addClass(m.headerCssClass || "") - .appendTo($headers); - - if (options.enableColumnReorder || m.sortable) { - header - .on('mouseenter', onMouseEnter) - .on('mouseleave', onMouseLeave); - } - - if (m.sortable) { - header.addClass("slick-header-sortable"); - header.append("<span class='slick-sort-indicator' />"); - } - - trigger(self.onHeaderCellRendered, { - "node": header[0], - "column": m - }); - - if (options.showHeaderRow) { - var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>") - .data("column", m) - .appendTo($headerRow); - - trigger(self.onHeaderRowCellRendered, { - "node": headerRowCell[0], - "column": m - }); - } - } - - setSortColumns(sortColumns); - setupColumnResize(); - if (options.enableColumnReorder) { - setupColumnReorder(); - } - } - - function setupColumnSort() { - $headers.click(function (e) { - // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328) - e.metaKey = e.metaKey || e.ctrlKey; - - if ($(e.target).hasClass("slick-resizable-handle")) { - return; - } - - var $col = $(e.target).closest(".slick-header-column"); - if (!$col.length) { - return; - } - - var column = $col.data("column"); - if (column.sortable) { - if (!getEditorLock().commitCurrentEdit()) { - return; - } - - var sortOpts = null; - var i = 0; - for (; i < sortColumns.length; i++) { - if (sortColumns[i].columnId == column.id) { - sortOpts = sortColumns[i]; - sortOpts.sortAsc = !sortOpts.sortAsc; - break; - } - } - - if (e.metaKey && options.multiColumnSort) { - if (sortOpts) { - sortColumns.splice(i, 1); - } - } - else { - if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) { - sortColumns = []; - } - - if (!sortOpts) { - sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc }; - sortColumns.push(sortOpts); - } else if (sortColumns.length == 0) { - sortColumns.push(sortOpts); - } - } - - setSortColumns(sortColumns); - - if (!options.multiColumnSort) { - trigger(self.onSort, { - multiColumnSort: false, - sortCol: column, - sortAsc: sortOpts.sortAsc}, e); - } else { - trigger(self.onSort, { - multiColumnSort: true, - sortCols: $.map(sortColumns, function(col) { - return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc }; - })}, e); - } - } - }); - } - - function setupColumnReorder() { - $headers.filter(":ui-sortable").sortable("destroy"); - $headers.sortable({ - containment: "parent", - distance: 3, - axis: "x", - cursor: "default", - tolerance: "intersection", - helper: "clone", - placeholder: "slick-sortable-placeholder ui-state-default slick-header-column", - forcePlaceholderSize: true, - start: function (e, ui) { - $(ui.helper).addClass("slick-header-column-active"); - }, - beforeStop: function (e, ui) { - $(ui.helper).removeClass("slick-header-column-active"); - }, - stop: function (e) { - if (!getEditorLock().commitCurrentEdit()) { - $(this).sortable("cancel"); - return; - } - - var reorderedIds = $headers.sortable("toArray"); - var reorderedColumns = []; - for (var i = 0; i < reorderedIds.length; i++) { - reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]); - } - setColumns(reorderedColumns); - - trigger(self.onColumnsReordered, {}); - e.stopPropagation(); - setupColumnResize(); - } - }); - } - - function setupColumnResize() { - var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable; - columnElements = $headers.children(); - columnElements.find(".slick-resizable-handle").remove(); - columnElements.each(function (i, e) { - if (columns[i].resizable) { - if (firstResizable === undefined) { - firstResizable = i; - } - lastResizable = i; - } - }); - if (firstResizable === undefined) { - return; - } - columnElements.each(function (i, e) { - if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) { - return; - } - $col = $(e); - $("<div class='slick-resizable-handle' />") - .appendTo(e) - .bind("dragstart", function (e, dd) { - if (!getEditorLock().commitCurrentEdit()) { - return false; - } - pageX = e.pageX; - $(this).parent().addClass("slick-header-column-active"); - var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; - // lock each column's width option to current width - columnElements.each(function (i, e) { - columns[i].previousWidth = $(e).outerWidth(); - }); - if (options.forceFitColumns) { - shrinkLeewayOnRight = 0; - stretchLeewayOnRight = 0; - // colums on right affect maxPageX/minPageX - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - if (stretchLeewayOnRight !== null) { - if (c.maxWidth) { - stretchLeewayOnRight += c.maxWidth - c.previousWidth; - } else { - stretchLeewayOnRight = null; - } - } - shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); - } - } - } - var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0; - for (j = 0; j <= i; j++) { - // columns on left only affect minPageX - c = columns[j]; - if (c.resizable) { - if (stretchLeewayOnLeft !== null) { - if (c.maxWidth) { - stretchLeewayOnLeft += c.maxWidth - c.previousWidth; - } else { - stretchLeewayOnLeft = null; - } - } - shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); - } - } - if (shrinkLeewayOnRight === null) { - shrinkLeewayOnRight = 100000; - } - if (shrinkLeewayOnLeft === null) { - shrinkLeewayOnLeft = 100000; - } - if (stretchLeewayOnRight === null) { - stretchLeewayOnRight = 100000; - } - if (stretchLeewayOnLeft === null) { - stretchLeewayOnLeft = 100000; - } - maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); - minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); - }) - .bind("drag", function (e, dd) { - var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x; - if (d < 0) { // shrink column - x = d; - for (j = i; j >= 0; j--) { - c = columns[j]; - if (c.resizable) { - actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); - if (x && c.previousWidth + x < actualMinWidth) { - x += c.previousWidth - actualMinWidth; - c.width = actualMinWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } - } - - if (options.forceFitColumns) { - x = -d; - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { - x -= c.maxWidth - c.previousWidth; - c.width = c.maxWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } - } - } - } else { // stretch column - x = d; - for (j = i; j >= 0; j--) { - c = columns[j]; - if (c.resizable) { - if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { - x -= c.maxWidth - c.previousWidth; - c.width = c.maxWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } - } - - if (options.forceFitColumns) { - x = -d; - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); - if (x && c.previousWidth + x < actualMinWidth) { - x += c.previousWidth - actualMinWidth; - c.width = actualMinWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } - } - } - } - applyColumnHeaderWidths(); - if (options.syncColumnCellResize) { - applyColumnWidths(); - } - }) - .bind("dragend", function (e, dd) { - var newWidth; - $(this).parent().removeClass("slick-header-column-active"); - for (j = 0; j < columnElements.length; j++) { - c = columns[j]; - newWidth = $(columnElements[j]).outerWidth(); - - if (c.previousWidth !== newWidth && c.rerenderOnResize) { - invalidateAllRows(); - } - } - updateCanvasWidth(true); - render(); - trigger(self.onColumnsResized, {}); - }); - }); - } - - function getVBoxDelta($el) { - var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; - var delta = 0; - $.each(p, function (n, val) { - delta += parseFloat($el.css(val)) || 0; - }); - return delta; - } - - function measureCellPaddingAndBorder() { - var el; - var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"]; - var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; - - el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers); - headerColumnWidthDiff = headerColumnHeightDiff = 0; - $.each(h, function (n, val) { - headerColumnWidthDiff += parseFloat(el.css(val)) || 0; - }); - $.each(v, function (n, val) { - headerColumnHeightDiff += parseFloat(el.css(val)) || 0; - }); - el.remove(); - - var r = $("<div class='slick-row' />").appendTo($canvas); - el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r); - cellWidthDiff = cellHeightDiff = 0; - $.each(h, function (n, val) { - cellWidthDiff += parseFloat(el.css(val)) || 0; - }); - $.each(v, function (n, val) { - cellHeightDiff += parseFloat(el.css(val)) || 0; - }); - r.remove(); - - absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff); - } - - function createCssRules() { - $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head")); - var rowHeight = (options.rowHeight - cellHeightDiff); - var rules = [ - "." + uid + " .slick-header-column { left: 1000px; }", - "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }", - "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }", - "." + uid + " .slick-cell { height:" + rowHeight + "px; }", - "." + uid + " .slick-row { height:" + options.rowHeight + "px; }" - ]; - - for (var i = 0; i < columns.length; i++) { - rules.push("." + uid + " .l" + i + " { }"); - rules.push("." + uid + " .r" + i + " { }"); - } - - if ($style[0].styleSheet) { // IE - $style[0].styleSheet.cssText = rules.join(" "); - } else { - $style[0].appendChild(document.createTextNode(rules.join(" "))); - } - } - - function getColumnCssRules(idx) { - if (!stylesheet) { - var sheets = document.styleSheets; - for (var i = 0; i < sheets.length; i++) { - if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) { - stylesheet = sheets[i]; - break; - } - } - - if (!stylesheet) { - throw new Error("Cannot find stylesheet."); - } - - // find and cache column CSS rules - columnCssRulesL = []; - columnCssRulesR = []; - var cssRules = (stylesheet.cssRules || stylesheet.rules); - var matches, columnIdx; - for (var i = 0; i < cssRules.length; i++) { - var selector = cssRules[i].selectorText; - if (matches = /\.l\d+/.exec(selector)) { - columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10); - columnCssRulesL[columnIdx] = cssRules[i]; - } else if (matches = /\.r\d+/.exec(selector)) { - columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10); - columnCssRulesR[columnIdx] = cssRules[i]; - } - } - } - - return { - "left": columnCssRulesL[idx], - "right": columnCssRulesR[idx] - }; - } - - function removeCssRules() { - $style.remove(); - stylesheet = null; - } - - function destroy() { - getEditorLock().cancelCurrentEdit(); - - trigger(self.onBeforeDestroy, {}); - - var i = plugins.length; - while(i--) { - unregisterPlugin(plugins[i]); - } - - if (options.enableColumnReorder) { - $headers.filter(":ui-sortable").sortable("destroy"); - } - - unbindAncestorScrollEvents(); - $container.unbind(".slickgrid"); - removeCssRules(); - - $canvas.unbind("draginit dragstart dragend drag"); - $container.empty().removeClass(uid); - } - - - ////////////////////////////////////////////////////////////////////////////////////////////// - // General - - function trigger(evt, args, e) { - e = e || new Slick.EventData(); - args = args || {}; - args.grid = self; - return evt.notify(args, e, self); - } - - function getEditorLock() { - return options.editorLock; - } - - function getEditController() { - return editController; - } - - function getColumnIndex(id) { - return columnsById[id]; - } - - function autosizeColumns() { - var i, c, - widths = [], - shrinkLeeway = 0, - total = 0, - prevTotal, - availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW; - - for (i = 0; i < columns.length; i++) { - c = columns[i]; - widths.push(c.width); - total += c.width; - if (c.resizable) { - shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth); - } - } - - // shrink - prevTotal = total; - while (total > availWidth && shrinkLeeway) { - var shrinkProportion = (total - availWidth) / shrinkLeeway; - for (i = 0; i < columns.length && total > availWidth; i++) { - c = columns[i]; - var width = widths[i]; - if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) { - continue; - } - var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth); - var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1; - shrinkSize = Math.min(shrinkSize, width - absMinWidth); - total -= shrinkSize; - shrinkLeeway -= shrinkSize; - widths[i] -= shrinkSize; - } - if (prevTotal == total) { // avoid infinite loop - break; - } - prevTotal = total; - } - - // grow - prevTotal = total; - while (total < availWidth) { - var growProportion = availWidth / total; - for (i = 0; i < columns.length && total < availWidth; i++) { - c = columns[i]; - if (!c.resizable || c.maxWidth <= c.width) { - continue; - } - var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1; - total += growSize; - widths[i] += growSize; - } - if (prevTotal == total) { // avoid infinite loop - break; - } - prevTotal = total; - } - - var reRender = false; - for (i = 0; i < columns.length; i++) { - if (columns[i].rerenderOnResize && columns[i].width != widths[i]) { - reRender = true; - } - columns[i].width = widths[i]; - } - - applyColumnHeaderWidths(); - updateCanvasWidth(true); - if (reRender) { - invalidateAllRows(); - render(); - } - } - - function applyColumnHeaderWidths() { - if (!initialized) { return; } - var h; - for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) { - h = $(headers[i]); - if (h.width() !== columns[i].width - headerColumnWidthDiff) { - h.width(columns[i].width - headerColumnWidthDiff); - } - } - - updateColumnCaches(); - } - - function applyColumnWidths() { - var x = 0, w, rule; - for (var i = 0; i < columns.length; i++) { - w = columns[i].width; - - rule = getColumnCssRules(i); - rule.left.style.left = x + "px"; - rule.right.style.right = (canvasWidth - x - w) + "px"; - - x += columns[i].width; - } - } - - function setSortColumn(columnId, ascending) { - setSortColumns([{ columnId: columnId, sortAsc: ascending}]); - } - - function setSortColumns(cols) { - sortColumns = cols; - - var headerColumnEls = $headers.children(); - headerColumnEls - .removeClass("slick-header-column-sorted") - .find(".slick-sort-indicator") - .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc"); - - $.each(sortColumns, function(i, col) { - if (col.sortAsc == null) { - col.sortAsc = true; - } - var columnIndex = getColumnIndex(col.columnId); - if (columnIndex != null) { - headerColumnEls.eq(columnIndex) - .addClass("slick-header-column-sorted") - .find(".slick-sort-indicator") - .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc"); - } - }); - } - - function getSortColumns() { - return sortColumns; - } - - function handleSelectedRangesChanged(e, ranges) { - selectedRows = []; - var hash = {}; - for (var i = 0; i < ranges.length; i++) { - for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) { - if (!hash[j]) { // prevent duplicates - selectedRows.push(j); - hash[j] = {}; - } - for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) { - if (canCellBeSelected(j, k)) { - hash[j][columns[k].id] = options.selectedCellCssClass; - } - } - } - } - - setCellCssStyles(options.selectedCellCssClass, hash); - - trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e); - } - - function getColumns() { - return columns; - } - - function updateColumnCaches() { - // Pre-calculate cell boundaries. - columnPosLeft = []; - columnPosRight = []; - var x = 0; - for (var i = 0, ii = columns.length; i < ii; i++) { - columnPosLeft[i] = x; - columnPosRight[i] = x + columns[i].width; - x += columns[i].width; - } - } - - function setColumns(columnDefinitions) { - columns = columnDefinitions; - - columnsById = {}; - for (var i = 0; i < columns.length; i++) { - var m = columns[i] = $.extend({}, columnDefaults, columns[i]); - columnsById[m.id] = i; - if (m.minWidth && m.width < m.minWidth) { - m.width = m.minWidth; - } - if (m.maxWidth && m.width > m.maxWidth) { - m.width = m.maxWidth; - } - } - - updateColumnCaches(); - - if (initialized) { - invalidateAllRows(); - createColumnHeaders(); - removeCssRules(); - createCssRules(); - resizeCanvas(); - applyColumnWidths(); - handleScroll(); - } - } - - function getOptions() { - return options; - } - - function setOptions(args) { - if (!getEditorLock().commitCurrentEdit()) { - return; - } - - makeActiveCellNormal(); - - if (options.enableAddRow !== args.enableAddRow) { - invalidateRow(getDataLength()); - } - - options = $.extend(options, args); - validateAndEnforceOptions(); - - $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); - render(); - } - - function validateAndEnforceOptions() { - if (options.autoHeight) { - options.leaveSpaceForNewRows = false; - } - } - - function setData(newData, scrollToTop) { - data = newData; - invalidateAllRows(); - updateRowCount(); - if (scrollToTop) { - scrollTo(0); - } - } - - function getData() { - return data; - } - - function getDataLength() { - if (data.getLength) { - return data.getLength(); - } else { - return data.length; - } - } - - function getDataItem(i) { - if (data.getItem) { - return data.getItem(i); - } else { - return data[i]; - } - } - - function getTopPanel() { - return $topPanel[0]; - } - - function setTopPanelVisibility(visible) { - if (options.showTopPanel != visible) { - options.showTopPanel = visible; - if (visible) { - $topPanelScroller.slideDown("fast", resizeCanvas); - } else { - $topPanelScroller.slideUp("fast", resizeCanvas); - } - } - } - - function setHeaderRowVisibility(visible) { - if (options.showHeaderRow != visible) { - options.showHeaderRow = visible; - if (visible) { - $headerRowScroller.slideDown("fast", resizeCanvas); - } else { - $headerRowScroller.slideUp("fast", resizeCanvas); - } - } - } - - function getContainerNode() { - return $container.get(0); - } - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Rendering / Scrolling - - function getRowTop(row) { - return options.rowHeight * row - offset; - } - - function getRowFromPosition(y) { - return Math.floor((y + offset) / options.rowHeight); - } - - function scrollTo(y) { - y = Math.max(y, 0); - y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0)); - - var oldOffset = offset; - - page = Math.min(n - 1, Math.floor(y / ph)); - offset = Math.round(page * cj); - var newScrollTop = y - offset; - - if (offset != oldOffset) { - var range = getVisibleRange(newScrollTop); - cleanupRows(range); - updateRowPositions(); - } - - if (prevScrollTop != newScrollTop) { - vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1; - $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop); - - trigger(self.onViewportChanged, {}); - } - } - - function defaultFormatter(row, cell, value, columnDef, dataContext) { - if (value == null) { - return ""; - } else { - return (value + "").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); - } - } - - function getFormatter(row, column) { - var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); - - // look up by id, then index - var columnOverrides = rowMetadata && - rowMetadata.columns && - (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]); - - return (columnOverrides && columnOverrides.formatter) || - (rowMetadata && rowMetadata.formatter) || - column.formatter || - (options.formatterFactory && options.formatterFactory.getFormatter(column)) || - options.defaultFormatter; - } - - function getEditor(row, cell) { - var column = columns[cell]; - var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); - var columnMetadata = rowMetadata && rowMetadata.columns; - - if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) { - return columnMetadata[column.id].editor; - } - if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) { - return columnMetadata[cell].editor; - } - - return column.editor || (options.editorFactory && options.editorFactory.getEditor(column)); - } - - function getDataItemValueForColumn(item, columnDef) { - if (options.dataItemColumnValueExtractor) { - return options.dataItemColumnValueExtractor(item, columnDef); - } - return item[columnDef.field]; - } - - function appendRowHtml(stringArray, row, range, dataLength) { - var d = getDataItem(row); - var dataLoading = row < dataLength && !d; - var rowCss = "slick-row" + - (dataLoading ? " loading" : "") + - (row === activeRow ? " active" : "") + - (row % 2 == 1 ? " odd" : " even"); - - var metadata = data.getItemMetadata && data.getItemMetadata(row); - - if (metadata && metadata.cssClasses) { - rowCss += " " + metadata.cssClasses; - } - - stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + getRowTop(row) + "px'>"); - - var colspan, m; - for (var i = 0, ii = columns.length; i < ii; i++) { - m = columns[i]; - colspan = 1; - if (metadata && metadata.columns) { - var columnData = metadata.columns[m.id] || metadata.columns[i]; - colspan = (columnData && columnData.colspan) || 1; - if (colspan === "*") { - colspan = ii - i; - } - } - - // Do not render cells outside of the viewport. - if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) { - if (columnPosLeft[i] > range.rightPx) { - // All columns to the right are outside the range. - break; - } - - appendCellHtml(stringArray, row, i, colspan, d); - } - - if (colspan > 1) { - i += (colspan - 1); - } - } - - stringArray.push("</div>"); - } - - function appendCellHtml(stringArray, row, cell, colspan, item) { - var m = columns[cell]; - var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) + - (m.cssClass ? " " + m.cssClass : ""); - if (row === activeRow && cell === activeCell) { - cellCss += (" active"); - } - - // TODO: merge them together in the setter - for (var key in cellCssClasses) { - if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) { - cellCss += (" " + cellCssClasses[key][row][m.id]); - } - } - - stringArray.push("<div class='" + cellCss + "'>"); - - // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet) - if (item) { - var value = getDataItemValueForColumn(item, m); - stringArray.push(getFormatter(row, m)(row, cell, value, m, item)); - } - - stringArray.push("</div>"); - - rowsCache[row].cellRenderQueue.push(cell); - rowsCache[row].cellColSpans[cell] = colspan; - } - - - function cleanupRows(rangeToKeep) { - for (var i in rowsCache) { - if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) { - removeRowFromCache(i); - } - } - } - - function invalidate() { - updateRowCount(); - invalidateAllRows(); - render(); - } - - function invalidateAllRows() { - if (currentEditor) { - makeActiveCellNormal(); - } - for (var row in rowsCache) { - removeRowFromCache(row); - } - } - - function removeRowFromCache(row) { - var cacheEntry = rowsCache[row]; - if (!cacheEntry) { - return; - } - $canvas[0].removeChild(cacheEntry.rowNode); - delete rowsCache[row]; - delete postProcessedRows[row]; - renderedRows--; - counter_rows_removed++; - } - - function invalidateRows(rows) { - var i, rl; - if (!rows || !rows.length) { - return; - } - vScrollDir = 0; - for (i = 0, rl = rows.length; i < rl; i++) { - if (currentEditor && activeRow === rows[i]) { - makeActiveCellNormal(); - } - if (rowsCache[rows[i]]) { - removeRowFromCache(rows[i]); - } - } - } - - function invalidateRow(row) { - invalidateRows([row]); - } - - function updateCell(row, cell) { - var cellNode = getCellNode(row, cell); - if (!cellNode) { - return; - } - - var m = columns[cell], d = getDataItem(row); - if (currentEditor && activeRow === row && activeCell === cell) { - currentEditor.loadValue(d); - } else { - cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : ""; - invalidatePostProcessingResults(row); - } - } - - function updateRow(row) { - var cacheEntry = rowsCache[row]; - if (!cacheEntry) { - return; - } - - ensureCellNodesInRowsCache(row); - - var d = getDataItem(row); - - for (var columnIdx in cacheEntry.cellNodesByColumnIdx) { - if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) { - continue; - } - - columnIdx = columnIdx | 0; - var m = columns[columnIdx], - node = cacheEntry.cellNodesByColumnIdx[columnIdx]; - - if (row === activeRow && columnIdx === activeCell && currentEditor) { - currentEditor.loadValue(d); - } else if (d) { - node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d); - } else { - node.innerHTML = ""; - } - } - - invalidatePostProcessingResults(row); - } - - function getViewportHeight() { - return parseFloat($.css($container[0], "height", true)) - - parseFloat($.css($container[0], "paddingTop", true)) - - parseFloat($.css($container[0], "paddingBottom", true)) - - parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) - - (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) - - (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0); - } - - function resizeCanvas() { - if (!initialized) { return; } - if (options.autoHeight) { - viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0)); - } else { - viewportH = getViewportHeight(); - } - - numVisibleRows = Math.ceil(viewportH / options.rowHeight); - viewportW = parseFloat($.css($container[0], "width", true)); - if (!options.autoHeight) { - $viewport.height(viewportH); - } - - if (options.forceFitColumns) { - autosizeColumns(); - } - - updateRowCount(); - handleScroll(); - render(); - } - - function updateRowCount() { - var dataLength = getDataLength(); - if (!initialized) { return; } - numberOfRows = dataLength + - (options.enableAddRow ? 1 : 0) + - (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0); - - var oldViewportHasVScroll = viewportHasVScroll; - // with autoHeight, we do not need to accommodate the vertical scroll bar - viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH); - - // remove the rows that are now outside of the data range - // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows - var l = options.enableAddRow ? dataLength : dataLength - 1; - for (var i in rowsCache) { - if (i >= l) { - removeRowFromCache(i); - } - } - - if (activeCellNode && activeRow > l) { - resetActiveCell(); - } - - var oldH = h; - th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height); - if (th < maxSupportedCssHeight) { - // just one page - h = ph = th; - n = 1; - cj = 0; - } else { - // break into pages - h = maxSupportedCssHeight; - ph = h / 100; - n = Math.floor(th / ph); - cj = (th - h) / (n - 1); - } - - if (h !== oldH) { - $canvas.css("height", h); - scrollTop = $viewport[0].scrollTop; - } - - var oldScrollTopInRange = (scrollTop + offset <= th - viewportH); - - if (th == 0 || scrollTop == 0) { - page = offset = 0; - } else if (oldScrollTopInRange) { - // maintain virtual position - scrollTo(scrollTop + offset); - } else { - // scroll to bottom - scrollTo(th - viewportH); - } - - if (h != oldH && options.autoHeight) { - resizeCanvas(); - } - - if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) { - autosizeColumns(); - } - updateCanvasWidth(false); - } - - function getVisibleRange(viewportTop, viewportLeft) { - if (viewportTop == null) { - viewportTop = scrollTop; - } - if (viewportLeft == null) { - viewportLeft = scrollLeft; - } - - return { - top: getRowFromPosition(viewportTop), - bottom: getRowFromPosition(viewportTop + viewportH) + 1, - leftPx: viewportLeft, - rightPx: viewportLeft + viewportW - }; - } - - function getRenderedRange(viewportTop, viewportLeft) { - var range = getVisibleRange(viewportTop, viewportLeft); - var buffer = Math.round(viewportH / options.rowHeight); - var minBuffer = 3; - - if (vScrollDir == -1) { - range.top -= buffer; - range.bottom += minBuffer; - } else if (vScrollDir == 1) { - range.top -= minBuffer; - range.bottom += buffer; - } else { - range.top -= minBuffer; - range.bottom += minBuffer; - } - - range.top = Math.max(0, range.top); - range.bottom = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, range.bottom); - - range.leftPx -= viewportW; - range.rightPx += viewportW; - - range.leftPx = Math.max(0, range.leftPx); - range.rightPx = Math.min(canvasWidth, range.rightPx); - - return range; - } - - function ensureCellNodesInRowsCache(row) { - var cacheEntry = rowsCache[row]; - if (cacheEntry) { - if (cacheEntry.cellRenderQueue.length) { - var lastChild = cacheEntry.rowNode.lastChild; - while (cacheEntry.cellRenderQueue.length) { - var columnIdx = cacheEntry.cellRenderQueue.pop(); - cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild; - lastChild = lastChild.previousSibling; - } - } - } - } - - function cleanUpCells(range, row) { - var totalCellsRemoved = 0; - var cacheEntry = rowsCache[row]; - - // Remove cells outside the range. - var cellsToRemove = []; - for (var i in cacheEntry.cellNodesByColumnIdx) { - // I really hate it when people mess with Array.prototype. - if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) { - continue; - } - - // This is a string, so it needs to be cast back to a number. - i = i | 0; - - var colspan = cacheEntry.cellColSpans[i]; - if (columnPosLeft[i] > range.rightPx || - columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) { - if (!(row == activeRow && i == activeCell)) { - cellsToRemove.push(i); - } - } - } - - var cellToRemove; - while ((cellToRemove = cellsToRemove.pop()) != null) { - cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]); - delete cacheEntry.cellColSpans[cellToRemove]; - delete cacheEntry.cellNodesByColumnIdx[cellToRemove]; - if (postProcessedRows[row]) { - delete postProcessedRows[row][cellToRemove]; - } - totalCellsRemoved++; - } - } - - function cleanUpAndRenderCells(range) { - var cacheEntry; - var stringArray = []; - var processedRows = []; - var cellsAdded; - var totalCellsAdded = 0; - var colspan; - - for (var row = range.top, btm = range.bottom; row <= btm; row++) { - cacheEntry = rowsCache[row]; - if (!cacheEntry) { - continue; - } - - // cellRenderQueue populated in renderRows() needs to be cleared first - ensureCellNodesInRowsCache(row); - - cleanUpCells(range, row); - - // Render missing cells. - cellsAdded = 0; - - var metadata = data.getItemMetadata && data.getItemMetadata(row); - metadata = metadata && metadata.columns; - - var d = getDataItem(row); - - // TODO: shorten this loop (index? heuristics? binary search?) - for (var i = 0, ii = columns.length; i < ii; i++) { - // Cells to the right are outside the range. - if (columnPosLeft[i] > range.rightPx) { - break; - } - - // Already rendered. - if ((colspan = cacheEntry.cellColSpans[i]) != null) { - i += (colspan > 1 ? colspan - 1 : 0); - continue; - } - - colspan = 1; - if (metadata) { - var columnData = metadata[columns[i].id] || metadata[i]; - colspan = (columnData && columnData.colspan) || 1; - if (colspan === "*") { - colspan = ii - i; - } - } - - if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) { - appendCellHtml(stringArray, row, i, colspan, d); - cellsAdded++; - } - - i += (colspan > 1 ? colspan - 1 : 0); - } - - if (cellsAdded) { - totalCellsAdded += cellsAdded; - processedRows.push(row); - } - } - - if (!stringArray.length) { - return; - } - - var x = document.createElement("div"); - x.innerHTML = stringArray.join(""); - - var processedRow; - var node; - while ((processedRow = processedRows.pop()) != null) { - cacheEntry = rowsCache[processedRow]; - var columnIdx; - while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) { - node = x.lastChild; - cacheEntry.rowNode.appendChild(node); - cacheEntry.cellNodesByColumnIdx[columnIdx] = node; - } - } - } - - function renderRows(range) { - var parentNode = $canvas[0], - stringArray = [], - rows = [], - needToReselectCell = false, - dataLength = getDataLength(); - - for (var i = range.top, ii = range.bottom; i <= ii; i++) { - if (rowsCache[i]) { - continue; - } - renderedRows++; - rows.push(i); - - // Create an entry right away so that appendRowHtml() can - // start populatating it. - rowsCache[i] = { - "rowNode": null, - - // ColSpans of rendered cells (by column idx). - // Can also be used for checking whether a cell has been rendered. - "cellColSpans": [], - - // Cell nodes (by column idx). Lazy-populated by ensureCellNodesInRowsCache(). - "cellNodesByColumnIdx": [], - - // Column indices of cell nodes that have been rendered, but not yet indexed in - // cellNodesByColumnIdx. These are in the same order as cell nodes added at the - // end of the row. - "cellRenderQueue": [] - }; - - appendRowHtml(stringArray, i, range, dataLength); - if (activeCellNode && activeRow === i) { - needToReselectCell = true; - } - counter_rows_rendered++; - } - - if (!rows.length) { return; } - - var x = document.createElement("div"); - x.innerHTML = stringArray.join(""); - - for (var i = 0, ii = rows.length; i < ii; i++) { - rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild); - } - - if (needToReselectCell) { - activeCellNode = getCellNode(activeRow, activeCell); - } - } - - function startPostProcessing() { - if (!options.enableAsyncPostRender) { - return; - } - clearTimeout(h_postrender); - h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay); - } - - function invalidatePostProcessingResults(row) { - delete postProcessedRows[row]; - postProcessFromRow = Math.min(postProcessFromRow, row); - postProcessToRow = Math.max(postProcessToRow, row); - startPostProcessing(); - } - - function updateRowPositions() { - for (var row in rowsCache) { - rowsCache[row].rowNode.style.top = getRowTop(row) + "px"; - } - } - - function render() { - if (!initialized) { return; } - var visible = getVisibleRange(); - var rendered = getRenderedRange(); - - // remove rows no longer in the viewport - cleanupRows(rendered); - - // add new rows & missing cells in existing rows - if (lastRenderedScrollLeft != scrollLeft) { - cleanUpAndRenderCells(rendered); - } - - // render missing rows - renderRows(rendered); - - postProcessFromRow = visible.top; - postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom); - startPostProcessing(); - - lastRenderedScrollTop = scrollTop; - lastRenderedScrollLeft = scrollLeft; - h_render = null; - } - - function handleHeaderRowScroll() { - var scrollLeft = $headerRowScroller[0].scrollLeft; - if (scrollLeft != $viewport[0].scrollLeft) { - $viewport[0].scrollLeft = scrollLeft; - } - } - - function handleScroll() { - scrollTop = $viewport[0].scrollTop; - scrollLeft = $viewport[0].scrollLeft; - var vScrollDist = Math.abs(scrollTop - prevScrollTop); - var hScrollDist = Math.abs(scrollLeft - prevScrollLeft); - - if (hScrollDist) { - prevScrollLeft = scrollLeft; - $headerScroller[0].scrollLeft = scrollLeft; - $topPanelScroller[0].scrollLeft = scrollLeft; - $headerRowScroller[0].scrollLeft = scrollLeft; - } - - if (vScrollDist) { - vScrollDir = prevScrollTop < scrollTop ? 1 : -1; - prevScrollTop = scrollTop; - - // switch virtual pages if needed - if (vScrollDist < viewportH) { - scrollTo(scrollTop + offset); - } else { - var oldOffset = offset; - if (h == viewportH) { - page = 0; - } else { - page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph))); - } - offset = Math.round(page * cj); - if (oldOffset != offset) { - invalidateAllRows(); - } - } - } - - if (hScrollDist || vScrollDist) { - if (h_render) { - clearTimeout(h_render); - } - - if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 || - Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) { - if (options.forceSyncScrolling || ( - Math.abs(lastRenderedScrollTop - scrollTop) < viewportH && - Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) { - render(); - } else { - h_render = setTimeout(render, 50); - } - - trigger(self.onViewportChanged, {}); - } - } - - trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop}); - } - - function asyncPostProcessRows() { - while (postProcessFromRow <= postProcessToRow) { - var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--; - var cacheEntry = rowsCache[row]; - if (!cacheEntry || row >= getDataLength()) { - continue; - } - - if (!postProcessedRows[row]) { - postProcessedRows[row] = {}; - } - - ensureCellNodesInRowsCache(row); - for (var columnIdx in cacheEntry.cellNodesByColumnIdx) { - if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) { - continue; - } - - columnIdx = columnIdx | 0; - - var m = columns[columnIdx]; - if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) { - var node = cacheEntry.cellNodesByColumnIdx[columnIdx]; - if (node) { - m.asyncPostRender(node, row, getDataItem(row), m); - } - postProcessedRows[row][columnIdx] = true; - } - } - - h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay); - return; - } - } - - function updateCellCssStylesOnRenderedRows(addedHash, removedHash) { - var node, columnId, addedRowHash, removedRowHash; - for (var row in rowsCache) { - removedRowHash = removedHash && removedHash[row]; - addedRowHash = addedHash && addedHash[row]; - - if (removedRowHash) { - for (columnId in removedRowHash) { - if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) { - node = getCellNode(row, getColumnIndex(columnId)); - if (node) { - $(node).removeClass(removedRowHash[columnId]); - } - } - } - } - - if (addedRowHash) { - for (columnId in addedRowHash) { - if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) { - node = getCellNode(row, getColumnIndex(columnId)); - if (node) { - $(node).addClass(addedRowHash[columnId]); - } - } - } - } - } - } - - function addCellCssStyles(key, hash) { - if (cellCssClasses[key]) { - throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists."; - } - - cellCssClasses[key] = hash; - updateCellCssStylesOnRenderedRows(hash, null); - - trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash }); - } - - function removeCellCssStyles(key) { - if (!cellCssClasses[key]) { - return; - } - - updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]); - delete cellCssClasses[key]; - - trigger(self.onCellCssStylesChanged, { "key": key, "hash": null }); - } - - function setCellCssStyles(key, hash) { - var prevHash = cellCssClasses[key]; - - cellCssClasses[key] = hash; - updateCellCssStylesOnRenderedRows(hash, prevHash); - - trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash }); - } - - function getCellCssStyles(key) { - return cellCssClasses[key]; - } - - function flashCell(row, cell, speed) { - speed = speed || 100; - if (rowsCache[row]) { - var $cell = $(getCellNode(row, cell)); - - function toggleCellClass(times) { - if (!times) { - return; - } - setTimeout(function () { - $cell.queue(function () { - $cell.toggleClass(options.cellFlashingCssClass).dequeue(); - toggleCellClass(times - 1); - }); - }, - speed); - } - - toggleCellClass(4); - } - } - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Interactivity - - function handleDragInit(e, dd) { - var cell = getCellFromEvent(e); - if (!cell || !cellExists(cell.row, cell.cell)) { - return false; - } - - var retval = trigger(self.onDragInit, dd, e); - if (e.isImmediatePropagationStopped()) { - return retval; - } - - // if nobody claims to be handling drag'n'drop by stopping immediate propagation, - // cancel out of it - return false; - } - - function handleDragStart(e, dd) { - var cell = getCellFromEvent(e); - if (!cell || !cellExists(cell.row, cell.cell)) { - return false; - } - - var retval = trigger(self.onDragStart, dd, e); - if (e.isImmediatePropagationStopped()) { - return retval; - } - - return false; - } - - function handleDrag(e, dd) { - return trigger(self.onDrag, dd, e); - } - - function handleDragEnd(e, dd) { - trigger(self.onDragEnd, dd, e); - } - - function handleKeyDown(e) { - trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e); - var handled = e.isImmediatePropagationStopped(); - - if (!handled) { - if (!e.shiftKey && !e.altKey && !e.ctrlKey) { - if (e.which == 27) { - if (!getEditorLock().isActive()) { - return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event) - } - cancelEditAndSetFocus(); - } else if (e.which == 37) { - handled = navigateLeft(); - } else if (e.which == 39) { - handled = navigateRight(); - } else if (e.which == 38) { - handled = navigateUp(); - } else if (e.which == 40) { - handled = navigateDown(); - } else if (e.which == 9) { - handled = navigateNext(); - } else if (e.which == 13) { - if (options.editable) { - if (currentEditor) { - // adding new row - if (activeRow === getDataLength()) { - navigateDown(); - } else { - commitEditAndSetFocus(); - } - } else { - if (getEditorLock().commitCurrentEdit()) { - makeActiveCellEditable(); - } - } - } - handled = true; - } - } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) { - handled = navigatePrev(); - } - } - - if (handled) { - // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it - e.stopPropagation(); - e.preventDefault(); - try { - e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.) - } - // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl" - // (hitting control key only, nothing else), "Shift" (maybe others) - catch (error) { - } - } - } - - function handleClick(e) { - if (!currentEditor) { - // if this click resulted in some cell child node getting focus, - // don't steal it back - keyboard events will still bubble up - if (e.target != document.activeElement) { - setFocus(); - } - } - - var cell = getCellFromEvent(e); - if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) { - return; - } - - trigger(self.onClick, {row: cell.row, cell: cell.cell}, e); - if (e.isImmediatePropagationStopped()) { - return; - } - - if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) { - if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) { - scrollRowIntoView(cell.row, false); - setActiveCellInternal(getCellNode(cell.row, cell.cell), (cell.row === getDataLength()) || options.autoEdit); - } - } - } - - function handleContextMenu(e) { - var $cell = $(e.target).closest(".slick-cell", $canvas); - if ($cell.length === 0) { - return; - } - - // are we editing this cell? - if (activeCellNode === $cell[0] && currentEditor !== null) { - return; - } - - trigger(self.onContextMenu, {}, e); - } - - function handleDblClick(e) { - var cell = getCellFromEvent(e); - if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) { - return; - } - - trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e); - if (e.isImmediatePropagationStopped()) { - return; - } - - if (options.editable) { - gotoCell(cell.row, cell.cell, true); - } - } - - function handleHeaderMouseEnter(e) { - trigger(self.onHeaderMouseEnter, { - "column": $(this).data("column") - }, e); - } - - function handleHeaderMouseLeave(e) { - trigger(self.onHeaderMouseLeave, { - "column": $(this).data("column") - }, e); - } - - function handleHeaderContextMenu(e) { - var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); - var column = $header && $header.data("column"); - trigger(self.onHeaderContextMenu, {column: column}, e); - } - - function handleHeaderClick(e) { - var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); - var column = $header && $header.data("column"); - if (column) { - trigger(self.onHeaderClick, {column: column}, e); - } - } - - function handleMouseEnter(e) { - trigger(self.onMouseEnter, {}, e); - } - - function handleMouseLeave(e) { - trigger(self.onMouseLeave, {}, e); - } - - function cellExists(row, cell) { - return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length); - } - - function getCellFromPoint(x, y) { - var row = getRowFromPosition(y); - var cell = 0; - - var w = 0; - for (var i = 0; i < columns.length && w < x; i++) { - w += columns[i].width; - cell++; - } - - if (cell < 0) { - cell = 0; - } - - return {row: row, cell: cell - 1}; - } - - function getCellFromNode(cellNode) { - // read column number from .l<columnNumber> CSS class - var cls = /l\d+/.exec(cellNode.className); - if (!cls) { - throw "getCellFromNode: cannot get cell - " + cellNode.className; - } - return parseInt(cls[0].substr(1, cls[0].length - 1), 10); - } - - function getRowFromNode(rowNode) { - for (var row in rowsCache) { - if (rowsCache[row].rowNode === rowNode) { - return row | 0; - } - } - - return null; - } - - function getCellFromEvent(e) { - var $cell = $(e.target).closest(".slick-cell", $canvas); - if (!$cell.length) { - return null; - } - - var row = getRowFromNode($cell[0].parentNode); - var cell = getCellFromNode($cell[0]); - - if (row == null || cell == null) { - return null; - } else { - return { - "row": row, - "cell": cell - }; - } - } - - function getCellNodeBox(row, cell) { - if (!cellExists(row, cell)) { - return null; - } - - var y1 = getRowTop(row); - var y2 = y1 + options.rowHeight - 1; - var x1 = 0; - for (var i = 0; i < cell; i++) { - x1 += columns[i].width; - } - var x2 = x1 + columns[cell].width; - - return { - top: y1, - left: x1, - bottom: y2, - right: x2 - }; - } - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Cell switching - - function resetActiveCell() { - setActiveCellInternal(null, false); - } - - function setFocus() { - if (tabbingDirection == -1) { - $focusSink[0].focus(); - } else { - $focusSink2[0].focus(); - } - } - - function scrollCellIntoView(row, cell, doPaging) { - scrollRowIntoView(row, doPaging); - - var colspan = getColspan(row, cell); - var left = columnPosLeft[cell], - right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)], - scrollRight = scrollLeft + viewportW; - - if (left < scrollLeft) { - $viewport.scrollLeft(left); - handleScroll(); - render(); - } else if (right > scrollRight) { - $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth)); - handleScroll(); - render(); - } - } - - function setActiveCellInternal(newCell, editMode) { - if (activeCellNode !== null) { - makeActiveCellNormal(); - $(activeCellNode).removeClass("active"); - if (rowsCache[activeRow]) { - $(rowsCache[activeRow].rowNode).removeClass("active"); - } - } - - var activeCellChanged = (activeCellNode !== newCell); - activeCellNode = newCell; - - if (activeCellNode != null) { - activeRow = getRowFromNode(activeCellNode.parentNode); - activeCell = activePosX = getCellFromNode(activeCellNode); - - $(activeCellNode).addClass("active"); - $(rowsCache[activeRow].rowNode).addClass("active"); - - if (options.editable && editMode && isCellPotentiallyEditable(activeRow, activeCell)) { - clearTimeout(h_editorLoader); - - if (options.asyncEditorLoading) { - h_editorLoader = setTimeout(function () { - makeActiveCellEditable(); - }, options.asyncEditorLoadDelay); - } else { - makeActiveCellEditable(); - } - } - } else { - activeRow = activeCell = null; - } - - if (activeCellChanged) { - trigger(self.onActiveCellChanged, getActiveCell()); - } - } - - function clearTextSelection() { - if (document.selection && document.selection.empty) { - try { - //IE fails here if selected element is not in dom - document.selection.empty(); - } catch (e) { } - } else if (window.getSelection) { - var sel = window.getSelection(); - if (sel && sel.removeAllRanges) { - sel.removeAllRanges(); - } - } - } - - function isCellPotentiallyEditable(row, cell) { - // is the data for this row loaded? - if (row < getDataLength() && !getDataItem(row)) { - return false; - } - - // are we in the Add New row? can we create new from this cell? - if (columns[cell].cannotTriggerInsert && row >= getDataLength()) { - return false; - } - - // does this cell have an editor? - if (!getEditor(row, cell)) { - return false; - } - - return true; - } - - function makeActiveCellNormal() { - if (!currentEditor) { - return; - } - trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor}); - currentEditor.destroy(); - currentEditor = null; - - if (activeCellNode) { - var d = getDataItem(activeRow); - $(activeCellNode).removeClass("editable invalid"); - if (d) { - var column = columns[activeCell]; - var formatter = getFormatter(activeRow, column); - activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d); - invalidatePostProcessingResults(activeRow); - } - } - - // if there previously was text selected on a page (such as selected text in the edit cell just removed), - // IE can't set focus to anything else correctly - if (navigator.userAgent.toLowerCase().match(/msie/)) { - clearTextSelection(); - } - - getEditorLock().deactivate(editController); - } - - function makeActiveCellEditable(editor) { - if (!activeCellNode) { - return; - } - if (!options.editable) { - throw "Grid : makeActiveCellEditable : should never get called when options.editable is false"; - } - - // cancel pending async call if there is one - clearTimeout(h_editorLoader); - - if (!isCellPotentiallyEditable(activeRow, activeCell)) { - return; - } - - var columnDef = columns[activeCell]; - var item = getDataItem(activeRow); - - if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) { - setFocus(); - return; - } - - getEditorLock().activate(editController); - $(activeCellNode).addClass("editable"); - - // don't clear the cell if a custom editor is passed through - if (!editor) { - activeCellNode.innerHTML = ""; - } - - currentEditor = new (editor || getEditor(activeRow, activeCell))({ - grid: self, - gridPosition: absBox($container[0]), - position: absBox(activeCellNode), - container: activeCellNode, - column: columnDef, - item: item || {}, - commitChanges: commitEditAndSetFocus, - cancelChanges: cancelEditAndSetFocus - }); - - if (item) { - currentEditor.loadValue(item); - } - - serializedEditorValue = currentEditor.serializeValue(); - - if (currentEditor.position) { - handleActiveCellPositionChange(); - } - } - - function commitEditAndSetFocus() { - // if the commit fails, it would do so due to a validation error - // if so, do not steal the focus from the editor - if (getEditorLock().commitCurrentEdit()) { - setFocus(); - if (options.autoEdit) { - navigateDown(); - } - } - } - - function cancelEditAndSetFocus() { - if (getEditorLock().cancelCurrentEdit()) { - setFocus(); - } - } - - function absBox(elem) { - var box = { - top: elem.offsetTop, - left: elem.offsetLeft, - bottom: 0, - right: 0, - width: $(elem).outerWidth(), - height: $(elem).outerHeight(), - visible: true}; - box.bottom = box.top + box.height; - box.right = box.left + box.width; - - // walk up the tree - var offsetParent = elem.offsetParent; - while ((elem = elem.parentNode) != document.body) { - if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") { - box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight; - } - - if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") { - box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth; - } - - box.left -= elem.scrollLeft; - box.top -= elem.scrollTop; - - if (elem === offsetParent) { - box.left += elem.offsetLeft; - box.top += elem.offsetTop; - offsetParent = elem.offsetParent; - } - - box.bottom = box.top + box.height; - box.right = box.left + box.width; - } - - return box; - } - - function getActiveCellPosition() { - return absBox(activeCellNode); - } - - function getGridPosition() { - return absBox($container[0]) - } - - function handleActiveCellPositionChange() { - if (!activeCellNode) { - return; - } - - trigger(self.onActiveCellPositionChanged, {}); - - if (currentEditor) { - var cellBox = getActiveCellPosition(); - if (currentEditor.show && currentEditor.hide) { - if (!cellBox.visible) { - currentEditor.hide(); - } else { - currentEditor.show(); - } - } - - if (currentEditor.position) { - currentEditor.position(cellBox); - } - } - } - - function getCellEditor() { - return currentEditor; - } - - function getActiveCell() { - if (!activeCellNode) { - return null; - } else { - return {row: activeRow, cell: activeCell}; - } - } - - function getActiveCellNode() { - return activeCellNode; - } - - function scrollRowIntoView(row, doPaging) { - var rowAtTop = row * options.rowHeight; - var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0); - - // need to page down? - if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) { - scrollTo(doPaging ? rowAtTop : rowAtBottom); - render(); - } - // or page up? - else if (row * options.rowHeight < scrollTop + offset) { - scrollTo(doPaging ? rowAtBottom : rowAtTop); - render(); - } - } - - function scrollRowToTop(row) { - scrollTo(row * options.rowHeight); - render(); - } - - function getColspan(row, cell) { - var metadata = data.getItemMetadata && data.getItemMetadata(row); - if (!metadata || !metadata.columns) { - return 1; - } - - var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell]; - var colspan = (columnData && columnData.colspan); - if (colspan === "*") { - colspan = columns.length - cell; - } else { - colspan = colspan || 1; - } - - return colspan; - } - - function findFirstFocusableCell(row) { - var cell = 0; - while (cell < columns.length) { - if (canCellBeActive(row, cell)) { - return cell; - } - cell += getColspan(row, cell); - } - return null; - } - - function findLastFocusableCell(row) { - var cell = 0; - var lastFocusableCell = null; - while (cell < columns.length) { - if (canCellBeActive(row, cell)) { - lastFocusableCell = cell; - } - cell += getColspan(row, cell); - } - return lastFocusableCell; - } - - function gotoRight(row, cell, posX) { - if (cell >= columns.length) { - return null; - } - - do { - cell += getColspan(row, cell); - } - while (cell < columns.length && !canCellBeActive(row, cell)); - - if (cell < columns.length) { - return { - "row": row, - "cell": cell, - "posX": cell - }; - } - return null; - } - - function gotoLeft(row, cell, posX) { - if (cell <= 0) { - return null; - } - - var firstFocusableCell = findFirstFocusableCell(row); - if (firstFocusableCell === null || firstFocusableCell >= cell) { - return null; - } - - var prev = { - "row": row, - "cell": firstFocusableCell, - "posX": firstFocusableCell - }; - var pos; - while (true) { - pos = gotoRight(prev.row, prev.cell, prev.posX); - if (!pos) { - return null; - } - if (pos.cell >= cell) { - return prev; - } - prev = pos; - } - } - - function gotoDown(row, cell, posX) { - var prevCell; - while (true) { - if (++row >= getDataLength() + (options.enableAddRow ? 1 : 0)) { - return null; - } - - prevCell = cell = 0; - while (cell <= posX) { - prevCell = cell; - cell += getColspan(row, cell); - } - - if (canCellBeActive(row, prevCell)) { - return { - "row": row, - "cell": prevCell, - "posX": posX - }; - } - } - } - - function gotoUp(row, cell, posX) { - var prevCell; - while (true) { - if (--row < 0) { - return null; - } - - prevCell = cell = 0; - while (cell <= posX) { - prevCell = cell; - cell += getColspan(row, cell); - } - - if (canCellBeActive(row, prevCell)) { - return { - "row": row, - "cell": prevCell, - "posX": posX - }; - } - } - } - - function gotoNext(row, cell, posX) { - if (row == null && cell == null) { - row = cell = posX = 0; - if (canCellBeActive(row, cell)) { - return { - "row": row, - "cell": cell, - "posX": cell - }; - } - } - - var pos = gotoRight(row, cell, posX); - if (pos) { - return pos; - } - - var firstFocusableCell = null; - while (++row < getDataLength() + (options.enableAddRow ? 1 : 0)) { - firstFocusableCell = findFirstFocusableCell(row); - if (firstFocusableCell !== null) { - return { - "row": row, - "cell": firstFocusableCell, - "posX": firstFocusableCell - }; - } - } - return null; - } - - function gotoPrev(row, cell, posX) { - if (row == null && cell == null) { - row = getDataLength() + (options.enableAddRow ? 1 : 0) - 1; - cell = posX = columns.length - 1; - if (canCellBeActive(row, cell)) { - return { - "row": row, - "cell": cell, - "posX": cell - }; - } - } - - var pos; - var lastSelectableCell; - while (!pos) { - pos = gotoLeft(row, cell, posX); - if (pos) { - break; - } - if (--row < 0) { - return null; - } - - cell = 0; - lastSelectableCell = findLastFocusableCell(row); - if (lastSelectableCell !== null) { - pos = { - "row": row, - "cell": lastSelectableCell, - "posX": lastSelectableCell - }; - } - } - return pos; - } - - function navigateRight() { - return navigate("right"); - } - - function navigateLeft() { - return navigate("left"); - } - - function navigateDown() { - return navigate("down"); - } - - function navigateUp() { - return navigate("up"); - } - - function navigateNext() { - return navigate("next"); - } - - function navigatePrev() { - return navigate("prev"); - } - - /** - * @param {string} dir Navigation direction. - * @return {boolean} Whether navigation resulted in a change of active cell. - */ - function navigate(dir) { - if (!options.enableCellNavigation) { - return false; - } - - if (!activeCellNode && dir != "prev" && dir != "next") { - return false; - } - - if (!getEditorLock().commitCurrentEdit()) { - return true; - } - setFocus(); - - var tabbingDirections = { - "up": -1, - "down": 1, - "left": -1, - "right": 1, - "prev": -1, - "next": 1 - }; - tabbingDirection = tabbingDirections[dir]; - - var stepFunctions = { - "up": gotoUp, - "down": gotoDown, - "left": gotoLeft, - "right": gotoRight, - "prev": gotoPrev, - "next": gotoNext - }; - var stepFn = stepFunctions[dir]; - var pos = stepFn(activeRow, activeCell, activePosX); - if (pos) { - var isAddNewRow = (pos.row == getDataLength()); - scrollCellIntoView(pos.row, pos.cell, !isAddNewRow); - setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit); - activePosX = pos.posX; - return true; - } else { - setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit); - return false; - } - } - - function getCellNode(row, cell) { - if (rowsCache[row]) { - ensureCellNodesInRowsCache(row); - return rowsCache[row].cellNodesByColumnIdx[cell]; - } - return null; - } - - function setActiveCell(row, cell) { - if (!initialized) { return; } - if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) { - return; - } - - if (!options.enableCellNavigation) { - return; - } - - scrollCellIntoView(row, cell, false); - setActiveCellInternal(getCellNode(row, cell), false); - } - - function canCellBeActive(row, cell) { - if (!options.enableCellNavigation || row >= getDataLength() + (options.enableAddRow ? 1 : 0) || - row < 0 || cell >= columns.length || cell < 0) { - return false; - } - - var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); - if (rowMetadata && typeof rowMetadata.focusable === "boolean") { - return rowMetadata.focusable; - } - - var columnMetadata = rowMetadata && rowMetadata.columns; - if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") { - return columnMetadata[columns[cell].id].focusable; - } - if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") { - return columnMetadata[cell].focusable; - } - - return columns[cell].focusable; - } - - function canCellBeSelected(row, cell) { - if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) { - return false; - } - - var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); - if (rowMetadata && typeof rowMetadata.selectable === "boolean") { - return rowMetadata.selectable; - } - - var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]); - if (columnMetadata && typeof columnMetadata.selectable === "boolean") { - return columnMetadata.selectable; - } - - return columns[cell].selectable; - } - - function gotoCell(row, cell, forceEdit) { - if (!initialized) { return; } - if (!canCellBeActive(row, cell)) { - return; - } - - if (!getEditorLock().commitCurrentEdit()) { - return; - } - - scrollCellIntoView(row, cell, false); - - var newCell = getCellNode(row, cell); - - // if selecting the 'add new' row, start editing right away - setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit); - - // if no editor was created, set the focus back on the grid - if (!currentEditor) { - setFocus(); - } - } - - - ////////////////////////////////////////////////////////////////////////////////////////////// - // IEditor implementation for the editor lock - - function commitCurrentEdit() { - var item = getDataItem(activeRow); - var column = columns[activeCell]; - - if (currentEditor) { - if (currentEditor.isValueChanged()) { - var validationResults = currentEditor.validate(); - - if (validationResults.valid) { - if (activeRow < getDataLength()) { - var editCommand = { - row: activeRow, - cell: activeCell, - editor: currentEditor, - serializedValue: currentEditor.serializeValue(), - prevSerializedValue: serializedEditorValue, - execute: function () { - this.editor.applyValue(item, this.serializedValue); - updateRow(this.row); - }, - undo: function () { - this.editor.applyValue(item, this.prevSerializedValue); - updateRow(this.row); - } - }; - - if (options.editCommandHandler) { - makeActiveCellNormal(); - options.editCommandHandler(item, column, editCommand); - } else { - editCommand.execute(); - makeActiveCellNormal(); - } - - trigger(self.onCellChange, { - row: activeRow, - cell: activeCell, - item: item - }); - } else { - var newItem = {}; - currentEditor.applyValue(newItem, currentEditor.serializeValue()); - makeActiveCellNormal(); - trigger(self.onAddNewRow, {item: newItem, column: column}); - } - - // check whether the lock has been re-acquired by event handlers - return !getEditorLock().isActive(); - } else { - // Re-add the CSS class to trigger transitions, if any. - $(activeCellNode).removeClass("invalid"); - $(activeCellNode).width(); // force layout - $(activeCellNode).addClass("invalid"); - - trigger(self.onValidationError, { - editor: currentEditor, - cellNode: activeCellNode, - validationResults: validationResults, - row: activeRow, - cell: activeCell, - column: column - }); - - currentEditor.focus(); - return false; - } - } - - makeActiveCellNormal(); - } - return true; - } - - function cancelCurrentEdit() { - makeActiveCellNormal(); - return true; - } - - function rowsToRanges(rows) { - var ranges = []; - var lastCell = columns.length - 1; - for (var i = 0; i < rows.length; i++) { - ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell)); - } - return ranges; - } - - function getSelectedRows() { - if (!selectionModel) { - throw "Selection model is not set"; - } - return selectedRows; - } - - function setSelectedRows(rows) { - if (!selectionModel) { - throw "Selection model is not set"; - } - selectionModel.setSelectedRanges(rowsToRanges(rows)); - } - - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Debug - - this.debug = function () { - var s = ""; - - s += ("\n" + "counter_rows_rendered: " + counter_rows_rendered); - s += ("\n" + "counter_rows_removed: " + counter_rows_removed); - s += ("\n" + "renderedRows: " + renderedRows); - s += ("\n" + "numVisibleRows: " + numVisibleRows); - s += ("\n" + "maxSupportedCssHeight: " + maxSupportedCssHeight); - s += ("\n" + "n(umber of pages): " + n); - s += ("\n" + "(current) page: " + page); - s += ("\n" + "page height (ph): " + ph); - s += ("\n" + "vScrollDir: " + vScrollDir); - - alert(s); - }; - - // a debug helper to be able to access private members - this.eval = function (expr) { - return eval(expr); - }; - - ////////////////////////////////////////////////////////////////////////////////////////////// - // Public API - - $.extend(this, { - "slickGridVersion": "2.1", - - // Events - "onScroll": new Slick.Event(), - "onSort": new Slick.Event(), - "onHeaderMouseEnter": new Slick.Event(), - "onHeaderMouseLeave": new Slick.Event(), - "onHeaderContextMenu": new Slick.Event(), - "onHeaderClick": new Slick.Event(), - "onHeaderCellRendered": new Slick.Event(), - "onBeforeHeaderCellDestroy": new Slick.Event(), - "onHeaderRowCellRendered": new Slick.Event(), - "onBeforeHeaderRowCellDestroy": new Slick.Event(), - "onMouseEnter": new Slick.Event(), - "onMouseLeave": new Slick.Event(), - "onClick": new Slick.Event(), - "onDblClick": new Slick.Event(), - "onContextMenu": new Slick.Event(), - "onKeyDown": new Slick.Event(), - "onAddNewRow": new Slick.Event(), - "onValidationError": new Slick.Event(), - "onViewportChanged": new Slick.Event(), - "onColumnsReordered": new Slick.Event(), - "onColumnsResized": new Slick.Event(), - "onCellChange": new Slick.Event(), - "onBeforeEditCell": new Slick.Event(), - "onBeforeCellEditorDestroy": new Slick.Event(), - "onBeforeDestroy": new Slick.Event(), - "onActiveCellChanged": new Slick.Event(), - "onActiveCellPositionChanged": new Slick.Event(), - "onDragInit": new Slick.Event(), - "onDragStart": new Slick.Event(), - "onDrag": new Slick.Event(), - "onDragEnd": new Slick.Event(), - "onSelectedRowsChanged": new Slick.Event(), - "onCellCssStylesChanged": new Slick.Event(), - - // Methods - "registerPlugin": registerPlugin, - "unregisterPlugin": unregisterPlugin, - "getColumns": getColumns, - "setColumns": setColumns, - "getColumnIndex": getColumnIndex, - "updateColumnHeader": updateColumnHeader, - "setSortColumn": setSortColumn, - "setSortColumns": setSortColumns, - "getSortColumns": getSortColumns, - "autosizeColumns": autosizeColumns, - "getOptions": getOptions, - "setOptions": setOptions, - "getData": getData, - "getDataLength": getDataLength, - "getDataItem": getDataItem, - "setData": setData, - "getSelectionModel": getSelectionModel, - "setSelectionModel": setSelectionModel, - "getSelectedRows": getSelectedRows, - "setSelectedRows": setSelectedRows, - "getContainerNode": getContainerNode, - - "render": render, - "invalidate": invalidate, - "invalidateRow": invalidateRow, - "invalidateRows": invalidateRows, - "invalidateAllRows": invalidateAllRows, - "updateCell": updateCell, - "updateRow": updateRow, - "getViewport": getVisibleRange, - "getRenderedRange": getRenderedRange, - "resizeCanvas": resizeCanvas, - "updateRowCount": updateRowCount, - "scrollRowIntoView": scrollRowIntoView, - "scrollRowToTop": scrollRowToTop, - "scrollCellIntoView": scrollCellIntoView, - "getCanvasNode": getCanvasNode, - "focus": setFocus, - - "getCellFromPoint": getCellFromPoint, - "getCellFromEvent": getCellFromEvent, - "getActiveCell": getActiveCell, - "setActiveCell": setActiveCell, - "getActiveCellNode": getActiveCellNode, - "getActiveCellPosition": getActiveCellPosition, - "resetActiveCell": resetActiveCell, - "editActiveCell": makeActiveCellEditable, - "getCellEditor": getCellEditor, - "getCellNode": getCellNode, - "getCellNodeBox": getCellNodeBox, - "canCellBeSelected": canCellBeSelected, - "canCellBeActive": canCellBeActive, - "navigatePrev": navigatePrev, - "navigateNext": navigateNext, - "navigateUp": navigateUp, - "navigateDown": navigateDown, - "navigateLeft": navigateLeft, - "navigateRight": navigateRight, - "gotoCell": gotoCell, - "getTopPanel": getTopPanel, - "setTopPanelVisibility": setTopPanelVisibility, - "setHeaderRowVisibility": setHeaderRowVisibility, - "getHeaderRow": getHeaderRow, - "getHeaderRowColumn": getHeaderRowColumn, - "getGridPosition": getGridPosition, - "flashCell": flashCell, - "addCellCssStyles": addCellCssStyles, - "setCellCssStyles": setCellCssStyles, - "removeCellCssStyles": removeCellCssStyles, - "getCellCssStyles": getCellCssStyles, - - "init": finishInitialization, - "destroy": destroy, - - // IEditor implementation - "getEditorLock": getEditorLock, - "getEditController": getEditController - }); - - init(); - } -}(jQuery)); +/** + * @license + * (c) 2009-2012 Michael Leibman + * michael{dot}leibman{at}gmail{dot}com + * http://github.com/mleibman/slickgrid + * + * Distributed under MIT license. + * All rights reserved. + * + * SlickGrid v2.1 + * + * NOTES: + * Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods. + * This increases the speed dramatically, but can only be done safely because there are no event handlers + * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() + * and do proper cleanup. + */ + +// make sure required JavaScript modules are loaded +if (typeof jQuery === "undefined") { + throw "SlickGrid requires jquery module to be loaded"; +} +if (!jQuery.fn.drag) { + throw "SlickGrid requires jquery.event.drag module to be loaded"; +} +if (typeof Slick === "undefined") { + throw "slick.core.js not loaded"; +} + + +(function ($) { + // Slick.Grid + $.extend(true, window, { + Slick: { + Grid: SlickGrid + } + }); + + // shared across all grids on the page + var scrollbarDimensions; + var maxSupportedCssHeight; // browser's breaking point + + ////////////////////////////////////////////////////////////////////////////////////////////// + // SlickGrid class implementation (available as Slick.Grid) + + /** + * Creates a new instance of the grid. + * @class SlickGrid + * @constructor + * @param {Node} container Container node to create the grid in. + * @param {Array,Object} data An array of objects for databinding. + * @param {Array} columns An array of column definitions. + * @param {Object} options Grid options. + **/ + function SlickGrid(container, data, columns, options) { + // settings + var defaults = { + explicitInitialization: false, + rowHeight: 25, + defaultColumnWidth: 80, + enableAddRow: false, + leaveSpaceForNewRows: false, + editable: false, + autoEdit: true, + enableCellNavigation: true, + enableColumnReorder: true, + asyncEditorLoading: false, + asyncEditorLoadDelay: 100, + forceFitColumns: false, + enableAsyncPostRender: false, + asyncPostRenderDelay: 50, + autoHeight: false, + editorLock: Slick.GlobalEditorLock, + showHeaderRow: false, + headerRowHeight: 25, + showTopPanel: false, + topPanelHeight: 25, + formatterFactory: null, + editorFactory: null, + cellFlashingCssClass: "flashing", + selectedCellCssClass: "selected", + multiSelect: true, + enableTextSelectionOnCells: false, + dataItemColumnValueExtractor: null, + fullWidthRows: false, + multiColumnSort: false, + defaultFormatter: defaultFormatter, + forceSyncScrolling: false + }; + + var columnDefaults = { + name: "", + resizable: true, + sortable: false, + minWidth: 30, + rerenderOnResize: false, + headerCssClass: null, + defaultSortAsc: true, + focusable: true, + selectable: true + }; + + // scroller + var th; // virtual height + var h; // real scrollable height + var ph; // page height + var n; // number of pages + var cj; // "jumpiness" coefficient + + var page = 0; // current page + var offset = 0; // current page offset + var vScrollDir = 1; + + // private + var initialized = false; + var $container; + var uid = "slickgrid_" + Math.round(1000000 * Math.random()); + var self = this; + var $focusSink, $focusSink2; + var $headerScroller; + var $headers; + var $headerRow, $headerRowScroller, $headerRowSpacer; + var $topPanelScroller; + var $topPanel; + var $viewport; + var $canvas; + var $style; + var $boundAncestors; + var stylesheet, columnCssRulesL, columnCssRulesR; + var viewportH, viewportW; + var canvasWidth; + var viewportHasHScroll, viewportHasVScroll; + var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding + cellWidthDiff = 0, cellHeightDiff = 0; + var absoluteColumnMinWidth; + var numberOfRows = 0; + + var tabbingDirection = 1; + var activePosX; + var activeRow, activeCell; + var activeCellNode = null; + var currentEditor = null; + var serializedEditorValue; + var editController; + + var rowsCache = {}; + var renderedRows = 0; + var numVisibleRows; + var prevScrollTop = 0; + var scrollTop = 0; + var lastRenderedScrollTop = 0; + var lastRenderedScrollLeft = 0; + var prevScrollLeft = 0; + var scrollLeft = 0; + + var selectionModel; + var selectedRows = []; + + var plugins = []; + var cellCssClasses = {}; + + var columnsById = {}; + var sortColumns = []; + var columnPosLeft = []; + var columnPosRight = []; + + + // async call handles + var h_editorLoader = null; + var h_render = null; + var h_postrender = null; + var postProcessedRows = {}; + var postProcessToRow = null; + var postProcessFromRow = null; + + // perf counters + var counter_rows_rendered = 0; + var counter_rows_removed = 0; + + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Initialization + + function init() { + $container = $(container); + if ($container.length < 1) { + throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM."); + } + + // calculate these only once and share between grid instances + maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight(); + scrollbarDimensions = scrollbarDimensions || measureScrollbar(); + + options = $.extend({}, defaults, options); + validateAndEnforceOptions(); + columnDefaults.width = options.defaultColumnWidth; + + columnsById = {}; + for (var i = 0; i < columns.length; i++) { + var m = columns[i] = $.extend({}, columnDefaults, columns[i]); + columnsById[m.id] = i; + if (m.minWidth && m.width < m.minWidth) { + m.width = m.minWidth; + } + if (m.maxWidth && m.width > m.maxWidth) { + m.width = m.maxWidth; + } + } + + // validate loaded JavaScript modules against requested options + if (options.enableColumnReorder && !$.fn.sortable) { + throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded"); + } + + editController = { + "commitCurrentEdit": commitCurrentEdit, + "cancelCurrentEdit": cancelCurrentEdit + }; + + $container + .empty() + .css("overflow", "hidden") + .css("outline", 0) + .addClass(uid) + .addClass("ui-widget"); + + // set up a positioning container if needed + if (!/relative|absolute|fixed/.test($container.css("position"))) { + $container.css("position", "relative"); + } + + $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container); + + $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); + $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller); + $headers.width(getHeadersWidth()); + + $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); + $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller); + $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>") + .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") + .appendTo($headerRowScroller); + + $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container); + $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller); + + if (!options.showTopPanel) { + $topPanelScroller.hide(); + } + + if (!options.showHeaderRow) { + $headerRowScroller.hide(); + } + + $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container); + $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); + + $canvas = $("<div class='grid-canvas' />").appendTo($viewport); + + $focusSink2 = $focusSink.clone().appendTo($container); + + if (!options.explicitInitialization) { + finishInitialization(); + } + } + + function finishInitialization() { + if (!initialized) { + initialized = true; + + viewportW = parseFloat($.css($container[0], "width", true)); + + // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?) + // calculate the diff so we can set consistent sizes + measureCellPaddingAndBorder(); + + // for usability reasons, all text selection in SlickGrid is disabled + // with the exception of input and textarea elements (selection must + // be enabled there so that editors work as expected); note that + // selection in grid cells (grid body) is already unavailable in + // all browsers except IE + disableSelection($headers); // disable all text selection in header (including input and textarea) + + if (!options.enableTextSelectionOnCells) { + // disable text selection in grid cells except in input and textarea elements + // (this is IE-specific, because selectstart event will only fire in IE) + $viewport.bind("selectstart.ui", function (event) { + return $(event.target).is("input,textarea"); + }); + } + + updateColumnCaches(); + createColumnHeaders(); + setupColumnSort(); + createCssRules(); + resizeCanvas(); + bindAncestorScrollEvents(); + + $container + .bind("resize.slickgrid", resizeCanvas); + $viewport + .bind("scroll", handleScroll); + $headerScroller + .bind("contextmenu", handleHeaderContextMenu) + .bind("click", handleHeaderClick) + .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter) + .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave); + $headerRowScroller + .bind("scroll", handleHeaderRowScroll); + $focusSink.add($focusSink2) + .bind("keydown", handleKeyDown); + $canvas + .bind("keydown", handleKeyDown) + .bind("click", handleClick) + .bind("dblclick", handleDblClick) + .bind("contextmenu", handleContextMenu) + .bind("draginit", handleDragInit) + .bind("dragstart", {distance: 3}, handleDragStart) + .bind("drag", handleDrag) + .bind("dragend", handleDragEnd) + .delegate(".slick-cell", "mouseenter", handleMouseEnter) + .delegate(".slick-cell", "mouseleave", handleMouseLeave); + } + } + + function registerPlugin(plugin) { + plugins.unshift(plugin); + plugin.init(self); + } + + function unregisterPlugin(plugin) { + for (var i = plugins.length; i >= 0; i--) { + if (plugins[i] === plugin) { + if (plugins[i].destroy) { + plugins[i].destroy(); + } + plugins.splice(i, 1); + break; + } + } + } + + function setSelectionModel(model) { + if (selectionModel) { + selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged); + if (selectionModel.destroy) { + selectionModel.destroy(); + } + } + + selectionModel = model; + if (selectionModel) { + selectionModel.init(self); + selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged); + } + } + + function getSelectionModel() { + return selectionModel; + } + + function getCanvasNode() { + return $canvas[0]; + } + + function measureScrollbar() { + var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body"); + var dim = { + width: $c.width() - $c[0].clientWidth, + height: $c.height() - $c[0].clientHeight + }; + $c.remove(); + return dim; + } + + function getHeadersWidth() { + var headersWidth = 0; + for (var i = 0, ii = columns.length; i < ii; i++) { + var width = columns[i].width; + headersWidth += width; + } + headersWidth += scrollbarDimensions.width; + return Math.max(headersWidth, viewportW) + 1000; + } + + function getCanvasWidth() { + var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW; + var rowWidth = 0; + var i = columns.length; + while (i--) { + rowWidth += columns[i].width; + } + return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth; + } + + function updateCanvasWidth(forceColumnWidthsUpdate) { + var oldCanvasWidth = canvasWidth; + canvasWidth = getCanvasWidth(); + + if (canvasWidth != oldCanvasWidth) { + $canvas.width(canvasWidth); + $headerRow.width(canvasWidth); + $headers.width(getHeadersWidth()); + viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width); + } + + $headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); + + if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) { + applyColumnWidths(); + } + } + + function disableSelection($target) { + if ($target && $target.jquery) { + $target + .attr("unselectable", "on") + .css("MozUserSelect", "none") + .bind("selectstart.ui", function () { + return false; + }); // from jquery:ui.core.js 1.7.2 + } + } + + function getMaxSupportedCssHeight() { + var supportedHeight = 1000000; + // FF reports the height back but still renders blank after ~6M px + var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000; + var div = $("<div style='display:none' />").appendTo(document.body); + + while (true) { + var test = supportedHeight * 2; + div.css("height", test); + if (test > testUpTo || div.height() !== test) { + break; + } else { + supportedHeight = test; + } + } + + div.remove(); + return supportedHeight; + } + + // TODO: this is static. need to handle page mutation. + function bindAncestorScrollEvents() { + var elem = $canvas[0]; + while ((elem = elem.parentNode) != document.body && elem != null) { + // bind to scroll containers only + if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) { + var $elem = $(elem); + if (!$boundAncestors) { + $boundAncestors = $elem; + } else { + $boundAncestors = $boundAncestors.add($elem); + } + $elem.bind("scroll." + uid, handleActiveCellPositionChange); + } + } + } + + function unbindAncestorScrollEvents() { + if (!$boundAncestors) { + return; + } + $boundAncestors.unbind("scroll." + uid); + $boundAncestors = null; + } + + function updateColumnHeader(columnId, title, toolTip) { + if (!initialized) { return; } + var idx = getColumnIndex(columnId); + if (idx == null) { + return; + } + + var columnDef = columns[idx]; + var $header = $headers.children().eq(idx); + if ($header) { + if (title !== undefined) { + columns[idx].name = title; + } + if (toolTip !== undefined) { + columns[idx].toolTip = toolTip; + } + + trigger(self.onBeforeHeaderCellDestroy, { + "node": $header[0], + "column": columnDef + }); + + $header + .attr("title", toolTip || "") + .children().eq(0).html(title); + + trigger(self.onHeaderCellRendered, { + "node": $header[0], + "column": columnDef + }); + } + } + + function getHeaderRow() { + return $headerRow[0]; + } + + function getHeaderRowColumn(columnId) { + var idx = getColumnIndex(columnId); + var $header = $headerRow.children().eq(idx); + return $header && $header[0]; + } + + function createColumnHeaders() { + function onMouseEnter() { + $(this).addClass("ui-state-hover"); + } + + function onMouseLeave() { + $(this).removeClass("ui-state-hover"); + } + + $headers.find(".slick-header-column") + .each(function() { + var columnDef = $(this).data("column"); + if (columnDef) { + trigger(self.onBeforeHeaderCellDestroy, { + "node": this, + "column": columnDef + }); + } + }); + $headers.empty(); + $headers.width(getHeadersWidth()); + + $headerRow.find(".slick-headerrow-column") + .each(function() { + var columnDef = $(this).data("column"); + if (columnDef) { + trigger(self.onBeforeHeaderRowCellDestroy, { + "node": this, + "column": columnDef + }); + } + }); + $headerRow.empty(); + + for (var i = 0; i < columns.length; i++) { + var m = columns[i]; + + var header = $("<div class='ui-state-default slick-header-column' />") + .html("<span class='slick-column-name'>" + m.name + "</span>") + .width(m.width - headerColumnWidthDiff) + .attr("id", "" + uid + m.id) + .attr("title", m.toolTip || "") + .data("column", m) + .addClass(m.headerCssClass || "") + .appendTo($headers); + + if (options.enableColumnReorder || m.sortable) { + header + .on('mouseenter', onMouseEnter) + .on('mouseleave', onMouseLeave); + } + + if (m.sortable) { + header.addClass("slick-header-sortable"); + header.append("<span class='slick-sort-indicator' />"); + } + + trigger(self.onHeaderCellRendered, { + "node": header[0], + "column": m + }); + + if (options.showHeaderRow) { + var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>") + .data("column", m) + .appendTo($headerRow); + + trigger(self.onHeaderRowCellRendered, { + "node": headerRowCell[0], + "column": m + }); + } + } + + setSortColumns(sortColumns); + setupColumnResize(); + if (options.enableColumnReorder) { + setupColumnReorder(); + } + } + + function setupColumnSort() { + $headers.click(function (e) { + // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328) + e.metaKey = e.metaKey || e.ctrlKey; + + if ($(e.target).hasClass("slick-resizable-handle")) { + return; + } + + var $col = $(e.target).closest(".slick-header-column"); + if (!$col.length) { + return; + } + + var column = $col.data("column"); + if (column.sortable) { + if (!getEditorLock().commitCurrentEdit()) { + return; + } + + var sortOpts = null; + var i = 0; + for (; i < sortColumns.length; i++) { + if (sortColumns[i].columnId == column.id) { + sortOpts = sortColumns[i]; + sortOpts.sortAsc = !sortOpts.sortAsc; + break; + } + } + + if (e.metaKey && options.multiColumnSort) { + if (sortOpts) { + sortColumns.splice(i, 1); + } + } + else { + if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) { + sortColumns = []; + } + + if (!sortOpts) { + sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc }; + sortColumns.push(sortOpts); + } else if (sortColumns.length == 0) { + sortColumns.push(sortOpts); + } + } + + setSortColumns(sortColumns); + + if (!options.multiColumnSort) { + trigger(self.onSort, { + multiColumnSort: false, + sortCol: column, + sortAsc: sortOpts.sortAsc}, e); + } else { + trigger(self.onSort, { + multiColumnSort: true, + sortCols: $.map(sortColumns, function(col) { + return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc }; + })}, e); + } + } + }); + } + + function setupColumnReorder() { + $headers.filter(":ui-sortable").sortable("destroy"); + $headers.sortable({ + containment: "parent", + distance: 3, + axis: "x", + cursor: "default", + tolerance: "intersection", + helper: "clone", + placeholder: "slick-sortable-placeholder ui-state-default slick-header-column", + forcePlaceholderSize: true, + start: function (e, ui) { + $(ui.helper).addClass("slick-header-column-active"); + }, + beforeStop: function (e, ui) { + $(ui.helper).removeClass("slick-header-column-active"); + }, + stop: function (e) { + if (!getEditorLock().commitCurrentEdit()) { + $(this).sortable("cancel"); + return; + } + + var reorderedIds = $headers.sortable("toArray"); + var reorderedColumns = []; + for (var i = 0; i < reorderedIds.length; i++) { + reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]); + } + setColumns(reorderedColumns); + + trigger(self.onColumnsReordered, {}); + e.stopPropagation(); + setupColumnResize(); + } + }); + } + + function setupColumnResize() { + var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable; + columnElements = $headers.children(); + columnElements.find(".slick-resizable-handle").remove(); + columnElements.each(function (i, e) { + if (columns[i].resizable) { + if (firstResizable === undefined) { + firstResizable = i; + } + lastResizable = i; + } + }); + if (firstResizable === undefined) { + return; + } + columnElements.each(function (i, e) { + if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) { + return; + } + $col = $(e); + $("<div class='slick-resizable-handle' />") + .appendTo(e) + .bind("dragstart", function (e, dd) { + if (!getEditorLock().commitCurrentEdit()) { + return false; + } + pageX = e.pageX; + $(this).parent().addClass("slick-header-column-active"); + var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; + // lock each column's width option to current width + columnElements.each(function (i, e) { + columns[i].previousWidth = $(e).outerWidth(); + }); + if (options.forceFitColumns) { + shrinkLeewayOnRight = 0; + stretchLeewayOnRight = 0; + // colums on right affect maxPageX/minPageX + for (j = i + 1; j < columnElements.length; j++) { + c = columns[j]; + if (c.resizable) { + if (stretchLeewayOnRight !== null) { + if (c.maxWidth) { + stretchLeewayOnRight += c.maxWidth - c.previousWidth; + } else { + stretchLeewayOnRight = null; + } + } + shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); + } + } + } + var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0; + for (j = 0; j <= i; j++) { + // columns on left only affect minPageX + c = columns[j]; + if (c.resizable) { + if (stretchLeewayOnLeft !== null) { + if (c.maxWidth) { + stretchLeewayOnLeft += c.maxWidth - c.previousWidth; + } else { + stretchLeewayOnLeft = null; + } + } + shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); + } + } + if (shrinkLeewayOnRight === null) { + shrinkLeewayOnRight = 100000; + } + if (shrinkLeewayOnLeft === null) { + shrinkLeewayOnLeft = 100000; + } + if (stretchLeewayOnRight === null) { + stretchLeewayOnRight = 100000; + } + if (stretchLeewayOnLeft === null) { + stretchLeewayOnLeft = 100000; + } + maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); + minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); + }) + .bind("drag", function (e, dd) { + var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x; + if (d < 0) { // shrink column + x = d; + for (j = i; j >= 0; j--) { + c = columns[j]; + if (c.resizable) { + actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); + if (x && c.previousWidth + x < actualMinWidth) { + x += c.previousWidth - actualMinWidth; + c.width = actualMinWidth; + } else { + c.width = c.previousWidth + x; + x = 0; + } + } + } + + if (options.forceFitColumns) { + x = -d; + for (j = i + 1; j < columnElements.length; j++) { + c = columns[j]; + if (c.resizable) { + if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { + x -= c.maxWidth - c.previousWidth; + c.width = c.maxWidth; + } else { + c.width = c.previousWidth + x; + x = 0; + } + } + } + } + } else { // stretch column + x = d; + for (j = i; j >= 0; j--) { + c = columns[j]; + if (c.resizable) { + if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { + x -= c.maxWidth - c.previousWidth; + c.width = c.maxWidth; + } else { + c.width = c.previousWidth + x; + x = 0; + } + } + } + + if (options.forceFitColumns) { + x = -d; + for (j = i + 1; j < columnElements.length; j++) { + c = columns[j]; + if (c.resizable) { + actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); + if (x && c.previousWidth + x < actualMinWidth) { + x += c.previousWidth - actualMinWidth; + c.width = actualMinWidth; + } else { + c.width = c.previousWidth + x; + x = 0; + } + } + } + } + } + applyColumnHeaderWidths(); + if (options.syncColumnCellResize) { + applyColumnWidths(); + } + }) + .bind("dragend", function (e, dd) { + var newWidth; + $(this).parent().removeClass("slick-header-column-active"); + for (j = 0; j < columnElements.length; j++) { + c = columns[j]; + newWidth = $(columnElements[j]).outerWidth(); + + if (c.previousWidth !== newWidth && c.rerenderOnResize) { + invalidateAllRows(); + } + } + updateCanvasWidth(true); + render(); + trigger(self.onColumnsResized, {}); + }); + }); + } + + function getVBoxDelta($el) { + var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; + var delta = 0; + $.each(p, function (n, val) { + delta += parseFloat($el.css(val)) || 0; + }); + return delta; + } + + function measureCellPaddingAndBorder() { + var el; + var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"]; + var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; + + el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers); + headerColumnWidthDiff = headerColumnHeightDiff = 0; + $.each(h, function (n, val) { + headerColumnWidthDiff += parseFloat(el.css(val)) || 0; + }); + $.each(v, function (n, val) { + headerColumnHeightDiff += parseFloat(el.css(val)) || 0; + }); + el.remove(); + + var r = $("<div class='slick-row' />").appendTo($canvas); + el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r); + cellWidthDiff = cellHeightDiff = 0; + $.each(h, function (n, val) { + cellWidthDiff += parseFloat(el.css(val)) || 0; + }); + $.each(v, function (n, val) { + cellHeightDiff += parseFloat(el.css(val)) || 0; + }); + r.remove(); + + absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff); + } + + function createCssRules() { + $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head")); + var rowHeight = (options.rowHeight - cellHeightDiff); + var rules = [ + "." + uid + " .slick-header-column { left: 1000px; }", + "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }", + "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }", + "." + uid + " .slick-cell { height:" + rowHeight + "px; }", + "." + uid + " .slick-row { height:" + options.rowHeight + "px; }" + ]; + + for (var i = 0; i < columns.length; i++) { + rules.push("." + uid + " .l" + i + " { }"); + rules.push("." + uid + " .r" + i + " { }"); + } + + if ($style[0].styleSheet) { // IE + $style[0].styleSheet.cssText = rules.join(" "); + } else { + $style[0].appendChild(document.createTextNode(rules.join(" "))); + } + } + + function getColumnCssRules(idx) { + if (!stylesheet) { + var sheets = document.styleSheets; + for (var i = 0; i < sheets.length; i++) { + if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) { + stylesheet = sheets[i]; + break; + } + } + + if (!stylesheet) { + throw new Error("Cannot find stylesheet."); + } + + // find and cache column CSS rules + columnCssRulesL = []; + columnCssRulesR = []; + var cssRules = (stylesheet.cssRules || stylesheet.rules); + var matches, columnIdx; + for (var i = 0; i < cssRules.length; i++) { + var selector = cssRules[i].selectorText; + if (matches = /\.l\d+/.exec(selector)) { + columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10); + columnCssRulesL[columnIdx] = cssRules[i]; + } else if (matches = /\.r\d+/.exec(selector)) { + columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10); + columnCssRulesR[columnIdx] = cssRules[i]; + } + } + } + + return { + "left": columnCssRulesL[idx], + "right": columnCssRulesR[idx] + }; + } + + function removeCssRules() { + $style.remove(); + stylesheet = null; + } + + function destroy() { + getEditorLock().cancelCurrentEdit(); + + trigger(self.onBeforeDestroy, {}); + + var i = plugins.length; + while(i--) { + unregisterPlugin(plugins[i]); + } + + if (options.enableColumnReorder) { + $headers.filter(":ui-sortable").sortable("destroy"); + } + + unbindAncestorScrollEvents(); + $container.unbind(".slickgrid"); + removeCssRules(); + + $canvas.unbind("draginit dragstart dragend drag"); + $container.empty().removeClass(uid); + } + + + ////////////////////////////////////////////////////////////////////////////////////////////// + // General + + function trigger(evt, args, e) { + e = e || new Slick.EventData(); + args = args || {}; + args.grid = self; + return evt.notify(args, e, self); + } + + function getEditorLock() { + return options.editorLock; + } + + function getEditController() { + return editController; + } + + function getColumnIndex(id) { + return columnsById[id]; + } + + function autosizeColumns() { + var i, c, + widths = [], + shrinkLeeway = 0, + total = 0, + prevTotal, + availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW; + + for (i = 0; i < columns.length; i++) { + c = columns[i]; + widths.push(c.width); + total += c.width; + if (c.resizable) { + shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth); + } + } + + // shrink + prevTotal = total; + while (total > availWidth && shrinkLeeway) { + var shrinkProportion = (total - availWidth) / shrinkLeeway; + for (i = 0; i < columns.length && total > availWidth; i++) { + c = columns[i]; + var width = widths[i]; + if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) { + continue; + } + var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth); + var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1; + shrinkSize = Math.min(shrinkSize, width - absMinWidth); + total -= shrinkSize; + shrinkLeeway -= shrinkSize; + widths[i] -= shrinkSize; + } + if (prevTotal == total) { // avoid infinite loop + break; + } + prevTotal = total; + } + + // grow + prevTotal = total; + while (total < availWidth) { + var growProportion = availWidth / total; + for (i = 0; i < columns.length && total < availWidth; i++) { + c = columns[i]; + if (!c.resizable || c.maxWidth <= c.width) { + continue; + } + var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1; + total += growSize; + widths[i] += growSize; + } + if (prevTotal == total) { // avoid infinite loop + break; + } + prevTotal = total; + } + + var reRender = false; + for (i = 0; i < columns.length; i++) { + if (columns[i].rerenderOnResize && columns[i].width != widths[i]) { + reRender = true; + } + columns[i].width = widths[i]; + } + + applyColumnHeaderWidths(); + updateCanvasWidth(true); + if (reRender) { + invalidateAllRows(); + render(); + } + } + + function applyColumnHeaderWidths() { + if (!initialized) { return; } + var h; + for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) { + h = $(headers[i]); + if (h.width() !== columns[i].width - headerColumnWidthDiff) { + h.width(columns[i].width - headerColumnWidthDiff); + } + } + + updateColumnCaches(); + } + + function applyColumnWidths() { + var x = 0, w, rule; + for (var i = 0; i < columns.length; i++) { + w = columns[i].width; + + rule = getColumnCssRules(i); + rule.left.style.left = x + "px"; + rule.right.style.right = (canvasWidth - x - w) + "px"; + + x += columns[i].width; + } + } + + function setSortColumn(columnId, ascending) { + setSortColumns([{ columnId: columnId, sortAsc: ascending}]); + } + + function setSortColumns(cols) { + sortColumns = cols; + + var headerColumnEls = $headers.children(); + headerColumnEls + .removeClass("slick-header-column-sorted") + .find(".slick-sort-indicator") + .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc"); + + $.each(sortColumns, function(i, col) { + if (col.sortAsc == null) { + col.sortAsc = true; + } + var columnIndex = getColumnIndex(col.columnId); + if (columnIndex != null) { + headerColumnEls.eq(columnIndex) + .addClass("slick-header-column-sorted") + .find(".slick-sort-indicator") + .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc"); + } + }); + } + + function getSortColumns() { + return sortColumns; + } + + function handleSelectedRangesChanged(e, ranges) { + selectedRows = []; + var hash = {}; + for (var i = 0; i < ranges.length; i++) { + for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) { + if (!hash[j]) { // prevent duplicates + selectedRows.push(j); + hash[j] = {}; + } + for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) { + if (canCellBeSelected(j, k)) { + hash[j][columns[k].id] = options.selectedCellCssClass; + } + } + } + } + + setCellCssStyles(options.selectedCellCssClass, hash); + + trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e); + } + + function getColumns() { + return columns; + } + + function updateColumnCaches() { + // Pre-calculate cell boundaries. + columnPosLeft = []; + columnPosRight = []; + var x = 0; + for (var i = 0, ii = columns.length; i < ii; i++) { + columnPosLeft[i] = x; + columnPosRight[i] = x + columns[i].width; + x += columns[i].width; + } + } + + function setColumns(columnDefinitions) { + columns = columnDefinitions; + + columnsById = {}; + for (var i = 0; i < columns.length; i++) { + var m = columns[i] = $.extend({}, columnDefaults, columns[i]); + columnsById[m.id] = i; + if (m.minWidth && m.width < m.minWidth) { + m.width = m.minWidth; + } + if (m.maxWidth && m.width > m.maxWidth) { + m.width = m.maxWidth; + } + } + + updateColumnCaches(); + + if (initialized) { + invalidateAllRows(); + createColumnHeaders(); + removeCssRules(); + createCssRules(); + resizeCanvas(); + applyColumnWidths(); + handleScroll(); + } + } + + function getOptions() { + return options; + } + + function setOptions(args) { + if (!getEditorLock().commitCurrentEdit()) { + return; + } + + makeActiveCellNormal(); + + if (options.enableAddRow !== args.enableAddRow) { + invalidateRow(getDataLength()); + } + + options = $.extend(options, args); + validateAndEnforceOptions(); + + $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); + render(); + } + + function validateAndEnforceOptions() { + if (options.autoHeight) { + options.leaveSpaceForNewRows = false; + } + } + + function setData(newData, scrollToTop) { + data = newData; + invalidateAllRows(); + updateRowCount(); + if (scrollToTop) { + scrollTo(0); + } + } + + function getData() { + return data; + } + + function getDataLength() { + if (data.getLength) { + return data.getLength(); + } else { + return data.length; + } + } + + function getDataItem(i) { + if (data.getItem) { + return data.getItem(i); + } else { + return data[i]; + } + } + + function getTopPanel() { + return $topPanel[0]; + } + + function setTopPanelVisibility(visible) { + if (options.showTopPanel != visible) { + options.showTopPanel = visible; + if (visible) { + $topPanelScroller.slideDown("fast", resizeCanvas); + } else { + $topPanelScroller.slideUp("fast", resizeCanvas); + } + } + } + + function setHeaderRowVisibility(visible) { + if (options.showHeaderRow != visible) { + options.showHeaderRow = visible; + if (visible) { + $headerRowScroller.slideDown("fast", resizeCanvas); + } else { + $headerRowScroller.slideUp("fast", resizeCanvas); + } + } + } + + function getContainerNode() { + return $container.get(0); + } + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Rendering / Scrolling + + function getRowTop(row) { + return options.rowHeight * row - offset; + } + + function getRowFromPosition(y) { + return Math.floor((y + offset) / options.rowHeight); + } + + function scrollTo(y) { + y = Math.max(y, 0); + y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0)); + + var oldOffset = offset; + + page = Math.min(n - 1, Math.floor(y / ph)); + offset = Math.round(page * cj); + var newScrollTop = y - offset; + + if (offset != oldOffset) { + var range = getVisibleRange(newScrollTop); + cleanupRows(range); + updateRowPositions(); + } + + if (prevScrollTop != newScrollTop) { + vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1; + $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop); + + trigger(self.onViewportChanged, {}); + } + } + + function defaultFormatter(row, cell, value, columnDef, dataContext) { + if (value == null) { + return ""; + } else { + return (value + "").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); + } + } + + function getFormatter(row, column) { + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); + + // look up by id, then index + var columnOverrides = rowMetadata && + rowMetadata.columns && + (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]); + + return (columnOverrides && columnOverrides.formatter) || + (rowMetadata && rowMetadata.formatter) || + column.formatter || + (options.formatterFactory && options.formatterFactory.getFormatter(column)) || + options.defaultFormatter; + } + + function getEditor(row, cell) { + var column = columns[cell]; + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); + var columnMetadata = rowMetadata && rowMetadata.columns; + + if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) { + return columnMetadata[column.id].editor; + } + if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) { + return columnMetadata[cell].editor; + } + + return column.editor || (options.editorFactory && options.editorFactory.getEditor(column)); + } + + function getDataItemValueForColumn(item, columnDef) { + if (options.dataItemColumnValueExtractor) { + return options.dataItemColumnValueExtractor(item, columnDef); + } + return item[columnDef.field]; + } + + function appendRowHtml(stringArray, row, range, dataLength) { + var d = getDataItem(row); + var dataLoading = row < dataLength && !d; + var rowCss = "slick-row" + + (dataLoading ? " loading" : "") + + (row === activeRow ? " active" : "") + + (row % 2 == 1 ? " odd" : " even"); + + var metadata = data.getItemMetadata && data.getItemMetadata(row); + + if (metadata && metadata.cssClasses) { + rowCss += " " + metadata.cssClasses; + } + + stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + getRowTop(row) + "px'>"); + + var colspan, m; + for (var i = 0, ii = columns.length; i < ii; i++) { + m = columns[i]; + colspan = 1; + if (metadata && metadata.columns) { + var columnData = metadata.columns[m.id] || metadata.columns[i]; + colspan = (columnData && columnData.colspan) || 1; + if (colspan === "*") { + colspan = ii - i; + } + } + + // Do not render cells outside of the viewport. + if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) { + if (columnPosLeft[i] > range.rightPx) { + // All columns to the right are outside the range. + break; + } + + appendCellHtml(stringArray, row, i, colspan, d); + } + + if (colspan > 1) { + i += (colspan - 1); + } + } + + stringArray.push("</div>"); + } + + function appendCellHtml(stringArray, row, cell, colspan, item) { + var m = columns[cell]; + var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) + + (m.cssClass ? " " + m.cssClass : ""); + if (row === activeRow && cell === activeCell) { + cellCss += (" active"); + } + + // TODO: merge them together in the setter + for (var key in cellCssClasses) { + if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) { + cellCss += (" " + cellCssClasses[key][row][m.id]); + } + } + + stringArray.push("<div class='" + cellCss + "'>"); + + // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet) + if (item) { + var value = getDataItemValueForColumn(item, m); + stringArray.push(getFormatter(row, m)(row, cell, value, m, item)); + } + + stringArray.push("</div>"); + + rowsCache[row].cellRenderQueue.push(cell); + rowsCache[row].cellColSpans[cell] = colspan; + } + + + function cleanupRows(rangeToKeep) { + for (var i in rowsCache) { + if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) { + removeRowFromCache(i); + } + } + } + + function invalidate() { + updateRowCount(); + invalidateAllRows(); + render(); + } + + function invalidateAllRows() { + if (currentEditor) { + makeActiveCellNormal(); + } + for (var row in rowsCache) { + removeRowFromCache(row); + } + } + + function removeRowFromCache(row) { + var cacheEntry = rowsCache[row]; + if (!cacheEntry) { + return; + } + $canvas[0].removeChild(cacheEntry.rowNode); + delete rowsCache[row]; + delete postProcessedRows[row]; + renderedRows--; + counter_rows_removed++; + } + + function invalidateRows(rows) { + var i, rl; + if (!rows || !rows.length) { + return; + } + vScrollDir = 0; + for (i = 0, rl = rows.length; i < rl; i++) { + if (currentEditor && activeRow === rows[i]) { + makeActiveCellNormal(); + } + if (rowsCache[rows[i]]) { + removeRowFromCache(rows[i]); + } + } + } + + function invalidateRow(row) { + invalidateRows([row]); + } + + function updateCell(row, cell) { + var cellNode = getCellNode(row, cell); + if (!cellNode) { + return; + } + + var m = columns[cell], d = getDataItem(row); + if (currentEditor && activeRow === row && activeCell === cell) { + currentEditor.loadValue(d); + } else { + cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : ""; + invalidatePostProcessingResults(row); + } + } + + function updateRow(row) { + var cacheEntry = rowsCache[row]; + if (!cacheEntry) { + return; + } + + ensureCellNodesInRowsCache(row); + + var d = getDataItem(row); + + for (var columnIdx in cacheEntry.cellNodesByColumnIdx) { + if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) { + continue; + } + + columnIdx = columnIdx | 0; + var m = columns[columnIdx], + node = cacheEntry.cellNodesByColumnIdx[columnIdx]; + + if (row === activeRow && columnIdx === activeCell && currentEditor) { + currentEditor.loadValue(d); + } else if (d) { + node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d); + } else { + node.innerHTML = ""; + } + } + + invalidatePostProcessingResults(row); + } + + function getViewportHeight() { + return parseFloat($.css($container[0], "height", true)) - + parseFloat($.css($container[0], "paddingTop", true)) - + parseFloat($.css($container[0], "paddingBottom", true)) - + parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) - + (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) - + (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0); + } + + function resizeCanvas() { + if (!initialized) { return; } + if (options.autoHeight) { + viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0)); + } else { + viewportH = getViewportHeight(); + } + + numVisibleRows = Math.ceil(viewportH / options.rowHeight); + viewportW = parseFloat($.css($container[0], "width", true)); + if (!options.autoHeight) { + $viewport.height(viewportH); + } + + if (options.forceFitColumns) { + autosizeColumns(); + } + + updateRowCount(); + handleScroll(); + render(); + } + + function updateRowCount() { + var dataLength = getDataLength(); + if (!initialized) { return; } + numberOfRows = dataLength + + (options.enableAddRow ? 1 : 0) + + (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0); + + var oldViewportHasVScroll = viewportHasVScroll; + // with autoHeight, we do not need to accommodate the vertical scroll bar + viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH); + + // remove the rows that are now outside of the data range + // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows + var l = options.enableAddRow ? dataLength : dataLength - 1; + for (var i in rowsCache) { + if (i >= l) { + removeRowFromCache(i); + } + } + + if (activeCellNode && activeRow > l) { + resetActiveCell(); + } + + var oldH = h; + th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height); + if (th < maxSupportedCssHeight) { + // just one page + h = ph = th; + n = 1; + cj = 0; + } else { + // break into pages + h = maxSupportedCssHeight; + ph = h / 100; + n = Math.floor(th / ph); + cj = (th - h) / (n - 1); + } + + if (h !== oldH) { + $canvas.css("height", h); + scrollTop = $viewport[0].scrollTop; + } + + var oldScrollTopInRange = (scrollTop + offset <= th - viewportH); + + if (th == 0 || scrollTop == 0) { + page = offset = 0; + } else if (oldScrollTopInRange) { + // maintain virtual position + scrollTo(scrollTop + offset); + } else { + // scroll to bottom + scrollTo(th - viewportH); + } + + if (h != oldH && options.autoHeight) { + resizeCanvas(); + } + + if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) { + autosizeColumns(); + } + updateCanvasWidth(false); + } + + function getVisibleRange(viewportTop, viewportLeft) { + if (viewportTop == null) { + viewportTop = scrollTop; + } + if (viewportLeft == null) { + viewportLeft = scrollLeft; + } + + return { + top: getRowFromPosition(viewportTop), + bottom: getRowFromPosition(viewportTop + viewportH) + 1, + leftPx: viewportLeft, + rightPx: viewportLeft + viewportW + }; + } + + function getRenderedRange(viewportTop, viewportLeft) { + var range = getVisibleRange(viewportTop, viewportLeft); + var buffer = Math.round(viewportH / options.rowHeight); + var minBuffer = 3; + + if (vScrollDir == -1) { + range.top -= buffer; + range.bottom += minBuffer; + } else if (vScrollDir == 1) { + range.top -= minBuffer; + range.bottom += buffer; + } else { + range.top -= minBuffer; + range.bottom += minBuffer; + } + + range.top = Math.max(0, range.top); + range.bottom = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, range.bottom); + + range.leftPx -= viewportW; + range.rightPx += viewportW; + + range.leftPx = Math.max(0, range.leftPx); + range.rightPx = Math.min(canvasWidth, range.rightPx); + + return range; + } + + function ensureCellNodesInRowsCache(row) { + var cacheEntry = rowsCache[row]; + if (cacheEntry) { + if (cacheEntry.cellRenderQueue.length) { + var lastChild = cacheEntry.rowNode.lastChild; + while (cacheEntry.cellRenderQueue.length) { + var columnIdx = cacheEntry.cellRenderQueue.pop(); + cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild; + lastChild = lastChild.previousSibling; + } + } + } + } + + function cleanUpCells(range, row) { + var totalCellsRemoved = 0; + var cacheEntry = rowsCache[row]; + + // Remove cells outside the range. + var cellsToRemove = []; + for (var i in cacheEntry.cellNodesByColumnIdx) { + // I really hate it when people mess with Array.prototype. + if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) { + continue; + } + + // This is a string, so it needs to be cast back to a number. + i = i | 0; + + var colspan = cacheEntry.cellColSpans[i]; + if (columnPosLeft[i] > range.rightPx || + columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) { + if (!(row == activeRow && i == activeCell)) { + cellsToRemove.push(i); + } + } + } + + var cellToRemove; + while ((cellToRemove = cellsToRemove.pop()) != null) { + cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]); + delete cacheEntry.cellColSpans[cellToRemove]; + delete cacheEntry.cellNodesByColumnIdx[cellToRemove]; + if (postProcessedRows[row]) { + delete postProcessedRows[row][cellToRemove]; + } + totalCellsRemoved++; + } + } + + function cleanUpAndRenderCells(range) { + var cacheEntry; + var stringArray = []; + var processedRows = []; + var cellsAdded; + var totalCellsAdded = 0; + var colspan; + + for (var row = range.top, btm = range.bottom; row <= btm; row++) { + cacheEntry = rowsCache[row]; + if (!cacheEntry) { + continue; + } + + // cellRenderQueue populated in renderRows() needs to be cleared first + ensureCellNodesInRowsCache(row); + + cleanUpCells(range, row); + + // Render missing cells. + cellsAdded = 0; + + var metadata = data.getItemMetadata && data.getItemMetadata(row); + metadata = metadata && metadata.columns; + + var d = getDataItem(row); + + // TODO: shorten this loop (index? heuristics? binary search?) + for (var i = 0, ii = columns.length; i < ii; i++) { + // Cells to the right are outside the range. + if (columnPosLeft[i] > range.rightPx) { + break; + } + + // Already rendered. + if ((colspan = cacheEntry.cellColSpans[i]) != null) { + i += (colspan > 1 ? colspan - 1 : 0); + continue; + } + + colspan = 1; + if (metadata) { + var columnData = metadata[columns[i].id] || metadata[i]; + colspan = (columnData && columnData.colspan) || 1; + if (colspan === "*") { + colspan = ii - i; + } + } + + if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) { + appendCellHtml(stringArray, row, i, colspan, d); + cellsAdded++; + } + + i += (colspan > 1 ? colspan - 1 : 0); + } + + if (cellsAdded) { + totalCellsAdded += cellsAdded; + processedRows.push(row); + } + } + + if (!stringArray.length) { + return; + } + + var x = document.createElement("div"); + x.innerHTML = stringArray.join(""); + + var processedRow; + var node; + while ((processedRow = processedRows.pop()) != null) { + cacheEntry = rowsCache[processedRow]; + var columnIdx; + while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) { + node = x.lastChild; + cacheEntry.rowNode.appendChild(node); + cacheEntry.cellNodesByColumnIdx[columnIdx] = node; + } + } + } + + function renderRows(range) { + var parentNode = $canvas[0], + stringArray = [], + rows = [], + needToReselectCell = false, + dataLength = getDataLength(); + + for (var i = range.top, ii = range.bottom; i <= ii; i++) { + if (rowsCache[i]) { + continue; + } + renderedRows++; + rows.push(i); + + // Create an entry right away so that appendRowHtml() can + // start populatating it. + rowsCache[i] = { + "rowNode": null, + + // ColSpans of rendered cells (by column idx). + // Can also be used for checking whether a cell has been rendered. + "cellColSpans": [], + + // Cell nodes (by column idx). Lazy-populated by ensureCellNodesInRowsCache(). + "cellNodesByColumnIdx": [], + + // Column indices of cell nodes that have been rendered, but not yet indexed in + // cellNodesByColumnIdx. These are in the same order as cell nodes added at the + // end of the row. + "cellRenderQueue": [] + }; + + appendRowHtml(stringArray, i, range, dataLength); + if (activeCellNode && activeRow === i) { + needToReselectCell = true; + } + counter_rows_rendered++; + } + + if (!rows.length) { return; } + + var x = document.createElement("div"); + x.innerHTML = stringArray.join(""); + + for (var i = 0, ii = rows.length; i < ii; i++) { + rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild); + } + + if (needToReselectCell) { + activeCellNode = getCellNode(activeRow, activeCell); + } + } + + function startPostProcessing() { + if (!options.enableAsyncPostRender) { + return; + } + clearTimeout(h_postrender); + h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay); + } + + function invalidatePostProcessingResults(row) { + delete postProcessedRows[row]; + postProcessFromRow = Math.min(postProcessFromRow, row); + postProcessToRow = Math.max(postProcessToRow, row); + startPostProcessing(); + } + + function updateRowPositions() { + for (var row in rowsCache) { + rowsCache[row].rowNode.style.top = getRowTop(row) + "px"; + } + } + + function render() { + if (!initialized) { return; } + var visible = getVisibleRange(); + var rendered = getRenderedRange(); + + // remove rows no longer in the viewport + cleanupRows(rendered); + + // add new rows & missing cells in existing rows + if (lastRenderedScrollLeft != scrollLeft) { + cleanUpAndRenderCells(rendered); + } + + // render missing rows + renderRows(rendered); + + postProcessFromRow = visible.top; + postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom); + startPostProcessing(); + + lastRenderedScrollTop = scrollTop; + lastRenderedScrollLeft = scrollLeft; + h_render = null; + } + + function handleHeaderRowScroll() { + var scrollLeft = $headerRowScroller[0].scrollLeft; + if (scrollLeft != $viewport[0].scrollLeft) { + $viewport[0].scrollLeft = scrollLeft; + } + } + + function handleScroll() { + scrollTop = $viewport[0].scrollTop; + scrollLeft = $viewport[0].scrollLeft; + var vScrollDist = Math.abs(scrollTop - prevScrollTop); + var hScrollDist = Math.abs(scrollLeft - prevScrollLeft); + + if (hScrollDist) { + prevScrollLeft = scrollLeft; + $headerScroller[0].scrollLeft = scrollLeft; + $topPanelScroller[0].scrollLeft = scrollLeft; + $headerRowScroller[0].scrollLeft = scrollLeft; + } + + if (vScrollDist) { + vScrollDir = prevScrollTop < scrollTop ? 1 : -1; + prevScrollTop = scrollTop; + + // switch virtual pages if needed + if (vScrollDist < viewportH) { + scrollTo(scrollTop + offset); + } else { + var oldOffset = offset; + if (h == viewportH) { + page = 0; + } else { + page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph))); + } + offset = Math.round(page * cj); + if (oldOffset != offset) { + invalidateAllRows(); + } + } + } + + if (hScrollDist || vScrollDist) { + if (h_render) { + clearTimeout(h_render); + } + + if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 || + Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) { + if (options.forceSyncScrolling || ( + Math.abs(lastRenderedScrollTop - scrollTop) < viewportH && + Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) { + render(); + } else { + h_render = setTimeout(render, 50); + } + + trigger(self.onViewportChanged, {}); + } + } + + trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop}); + } + + function asyncPostProcessRows() { + while (postProcessFromRow <= postProcessToRow) { + var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--; + var cacheEntry = rowsCache[row]; + if (!cacheEntry || row >= getDataLength()) { + continue; + } + + if (!postProcessedRows[row]) { + postProcessedRows[row] = {}; + } + + ensureCellNodesInRowsCache(row); + for (var columnIdx in cacheEntry.cellNodesByColumnIdx) { + if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) { + continue; + } + + columnIdx = columnIdx | 0; + + var m = columns[columnIdx]; + if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) { + var node = cacheEntry.cellNodesByColumnIdx[columnIdx]; + if (node) { + m.asyncPostRender(node, row, getDataItem(row), m); + } + postProcessedRows[row][columnIdx] = true; + } + } + + h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay); + return; + } + } + + function updateCellCssStylesOnRenderedRows(addedHash, removedHash) { + var node, columnId, addedRowHash, removedRowHash; + for (var row in rowsCache) { + removedRowHash = removedHash && removedHash[row]; + addedRowHash = addedHash && addedHash[row]; + + if (removedRowHash) { + for (columnId in removedRowHash) { + if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) { + node = getCellNode(row, getColumnIndex(columnId)); + if (node) { + $(node).removeClass(removedRowHash[columnId]); + } + } + } + } + + if (addedRowHash) { + for (columnId in addedRowHash) { + if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) { + node = getCellNode(row, getColumnIndex(columnId)); + if (node) { + $(node).addClass(addedRowHash[columnId]); + } + } + } + } + } + } + + function addCellCssStyles(key, hash) { + if (cellCssClasses[key]) { + throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists."; + } + + cellCssClasses[key] = hash; + updateCellCssStylesOnRenderedRows(hash, null); + + trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash }); + } + + function removeCellCssStyles(key) { + if (!cellCssClasses[key]) { + return; + } + + updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]); + delete cellCssClasses[key]; + + trigger(self.onCellCssStylesChanged, { "key": key, "hash": null }); + } + + function setCellCssStyles(key, hash) { + var prevHash = cellCssClasses[key]; + + cellCssClasses[key] = hash; + updateCellCssStylesOnRenderedRows(hash, prevHash); + + trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash }); + } + + function getCellCssStyles(key) { + return cellCssClasses[key]; + } + + function flashCell(row, cell, speed) { + speed = speed || 100; + if (rowsCache[row]) { + var $cell = $(getCellNode(row, cell)); + + function toggleCellClass(times) { + if (!times) { + return; + } + setTimeout(function () { + $cell.queue(function () { + $cell.toggleClass(options.cellFlashingCssClass).dequeue(); + toggleCellClass(times - 1); + }); + }, + speed); + } + + toggleCellClass(4); + } + } + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Interactivity + + function handleDragInit(e, dd) { + var cell = getCellFromEvent(e); + if (!cell || !cellExists(cell.row, cell.cell)) { + return false; + } + + var retval = trigger(self.onDragInit, dd, e); + if (e.isImmediatePropagationStopped()) { + return retval; + } + + // if nobody claims to be handling drag'n'drop by stopping immediate propagation, + // cancel out of it + return false; + } + + function handleDragStart(e, dd) { + var cell = getCellFromEvent(e); + if (!cell || !cellExists(cell.row, cell.cell)) { + return false; + } + + var retval = trigger(self.onDragStart, dd, e); + if (e.isImmediatePropagationStopped()) { + return retval; + } + + return false; + } + + function handleDrag(e, dd) { + return trigger(self.onDrag, dd, e); + } + + function handleDragEnd(e, dd) { + trigger(self.onDragEnd, dd, e); + } + + function handleKeyDown(e) { + trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e); + var handled = e.isImmediatePropagationStopped(); + + if (!handled) { + if (!e.shiftKey && !e.altKey && !e.ctrlKey) { + if (e.which == 27) { + if (!getEditorLock().isActive()) { + return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event) + } + cancelEditAndSetFocus(); + } else if (e.which == 37) { + handled = navigateLeft(); + } else if (e.which == 39) { + handled = navigateRight(); + } else if (e.which == 38) { + handled = navigateUp(); + } else if (e.which == 40) { + handled = navigateDown(); + } else if (e.which == 9) { + handled = navigateNext(); + } else if (e.which == 13) { + if (options.editable) { + if (currentEditor) { + // adding new row + if (activeRow === getDataLength()) { + navigateDown(); + } else { + commitEditAndSetFocus(); + } + } else { + if (getEditorLock().commitCurrentEdit()) { + makeActiveCellEditable(); + } + } + } + handled = true; + } + } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) { + handled = navigatePrev(); + } + } + + if (handled) { + // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it + e.stopPropagation(); + e.preventDefault(); + try { + e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.) + } + // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl" + // (hitting control key only, nothing else), "Shift" (maybe others) + catch (error) { + } + } + } + + function handleClick(e) { + if (!currentEditor) { + // if this click resulted in some cell child node getting focus, + // don't steal it back - keyboard events will still bubble up + if (e.target != document.activeElement) { + setFocus(); + } + } + + var cell = getCellFromEvent(e); + if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) { + return; + } + + trigger(self.onClick, {row: cell.row, cell: cell.cell}, e); + if (e.isImmediatePropagationStopped()) { + return; + } + + if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) { + if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) { + scrollRowIntoView(cell.row, false); + setActiveCellInternal(getCellNode(cell.row, cell.cell), (cell.row === getDataLength()) || options.autoEdit); + } + } + } + + function handleContextMenu(e) { + var $cell = $(e.target).closest(".slick-cell", $canvas); + if ($cell.length === 0) { + return; + } + + // are we editing this cell? + if (activeCellNode === $cell[0] && currentEditor !== null) { + return; + } + + trigger(self.onContextMenu, {}, e); + } + + function handleDblClick(e) { + var cell = getCellFromEvent(e); + if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) { + return; + } + + trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e); + if (e.isImmediatePropagationStopped()) { + return; + } + + if (options.editable) { + gotoCell(cell.row, cell.cell, true); + } + } + + function handleHeaderMouseEnter(e) { + trigger(self.onHeaderMouseEnter, { + "column": $(this).data("column") + }, e); + } + + function handleHeaderMouseLeave(e) { + trigger(self.onHeaderMouseLeave, { + "column": $(this).data("column") + }, e); + } + + function handleHeaderContextMenu(e) { + var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); + var column = $header && $header.data("column"); + trigger(self.onHeaderContextMenu, {column: column}, e); + } + + function handleHeaderClick(e) { + var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); + var column = $header && $header.data("column"); + if (column) { + trigger(self.onHeaderClick, {column: column}, e); + } + } + + function handleMouseEnter(e) { + trigger(self.onMouseEnter, {}, e); + } + + function handleMouseLeave(e) { + trigger(self.onMouseLeave, {}, e); + } + + function cellExists(row, cell) { + return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length); + } + + function getCellFromPoint(x, y) { + var row = getRowFromPosition(y); + var cell = 0; + + var w = 0; + for (var i = 0; i < columns.length && w < x; i++) { + w += columns[i].width; + cell++; + } + + if (cell < 0) { + cell = 0; + } + + return {row: row, cell: cell - 1}; + } + + function getCellFromNode(cellNode) { + // read column number from .l<columnNumber> CSS class + var cls = /l\d+/.exec(cellNode.className); + if (!cls) { + throw "getCellFromNode: cannot get cell - " + cellNode.className; + } + return parseInt(cls[0].substr(1, cls[0].length - 1), 10); + } + + function getRowFromNode(rowNode) { + for (var row in rowsCache) { + if (rowsCache[row].rowNode === rowNode) { + return row | 0; + } + } + + return null; + } + + function getCellFromEvent(e) { + var $cell = $(e.target).closest(".slick-cell", $canvas); + if (!$cell.length) { + return null; + } + + var row = getRowFromNode($cell[0].parentNode); + var cell = getCellFromNode($cell[0]); + + if (row == null || cell == null) { + return null; + } else { + return { + "row": row, + "cell": cell + }; + } + } + + function getCellNodeBox(row, cell) { + if (!cellExists(row, cell)) { + return null; + } + + var y1 = getRowTop(row); + var y2 = y1 + options.rowHeight - 1; + var x1 = 0; + for (var i = 0; i < cell; i++) { + x1 += columns[i].width; + } + var x2 = x1 + columns[cell].width; + + return { + top: y1, + left: x1, + bottom: y2, + right: x2 + }; + } + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Cell switching + + function resetActiveCell() { + setActiveCellInternal(null, false); + } + + function setFocus() { + if (tabbingDirection == -1) { + $focusSink[0].focus(); + } else { + $focusSink2[0].focus(); + } + } + + function scrollCellIntoView(row, cell, doPaging) { + scrollRowIntoView(row, doPaging); + + var colspan = getColspan(row, cell); + var left = columnPosLeft[cell], + right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)], + scrollRight = scrollLeft + viewportW; + + if (left < scrollLeft) { + $viewport.scrollLeft(left); + handleScroll(); + render(); + } else if (right > scrollRight) { + $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth)); + handleScroll(); + render(); + } + } + + function setActiveCellInternal(newCell, editMode) { + if (activeCellNode !== null) { + makeActiveCellNormal(); + $(activeCellNode).removeClass("active"); + if (rowsCache[activeRow]) { + $(rowsCache[activeRow].rowNode).removeClass("active"); + } + } + + var activeCellChanged = (activeCellNode !== newCell); + activeCellNode = newCell; + + if (activeCellNode != null) { + activeRow = getRowFromNode(activeCellNode.parentNode); + activeCell = activePosX = getCellFromNode(activeCellNode); + + $(activeCellNode).addClass("active"); + $(rowsCache[activeRow].rowNode).addClass("active"); + + if (options.editable && editMode && isCellPotentiallyEditable(activeRow, activeCell)) { + clearTimeout(h_editorLoader); + + if (options.asyncEditorLoading) { + h_editorLoader = setTimeout(function () { + makeActiveCellEditable(); + }, options.asyncEditorLoadDelay); + } else { + makeActiveCellEditable(); + } + } + } else { + activeRow = activeCell = null; + } + + if (activeCellChanged) { + trigger(self.onActiveCellChanged, getActiveCell()); + } + } + + function clearTextSelection() { + if (document.selection && document.selection.empty) { + try { + //IE fails here if selected element is not in dom + document.selection.empty(); + } catch (e) { } + } else if (window.getSelection) { + var sel = window.getSelection(); + if (sel && sel.removeAllRanges) { + sel.removeAllRanges(); + } + } + } + + function isCellPotentiallyEditable(row, cell) { + // is the data for this row loaded? + if (row < getDataLength() && !getDataItem(row)) { + return false; + } + + // are we in the Add New row? can we create new from this cell? + if (columns[cell].cannotTriggerInsert && row >= getDataLength()) { + return false; + } + + // does this cell have an editor? + if (!getEditor(row, cell)) { + return false; + } + + return true; + } + + function makeActiveCellNormal() { + if (!currentEditor) { + return; + } + trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor}); + currentEditor.destroy(); + currentEditor = null; + + if (activeCellNode) { + var d = getDataItem(activeRow); + $(activeCellNode).removeClass("editable invalid"); + if (d) { + var column = columns[activeCell]; + var formatter = getFormatter(activeRow, column); + activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d); + invalidatePostProcessingResults(activeRow); + } + } + + // if there previously was text selected on a page (such as selected text in the edit cell just removed), + // IE can't set focus to anything else correctly + if (navigator.userAgent.toLowerCase().match(/msie/)) { + clearTextSelection(); + } + + getEditorLock().deactivate(editController); + } + + function makeActiveCellEditable(editor) { + if (!activeCellNode) { + return; + } + if (!options.editable) { + throw "Grid : makeActiveCellEditable : should never get called when options.editable is false"; + } + + // cancel pending async call if there is one + clearTimeout(h_editorLoader); + + if (!isCellPotentiallyEditable(activeRow, activeCell)) { + return; + } + + var columnDef = columns[activeCell]; + var item = getDataItem(activeRow); + + if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) { + setFocus(); + return; + } + + getEditorLock().activate(editController); + $(activeCellNode).addClass("editable"); + + // don't clear the cell if a custom editor is passed through + if (!editor) { + activeCellNode.innerHTML = ""; + } + + currentEditor = new (editor || getEditor(activeRow, activeCell))({ + grid: self, + gridPosition: absBox($container[0]), + position: absBox(activeCellNode), + container: activeCellNode, + column: columnDef, + item: item || {}, + commitChanges: commitEditAndSetFocus, + cancelChanges: cancelEditAndSetFocus + }); + + if (item) { + currentEditor.loadValue(item); + } + + serializedEditorValue = currentEditor.serializeValue(); + + if (currentEditor.position) { + handleActiveCellPositionChange(); + } + } + + function commitEditAndSetFocus() { + // if the commit fails, it would do so due to a validation error + // if so, do not steal the focus from the editor + if (getEditorLock().commitCurrentEdit()) { + setFocus(); + if (options.autoEdit) { + navigateDown(); + } + } + } + + function cancelEditAndSetFocus() { + if (getEditorLock().cancelCurrentEdit()) { + setFocus(); + } + } + + function absBox(elem) { + var box = { + top: elem.offsetTop, + left: elem.offsetLeft, + bottom: 0, + right: 0, + width: $(elem).outerWidth(), + height: $(elem).outerHeight(), + visible: true}; + box.bottom = box.top + box.height; + box.right = box.left + box.width; + + // walk up the tree + var offsetParent = elem.offsetParent; + while ((elem = elem.parentNode) != document.body) { + if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") { + box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight; + } + + if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") { + box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth; + } + + box.left -= elem.scrollLeft; + box.top -= elem.scrollTop; + + if (elem === offsetParent) { + box.left += elem.offsetLeft; + box.top += elem.offsetTop; + offsetParent = elem.offsetParent; + } + + box.bottom = box.top + box.height; + box.right = box.left + box.width; + } + + return box; + } + + function getActiveCellPosition() { + return absBox(activeCellNode); + } + + function getGridPosition() { + return absBox($container[0]) + } + + function handleActiveCellPositionChange() { + if (!activeCellNode) { + return; + } + + trigger(self.onActiveCellPositionChanged, {}); + + if (currentEditor) { + var cellBox = getActiveCellPosition(); + if (currentEditor.show && currentEditor.hide) { + if (!cellBox.visible) { + currentEditor.hide(); + } else { + currentEditor.show(); + } + } + + if (currentEditor.position) { + currentEditor.position(cellBox); + } + } + } + + function getCellEditor() { + return currentEditor; + } + + function getActiveCell() { + if (!activeCellNode) { + return null; + } else { + return {row: activeRow, cell: activeCell}; + } + } + + function getActiveCellNode() { + return activeCellNode; + } + + function scrollRowIntoView(row, doPaging) { + var rowAtTop = row * options.rowHeight; + var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0); + + // need to page down? + if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) { + scrollTo(doPaging ? rowAtTop : rowAtBottom); + render(); + } + // or page up? + else if (row * options.rowHeight < scrollTop + offset) { + scrollTo(doPaging ? rowAtBottom : rowAtTop); + render(); + } + } + + function scrollRowToTop(row) { + scrollTo(row * options.rowHeight); + render(); + } + + function getColspan(row, cell) { + var metadata = data.getItemMetadata && data.getItemMetadata(row); + if (!metadata || !metadata.columns) { + return 1; + } + + var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell]; + var colspan = (columnData && columnData.colspan); + if (colspan === "*") { + colspan = columns.length - cell; + } else { + colspan = colspan || 1; + } + + return colspan; + } + + function findFirstFocusableCell(row) { + var cell = 0; + while (cell < columns.length) { + if (canCellBeActive(row, cell)) { + return cell; + } + cell += getColspan(row, cell); + } + return null; + } + + function findLastFocusableCell(row) { + var cell = 0; + var lastFocusableCell = null; + while (cell < columns.length) { + if (canCellBeActive(row, cell)) { + lastFocusableCell = cell; + } + cell += getColspan(row, cell); + } + return lastFocusableCell; + } + + function gotoRight(row, cell, posX) { + if (cell >= columns.length) { + return null; + } + + do { + cell += getColspan(row, cell); + } + while (cell < columns.length && !canCellBeActive(row, cell)); + + if (cell < columns.length) { + return { + "row": row, + "cell": cell, + "posX": cell + }; + } + return null; + } + + function gotoLeft(row, cell, posX) { + if (cell <= 0) { + return null; + } + + var firstFocusableCell = findFirstFocusableCell(row); + if (firstFocusableCell === null || firstFocusableCell >= cell) { + return null; + } + + var prev = { + "row": row, + "cell": firstFocusableCell, + "posX": firstFocusableCell + }; + var pos; + while (true) { + pos = gotoRight(prev.row, prev.cell, prev.posX); + if (!pos) { + return null; + } + if (pos.cell >= cell) { + return prev; + } + prev = pos; + } + } + + function gotoDown(row, cell, posX) { + var prevCell; + while (true) { + if (++row >= getDataLength() + (options.enableAddRow ? 1 : 0)) { + return null; + } + + prevCell = cell = 0; + while (cell <= posX) { + prevCell = cell; + cell += getColspan(row, cell); + } + + if (canCellBeActive(row, prevCell)) { + return { + "row": row, + "cell": prevCell, + "posX": posX + }; + } + } + } + + function gotoUp(row, cell, posX) { + var prevCell; + while (true) { + if (--row < 0) { + return null; + } + + prevCell = cell = 0; + while (cell <= posX) { + prevCell = cell; + cell += getColspan(row, cell); + } + + if (canCellBeActive(row, prevCell)) { + return { + "row": row, + "cell": prevCell, + "posX": posX + }; + } + } + } + + function gotoNext(row, cell, posX) { + if (row == null && cell == null) { + row = cell = posX = 0; + if (canCellBeActive(row, cell)) { + return { + "row": row, + "cell": cell, + "posX": cell + }; + } + } + + var pos = gotoRight(row, cell, posX); + if (pos) { + return pos; + } + + var firstFocusableCell = null; + while (++row < getDataLength() + (options.enableAddRow ? 1 : 0)) { + firstFocusableCell = findFirstFocusableCell(row); + if (firstFocusableCell !== null) { + return { + "row": row, + "cell": firstFocusableCell, + "posX": firstFocusableCell + }; + } + } + return null; + } + + function gotoPrev(row, cell, posX) { + if (row == null && cell == null) { + row = getDataLength() + (options.enableAddRow ? 1 : 0) - 1; + cell = posX = columns.length - 1; + if (canCellBeActive(row, cell)) { + return { + "row": row, + "cell": cell, + "posX": cell + }; + } + } + + var pos; + var lastSelectableCell; + while (!pos) { + pos = gotoLeft(row, cell, posX); + if (pos) { + break; + } + if (--row < 0) { + return null; + } + + cell = 0; + lastSelectableCell = findLastFocusableCell(row); + if (lastSelectableCell !== null) { + pos = { + "row": row, + "cell": lastSelectableCell, + "posX": lastSelectableCell + }; + } + } + return pos; + } + + function navigateRight() { + return navigate("right"); + } + + function navigateLeft() { + return navigate("left"); + } + + function navigateDown() { + return navigate("down"); + } + + function navigateUp() { + return navigate("up"); + } + + function navigateNext() { + return navigate("next"); + } + + function navigatePrev() { + return navigate("prev"); + } + + /** + * @param {string} dir Navigation direction. + * @return {boolean} Whether navigation resulted in a change of active cell. + */ + function navigate(dir) { + if (!options.enableCellNavigation) { + return false; + } + + if (!activeCellNode && dir != "prev" && dir != "next") { + return false; + } + + if (!getEditorLock().commitCurrentEdit()) { + return true; + } + setFocus(); + + var tabbingDirections = { + "up": -1, + "down": 1, + "left": -1, + "right": 1, + "prev": -1, + "next": 1 + }; + tabbingDirection = tabbingDirections[dir]; + + var stepFunctions = { + "up": gotoUp, + "down": gotoDown, + "left": gotoLeft, + "right": gotoRight, + "prev": gotoPrev, + "next": gotoNext + }; + var stepFn = stepFunctions[dir]; + var pos = stepFn(activeRow, activeCell, activePosX); + if (pos) { + var isAddNewRow = (pos.row == getDataLength()); + scrollCellIntoView(pos.row, pos.cell, !isAddNewRow); + setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit); + activePosX = pos.posX; + return true; + } else { + setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit); + return false; + } + } + + function getCellNode(row, cell) { + if (rowsCache[row]) { + ensureCellNodesInRowsCache(row); + return rowsCache[row].cellNodesByColumnIdx[cell]; + } + return null; + } + + function setActiveCell(row, cell) { + if (!initialized) { return; } + if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) { + return; + } + + if (!options.enableCellNavigation) { + return; + } + + scrollCellIntoView(row, cell, false); + setActiveCellInternal(getCellNode(row, cell), false); + } + + function canCellBeActive(row, cell) { + if (!options.enableCellNavigation || row >= getDataLength() + (options.enableAddRow ? 1 : 0) || + row < 0 || cell >= columns.length || cell < 0) { + return false; + } + + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); + if (rowMetadata && typeof rowMetadata.focusable === "boolean") { + return rowMetadata.focusable; + } + + var columnMetadata = rowMetadata && rowMetadata.columns; + if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") { + return columnMetadata[columns[cell].id].focusable; + } + if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") { + return columnMetadata[cell].focusable; + } + + return columns[cell].focusable; + } + + function canCellBeSelected(row, cell) { + if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) { + return false; + } + + var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); + if (rowMetadata && typeof rowMetadata.selectable === "boolean") { + return rowMetadata.selectable; + } + + var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]); + if (columnMetadata && typeof columnMetadata.selectable === "boolean") { + return columnMetadata.selectable; + } + + return columns[cell].selectable; + } + + function gotoCell(row, cell, forceEdit) { + if (!initialized) { return; } + if (!canCellBeActive(row, cell)) { + return; + } + + if (!getEditorLock().commitCurrentEdit()) { + return; + } + + scrollCellIntoView(row, cell, false); + + var newCell = getCellNode(row, cell); + + // if selecting the 'add new' row, start editing right away + setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit); + + // if no editor was created, set the focus back on the grid + if (!currentEditor) { + setFocus(); + } + } + + + ////////////////////////////////////////////////////////////////////////////////////////////// + // IEditor implementation for the editor lock + + function commitCurrentEdit() { + var item = getDataItem(activeRow); + var column = columns[activeCell]; + + if (currentEditor) { + if (currentEditor.isValueChanged()) { + var validationResults = currentEditor.validate(); + + if (validationResults.valid) { + if (activeRow < getDataLength()) { + var editCommand = { + row: activeRow, + cell: activeCell, + editor: currentEditor, + serializedValue: currentEditor.serializeValue(), + prevSerializedValue: serializedEditorValue, + execute: function () { + this.editor.applyValue(item, this.serializedValue); + updateRow(this.row); + }, + undo: function () { + this.editor.applyValue(item, this.prevSerializedValue); + updateRow(this.row); + } + }; + + if (options.editCommandHandler) { + makeActiveCellNormal(); + options.editCommandHandler(item, column, editCommand); + } else { + editCommand.execute(); + makeActiveCellNormal(); + } + + trigger(self.onCellChange, { + row: activeRow, + cell: activeCell, + item: item + }); + } else { + var newItem = {}; + currentEditor.applyValue(newItem, currentEditor.serializeValue()); + makeActiveCellNormal(); + trigger(self.onAddNewRow, {item: newItem, column: column}); + } + + // check whether the lock has been re-acquired by event handlers + return !getEditorLock().isActive(); + } else { + // Re-add the CSS class to trigger transitions, if any. + $(activeCellNode).removeClass("invalid"); + $(activeCellNode).width(); // force layout + $(activeCellNode).addClass("invalid"); + + trigger(self.onValidationError, { + editor: currentEditor, + cellNode: activeCellNode, + validationResults: validationResults, + row: activeRow, + cell: activeCell, + column: column + }); + + currentEditor.focus(); + return false; + } + } + + makeActiveCellNormal(); + } + return true; + } + + function cancelCurrentEdit() { + makeActiveCellNormal(); + return true; + } + + function rowsToRanges(rows) { + var ranges = []; + var lastCell = columns.length - 1; + for (var i = 0; i < rows.length; i++) { + ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell)); + } + return ranges; + } + + function getSelectedRows() { + if (!selectionModel) { + throw "Selection model is not set"; + } + return selectedRows; + } + + function setSelectedRows(rows) { + if (!selectionModel) { + throw "Selection model is not set"; + } + selectionModel.setSelectedRanges(rowsToRanges(rows)); + } + + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Debug + + this.debug = function () { + var s = ""; + + s += ("\n" + "counter_rows_rendered: " + counter_rows_rendered); + s += ("\n" + "counter_rows_removed: " + counter_rows_removed); + s += ("\n" + "renderedRows: " + renderedRows); + s += ("\n" + "numVisibleRows: " + numVisibleRows); + s += ("\n" + "maxSupportedCssHeight: " + maxSupportedCssHeight); + s += ("\n" + "n(umber of pages): " + n); + s += ("\n" + "(current) page: " + page); + s += ("\n" + "page height (ph): " + ph); + s += ("\n" + "vScrollDir: " + vScrollDir); + + alert(s); + }; + + // a debug helper to be able to access private members + this.eval = function (expr) { + return eval(expr); + }; + + ////////////////////////////////////////////////////////////////////////////////////////////// + // Public API + + $.extend(this, { + "slickGridVersion": "2.1", + + // Events + "onScroll": new Slick.Event(), + "onSort": new Slick.Event(), + "onHeaderMouseEnter": new Slick.Event(), + "onHeaderMouseLeave": new Slick.Event(), + "onHeaderContextMenu": new Slick.Event(), + "onHeaderClick": new Slick.Event(), + "onHeaderCellRendered": new Slick.Event(), + "onBeforeHeaderCellDestroy": new Slick.Event(), + "onHeaderRowCellRendered": new Slick.Event(), + "onBeforeHeaderRowCellDestroy": new Slick.Event(), + "onMouseEnter": new Slick.Event(), + "onMouseLeave": new Slick.Event(), + "onClick": new Slick.Event(), + "onDblClick": new Slick.Event(), + "onContextMenu": new Slick.Event(), + "onKeyDown": new Slick.Event(), + "onAddNewRow": new Slick.Event(), + "onValidationError": new Slick.Event(), + "onViewportChanged": new Slick.Event(), + "onColumnsReordered": new Slick.Event(), + "onColumnsResized": new Slick.Event(), + "onCellChange": new Slick.Event(), + "onBeforeEditCell": new Slick.Event(), + "onBeforeCellEditorDestroy": new Slick.Event(), + "onBeforeDestroy": new Slick.Event(), + "onActiveCellChanged": new Slick.Event(), + "onActiveCellPositionChanged": new Slick.Event(), + "onDragInit": new Slick.Event(), + "onDragStart": new Slick.Event(), + "onDrag": new Slick.Event(), + "onDragEnd": new Slick.Event(), + "onSelectedRowsChanged": new Slick.Event(), + "onCellCssStylesChanged": new Slick.Event(), + + // Methods + "registerPlugin": registerPlugin, + "unregisterPlugin": unregisterPlugin, + "getColumns": getColumns, + "setColumns": setColumns, + "getColumnIndex": getColumnIndex, + "updateColumnHeader": updateColumnHeader, + "setSortColumn": setSortColumn, + "setSortColumns": setSortColumns, + "getSortColumns": getSortColumns, + "autosizeColumns": autosizeColumns, + "getOptions": getOptions, + "setOptions": setOptions, + "getData": getData, + "getDataLength": getDataLength, + "getDataItem": getDataItem, + "setData": setData, + "getSelectionModel": getSelectionModel, + "setSelectionModel": setSelectionModel, + "getSelectedRows": getSelectedRows, + "setSelectedRows": setSelectedRows, + "getContainerNode": getContainerNode, + + "render": render, + "invalidate": invalidate, + "invalidateRow": invalidateRow, + "invalidateRows": invalidateRows, + "invalidateAllRows": invalidateAllRows, + "updateCell": updateCell, + "updateRow": updateRow, + "getViewport": getVisibleRange, + "getRenderedRange": getRenderedRange, + "resizeCanvas": resizeCanvas, + "updateRowCount": updateRowCount, + "scrollRowIntoView": scrollRowIntoView, + "scrollRowToTop": scrollRowToTop, + "scrollCellIntoView": scrollCellIntoView, + "getCanvasNode": getCanvasNode, + "focus": setFocus, + + "getCellFromPoint": getCellFromPoint, + "getCellFromEvent": getCellFromEvent, + "getActiveCell": getActiveCell, + "setActiveCell": setActiveCell, + "getActiveCellNode": getActiveCellNode, + "getActiveCellPosition": getActiveCellPosition, + "resetActiveCell": resetActiveCell, + "editActiveCell": makeActiveCellEditable, + "getCellEditor": getCellEditor, + "getCellNode": getCellNode, + "getCellNodeBox": getCellNodeBox, + "canCellBeSelected": canCellBeSelected, + "canCellBeActive": canCellBeActive, + "navigatePrev": navigatePrev, + "navigateNext": navigateNext, + "navigateUp": navigateUp, + "navigateDown": navigateDown, + "navigateLeft": navigateLeft, + "navigateRight": navigateRight, + "gotoCell": gotoCell, + "getTopPanel": getTopPanel, + "setTopPanelVisibility": setTopPanelVisibility, + "setHeaderRowVisibility": setHeaderRowVisibility, + "getHeaderRow": getHeaderRow, + "getHeaderRowColumn": getHeaderRowColumn, + "getGridPosition": getGridPosition, + "flashCell": flashCell, + "addCellCssStyles": addCellCssStyles, + "setCellCssStyles": setCellCssStyles, + "removeCellCssStyles": removeCellCssStyles, + "getCellCssStyles": getCellCssStyles, + + "init": finishInitialization, + "destroy": destroy, + + // IEditor implementation + "getEditorLock": getEditorLock, + "getEditController": getEditController + }); + + init(); + } +}(jQuery));