Update format based on more strict lint config

.vscode/settings.json

@@ -2,6 +2,8 @@
 {
     "editor.formatOnSave": true,
     "html.format.enable": false,
+    "eslint.enable": false,
     "tslint.enable": true,
-    "tslint.run": "onSave"
+    "tslint.run": "onSave",
+    "javascript.validate.enable": false
 }

demo/components/apidoc/index.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'apidoc',
+    template: `
+    <div class="container">
+        <h1 class="page-title">Quickstart</h1>
+        <p style="margin-bottom: 15px;">To start using <code>angular2-baidu-map</code>, follow these simple steps for module setup. Afterwards, read <a href="#!/apidoc">API documentation</a> to learn about advanced usage.</p>
+        <install class="section"></install>
+        <import class="section"></import>
+        <usage class="section"></usage>
+    </div>
+    `,
+    styles: [
+        `
+        :host {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        baidu-map {
+            width: 800px;
+            height: 290px;
+        }
+        .home-desc {
+            width: 800px;
+        }
+        @media screen and (max-width: 800px) {
+            baidu-map,
+            .home-desc {
+                width: 100%;
+            }
+        }
+        `
+    ]
+})
+export class QuickstartComponent {
+
+    constructor() {
+
+    }
+
+
+}

demo/components/home/about.component.ts

@@ -4,8 +4,15 @@ import { Component } from '@angular/core';
     selector: 'about',
     template: `
     <h1>About</h1>
-    <p><code>angular2-baidu-map</code> is a set of components written in <code>TypeScript</code> which integrate <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> in an Angular applications.</p>
-    <p>It is based on the <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> Javascript API version 2.0, and <a href="https://angular.io" target="_blank">Angular</a> ^version 4.4.1</p>
+    <p>
+    <code>angular2-baidu-map</code> 
+    is a set of components written in <code>TypeScript</code> 
+    which integrate <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> in an Angular applications.
+    </p>
+    <p>
+    It is based on the <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> 
+    Javascript API version 2.0, and <a href="https://angular.io" target="_blank">Angular</a> ^version 4.4.1
+    </p>
     `,
 })
 export class AboutComponent { }

demo/components/home/contribute.component.ts

@@ -5,7 +5,11 @@ import { Component } from '@angular/core';
     selector: 'contribute',
     template: `
     <h1>Contributing</h1>
-    <p><code>angular2-baidu-map</code> is hosted on <a href="https://github.com/leftstick/angular2-baidu-map" target="_blank">GitHub</a>. If you find a bug, please use <a href="https://github.com/leftstick/angular2-baidu-map/issues" target="_blank">issue</a> system to report it, or fork this repository, fix it and give a pull request. Contributions are more than welcome</p>
+    <p>
+    <code>angular2-baidu-map</code> is hosted on <a href="https://github.com/leftstick/angular2-baidu-map" target="_blank">GitHub</a>. 
+    If you find a bug, please use <a href="https://github.com/leftstick/angular2-baidu-map/issues" target="_blank">issue</a> system to report it, 
+    or fork this repository, fix it and give a pull request. Contributions are more than welcome
+    </p>
     `,
 })
 export class ContributeComponent { }

demo/components/home/github.jparrowsec.cnponent.ts

@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
     selector: 'github',
     template: `
     <div id="github">
-        <iframe src="https://ghbtns.com/github-btn.html?user=leftstick&repo=angular2-baidu-map&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
-        <iframe src="https://ghbtns.com/github-btn.html?user=leftstick&repo=angular2-baidu-map&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
+        <iframe src="https://ghbtns.com/github-btn.html?user=leftstick&repo=angular2-baidu-map&type=star&count=true" frameborder="0" width="100" height="20">
+        </iframe>
+        <iframe src="https://ghbtns.com/github-btn.html?user=leftstick&repo=angular2-baidu-map&type=fork&count=true" frameborder="0" width="100" height="20">
+        </iframe>
     </div>
     `,
 })

demo/components/home/index.component.ts

@@ -40,9 +40,8 @@ import { Map, MapOptions, Point, MarkerOptions } from '../../../src';
     ]
 })
 export class HomeComponent {
-    opts: MapOptions;
-    point: Point;
-    markerOpts: MarkerOptions;
+    private opts: MapOptions;
+    private point: Point;
 
     constructor() {
         this.opts = {
@@ -59,15 +58,15 @@ export class HomeComponent {
         };
     }
 
-    onMapLoad(map: Map) {
+    private onMapLoad(map: Map) {
         console.log('map loaded', map);
     }
 
-    onClickMarker(e: any) {
+    private onClickMarker(e: any) {
         console.log('e', e);
     }
 
-    onClickMap(e: any) {
+    private onClickMap(e: any) {
         console.log('map e', e);
     }
 }

demo/components/home/version.component.ts

@@ -5,7 +5,11 @@ import { Component } from '@angular/core';
     selector: 'version',
     template: `
     <h1>Version</h1>
-    <p>There are 3 major versions available, and each of them is not backwards compatible. Which means you should not writing codes at version 2's instruction, but with version 3 installed. Below are documentation references for previous versions:</p>
+    <p>
+    There are 3 major versions available, and each of them is not backwards compatible. 
+    Which means you should not writing codes at version 2's instruction, but with version 3 installed. 
+    Below are documentation references for previous versions:
+    </p>
     <br/>
     <ul>
         <li><a href="https://github.com/leftstick/angular2-baidu-map/tree/3.x" target="_blank">version 2.x</a></li>

demo/components/quickstart/index.component.ts

@@ -5,7 +5,10 @@ import { Component } from '@angular/core';
     template: `
     <div class="container">
         <h1 class="page-title">Quickstart</h1>
-        <p style="margin-bottom: 15px;">To start using <code>angular2-baidu-map</code>, follow these simple steps for module setup. Afterwards, read <a href="#!/apidoc">API documentation</a> to learn about advanced usage.</p>
+        <p style="margin-bottom: 15px;">
+        To start using <code>angular2-baidu-map</code>, 
+        follow these simple steps for module setup. Afterwards, read <a href="#!/apidoc">API documentation</a> to learn about advanced usage.
+        </p>
         <install class="section"></install>
         <import class="section"></import>
         <usage class="section"></usage>

demo/components/quickstart/index.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+import { QuickstartRouteModule } from './route.module';
+
+import { QuickstartComponent } from './index.component';
+import { InstallComponent } from './install.component';
+import { ImportComponent } from './import.component';
+import { UsageComponent } from './usage.component';
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        QuickstartRouteModule
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: [
+        QuickstartComponent,
+        InstallComponent,
+        ImportComponent,
+        UsageComponent
+    ]
+})
+export class QuickstartModule { }

demo/components/quickstart/route.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { QuickstartComponent } from './index.component';
+
+const routes: Routes = [
+    {
+        path: 'quickstart',
+        component: QuickstartComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class QuickstartRouteModule { }

demo/demo.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
 
 import { HighlightDirective } from './directives/highlight';
 
@@ -9,25 +8,18 @@ import { RouteModule } from './route.module';
 import { DemoComponent } from './demo.component';
 import { MenuComponent } from './components/menu.component';
 import { HomeModule } from './components/home/index.module';
-
-import { QuickstartComponent } from './components/quickstart/index.component';
-import { InstallComponent } from './components/quickstart/install.component';
-import { ImportComponent } from './components/quickstart/import.component';
-import { UsageComponent } from './components/quickstart/usage.component';
+import { QuickstartModule } from './components/quickstart/index.module';
 
 @NgModule({
     imports: [
         BrowserModule,
         RouteModule,
-        HomeModule
+        HomeModule,
+        QuickstartModule
     ],
     declarations: [
         DemoComponent,
         MenuComponent,
-        QuickstartComponent,
-        InstallComponent,
-        ImportComponent,
-        UsageComponent,
         HighlightDirective
     ],
     bootstrap: [DemoComponent]

demo/directives/highlight.ts

@@ -8,7 +8,7 @@ export class HighlightDirective implements OnInit {
 
     constructor(private _el: ElementRef) { }
 
-    ngOnInit() {
+    public ngOnInit() {
         const snippets = this._el.nativeElement.querySelectorAll('.snippet pre code');
         Array
             .prototype

demo/route.module.ts

@@ -1,13 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { QuickstartComponent } from './components/quickstart/index.component';
-
 const routes: Routes = [
-    {
-        path: 'quickstart',
-        component: QuickstartComponent
-    },
     {
         path: '',
         redirectTo: '/home',

src/components/map.component.ts

@@ -48,17 +48,17 @@ import { ScriptLoader } from '../providers/scriptLoader';
     ]
 })
 export class MapComponent implements OnInit, OnChanges {
-    @Input() options: MapOptions;
+    @Input() private options: MapOptions;
 
-    @Output() loaded = new EventEmitter();
-    @Output() clicked = new EventEmitter();
+    @Output() private loaded = new EventEmitter();
+    @Output() private clicked = new EventEmitter();
 
-    @ViewChild('mapinstance') mapInstance: ElementRef;
+    @ViewChild('mapinstance') private mapInstance: ElementRef;
 
 
     constructor(private _service: MapService) { }
 
-    ngOnInit() {
+    public ngOnInit() {
         this
             ._service
             .createMap(this.mapInstance.nativeElement, this.options)
@@ -71,17 +71,16 @@ export class MapComponent implements OnInit, OnChanges {
             });
     }
 
-    addListener(map: Map) {
-        map.addEventListener('click', (e: any) => {
-            this.clicked.emit(e);
-        });
-    }
-
-    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+    public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
         const opts = <MapOptions>changes['options'].currentValue;
         this._service.setOptions(opts);
     }
 
-    ngOnDestroy() {
+    public ngOnDestroy() { }
+
+    private addListener(map: Map) {
+        map.addEventListener('click', (e: any) => {
+            this.clicked.emit(e);
+        });
     }
 }

src/components/marker.component.ts

@@ -11,16 +11,16 @@ import { MapService } from '../providers/mapService';
     selector: 'marker'
 })
 export class MarkerComponent implements OnInit, OnDestroy {
-    @Input() point: Point;
-    @Input() options: MarkerOptions;
+    @Input() private point: Point;
+    @Input() private options: MarkerOptions;
 
-    @Output() clicked = new EventEmitter();
+    @Output() private clicked = new EventEmitter();
 
-    marker: Marker;
+    private marker: Marker;
 
     constructor(private _service: MapService) { }
 
-    ngOnInit() {
+    public ngOnInit() {
         nullCheck(this.point, 'point is required for <marker>');
 
         this
@@ -38,7 +38,16 @@ export class MarkerComponent implements OnInit, OnDestroy {
             });
     }
 
-    addListener(marker: Marker, map: Map) {
+    public ngOnDestroy() {
+        this
+            ._service
+            .getNativeMap()
+            .then(map => {
+                map.removeOverlay(this.marker);
+            });
+    }
+
+    private addListener(marker: Marker, map: Map) {
         marker.addEventListener('click', (e: any) => {
             this.clicked.emit({
                 e,
@@ -47,13 +56,4 @@ export class MarkerComponent implements OnInit, OnDestroy {
             });
         });
     }
-
-    ngOnDestroy() {
-        this
-            ._service
-            .getNativeMap()
-            .then(map => {
-                map.removeOverlay(this.marker);
-            });
-    }
 }

src/helpers/object.ts

@@ -2,3 +2,7 @@
 export function isNull(obj: any) {
     return obj === null || obj === undefined;
 }
+
+export function isBoolean(obj: any): obj is boolean {
+    return Object.prototype.toString.call(obj) === '[object Boolean]';
+}

src/index.ts

@@ -15,7 +15,7 @@ import { MarkerComponent } from './components/marker.component';
     ]
 })
 export class BaiduMapModule {
-    static forRoot(_config?: ScriptLoaderConfig): ModuleWithProviders {
+    public static forRoot(_config?: ScriptLoaderConfig): ModuleWithProviders {
         return {
             ngModule: BaiduMapModule,
             providers: [