gridstack 4.2.6 → 4.4.0

package/README.md

@@ -92,19 +92,28 @@ which means you can possibly bring your own version
   },
 ```
 
-Alternatively in html
+Alternatively (single combined file) in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
-<!-- HTML5 drag&drop (68k) -->
+<!-- HTML5 drag&drop (70k) -->
 <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
-<!-- OR jquery-ui drag&drop (193k) -->
+<!-- OR jquery-ui drag&drop (195k) -->
 <script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
-<!-- OR static grid (38k) -->
+<!-- OR static grid (40k) -->
 <script src="node_modules/gridstack/dist/gridstack-static.js"></script>
 ```
 
-Note: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+
+**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
+You can use the es5 files and polyfill (larger) for older browser instead. For example:
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
+<script src="node_modules/gridstack/dist/es5/gridstack-jq.js"></script>
+```
+
 
 ## Basic usage
 
@@ -189,10 +198,10 @@ GridStack.init( {column: N} );
 ```html
 <link href="node_modules/gridstack/dist/gridstack-extra.css" rel="stylesheet"/>
 
-<div class="grid-stack grid-stack-N">...</div>
+<div class="grid-stack">...</div>
 ```
 
-Note: class `.grid-stack-N` was added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
+Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
@@ -204,11 +213,11 @@ For instance for 3-column grid you need to rewrite CSS to be:
 
 ```css
 .grid-stack-item[gs-w="3"]  { width: 100% }
-.grid-stack-item[gs-w="2"]  { width: 66.66666667% }
-.grid-stack-item[gs-w="1"]  { width: 33.33333333% }
+.grid-stack-item[gs-w="2"]  { width: 66.67% }
+.grid-stack-item[gs-w="1"]  { width: 33.33% }
 
-.grid-stack-item[gs-x="2"]  { left: 66.66666667% }
-.grid-stack-item[gs-x="1"]  { left: 33.33333333% }
+.grid-stack-item[gs-x="2"]  { left: 66.67% }
+.grid-stack-item[gs-x="1"]  { left: 33.33% }
 ```
 
 For 4-column grid it should be:
@@ -229,23 +238,23 @@ and so on.
 Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81) and @StefanM98, [#868](https://github.com/gridstack/gridstack.js/issues/868)) and you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
 
 ```sass
+@use "sass;math";
 .grid-stack > .grid-stack-item {
 
   $gridstack-columns: 12;
 
-  min-width: (100% / $gridstack-columns);
+  min-width: math.div(100%, $gridstack-columns);
 
-  @for $i from 1 through $gridstack-columns {
-    &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
-    &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+  @for $i from 0 through $gridstack-columns {
+    &[gs-w='#{$i}'] { width: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-min-w='#{$i}'] { min-width: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-max-w='#{$i}'] { max-width: math.div(100%, $gridstack-columns) * $i; }
   }
 }
 ```
 
-you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns
-and also have the `.grid-stack-N` prefix to support letting the user change columns dynamically.
+you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
 
 Sample gulp command for 30 columns:
 ```js
@@ -298,6 +307,7 @@ search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&rank
 - **Rails**: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
 - **React**: see [demo](https://gridstackjs.com/demo/react.html) with [src](https://github.com/gridstack/gridstack.js/tree/master/demo/react.html), or  [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/tree/master/src/App.js), or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
 - **Vue**: see [demo](https://gridstackjs.com/demo/vue3js.html) with [v3 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue3js.html) or [v2 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue2js.html)
+- **Aurelia**: [aurelia-gridstack](https://github.com/aurelia-ui-toolkits/aurelia-gridstack), see [demo](https://aurelia-ui-toolkits.github.io/aurelia-gridstack/)
 
 # Migrating
 ## Migrating to v0.6

package/dist/es5/gridstack-dd.d.ts

@@ -0,0 +1,35 @@
+/**
+ * gridstack-dd.ts 4.4.0
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ */
+import { GridStackDDI } from './gridstack-ddi';
+import { GridItemHTMLElement, GridStackElement, DDDragInOpt } from './types';
+/** Drag&Drop drop options */
+export declare type DDDropOpt = {
+    /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */
+    accept?: (el: GridItemHTMLElement) => boolean;
+};
+/** drag&drop options currently called from the main code, but others can be passed in grid options */
+export declare type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
+export declare type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
+export declare type DDValue = number | string;
+/** drag&drop events callbacks */
+export declare type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+/**
+ * Base class implementing common Grid drag'n'drop functionality, with domain specific subclass (h5 vs jq subclasses)
+ */
+export declare abstract class GridStackDD extends GridStackDDI {
+    /** override to cast to correct type */
+    static get(): GridStackDD;
+    /** removes any drag&drop present (called during destroy) */
+    remove(el: GridItemHTMLElement): GridStackDD;
+    abstract resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD;
+    abstract isResizable(el: HTMLElement): boolean;
+    abstract draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD;
+    abstract dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDD;
+    abstract isDraggable(el: HTMLElement): boolean;
+    abstract droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDD;
+    abstract isDroppable(el: HTMLElement): boolean;
+    abstract on(el: GridItemHTMLElement, eventName: string, callback: DDCallback): GridStackDD;
+    abstract off(el: GridItemHTMLElement, eventName: string): GridStackDD;
+}