jsl-ui 9.18.3 → 9.18.4

package/lib/grid/plugins/slick.cellrangedecorator.js

@@ -0,0 +1,68 @@
+import { jQueryReplacement } from '../../core/jq';
+import { Slick } from '../slick.core';
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(Slick, {
+    "CellRangeDecorator": CellRangeDecorator
+});
+/***
+ * Displays an overlay on top of a given cell range.
+ *
+ * TODO:
+ * Currently, it blocks mouse events to DOM nodes behind it.
+ * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
+ * Could also construct the borders separately using 4 individual DIVs.
+ *
+ * @param {Grid} grid
+ * @param {Object} options
+ */
+export function CellRangeDecorator(grid, options) {
+    var _elem;
+    var _defaults = {
+        selectionCssClass: 'slick-range-decorator',
+        selectionCss: {
+            "zIndex": "9999",
+            "border": "2px dashed red"
+        },
+        offset: {
+            top: -1,
+            left: -1,
+            height: -2,
+            width: -2
+        }
+    };
+    options = $.deepExtend({}, _defaults, options);
+    function show(range) {
+        if (!_elem) {
+            _elem = $("<div></div>" /*, {css: options.selectionCss}*/)
+                .addClass(options.selectionCssClass)
+                .css("position", "absolute")
+                .appendTo(grid.getActiveCanvasNode());
+            if (options.selectionCss) {
+                for (var key in options.selectionCss) {
+                    _elem.css(key, options.selectionCss[key]);
+                }
+            }
+        }
+        var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
+        var to = grid.getCellNodeBox(range.toRow, range.toCell);
+        _elem.css({
+            top: from.top + options.offset.top,
+            left: from.left + options.offset.left,
+            height: to.bottom - from.top + options.offset.height,
+            width: to.right - from.left + options.offset.width
+        });
+        return _elem;
+    }
+    function hide() {
+        if (_elem) {
+            _elem.remove();
+            _elem = null;
+        }
+    }
+    $.shallowExtend(this, {
+        "pluginName": "CellRangeDecorator",
+        "show": show,
+        "hide": hide
+    });
+}

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

@@ -0,0 +1 @@
+export declare function CellRangeSelector(options: any): void;

package/lib/grid/plugins/slick.cellrangeselector.js

@@ -0,0 +1,144 @@
+import { jQueryReplacement } from '../../core/jq';
+import { Slick, Range } from '../slick.core';
+import { CellRangeDecorator } from './slick.cellrangedecorator';
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "CellRangeSelector": CellRangeSelector
+    }
+});
+export function CellRangeSelector(options) {
+    var _grid;
+    var _currentlySelectedRange;
+    var _canvas;
+    var _gridOptions;
+    var _$activeCanvas;
+    var _dragging;
+    var _decorator;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+        selectionCss: {
+            "border": "2px dashed blue"
+        }
+    };
+    // Frozen row & column variables
+    var _rowOffset;
+    var _columnOffset;
+    var _isRightCanvas;
+    var _isBottomCanvas;
+    // Scrollings
+    var _scrollTop = 0;
+    var _scrollLeft = 0;
+    function init(grid) {
+        options = $.deepExtend({}, _defaults, options);
+        _decorator = options.cellDecorator || new CellRangeDecorator(grid, options);
+        _grid = grid;
+        _canvas = _grid.getCanvasNode();
+        _gridOptions = _grid.getOptions();
+        _handler
+            .subscribe(_grid.onScroll, handleScroll)
+            .subscribe(_grid.onDragInit, handleDragInit)
+            .subscribe(_grid.onDragStart, handleDragStart)
+            .subscribe(_grid.onDrag, handleDrag)
+            .subscribe(_grid.onDragEnd, handleDragEnd);
+    }
+    function destroy() {
+        _handler.unsubscribeAll();
+    }
+    function getCellDecorator() {
+        return _decorator;
+    }
+    function handleScroll(e, args) {
+        _scrollTop = args.scrollTop;
+        _scrollLeft = args.scrollLeft;
+    }
+    function handleDragInit(e, dd) {
+        // Set the active canvas node because the decorator needs to append its
+        // box to the correct canvas
+        _$activeCanvas = $(_grid.getActiveCanvasNode(e));
+        var c = _$activeCanvas.offset();
+        _rowOffset = 0;
+        _columnOffset = 0;
+        _isBottomCanvas = _$activeCanvas.hasClass('grid-canvas-bottom');
+        if (_gridOptions.frozenRow > -1 && _isBottomCanvas) {
+            _rowOffset = (_gridOptions.frozenBottom) ? $('.grid-canvas-bottom').height() : $('.grid-canvas-top').height();
+        }
+        _isRightCanvas = _$activeCanvas.hasClass('grid-canvas-right');
+        if (_gridOptions.frozenColumn > -1 && _isRightCanvas) {
+            _columnOffset = $('.grid-canvas-left').width();
+        }
+        // // prevent the grid from cancelling drag'n'drop by default
+        // e.stopImmediatePropagation();
+    }
+    function handleDragStart(e, dd) {
+        var cell = _grid.getCellFromEvent(e);
+        if (_self.onBeforeCellRangeSelected.notify(cell) !== false) {
+            if (_grid.canCellBeSelected(cell.row, cell.cell)) {
+                _dragging = true;
+                e.stopImmediatePropagation();
+            }
+        }
+        if (!_dragging) {
+            return;
+        }
+        _grid.focus();
+        var startX = dd.startX - $(_canvas).offset().left;
+        if (_gridOptions.frozenColumn >= 0 && _isRightCanvas) {
+            startX += _scrollLeft;
+        }
+        var startY = dd.startY - $(_canvas).offset().top;
+        if (_gridOptions.frozenRow >= 0 && _isBottomCanvas) {
+            startY += _scrollTop;
+        }
+        var start = _grid.getCellFromPoint(startX, startY);
+        dd.range = { start: start, end: {} };
+        _currentlySelectedRange = dd.range;
+        return _decorator.show(new Range(start.row, start.cell));
+    }
+    function handleDrag(e, dd) {
+        if (!_dragging) {
+            return;
+        }
+        e.stopImmediatePropagation();
+        var end = _grid.getCellFromPoint(e.pageX - _$activeCanvas.offset().left + _columnOffset, e.pageY - _$activeCanvas.offset().top + _rowOffset);
+        // ... frozen column(s), 
+        if (_gridOptions.frozenColumn >= 0 && (!_isRightCanvas && (end.cell > _gridOptions.frozenColumn)) || (_isRightCanvas && (end.cell <= _gridOptions.frozenColumn))) {
+            return;
+        }
+        // ... or frozen row(s)
+        if (_gridOptions.frozenRow >= 0 && (!_isBottomCanvas && (end.row >= _gridOptions.frozenRow)) || (_isBottomCanvas && (end.row < _gridOptions.frozenRow))) {
+            return;
+        }
+        // ... or regular grid (without any frozen options)
+        if (!_grid.canCellBeSelected(end.row, end.cell)) {
+            return;
+        }
+        dd.range.end = end;
+        _decorator.show(new Slick.Range(dd.range.start.row, dd.range.start.cell, end.row, end.cell));
+    }
+    function handleDragEnd(e, dd) {
+        if (!_dragging) {
+            return;
+        }
+        _dragging = false;
+        e.stopImmediatePropagation();
+        _decorator.hide();
+        _self.onCellRangeSelected.notify({
+            range: new Slick.Range(dd.range.start.row, dd.range.start.cell, dd.range.end.row, dd.range.end.cell)
+        });
+    }
+    function getCurrentRange() {
+        return _currentlySelectedRange;
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "pluginName": "CellRangeSelector",
+        "getCellDecorator": getCellDecorator,
+        "getCurrentRange": getCurrentRange,
+        "onBeforeCellRangeSelected": new Slick.Event(),
+        "onCellRangeSelected": new Slick.Event()
+    });
+}

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

@@ -0,0 +1 @@
+export declare function CellSelectionModel(options?: any): void;

package/lib/grid/plugins/slick.cellselectionmodel.js

@@ -0,0 +1,194 @@
+import { jQueryReplacement } from '../../core/jq';
+import { Slick, Range } from '../slick.core';
+import { CellRangeSelector } from './slick.cellrangeselector';
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "CellSelectionModel": CellSelectionModel
+    }
+});
+export function CellSelectionModel(options) {
+    var _grid;
+    var _canvas;
+    var _ranges = [];
+    var _self = this;
+    var _selector;
+    if (typeof options === "undefined" || typeof options.cellRangeSelector === "undefined") {
+        _selector = new CellRangeSelector({
+            "selectionCss": {
+                "border": "2px solid black"
+            }
+        });
+    }
+    else {
+        _selector = options.cellRangeSelector;
+    }
+    var _options;
+    var _defaults = {
+        selectActiveCell: true
+    };
+    function init(grid) {
+        _options = $.deepExtend({}, _defaults, options);
+        _grid = grid;
+        _canvas = _grid.getCanvasNode();
+        _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
+        _grid.onKeyDown.subscribe(handleKeyDown);
+        grid.registerPlugin(_selector);
+        _selector.onCellRangeSelected.subscribe(handleCellRangeSelected);
+        _selector.onBeforeCellRangeSelected.subscribe(handleBeforeCellRangeSelected);
+    }
+    function destroy() {
+        _grid.onActiveCellChanged.unsubscribe(handleActiveCellChange);
+        _grid.onKeyDown.unsubscribe(handleKeyDown);
+        _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
+        _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
+        _grid.unregisterPlugin(_selector);
+    }
+    function removeInvalidRanges(ranges) {
+        var result = [];
+        for (var i = 0; i < ranges.length; i++) {
+            var r = ranges[i];
+            if (_grid.canCellBeSelected(r.fromRow, r.fromCell) && _grid.canCellBeSelected(r.toRow, r.toCell)) {
+                result.push(r);
+            }
+        }
+        return result;
+    }
+    function rangesAreEqual(range1, range2) {
+        var areDifferent = (range1.length !== range2.length);
+        if (!areDifferent) {
+            for (var i = 0; i < range1.length; i++) {
+                if (range1[i].fromCell !== range2[i].fromCell
+                    || range1[i].fromRow !== range2[i].fromRow
+                    || range1[i].toCell !== range2[i].toCell
+                    || range1[i].toRow !== range2[i].toRow) {
+                    areDifferent = true;
+                    break;
+                }
+            }
+        }
+        return !areDifferent;
+    }
+    function setSelectedRanges(ranges) {
+        // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
+        if ((!_ranges || _ranges.length === 0) && (!ranges || ranges.length === 0)) {
+            return;
+        }
+        // if range has not changed, don't fire onSelectedRangesChanged
+        var rangeHasChanged = !rangesAreEqual(_ranges, ranges);
+        _ranges = removeInvalidRanges(ranges);
+        if (rangeHasChanged) {
+            _self.onSelectedRangesChanged.notify(_ranges);
+        }
+    }
+    function getSelectedRanges() {
+        return _ranges;
+    }
+    function handleBeforeCellRangeSelected(e, args) {
+        if (_grid.getEditorLock().isActive()) {
+            e.stopPropagation();
+            return false;
+        }
+    }
+    function handleCellRangeSelected(e, args) {
+        _grid.setActiveCell(args.range.fromRow, args.range.fromCell, false, false, true);
+        setSelectedRanges([args.range]);
+    }
+    var lastActiveCell;
+    function handleActiveCellChange(e, args) {
+        if (_options.selectActiveCell && args.row != null && args.cell != null) {
+            var metaKey = e.ctrlKey || e.metaKey;
+            if (metaKey) {
+                var ranges = getSelectedRanges().slice();
+                ranges.push(new Range(args.row, args.cell));
+                setSelectedRanges(ranges);
+                lastActiveCell = { row: args.row, cell: args.cell };
+            }
+            else if (e.shiftKey) {
+                var ranges = getSelectedRanges().slice();
+                if (ranges.length > 0) {
+                    var currentRange = ranges.pop();
+                    if (lastActiveCell == null) {
+                        lastActiveCell = { row: currentRange.fromRow, cell: currentRange.fromCell };
+                    }
+                    var newRange = new Range(Math.min(lastActiveCell.row, args.row), Math.min(lastActiveCell.cell, args.cell), Math.max(lastActiveCell.row, args.row), Math.max(lastActiveCell.cell, args.cell));
+                    ranges.push(newRange);
+                }
+                else {
+                    ranges.push(new Range(args.row, args.cell));
+                    lastActiveCell = { row: args.row, cell: args.cell };
+                }
+                setSelectedRanges(ranges);
+            }
+            else {
+                setSelectedRanges([new Range(args.row, args.cell)]);
+                lastActiveCell = { row: args.row, cell: args.cell };
+            }
+        }
+        else if (!_options.selectActiveCell) {
+            // clear the previous selection once the cell changes
+            setSelectedRanges([]);
+        }
+    }
+    function handleKeyDown(e) {
+        /***
+         * Кey codes
+         * 37 left
+         * 38 up
+         * 39 right
+         * 40 down
+         */
+        var ranges, last;
+        var active = _grid.getActiveCell();
+        var metaKey = e.ctrlKey || e.metaKey;
+        if (active && e.shiftKey && !metaKey && !e.altKey &&
+            (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40)) {
+            ranges = getSelectedRanges().slice();
+            if (!ranges.length)
+                ranges.push(new Range(active.row, active.cell));
+            // keyboard can work with last range only
+            last = ranges.pop();
+            // can't handle selection out of active cell
+            if (!last.contains(active.row, active.cell))
+                last = new Range(active.row, active.cell);
+            var dRow = last.toRow - last.fromRow, dCell = last.toCell - last.fromCell, 
+            // walking direction
+            dirRow = active.row == last.fromRow ? 1 : -1, dirCell = active.cell == last.fromCell ? 1 : -1;
+            if (e.which == 37) {
+                dCell -= dirCell;
+            }
+            else if (e.which == 39) {
+                dCell += dirCell;
+            }
+            else if (e.which == 38) {
+                dRow -= dirRow;
+            }
+            else if (e.which == 40) {
+                dRow += dirRow;
+            }
+            // define new selection range
+            var new_last = new Slick.Range(active.row, active.cell, active.row + dirRow * dRow, active.cell + dirCell * dCell);
+            if (removeInvalidRanges([new_last]).length) {
+                ranges.push(new_last);
+                var viewRow = dirRow > 0 ? new_last.toRow : new_last.fromRow;
+                var viewCell = dirCell > 0 ? new_last.toCell : new_last.fromCell;
+                _grid.scrollRowIntoView(viewRow);
+                _grid.scrollCellIntoView(viewRow, viewCell);
+            }
+            else
+                ranges.push(last);
+            setSelectedRanges(ranges);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    $.shallowExtend(this, {
+        "getSelectedRanges": getSelectedRanges,
+        "setSelectedRanges": setSelectedRanges,
+        "init": init,
+        "destroy": destroy,
+        "pluginName": "CellSelectionModel",
+        "onSelectedRangesChanged": new Slick.Event()
+    });
+}

package/lib/grid/plugins/slick.headerbuttons.css

@@ -0,0 +1,40 @@
+.slick-column-name,
+.slick-sort-indicator {
+  /**
+   * This makes all "float:right" elements after it that spill over to the next line
+   * display way below the lower boundary of the column thus hiding them.
+   */
+  display: inline-block;
+  float: left;
+  margin-bottom: 100px;
+}
+
+.slick-header-button {
+  display: inline-block;
+  float: right;
+  vertical-align: top;
+  margin: 1px;
+  margin-right: 2rem;
+  /**
+  * This makes all "float:right" elements after it that spill over to the next line
+  * display way below the lower boundary of the column thus hiding them.
+  */
+  margin-bottom: 100px;
+  height: 15px;
+  width: 15px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  cursor: pointer;
+}
+
+.slick-header-button-hidden {
+  width: 0;
+
+  -webkit-transition: 0.2s width;
+  -ms-transition: 0.2s width;
+  transition: 0.2s width;
+}
+
+.slick-header-column:hover > .slick-header-button {
+  width: 15px;
+}

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

@@ -0,0 +1,55 @@
+import "./slick.headerbuttons.css";
+/***
+ * A plugin to add custom buttons to column headers.
+ *
+ * USAGE:
+ *
+ * Add the plugin .js & .css files and register it with the grid.
+ *
+ * To specify a custom button in a column header, extend the column definition like so:
+ *
+ *   var columns = [
+ *     {
+ *       id: 'myColumn',
+ *       name: 'My column',
+ *
+ *       // This is the relevant part
+ *       header: {
+ *          buttons: [
+ *              {
+ *                // button options
+ *              },
+ *              {
+ *                // button options
+ *              }
+ *          ]
+ *       }
+ *     }
+ *   ];
+ *
+ * Available button options:
+ *    cssClass:     CSS class to add to the button.
+ *    image:        Relative button image path.
+ *    tooltip:      Button tooltip.
+ *    showOnHover:  Only show the button on hover.
+ *    handler:      Button click handler.
+ *    command:      A command identifier to be passed to the onCommand event handlers.
+ *
+ * The plugin exposes the following events:
+ *    onCommand:    Fired on button click for buttons with 'command' specified.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            command:  Button command identified.
+ *            button:   Button options.  Note that you can change the button options in your
+ *                      event handler, and the column header will be automatically updated to
+ *                      reflect them.  This is useful if you want to implement something like a
+ *                      toggle button.
+ *
+ *
+ * @param options {Object} Options:
+ *    buttonCssClass:   a CSS class to use for buttons (default 'slick-header-button')
+ * @class Slick.Plugins.HeaderButtons
+ * @constructor
+ */
+export declare function HeaderButtons(options: any): void;

package/lib/grid/plugins/slick.headerbuttons.js

@@ -0,0 +1,156 @@
+import "./slick.headerbuttons.css";
+import { Slick } from "../slick.core";
+import { jQueryReplacement } from "../../core/jq";
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "Plugins": {
+            "HeaderButtons": HeaderButtons
+        }
+    }
+});
+/***
+ * A plugin to add custom buttons to column headers.
+ *
+ * USAGE:
+ *
+ * Add the plugin .js & .css files and register it with the grid.
+ *
+ * To specify a custom button in a column header, extend the column definition like so:
+ *
+ *   var columns = [
+ *     {
+ *       id: 'myColumn',
+ *       name: 'My column',
+ *
+ *       // This is the relevant part
+ *       header: {
+ *          buttons: [
+ *              {
+ *                // button options
+ *              },
+ *              {
+ *                // button options
+ *              }
+ *          ]
+ *       }
+ *     }
+ *   ];
+ *
+ * Available button options:
+ *    cssClass:     CSS class to add to the button.
+ *    image:        Relative button image path.
+ *    tooltip:      Button tooltip.
+ *    showOnHover:  Only show the button on hover.
+ *    handler:      Button click handler.
+ *    command:      A command identifier to be passed to the onCommand event handlers.
+ *
+ * The plugin exposes the following events:
+ *    onCommand:    Fired on button click for buttons with 'command' specified.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            command:  Button command identified.
+ *            button:   Button options.  Note that you can change the button options in your
+ *                      event handler, and the column header will be automatically updated to
+ *                      reflect them.  This is useful if you want to implement something like a
+ *                      toggle button.
+ *
+ *
+ * @param options {Object} Options:
+ *    buttonCssClass:   a CSS class to use for buttons (default 'slick-header-button')
+ * @class Slick.Plugins.HeaderButtons
+ * @constructor
+ */
+export function HeaderButtons(options) {
+    var _grid;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+        buttonCssClass: "slick-header-button"
+    };
+    function init(grid) {
+        options = $.deepExtend({}, _defaults, options);
+        _grid = grid;
+        _handler
+            .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
+            .subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
+        // Force the grid to re-render the header now that the events are hooked up.
+        _grid.setColumns(_grid.getColumns());
+    }
+    function destroy() {
+        _handler.unsubscribeAll();
+    }
+    function handleHeaderCellRendered(e, args) {
+        var column = args.column;
+        if (column.header && column.header.buttons) {
+            // Append buttons in reverse order since they are floated to the right.
+            var i = column.header.buttons.length;
+            while (i--) {
+                var button = column.header.buttons[i];
+                var btn = $("<div></div>")
+                    .addClass(options.buttonCssClass)
+                    .data("column", column)
+                    .data("button", button);
+                if (button.showOnHover) {
+                    btn.addClass("slick-header-button-hidden");
+                }
+                if (button.image) {
+                    btn.css("backgroundImage", "url(" + button.image + ")");
+                }
+                if (button.html) {
+                    btn.html(button.html);
+                }
+                if (button.cssClass) {
+                    btn.addClass(button.cssClass);
+                }
+                if (button.tooltip) {
+                    btn.attr("title", button.tooltip);
+                }
+                if (button.command) {
+                    btn.data("command", button.command);
+                }
+                if (button.handler) {
+                    btn.on("click", button.handler);
+                }
+                btn
+                    .on("click", handleButtonClick)
+                    .appendTo(args.node);
+            }
+        }
+    }
+    function handleBeforeHeaderCellDestroy(e, args) {
+        var column = args.column;
+        if (column.header && column.header.buttons) {
+            // Removing buttons via jQuery will also clean up any event handlers and data.
+            // NOTE: If you attach event handlers directly or using a different framework,
+            //       you must also clean them up here to avoid memory leaks.
+            $(args.node).find("." + options.buttonCssClass).remove();
+        }
+    }
+    function handleButtonClick(e) {
+        var command = $(this).data("command");
+        var columnDef = $(this).data("column");
+        var button = $(this).data("button");
+        if (command != null) {
+            _self.onCommand.notify({
+                "grid": _grid,
+                "column": columnDef,
+                "command": command,
+                "button": button
+            }, e, _self);
+            // Update the header in case the user updated the button definition in the handler.
+            _grid.updateColumnHeader(columnDef.id);
+        }
+        // Stop propagation so that it doesn't register as a header click event.
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "pluginName": "HeaderButtons",
+        "onCommand": new Slick.Event()
+    });
+}