+
+
-#### v0.2.3 (2015-06-23)
+# The Team
-- gridstack-extra.css
-- add support of lodash.js
-- add `is_area_empty` method
-- nested grids
-- add `batch_update`/`commit` methods
-- add `update` method
-- allow to override `resizable`/`draggable` options
-- add `disable`/`enable` methods
-- add `get_cell_from_pixel` (thanks to @juchi)
-- AMD support
-- fix nodes sorting
-- improved touch devices support
-- add `always_show_resize_handle` option
-- minor fixes and improvements
-
-#### v0.2.2 (2014-12-23)
-
-- fix grid initialization
-- add `cell_height`/`cell_width` API methods
-- fix boolean attributes (issue #31)
-
-#### v0.2.1 (2014-12-09)
-
-- add widgets locking (issue #19)
-- add `will_it_fit` API method
-- fix auto-positioning (issue #20)
-- add animation (thanks to @ishields)
-- fix `y` coordinate calculation when dragging (issue #18)
-- fix `remove_widget` (issue #16)
-- minor fixes
-
-
-#### v0.2.0 (2014-11-30)
-
-- add `height` option
-- auto-generate css rules (widgets `height` and `top`)
-- add `GridStackUI.Utils.sort` utility function
-- add `remove_all` API method
-- add `resize` and `move` API methods
-- add `resizable` and `movable` API methods
-- add `data-gs-no-move` attribute
-- add `float` option
-- fix default css rule for inner content
-- minor fixes
-
-#### v0.1.0 (2014-11-18)
-
-Very first version.
-
-
-License
-=======
-
-The MIT License (MIT)
-
-Copyright (c) 2014-2016 Pavel Reznikov, Dylan Weiss
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny), before that [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
diff --git a/angular/.editorconfig b/angular/.editorconfig
new file mode 100644
index 000000000..59d9a3a3e
--- /dev/null
+++ b/angular/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/angular/.gitignore b/angular/.gitignore
new file mode 100644
index 000000000..0711527ef
--- /dev/null
+++ b/angular/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/angular/README.md b/angular/README.md
new file mode 100644
index 000000000..2af7cd84c
--- /dev/null
+++ b/angular/README.md
@@ -0,0 +1,209 @@
+# Angular wrapper
+
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) COMPONENT template: using DOM template to use components statically
+ + + + +COMPONENT ngFor: Most complete example that uses Component wrapper for grid and gridItem
+ + + + +COMPONENT dynamic: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)
+ + + + + + + +Nested Grid: shows nested component grids, like nested.html demo but with Ng Components
+ + + + + + + + + + + + +two.html: shows multiple grids, sidebar creating Components
+open console and scroll to see delay loading of components
+load() + clear() to memory leak test between the two
+ + + +ngFor: Example using Angular ngFor to loop through items and create DOM items. This track changes made to the array of items, waits for DOM rendering, then update GS
+ + + + +ngFor CMD: Example using Angular ngFor to loop through items, but uses an explicity command to let us update GS (see automatic better way)
+ + + +SIMPLEST: angular example using GridStack API directly, so not really using any angular construct per say other than waiting for DOM rendering
+ + + + + `, + // gridstack.min.css and other custom styles should be included in global styles.scss + }) + export class AngularSimpleComponent implements OnInit { + public items: GridStackWidget[] = [ + { x: 0, y: 0, w: 9, h: 6, content: '0' }, + { x: 9, y: 0, w: 3, h: 3, content: '1' }, + { x: 9, y: 3, w: 3, h: 3, content: '2' }, + ]; + private grid!: GridStack; + + constructor() {} + + // simple div above doesn't require Angular to run, so init gridstack here + public ngOnInit() { + this.grid = GridStack.init({ + cellHeight: 70, + }) + .load(this.items); // and load our content directly (will create DOM) + } + + public add() { + this.grid.addWidget({w: 3, content: 'new content'}); + } + public delete() { + this.grid.removeWidget(this.grid.engine.nodes[0].el!); + } + public change() { + this.grid.update(this.grid.engine.nodes[0].el!, {w: 1}); + } + } diff --git a/angular/projects/demo/src/assets/.gitkeep b/angular/projects/demo/src/assets/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/angular/projects/demo/src/environments/environment.ts b/angular/projects/demo/src/environments/environment.ts new file mode 100644 index 000000000..f56ff4702 --- /dev/null +++ b/angular/projects/demo/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/angular/projects/demo/src/favicon.ico b/angular/projects/demo/src/favicon.ico new file mode 100644 index 000000000..997406ad2 Binary files /dev/null and b/angular/projects/demo/src/favicon.ico differ diff --git a/angular/projects/demo/src/index.html b/angular/projects/demo/src/index.html new file mode 100644 index 000000000..f9f06e721 --- /dev/null +++ b/angular/projects/demo/src/index.html @@ -0,0 +1,13 @@ + + + + +