refactor: rename library name to ngx-modialog (#381)

shlomiassaf · Aug 11, 2017 · 5be9f1e · 5be9f1e
1 parent 7ddbad3
commit 5be9f1e
Show file tree

Hide file tree

Showing 90 changed files with 243 additions and 275 deletions.
diff --git a/QUICKTHROUGH.md b/QUICKTHROUGH.md
diff --git a/README.md b/README.md
@@ -1,142 +1,157 @@
----
-
-# HELP WANTED!
-
-As a sole author I find it difficult to maintain multiple open source projects.
-As a result it is hard for me to replay rapidly to requests/help/etc...
-
-If you would like to contribute, please contact me, the community will thank you.
-
-You can contribute via:
-
-  - Implementing features & Bug fixes
-  - Documentation (Extremely important)
-  - Issue management
-
-Thank you!
+# ngx-modialog (previously ngx-modialog)
 
-Shlomi.
-
----
-
-# Angular AIO Modal / Dialog window
-
-A fully generic, customizable and fluent modal window implementation for Angular.
-`angular2-modal` is UI platform/framework agnostic, **plugins**** are used to describe a UI implementation (e.g: Bootstrap)  
-This means virtually any modal implementation out there can be ported into `angular2-modal`.
-`angular2-modal` will come with some built in UI platforms, external UI platform can be added in the future or externally used using NPM modules.
-
-See the DEMO: [shlomiassaf.github.io/angular2-modal](http://shlomiassaf.github.io/angular2-modal/)
-
-## Quick walk through
-Take 5 minutes to read a [quick walk through](https://github.com/shlomiassaf/angular2-modal/tree/master/QUICKTHROUGH.md) with samples of how to use **Angular 2 Modal**
-
-## Built in plugins:
-  * [Bootstrap]()
-  * [Vex](http://github.hubspot.com/vex/docs/welcome/)
-  * POC implementation of JS Native modal (window.alert/prompt/confirm) to demonstrate a hostile takeover :)
+## Library has been renamed from version 3.0.2
 
 
-## Built with angular
-
-## Features  
+Modal / Dialog implementation for angular.
 
   - Easy to use API via Fluent API Presets (alert, prompt, confirm)
   - Can render Component's, TemplateRef's and literal string
-  - Extendable via plugins.  
-
-#### Bootstrap / VEX
-  - Customizable with components, Presets and more...  
-  - Select cancel/quit key.
-  - Cascading modals.  
-  - Element blocking.  
-  - Blocking / Non blocking modal.  
-  - Modal as a component, replace the content by supplying a custom component.   
-
-
-That's how easy it is:  
-```
+  - Extendable via plugins.
+  - Easy to use
+```typescript
 modal.alert()
     .title('Hello World')
-    .body('In Angular 2')
+    .body('In Angular')
     .open();
 ```
 
-Click [HERE](https://github.com/shlomiassaf/angular2-modal/tree/master/QUICKTHROUGH.md) for a quick walkthrough  
-Click for the [Demo](http://shlomiassaf.github.io/angular2-modal/) Make sure to check the [code generator!](http://shlomiassaf.github.io/angular2-modal#/bootstrap-demo/customizeModals)  
 
-## Plunker
-Use [this plunker](http://plnkr.co/edit/ZAZqZu?p=preview) for quick showcasing and issue reports.
+Available plugins: 
+
+  - Bootstrap (3 & 4)
+  - [Vex](http://github.hubspot.com/vex/docs/welcome/)
 
+## Install
+```bash
+npm install ngx-modialog
+```
 
-## Sample code: Custom Modal dialog
-http://embed.plnkr.co/mbPzd8/
+## Quick start
 
-http://embed.plnkr.co/ZAZqZu/   (version 1.1.1)
+**In your application root module definition add `ModalModule` and the plugin you want to use:**
 
+We will use the bootstrap plugin (`BootstrapModalModule`) for this introduction.
 
-![Code Generator!](/preview.png)
+```typescript
+import { ModalModule } from 'ngx-modialog';
+import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
 
-See [src/demo](https://github.com/shlomiassaf/angular2-modal/tree/master/src/demo) for demo app with examples.
+// lots of code...
 
-## Installation
+@NgModule({
+  bootstrap: [ /* ... */ ],
+  declarations: [ /* ... */ ],
+  imports: [
+    /* ... */
+    ModalModule.forRoot(),
+    BootstrapModalModule
+  ],
+})
+export class AppModule { /* lots of code... */ }
 ```
-    npm install angular2-modal --save
+
+**In any angular component or service inject the `Modal` service and open a modal**:
+
+
+```typescript
+import { Component, ViewContainerRef } from '@angular/core';
+import { Overlay } from 'ngx-modialog';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'my-app',
+  template: `<button (click)="onClick()">Alert</button>`
+})
+export class AppComponent {
+  constructor(public modal: Modal) { }
+
+  onClick() {
+    this.modal.alert()
+        .size('lg')
+        .showClose(true)
+        .title('A simple Alert style modal window')
+        .body(`
+            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
+            does not block.</h4>
+            <b>Configuration:</b>
+            <ul>
+                <li>Non blocking (click anywhere outside to dismiss)</li>
+                <li>Size large</li>
+                <li>Dismissed with default keyboard key (ESC)</li>
+                <li>Close wth button click</li>
+                <li>HTML content</li>
+            </ul>`)
+        .open()
+        .then( dialogRef => {
+            dialogRef.result.then( result => alert(`The result is: ${result}`);
+        });
+  }
+}
 ```
 
-## SystemJS
-See systemJS example in [this plunker](http://embed.plnkr.co/mbPzd8/)
-Include both module and UMD bundle approach
+We are using the `alert()` method, one of 3 (prompt, confirm)) fluent-api methods we call `drop-ins`
 
-## Plugins
-Plugins serve as a concrete UI implementation for a modal. It can be an implementation for a known library (e.g: bootstrap) or something unique.  
-While `angular2-modal` has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.
+The object returned from calling the `open()` method is a `Promise` to a {@link DialogRef} instance, `DialogRef` is how you can control an open modal instance.
+
+We then use the `result` property to wait for the modal closing event.
 
+**Notes:**
+  - The `Promise` returned from `open()` is not required and exists due to legacy angular implementation when creating components dynamically was an async operation.
+  - Fluent API methods (drop-ins) are pre-configured (presets) methods that allow easy configuration and execution, you can create custom presets - see the demo application.
+  - For more control use the `open()` method, which is used by all drop in's internally.
+  - We import the `Modal` service from the plugin and not from the root library.
+  Import from the root should work but being explicit allow using multiple plugins.
 
+## Demo App
+The Demo application is a full implementation of the library with the native plugins.
 
-## Running locally
-    git clone https://github.com/shlomiassaf/angular2-modal.git  
-    npm install  
-    typings install  
-    npm run start
-    browse to localhost:3000  
+View it at [shlomiassaf.github.io/ngx-modialog](http://shlomiassaf.github.io/ngx-modialog/)
 
-You can apply custom modals based on components.
+The demo application is [part of this repository](https://github.com/shlomiassaf/ngx-modialog/tree/master/src/demo/app) and it is a great place to learn by example.
 
+#### Bootstrap / VEX features:
+  - Customizable with components, Presets and more...  
+  - Select cancel/quit key.
+  - Cascading modals.  
+  - Element blocking.  
+  - Blocking / Non blocking modal.  
+  - Modal as a component, replace the content by supplying a custom component.   
 
-# Issues and TODO's
-## ~~Declarative modal component~~ IMPLEMENTED
-~~Create a modal from declarative template syntax~~  
+The demo application comes with a [dynamic modal generator](http://shlomiassaf.github.io/ngx-modialog#/bootstrap-demo/customizeModals) for the **Boostrap** plugin
 
+## Plugins
+Plugins serve as a concrete UI implementation for a modal.
 
-## ~~Animation~~ IMPLEMENTED
-~~Not so complicated but not in angular 2 at the moment.~~  
+It can be an implementation for a known library (e.g: bootstrap) or something completely unique
 
+While `ngx-modialog` has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.
 
+> Built a plugin? I would love to know :)
 
-## ~~Overlay~~ IMPLEMENTED
-~~Switch to material2 overlay implementation when done.~~  
+# Known bugs
+### The dialog closes when removing the target DOM element in a click event
+ref [issue#111](https://github.com/shlomiassaf/ngx-modialog/issues/111)
 
+To avoid this problem use `event.stopPropagation();` or put the element removal inside a `setTimeout` call
 
+---
 
-## ~~Bundle~~ IMPLEMENTED
-~~Build a umd bundle.~~  
+# HELP WANTED!
 
+As a sole author I find it difficult to maintain multiple open source projects.
+As a result it is hard for me to replay rapidly to requests/help/etc...
 
+If you would like to contribute, please contact me, the community will thank you.
 
-## ~~Base support~~ IMPLEMENTED
-~~Provide base classes for generic components~~  
+You can contribute via:
 
+  - Implementing features & Bug fixes
+  - Documentation (Extremely important)
+  - Issue management
 
-## Unit & E2E test
-Add tests...
-## Support Universal
-Test against `universal-starter` to enable universal support.
-## Support Change detection
-Support `OnPush` with an observable api model (fluent observables)
+Thank you!
 
-# Known bugs
-### The dialog closes when removing the target DOM element in a click event
-ref [issue#111](https://github.com/shlomiassaf/angular2-modal/issues/111)
+Shlomi.
 
-To avoid this problem use `event.stopPropagation();` or put the element removal inside a `setTimeout` call
+---
diff --git a/docs/summary.json b/docs/summary.json
@@ -0,0 +1,6 @@
+[
+  {
+    "title": "TODO",
+    "file": "todo.md"
+  }
+]
diff --git a/docs/todo.md b/docs/todo.md
@@ -0,0 +1,30 @@
+# Issues and TODO's
+## ~~Declarative modal component~~ IMPLEMENTED
+~~Create a modal from declarative template syntax~~
+
+
+## ~~Animation~~ IMPLEMENTED
+~~Not so complicated but not in angular 2 at the moment.~~
+
+
+
+## ~~Overlay~~ IMPLEMENTED
+~~Switch to material2 overlay implementation when done.~~
+
+
+
+## ~~Bundle~~ IMPLEMENTED
+~~Build a umd bundle.~~
+
+
+
+## ~~Base support~~ IMPLEMENTED
+~~Provide base classes for generic components~~
+
+
+## Unit & E2E test
+Add tests...
+## Support Universal
+Test against `universal-starter` to enable universal support.
+## Support Change detection
+Support `OnPush` with an observable api model (fluent observables)