add jquery-ui.js minimal need

* minimal subset we need (55k vs 248k), which is now part of `gridstack.all.js` * just 1 include needed now in demos * CDN use gridstack@latest had to manually build download.jqueryui.com as the https://jqueryui.com/download/ is no longer working as for >2 months ago. Looks like ship is gone.. see jquery/download.jqueryui.com#359
gridstack · Nov 21, 2019 · 0a51f87 · 0a51f87
1 parent c3a5e03
commit 0a51f87
Show file tree

Hide file tree

Showing 22 changed files with 4,073 additions and 31 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,5 @@
 dist/*.js
 demo/*
 spec/*
+src/jquery-ui.js
+src/jquery-ui.min.js
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -39,6 +39,8 @@ module.exports = function(grunt) {
           'dist/gridstack.d.ts': ['src/gridstack.d.ts'],
           'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'],
           'dist/gridstack.poly.js': ['src/gridstack.poly.js'],
+          'dist/jquery-ui.js': ['src/jquery-ui.js'],
+          'dist/jquery-ui.min.js': ['src/jquery-ui.min.js'],
         }
       }
     },
@@ -54,7 +56,7 @@ module.exports = function(grunt) {
           'dist/gridstack.min.js': ['src/gridstack.js'],
           'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'],
           'dist/gridstack.poly.min.js': ['src/gridstack.poly.js'],
-          'dist/gridstack.all.js': ['src/gridstack.poly.js', 'src/gridstack.js', 'src/gridstack.jQueryUI.js']
+          'dist/gridstack.all.js': ['src/gridstack.poly.js', 'src/gridstack.js', 'src/jquery-ui.js', 'src/gridstack.jQueryUI.js']
         }
       }
     },

diff --git a/README.md b/README.md
@@ -47,30 +47,32 @@ Usage
 ## Requirements
 
 * [jQuery](http://jquery.com) (>= 3.1.0)
-* `Array.prototype.find`, and `Number.isNaN()` for IE and older browsers. We supply a separate `gridstack.poly.js` for that 
+* `Array.prototype.find`, and `Number.isNaN()` for IE and older browsers.
+  * Note: as of v0.5.4 We supply a separate `gridstack.poly.js` for that 
 (part of `gridstack.all.js`) or you can look at other pollyfills 
 ([core.js](https://github.com/zloirock/core-js#ecmascript-6-array) and [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)).
 
 #### Using gridstack.js with jQuery UI
 
-* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
+* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Draggable, Droppable, Resizable (Widget, Mouse, core).
+  * Note: as of v0.5.4 we include this subset as `jquery-ui.js` (and min.js) which is part of `gridstack.all.js`. If you wish to bring your own lib, include the individual gridstack parts instead of all.js
 * (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
 
 ## Install
 
 * Using CDN (minimized):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack.min.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.all.js"></script>
 ```
 
 * Using CDN (debug):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack.jQueryUI.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.jQueryUI.js"></script>
 ```
 
 * or local:
@@ -188,7 +190,7 @@ $('.grid-stack').gridstack( {column: N} );
 
 2) and change your HTML accordingly if **N < 12** (else custom CSS section next). Without this, things will not render/work correctly.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.3/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack-extra.css"/>
 
 <div class="grid-stack grid-stack-N">...</div>
 ```

diff --git a/demo/anijs.html b/demo/anijs.html
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/float.html b/demo/float.html
@@ -10,8 +10,8 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/knockout.html b/demo/knockout.html
@@ -10,9 +10,9 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/knockout2.html b/demo/knockout2.html
@@ -10,9 +10,9 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/nested.html b/demo/nested.html
@@ -10,8 +10,8 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/responsive.html b/demo/responsive.html
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html
@@ -11,9 +11,9 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/serialization.html b/demo/serialization.html
@@ -10,8 +10,8 @@
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/demo/two.html b/demo/two.html
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../src/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -25,7 +25,8 @@ Change log
 
 ## v0.5.3-dev (upcoming changes)
 
-- add `gridstack.poly.js` for IE and older browsers, removed core-js from samples, and all IE8 mentions
+- add `gridstack.poly.js` for IE and older browsers, removed `core-js` lib from samples (<1k vs 85k), and all IE8 mentions ([#1061](https://github.com/gridstack/gridstack.js/pull/1061)).
+- add `jquery-ui.js` (and min.js) as minimal subset we need (55k vs 248k), which is now part of `gridstack.all.js` - so just 1 include needed now.
 
 ## v0.5.3 (2019-11-20)
 

diff --git a/karma.conf.js b/karma.conf.js
@@ -16,9 +16,9 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       'node_modules/jquery/dist/jquery.min.js',
-      'node_modules/components-jqueryui/jquery-ui.min.js',
       'node_modules/core-js/client/shim.min.js',
       'src/gridstack.js',
+      'src/jquery-ui.min.js',
       'src/gridstack.jQueryUI.js',
       'spec/*-spec.js',
       // 'spec/e2e/*-spec.js' issues with ReferenceError: `browser` & `element` is not defined

diff --git a/package.json b/package.json
@@ -32,8 +32,7 @@
   },
   "homepage": "http://gridstack.github.io/gridstack.js/",
   "dependencies": {
-    "jquery": "^3.1.0",
-    "jquery-ui": "^1.12.0"
+    "jquery": "^3.1.0"
   },
   "devDependencies": {
     "components-jqueryui": "1.12.1",

diff --git a/spec/e2e/html/1017-items-no-x-y-for-autoPosition.html b/spec/e2e/html/1017-items-no-x-y-for-autoPosition.html
@@ -14,8 +14,8 @@
   <link rel="stylesheet" href="../../../dist/gridstack.css" />
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../../../src/jquery-ui.min.js"></script>
   <script src="../../../src/gridstack.js"></script>
   <script src="../../../src/gridstack.jQueryUI.js"></script>
 

diff --git a/spec/e2e/html/810-many-columns.html b/spec/e2e/html/810-many-columns.html
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="810-many-columns.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../../../src/jquery-ui.min.js"></script>
   <script src="../../../src/gridstack.js"></script>
   <script src="../../../src/gridstack.jQueryUI.js"></script>
 

diff --git a/spec/e2e/html/column.html b/spec/e2e/html/column.html
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../../../src/jquery-ui.min.js"></script>
   <script src="../../../src/gridstack.js"></script>
   <script src="../../../src/gridstack.jQueryUI.js"></script>
 

diff --git a/spec/e2e/html/gridstack-with-height.html b/spec/e2e/html/gridstack-with-height.html
@@ -10,8 +10,8 @@
   <link rel="stylesheet" href="../../../dist/gridstack.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <script src="../../../src/jquery-ui.min.js"></script>
   <script src="../../../dist/gridstack.js"></script>
   <script src="../../../dist/gridstack.jQueryUI.js"></script>