Skip to content

Commit

Permalink
Typescript conversion
Browse files Browse the repository at this point in the history
another BIG, BIG change
* converted all code to Typescript
* initial bundling with webpack to `gridstack.all.js` for browser inclusion
* added index.ts to include all modules and dependencies for build
* part-2 of gridstack gridstack#1084

TODO:
* modified float.html to test new code. still not running (missing `GridStack` export)
* need to use tsc to output for typescript native files ?
  • Loading branch information
Alain Dumesny authored and adumesny committed Mar 9, 2020
1 parent 70ed851 commit c3f39a7
Show file tree
Hide file tree
Showing 22 changed files with 4,422 additions and 2,952 deletions.
3 changes: 3 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@ yarn.lock
.npmignore
.travis.yml
.eslint*
.vscode
Gruntfile.js
ISSUE_TEMPLATE.md
PULL_REQUEST_TEMPLATE.md
freelancer
karma.conf.js
protractor.conf.js
tsconfig.json
webpack.config.js

## From .gitignore:
*.log
Expand Down
24 changes: 10 additions & 14 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ module.exports = function(grunt) {
}
}
},

cssmin: {
dist: {
options: {
sourceMap: false,
keepSpecialComments: '*'
},
files: {
Expand All @@ -37,23 +37,21 @@ module.exports = function(grunt) {
}
}
},

copy: {
dist: {
files: {
'dist/gridstack.js': ['src/gridstack.js'],
'dist/gridstack.d.ts': ['src/gridstack.d.ts'],
'dist/gridstack.all.d.ts': ['src/gridstack.d.ts'],
'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'],
/*
'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
'dist/jquery.js': ['src/jquery.js'],
'dist/jquery-ui.js': ['src/jquery-ui.js'],
'dist/src/gridstack.scss': ['src/gridstack.scss'],
'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
*/
}
}
},

/*
uglify: {
options: {
sourceMap: true,
Expand All @@ -64,15 +62,13 @@ module.exports = function(grunt) {
},
dist: {
files: {
'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/jquery.min.js': ['src/jquery.js'],
'dist/jquery-ui.min.js': ['src/jquery-ui.js'],
'dist/gridstack.all.js': ['src/gridstack-poly.js', 'src/jquery.js', 'src/gridstack.js', 'src/jquery-ui.js', 'src/gridstack.jQueryUI.js']
//'dist/gridstack-poly.min.js': 'src/gridstack-poly.js',
//'dist/jquery.min.js': 'src/jquery.js',
//'dist/jquery-ui.min.js': 'src/jquery-ui.js'
}
}
},
*/

eslint: {
target: ['*.js', 'src/*.js']
Expand All @@ -87,7 +83,7 @@ module.exports = function(grunt) {
},
styles: {
files: ['src/*.scss'],
tasks: ['sass', 'cssmin'],
tasks: ['sass'/*, 'cssmin'*/],
options: {
},
}
Expand Down Expand Up @@ -120,7 +116,7 @@ module.exports = function(grunt) {
});

grunt.registerTask('lint', ['eslint']);
grunt.registerTask('default', ['sass', 'cssmin', 'eslint', 'copy', 'uglify']);
grunt.registerTask('default', ['sass', 'cssmin', /*'eslint',*/ 'copy', /*'uglify'*/]);
grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
};
/*eslint-enable camelcase */
3 changes: 3 additions & 0 deletions demo/float.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@
<title>Float grid demo</title>

<link rel="stylesheet" href="demo.css"/>
<script src="../dist/gridstack.all.js"></script>
<!--
<script src="../src/jquery.js"></script>
<script src="../src/gridstack.js"></script>
<script src="../src/jquery-ui.js"></script>
<script src="../src/gridstack.jQueryUI.js"></script>
-->
</style>
</head>
<body>
Expand Down
18 changes: 10 additions & 8 deletions doc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -317,33 +317,35 @@ Parameters:
Disables widgets moving/resizing. This is a shortcut for:

```js
grid.movable('.grid-stack-item', false);
grid.resizable('.grid-stack-item', false);
grid.enableMove(false);
grid.enableResize(false);
```

### enable()

Enables widgets moving/resizing. This is a shortcut for:

```js
grid.movable('.grid-stack-item', true);
grid.resizable('.grid-stack-item', true);
grid.enableMove(true);
grid.enableResize(true);
```

### enableMove(doEnable, includeNewWidgets)

Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option. This is a shortcut for:
Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option (default: true). This is a shortcut for:

```js
grid.movable(this.container.children('.' + this.opts.itemClass), doEnable);
grid.movable('.grid-stack-item', doEnable);
grid.opts.disableDrag = !doEnable;
```

### enableResize(doEnable, includeNewWidgets)

Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option. This is a shortcut for:
Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option (default: true). This is a shortcut for:

```js
grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable);
grid.resizable('.grid-stack-item', doEnable);
grid.opts.disableResize = !doEnable;
```

### float(val?)
Expand Down
26 changes: 17 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
{
"name": "gridstack",
"version": "1.1.0-dev",
"description": "JavaScript / TypeScript for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
"main": "dist/gridstack",
"version": "2.0.0-rc",
"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
"main": "./dist/index.js",
"typings": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/gridstack/gridstack.js.git"
},
"scripts": {
"build": "grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
"test": "grunt lint && karma start karma.conf.js",
"lint": "grunt lint",
"build": "yarn --no-progress && rm -rf dist/* && webpack && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
"web": "rm -rf dist/* && webpack",
"test": "yarn lint && karma start karma.conf.js",
"lint": "tslint -p ./tsconfig.json",
"reset": "rm -rf dist node_modules",
"prepublishOnly": "yarn build"
},
"keywords": [
"JavaScript",
"Typescript",
"gridstack.js",
"grid",
"gridster",
Expand All @@ -27,7 +29,7 @@
"widgets",
"Angular",
"React",
"Typescript"
"JavaScript"
],
"author": "Pavel Reznikov <[email protected]>",
"contributors": [
Expand All @@ -41,6 +43,8 @@
"homepage": "http://gridstack.github.io/gridstack.js/",
"dependencies": {},
"devDependencies": {
"@types/jquery": "^3.3.32",
"@types/jqueryui": "^1.12.10",
"connect": "^3.7.0",
"core-js": "^3.6.4",
"coveralls": "^3.0.9",
Expand All @@ -64,7 +68,11 @@
"karma-jasmine": "^3.1.1",
"node-sass": "^4.13.1",
"puppeteer": "^2.1.1",
"serve-static": "^1.14.1"
"serve-static": "^1.14.1",
"ts-loader": "^6.2.1",
"typescript": "3.4.5",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"resolutions": {
"lodash": "^4.17.13",
Expand Down
50 changes: 50 additions & 0 deletions src/gridstack-dragdrop-plugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// gridstack-dragdrop-plugin.ts 2.0.0-rc @preserve

/**
* https://gridstackjs.com/
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
* gridstack.js may be freely distributed under the MIT license.
*/

import { GridStack } from './gridstack';
import { GridStackElement } from './types';

/** drag&drop options currently called from the main code, but others can be passed in grid options */
export type DDOpts = 'enable' | 'disable' | 'option' | {} | any;
export type DDKey = 'minWidth' | 'minHeight' | string;

/**
* Base class for drag'n'drop plugin.
*/
export class GridStackDragDropPlugin {
protected grid: GridStack;
static registeredPlugins = [];

static registerPlugin(pluginClass) {
GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
};

public constructor(grid: GridStack) {
this.grid = grid;
}

public resizable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
return this;
};

public draggable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
return this;
};

public droppable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
return this;
};

public isDroppable(el: GridStackElement): boolean {
return false;
};

public on(el: GridStackElement, eventName: string, callback): GridStackDragDropPlugin {
return this;
};
}
Loading

0 comments on commit c3f39a7

Please sign in to comment.