From c249cdc903b7e41c5d129a7dfed6aafd7c52a28e Mon Sep 17 00:00:00 2001 From: Ben Morton Date: Fri, 15 Jan 2016 21:16:35 +0000 Subject: [PATCH] Add demo project. Closes #35. Update grid items to auto-register on init. --- demo/app/app.component.js | 39 ++++++++++++++++++++++++++++++++ demo/app/app.component.js.map | 1 + demo/app/app.component.ts | 9 ++++++++ demo/app/boot.js | 16 +++++++++++++ demo/app/boot.js.map | 1 + demo/app/boot.ts | 4 ++++ demo/index.html | 37 ++++++++++++++++++++++++++++++ demo/package.json | 26 ++++++++++++++++++++++ demo/style.css | 42 +++++++++++++++++++++++++++++++++++ demo/tsconfig.json | 15 +++++++++++++ src/NgGrid.ts | 5 +++++ 11 files changed, 195 insertions(+) create mode 100644 demo/app/app.component.js create mode 100644 demo/app/app.component.js.map create mode 100644 demo/app/app.component.ts create mode 100644 demo/app/boot.js create mode 100644 demo/app/boot.js.map create mode 100644 demo/app/boot.ts create mode 100644 demo/index.html create mode 100644 demo/package.json create mode 100644 demo/style.css create mode 100644 demo/tsconfig.json diff --git a/demo/app/app.component.js b/demo/app/app.component.js new file mode 100644 index 0000000..a76c468 --- /dev/null +++ b/demo/app/app.component.js @@ -0,0 +1,39 @@ +System.register(['angular2/core', 'angular2-grid'], function(exports_1) { + var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; + }; + var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); + }; + var core_1, angular2_grid_1; + var AppComponent; + return { + setters:[ + function (core_1_1) { + core_1 = core_1_1; + }, + function (angular2_grid_1_1) { + angular2_grid_1 = angular2_grid_1_1; + }], + execute: function() { + AppComponent = (function () { + function AppComponent() { + } + AppComponent = __decorate([ + core_1.Component({ + selector: 'my-app', + template: '

My First Angular 2 App

', + directives: [angular2_grid_1.NgGrid, angular2_grid_1.NgGridItem] + }), + __metadata('design:paramtypes', []) + ], AppComponent); + return AppComponent; + })(); + exports_1("AppComponent", AppComponent); + } + } +}); +//# sourceMappingURL=app.component.js.map \ No newline at end of file diff --git a/demo/app/app.component.js.map b/demo/app/app.component.js.map new file mode 100644 index 0000000..5caada4 --- /dev/null +++ b/demo/app/app.component.js.map @@ -0,0 +1 @@ +{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":["AppComponent","AppComponent.constructor"],"mappings":";;;;;;;;;;;;;;;;;;;;;YAGA;gBAAAA;gBAK2BC,CAACA;gBAL5BD;oBAACA,gBAASA,CAACA;wBACPA,QAAQA,EAAEA,QAAQA;wBAClBA,QAAQA,EAAEA,4GAA4GA;wBACtHA,UAAUA,EAAEA,CAACA,sBAAMA,EAAEA,0BAAUA,CAACA;qBACnCA,CAACA;;iCAC0BA;gBAADA,mBAACA;YAADA,CAACA,AAL5B,IAK4B;YAL5B,uCAK4B,CAAA"} \ No newline at end of file diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts new file mode 100644 index 0000000..83d8ca5 --- /dev/null +++ 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: '

My First Angular 2 App

', + directives: [NgGrid, NgGridItem] +}) +export class AppComponent {} \ No newline at end of file diff --git a/demo/app/boot.js b/demo/app/boot.js new file mode 100644 index 0000000..96b6637 --- /dev/null +++ b/demo/app/boot.js @@ -0,0 +1,16 @@ +System.register(['angular2/platform/browser', './app.component'], function(exports_1) { + var browser_1, app_component_1; + return { + setters:[ + function (browser_1_1) { + browser_1 = browser_1_1; + }, + function (app_component_1_1) { + app_component_1 = app_component_1_1; + }], + execute: function() { + browser_1.bootstrap(app_component_1.AppComponent); + } + } +}); +//# sourceMappingURL=boot.js.map \ No newline at end of file diff --git a/demo/app/boot.js.map b/demo/app/boot.js.map new file mode 100644 index 0000000..33936c1 --- /dev/null +++ b/demo/app/boot.js.map @@ -0,0 +1 @@ +{"version":3,"file":"boot.js","sourceRoot":"","sources":["boot.ts"],"names":[],"mappings":";;;;;;;;;;;YAGA,mBAAS,CAAC,4BAAY,CAAC,CAAC"} \ No newline at end of file diff --git a/demo/app/boot.ts b/demo/app/boot.ts new file mode 100644 index 0000000..85bd730 --- /dev/null +++ b/demo/app/boot.ts @@ -0,0 +1,4 @@ +import {bootstrap} from 'angular2/platform/browser' +import {AppComponent} from './app.component' + +bootstrap(AppComponent); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..0b9818d --- /dev/null +++ b/demo/index.html @@ -0,0 +1,37 @@ + + + + Angular 2 QuickStart + + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/demo/package.json b/demo/package.json new file mode 100644 index 0000000..42a8c88 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 0000000..99c7111 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/demo/tsconfig.json b/demo/tsconfig.json new file mode 100644 index 0000000..f72a19c --- /dev/null +++ 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" + ] +} \ No newline at end of file diff --git a/src/NgGrid.ts b/src/NgGrid.ts index f7c41f7..9655913 100644 --- 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