Event handler will receive two arguments - an EventData and the data
+ * object the event was fired with.
+ * @method subscribe
+ * @param fn {Function} Event handler.
+ */
+ this.subscribe = function (fn) {
+ handlers.push(fn);
+ };
+
+ /***
+ * Removes an event handler added with subscribe(fn).
+ * @method unsubscribe
+ * @param fn {Function} Event handler to be removed.
+ */
+ this.unsubscribe = function (fn) {
+ for (var i = handlers.length - 1; i >= 0; i--) {
+ if (handlers[i] === fn) {
+ handlers.splice(i, 1);
+ }
+ }
+ };
+
+ /***
+ * Fires an event notifying all subscribers.
+ * @method notify
+ * @param args {Object} Additional data object to be passed to all handlers.
+ * @param e {EventData}
+ * Optional.
+ * An EventData object to be passed to all handlers.
+ * For DOM events, an existing W3C/jQuery event object can be passed in.
+ * @param scope {Object}
+ * Optional.
+ * The scope ("this") within which the handler will be executed.
+ * If not specified, the scope will be set to the Event instance.
+ */
+ this.notify = function (args, e, scope) {
+ e = e || new EventData();
+ scope = scope || this;
+
+ var returnValue;
+ for (var i = 0; i < handlers.length && !(e.isPropagationStopped() || e.isImmediatePropagationStopped()); i++) {
+ returnValue = handlers[i].call(scope, e, args);
+ }
+
+ return returnValue;
+ };
+ }
+
+ function EventHandler() {
+ var handlers = [];
+
+ this.subscribe = function (event, handler) {
+ handlers.push({
+ event: event,
+ handler: handler
+ });
+ event.subscribe(handler);
+ };
+
+ this.unsubscribe = function (event, handler) {
+ var i = handlers.length;
+ while (i--) {
+ if (handlers[i].event === event &&
+ handlers[i].handler === handler) {
+ handlers.splice(i, 1);
+ event.unsubscribe(handler);
+ return;
+ }
+ }
+ };
+
+ this.unsubscribeAll = function () {
+ var i = handlers.length;
+ while (i--) {
+ handlers[i].event.unsubscribe(handlers[i].handler);
+ }
+ handlers = [];
+ }
+ }
+
+ /***
+ * A structure containing a range of cells.
+ * @class Range
+ * @constructor
+ * @param fromRow {Integer} Starting row.
+ * @param fromCell {Integer} Starting cell.
+ * @param toRow {Integer} Optional. Ending row. Defaults to fromRow.
+ * @param toCell {Integer} Optional. Ending cell. Defaults to fromCell.
+ */
+ function Range(fromRow, fromCell, toRow, toCell) {
+ if (toRow === undefined && toCell === undefined) {
+ toRow = fromRow;
+ toCell = fromCell;
+ }
+
+ /***
+ * @property fromRow
+ * @type {Integer}
+ */
+ this.fromRow = Math.min(fromRow, toRow);
+
+ /***
+ * @property fromCell
+ * @type {Integer}
+ */
+ this.fromCell = Math.min(fromCell, toCell);
+
+ /***
+ * @property toRow
+ * @type {Integer}
+ */
+ this.toRow = Math.max(fromRow, toRow);
+
+ /***
+ * @property toCell
+ * @type {Integer}
+ */
+ this.toCell = Math.max(fromCell, toCell);
+
+ /***
+ * Returns whether a range represents a single row.
+ * @method isSingleRow
+ * @return {Boolean}
+ */
+ this.isSingleRow = function () {
+ return this.fromRow == this.toRow;
+ };
+
+ /***
+ * Returns whether a range represents a single cell.
+ * @method isSingleCell
+ * @return {Boolean}
+ */
+ this.isSingleCell = function () {
+ return this.fromRow == this.toRow && this.fromCell == this.toCell;
+ };
+
+ /***
+ * Returns whether a range contains a given cell.
+ * @method contains
+ * @param row {Integer}
+ * @param cell {Integer}
+ * @return {Boolean}
+ */
+ this.contains = function (row, cell) {
+ return row >= this.fromRow && row <= this.toRow &&
+ cell >= this.fromCell && cell <= this.toCell;
+ };
+
+ /***
+ * Returns a readable representation of a range.
+ * @method toString
+ * @return {String}
+ */
+ this.toString = function () {
+ if (this.isSingleCell()) {
+ return "(" + this.fromRow + ":" + this.fromCell + ")";
+ }
+ else {
+ return "(" + this.fromRow + ":" + this.fromCell + " - " + this.toRow + ":" + this.toCell + ")";
+ }
+ }
+ }
+
+
+ /***
+ * A base class that all special / non-data rows (like Group and GroupTotals) derive from.
+ * @class NonDataItem
+ * @constructor
+ */
+ function NonDataItem() {
+ this.__nonDataRow = true;
+ }
+
+
+ /***
+ * Information about a group of rows.
+ * @class Group
+ * @extends Slick.NonDataItem
+ * @constructor
+ */
+ function Group() {
+ this.__group = true;
+ this.__updated = false;
+
+ /***
+ * Number of rows in the group.
+ * @property count
+ * @type {Integer}
+ */
+ this.count = 0;
+
+ /***
+ * Grouping value.
+ * @property value
+ * @type {Object}
+ */
+ this.value = null;
+
+ /***
+ * Formatted display value of the group.
+ * @property title
+ * @type {String}
+ */
+ this.title = null;
+
+ /***
+ * Whether a group is collapsed.
+ * @property collapsed
+ * @type {Boolean}
+ */
+ this.collapsed = false;
+
+ /***
+ * GroupTotals, if any.
+ * @property totals
+ * @type {GroupTotals}
+ */
+ this.totals = null;
+ }
+
+ Group.prototype = new NonDataItem();
+
+ /***
+ * Compares two Group instances.
+ * @method equals
+ * @return {Boolean}
+ * @param group {Group} Group instance to compare to.
+ */
+ Group.prototype.equals = function (group) {
+ return this.value === group.value &&
+ this.count === group.count &&
+ this.collapsed === group.collapsed;
+ };
+
+ /***
+ * Information about group totals.
+ * An instance of GroupTotals will be created for each totals row and passed to the aggregators
+ * so that they can store arbitrary data in it. That data can later be accessed by group totals
+ * formatters during the display.
+ * @class GroupTotals
+ * @extends Slick.NonDataItem
+ * @constructor
+ */
+ function GroupTotals() {
+ this.__groupTotals = true;
+
+ /***
+ * Parent Group.
+ * @param group
+ * @type {Group}
+ */
+ this.group = null;
+ }
+
+ GroupTotals.prototype = new NonDataItem();
+
+ /***
+ * A locking helper to track the active edit controller and ensure that only a single controller
+ * can be active at a time. This prevents a whole class of state and validation synchronization
+ * issues. An edit controller (such as SlickGrid) can query if an active edit is in progress
+ * and attempt a commit or cancel before proceeding.
+ * @class EditorLock
+ * @constructor
+ */
+ function EditorLock() {
+ var activeEditController = null;
+
+ /***
+ * Returns true if a specified edit controller is active (has the edit lock).
+ * If the parameter is not specified, returns true if any edit controller is active.
+ * @method isActive
+ * @param editController {EditController}
+ * @return {Boolean}
+ */
+ this.isActive = function (editController) {
+ return (editController ? activeEditController === editController : activeEditController !== null);
+ };
+
+ /***
+ * Sets the specified edit controller as the active edit controller (acquire edit lock).
+ * If another edit controller is already active, and exception will be thrown.
+ * @method activate
+ * @param editController {EditController} edit controller acquiring the lock
+ */
+ this.activate = function (editController) {
+ if (editController === activeEditController) { // already activated?
+ return;
+ }
+ if (activeEditController !== null) {
+ throw "SlickGrid.EditorLock.activate: an editController is still active, can't activate another editController";
+ }
+ if (!editController.commitCurrentEdit) {
+ throw "SlickGrid.EditorLock.activate: editController must implement .commitCurrentEdit()";
+ }
+ if (!editController.cancelCurrentEdit) {
+ throw "SlickGrid.EditorLock.activate: editController must implement .cancelCurrentEdit()";
+ }
+ activeEditController = editController;
+ };
+
+ /***
+ * Unsets the specified edit controller as the active edit controller (release edit lock).
+ * If the specified edit controller is not the active one, an exception will be thrown.
+ * @method deactivate
+ * @param editController {EditController} edit controller releasing the lock
+ */
+ this.deactivate = function (editController) {
+ if (activeEditController !== editController) {
+ throw "SlickGrid.EditorLock.deactivate: specified editController is not the currently active one";
+ }
+ activeEditController = null;
+ };
+
+ /***
+ * Attempts to commit the current edit by calling "commitCurrentEdit" method on the active edit
+ * controller and returns whether the commit attempt was successful (commit may fail due to validation
+ * errors, etc.). Edit controller's "commitCurrentEdit" must return true if the commit has succeeded
+ * and false otherwise. If no edit controller is active, returns true.
+ * @method commitCurrentEdit
+ * @return {Boolean}
+ */
+ this.commitCurrentEdit = function () {
+ return (activeEditController ? activeEditController.commitCurrentEdit() : true);
+ };
+
+ /***
+ * Attempts to cancel the current edit by calling "cancelCurrentEdit" method on the active edit
+ * controller and returns whether the edit was successfully cancelled. If no edit controller is
+ * active, returns true.
+ * @method cancelCurrentEdit
+ * @return {Boolean}
+ */
+ this.cancelCurrentEdit = function cancelCurrentEdit() {
+ return (activeEditController ? activeEditController.cancelCurrentEdit() : true);
+ };
+ }
+})(jQuery);
+
+
diff --git a/js/lib/slickgrid/slick.grid.css b/js/lib/slickgrid/slick.grid.css
new file mode 100644
index 0000000000..e5ef44cd57
--- /dev/null
+++ b/js/lib/slickgrid/slick.grid.css
@@ -0,0 +1,158 @@
+/*
+IMPORTANT:
+In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
+No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
+classes should alter those!
+*/
+
+.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
+ width: 100%;
+ overflow: hidden;
+ border-left: 0px;
+}
+
+.slick-header-columns, .slick-headerrow-columns {
+ width: 999999px;
+ position: relative;
+ white-space: nowrap;
+ cursor: default;
+ overflow: hidden;
+}
+
+.slick-header-column.ui-state-default {
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ height: 16px;
+ line-height: 16px;
+ margin: 0;
+ padding: 4px;
+ border-right: 1px solid silver;
+ border-left: 0px;
+ border-top: 0px;
+ border-bottom: 0px;
+ float: left;
+}
+
+.slick-headerrow-column.ui-state-default {
+ padding: 4px;
+}
+
+.slick-header-column-sorted {
+ font-style: italic;
+}
+
+.slick-sort-indicator {
+ display: inline-block;
+ width: 8px;
+ height: 5px;
+ margin-left: 4px;
+}
+
+.slick-sort-indicator-desc {
+ background: url(images/sort-desc.gif);
+}
+
+.slick-sort-indicator-asc {
+ background: url(images/sort-asc.gif);
+}
+
+.slick-resizable-handle {
+ position: absolute;
+ font-size: 0.1px;
+ display: block;
+ cursor: col-resize;
+ width: 4px;
+ right: 0px;
+ top: 0;
+ height: 100%;
+}
+
+.slick-sortable-placeholder {
+ background: silver;
+}
+
+.grid-canvas {
+ position: relative;
+ outline: 0;
+}
+
+.slick-row.ui-widget-content, .slick-row.ui-state-active {
+ position: absolute;
+ border: 0px;
+ width: 100%;
+}
+
+.slick-cell, .slick-headerrow-column {
+ position: absolute;
+
+ border: 1px solid transparent;
+ border-right: 1px dotted silver;
+ border-bottom-color: silver;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: middle;
+ z-index: 1;
+ padding: 1px 2px 2px 1px;
+ margin: 0;
+
+ white-space: nowrap;
+
+ cursor: default;
+}
+
+.slick-group {
+}
+
+.slick-group-toggle {
+ display: inline-block;
+}
+
+.slick-cell.highlighted {
+ background: lightskyblue;
+ background: rgba(0, 0, 255, 0.2);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.slick-cell.flashing {
+ border: 1px solid red !important;
+}
+
+.slick-cell.editable {
+ z-index: 11;
+ overflow: visible;
+ background: white;
+ border-color: black;
+ border-style: solid;
+}
+
+.slick-cell:focus {
+ outline: none;
+}
+
+.slick-reorder-proxy {
+ display: inline-block;
+ background: blue;
+ opacity: 0.15;
+ filter: alpha(opacity = 15);
+ cursor: move;
+}
+
+.slick-reorder-guide {
+ display: inline-block;
+ height: 2px;
+ background: blue;
+ opacity: 0.7;
+ filter: alpha(opacity = 70);
+}
+
+.slick-selection {
+ z-index: 10;
+ position: absolute;
+ border: 2px dashed black;
+}
\ No newline at end of file
diff --git a/js/lib/slickgrid/slick.grid.js b/js/lib/slickgrid/slick.grid.js
new file mode 100644
index 0000000000..c9a3b0e811
--- /dev/null
+++ b/js/lib/slickgrid/slick.grid.js
@@ -0,0 +1,2799 @@
+/**
+ * @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.0
+ *
+ * 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: 60,
+ 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
+ };
+
+ var columnDefaults = {
+ name: "",
+ resizable: true,
+ sortable: false,
+ minWidth: 30,
+ rerenderOnResize: false,
+ headerCssClass: null
+ };
+
+ // 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 scrollDir = 1;
+
+ // private
+ var initialized = false;
+ var $container;
+ var uid = "slickgrid_" + Math.round(1000000 * Math.random());
+ var self = this;
+ var $headerScroller;
+ var $headers;
+ var $headerRow, $headerRowScroller;
+ var $topPanelScroller;
+ var $topPanel;
+ var $viewport;
+ var $canvas;
+ var $style;
+ 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 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 prevScrollLeft = 0;
+ var avgRowRenderTime = 10;
+
+ var selectionModel;
+ var selectedRows = [];
+
+ var plugins = [];
+ var cellCssClasses = {};
+
+ var columnsById = {};
+ var sortColumns = [];
+
+
+ // 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);
+ columnDefaults.width = options.defaultColumnWidth;
+
+ // 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()
+ .attr("tabIndex", 0)
+ .attr("hideFocus", true)
+ .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");
+ }
+
+ $headerScroller = $("
").appendTo($container);
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+
+ $canvas = $("").appendTo($viewport);
+
+ 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");
+ });
+ }
+
+ createColumnHeaders();
+ setupColumnSort();
+ createCssRules();
+ resizeCanvas();
+ bindAncestorScrollEvents();
+
+ $container
+ .bind("resize.slickgrid", resizeCanvas);
+ $viewport
+ .bind("scroll.slickgrid", handleScroll);
+ $headerScroller
+ .bind("contextmenu.slickgrid", handleHeaderContextMenu)
+ .bind("click.slickgrid", handleHeaderClick);
+ $canvas
+ .bind("keydown.slickgrid", handleKeyDown)
+ .bind("click.slickgrid", handleClick)
+ .bind("dblclick.slickgrid", handleDblClick)
+ .bind("contextmenu.slickgrid", handleContextMenu)
+ .bind("draginit", handleDragInit)
+ .bind("dragstart", 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 = $("").appendTo("body");
+ var dim = {
+ width: $c.width() - $c[0].clientWidth,
+ height: $c.height() - $c[0].clientHeight
+ };
+ $c.remove();
+ return dim;
+ }
+
+ function getCanvasWidth() {
+ var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
+ var rowWidth = 0;
+ var i = columns.length;
+ while (i--) {
+ rowWidth += (columns[i].width || columnDefaults.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);
+ viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
+ }
+
+ 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 increment = 1000000;
+ var supportedHeight = increment;
+ // FF reports the height back but still renders blank after ~6M px
+ var testUpTo = ($.browser.mozilla) ? 5000000 : 1000000000;
+ var div = $("").appendTo(document.body);
+
+ while (supportedHeight <= testUpTo) {
+ div.css("height", supportedHeight + increment);
+ if (div.height() !== supportedHeight + increment) {
+ break;
+ } else {
+ supportedHeight += increment;
+ }
+ }
+
+ 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) {
+ $(elem).bind("scroll.slickgrid", handleActiveCellPositionChange);
+ }
+ }
+ }
+
+ function unbindAncestorScrollEvents() {
+ $canvas.parents().unbind("scroll.slickgrid");
+ }
+
+ function updateColumnHeader(columnId, title, toolTip) {
+ if (!initialized) { return; }
+ var idx = getColumnIndex(columnId);
+ var $header = $headers.children().eq(idx);
+ if ($header) {
+ columns[idx].name = title;
+ columns[idx].toolTip = toolTip;
+ $header
+ .attr("title", toolTip || title || "")
+ .children().eq(0).html(title);
+ }
+ }
+
+ 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 hoverBegin() {
+ $(this).addClass("ui-state-hover");
+ }
+
+ function hoverEnd() {
+ $(this).removeClass("ui-state-hover");
+ }
+
+ $headers.empty();
+ $headerRow.empty();
+ columnsById = {};
+
+ for (var i = 0; i < columns.length; i++) {
+ var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
+ columnsById[m.id] = i;
+
+ var header = $("")
+ .html("" + m.name + "")
+ .width(m.width - headerColumnWidthDiff)
+ .attr("title", m.toolTip || m.name || "")
+ .data("fieldId", m.id)
+ .addClass(m.headerCssClass || "")
+ .appendTo($headers);
+
+ if (options.enableColumnReorder || m.sortable) {
+ header.hover(hoverBegin, hoverEnd);
+ }
+
+ if (m.sortable) {
+ header.append("");
+ }
+
+ if (options.showHeaderRow) {
+ $("")
+ .appendTo($headerRow);
+ }
+ }
+
+ if (options.showHeaderRow) {
+ // add a spacer to let the container scroll beyond the header row columns width
+ $("")
+ .appendTo($headerRowScroller);
+ }
+
+ 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 = columns[getColumnIndex($col.data("fieldId"))];
+ 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: true };
+ 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.sortable({
+ containment: "parent",
+ 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);
+ $("")
+ .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 = $("").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 = $("").appendTo($canvas);
+ el = $(" CSS class
+ var cls = /l\d+/.exec(node.className);
+ if (!cls) {
+ throw "getCellFromNode: cannot get cell - " + node.className;
+ }
+ return parseInt(cls[0].substr(1, cls[0].length - 1), 10);
+ }
+
+ function getCellFromEvent(e) {
+ var $cell = $(e.target).closest(".slick-cell", $canvas);
+ if (!$cell.length) {
+ return null;
+ }
+
+ return {
+ row: $cell.parent().attr("row") | 0,
+ cell: getCellFromNode($cell[0])
+ };
+ }
+
+ function getCellNodeBox(row, cell) {
+ if (!cellExists(row, cell)) {
+ return null;
+ }
+
+ var y1 = row * options.rowHeight - offset;
+ 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() {
+ // IE tries to scroll the viewport so that the item being focused is aligned to the left border
+ // IE-specific .setActive() sets the focus, but doesn't scroll
+ if ($.browser.msie) {
+ $canvas[0].setActive();
+ } else {
+ $canvas[0].focus();
+ }
+ }
+
+ function scrollActiveCellIntoView() {
+ if (activeCellNode) {
+ var left = $(activeCellNode).position().left,
+ right = left + $(activeCellNode).outerWidth(),
+ scrollLeft = $viewport.scrollLeft(),
+ scrollRight = scrollLeft + $viewport.width();
+
+ if (left < scrollLeft) {
+ $viewport.scrollLeft(left);
+ } else if (right > scrollRight) {
+ $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));
+ }
+ }
+ }
+
+ function setActiveCellInternal(newCell, editMode) {
+ if (activeCellNode !== null) {
+ makeActiveCellNormal();
+ $(activeCellNode).removeClass("active");
+ }
+
+ var activeCellChanged = (activeCellNode !== newCell);
+ activeCellNode = newCell;
+
+ if (activeCellNode != null) {
+ activeRow = parseInt($(activeCellNode).parent().attr("row"));
+ activeCell = activePosX = getCellFromNode(activeCellNode);
+
+ $(activeCellNode).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 {
+ setFocus();
+ }
+ } else {
+ activeRow = activeCell = null;
+ }
+
+ if (activeCellChanged) {
+ scrollActiveCellIntoView();
+ trigger(self.onActiveCellChanged, getActiveCell());
+ }
+ }
+
+ function clearTextSelection() {
+ if (document.selection && document.selection.empty) {
+ document.selection.empty();
+ } 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, getDataItem(activeRow));
+ 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 ($.browser.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 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;
+ }
+ return (colspan || 1);
+ }
+
+ 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) {
+ 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) {
+ 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() {
+ navigate("right");
+ }
+
+ function navigateLeft() {
+ navigate("left");
+ }
+
+ function navigateDown() {
+ navigate("down");
+ }
+
+ function navigateUp() {
+ navigate("up");
+ }
+
+ function navigateNext() {
+ navigate("next");
+ }
+
+ function navigatePrev() {
+ navigate("prev");
+ }
+
+ function navigate(dir) {
+ if (!activeCellNode || !options.enableCellNavigation) {
+ return;
+ }
+ if (!getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ 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());
+ scrollRowIntoView(pos.row, !isAddNewRow);
+ setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit);
+ activePosX = pos.posX;
+ } else {
+ setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit);
+ }
+ }
+
+ function getCellNode(row, cell) {
+ if (rowsCache[row]) {
+ var cells = $(rowsCache[row]).children();
+ var nodeCell;
+ for (var i = 0; i < cells.length; i++) {
+ nodeCell = getCellFromNode(cells[i]);
+ if (nodeCell === cell) {
+ return cells[i];
+ } else if (nodeCell > cell) {
+ return null;
+ }
+
+ }
+ }
+ return null;
+ }
+
+ function setActiveCell(row, cell) {
+ if (!initialized) { return; }
+ if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
+ return;
+ }
+
+ if (!options.enableCellNavigation) {
+ return;
+ }
+
+ scrollRowIntoView(row, 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;
+ }
+
+ if (typeof columns[cell].focusable === "boolean") {
+ return columns[cell].focusable;
+ }
+
+ return true;
+ }
+
+ 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;
+ }
+
+ if (typeof columns[cell].selectable === "boolean") {
+ return columns[cell].selectable;
+ }
+
+ return true;
+ }
+
+ function gotoCell(row, cell, forceEdit) {
+ if (!initialized) { return; }
+ if (!canCellBeActive(row, cell)) {
+ return;
+ }
+
+ if (!getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ scrollRowIntoView(row, 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 {
+ // TODO: remove and put in onValidationError handlers in examples
+ $(activeCellNode).addClass("invalid");
+ $(activeCellNode).stop(true, true).effect("highlight", {color: "red"}, 300);
+
+ 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" + "scrollDir: " + scrollDir);
+
+ 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.0",
+
+ // Events
+ "onScroll": new Slick.Event(),
+ "onSort": new Slick.Event(),
+ "onHeaderContextMenu": new Slick.Event(),
+ "onHeaderClick": 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,
+
+ "render": render,
+ "invalidate": invalidate,
+ "invalidateRow": invalidateRow,
+ "invalidateRows": invalidateRows,
+ "invalidateAllRows": invalidateAllRows,
+ "updateCell": updateCell,
+ "updateRow": updateRow,
+ "getViewport": getVisibleRange,
+ "getRenderedRange": getRenderedRange,
+ "resizeCanvas": resizeCanvas,
+ "updateRowCount": updateRowCount,
+ "scrollRowIntoView": scrollRowIntoView,
+ "getCanvasNode": getCanvasNode,
+
+ "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,
+ "showTopPanel": showTopPanel,
+ "hideTopPanel": hideTopPanel,
+ "showHeaderRowColumns": showHeaderRowColumns,
+ "hideHeaderRowColumns": hideHeaderRowColumns,
+ "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));
diff --git a/js/wn/pages/doclistview.js b/js/wn/pages/doclistview.js
index 3a9770adec..22c4498eb6 100644
--- a/js/wn/pages/doclistview.js
+++ b/js/wn/pages/doclistview.js
@@ -34,88 +34,92 @@ wn.pages.doclistview.show = function(doctype) {
page_body.change_to(pagename);
}
-wn.pages.DocListView = Class.extend({
+wn.pages.DocListView = wn.ui.Listing.extend({
init: function(doctype, page) {
this.doctype = doctype;
- this.wrapper = page;
+ this.$w = $(page);
this.label = get_doctype_label(doctype);
this.label = (this.label.toLowerCase().substr(-4) == 'list') ?
- this.label : (this.label + ' List')
-
- this.make();
+ this.label : (this.label + ' List');
+ this.make_page();
this.load_doctype();
},
- make: function() {
+
+ make_page: function() {
var me = this;
- $(this.wrapper).html('s)
\
@@ -124,220 +128,3 @@ wn.pages.DocListView = Class.extend({
.addClass('list-row');
}
});
-
-wn.require('lib/css/ui/filter.css');
-
-wn.ui.FilterList = Class.extend({
- init: function(list_obj, parent, doctype) {
- this.filters = [];
- this.list_obj = list_obj;
- this.doctype = doctype;
- this.make(parent);
- this.set_events();
- },
- make: function(parent) {
- $(parent).html('
\
+ ', this.opts));
+ this.$w = $(this.parent).find('.wnlist');
+ this.set_events();
this.make_filters();
- this.make_more_button();
- }
+ },
+ show_view: function($btn, $div, $btn_unsel, $div_unsel) {
+ $btn_unsel.removeClass('btn-info');
+ $btn_unsel.find('i').removeClass('icon-white');
+ $div_unsel.toggle(false);
+
+ $btn.addClass('btn-info');
+ $btn.find('i').addClass('icon-white');
+ $div.toggle(true);
+ },
+ set_events: function() {
+ var me = this;
- // make filters using FieldGroup
- this.make_filters = function() {
- if(this.opts.filters) {
- $ds(this.filters_area);
-
- // expand / collapse filters
-
- this.filters = new wn.widgets.FieldGroup(this.filters_area, this.opts.fields);
- }
- }
-
- // make the toolbar
- this.make_toolbar = function() {
- if(!(this.opts.hide_refresh || this.opts.no_refresh)) {
- if(this.opts.title) {
- $a(this.toolbar_area, 'h3', '',
- {display:'inline-block',marginRight:'15px'},
- this.opts.title);
- }
- this.ref_img = $a(this.toolbar_area, 'span', 'link_type',
- {color:'#888'}, '[refresh]');
- this.ref_img.onclick = function() { me.run(); }
-
- this.loading_img = $a(this.toolbar_area, 'img', 'lib/images/ui/button-load.gif', {display:'none', marginLeft:'3px', marginBottom:'-2px'});
+ // run
+ this.$w.find('.btn-refresh').click(function() {
+ me.run();
+ });
+
+ // next page
+ this.$w.find('.btn-more').click(function() {
+ me.run({append: true });
+ });
+
+ // show list view
+ this.$w.find('.btn-list').click(function() {
+ me.show_view($(this), me.$w.find('.result-list'),
+ me.$w.find('.btn-grid'), me.$w.find('.result-grid'))
+ });
+
+ // show grid view
+ this.$w.find('.btn-grid').click(function() {
+ me.show_view($(this), me.$w.find('.result-grid'),
+ me.$w.find('.btn-list'), me.$w.find('.result-list'))
+ });
+
+ // title
+ if(this.title) {
+ this.$w.find('h3').html(this.title).toggle(true);
}
- if(this.opts.new_doctype) {
- this.new_btn = $btn(this.toolbar_area,
- 'New ' + get_doctype_label(this.opts.new_doctype),
- function() {
- newdoc(me.opts.new_doctype, me.opts.new_doc_onload, me.opts.new_doc_indialog, me.opts.new_doc_onsave);
- },
- {marginLeft:'7px'});
- }
- }
-
- // make more button
- // that shows more results when they are displayed
- this.make_more_button = function() {
- this.more_btn = $btn(this.more_button_area, 'More...',
- function() {
- me.more_btn.set_working();
- me.run(function() {
- me.more_btn.done_working();
- }, 1);
- }, '', 0, 1
- );
-
- $y(this.more_btn.loading_img, {marginBottom:'0px'});
- }
-
- // clear the results and re-run the query
- this.clear = function() {
- this.results_area.innerHTML = '';
- this.table = null;
- $ds(this.results_area);
- $dh(this.no_results_area);
- }
-
- // callback on the query
- // build the table
- // returns r.values as a table of results
- this.make_results = function(r, rt) {
- if(this.start==0) this.clear();
-
- $dh(this.more_button_area);
- if(this.loading_img) $dh(this.loading_img)
- if(r.message) r.values = r.message;
-
- if(r.values && r.values.length) {
- this.values = r.values;
- var m = Math.min(r.values.length, this.page_length);
- // render the rows
- for(var i=0; i < m; i++) {
- var row = this.add_row();
-
- // call the show_cell with row, ri, ci, d
- this.opts.render_row(row, r.values[i], this, i);
- }
- // extend start
- this.start += m;
-
- // refreh more button
- if(r.values.length >= this.page_length) $ds(this.more_button_area);
-
+ // new
+ if(this.new_doctype) {
+ this.$w.find('.btn-new').toggle(true).click(function() {
+ newdoc(me.new_doctype);
+ })
} else {
- if(this.start==0) {
- $dh(this.results_area);
- $ds(this.no_results_area);
- }
+ this.$w.find('.btn-new').toggle(false);
}
- // callbacks
- if(this.onrun) this.onrun();
- if(this.opts.onrun) this.opts.onrun();
- if(this.opts.callback) this.opts.callback(r);
- }
-
-
- // add a results row
- this.add_row = function() {
- return $a(this.results_area, 'div', '',
- (opts.cell_style ? opts.cell_style : {padding: '3px 0px'}));
- }
-
+ // hide-filter
+ if(!me.show_filters) {
+ this.$w.find('.btn-filter').toggle(false);
+ }
+
+ // hide-refresh
+ if(this.hide_refresh || this.no_refresh) {
+ this.$w.find('.btn-refresh').toggle(false);
+ }
+
+ // toggle-view
+ if(this.show_grid) {
+ this.$w.find('.select-view').toggle(true);
+ }
+ },
+ make_filters: function() {
+ this.filter_list = new wn.ui.FilterList({
+ listobj: this,
+ $parent: this.$w.find('.list-filters').toggle(true),
+ doctype: this.doctype,
+ filter_fields: this.filter_fields
+ });
+ },
- // run the query, get the query from
- // the get_query method of opts
- this.run = function(callback, append) {
- if(callback)
- this.onrun = callback;
-
- if(!append)
- this.start = 0;
+ clear: function() {
+ this.data = [];
+ this.$w.find('.result-list').empty();
+ this.$w.find('.result').toggle(true);
+ this.$w.find('.no-result').toggle(false);
+ this.start = 0;
+ },
+ run: function() {
+ // in old - arguments: 0 = callback, 1 = append
+ var me = this;
+ var a0 = arguments[0]; var a1 = arguments[1];
+
+ if(a0 && typeof a0=='function')
+ this.onrun = a0;
+ if(a0 && a0.callback)
+ this.onrun = a0.callback;
+ if(!a1 || (a0 && a0.append))
+ this.start = 0;
+ me.$w.find('.img-load').toggle(true);
+ wn.call({
+ method: this.opts.method || 'webnotes.widgets.query_builder.runquery',
+ args: this.get_call_args(),
+ callback: function(r) {
+ me.$w.find('.img-load').toggle(false);
+ me.render_results(r)
+ },
+ no_spinner: this.opts.no_loading,
+ btn: this.run_btn
+ });
+ },
+ get_call_args: function() {
// load query
- if(!this.opts.method) {
- this.query = this.opts.get_query ? this.opts.get_query() : this.opts.query;
+ if(!this.method) {
+ this.query = this.get_query ? this.get_query() : this.query;
this.add_limits();
var args={
- query_max: this.query_max || this.opts.query_max || '',
+ query_max: this.query_max,
as_dict: 1
}
args.simple_query = this.query;
@@ -201,29 +243,311 @@ wn.widgets.Listing = function(opts) {
}
}
- if(this.opts.args)
- $.extend(args, this.opts.args)
+ // append user-defined arguments
+ if(this.args)
+ $.extend(args, this.args)
- if(this.opts.get_args) {
- $.extend(args, this.opts.get_args());
+ if(this.get_args) {
+ $.extend(args, this.get_args());
+ }
+ return args;
+ },
+ render_results: function(r) {
+ if(this.start==0) this.clear();
+
+ this.$w.find('.btn-more').toggle(false);
+
+ if(r.message) r.values = r.message;
+
+ if(r.values && r.values.length) {
+ this.data = this.data.concat(r.values);
+ this.render_list(r.values);
+ if(this.show_grid) {
+ this.render_grid();
+ }
+ } else {
+ if(this.start==0) {
+ this.$w.find('.result').toggle(false);
+ this.$w.find('.no-result').toggle(true);
+ }
}
- // show loading
- if(this.loading_img) $di(this.loading_img);
- wn.call({
- method: this.opts.method || 'webnotes.widgets.query_builder.runquery',
- args: args,
- callback: function(r, rt) { me.make_results(r, rt) },
- no_spinner: this.opts.no_loading,
- btn: this.opts.run_btn
- });
- }
-
- this.refresh = this.run;
-
- this.add_limits = function() {
+ // callbacks
+ if(this.onrun) this.onrun();
+ if(this.callback) this.callback(r);
+ },
+ render_grid: function() {
+ //this.gridid = wn.dom.set_unique_id()
+ $.each(this.columns, function(i, c) {
+ if(!c.id) c.id = c.field;
+ })
+
+
+ wn.require('lib/js/lib/slickgrid/slick.grid.css');
+ wn.require('lib/js/lib/slickgrid/slick-default-theme.css');
+ wn.require('lib/js/lib/slickgrid/jquery.event.drag.min.js');
+ wn.require('lib/js/lib/slickgrid/slick.core.js');
+ wn.require('lib/js/lib/slickgrid/slick.grid.js');
+
+ var options = {
+ enableCellNavigation: true,
+ enableColumnReorder: false
+ };
+ grid = new Slick.Grid(this.$w.find('.result-grid')
+ .css('border', '1px solid grey')
+ .css('height', '500px')
+ .get(0), this.data,
+ this.columns, options);
+
+ },
+ render_list: function(values) {
+ var m = Math.min(values.length, this.page_length);
+
+ // render the rows
+ for(var i=0; i < m; i++) {
+ this.render_row(this.add_row(), values[i], this, i);
+ }
+
+ // extend start
+ this.start += m;
+
+ // refreh more button
+ if(values.length >= this.page_length)
+ this.$w.find('.btn-more').toggle(true);
+ },
+ add_row: function() {
+ return this.$w.find('.result-list').append('-
").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 = $("").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(" ")));
+ }
+
+ 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;
+ }
+ }
+
+ // 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++) {
+ if (matches = /\.l\d+/.exec(cssRules[i].selectorText)) {
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+ columnCssRulesL[columnIdx] = cssRules[i];
+ } else if (matches = /\.r\d+/.exec(cssRules[i].selectorText)) {
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+ columnCssRulesR[columnIdx] = cssRules[i];
+ }
+ }
+ }
+
+ function removeCssRules() {
+ $style.remove();
+ }
+
+ function destroy() {
+ getEditorLock().cancelCurrentEdit();
+
+ trigger(self.onBeforeDestroy, {});
+
+ for (var i = 0; i < plugins.length; i++) {
+ unregisterPlugin(plugins[i]);
+ }
+
+ if (options.enableColumnReorder && $headers.sortable) {
+ $headers.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);
+ }
+ }
+ }
+
+ function applyColumnWidths() {
+ var x = 0, w, rule;
+ for (var i = 0; i < columns.length; i++) {
+ w = columns[i].width;
+
+ rule = columnCssRulesL[i];
+ rule.style.left = x + "px";
+
+ rule = columnCssRulesR[i];
+ rule.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 setColumns(columnDefinitions) {
+ columns = columnDefinitions;
+ 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);
+
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+ render();
+ }
+
+ function setData(newData, scrollToTop) {
+ invalidateAllRows();
+ data = newData;
+ 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 showTopPanel() {
+ options.showTopPanel = true;
+ $topPanelScroller.slideDown("fast", resizeCanvas);
+ }
+
+ function hideTopPanel() {
+ options.showTopPanel = false;
+ $topPanelScroller.slideUp("fast", resizeCanvas);
+ }
+
+ function showHeaderRowColumns() {
+ options.showHeaderRow = true;
+ $headerRowScroller.slideDown("fast", resizeCanvas);
+ }
+
+ function hideHeaderRowColumns() {
+ options.showHeaderRow = false;
+ $headerRowScroller.slideUp("fast", resizeCanvas);
+ }
+
+ //////////////////////////////////////////////////////////////////////////////////////////////
+ // Rendering / Scrolling
+
+ function scrollTo(y) {
+ 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.top, range.bottom);
+ updateRowPositions();
+ }
+
+ if (prevScrollTop != newScrollTop) {
+ scrollDir = (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.toString().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) {
+ var d = getDataItem(row);
+ var dataLoading = row < getDataLength() && !d;
+ var cellCss;
+ var rowCss = "slick-row " +
+ (dataLoading ? " loading" : "") +
+ (row % 2 == 1 ? " odd" : " even");
+
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);
+
+ if (metadata && metadata.cssClasses) {
+ rowCss += " " + metadata.cssClasses;
+ }
+
+ stringArray.push("");
+ }
+
+ 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 node = rowsCache[row];
+ if (!node) {
+ return;
+ }
+ $canvas[0].removeChild(node);
+ delete rowsCache[row];
+ delete postProcessedRows[row];
+ renderedRows--;
+ counter_rows_removed++;
+ }
+
+ function invalidateRows(rows) {
+ var i, rl;
+ if (!rows || !rows.length) {
+ return;
+ }
+ scrollDir = 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) {
+ if (!rowsCache[row]) {
+ return;
+ }
+
+ $(rowsCache[row]).children().each(function (i) {
+ var m = columns[i], d = getDataItem(row);
+ if (row === activeRow && i === activeCell && currentEditor) {
+ currentEditor.loadValue(getDataItem(activeRow));
+ } else if (d) {
+ this.innerHTML = getFormatter(row, m)(row, i, getDataItemValueForColumn(d, m), m, getDataItem(row));
+ } else {
+ this.innerHTML = "";
+ }
+ });
+
+ invalidatePostProcessingResults(row);
+ }
+
+ function getViewportHeight() {
+ return parseFloat($.css($container[0], "height", 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) + (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0));
+ } else {
+ viewportH = getViewportHeight();
+ }
+
+ numVisibleRows = Math.ceil(viewportH / options.rowHeight);
+ viewportW = parseFloat($.css($container[0], "width", true));
+ $viewport.height(viewportH);
+
+ if (options.forceFitColumns) {
+ autosizeColumns();
+ }
+
+ updateRowCount();
+ render();
+ }
+
+ function updateRowCount() {
+ if (!initialized) { return; }
+ numberOfRows = getDataLength() +
+ (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 ? getDataLength() : getDataLength() - 1;
+ for (var i in rowsCache) {
+ if (i >= l) {
+ removeRowFromCache(i);
+ }
+ }
+
+ 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) {
+ if (viewportTop == null) {
+ viewportTop = scrollTop;
+ }
+
+ return {
+ top: Math.floor((viewportTop + offset) / options.rowHeight),
+ bottom: Math.ceil((viewportTop + offset + viewportH) / options.rowHeight)
+ };
+ }
+
+ function getRenderedRange(viewportTop) {
+ var range = getVisibleRange(viewportTop);
+ var buffer = Math.round(viewportH / options.rowHeight);
+ var minBuffer = 3;
+
+ if (scrollDir == -1) {
+ range.top -= buffer;
+ range.bottom += minBuffer;
+ } else if (scrollDir == 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);
+
+ return range;
+ }
+
+ function renderRows(range) {
+ var i, l,
+ parentNode = $canvas[0],
+ rowsBefore = renderedRows,
+ stringArray = [],
+ rows = [],
+ startTimestamp = new Date(),
+ needToReselectCell = false;
+
+ for (i = range.top; i <= range.bottom; i++) {
+ if (rowsCache[i]) {
+ continue;
+ }
+ renderedRows++;
+ rows.push(i);
+ appendRowHtml(stringArray, i);
+ if (activeCellNode && activeRow === i) {
+ needToReselectCell = true;
+ }
+ counter_rows_rendered++;
+ }
+
+ if (!rows.length) { return; }
+
+ var x = document.createElement("div");
+ x.innerHTML = stringArray.join("");
+
+ for (i = 0, l = x.childNodes.length; i < l; i++) {
+ rowsCache[rows[i]] = parentNode.appendChild(x.firstChild);
+ }
+
+ if (needToReselectCell) {
+ activeCellNode = getCellNode(activeRow, activeCell);
+ }
+
+ if (renderedRows - rowsBefore > 5) {
+ avgRowRenderTime = (new Date() - startTimestamp) / (renderedRows - rowsBefore);
+ }
+ }
+
+ 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].style.top = (row * options.rowHeight - offset) + "px";
+ }
+ }
+
+ function render() {
+ if (!initialized) { return; }
+ var visible = getVisibleRange();
+ var rendered = getRenderedRange();
+
+ // remove rows no longer in the viewport
+ cleanupRows(rendered);
+
+ // add new rows
+ renderRows(rendered);
+
+ postProcessFromRow = visible.top;
+ postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom);
+ startPostProcessing();
+
+ lastRenderedScrollTop = scrollTop;
+ h_render = null;
+ }
+
+ function handleScroll() {
+ scrollTop = $viewport[0].scrollTop;
+ var scrollLeft = $viewport[0].scrollLeft;
+ var scrollDist = Math.abs(scrollTop - prevScrollTop);
+
+ if (scrollLeft !== prevScrollLeft) {
+ prevScrollLeft = scrollLeft;
+ $headerScroller[0].scrollLeft = scrollLeft;
+ $topPanelScroller[0].scrollLeft = scrollLeft;
+ $headerRowScroller[0].scrollLeft = scrollLeft;
+ }
+
+ if (scrollDist) {
+ scrollDir = prevScrollTop < scrollTop ? 1 : -1;
+ prevScrollTop = scrollTop;
+
+ // switch virtual pages if needed
+ if (scrollDist < viewportH) {
+ scrollTo(scrollTop + offset);
+ } else {
+ var oldOffset = offset;
+ page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));
+ offset = Math.round(page * cj);
+ if (oldOffset != offset) {
+ invalidateAllRows();
+ }
+ }
+
+ if (h_render) {
+ clearTimeout(h_render);
+ }
+
+ if (Math.abs(lastRenderedScrollTop - scrollTop) < viewportH) {
+ render();
+ } else {
+ h_render = setTimeout(render, 50);
+ }
+
+ trigger(self.onViewportChanged, {});
+ }
+
+ trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});
+ }
+
+ function asyncPostProcessRows() {
+ while (postProcessFromRow <= postProcessToRow) {
+ var row = (scrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
+ var rowNode = rowsCache[row];
+ if (!rowNode || postProcessedRows[row] || row >= getDataLength()) {
+ continue;
+ }
+
+ var d = getDataItem(row), cellNodes = rowNode.childNodes;
+ for (var i = 0, j = 0, l = columns.length; i < l; ++i) {
+ var m = columns[i];
+ if (m.asyncPostRender) {
+ m.asyncPostRender(cellNodes[j], postProcessFromRow, d, m);
+ }
+ ++j;
+ }
+
+ postProcessedRows[row] = 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;
+ }
+
+ 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) {
+ navigateLeft();
+ } else if (e.which == 39) {
+ navigateRight();
+ } else if (e.which == 38) {
+ navigateUp();
+ } else if (e.which == 40) {
+ navigateDown();
+ } else if (e.which == 9) {
+ 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();
+ }
+ }
+ }
+ } else {
+ return;
+ }
+ } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) {
+ navigatePrev();
+ } else {
+ return;
+ }
+ }
+
+ // 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) {
+ 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 (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 handleHeaderContextMenu(e) {
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+ var column = $header && columns[self.getColumnIndex($header.data("fieldId"))];
+ trigger(self.onHeaderContextMenu, {column: column}, e);
+ }
+
+ function handleHeaderClick(e) {
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+ var column = $header && columns[self.getColumnIndex($header.data("fieldId"))];
+ 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 = Math.floor((y + offset) / options.rowHeight);
+ 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(node) {
+ // read column number from .l\
- \
+
', {label: this.label}));
},
+
load_doctype: function() {
var me = this;
wn.call({
method: 'webnotes.widgets.form.load.getdoctype',
args: {doctype: me.doctype},
callback: function() {
- if(locals.DocType[me.doctype].__listjs) {
- eval(locals.DocType[me.doctype].__listjs);
- me.listview = wn.doclistviews[me.doctype];
- } else {
- me.listview = {}
- }
-
- if(!me.listview.fields)
- me.listview.fields = ['name', 'modified', 'owner'];
- if(!me.listview.render)
- me.listview.render = me.default_render;
-
- me.make_filters();
- me.make_list();
+ me.$w.find('.wnlist-area').empty(),
+ me.setup_listview();
+ me.init_list();
}
});
},
- make_filters: function() {
- this.filter_list = new wn.ui.FilterList(this, $('#list-filters').get(0), this.doctype);
+ setup_listview: function() {
+ if(locals.DocType[this.doctype].__listjs) {
+ eval(locals.DocType[this.doctype].__listjs);
+ this.listview = wn.doclistviews[this.doctype];
+ } else {
+ this.listview = {}
+ }
+
+ if(!this.listview.fields)
+ this.listview.fields = [
+ {field: "name", name:"ID"},
+ {field: "modified", name:"Last Updated"},
+ {field: "owner", name:"Created By"}
+ ];
+ if(!this.listview.render)
+ this.listview.render = this.default_render;
+
},
- make_list: function() {
- var me = this;
- this.list = new wn.widgets.Listing({
- parent: $('#list-body').get(0),
+ init_list: function() {
+ // init list
+ this.make({
method: 'webnotes.widgets.doclistview.get',
- args: {
- doctype: this.doctype,
- subject: locals.DocType[this.doctype].subject,
- fields: JSON.stringify(me.listview.fields),
- },
- get_args: function() {
- return {filters: JSON.stringify(me.filter_list.get_filters())}
- },
- render_row: function(row, data) {
- data.fullname = wn.user_info(data.owner).fullname;
- data.avatar = wn.user_info(data.owner).image;
- data.when = dateutil.comment_when(data.modified);
- data.doctype = me.doctype;
- me.listview.render(row, data, me);
- },
- hide_refresh: true
+ get_args: this.get_args,
+ parent: this.$w.find('.wnlist-area'),
+ start: 0,
+ page_length: 20,
+ show_filters: true,
+ show_grid: true,
+ columns: this.listview.fields
});
- this.list.run();
+ this.run();
+ },
+ render_row: function(row, data) {
+ data.fullname = wn.user_info(data.owner).fullname;
+ data.avatar = wn.user_info(data.owner).image;
+ data.when = dateutil.comment_when(data.modified);
+ data.doctype = this.doctype;
+ this.listview.render(row, data, this);
+ },
+ get_query_fields: function() {
+ var fields = [];
+ $.each(this.listview.fields, function(i,f) {
+ fields.push(f.query || f.field);
+ });
+ return fields;
+ },
+ get_args: function() {
+ return {
+ doctype: this.doctype,
+ subject: locals.DocType[this.doctype].subject,
+ fields: JSON.stringify(this.get_query_fields()),
+ filters: JSON.stringify(this.filter_list.get_filters())
+ }
},
default_render: function(row, data) {
$(row).html(repl('\
+ this.$w.html(repl('\
-
');
- // filter button
- $(this.wrapper).find('.run-btn').click(function() {
- me.list.run();
- });
- $(this.wrapper).find('h1').html(this.label);
+ \
-
\
- \
- Loading...
\
- Filter this list\
-
\
- \
- \
-
');
-
- this.$w = $(parent);
- },
- set_events: function() {
- var me = this;
- // show filters
- this.$w.find('.set_filters').bind('click', function() {
- me.$w.find('.show_filters').slideToggle();
- if(!me.filters.length)
- me.add_filter();
- });
-
- // show filters
- this.$w.find('.add-filter-btn').bind('click', function() {
- me.add_filter();
- });
-
- },
-
- add_filter: function(fieldname, condition, value) {
- this.filters.push(new wn.ui.Filter(this, this.doctype, fieldname, condition, value));
- },
-
- get_filters: function() {
- // get filter values as dict
- var values = [];
- $.each(this.filters, function(i, f) {
- if(f.filter_field)
- values.push(f.get_value());
- })
- return values;
- }
-});
-
-wn.ui.Filter = Class.extend({
- init: function(flist, doctype, fieldname, condition, value) {
- flist.$w.find('.filter_area').append('\
- \
-
\
- \
- \
- \
- \
- ×\
-
');
- this.fields_by_name = {};
- this.flist = flist;
- this.$w = this.flist.$w.find('.list_filter:last-child');
- this.doctype = doctype;
- this.fieldname = fieldname;
- this.condition = condition;
- this.value = value;
- this.set_events();
- },
- set_events: function() {
- var me = this;
-
- // render fields
- this.render_field_select();
-
- this.$w.find('.fieldname_select').bind('change', function() {
- me.set_field(this.value);
- });
-
- this.$w.find('a.close').bind('click', function() {
- me.$w.css('display','none');
- var value = me.filter_field.get_value();
- me.filter_field = null;
- if(!me.flist.get_filters().length) {
- me.flist.$w.find('.set_filters').toggle(true);
- me.flist.$w.find('.show_filters').toggle(false);
- me.list_obj.list.run();
- }
- if(value) {
- me.list_obj.list.run();
- }
- return false;
- });
-
- // set the field
- if(me.fieldname) {
- // presents given (could be via tags!)
- me.set_field(me.fieldname);
- if(me.condition) me.$w.find('.condition').val(me.condition)
- if(me.value) me.filter_field.set_input(me.value)
- } else {
- me.set_field('name');
- }
-
- },
-
- render_field_select: function() {
- var me = this;
- var $fs = me.$w.find('.fieldname_select');
- me.table_fields = [];
- var std_filters = [
- {fieldname:'name', fieldtype:'Data', label:'ID', parent:me.doctype},
- {fieldname:'modified', fieldtype:'Date', label:'Last Modified', parent:me.doctype},
- {fieldname:'owner', fieldtype:'Data', label:'Created By', parent:me.doctype},
- {fieldname:'_user_tags', fieldtype:'Data', label:'Tags', parent:me.doctype}
- ];
-
- // main table
- $.each(std_filters.concat(fields_list[me.doctype]), function(i, df) {
- me.add_field_option(df, $fs);
- });
-
- // child tables
- $.each(me.table_fields, function(i,table_df) {
- if(table_df.options) {
- $.each(fields_list[table_df.options], function(i, df) {
- me.add_field_option(df, $fs);
- });
- }
- })
- },
-
- add_field_option: function(df, $fs) {
- var me = this;
- if(df.parent==me.doctype) {
- var label = df.label;
- var table = get_label_doctype(me.doctype);
- if(df.fieldtype=='Table') me.table_fields.push(df);
- } else {
- var label = df.label + ' (' + df.parent + ')';
- var table = df.parent;
- }
- if(wn.model.no_value_type.indexOf(df.fieldtype)==-1 &&
- !me.fields_by_name[df.fieldname]) {
- $fs.append($('')
+ .find('.list-row:last').get(0);
+ },
+ refresh: function() {
+ this.run();
+ },
+ add_limits: function() {
this.query += ' LIMIT ' + this.start + ',' + (this.page_length+1);
- }
+ }
+});
+
+
+wn.ui.FilterList = Class.extend({
+ init: function(opts) {
+ $.extend(this, opts);
+ this.filters = [];
+ this.$w = this.$parent;
+ this.set_events();
+ },
+ set_events: function() {
+ var me = this;
+ // show filters
+ this.listobj.$w.find('.btn-filter').bind('click', function() {
+ me.$w.find('.show_filters').slideToggle();
+ if(!me.filters.length)
+ me.add_filter();
+ });
+
+ // show filters
+ this.$w.find('.add-filter-btn').bind('click', function() {
+ me.add_filter();
+ });
+
+ },
- if(opts) this.make();
-}
\ No newline at end of file
+ add_filter: function(fieldname, condition, value) {
+ this.filters.push(new wn.ui.Filter({
+ flist: this,
+ fieldname: fieldname,
+ condition: condition,
+ value: value
+ }));
+ },
+
+ get_filters: function() {
+ // get filter values as dict
+ var values = [];
+ $.each(this.filters, function(i, f) {
+ if(f.filter_field)
+ values.push(f.get_value());
+ })
+ return values;
+ },
+
+ // remove hidden filters
+ update_filters: function() {
+ var fl = [];
+ $.each(this.filters, function(i, f) {
+ if(f.filter_field) fl.push(f);
+ })
+ this.filters = fl;
+ }
+});
+
+wn.ui.Filter = Class.extend({
+ init: function(opts) {
+ $.extend(this, opts);
+
+ this.doctype = this.flist.doctype;
+ this.fields_by_name = {};
+ this.make();
+ this.make_options();
+ this.set_events();
+ },
+ make: function() {
+ this.flist.$w.find('.filter_area').append('
\
+ \
+ \
+ \
+ ×\
+
');
+ this.$w = this.flist.$w.find('.list_filter:last-child');
+ this.$select = this.$w.find('.fieldname_select');
+ },
+ make_options: function() {
+ if(this.filter_fields) {
+ // filters specified explicitly
+ for(var i in this.filter_fields)
+ this.add_field_option(this.filter_fields[i])
+ } else {
+ // filters to be built from doctype
+ this.render_field_select();
+ }
+ },
+ set_events: function() {
+ var me = this;
+
+ // render fields
+
+ this.$w.find('.fieldname_select').bind('change', function() {
+ me.set_field(this.value);
+ });
+
+ this.$w.find('a.close').bind('click', function() {
+ me.$w.css('display','none');
+ var value = me.filter_field.get_value();
+ me.filter_field = null;
+ if(!me.flist.get_filters().length) {
+ me.flist.$w.find('.set_filters').toggle(true);
+ me.flist.$w.find('.show_filters').toggle(false);
+ }
+ if(value) {
+ me.flist.listobj.run();
+ }
+ me.flist.update_filters();
+ return false;
+ });
+
+ // set the field
+ if(me.fieldname) {
+ // presents given (could be via tags!)
+ me.set_field(me.fieldname);
+ if(me.condition) me.$w.find('.condition').val(me.condition)
+ if(me.value) me.filter_field.set_input(me.value)
+ } else {
+ me.set_field('name');
+ }
+
+ },
+
+ render_field_select: function() {
+ var me = this;
+ me.table_fields = [];
+ var std_filters = [
+ {fieldname:'name', fieldtype:'Data', label:'ID', parent:me.doctype},
+ {fieldname:'modified', fieldtype:'Date', label:'Last Modified', parent:me.doctype},
+ {fieldname:'owner', fieldtype:'Data', label:'Created By', parent:me.doctype},
+ {fieldname:'_user_tags', fieldtype:'Data', label:'Tags', parent:me.doctype}
+ ];
+
+ // main table
+ $.each(std_filters.concat(fields_list[me.doctype]), function(i, df) {
+ me.add_field_option(df);
+ });
+
+ // child tables
+ $.each(me.table_fields, function(i,table_df) {
+ if(table_df.options) {
+ $.each(fields_list[table_df.options], function(i, df) {
+ me.add_field_option(df);
+ });
+ }
+ })
+ },
+
+ add_field_option: function(df) {
+ var me = this;
+ if(me.doctype && df.parent==me.doctype) {
+ var label = df.label;
+ var table = get_label_doctype(me.doctype);
+ if(df.fieldtype=='Table') me.table_fields.push(df);
+ } else {
+ var label = df.label + ' (' + df.parent + ')';
+ var table = df.parent;
+ }
+ if(wn.model.no_value_type.indexOf(df.fieldtype)==-1 &&
+ !me.fields_by_name[df.fieldname]) {
+ this.$select.append($('