javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

e2e: make examples build per-platform

Browse Source
This commit is contained in:
Andrew
2015-03-27 15:27:03 -06:00
parent dec338e234
commit 042c567a50
13 changed files with 193 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
gulpfile.js
View File

@ -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/', '/')
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
})
.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
}))
.pipe(gulpif(/main.html$/, through2.obj(function(file, enc, next) {
var indexClone = _.clone(file)
this.push(new VinylFile(_.assign(indexClone, {
}))
}
})
})
.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(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')))
}
}))
.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/

5
scripts/build/config.js
View File

@ -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',
},

1
scripts/e2e/index.template.html
View File

@ -19,6 +19,7 @@
}
})
</script>
<script src="platform.js"></script>
</head>
<body ion-app>
</body>

2
scripts/e2e/platform.template.js Normal file
View File

@ -0,0 +1,2 @@
//TODO find a better override than window
window.IONIC_PLATFORM = '<%= platform %>';

32
src/components/aside/aside.js
View File

@ -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)

1
src/components/checkbox/checkbox.html Normal file
View File

@ -0,0 +1 @@

50
src/components/checkbox/checkbox.js
View File

@ -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: `
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
<content></content>
</div>
</div>`
})
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');
}
}

2
src/components/checkbox/extensions/ios.scss
View File

@ -5,7 +5,7 @@
$checkbox-ios-color: #007aff;
.list-ios {
.checkbox-ios {
.media-checkbox {
min-width: 20px;

80
src/components/checkbox/test/basic/main.html
View File

@ -5,85 +5,23 @@
<div class="content" style="background: #efeff4">
<div class="list list-ios">
<ion-list>
<ion-list-header>Some Checkboxes</ion-list-header>
<div class="list-header">
iOS Checkboxes
</div>
<div class="list-content">
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
<ion-checkbox>
Apples
</div>
</ion-checkbox>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="false"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
<ion-checkbox>
Bananas
</div>
</ion-checkbox>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
<ion-checkbox>
Oranges
</div>
</div>
</div>
</ion-checkbox>
</div>
</div>
</ion-list>
</div>

5
src/components/checkbox/test/basic/main.js
View File

@ -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() {

19
src/components/list/list.js
View File

@ -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'
</header>
<div class="list-content">
<content></content>
</div>`
</div>
<footer class="list-footer">
<content select="ion-list-footer"></content>
</footer>`
</footer>
`
})
export class List {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('list')
constructor(
configFactory: ListConfig,
element: NgElement
) {
this.domElement = element.domElement;
configFactory.create(this);
}
}

6
src/config/component-config.js
View File

@ -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}`)

5
src/platform/platform.js
View File

@ -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';
}
});