diff --git a/gulpfile.js b/gulpfile.js index 7be7385fa3..16c6d4e8f6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,9 +27,12 @@ var traceur = require('gulp-traceur') require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig) -gulp.task('default', ['build', 'lib', 'e2e']) +gulp.task('default', ['clean'], function() { + gulp.run('build') +}) + +gulp.task('build', ['e2e', 'ionic-js', 'lib', 'sass']) -gulp.task('build', ['sass', 'ionic-js']) gulp.task('lib', ['ng2', 'fonts', 'dependencies']) gulp.task('watch', ['default'], function() { @@ -78,36 +81,89 @@ gulp.task('clean', function(done) { del([buildConfig.dist], done) }) -gulp.task('e2e', ['build'], function() { +gulp.task('e2e', ['ionic-js', 'sass'], function() { var indexContents = _.template( fs.readFileSync('scripts/e2e/index.template.html') )({ buildConfig: buildConfig - }) + }); + var platformJsTemplate = _.template( fs.readFileSync('scripts/e2e/platform.template.js') ) var testTemplate = _.template( fs.readFileSync('scripts/e2e/e2e.template.js') ) - return gulp.src(buildConfig.src.e2e) - .pipe(rename(function(file) { - file.dirname = file.dirname.replace('/test/', '/') - })) - .pipe(gulpif(/main.html$/, through2.obj(function(file, enc, next) { - var indexClone = _.clone(file) - this.push(new VinylFile(_.assign(indexClone, { - contents: new Buffer(indexContents), - path: file.path.replace(/main.html$/, 'index.html'), - }))) - next(null, file) - }))) - .pipe(gulpif(/.e2e.js$/, through2.obj(function(file, enc, next) { - var relativePath = path.dirname(file.path.replace(/^.*?src.components/, '')) - var contents = file.contents.toString() - contents = testTemplate({ - contents: contents, - buildConfig: buildConfig, - relativePath: relativePath + var platforms = [ + 'android', + 'default', + 'ios', + ] + + return gulp.src(buildConfig.src.e2eTest) + .pipe(through2.obj(function(file, enc, next) { + var self = this + gulp.src(file.path + '/**/*', { + base: file.path }) - file.contents = new Buffer(contents) - next(null, file) - }))) - .pipe(gulpif({ isFile: true }, gulp.dest(buildConfig.dist + '/e2e'))) + .pipe(gulpif(/main.html$/, processMainHtml())) + .on('data', function(file) { + if (file.stat && !file.stat.isFile()) return; + + file.path = file.path.replace(/(\\|\/)test/, '') + file.base = path.join(__dirname, 'src', 'components'); + var dirname = path.dirname(file.path) + var basename = path.basename(file.path); + + platforms.forEach(function(platform) { + var platformDir = dirname + '-' + platform; + var platformFilePath = file.path.replace(dirname, platformDir); + self.push(new VinylFile({ + path: platformFilePath, + base: file.base, + contents: file.contents.slice() + })); + + // Add a new platform.js file beside each index.html + if (basename === 'index.html') { + self.push(new VinylFile({ + path: platformFilePath.replace(/index.html$/, 'platform.js'), + base: file.base, + contents: new Buffer(platformJsTemplate({ + platform: platform + })) + })) + } + }) + }) + .on('end', next) + + function processMainHtml() { + return through2.obj(function(file, enc, next) { + this.push(new VinylFile({ + base: file.base, + contents: new Buffer(indexContents), + path: file.path.replace(/main.html$/, 'index.html'), + })) + next(null, file) + }) + } + })) + .pipe(gulp.dest(buildConfig.dist + '/e2e')); + // .pipe(gulpif(/main.html$/, through2.obj(function(file, enc, next) { + // var indexClone = _.clone(file) + // this.push(new VinylFile(_.assign(indexClone, { + // contents: new Buffer(indexContents), + // path: file.path.replace(/main.html$/, 'index.html'), + // }))) + // next(null, file) + // }))) + // .pipe(gulpif(/e2e.js$/, through2.obj(function(file, enc, next) { + // var relativePath = path.dirname(file.path.replace(/^.*?src.components/, '')) + // var contents = file.contents.toString() + // contents = testTemplate({ + // contents: contents, + // buildConfig: buildConfig, + // relativePath: relativePath + // }) + // file.contents = new Buffer(contents) + // next(null, file) + // }))) + // .pipe(gulpif({ isFile: true }, gulp.dest(buildConfig.dist + '/e2e'))) }) // Take es6 files from angular2's output, rename to js, and move to dist/lib/ diff --git a/scripts/build/config.js b/scripts/build/config.js index 86513d7fb9..2fc8f464c3 100644 --- a/scripts/build/config.js +++ b/scripts/build/config.js @@ -2,9 +2,10 @@ module.exports = { dist: 'dist', distLib: 'dist/lib', src: { - test: ['src/**/test/*.spec.js'], + spec: ['src/**/test/*.spec.js'], js: ['src/**/*.js', '!src/**/test/**/*.js'], - e2e: ['src/components/*/test/*/**/*'], + e2eTest: ['src/components/*/test/*/'], + e2e: ['src/components/*/test/**/*'], html: 'src/**/*.html', scss: 'src/components/**/*.scss', }, diff --git a/scripts/e2e/index.template.html b/scripts/e2e/index.template.html index 390939f13f..21be5b6f74 100644 --- a/scripts/e2e/index.template.html +++ b/scripts/e2e/index.template.html @@ -19,6 +19,7 @@ } }) + diff --git a/scripts/e2e/platform.template.js b/scripts/e2e/platform.template.js new file mode 100644 index 0000000000..b3ab2abd3d --- /dev/null +++ b/scripts/e2e/platform.template.js @@ -0,0 +1,2 @@ +//TODO find a better override than window +window.IONIC_PLATFORM = '<%= platform %>'; diff --git a/src/components/aside/aside.js b/src/components/aside/aside.js index a572a4a215..5a90efc5df 100644 --- a/src/components/aside/aside.js +++ b/src/components/aside/aside.js @@ -3,6 +3,22 @@ import {ComponentConfig} from 'ionic2/config/component-config' import * as types from 'ionic2/components/aside/extensions/types' import * as gestures from 'ionic2/components/aside/extensions/gestures'; +export let AsideConfig = new ComponentConfig('aside') + +AsideConfig.classes('side', 'type') + +AsideConfig.delegate('gesture') + .when({side: 'left'}, gestures.LeftAsideGesture) + .when({side: 'right'}, gestures.RightAsideGesture) + .when({side: 'top'}, gestures.TopAsideGesture) + .when({side: 'bottom'}, gestures.BottomAsideGesture) + +AsideConfig.delegate('type') + .when({type: 'overlay'}, types.AsideTypeOverlay) + .when({type: 'push'}, types.AsideTypePush) + .when({type: 'reveal'}, types.AsideTypeReveal) + + @Component({ selector: 'ion-aside', bind: { @@ -59,19 +75,3 @@ export class Aside { } } } - -export let AsideConfig = new ComponentConfig(Aside) - -AsideConfig.classes('side', 'type') - -AsideConfig.delegate('gesture') - .when({side: 'left'}, gestures.LeftAsideGesture) - .when({side: 'right'}, gestures.RightAsideGesture) - .when({side: 'top'}, gestures.TopAsideGesture) - .when({side: 'bottom'}, gestures.BottomAsideGesture) - -AsideConfig.delegate('type') - .when({type: 'overlay'}, types.AsideTypeOverlay) - .when({type: 'push'}, types.AsideTypePush) - .when({type: 'reveal'}, types.AsideTypeReveal) - diff --git a/src/components/checkbox/checkbox.html b/src/components/checkbox/checkbox.html new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/checkbox/checkbox.html @@ -0,0 +1 @@ + diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js index e69de29bb2..0e11da3587 100644 --- a/src/components/checkbox/checkbox.js +++ b/src/components/checkbox/checkbox.js @@ -0,0 +1,50 @@ +import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2'; +import {ComponentConfig} from 'ionic2/config/component-config'; + +export let CheckboxConfig = new ComponentConfig('checkbox'); + +@Component({ + selector: 'ion-checkbox', + bind: { + checked: 'checked' + }, + events: { + 'click': 'onClick' + }, + services: [CheckboxConfig] +}) +@Template({ + inline: ` +
+ + +
+ +
+ +
+ +
+ +
` +}) +export class Checkbox { + constructor( + @PropertySetter('attr.role') setRole: Function, + @PropertySetter('attr.aria-checked') setChecked: Function, + @PropertySetter('attr.aria-invalid') setInvalid: Function, + @PropertySetter('attr.aria-disabled') setDisabled: Function, + configFactory: CheckboxConfig, + element: NgElement + ) { + this.domElement = element.domElement; + this.domElement.classList.add('item'); + this.config = configFactory.create(this); + + setRole('checkbox'); + setChecked('true') + setInvalid('false'); + setDisabled('false'); + } +} + diff --git a/src/components/checkbox/extensions/ios.scss b/src/components/checkbox/extensions/ios.scss index abccf6bbca..a11300ad4e 100644 --- a/src/components/checkbox/extensions/ios.scss +++ b/src/components/checkbox/extensions/ios.scss @@ -5,7 +5,7 @@ $checkbox-ios-color: #007aff; -.list-ios { +.checkbox-ios { .media-checkbox { min-width: 20px; diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html index 0678d96d64..a03abd0a75 100644 --- a/src/components/checkbox/test/basic/main.html +++ b/src/components/checkbox/test/basic/main.html @@ -5,85 +5,23 @@
-
+ + Some Checkboxes + + + Apples + -
- iOS Checkboxes -
+ + Bananas + -
+ + Oranges + - - - - - - - - - - - - - -
- -
+
diff --git a/src/components/checkbox/test/basic/main.js b/src/components/checkbox/test/basic/main.js index 7c2f5654c5..02129ab623 100644 --- a/src/components/checkbox/test/basic/main.js +++ b/src/components/checkbox/test/basic/main.js @@ -3,12 +3,13 @@ import {Component, Template} from 'angular2/angular2'; import {View} from 'ionic2/components/view/view'; import {Content} from 'ionic2/components/content/content'; import {Icon} from 'ionic2/components/icon/icon'; - +import {Checkbox} from 'ionic2/components/checkbox/checkbox'; +import {List} from 'ionic2/components/list/list'; @Component({ selector: '[ion-app]' }) @Template({ url: 'main.html', - directives: [View, Content, Icon] + directives: [View, Content, Icon, Checkbox, List] }) class IonicApp { constructor() { diff --git a/src/components/list/list.js b/src/components/list/list.js index 5c694bf13f..207f927ed7 100644 --- a/src/components/list/list.js +++ b/src/components/list/list.js @@ -1,7 +1,11 @@ import {NgElement, Component, Template} from 'angular2/angular2' +import {ComponentConfig} from 'ionic2/config/component-config'; + +export let ListConfig = new ComponentConfig('list'); @Component({ - selector: 'ion-list' + selector: 'ion-list', + services: [ListConfig] }) @Template({ inline: ` @@ -10,13 +14,18 @@ import {NgElement, Component, Template} from 'angular2/angular2'
-
` + ` + + ` }) export class List { - constructor(@NgElement() ele:NgElement) { - ele.domElement.classList.add('list') + constructor( + configFactory: ListConfig, + element: NgElement + ) { + this.domElement = element.domElement; + configFactory.create(this); } } diff --git a/src/config/component-config.js b/src/config/component-config.js index 93601eac2d..f705bca638 100644 --- a/src/config/component-config.js +++ b/src/config/component-config.js @@ -11,9 +11,8 @@ MyConfig.delegate('gesture') .when({side: 'top'}, TopAsideGesture) .when({side: 'bottom'}, BottomAsideGesture) */ -export function ComponentConfig(ComponentConstructor) { - let componentCssName = util.pascalCaseToDashCase(ComponentConstructor.name) - +export function ComponentConfig(componentCssName) { + let platformName = platform.get().name; return class Config { static classes() { Config.classProperties || (Config.classProperties = []) @@ -49,6 +48,7 @@ export function ComponentConfig(ComponentConstructor) { create(instance) { instance.domElement.classList.add(componentCssName) + instance.domElement.classList.add(`${componentCssName}-${platformName}`) for (let i = 0; i < (Config.classProperties || []).length; i++) { let propertyValue = instance[Config.classProperties[i]] instance.domElement.classList.add(`${componentCssName}-${propertyValue}`) diff --git a/src/platform/platform.js b/src/platform/platform.js index 0ee6fd5ebd..d8b8314b8c 100644 --- a/src/platform/platform.js +++ b/src/platform/platform.js @@ -46,14 +46,15 @@ var ua = window.navigator.userAgent; platform.register({ name: 'android', matcher() { - return /android/i.test(ua); + //TODO Make a better override than window + return window.IONIC_PLATFORM == 'android' || /android/i.test(ua); } }); platform.register({ name: 'ios', // For now always default to ios matcher() { - return true; + return window.IONIC_PLATFORM === 'ios'; } });