diff --git a/.gitignore b/.gitignore index bf178b8..10674fa 100644 --- a/.gitignore +++ b/.gitignore @@ -16,8 +16,6 @@ log.txt coverage/ bower_components/ dist/ -hooks/after_prepare/010_add_platform_class.js -resources/ node_modules/ tmp/ temp/ diff --git a/app/components/clickerButton/clickerButton.ts b/app/components/clickerButton/clickerButton.ts index 320ac0f..5363175 100644 --- a/app/components/clickerButton/clickerButton.ts +++ b/app/components/clickerButton/clickerButton.ts @@ -1,15 +1,12 @@ 'use strict'; -import { Component, View } from 'angular2/core'; -import { Button } from 'ionic-angular'; -import { Clickers } from '../../services/clickers'; +import { Component } from 'angular2/core'; +import { Button } from 'ionic-angular'; +import { Clickers } from '../../services/clickers'; @Component({ selector: 'clicker-button', inputs: ['clicker: clicker'], -}) - -@View({ templateUrl: 'build/components/clickerButton/clickerButton.html', directives: [Button], }) diff --git a/app/components/clickerForm/clickerForm.ts b/app/components/clickerForm/clickerForm.ts index f4d52f4..99c755e 100644 --- a/app/components/clickerForm/clickerForm.ts +++ b/app/components/clickerForm/clickerForm.ts @@ -1,16 +1,13 @@ 'use strict'; import { AbstractControl, ControlGroup, FormBuilder, Validators } from 'angular2/common'; -import { Component, View } from 'angular2/core'; +import { Component } from 'angular2/core'; import { Button, Icon, Item, Label, TextInput } from 'ionic-angular'; import { Clickers } from '../../services/clickers'; import { Utils } from '../../services/utils'; @Component({ selector: 'clicker-form', -}) - -@View({ templateUrl: 'build/components/clickerForm/clickerForm.html', directives: [Button, Icon, Item, Label, TextInput], }) diff --git a/app/pages/clickerList/clickerList.e2e.ts b/app/pages/clickerList/clickerList.e2e.ts index 2ae9e26..87af7f2 100644 --- a/app/pages/clickerList/clickerList.e2e.ts +++ b/app/pages/clickerList/clickerList.e2e.ts @@ -13,7 +13,6 @@ describe('ClickerList', () => { it('should switch into clickers page from menu', () => { element(by.css('.bar-button-menutoggle')).click(); - element.all(by.css('ion-label')).first().click(); expect(element.all(by.css('.toolbar-title')).last().getText()).toEqual('Clickers'); }); diff --git a/app/pages/clickerList/clickerList.spec.ts b/app/pages/clickerList/clickerList.spec.ts index 0c2cff2..2e4f0dc 100644 --- a/app/pages/clickerList/clickerList.spec.ts +++ b/app/pages/clickerList/clickerList.spec.ts @@ -24,6 +24,10 @@ class MockClass { public get(): any { return {}; } + + public getBoolean(): any { + return true; + } }; let clickerList: ClickerList = null; diff --git a/app/pages/page2/page2.e2e.ts b/app/pages/page2/page2.e2e.ts index d5146f6..83e8034 100644 --- a/app/pages/page2/page2.e2e.ts +++ b/app/pages/page2/page2.e2e.ts @@ -9,8 +9,10 @@ describe('Page2', () => { }); it('should have correct text when Goodbye Ionic is selected', () => { - element(by.css('.bar-button-menutoggle')).click(); - element.all(by.css('ion-label')).last().click(); - expect(message.getText()).toEqual('Bye!'); + element(by.css('.bar-button-menutoggle')).click().then(() => { + browser.driver.sleep(2000); // wait for the animation + element.all(by.css('ion-label')).last().click(); + expect(message.getText()).toEqual('Bye!'); + }); }); }); diff --git a/app/services/clickers.ts b/app/services/clickers.ts index 31a048c..2cf448d 100644 --- a/app/services/clickers.ts +++ b/app/services/clickers.ts @@ -28,8 +28,12 @@ export class Clickers { let ids: Array = []; this.storage.get('ids') // return the promise so we can chain initClickers .then((rawIds: string) => { - // ids are stored as stringified JSON array - ids = JSON.parse(rawIds) || []; + if (rawIds) { + // ids are stored as stringified JSON array + ids = JSON.parse(rawIds); + } else { + ids = []; + } }) .then(() => resolve(ids)); }); diff --git a/app/theme/app.variables.scss b/app/theme/app.variables.scss index dfa9f7c..e957916 100644 --- a/app/theme/app.variables.scss +++ b/app/theme/app.variables.scss @@ -1,5 +1,10 @@ // http://ionicframework.com/docs/v2/theming/ +// Ionic Shared Functions +// -------------------------------------------------- +// Makes Ionic Sass functions available to your App + +@import 'globals.core'; // App Shared Variables // -------------------------------------------------- diff --git a/config.xml b/config.xml index a884629..d64faba 100644 --- a/config.xml +++ b/config.xml @@ -1,6 +1,6 @@ - V2 Test + Clicker An Ionic Framework and Cordova project. Ionic Framework Team @@ -29,7 +29,7 @@ - + diff --git a/gulpfile.js b/gulpfile.js index bf480d0..e45860f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,41 +1,61 @@ - - var gulp = require('gulp'), gulpWatch = require('gulp-watch'), del = require('del'), + runSequence = require('run-sequence'), argv = process.argv; + +/** + * Ionic hooks + * Add ':before' or ':after' to any Ionic project command name to run the specified + * tasks before or after the command. + */ +gulp.task('serve:before', ['watch']); +gulp.task('emulate:before', ['build']); +gulp.task('deploy:before', ['build']); +gulp.task('build:before', ['build']); + +// we want to 'watch' when livereloading +var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; +gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); + /** * Ionic Gulp tasks, for more information on each see * https://github.com/driftyco/ionic-gulp-tasks + * + * Using these will allow you to stay up to date if the default Ionic 2 build + * changes, but you are of course welcome (and encouraged) to customize your + * build however you see fit. */ -var buildWebpack = require('ionic-gulp-webpack-build'); +var buildBrowserify = require('ionic-gulp-browserify-typescript'); var buildSass = require('ionic-gulp-sass-build'); var copyHTML = require('ionic-gulp-html-copy'); var copyFonts = require('ionic-gulp-fonts-copy'); +var copyScripts = require('ionic-gulp-scripts-copy'); -gulp.task('watch', ['sass', 'html', 'fonts'], function(){ - gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); - gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); - return buildWebpack({ watch: true }); +gulp.task('watch', ['clean'], function(done){ + runSequence( + ['sass', 'html', 'fonts', 'scripts'], + function(){ + gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); + gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); + buildBrowserify({ watch: true }).on('end', done); + } + ); +}); + +gulp.task('build', ['clean'], function(done){ + runSequence( + ['sass', 'html', 'fonts', 'scripts'], + function(){ + buildBrowserify().on('end', done); + } + ); }); -gulp.task('build', ['sass', 'html', 'fonts'], buildWebpack); gulp.task('sass', buildSass); gulp.task('html', copyHTML); gulp.task('fonts', copyFonts); -gulp.task('clean', function(done){ - del('www/build', done); +gulp.task('scripts', copyScripts); +gulp.task('clean', function(){ + return del('www/build'); }); - -/** - * Ionic hooks - * Add ':before' or ':after' to any Ionic project command name to run the specified - * tasks before or after the command. - */ -gulp.task('serve:before', ['watch']); -gulp.task('emulate:before', ['build']); -gulp.task('deploy:before', ['build']); - -// we want to 'watch' when livereloading -var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; -gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); \ No newline at end of file diff --git a/hooks/README.md b/hooks/README.md new file mode 100644 index 0000000..62e58b4 --- /dev/null +++ b/hooks/README.md @@ -0,0 +1,196 @@ + +# Cordova Hooks + +Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: +* Application hooks from `/hooks`; +* Application hooks from `config.xml`; +* Plugin hooks from `plugins/.../plugin.xml`. + +__Remember__: Make your scripts executable. + +__Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. + +## Supported hook types +The following hook types are supported: + + after_build/ + after_compile/ + after_docs/ + after_emulate/ + after_platform_add/ + after_platform_rm/ + after_platform_ls/ + after_plugin_add/ + after_plugin_ls/ + after_plugin_rm/ + after_plugin_search/ + after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed + after_prepare/ + after_run/ + after_serve/ + before_build/ + before_compile/ + before_docs/ + before_emulate/ + before_platform_add/ + before_platform_rm/ + before_platform_ls/ + before_plugin_add/ + before_plugin_ls/ + before_plugin_rm/ + before_plugin_search/ + before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed + before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled + before_prepare/ + before_run/ + before_serve/ + pre_package/ <-- Windows 8 and Windows Phone only. + +## Ways to define hooks +### Via '/hooks' directory +To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: + + # script file will be automatically executed after each build + hooks/after_build/after_build_custom_action.js + + +### Config.xml + +Hooks can be defined in project's `config.xml` using `` elements, for example: + + + + + + + + + + ... + + + + + + + ... + + +### Plugin hooks (plugin.xml) + +As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: + + + + + + + + ... + + +`before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. + +## Script Interface + +### Javascript + +If you are writing hooks in Javascript you should use the following module definition: +```javascript +module.exports = function(context) { + ... +} +``` + +You can make your scipts async using Q: +```javascript +module.exports = function(context) { + var Q = context.requireCordovaModule('q'); + var deferral = new Q.defer(); + + setTimeout(function(){ + console.log('hook.js>> end'); + deferral.resolve(); + }, 1000); + + return deferral.promise; +} +``` + +`context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: +```json +{ + "hook": "before_plugin_install", + "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", + "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", + "opts": { + "projectRoot":"C:\\path\\to\\the\\project", + "cordova": { + "platforms": ["wp8"], + "plugins": ["com.plugin.withhooks"], + "version": "0.21.7-dev" + }, + "plugin": { + "id": "com.plugin.withhooks", + "pluginInfo": { + ... + }, + "platform": "wp8", + "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" + } + }, + "cordova": {...} +} + +``` +`context.opts.plugin` object will only be passed to plugin hooks scripts. + +You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: +```javascript +var Q = context.requireCordovaModule('q'); +``` + +__Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. +For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. + +### Non-javascript + +Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: + +* CORDOVA_VERSION - The version of the Cordova-CLI. +* CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). +* CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) +* CORDOVA_HOOK - Path to the hook that is being executed. +* CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) + +If a script returns a non-zero exit code, then the parent cordova command will be aborted. + +## Writing hooks + +We highly recommend writing your hooks using Node.js so that they are +cross-platform. Some good examples are shown here: + +[http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) + +Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: + + #!/usr/bin/env [name_of_interpreter_executable] diff --git a/hooks/after_prepare/010_add_platform_class.js b/hooks/after_prepare/010_add_platform_class.js new file mode 100755 index 0000000..bda3e41 --- /dev/null +++ b/hooks/after_prepare/010_add_platform_class.js @@ -0,0 +1,94 @@ +#!/usr/bin/env node + +// Add Platform Class +// v1.0 +// Automatically adds the platform class to the body tag +// after the `prepare` command. By placing the platform CSS classes +// directly in the HTML built for the platform, it speeds up +// rendering the correct layout/style for the specific platform +// instead of waiting for the JS to figure out the correct classes. + +var fs = require('fs'); +var path = require('path'); + +var rootdir = process.argv[2]; + +function addPlatformBodyTag(indexPath, platform) { + // add the platform class to the body tag + try { + var platformClass = 'platform-' + platform; + var cordovaClass = 'platform-cordova platform-webview'; + + var html = fs.readFileSync(indexPath, 'utf8'); + + var bodyTag = findBodyTag(html); + if(!bodyTag) return; // no opening body tag, something's wrong + + if(bodyTag.indexOf(platformClass) > -1) return; // already added + + var newBodyTag = bodyTag; + + var classAttr = findClassAttr(bodyTag); + if(classAttr) { + // body tag has existing class attribute, add the classname + var endingQuote = classAttr.substring(classAttr.length-1); + var newClassAttr = classAttr.substring(0, classAttr.length-1); + newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; + newBodyTag = bodyTag.replace(classAttr, newClassAttr); + + } else { + // add class attribute to the body tag + newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); + } + + html = html.replace(bodyTag, newBodyTag); + + fs.writeFileSync(indexPath, html, 'utf8'); + + process.stdout.write('add to body class: ' + platformClass + '\n'); + } catch(e) { + process.stdout.write(e); + } +} + +function findBodyTag(html) { + // get the body tag + try{ + return html.match(/])(.*?)>/gi)[0]; + }catch(e){} +} + +function findClassAttr(bodyTag) { + // get the body tag's class attribute + try{ + return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; + }catch(e){} +} + +if (rootdir) { + + // go through each of the platform directories that have been prepared + var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); + + for(var x=0; x { gulp.task('test.build', (done: any) => { runSequence( - ['test.lint', 'test.clean'], + ['test.clean'], ['sass', 'fonts', 'html'], // these are hooks into ionic 'test.build.typescript', done diff --git a/test/karma.config.js b/test/karma.config.js index d89d688..8be1757 100644 --- a/test/karma.config.js +++ b/test/karma.config.js @@ -14,7 +14,7 @@ module.exports = function(config) { // list of files / patterns to load in the browser files: [ - 'node_modules/zone.js/dist/zone-microtask.js', + 'node_modules/zone.js/dist/zone.js', 'node_modules/zone.js/dist/long-stack-trace-zone.js', 'node_modules/zone.js/dist/jasmine-patch.js', 'node_modules/es6-module-loader/dist/es6-module-loader.js', diff --git a/typings.json b/typings.json index 67d6f56..96c8e67 100644 --- a/typings.json +++ b/typings.json @@ -1,28 +1,29 @@ { "ambientDependencies": { - "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160127022504", - "bluebird": "registry:dt/bluebird#2.0.0+20160209044412", - "chalk": "registry:dt/chalk#0.4.0+20160222065144", - "del": "registry:dt/del#2.2.0+20160209151603", - "es6-shim": "registry:dt/es6-shim#0.31.2+20160215162030", - "express": "registry:dt/express#4.0.0+20160208031452", - "glob": "registry:dt/glob#5.0.10+20150624063249", - "gulp": "registry:dt/gulp#3.8.0+20150825164847", - "gulp-load-plugins": "registry:dt/gulp-load-plugins#0.0.0+20151230112651", - "gulp-typescript": "registry:dt/gulp-typescript#0.0.0+20160122061535", + "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160317120654", + "bluebird": "registry:dt/bluebird#2.0.0+20160319051630", + "chalk": "registry:dt/chalk#0.4.0+20160317120654", + "del": "registry:dt/del#2.2.0+20160317120654", + "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", + "express": "registry:dt/express#4.0.0+20160317120654", + "express-serve-static-core": "registry:dt/express-serve-static-core#0.0.0+20160322035842", + "glob": "registry:dt/glob#5.0.10+20160317120654", + "gulp": "registry:dt/gulp#3.8.0+20160316155526", + "gulp-load-plugins": "registry:dt/gulp-load-plugins#0.0.0+20160316155526", + "gulp-typescript": "registry:dt/gulp-typescript#0.0.0+20160317120654", "gulp-util": "registry:dt/gulp-util#3.0.0+20141016163602", - "jasmine": "registry:dt/jasmine#2.2.0+20160303225035", - "karma": "registry:dt/karma#0.13.9+20151121143311", - "log4js": "registry:dt/log4js#0.0.0+20160115192620", - "mime": "registry:dt/mime#0.0.0+20151204023458", - "minimatch": "registry:dt/minimatch#2.0.8+20150624135803", - "node": "registry:dt/node#4.0.0+20160226132328", - "orchestrator": "registry:dt/orchestrator#0.0.0+20150821143159", - "q": "registry:dt/q#0.0.0+20160215162030", - "run-sequence": "registry:dt/run-sequence#0.0.0+20150825164847", - "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20150825165336", + "jasmine": "registry:dt/jasmine#2.2.0+20160412134438", + "karma": "registry:dt/karma#0.13.9+20160316155526", + "log4js": "registry:dt/log4js#0.0.0+20160316155526", + "mime": "registry:dt/mime#0.0.0+20160316155526", + "minimatch": "registry:dt/minimatch#2.0.8+20160317120654", + "node": "registry:dt/node#4.0.0+20160412142033", + "orchestrator": "registry:dt/orchestrator#0.0.0+20160316155526", + "q": "registry:dt/q#0.0.0+20160323171452", + "run-sequence": "registry:dt/run-sequence#0.0.0+20160316155526", + "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654", "serve-static": "registry:dt/serve-static#1.7.1+20160104095738", - "through2": "registry:dt/through2#2.0.0+20160127111735", - "vinyl": "registry:dt/vinyl#1.1.0+20160214195658" + "through2": "registry:dt/through2#2.0.0+20160317120654", + "vinyl": "registry:dt/vinyl#1.1.0+20160316155526" } } diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 298a496..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,48 +0,0 @@ -var path = require('path'); - - -module.exports = { - entry: [ - path.normalize('es6-shim/es6-shim.min'), - 'reflect-metadata', - path.normalize('zone.js/dist/zone-microtask'), - path.resolve('app/app') - ], - output: { - path: path.resolve('www/build/js'), - filename: 'app.bundle.js', - pathinfo: false // show module paths in the bundle, handy for debugging - }, - module: { - loaders: [ - { - test: /\.ts$/, - loader: 'awesome-typescript', - query: { - doTypeCheck: true, - resolveGlobs: false, - externals: ['typings/browser.d.ts'] - }, - include: path.resolve('app'), - exclude: /node_modules/ - }, - { - test: /\.js$/, - include: path.resolve('node_modules/angular2'), - loader: 'strip-sourcemap' - } - ], - noParse: [ - /es6-shim/, - /reflect-metadata/, - /zone\.js(\/|\\)dist(\/|\\)zone-microtask/ - ] - }, - resolve: { - root: ['app'], - alias: { - 'angular2': path.resolve('node_modules/angular2') - }, - extensions: ["", ".js", ".ts"] - } -}; diff --git a/www/index.html b/www/index.html index 56a2470..f0afdb6 100644 --- a/www/index.html +++ b/www/index.html @@ -1,9 +1,11 @@ - + - Ionic + Ionic + + @@ -11,9 +13,14 @@ + + + + + - \ No newline at end of file +