jsl-ui 9.28.2 → 9.28.3

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

@@ -1,260 +1,260 @@
-import { jQueryReplacement } from "../../core/jq";
-import { Slick } from "../slick.core";
-import './slick.headermenu.css';
-var $ = jQueryReplacement;
-// register namespace
-$.deepExtend(window, {
-    "Slick": {
-        "Plugins": {
-            "HeaderMenu": HeaderMenu
-        }
-    }
-});
-/***
- * A plugin to add drop-down menus to column headers.
- *
- * USAGE:
- *
- * Add the plugin .js & .css files and register it with the grid.
- *
- * To specify a menu in a column header, extend the column definition like so:
- *
- *   var columns = [
- *     {
- *       id: 'myColumn',
- *       name: 'My column',
- *
- *       // This is the relevant part
- *       header: {
- *          menu: {
- *              items: [
- *                {
- *                  // menu item options
- *                },
- *                {
- *                  // menu item options
- *                }
- *              ]
- *          }
- *       }
- *     }
- *   ];
- *
- *
- * Available menu options:
- *    tooltip:      Menu button tooltip.
- *
- *
- * Available menu item options:
- *    title:            Menu item text.
- *    divider:          Whether the current item is a divider, not an actual command.
- *    disabled:         Whether the item is disabled.
- *    tooltip:          Item tooltip.
- *    command:          A command identifier to be passed to the onCommand event handlers.
- *    iconCssClass:     A CSS class to be added to the menu item icon.
- *    iconImage:        A url to the icon image.
- *    minWidth:         Minimum width that the drop menu will have
- *    autoAlign:        Auto-align drop menu to the left when not enough viewport space to show on the right
- *    autoAlignOffset:  When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
- *
- *
- * The plugin exposes the following events:
- *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
- *        Event args:
- *            grid:     Reference to the grid.
- *            column:   Column definition.
- *            menu:     Menu options.  Note that you can change the menu items here.
- *
- *    onCommand:    Fired on menu item 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:   an extra CSS class to add to the menu button
- *    buttonImage:      a url to the menu button image (default '../images/down.gif')
- * @class Slick.Plugins.HeaderButtons
- * @constructor
- */
-export function HeaderMenu(options) {
-    var _grid;
-    var _self = this;
-    var _handler = new Slick.EventHandler();
-    var _defaults = {
-        buttonCssClass: null,
-        buttonImage: null,
-        minWidth: 100,
-        autoAlign: true,
-        autoAlignOffset: 0
-    };
-    var $menu;
-    var $activeHeaderColumn;
-    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()); //TODO TODOFIX try to optimize this
-        // Hide the menu on outside click.
-        $(document.body).on("mousedown", handleBodyMouseDown);
-    }
-    function setOptions(newOptions) {
-        options = $.deepExtend({}, options, newOptions);
-    }
-    function destroy() {
-        _handler.unsubscribeAll();
-        document.body.removeEventListener("mousedown", handleBodyMouseDown);
-        //$(document.body).off("mousedown", handleBodyMouseDown);
-    }
-    function handleBodyMouseDown(e) {
-        if ($menu && $(e.target).closestClass("slick-header-menu").length === 0) { //!$.contains($menu[0], e.target)) {
-            hideMenu();
-        }
-    }
-    function hideMenu() {
-        if ($menu) {
-            $menu.remove();
-            $menu = null;
-            $activeHeaderColumn
-                .removeClass("slick-header-column-active");
-        }
-    }
-    function handleHeaderCellRendered(e, args) {
-        var column = args.column;
-        var menu = $.deepExtend({}, (column.header && column.header.menu) || { items: [] });
-        if (!column.hideMenu) {
-            var $el = $("<div></div>")
-                .addClass("slick-header-menubutton")
-                .data("column", column)
-                .data("menu", menu);
-            if (column.resizable) {
-                $el.addClass("resize-offset");
-            }
-            if (options.buttonCssClass) {
-                $el.addClass(options.buttonCssClass);
-            }
-            if (options.buttonImage) {
-                $el.css("background-image", "url(" + options.buttonImage + ")");
-            }
-            if (menu.tooltip) {
-                $el.attr("title", menu.tooltip);
-            }
-            $el
-                .on("click", showMenu)
-                .appendTo(args.node);
-        }
-    }
-    function handleBeforeHeaderCellDestroy(e, args) {
-        var column = args.column;
-        if (column.header && column.header.menu) {
-            $(args.node).find(".slick-header-menubutton").remove();
-        }
-    }
-    function showMenu(e) {
-        var $menuButton = $(e.target);
-        var menu = $.deepExtend({}, $menuButton.data("menu"));
-        var columnDef = $menuButton.data("column");
-        // Let the user modify the menu or cancel altogether,
-        // or provide alternative menu implementation.
-        if (_self.onBeforeMenuShow.notify({
-            "grid": _grid,
-            "column": columnDef,
-            "menu": menu
-        }, e, _self) == false) {
-            return;
-        }
-        if (!$menu) {
-            $menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
-                .appendTo(_grid.getContainerNode());
-        }
-        $menu.empty();
-        // Construct the menu items.
-        for (var i = 0; i < menu.items.length; i++) {
-            var item = menu.items[i];
-            var $li = $("<div class='slick-header-menuitem'></div>")
-                .data("command", item.command || '')
-                .data("column", columnDef)
-                .data("item", item)
-                .on("click", handleMenuItemClick)
-                .appendTo($menu);
-            if (item.disabled) {
-                $li.addClass("slick-header-menuitem-disabled");
-            }
-            if (item.divider) {
-                $li.addClass("slick-header-menuitem-divider");
-                continue;
-            }
-            if (item.tooltip) {
-                $li.attr("title", item.tooltip);
-            }
-            var $icon = $("<div class='slick-header-menuicon'></div>")
-                .appendTo($li);
-            if (item.iconCssClass) {
-                $icon.addClass(item.iconCssClass);
-            }
-            if (item.iconImage) {
-                $icon.css("background-image", "url(" + item.iconImage + ")");
-            }
-            $("<span class='slick-header-menucontent'></span>")
-                .text(item.title)
-                .appendTo($li);
-        }
-        var leftPos = $menuButton.offset().left;
-        // when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
-        // if there isn't enough space on the right, it will automatically align the drop menu to the left
-        // to simulate an align left, we actually need to know the width of the drop menu
-        if (options.autoAlign) {
-            var gridPos = _grid.getGridPosition();
-            if ((leftPos + options.minWidth) >= gridPos.width) {
-                leftPos = leftPos - options.minWidth + options.autoAlignOffset;
-            }
-        }
-        //$menu
-        //  .offset({ top: $menuButton.offset().top + $menuButton.height(), left: leftPos });
-        $menu[0].style.top = /*$menuButton.offset().top +*/ $menuButton.height() + "px";
-        $menu[0].style.left = (leftPos - $(_grid.getContainerNode()).offset().left) + "px";
-        // Mark the header as active to keep the highlighting.
-        $activeHeaderColumn = $menuButton.closestClass(".slick-header-column");
-        $activeHeaderColumn
-            .addClass("slick-header-column-active");
-        // Stop propagation so that it doesn't register as a header click event.
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    function handleMenuItemClick(e) {
-        var command = $(e.currentTarget).data("command");
-        var columnDef = $(e.currentTarget).data("column");
-        var item = $(e.currentTarget).data("item");
-        if (item.disabled || item.divider) {
-            return;
-        }
-        hideMenu();
-        if (command != null && command != '') {
-            _self.onCommand.notify({
-                "grid": _grid,
-                "column": columnDef,
-                "command": command,
-                "item": item
-            }, e, _self);
-        }
-        // Stop propagation so that it doesn't register as a header click event.
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    $.shallowExtend(this, {
-        "init": init,
-        "destroy": destroy,
-        "pluginName": "HeaderMenu",
-        "setOptions": setOptions,
-        "onBeforeMenuShow": new Slick.Event(),
-        "onCommand": new Slick.Event()
-    });
-}
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+import './slick.headermenu.css';
+let $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Slick": {
+        "Plugins": {
+            "HeaderMenu": HeaderMenu
+        }
+    }
+});
+/***
+ * A plugin to add drop-down menus to column headers.
+ *
+ * USAGE:
+ *
+ * Add the plugin .js & .css files and register it with the grid.
+ *
+ * To specify a menu in a column header, extend the column definition like so:
+ *
+ *   var columns = [
+ *     {
+ *       id: 'myColumn',
+ *       name: 'My column',
+ *
+ *       // This is the relevant part
+ *       header: {
+ *          menu: {
+ *              items: [
+ *                {
+ *                  // menu item options
+ *                },
+ *                {
+ *                  // menu item options
+ *                }
+ *              ]
+ *          }
+ *       }
+ *     }
+ *   ];
+ *
+ *
+ * Available menu options:
+ *    tooltip:      Menu button tooltip.
+ *
+ *
+ * Available menu item options:
+ *    title:            Menu item text.
+ *    divider:          Whether the current item is a divider, not an actual command.
+ *    disabled:         Whether the item is disabled.
+ *    tooltip:          Item tooltip.
+ *    command:          A command identifier to be passed to the onCommand event handlers.
+ *    iconCssClass:     A CSS class to be added to the menu item icon.
+ *    iconImage:        A url to the icon image.
+ *    minWidth:         Minimum width that the drop menu will have
+ *    autoAlign:        Auto-align drop menu to the left when not enough viewport space to show on the right
+ *    autoAlignOffset:  When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
+ *
+ *
+ * The plugin exposes the following events:
+ *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            menu:     Menu options.  Note that you can change the menu items here.
+ *
+ *    onCommand:    Fired on menu item 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:   an extra CSS class to add to the menu button
+ *    buttonImage:      a url to the menu button image (default '../images/down.gif')
+ * @class Slick.Plugins.HeaderButtons
+ * @constructor
+ */
+export function HeaderMenu(options) {
+    var _grid;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+        buttonCssClass: null,
+        buttonImage: null,
+        minWidth: 100,
+        autoAlign: true,
+        autoAlignOffset: 0
+    };
+    var $menu;
+    var $activeHeaderColumn;
+    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()); //TODO TODOFIX try to optimize this
+        // Hide the menu on outside click.
+        $(document.body).on("mousedown", handleBodyMouseDown);
+    }
+    function setOptions(newOptions) {
+        options = $.deepExtend({}, options, newOptions);
+    }
+    function destroy() {
+        _handler.unsubscribeAll();
+        document.body.removeEventListener("mousedown", handleBodyMouseDown);
+        //$(document.body).off("mousedown", handleBodyMouseDown);
+    }
+    function handleBodyMouseDown(e) {
+        if ($menu && $(e.target).closestClass("slick-header-menu").length === 0) { //!$.contains($menu[0], e.target)) {
+            hideMenu();
+        }
+    }
+    function hideMenu() {
+        if ($menu) {
+            $menu.remove();
+            $menu = null;
+            $activeHeaderColumn
+                .removeClass("slick-header-column-active");
+        }
+    }
+    function handleHeaderCellRendered(e, args) {
+        var column = args.column;
+        var menu = $.deepExtend({}, (column.header && column.header.menu) || { items: [] });
+        if (!column.hideMenu) {
+            var $el = $("<div></div>")
+                .addClass("slick-header-menubutton")
+                .data("column", column)
+                .data("menu", menu);
+            if (column.resizable) {
+                $el.addClass("resize-offset");
+            }
+            if (options.buttonCssClass) {
+                $el.addClass(options.buttonCssClass);
+            }
+            if (options.buttonImage) {
+                $el.css("background-image", "url(" + options.buttonImage + ")");
+            }
+            if (menu.tooltip) {
+                $el.attr("title", menu.tooltip);
+            }
+            $el
+                .on("click", showMenu)
+                .appendTo(args.node);
+        }
+    }
+    function handleBeforeHeaderCellDestroy(e, args) {
+        var column = args.column;
+        if (column.header && column.header.menu) {
+            $(args.node).find(".slick-header-menubutton").remove();
+        }
+    }
+    function showMenu(e) {
+        var $menuButton = $(e.target);
+        var menu = $.deepExtend({}, $menuButton.data("menu"));
+        var columnDef = $menuButton.data("column");
+        // Let the user modify the menu or cancel altogether,
+        // or provide alternative menu implementation.
+        if (_self.onBeforeMenuShow.notify({
+            "grid": _grid,
+            "column": columnDef,
+            "menu": menu
+        }, e, _self) == false) {
+            return;
+        }
+        if (!$menu) {
+            $menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
+                .appendTo(_grid.getContainerNode());
+        }
+        $menu.empty();
+        // Construct the menu items.
+        for (var i = 0; i < menu.items.length; i++) {
+            var item = menu.items[i];
+            var $li = $("<div class='slick-header-menuitem'></div>")
+                .data("command", item.command || '')
+                .data("column", columnDef)
+                .data("item", item)
+                .on("click", handleMenuItemClick)
+                .appendTo($menu);
+            if (item.disabled) {
+                $li.addClass("slick-header-menuitem-disabled");
+            }
+            if (item.divider) {
+                $li.addClass("slick-header-menuitem-divider");
+                continue;
+            }
+            if (item.tooltip) {
+                $li.attr("title", item.tooltip);
+            }
+            var $icon = $("<div class='slick-header-menuicon'></div>")
+                .appendTo($li);
+            if (item.iconCssClass) {
+                $icon.addClass(item.iconCssClass);
+            }
+            if (item.iconImage) {
+                $icon.css("background-image", "url(" + item.iconImage + ")");
+            }
+            $("<span class='slick-header-menucontent'></span>")
+                .text(item.title)
+                .appendTo($li);
+        }
+        var leftPos = $menuButton.offset().left;
+        // when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
+        // if there isn't enough space on the right, it will automatically align the drop menu to the left
+        // to simulate an align left, we actually need to know the width of the drop menu
+        if (options.autoAlign) {
+            var gridPos = _grid.getGridPosition();
+            if ((leftPos + options.minWidth) >= gridPos.width) {
+                leftPos = leftPos - options.minWidth + options.autoAlignOffset;
+            }
+        }
+        //$menu
+        //  .offset({ top: $menuButton.offset().top + $menuButton.height(), left: leftPos });
+        $menu[0].style.top = $menuButton.height() + "px";
+        $menu[0].style.left = (leftPos - $(_grid.getContainerNode()).offset().left) + "px";
+        // Mark the header as active to keep the highlighting.
+        $activeHeaderColumn = $menuButton.closestClass(".slick-header-column");
+        $activeHeaderColumn
+            .addClass("slick-header-column-active");
+        // Stop propagation so that it doesn't register as a header click event.
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    function handleMenuItemClick(e) {
+        var command = $(e.currentTarget).data("command");
+        var columnDef = $(e.currentTarget).data("column");
+        var item = $(e.currentTarget).data("item");
+        if (item.disabled || item.divider) {
+            return;
+        }
+        hideMenu();
+        if (command != null && command != '') {
+            _self.onCommand.notify({
+                "grid": _grid,
+                "column": columnDef,
+                "command": command,
+                "item": item
+            }, e, _self);
+        }
+        // Stop propagation so that it doesn't register as a header click event.
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "pluginName": "HeaderMenu",
+        "setOptions": setOptions,
+        "onBeforeMenuShow": new Slick.Event(),
+        "onCommand": new Slick.Event()
+    });
+}

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

@@ -1,18 +1,18 @@
-/**
- * Row Move Manager options:
- *    cssClass:                 A CSS class to be added to the menu item container.
- *    columnId:                 Column definition id (defaults to "_move")
- *    cancelEditOnDrag:         Do we want to cancel any Editing while dragging a row (defaults to false)
- *    disableRowSelection:      Do we want to disable the row selection? (defaults to false)
- *    hideRowMoveShadow:        Do we want to hide the row move shadow clone? (defaults to true)
- *    rowMoveShadowMarginTop:   When row move shadow is shown, optional margin-top (defaults to 0)
- *    rowMoveShadowMarginLeft:  When row move shadow is shown, optional margin-left (defaults to 0)
- *    rowMoveShadowOpacity:     When row move shadow is shown, what is its opacity? (defaults to 0.95)
- *    rowMoveShadowScale:       When row move shadow is shown, what is its size scale? (default to 0.75)
- *    singleRowMove:            Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false)
- *    width:                    Width of the column
- *    usabilityOverride:        Callback method that user can override the default behavior of the row being moveable or not
- *
- */
-import "./slick.rowmovemanager.css";
-export declare function RowMoveManager(options: any): void;
+/**
+ * Row Move Manager options:
+ *    cssClass:                 A CSS class to be added to the menu item container.
+ *    columnId:                 Column definition id (defaults to "_move")
+ *    cancelEditOnDrag:         Do we want to cancel any Editing while dragging a row (defaults to false)
+ *    disableRowSelection:      Do we want to disable the row selection? (defaults to false)
+ *    hideRowMoveShadow:        Do we want to hide the row move shadow clone? (defaults to true)
+ *    rowMoveShadowMarginTop:   When row move shadow is shown, optional margin-top (defaults to 0)
+ *    rowMoveShadowMarginLeft:  When row move shadow is shown, optional margin-left (defaults to 0)
+ *    rowMoveShadowOpacity:     When row move shadow is shown, what is its opacity? (defaults to 0.95)
+ *    rowMoveShadowScale:       When row move shadow is shown, what is its size scale? (default to 0.75)
+ *    singleRowMove:            Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false)
+ *    width:                    Width of the column
+ *    usabilityOverride:        Callback method that user can override the default behavior of the row being moveable or not
+ *
+ */
+import "./slick.rowmovemanager.css";
+export declare function RowMoveManager(options: any): void;