Upgrade to Angular 5

www/.gitignore

@@ -1,3 +1,5 @@
 # Ignore .js and source map files generated by TypeScript compiler
 app/**/*.js
-app/**/*.js.map
+app/**/*.js.map
+
+pnpm-debug.log

www/README.md

@@ -2,7 +2,7 @@
 
 ## Local development
 ```
-yarn install
+pnpm install
 bower install
 gulp serve:dev
 ```

www/app/app.module.ts

@@ -0,0 +1,69 @@
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { RouterModule, Routes } from '@angular/router';
+import { FiAppComponent } from './fi-app/fi-app.component';
+import { FiHeaderDirective } from './components/fi-header.directive';
+import { FiMainviewDirective } from './components/fi-mainview.directive';
+import { IdiomDataService } from './idioms/idiom-data.service';
+import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
+import { TaxonomyTagComponent } from './idioms/taxonomy-tag.component';
+import { KageService } from './canvas-char/kage.service';
+import { PlayerButtonComponent } from './idioms/player-button.component';
+import { CanvasCharacterDirective } from './components/canvas-character.directive';
+import { IdiomMainDisplayComponent } from './idioms/idiom-main-display.component';
+import { SearchBoxComponent } from './fi-app/search-box.component';
+import { AppsPageComponent } from './components/apps-page.component';
+import { LandingPageComponent } from './components/landing-page.component';
+import { NavigationEventsService } from './navigation/navigation-events.service';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        UpgradeModule,
+        HttpModule,
+        FormsModule
+    ],
+    declarations: [
+        FiAppComponent,
+        TaxonomyTagComponent,
+        PlayerButtonComponent,
+        IdiomMainDisplayComponent,
+        SearchBoxComponent,
+        FiHeaderDirective,
+        FiMainviewDirective,
+        CanvasCharacterDirective,
+        AppsPageComponent,
+        LandingPageComponent
+    ],
+    entryComponents: [
+        FiAppComponent,
+        TaxonomyTagComponent,
+        PlayerButtonComponent,
+        IdiomMainDisplayComponent,
+        SearchBoxComponent,
+        AppsPageComponent,
+        LandingPageComponent
+    ],
+    providers: [
+        IdiomDataService,
+        KageService,
+        NavigationEventsService
+    ]
+})
+export class AppModule {
+    constructor(private upgrade: UpgradeModule) { }
+    ngDoBootstrap() {
+        this.upgrade.bootstrap(document.body, ['app']);
+    }
+}
+
+
+@NgModule({
+    exports: [RouterModule]
+})
+export class AppRoutingModule {
+
+}

www/app/app.ts

@@ -1,40 +1,64 @@
 "use strict";
 angular.module('app', ['ui.router'])
-.constant("SERVER_API_URL",/** inject:SERVER_API_URL **/"http://fiapi.radiumz.org/api"/** endinject **/)
-.constant("SERVER_AUDIO_URL",/** inject:SERVER_AUDIO_URL **/"/assets/audio/"/** endinject **/)
-.constant("CI_BUILD_NUMBER",/** inject:CI_BUILD_NUMBER **/"dev"/** endinject **/)
-.constant("CI_COMMIT_HASH",/** inject:CI_COMMIT_HASH **/"dev"/** endinject **/)
-.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
-    $stateProvider
-        .state({
-            name: 'home',
-            url: '/',
-            component: 'landingPage'
-        })
-        .state({
-            name: 'showidiom',
-            url: '/idiom/{idiomtext}',
-            component: 'viewIdiomPage',
-            caseInsensitiveMatch: true
-        })
-        .state({
-            name: 'showhelp',
-            url: '/help',
-            component: 'helpPage'
-        })
-        .state({
-            name: 'showcategories',
-            url: '/tags', 
-            component: 'categoryPage'
-        })
-        .state({
-            name: 'showapps',
-            url: '/apps', 
-            component: 'appsPage'
-        });
+    .constant("SERVER_API_URL",/** inject:SERVER_API_URL **/"http://fiapi.radiumz.org/api"/** endinject **/)
+    .constant("SERVER_AUDIO_URL",/** inject:SERVER_AUDIO_URL **/"/assets/audio/"/** endinject **/)
+    .constant("CI_BUILD_NUMBER",/** inject:CI_BUILD_NUMBER **/"dev"/** endinject **/)
+    .constant("CI_COMMIT_HASH",/** inject:CI_COMMIT_HASH **/"dev"/** endinject **/)
+    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
+        $stateProvider
+            .state({
+                name: 'home',
+                url: '/',
+                template: '<landing-page></landing-page>'
+            })
+            .state({
+                name: 'showidiom',
+                url: '/idiom/{idiomtext}',
+                component: 'viewIdiomPage',
+                caseInsensitiveMatch: true
+            })
+            .state({
+                name: 'showhelp',
+                url: '/help',
+                component: 'helpPage'
+            })
+            .state({
+                name: 'showcategories',
+                url: '/tags',
+                component: 'categoryPage'
+            })
+            .state({
+                name: 'showapps',
+                url: '/apps',
+                template: '<apps-page></apps-page>'
+            });
 
         $urlRouterProvider.otherwise('/');
-}]);
+    }]);
 
 require('./components');
-require('./services');
+
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+import { FiAppComponent } from "./fi-app/fi-app.component";
+import { downgradeComponent, downgradeInjectable } from "@angular/upgrade/static";
+import { IdiomDataService } from "./idioms/idiom-data.service";
+import { TaxonomyTagComponent } from "./idioms/taxonomy-tag.component";
+import { KageService } from "./canvas-char/kage.service";
+import { PlayerButtonComponent } from "./idioms/player-button.component";
+import { IdiomMainDisplayComponent } from "./idioms/idiom-main-display.component";
+import { SearchBoxComponent } from "./fi-app/search-box.component";
+import { AppsPageComponent } from "./components/apps-page.component";
+import { LandingPageComponent } from "./components/landing-page.component";
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+angular.module('app')
+    .directive('fiApp', downgradeComponent({ component: FiAppComponent }))
+    .directive('taxonomyTag', downgradeComponent({ component: TaxonomyTagComponent }))
+    .directive('playerButton', downgradeComponent({ component: PlayerButtonComponent }))
+    .directive('idiomMainDisplay', downgradeComponent({ component: IdiomMainDisplayComponent }))
+    .directive('searchBox', downgradeComponent({ component: SearchBoxComponent }))
+    .directive('landingPage', downgradeComponent({ component: LandingPageComponent }))
+    .directive('appsPage', downgradeComponent({ component: AppsPageComponent }))
+    .factory('IdiomDataService', downgradeInjectable(IdiomDataService))
+    .factory('KageService', downgradeInjectable(KageService))

www/app/canvas-char/kage.service.ts

@@ -0,0 +1,69 @@
+import { Injectable } from "@angular/core";
+import { IdiomDataService } from "../idioms/idiom-data.service";
+import { Observable } from "rxjs/Observable";
+
+// workaround for global variables
+declare var Kage: any;
+declare var Polygons: any;
+
+@Injectable()
+export class KageService {
+    cache = {};
+    constructor (private dataService: IdiomDataService) {
+
+    }
+
+    private drawKage(arr, canvas) : void {
+        var ctx = canvas.getContext("2d");
+
+        var kage = new Kage();
+        kage.kUseCurve = false;
+        var polygons = new Polygons();
+
+        for (var i=0; i <arr.length; ++i) {
+            kage.kBuhin.push(arr[i]["name"],arr[i]["code"]);
+        }
+        kage.makeGlyph(polygons, "target");
+
+        ctx.fillStyle = "rgb(0, 0, 0)";
+
+        for(var i = 0; i < polygons.array.length; i++){
+            ctx.beginPath();
+            ctx.moveTo(polygons.array[i].array[0].x, polygons.array[i].array[0].y);
+            for(var j = 1; j < polygons.array[i].array.length; j++){
+                ctx.lineTo(polygons.array[i].array[j].x, polygons.array[i].array[j].y);
+            }
+            ctx.closePath();
+            ctx.fill();
+        }
+    }
+
+    getKage(ids, canvas): Observable<any> {
+        if (this.cache[ids] !== undefined) {
+            return Observable.of(this.cache[ids]).map((r) => {
+                this.drawKage(r["field_kanjivg"], canvas);
+                return canvas;
+            });
+        } else {
+            return this.dataService.getGlyph(ids).map((r) => {
+                this.cache[ids] = r;
+                this.drawKage(r["field_kanjivg"], canvas);
+                return canvas;
+            });
+        }
+        //@todo: error handling
+    }
+
+
+    getGlyphImage(str, size, id) : Observable<object> {
+        var can = document.createElement('canvas');
+        can.height = size;
+        can.width = size;
+        return this.getKage(str, can).map(function (can) {
+            return {id:id, data: can.toDataURL()};
+        });
+        //@todo: error handling
+    }
+
+
+}

www/app/components/apps-page.component.html

@@ -1,5 +1,4 @@
 <div style="padding:20px">
-
     <h1 class="ms-font-su ms-fontColor-themePrimary">下载 App</h1>
     <h2 class="ms-font-xl ms-fontColor-themePrimary">福州话熟语大全 Android 版</h2>
     <div class="ms-font-l ms-fontColor-themePrimary">

www/app/components/apps-page.component.ts

@@ -1,12 +1,13 @@
-'use strict';
+import { Component } from '@angular/core';
 
-function AppsPageController() {
 
-};
-
-var AppsPage = {
+@Component({
     template: require('./apps-page.component.html'),
-    controller: AppsPageController
-}
+    selector: 'apps-page'
+})
+export class AppsPageComponent {
 
-module.exports = AppsPage;
+    constructor() {
+        // do nothing
+    }
+};

www/app/components/canvas-character.component.ts

@@ -18,9 +18,9 @@ function CanvasCharacterController($scope, KageService) {
             'background': 'url("'+ctrl.imgBase64Url+'")',
             'background-size': 'contain',
             'display': 'inline-block',
-            'vertical-align': -5
+            'vertical-align': '-5%'
         };
-        KageService.getGlyphImage(requestedText, 200, 1).then(
+        KageService.getGlyphImage(requestedText, 200, 1).subscribe(
             (r)=> {
                 console.log('got it:',r);
                 ctrl.imgBase64Url = r.data;

www/app/components/canvas-character.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, ElementRef, Injector, SimpleChanges, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+@Directive({
+    selector: 'canvas-character'
+})
+export class CanvasCharacterDirective extends UpgradeComponent {
+    @Input() ids: string;
+    @Input() size: number;
+    @Input() char: string;
+    constructor(elementRef: ElementRef, injector: Injector) {
+        super('canvasCharacter', elementRef, injector);
+    }
+}

www/app/components/category-page.component.html

@@ -1,3 +1,9 @@
 <div style="padding:20px">
-    <h2 class="ms-font-xl ms-fontColor-themePrimary" ng-repeat="item in $ctrl.list" ng-click="$ctrl.tagClicked(item)">{{item}}</h2>
+    <div class="ms-Grid">
+        <div class="ms-Grid-row">
+            <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2" ng-repeat="item in $ctrl.list">
+                <h2 class="ms-font-xl ms-fontColor-themePrimary" ng-click="$ctrl.tagClicked(item)">{{item}}</h2>
+            </div>
+        </div>
+    </div>
 </div>

www/app/components/category-page.component.ts

@@ -1,18 +1,21 @@
+import { IdiomDataService } from "../idioms/idiom-data.service";
+
 'use strict';
 
-function CategoryPageController($scope, $rootScope, $location, dataService) {
+function CategoryPageController($scope, $rootScope, $location, idiomDataService) {
     var ctrl = this;
-    dataService.getAllTags().then(function (r) {
+    (idiomDataService as IdiomDataService).getAllTags().subscribe(
+    function (r) {
         ctrl.list = r;
-    })
+    });
 
     ctrl.tagClicked = function (tagName) {
         $rootScope.$emit("switchToTag", {'tag': tagName});
         $rootScope.$emit("toggleSidebar", {'state': true});
     };
 }
 
-CategoryPageController.$inject =  ['$scope', '$rootScope', '$location', "DataService"];
+CategoryPageController.$inject =  ['$scope', '$rootScope', '$location', "IdiomDataService"];
 
 var CategoryPage = {
     template: require('./category-page.component.html'),

www/app/components/fi-header.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+@Directive({
+    selector: 'fi-header'
+})
+export class FiHeaderDirective extends UpgradeComponent {
+    constructor(elementRef: ElementRef, injector: Injector) {
+        super('fiHeader', elementRef, injector);
+    } 
+}

www/app/components/fi-mainview.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+    selector: 'fi-mainview'
+})
+export class FiMainviewDirective extends UpgradeComponent {
+    constructor(elementRef: ElementRef, injector: Injector) {
+        super('fiMainview', elementRef, injector);
+    }
+}