From 13ab5ff545b286762358e8b1b7574f2b9f44b193 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Tue, 6 Apr 2021 08:25:43 -0700 Subject: [PATCH] JQ version and ES6 * fix #1709 also fix #1306 I believe. * correct info in Readme for using JQ version and ES6 (tested in Angular app) * changed .ts to include jquery by name instead of location. --- README.md | 24 +++++++++++++++++++----- doc/CHANGES.md | 1 + src/jq/gridstack-dd-jqueryui.ts | 15 +++++++++++---- webpack.config.js | 1 + 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 031e9bbcd..8654a2e21 100644 --- a/README.md +++ b/README.md @@ -80,15 +80,27 @@ import 'gridstack/dist/h5/gridstack-dd-native'; import 'gridstack/dist/jq/gridstack-dd-jqueryui'; // OR nothing to get static grids (API driven, no user drag&drop) ``` + +**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, +which means you can possibly bring your own version +```js + alias: { + 'jquery': 'gridstack/dist/jq/jquery.js', + 'jquery-ui': 'gridstack/dist/jq/jquery-ui.js', + 'jquery.ui': 'gridstack/dist/jq/jquery-ui.js', + 'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js', + }, +``` + Alternatively in html ```html - + - + - + ``` @@ -417,9 +429,11 @@ v4 is a complete re-write of the collision and drag in/out heuristics to fix som # jQuery Application -We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version (only possible in 1.x), you should **instead** use v1.x and include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)). +We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. + +**NOTE: in v1.x** IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)). -**NOTE**: v2.x / v3.x does not currently support importing GridStack Drag&Drop without also including our jquery + jquery-ui. Still trying to figure how to make that bundle possible. You will have to use 1.x for now, or use the HTML5 version (no jq). +**NOTE 2: in v4.0.4+**: (not tested in v2.x / v3.x) for [1709](https://github.com/gridstack/gridstack.js/issues/1709) we now import jquery & jquery-ui by name, so ES6 module import need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions. As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support. diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 6ac3cac5a..65d2f7a18 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -58,6 +58,7 @@ Change log when dragging an item at the bottom below others to make it easier to insert below. - fix [#1687](https://github.com/gridstack/gridstack.js/issues/1687) more fix for drag between 2 grids with `row / maxRow` broken in 4.x - fix export symbols .d.ts for `gridstack-h5.js | gridstack-jq.js | gridstack-static.js` +- fix [#1709](https://github.com/gridstack/gridstack.js/issues/1709) correct info for using JQ version and ES6 (tested in Angular app) ## 4.0.3 (2021-3-28) diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts index 8d542daf5..d089dc669 100644 --- a/src/jq/gridstack-dd-jqueryui.ts +++ b/src/jq/gridstack-dd-jqueryui.ts @@ -7,11 +7,18 @@ import { GridItemHTMLElement, DDDragInOpt } from '../types'; // export jq symbols see // https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs // https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module -// TODO: let user bring their own jq or jq-ui version -import * as $ from './jquery'; // compile this in... having issues TS/ES6 app would include instead +// +// Note: user should be able to bring their own by changing their webpack aliases like +// alias: { +// 'jquery': 'gridstack/dist/jq/jquery.js', +// 'jquery-ui': 'gridstack/dist/jq/jquery-ui.js', +// 'jquery.ui': 'gridstack/dist/jq/jquery-ui.js', +// 'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js', +// }, +import * as $ from 'jquery'; // compile this in... having issues TS/ES6 app would include instead export { $ }; -import './jquery-ui'; -import './jquery.ui.touch-punch'; // include for touch mobile devices +import 'jquery-ui'; +import 'jquery.ui.touch-punch'; // include for touch mobile devices // export our base class (what user should use) and all associated types export * from '../gridstack-dd'; diff --git a/webpack.config.js b/webpack.config.js index ebc86fead..9a342c7cb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,6 +24,7 @@ module.exports = { 'jquery': '/src/jq/jquery.js', 'jquery-ui': '/src/jq/jquery-ui.js', 'jquery.ui': '/src/jq/jquery-ui.js', + 'jquery.ui.touch-punch' : '/src/jq/jquery.ui.touch-punch', } }, output: {