Merge branch 'release/0.0.2'

Author: dweber019

.gitignore

@@ -15,4 +15,5 @@ tmp
 .idea
 .awcache
 npm-debug.log
+npm-debug.log*
 /typings

README.md

@@ -182,3 +182,97 @@ You can find the configurations in ```<root>/environment```.
 ## HTML5 pushState routing
 By default pushState, also known as html5 routing, is enabled. The Webpack server is already configured to handle this but many webserver need
 extra confuration to enable this.
+
+## Cordova - Mobile Development
+
+### Installation
+Initiate cordova with the following commands:
+```shell
+npm install -g cordova
+npm run cordova:init
+```
+
+Finally add the following code just before the ```</body>``` closing tag:
+```
+<!-- Cordova -->
+<script src="cordova.js"></script>
+```
+
+Cordova has a issue in the way they serve the source code files to the WebView in the platforms. So we have to remove/alter the following code
+to make sure everything works in cordova.
+
+Remove the following line in src/index.ejs
+```
+12: <base href="<%= htmlWebpackPlugin.options.baseUrl %>">
+```
+
+Remove the following line in src/app/app.ts
+```
+8: config.options.pushState = true;
+```
+
+Add those lines to the src/styles/_base.scss
+```
+html {
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+  -webkit-user-select: none;  /* Chrome all / Safari all */
+  -moz-user-select: none;     /* Firefox all */
+  -ms-user-select: none;      /* IE 10+ */
+  user-select: none;          /* Likely future */
+}
+```css
+
+Install the following Libraries
+```
+npm i hammerjs fastclick iscroll --save
+```
+
+Install the following Libraries
+```
+npm i hammerjs fastclick --save
+```
+
+Provide those Libraries for the whole app and to do so add this into the config/config-globals.js file.
+````
+...
+new webpack.ProvidePlugin({
+  'moment': 'moment',
+  '_': 'lodash',
+  'Hammer': 'hammerjs',
+  'FastClick': 'fastclick'
+})
+...
+```
+
+Add this at the bottom of the src/main.ts file to activate FastClick and to prevent default by touchmoves.
+```
+/**
+ * Disabels the scroll events from the generel page
+ */
+document.addEventListener('touchmove', e => e.preventDefault(), false);
+
+/**
+ * Activates Fastclick
+ */
+$(() => {
+  FastClick.attach(document.body);
+});
+```
+
+
+### Run and build
+Cordova takes the ```www``` folder source to create the Cordova app. This ```www``` folder is a symlink to the ```dist``` folder.
+So make sure you run for example ```npm run build``` first before runing/buildinga Cordova app.
+
+###
+
+
+
+### Configs
+
+bounce
+
+### Plugins
+
+

TODO.ms

@@ -5,9 +5,14 @@
 [X] Add google design icons with npm
 [X] Add config mgmt
 [X] Add logging system
-[ ] Add cordova
-[ ] Add travis
-[ ] Add greenkeeper
+[X] Animation
+[X] Layout Wrapper
 [X] Remove Bootstrap
 [X] Add bootstrap manual to the readme
-[X] Add all important libs like moment, lodash ...
+[X] Add all important libs like moment, lodash ...
+[ ] Add custome attribute example
+[ ] Add service example
+[X] Add cordova
+[ ] Add cordova docu and helpers and stuff
+[X] Add travis
+[ ] Add greenkeeper

config/config-globals.js

@@ -8,15 +8,14 @@ const webpack = require('webpack');
 /**
  * Global lib config
  */
-const configGlobal = function (level) {
-  return {
+const configGlobal = function(level) {
+	return {
 		plugins: [
 			new webpack.ProvidePlugin({
 				'moment': 'moment',
-				'_': 'lodash',
-				'Hammer': 'hammerjs'
+				'_': 'lodash'
 			})
 		]
-		};
+	};
 };
-module.exports = configGlobal;
+module.exports = configGlobal;

config/init-cordova.js

@@ -0,0 +1,35 @@
+const exec = require('child_process').exec;
+const ncp = require('ncp').ncp;
+const rimraf = require('rimraf');
+const fs = require('fs');
+const path = require('path');
+
+const pkg = require(path.join(process.cwd(), 'package.json'));
+const cordovaTemp = path.join(process.cwd(), 'cordova');
+const cordovaTarget = path.join(process.cwd());
+const cmd = `cordova create ${cordovaTemp} ch.w3tec.aurelia "${pkg.title}"`;
+
+// Run command to create cordova in a temporary directory
+exec(cmd, (error) => {
+  if (error) throw error;
+
+  // Copy cordova code to project root
+  ncp(`${cordovaTemp}`, cordovaTarget, (error, files) => {
+    if (error) throw error;
+
+    // Remove temporary directory
+    rimraf(cordovaTemp, (error) => {
+      if (error) throw error;
+
+      // Remove cordovas www folder
+      rimraf(`${cordovaTarget}/www`, (error) => {
+        if (error) throw error;
+
+        // Create symlink www to point to dist
+        fs.symlink(`${cordovaTarget}/dist`, `${cordovaTarget}/www`, 'dir', (error) => {
+          if (error) throw error;
+        });
+      });
+    });
+  });
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aurelia-ts-boilerplate",
   "title": "Aurelia TS Boilerplate",
-  "version": "1.0.0",
+  "version": "0.0.2",
   "description": "A starter kit for building a standard navigation-style app with Aurelia, typescript and webpack.",
   "main": "dist/app.js",
   "scripts": {
@@ -35,7 +35,8 @@
     "server:dev:hmr": "npm run server:dev -- --hot",
     "server:prod": "http-server dist --cors",
     "webpack": "cross-env ./node_modules/.bin/webpack",
-    "webpack-dev-server": "cross-env ./node_modules/.bin/webpack-dev-server"
+    "webpack-dev-server": "cross-env ./node_modules/.bin/webpack-dev-server",
+    "cordova:init": "node ./config/init-cordova.js"
   },
   "repository": {
     "type": "git",
@@ -51,10 +52,10 @@
   "author": "w3tec <info@w3tec.ch> (http://w3tec.ch/)",
   "contributors": [
     {
-      "name": "Gery Hirschfeld"
+      "name": "Gery Hirschfeld <gery.hirschfeld@w3tec.ch> (https://github.com/hirsch88)"
     },
     {
-      "name": "David Weber"
+      "name": "David Weber <david.weber@w3tec.ch> (https://github.com/dweber019)"
     }
   ],
   "bugs": {
@@ -70,13 +71,13 @@
   },
   "dependencies": {
     "animate.css": "^3.5.1",
-    "aurelia-animator-velocity": "^1.0.0",
+    "aurelia-animator-css": "^1.0.0",
     "aurelia-bootstrapper-webpack": "^1.0.0",
     "aurelia-event-aggregator": "^1.0.0",
     "aurelia-fetch-client": "^1.0.0",
     "aurelia-framework": "^1.0.2",
     "aurelia-history-browser": "^1.0.0",
-    "aurelia-i18n": "^1.1.1",
+    "aurelia-i18n": "git+https://a6a36e9d3ce3276f41c6a077296f46d12c271954:x-oauth-basic@github.com/w3tecch/i18n.git",
     "aurelia-loader-webpack": "^1.0.2",
     "aurelia-logging-console": "^1.0.0",
     "aurelia-materialize-bridge": "^0.13.0",
@@ -89,13 +90,13 @@
     "aurelia-templating-router": "^1.0.0",
     "aurelia-validation": "^0.11.0",
     "bluebird": "^3.4.3",
-    "hammerjs": "^2.0.8",
+    "intl": "^1.2.4",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "2.2.4",
     "lodash": "^4.15.0",
+    "material-design-icons": "3.0.0",
     "materialize-css": "^0.97.7",
-    "moment": "^2.14.1",
-    "material-design-icons": "3.0.0"
+    "moment": "^2.14.1"
   },
   "devDependencies": {
     "@easy-webpack/config-aurelia": "^2.2.0",
@@ -141,7 +142,7 @@
     "karma-remap-istanbul": "^0.2.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
-    "minimist": "^1.2.0",
+    "ncp": "^2.0.0",
     "node-sass": "^3.8.0",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.12",

src/app/app.html

@@ -1,9 +1,15 @@
 <template>
-  <require from="./common/nav-bar.html"></require>
 
-  <nav-bar router.bind="router"></nav-bar>
+  <header>
+    <nav-bar router.bind="router"></nav-bar>
+  </header>
 
-  <div class="container">
-    <router-view></router-view>
-  </div>
-</template>
+  <main>
+    <div class="container">
+      <router-view swap-order="after"></router-view>
+    </div>
+  </main>
+
+  <footer-bar></footer-bar>
+
+</template>

src/app/app.ts

@@ -1,15 +1,40 @@
+import { inject } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
+import { I18N } from 'aurelia-i18n';
 
+@inject(I18N)
 export class App {
   private router: Router;
 
+  constructor(
+    private i18n: I18N
+  ) { }
+
   public configureRouter(config: RouterConfiguration, router: Router): void {
-    config.title = 'Aurelia';
+    config.title = this.i18n.tr('SITE_TITLE');
     config.options.pushState = true;
     config.map([
-      { route: ['', 'welcome'], name: 'welcome',      moduleId: './modules/welcome/welcome',      nav: true, title: 'Welcome' },
-      { route: 'users',         name: 'users',        moduleId: './modules/users/users',        nav: true, title: 'Github Users' },
-      { route: 'child-router',  name: 'child-router', moduleId: './modules/child-router/child-router', nav: true, title: 'Child Router' }
+      {
+        route: ['', 'welcome'],
+        name: 'welcome',
+        moduleId: './modules/welcome/welcome',
+        nav: true,
+        title: this.i18n.tr('WELCOME.TITLE')
+      },
+      {
+        route: 'users',
+        name: 'users',
+        moduleId: './modules/users/users',
+        nav: true,
+        title: this.i18n.tr('GIT_USERS.TITLE')
+      },
+      {
+        route: 'child-router',
+        name: 'child-router',
+        moduleId: './modules/child-router/child-router',
+        nav: true,
+        title: this.i18n.tr('CHILD_ROUTER.TITLE')
+      }
     ]);
 
     this.router = router;