Add demo project. Closes #35. Update grid items to auto-register on i…

…nit.
BTMorton · Jan 15, 2016 · c249cdc · c249cdc
1 parent 4528866
commit c249cdc
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 0 deletions.
diff --git a/demo/app/app.component.js b/demo/app/app.component.js
diff --git a/demo/app/app.component.js.map b/demo/app/app.component.js.map
diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts
@@ -0,0 +1,9 @@
+import {Component} from 'angular2/core';
+import {NgGrid, NgGridItem} from 'angular2-grid';
+
+@Component({
+    selector: 'my-app',
+    template: '<h1>My First Angular 2 App</h1><div class="grid" [ngGrid]><div class="grid-item" [ngGridItem]></div></div>',
+    directives: [NgGrid, NgGridItem]
+})
+export class AppComponent {}
diff --git a/demo/app/boot.js b/demo/app/boot.js
diff --git a/demo/app/boot.js.map b/demo/app/boot.js.map
diff --git a/demo/app/boot.ts b/demo/app/boot.ts
@@ -0,0 +1,4 @@
+import {bootstrap}    from 'angular2/platform/browser'
+import {AppComponent} from './app.component'
+
+bootstrap(AppComponent);
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,37 @@
+<html>
+
+  <head>
+    <title>Angular 2 QuickStart</title>
+
+    <!-- 1. Load libraries -->
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <link rel="stylesheet" href="style.css" />
+
+    <!-- 2. Configure SystemJS -->
+    <script>
+      System.config({
+      	paths: {
+      		'angular2-grid': 'node_modules/angular2-grid/dist/NgGrid.js'
+      	},
+        packages: {        
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/boot')
+            .then(null, console.error.bind(console));
+    </script>
+
+  </head>
+
+  <!-- 3. Display the application -->
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "angular2-quickstart",
+  "version": "1.0.0",
+  "scripts": {
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "lite": "lite-server",
+    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+  },
+  "license": "ISC",
+  "dependencies": {
+    "angular2": "2.0.0-beta.0",
+    "systemjs": "0.19.6",
+    "es6-promise": "^3.0.2",
+    "es6-shim": "^0.33.3",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.0",
+    "zone.js": "0.5.10",
+    "angular2-grid": "~0.3.7"
+  },
+  "devDependencies": {
+    "concurrently": "^1.0.0",
+    "lite-server": "^1.3.1",
+    "typescript": "^1.7.3"
+  }
+}
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,42 @@
+.grid {
+	background-color: #efefef;
+	width: 100%;
+	min-height: 750px;
+}
+
+.grid-item {
+	background-color: #ffffff;
+	-webkit-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
+	-moz-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
+	-o-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
+	transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
+	border: solid 1px;
+}
+
+.grid-item:active, .grid-item.moving {
+	z-index: 2;
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	transition: none;
+}
+
+.grid-placeholder {
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 767px) {
+	.grid {
+		width: 100% !important;
+		height: auto !important;
+		padding: 10px;
+	}
+	.grid-item {
+		position: static !important;
+		width: 100% !important;
+		margin-bottom: 10px;
+	}
+	.grid-item:last-child {
+		margin-bottom: 0;
+	}
+}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/src/NgGrid.ts b/src/NgGrid.ts
@@ -981,6 +981,11 @@ export class NgGridItem implements OnInit, OnDestroy {
 		if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl, 'position', 'absolute');
 		this._recalculateDimensions();
 		this._recalculatePosition();
+
+		if (!this._added) {
+			this._added = true;
+			this._ngGrid.addItem(this);
+		}
 	}
 
 	//	Public methods