jsl-ui 9.11.0 → 9.13.0

package/lib/core/jq.js

@@ -43,6 +43,12 @@ function jQWrapper(elements) {
             if (selector instanceof HTMLElement) {
                 selector.appendChild(_elements[i]);
             }
+            else if (typeof (selector) === "string") {
+                var parents = document.querySelectorAll(selector);
+                for (var i_1 = 0, len = parents.length; i_1 < len; i_1++) {
+                    parents[i_1].appendChild(_elements[i_1]);
+                }
+            }
             else {
                 for (var j = 0; j < selector.length; j++) {
                     selector[j].appendChild(_elements[i]);

package/lib/grid/plugins/ext.overlay.css

@@ -0,0 +1,28 @@
+
+.header-overlay {
+    background-color: #217346;
+}
+
+.cell-overlay,
+.selection-cell-overlay {
+    display: block;
+    position: absolute;
+    z-index: 900;
+    background-color: #217346;
+}
+
+.handle-overlay {
+    border: 1px solid white;
+    padding: 3px;
+    background-color: #217346;
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    z-index: 1000;
+    cursor: crosshair;
+}
+
+.overlay-handle-decorator {
+    border: 2px solid #217346;
+    z-index: 1000;
+}

package/lib/grid/plugins/ext.overlay.d.ts

@@ -0,0 +1,2 @@
+import "./ext.overlay.css";
+export declare function Overlays(options: any): void;

package/lib/grid/plugins/ext.overlay.js

@@ -0,0 +1,276 @@
+import "./ext.overlay.css";
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+import { Moveable } from "../../interaction/moveable";
+import { EventHandler } from "../../interaction/eventhandler";
+var selectinOverlayWidth = 1;
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Ext": {
+        "Plugins": {
+            "Overlays": Overlays
+        }
+    }
+});
+export function Overlays(options) {
+    var $headerOverlay;
+    var $rowOverlay;
+    var selectionOverlay;
+    var currentColumn;
+    var handleDragging;
+    var grid;
+    var self = this;
+    var handler = new Slick.EventHandler();
+    var dragDecorator;
+    var defaults = {
+        buttonCssClass: null,
+        buttonImage: "../images/down.gif",
+        decoratorWidth: 2
+    };
+    function init(g) {
+        options = $.deepExtend({}, defaults, options);
+        grid = g;
+        dragDecorator = overlayRangeDecorator(grid);
+        $headerOverlay = createRowHeaderOverlay(100);
+        $rowOverlay = createRowHeaderOverlay(100);
+        selectionOverlay = createSelectionOverlay();
+        handler.subscribe(grid.onActiveCellChanged, activeCellChanged)
+            .subscribe(grid.onColumnsResized, columnResized)
+            .subscribe(grid.onScroll, gridScrolled);
+    }
+    function destroy() {
+        handler.unsubscribeAll();
+    }
+    function createRowHeaderOverlay(zIndex) {
+        return $(document.createElement("div"))
+            .addClass("header-overlay")
+            .css("position", "absolute")
+            .css("z-index", zIndex)
+            .appendTo(grid.getContainerNode());
+    }
+    function createSelectionOverlay() {
+        var canvas = grid.getCanvasNode();
+        var overlay = new Overlay(canvas, true);
+        return overlay;
+    }
+    function activeCellChanged(e, args) {
+        dragDecorator.hide();
+        moveSelectionOverlay(e, args);
+        moveHeaderRowOverlays(e, args);
+    }
+    function columnResized(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function gridScrolled(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function moveHeaderRowOverlays(e, args) {
+        if (typeof args.cell != 'undefined') {
+            currentColumn = args.cell;
+        }
+        else {
+            if (!currentColumn) {
+                return;
+            }
+        }
+        if (!grid.getActiveCell()) {
+            $rowOverlay.css("display", "none");
+            return;
+        }
+        $rowOverlay.css("display", "");
+        var headerHeight = grid.getContainerNode().querySelector('.slick-header').getBoundingClientRect().height;
+        var cellPosition = grid.getActiveCellPosition();
+        var gridPosition = grid.getGridPosition();
+        $rowOverlay.css("display", cellPosition.visible ? "" : "none");
+        $headerOverlay.css("display", cellPosition.visible ? "" : "none");
+        var headerWidth = cellPosition.width;
+        $headerOverlay.css("left", (cellPosition.left - gridPosition.left) + "px").css("top", (headerHeight - 2) + "px").css("width", headerWidth + "px").css("height", "2px");
+        $rowOverlay.css("left", "0px").css("top", (cellPosition.top - gridPosition.top) + "px").css("width", "2px").css("height", cellPosition.height + "px");
+    }
+    function moveSelectionOverlay(e, args) {
+        var activeCell = grid.getActiveCell();
+        if (!activeCell) {
+            selectionOverlay.toggle(false);
+            return;
+        }
+        var column = grid.getColumns()[activeCell.cell];
+        selectionOverlay.toggle(true);
+        // Only show the handle if the cell is editable
+        selectionOverlay.handle.style.display = (column.editor != null && !column.readonly && grid.getOptions().editable) ? "" : "none";
+        var position = grid.getCellNodeBox(activeCell.row, activeCell.cell);
+        // Not coming through on the property so re-calculated
+        position.height = position.bottom - position.top;
+        position.width = position.right - position.left;
+        selectionOverlay.$left.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$right.css({
+            left: (position.left + position.width) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$top.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top - selectinOverlayWidth) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        selectionOverlay.$bottom.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top + position.height) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        selectionOverlay.handle.style.left = (position.left + position.width - 4) + "px";
+        selectionOverlay.handle.style.top = (position.top + position.height - 4) + "px";
+    }
+    var dd_range;
+    function handleOverlayDragStart(e) {
+        var cell = grid.getActiveCell();
+        if (grid.canCellBeSelected(cell.row, cell.cell)) {
+            handleDragging = true;
+        }
+        if (!handleDragging) {
+            e.cancelEvent();
+            return null;
+        }
+        grid.focus();
+        dd_range = { start: cell, end: {} };
+        return dragDecorator.show(new Slick.Range(cell.row, cell.cell));
+    }
+    function handleOverlayDrag(e) {
+        if (!handleDragging) {
+            return;
+        }
+        var end = {
+            cell: dd_range.start.cell, row: grid.getCellFromPoint(0, e.y).row - 1
+        };
+        if (!grid.canCellBeSelected(end.row, end.cell)) {
+            e.cancelEvent(); // ?
+            return;
+        }
+        dd_range.end = end;
+        dragDecorator.show(new Slick.Range(dd_range.start.row, dd_range.start.cell, end.row, dd_range.start.cell));
+    }
+    function handleOverlayDragEnd(e) {
+        if (!handleDragging) {
+            return;
+        }
+        handleDragging = false;
+        selectionOverlay.handle.style.display = "none";
+        self.onFillUpDown.notify({ "grid": grid, "range": dragDecorator.getSelectedRange(), direction: dd_range.end.row >= dd_range.start.row ? "down" : "up" }, e, self);
+    }
+    function Overlay(target, withHandel, prefix) {
+        var className = (prefix || '') + 'cell-overlay';
+        this.$left = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('left')
+            .appendTo(target);
+        this.$right = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('right')
+            .appendTo(target);
+        this.$top = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('top')
+            .appendTo(target);
+        this.$bottom = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('bottom')
+            .appendTo(target);
+        if (withHandel) {
+            this.handle = document.createElement("div");
+            this.handle.classList.add("handle-overlay");
+            target.appendChild(this.handle);
+            Moveable(target, {
+                selector: ".handle-overlay",
+                direction: "y",
+                gridY: grid.getOptions().rowHeight,
+                onStart: EventHandler.Create(function (e) {
+                    console.log("onstart");
+                    handleOverlayDragStart(e);
+                }),
+                onMove: EventHandler.Create(function (e) {
+                    console.log("onMove");
+                    handleOverlayDrag(e);
+                }),
+                onStop: EventHandler.Create(function (e) {
+                    console.log("onStop");
+                    handleOverlayDragEnd(e);
+                })
+            });
+        }
+        this.toggle = function (showOrHide) {
+            this.$left.css("display", showOrHide ? "" : "none");
+            this.$right.css("display", showOrHide ? "" : "none");
+            this.$top.css("display", showOrHide ? "" : "none");
+            this.$bottom.css("display", showOrHide ? "" : "none");
+            if (this.handle) {
+                this.handle.style.display = showOrHide ? "" : "none";
+            }
+        };
+    }
+    function overlayRangeDecorator(targetGrid) {
+        var decorator;
+        var r;
+        function show(range) {
+            r = range;
+            if (!decorator) {
+                decorator = new Overlay(grid.getCanvasNode(), false, 'selection-');
+            }
+            var from = targetGrid.getCellNodeBox(range.fromRow, range.fromCell);
+            var to = targetGrid.getCellNodeBox(range.toRow, range.toCell);
+            decorator.$left.css({
+                top: from.top - 2,
+                left: from.left - 2,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$right.css({
+                top: from.top - 2,
+                left: to.right - 1,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$top.css({
+                top: from.top - 2,
+                left: to.left - 1,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 2
+            });
+            decorator.$bottom.css({
+                top: to.bottom - 1,
+                left: from.left - 2,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 3
+            });
+            return decorator;
+        }
+        function getSelectedRange() {
+            return r;
+        }
+        function hide() {
+            if (decorator) {
+                decorator.toggle(false);
+                decorator = null;
+            }
+        }
+        return {
+            hide: hide,
+            show: show,
+            getSelectedRange: getSelectedRange
+        };
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "onFillUpDown": new Slick.Event()
+    });
+}

package/lib/grid/slick.core.d.ts

@@ -4,7 +4,7 @@ export interface ISlick {
     "Event": () => void;
     "EventData": () => void;
     "EventHandler": () => void;
-    "Range": (fromRow: number, fromCell: number, toRow: number, toCell: number) => void;
+    "Range": (fromRow: number, fromCell: number, toRow?: number, toCell?: number) => void;
     "NonDataRow": () => void;
     "Group": any;
     "GroupTotals": any;
@@ -16,7 +16,7 @@ export interface ISlick {
 }
 export interface ISlickEvent<T> {
     subscribe(fnc: (e: any, args: T) => any): any;
-    notify(e: any, args: T): any;
+    notify(args: T, e: any): any;
     countHandlers(): number;
 }
 export interface ISlickFormatterResult {

package/lib/grid/slick.creator.d.ts

@@ -16,6 +16,8 @@ export interface ISlickCreatorOptions extends ISlickGridOptions {
     } | any[]>;
     showFilterDialog?: (column: ISlickColumn, grid: IJSLGrid<any>) => void;
     allowRowMove?: boolean;
+    enableFillDown?: boolean;
+    setDataItemValueForColumn?: (item: any, columnDef: ISlickColumn, value: any) => void;
 }
 export interface IJSLGrid<T> extends ISlickGrid<T> {
     dataView: ISlickDataView<T>;

package/lib/grid/slick.creator.js

@@ -10,6 +10,7 @@ import { TextFormatter } from "./slick.formatters";
 import { ExcelFilter } from "./filterDialogs/excelFilter";
 import { UILang } from "../core/lang";
 import { RowMoveManager } from "./plugins/slick.rowmovemanager";
+import { Overlays } from "./plugins/ext.overlay";
 var $ = jQueryReplacement;
 export function createJSLGrid(selector, data, columns, option) {
     var formulaObjects = [];
@@ -105,6 +106,58 @@ export function createJSLGrid(selector, data, columns, option) {
                 grid.render();
             });
         }
+        if (option.enableFillDown) {
+            var overlayPlugin = new Overlays({});
+            // Event fires when a range is selected
+            overlayPlugin.onFillUpDown.subscribe(function (e, args) {
+                var column = grid.getColumns()[args.range.fromCell];
+                // Ensure the column is editable
+                if (column.editor == null || column.readonly || !grid.getOptions().editable) {
+                    return;
+                }
+                // Find the initial value
+                dataView.beginUpdate();
+                if (args.direction === "down") {
+                    var item = dataView.getItem(args.range.fromRow);
+                    var value = grid.getDataItemValueForColumn(item, column); // item[column.field];
+                    // Copy the value down
+                    for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
+                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column: column }, e) !== false) {
+                            var oldValue = grid.getDataItemValueForColumn(dataView.getItem(i), column);
+                            if (options.setDataItemValueForColumn != null) {
+                                options.setDataItemValueForColumn(dataView.getItem(i), column, value);
+                            }
+                            else {
+                                dataView.getItem(i)[column.field] = value;
+                            }
+                            grid.invalidateRow(i);
+                            grid.onAfterEdit.notify({ grid: grid, oldValue: oldValue, newValue: value, column: column, item: dataView.getItem(i) }, e);
+                        }
+                    }
+                }
+                else {
+                    var item = dataView.getItem(args.range.toRow);
+                    var value = grid.getDataItemValueForColumn(item, column); // item[column.field];
+                    // Copy the value up
+                    for (var i = args.range.fromRow; i <= args.range.toRow - 1; i++) {
+                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column: column }, e) !== false) {
+                            var oldValue = grid.getDataItemValueForColumn(dataView.getItem(i), column);
+                            if (options.setDataItemValueForColumn != null) {
+                                options.setDataItemValueForColumn(dataView.getItem(i), column, value);
+                            }
+                            else {
+                                dataView.getItem(i)[column.field] = value;
+                            }
+                            grid.invalidateRow(i);
+                            grid.onAfterEdit.notify({ grid: grid, oldValue: oldValue, newValue: value, column: column, item: dataView.getItem(i) }, e);
+                        }
+                    }
+                }
+                dataView.endUpdate();
+                grid.render();
+            });
+            grid.registerPlugin(overlayPlugin);
+        }
         if (!option.explicitInitialization) {
             grid.init();
         }
@@ -317,10 +370,16 @@ export function createJSLGrid(selector, data, columns, option) {
     }
     // refresh formulas depending on the given column
     function triggerFormula(column, item) {
+        var options = grid.getOptions();
         var f = formulas[column];
         if (f) {
             for (var i = 0, l = f.length; i < l; i++) {
-                item[f[i].column] = f[i].fnc(item, column);
+                if (options.setDataItemValueForColumn != null) {
+                    options.setDataItemValueForColumn(item, f[i].column, f[i].fnc(item, column));
+                }
+                else {
+                    item[f[i].column] = f[i].fnc(item, column);
+                }
             }
         }
     }
@@ -343,7 +402,12 @@ export function createJSLGrid(selector, data, columns, option) {
             item: item
         });
         if (afterEditResult === false) {
-            item[column.field] = oldVal;
+            if (options.setDataItemValueForColumn != null) {
+                options.setDataItemValueForColumn(item, column, oldVal);
+            }
+            else {
+                item[column.field] = oldVal;
+            }
             triggerFormula(column.field, item);
             dataView.updateItem(item[options.primaryKey], item);
         }

package/lib/grid/slick.grid.d.ts

@@ -114,7 +114,12 @@ export interface ISlickGrid<T> {
         row: number;
         cell: number;
     }>;
-    "onColumnsResized": ISlickEvent<any>;
+    "onColumnsResized": ISlickEvent<{
+        cell: number;
+        width: number;
+        previousWidth: number;
+        column: ISlickColumn;
+    }[]>;
     "onAppendCell": ISlickEvent<{
         row: number;
         cell: number;
@@ -244,6 +249,36 @@ export interface ISlickGrid<T> {
         commitCurrentEdit: () => boolean;
         cancelCurrentEdit: () => boolean;
     };
+    "invalidateRow": (row: number) => void;
+    "getCanvasNode": () => HTMLElement;
+    "focus": () => void;
+    "getActiveCellPosition": () => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        visible: boolean;
+    };
     "resetActiveCell": () => void;
+    "getCellNodeBox": (row: number, cell: number) => {
+        bottom: number;
+        left: number;
+        top: number;
+        right: number;
+        height: number;
+        width: number;
+    };
+    "canCellBeSelected": (row: number, cell: number) => boolean;
+    "getGridPosition": () => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        visible: boolean;
+    };
 }
 export declare function SlickGrid(container: HTMLDivElement | string, data: any, columns: ISlickColumn[], options: ISlickGridOptions): void;

package/lib/grid/slick.grid.js

@@ -1795,21 +1795,29 @@ export function SlickGrid(container, data, columns, options) {
         }
     }
     function finishColumnResize() {
+        var changedColumns = [];
         var newWidth;
         var columnElements = $headers.children();
         $headers.find(".slick-header-column-active").removeClass("slick-header-column-active");
         for (var j = 0; j < columns.length; j++) {
             var c = columns[j];
             newWidth = $(columnElements[j]).width();
-            if (c.previousWidth !== newWidth && c.rerenderOnResize) {
-                invalidateAllRows();
-                break;
+            if (c.previousWidth !== newWidth) {
+                changedColumns.push({ cell: j,
+                    width: newWidth,
+                    previousWidth: c.previousWidth,
+                    column: c
+                });
+                if (c.rerenderOnResize) {
+                    invalidateAllRows();
+                    break;
+                }
             }
         }
         updateCanvasWidth(true);
         resizeCanvas();
         handleScroll();
-        trigger(self.onColumnsResized, {});
+        trigger(self.onColumnsResized, changedColumns);
     }
     // function setupColumnResize() {
     //   if (1) return;

package/lib/index.css

@@ -641,6 +641,35 @@ input.editor-text, textarea.editor-text {
   background-repeat: no-repeat;
 }
 
+.header-overlay {
+  background-color: #217346;
+}
+
+.cell-overlay, .selection-cell-overlay {
+  z-index: 900;
+  background-color: #217346;
+  display: block;
+  position: absolute;
+}
+
+.handle-overlay {
+  width: 2px;
+  height: 2px;
+  z-index: 1000;
+  cursor: crosshair;
+  background-color: #217346;
+  border: 1px solid #fff;
+  padding: 3px;
+  position: absolute;
+}
+
+.overlay-handle-decorator {
+  z-index: 1000;
+  border: 2px solid #217346;
+}
+
+
+
 .slick-cell .jsl-toggle {
   color: #888;
   width: 1.2em;