Skip to content

Commit abbe1fa

Browse files
adumesnyadumesny
committed
TS: progress on bundling for build, renamed DD files
renamed GridStackDragDropPlugin -> GridStackDD JQueryUIGridStackDragDropPlugin -> GridStackDDJQueryUI * gridstack.all.js is now generated (190k) optimized with map and works great * gridstack.js is also generated and complete without JQ anything and works great * jq + jqui are now generated as min with map and appears to be OK only thing remaining is to get gridstack-dd-jqueryui.js generated as stand alone file that could be imported. (webpack will bundle dependencies so I need separate rule OR get tsc to do that
1 parent cc8af14 commit abbe1fa

13 files changed

+349
-408
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
dist/*.js
1+
dist/*
22
demo/*
33
spec/*
4-
src/jq/jquery.js
5-
src/jq/jquery-ui.js
4+
src/jq/*.js

‎Gruntfile.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/*eslint-disable camelcase */
21
module.exports = function(grunt) {
32
grunt.loadNpmTasks('grunt-sass');
43
// grunt.loadNpmTasks('grunt-contrib-cssmin');
@@ -43,8 +42,8 @@ module.exports = function(grunt) {
4342
dist: {
4443
files: {
4544
'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
46-
'dist/jq/jquery.js': ['src/jq/jquery.js'],
47-
'dist/jq/jquery-ui.js': ['src/jq/jquery-ui.js'],
45+
//'dist/jq/jquery.js': ['src/jq/jquery.js'],
46+
//'dist/jq/jquery-ui.js': ['src/jq/jquery-ui.js'],
4847
'dist/src/gridstack.scss': ['src/gridstack.scss'],
4948
'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
5049
}
@@ -53,22 +52,22 @@ module.exports = function(grunt) {
5352
uglify: {
5453
options: {
5554
sourceMap: true,
56-
sourceMapName: 'dist/gridstack.min.map',
5755
output: {
5856
comments: 'some'
5957
}
6058
},
6159
dist: {
6260
files: {
63-
'dist/jq/jqueryui-gridstack-dragdrop-plugin.min.js': 'dist/jq/jqueryui-gridstack-dragdrop-plugin.js',
6461
'dist/jq/jquery.min.js': 'src/jq/jquery.js',
6562
'dist/jq/jquery-ui.min.js': 'src/jq/jquery-ui.js',
66-
67-
'dist/gridstack-dragdrop-plugin.min.js': 'dist/gridstack-dragdrop-plugin.js',
63+
/*
64+
'dist/jq/gridstack-dd-jqueryui.min.js': 'dist/jq/gridstack-dd-jqueryui.js',
65+
'dist/gridstack-dd.min.js': 'dist/gridstack-dd.js',
6866
'dist/gridstack-engine.min.js': 'dist/gridstack-engine.js',
6967
'dist/gridstack-poly.min.js': 'src/gridstack-poly.js',
7068
'dist/types.min.js': 'dist/types.js',
7169
'dist/utils.min.js': 'dist/utils.js',
70+
*/
7271
}
7372
}
7473
},
@@ -79,7 +78,7 @@ module.exports = function(grunt) {
7978
watch: {
8079
scripts: {
8180
files: ['src/*.js'],
82-
tasks: ['uglify', 'copy'],
81+
tasks: ['copy', 'uglify'],
8382
options: {
8483
},
8584
},
@@ -108,6 +107,7 @@ module.exports = function(grunt) {
108107
},
109108
},
110109

110+
// eslint-disable-next-line @typescript-eslint/camelcase
111111
protractor_webdriver: {
112112
all: {
113113
options: {
@@ -121,4 +121,3 @@ module.exports = function(grunt) {
121121
grunt.registerTask('default', ['sass', /*'cssmin', 'eslint',*/ 'copy', 'uglify']);
122122
grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
123123
};
124-
/*eslint-enable camelcase */

‎demo/float.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script src="../dist/gridstack.js"></script>
1515
<script src="../src/jq/jquery.js"></script>
1616
<script src="../src/jq/jquery-ui.js"></script>
17-
<script src="../dist/jq/jqueryui-gridstack-dragdrop-plugin.js"></script>
17+
<script src="../dist/jq/gridstack-dd-jqueryui.js"></script>
1818
-->
1919

2020
</head>

‎demo/two.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@
99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="demo.css"/>
1111
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
12+
1213
<script src="../dist/gridstack.all.js"></script>
14+
<!--
15+
<script src="../dist/jq/jquery.min.js"></script>
16+
<script src="../dist/jq/jquery-ui.min.js"></script>
17+
<script src="../dist/gridstack.js"></script>
18+
<script src="../dist/jq/gridstack-dd-jqueryui.js"></script>
19+
-->
1320

1421
<style type="text/css">
1522
.grid-stack {

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"url": "git+https://github.com/gridstack/gridstack.js.git"
1010
},
1111
"scripts": {
12-
"build": "yarn --no-progress && rm -rf dist/* && webpack && tsc --stripInternal && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
13-
"t": "tsc --stripInternal",
14-
"w": "webpack",
12+
"build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
13+
"w": "rm -rf dist/* && grunt && webpack",
14+
"t": "rm -rf dist/* && tsc --stripInternal",
1515
"test": "yarn lint && karma start karma.conf.js",
1616
"lint": "tsc --noEmit && eslint src/*.ts",
1717
"reset": "rm -rf dist node_modules",
@@ -75,7 +75,7 @@
7575
"serve-static": "^1.14.1",
7676
"ts-loader": "^6.2.1",
7777
"typescript": "3.4.5",
78-
"webpack": "^4.42.0",
79-
"webpack-cli": "^3.3.11"
78+
"webpack": "^4.44.1",
79+
"webpack-cli": "^3.3.12"
8080
}
8181
}

‎spec/gridstack-spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { GridStack } from '../src/gridstack';
2-
import { GridStackDragDropPlugin } from '../src/gridstack-dragdrop-plugin';
2+
import { GridStackDD } from '../src/gridstack-dd';
33

44
describe('gridstack', function() {
55
'use strict';
@@ -1473,7 +1473,7 @@ describe('gridstack', function() {
14731473
grid.dd.on();
14741474
});
14751475
it('should use class name', function() {
1476-
let grid: any = GridStack.init({ddPlugin : GridStackDragDropPlugin});
1476+
let grid: any = GridStack.init({ddPlugin : GridStackDD});
14771477
expect(grid.dd.isDroppable()).toBe(false);
14781478
});
14791479
});

‎src/gridstack-dragdrop-plugin.ts‎ renamed to ‎src/gridstack-dd.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-dragdrop-plugin.ts 2.0.0-rc @preserve
1+
// gridstack-dd.ts 2.0.0-rc @preserve
22

33
/**
44
* https://gridstackjs.com/
@@ -28,53 +28,53 @@ export type DDCallback = (event: Event, arg2: GridItemHTMLElement) => void;
2828
/**
2929
* Base class for drag'n'drop plugin.
3030
*/
31-
export class GridStackDragDropPlugin {
31+
export class GridStackDD {
3232
protected grid: GridStack;
33-
static registeredPlugins: typeof GridStackDragDropPlugin[] = [];
33+
static registeredPlugins: typeof GridStackDD[] = [];
3434

3535
/** call this method to register your plugin instead of the default no-op one */
36-
static registerPlugin(pluginClass: typeof GridStackDragDropPlugin) {
37-
GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
36+
static registerPlugin(pluginClass: typeof GridStackDD) {
37+
GridStackDD.registeredPlugins.push(pluginClass);
3838
}
3939

4040
/** get the current registered plugin to use */
41-
static get(): typeof GridStackDragDropPlugin {
42-
return GridStackDragDropPlugin.registeredPlugins[0] || GridStackDragDropPlugin;
41+
static get(): typeof GridStackDD {
42+
return GridStackDD.registeredPlugins[0] || GridStackDD;
4343
}
4444

4545
public constructor(grid: GridStack) {
4646
this.grid = grid;
4747
}
4848

49-
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
49+
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
5050
return this;
5151
}
5252

53-
public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
53+
public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
5454
return this;
5555
}
5656

57-
public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin {
57+
public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDD {
5858
return this;
5959
}
6060

6161
public isDraggable(el: GridStackElement): boolean {
6262
return false;
6363
}
6464

65-
public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
65+
public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDD {
6666
return this;
6767
}
6868

6969
public isDroppable(el: GridItemHTMLElement): boolean {
7070
return false;
7171
}
7272

73-
public on(el: GridItemHTMLElement, eventName: string, callback: DDCallback): GridStackDragDropPlugin {
73+
public on(el: GridItemHTMLElement, eventName: string, callback: DDCallback): GridStackDD {
7474
return this;
7575
}
7676

77-
public off(el: GridItemHTMLElement, eventName: string): GridStackDragDropPlugin {
77+
public off(el: GridItemHTMLElement, eventName: string): GridStackDD {
7878
return this;
7979
}
8080
}

‎src/gridstack.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import { GridStackEngine } from './gridstack-engine';
1010
import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils';
1111
import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
12-
import { GridStackDragDropPlugin } from './gridstack-dragdrop-plugin';
12+
import { GridStackDD } from './gridstack-dd';
1313

1414
export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
1515

@@ -117,7 +117,7 @@ export class GridStack {
117117
public opts: GridstackOptions;
118118

119119
/** current drag&drop plugin being used */
120-
public dd: GridStackDragDropPlugin;
120+
public dd: GridStackDD;
121121

122122
/** @internal */
123123
private placeholder: HTMLElement;
@@ -214,11 +214,11 @@ export class GridStack {
214214
this.initMargin();
215215

216216
if (this.opts.ddPlugin === false) {
217-
this.opts.ddPlugin = GridStackDragDropPlugin;
217+
this.opts.ddPlugin = GridStackDD;
218218
} else if (this.opts.ddPlugin === undefined) {
219-
this.opts.ddPlugin = GridStackDragDropPlugin.get();
219+
this.opts.ddPlugin = GridStackDD.get();
220220
}
221-
this.dd = new (this.opts.ddPlugin as typeof GridStackDragDropPlugin)(this);
221+
this.dd = new (this.opts.ddPlugin as typeof GridStackDD)(this);
222222

223223
if (this.opts.rtl === 'auto') {
224224
this.opts.rtl = el.style.direction === 'rtl';

‎src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import './gridstack-poly.js';
88
export * from './types';
99
export * from './utils';
1010
export * from './gridstack-engine';
11-
export * from './gridstack-dragdrop-plugin';
11+
export * from './gridstack-dd';
1212
export * from './gridstack';
13-
export * from './jq/jqueryui-gridstack-dragdrop-plugin';
13+
export * from './jq/gridstack-dd-jqueryui';
1414

1515
// declare module 'gridstack'; for umd ?

‎src/jq/jqueryui-gridstack-dragdrop-plugin.ts‎ renamed to ‎src/jq/gridstack-dd-jqueryui.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// jqueryui-gridstack-dragdrop-plugin.ts 2.0.0-rc @preserve
1+
// gridstack-dd-jqueryui.ts 2.0.0-rc @preserve
22

33
/** JQuery UI Drag&Drop plugin
44
* https://gridstackjs.com/
@@ -7,7 +7,7 @@
77
*/
88

99
import { GridStack, GridStackElement } from '../gridstack';
10-
import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dragdrop-plugin';
10+
import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
1111
import { GridItemHTMLElement, DDDragInOpt } from '../types';
1212

1313
// TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
@@ -18,12 +18,12 @@ import './jquery-ui.js';
1818
/**
1919
* Jquery-ui based drag'n'drop plugin.
2020
*/
21-
export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
21+
export class GridStackDDJQueryUI extends GridStackDD {
2222
public constructor(grid: GridStack) {
2323
super(grid);
2424
}
2525

26-
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
26+
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
2727
let $el: JQuery = $(el);
2828
if (opts === 'disable' || opts === 'enable') {
2929
$el.resizable(opts);
@@ -44,7 +44,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
4444
return this;
4545
}
4646

47-
public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
47+
public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
4848
let $el: JQuery = $(el);
4949
if (opts === 'disable' || opts === 'enable') {
5050
$el.draggable(opts);
@@ -66,13 +66,13 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
6666
return this;
6767
}
6868

69-
public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin {
69+
public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDD {
7070
let $el: JQuery = $(el);
7171
$el.draggable(opts);
7272
return this;
7373
}
7474

75-
public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
75+
public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDD {
7676
let $el: JQuery = $(el);
7777
if (typeof opts.accept === 'function' && !opts._accept) {
7878
// convert jquery event to generic element
@@ -93,18 +93,18 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
9393
return Boolean($el.data('ui-draggable'));
9494
}
9595

96-
public on(el: GridItemHTMLElement, name: string, callback: DDCallback): GridStackDragDropPlugin {
96+
public on(el: GridItemHTMLElement, name: string, callback: DDCallback): GridStackDD {
9797
let $el: JQuery = $(el);
9898
$el.on(name, (event, ui) => { callback(event as any, ui.draggable ? ui.draggable.get(0) : event.target) });
9999
return this;
100100
}
101101

102-
public off(el: GridItemHTMLElement, name: string): GridStackDragDropPlugin {
102+
public off(el: GridItemHTMLElement, name: string): GridStackDD {
103103
let $el: JQuery = $(el);
104104
$el.off(name);
105105
return this;
106106
}
107107
}
108108

109109
// finally register ourself
110-
GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
110+
GridStackDD.registerPlugin(GridStackDDJQueryUI);

0 commit comments

Comments
 (0)