+
+
-The Team
-========
+# The Team
-gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee) and [Dylan Weiss](https://github.com/radiolips). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
+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 @@ + + + + +