Merge pull request #43 from MindongLab/radium/comp-directives

- Use Component API
- Set up CI

.travis.yml

@@ -0,0 +1,21 @@
+dist: trusty
+sudo: false
+language: node_js
+node_js: node
+before_script:
+  - npm install -g gulp-cli bower
+  - cd ./www
+  - yarn install
+  - bower install
+script:
+  - gulp build:prod
+deploy:
+  provider: pages
+  skip-cleanup: true
+  local-dir: build
+  repo: MindongLab/foochow-idioms-web
+  github-token: $GITHUB_TOKEN  # Set in travis-ci.org dashboard, marked secure
+  keep-history: true
+  target-branch: gh-pages
+  on:
+    branch: master

www/CNAME

@@ -0,0 +1 @@
+idioms.mindong.asia

www/README.md

@@ -1,8 +1,11 @@
 # Web UI for Foochow Idioms
 
-## Build steps
+## Local development
 ```
-npm install
+yarn install
 bower install
-gulp serve::dev
+gulp serve:dev
 ```
+
+## Coding Style
+Follow the [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controllers) for now.

www/app/app.ts

@@ -1,34 +1,40 @@
 "use strict";
-angular.module('app', ['ngRoute'])
-.constant("SERVER_API_URL","http://127.0.0.1:5000/api")
-.constant("SERVER_AUDIO_URL","/assets/audio/")
-
-.config(['$routeProvider', function ($routeProvider) {
-    $routeProvider
-        .when('/', {
-            templateUrl: 'app/views/welcome.tpl.html',
-            controller: 'homeCtrl'
+angular.module('app', ['ui.router'])
+.constant("SERVER_API_URL",/** inject:SERVER_API_URL **/"http://fiapi.radiumz.org:2052/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'
         })
-        .when('/idiom/:idiomtext*', {
-            templateUrl: 'app/views/showDetails.tpl.html',
-            controller: 'detailsCtrl',
+        .state({
+            name: 'showidiom',
+            url: '/idiom/{idiomtext}',
+            component: 'viewIdiomPage',
             caseInsensitiveMatch: true
         })
-        .when('/help', {
-            templateUrl: 'app/views/help.tpl.html'
-            // controller: 'mainCtrl'
-        })
-        .when('/tags', {
-            templateUrl: 'app/views/tags.tpl.html' ,
-            controller: 'tagsCtrl'
+        .state({
+            name: 'showhelp',
+            url: '/help',
+            component: 'helpPage'
         })
-        .when('/apps', {
-            templateUrl: 'app/views/apps.tpl.html'
+        .state({
+            name: 'showcategories',
+            url: '/tags', 
+            component: 'categoryPage'
         })
-        .otherwise({
-            redirectTo: '/'
+        .state({
+            name: 'showapps',
+            url: '/apps', 
+            component: 'appsPage'
         });
+
+        $urlRouterProvider.otherwise('/');
 }]);
 
-require('./controllers');
+require('./components');
 require('./services');

www/app/views/apps.tpl.html → www/app/components/apps-page.component.html

@@ -1,33 +1,33 @@
-<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">
-        <ul>
-            <li>离线发音，无需联网</li>
-            <li>轻松分享字图到社交软件</li>
-        </ul>
-        <a href="http://www.wandoujia.com/apps/org.mindonglab.foochowidioms" target="_blank">
-            <button class="ms-Button ms-Button--primary" style="background-color: #107c10; border-color: #107c10;">
-                <span class="ms-Button-icon">
-                    <i class="ms-Icon ms-Icon--plus"></i>
-                </span>
-                <span class="ms-Button-label">豌豆荚下载</span>
-            </button></a>
-        <a href="http://idioms.mindong.asia/assets/android.apk" target="_blank">
-            <button class="ms-Button ms-Button--primary">
-                <span class="ms-Button-icon">
-                    <i class="ms-Icon ms-Icon--plus"></i>
-                </span>
-                <span class="ms-Button-label">下载Apk</span>
-            </button></a>
-
-        <div>
-        <a href='https://play.google.com/store/apps/details?id=org.mindonglab.foochowidioms&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
-            <img alt='下载应用，请到 Google Play' style="max-height: 60px" 
-                src='assets/img/google-play-badge.png'/>
-        </a>
-        </div>
-    </div>
-    <h2 class="ms-font-xl ms-fontColor-themePrimary">iOS 版 开发中</h2>
+<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">
+        <ul>
+            <li>离线发音，无需联网</li>
+            <li>轻松分享字图到社交软件</li>
+        </ul>
+        <a href="http://www.wandoujia.com/apps/org.mindonglab.foochowidioms" target="_blank">
+            <button class="ms-Button ms-Button--primary" style="background-color: #107c10; border-color: #107c10;">
+                <span class="ms-Button-icon">
+                    <i class="ms-Icon ms-Icon--plus"></i>
+                </span>
+                <span class="ms-Button-label">豌豆荚下载</span>
+            </button>
+        </a>
+        <a href="http://www.wandoujia.com/apps/org.mindonglab.foochowidioms/download?pos=detail-ndownload-org.mindonglab.foochowidioms" target="_blank">
+            <button class="ms-Button ms-Button--primary">
+                <span class="ms-Button-icon">
+                    <i class="ms-Icon ms-Icon--plus"></i>
+                </span>
+                <span class="ms-Button-label">下载Apk</span>
+            </button>
+        </a>
+        <div>
+            <a href='https://play.google.com/store/apps/details?id=org.mindonglab.foochowidioms&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
+                <img alt='下载应用，请到 Google Play' style="max-height: 60px" src='assets/img/google-play-badge.png' />
+            </a>
+        </div>
+    </div>
+    <h2 class="ms-font-xl ms-fontColor-themePrimary">iOS 版 开发中</h2>
 </div>

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

@@ -0,0 +1,12 @@
+'use strict';
+
+function AppsPageController() {
+
+};
+
+var AppsPage = {
+    template: require('./apps-page.component.html'),
+    controller: AppsPageController
+}
+
+module.exports = AppsPage;

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

@@ -0,0 +1 @@
+<span ng-style="$ctrl.style"></span><a style="font-size:0">{{$ctrl.altText}}</a>

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

@@ -0,0 +1,52 @@
+'use strict';
+
+// 用於顯示非Unicode或Unicode擴展區漢字的元件
+
+function CanvasCharacterController($scope, KageService) {
+    var ctrl = this;
+
+    ctrl.altText = "";  // 用於 accessibility 的隱藏文字 (方便複製文本和 screen reader)
+    ctrl.imgBase64Url = ""; 
+
+    function updateText() {
+        var requestedText = (ctrl.ids != '') ? ctrl.ids : ctrl.char;
+        ctrl.altText = requestedText;
+        console.log("[canvas-character] requesting IDS "+requestedText);
+        ctrl.style = {
+            'height': ctrl.size,
+            'width': ctrl.size, 
+            'background': 'url("'+ctrl.imgBase64Url+'")',
+            'background-size': 'contain',
+            'display': 'inline-block',
+            'vertical-align': -5
+        };
+        KageService.getGlyphImage(requestedText, 200, 1).then(
+            (r)=> {
+                console.log('got it:',r);
+                ctrl.imgBase64Url = r.data;
+                ctrl.style['background'] = 'url("'+ctrl.imgBase64Url+'")';
+            }
+        );
+    }
+    ctrl.$onChanges = () => {
+        updateText();
+    };  
+    ctrl.$onInit = () => {
+        updateText();
+    };
+
+}
+
+CanvasCharacterController.$inject = ['$scope', 'KageService'];
+
+var CanvasCharacter = {
+    template: require('./canvas-character.component.html'),
+    bindings: {
+        char: '@', // character to be displayed
+        ids:  '@', // ids to be displayed (`ids` is prioritised over `char`)
+        size: '@'  // size of the character image (=height=width)
+    },
+    controller: CanvasCharacterController
+}
+
+module.exports = CanvasCharacter;

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

@@ -0,0 +1,3 @@
+<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>

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

@@ -0,0 +1,22 @@
+'use strict';
+
+function CategoryPageController($scope, $rootScope, $location, dataService) {
+    var ctrl = this;
+    dataService.getAllTags().then(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"];
+
+var CategoryPage = {
+    template: require('./category-page.component.html'),
+    controller: CategoryPageController
+}
+
+module.exports = CategoryPage;

www/app/components/fi-mainview.component.html

@@ -0,0 +1,7 @@
+<div id="mainContainer" ng-cloak>
+
+    <fi-sidebar></fi-sidebar>
+    <div id="mainPane">
+        <ui-view></ui-view>
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+'use strict';
+
+function FiMainviewController() {
+
+};
+
+FiMainviewController.$inject = [];
+
+var FiMainview = {
+    template: require('./fi-mainview.component.html'),
+    controller: FiMainviewController
+}
+
+module.exports = FiMainview;

www/app/components/fi-sidebar.component.html

@@ -0,0 +1,31 @@
+<div id="sideBar" class="ms-bgColor-themeLight sideBarHide">
+
+    <div style="display:flex; flex-direction:row;">
+        <div class="tagButton" ng-class="{'tagButton-hide':!($ctrl.tagName.length)}" style="order:1">
+            <div class="tagButton-text ms-Font-m">
+                {{$ctrl.tagName}}
+            </div>
+            <div ng-click="$ctrl.removeTagClicked()" class="tagButton-removeButton">
+                <i class="ms-Icon ms-Icon--x"></i>
+            </div>
+
+        </div>
+        <div class="filterSearch ms-SearchBox" style="order:2; flex-grow:100;">
+            <input class="ms-SearchBox-field SearchBox" ng-model="filterString">
+            <label class="ms-SearchBox-label">
+                <i class="ms-SearchBox-icon ms-Icon ms-Icon--search"></i>搜索
+            </label>
+            <button class="ms-SearchBox-closeButton">
+                <i class="ms-Icon ms-Icon--x"></i>
+            </button>
+        </div>
+    </div>
+    <ul class="ms-List resultList">
+        <div ng-repeat="item in filteredList = ($ctrl.list | filter:filterString)" class="cListItem is-selectable" ng-click="$ctrl.listItemClicked(item)">
+            <span class="cListItem-primaryText ms-Font-xl">{{item}}</span>
+        </div>
+        <div ng-show="$ctrl.loading" class="ms-Spinner"></div>
+        <div ng-show="$ctrl.loaded && filteredList.length==0" class="ms-Font-xl">没有符合条件的结果</div>
+
+    </ul>
+</div>