chore: allow you to use ionic!

This commit is contained in:
Andrew
2015-03-17 19:25:55 -05:00
parent df34a33736
commit 9e3d601ff9
32 changed files with 214 additions and 86 deletions

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules
.DS_Store
dist

114
gulpfile.js Normal file
View File

@ -0,0 +1,114 @@
/////
// Mostly stolen from https://github.com/pkozlowski-opensource/ng2-play
/////
var gulp = require('gulp');
var gulpif = require('gulp-if');
var del = require('del');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var traceur = require('gulp-traceur');
var lazypipe = require('lazypipe');
var config = {
dist: 'dist',
src: {
js: 'src/**/*.js',
html: 'src/**/*.html',
playgroundJs: 'playground/**/*.js',
playgroundFiles: ['playground/**/*', '!playground/**/*.js'],
},
lib: [
'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js',
'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
'node_modules/systemjs/lib/extension-register.js',
'node_modules/angular2/node_modules/zone.js/zone.js',
]
};
gulp.task('default', ['js', 'html', 'libs', 'playgroundJs', 'playgroundFiles']);
gulp.task('watch', ['default'], function () {
var http = require('http');
var connect = require('connect');
var serveStatic = require('serve-static');
var open = require('open');
var port = 9000;
gulp.watch(config.src.html, ['html']);
gulp.watch(config.src.js, ['js']);
gulp.watch(config.src.playgroundJs, ['playgroundJs']);
gulp.watch(config.src.playgroundFiles, ['playgroundFiles']);
var app = connect().use(serveStatic(__dirname + '/' + config.dist)); // serve everything that is static
http.createServer(app).listen(port);
console.log('Serving `dist` on http://localhost:' + port);
});
gulp.task('clean', function(done) {
del([config.dist], done);
});
gulp.task('playgroundFiles', function() {
return gulp.src(config.src.playgroundFiles)
.pipe(gulp.dest(config.dist));
});
gulp.task('playgroundJs', function() {
return gulp.src(config.src.playgroundJs)
.pipe(traceurCompile())
.pipe(gulp.dest(config.dist));
});
function traceurCompile() {
return lazypipe()
.pipe(rename, {extname: ''}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
.pipe(plumber)
.pipe(traceur, {
modules: 'instantiate',
moduleName: true,
annotations: true,
types: true
})
.pipe(rename, {extname: '.js'}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
();
}
gulp.task('js', function () {
return gulp.src(config.src.js)
.pipe(rename(function(file) {
// Forces the files to register themselves with 'ionic' prefix
file.dirname = 'ionic/' + file.dirname;
}))
.pipe(traceurCompile())
// compiled js files in playground go to the playground root, everything else goes in /ionic
.pipe(gulp.dest('dist'));
});
gulp.task('html', function () {
// Don't do anything with html for now
// return gulp.src(config.src.html)
// .pipe(gulp.dest(config.dist));
});
gulp.task('libs', ['angular2'], function () {
return gulp.src(config.lib)
.pipe(gulp.dest('dist/lib'));
});
gulp.task('angular2', function () {
//transpile & concat
return gulp.src([
'node_modules/angular2/es6/prod/*.es6',
'node_modules/angular2/es6/prod/src/**/*.es6'
], {
base: 'node_modules/angular2/es6/prod'
})
.pipe(rename(function(path){
path.dirname = 'angular2/' + path.dirname; //this is not ideal... but not sure how to change angular's file structure
path.extname = ''; //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
}))
.pipe(traceur({ modules: 'instantiate', moduleName: true}))
.pipe(concat('angular2.js'))
.pipe(gulp.dest('dist/lib'));
});

24
package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "ionic2",
"version": "0.0.0",
"devDependencies": {
"connect": "^3.3.4",
"del": "~1.1.1",
"gulp": "~3.8.10",
"gulp-concat": "~2.5.0",
"gulp-if": "^1.2.5",
"gulp-plumber": "^1.0.0",
"gulp-rename": "~1.2.0",
"gulp-traceur": "0.16.*",
"lazypipe": "^0.2.2",
"open": "0.0.5",
"serve-static": "~1.8.1",
"through2": "~0.6.3"
},
"dependencies": {
"angular2": "2.0.0-alpha.13",
"es6-module-loader": "~0.11.0",
"systemjs": "~0.11.0",
"zone.js": "0.4.1"
}
}

1
playground/app.html Normal file
View File

@ -0,0 +1 @@
<tabbar view-title="My Tabs"></tabbar>

31
playground/index.html Normal file
View File

@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ES6-related imports -->
<script src="lib/traceur-runtime.js"></script>
<script src="lib/es6-module-loader-sans-promises.src.js"></script>
<script src="lib/extension-register.js"></script>
<script>
register(System);
<!-- TODO: how to get rid of this line? -->
</script>
<!-- Angular2-related imports -->
<script src="lib/angular2.js"></script>
<script src="lib/zone.js"></script>
</head>
<body>
<playground-main>
Loading...
</playground-main>
</body>
<!-- Application bootstrap logic -->
<script>
System.import('./main');
</script>
</html>

12
playground/main.js Normal file
View File

@ -0,0 +1,12 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {Tabbar} from './ionic/components/tabbar/tabbar';
@Component({ selector: 'playground-main' })
@Template({
url: 'app.html',
directives: [Tabbar]
})
class PlaygroundMain {}
bootstrap(PlaygroundMain);

View File

@ -1,8 +1,20 @@
class Ion {
assign(...args) {
for (let obj of args) {
//...extend this
var ILLEGAL_ASSIGN_FIELDS = {};
export class Ion {
assign() {
for (var i = 1, ii = arguments.length; i < ii; i++) {
var obj = arguments[i];
if (obj) {
var keys = Object.keys(obj);
for (var j = 0, jj = keys.length; j < jj; j++) {
var key = keys[j];
if (!ILLEGAL_ASSIGN_FIELDS[key]) {
this[key] = obj[key];
}
}
}
}
}
}

View File

@ -1,4 +1,4 @@
/*
import {TabbarConfig} from '/components/tabbar/tabbar';
import {Draggable} from '/behaviors/draggable';
@ -15,6 +15,5 @@ TabbarConfig.platform('android')
});
});
/*
<ion-tabs config-platform-android />
*/

View File

@ -1,3 +1,14 @@
import {Component, Template} from 'angular2/angular2';
import {Ion} from '../ion';
class Tabbar extends Ion {
@Component({
selector: 'tabbar',
bind: {
title: 'view-title'
}
})
@Template({
inline: `<div>Tabbar: {{title}}</div>`
})
export class Tabbar extends Ion {
}

View File

@ -1,9 +0,0 @@
import {ButtonConfig} from './button-config';
import {AndroidButton} from './mixins/android/android-button';
import {LargeButton} from './mixins/android-button';
ButtonConfig.platform('android').mixin(AndroidButton);
ButtonConfig.media('lg').mixin(DesktopButton);
ButtonConfig.when('popBehavior').mixin(PopButton);

View File

@ -1,22 +0,0 @@
import { Component } from 'angular';
import { ButtonGroup } from '../components/button-group';
import { androidButton} from './platforms/android/android-button';
import { blockButton } from './block-button';
@Component({
selector: 'ion-button',
bind: {
isBlockButton: 'isBlockButton'
}
})
export class Button extends IonicComponent {
/* A button checks for a parent buttonGroup */
constructor(@Parent(ButtonGroup) buttonGroup) {
this.buttonGroup = buttonGroup;
super();
}
onPress() {
}
}
export var ButtonConfig = new IonicConfig('button');

View File

@ -1,14 +0,0 @@
import { ButtonConfig } from '/components/button';
ButtonConfig.platform('android')
.mixin(androidButtonMixin)
.className('button-android'); // This is the default
export default function androidButtonMixin(buttonInstance) {
Pannable(buttonInstance);
return {
onPanStart() {},
onPan() {},
onPanEnd() {}
};
}

View File

@ -1,3 +0,0 @@
.button.button-android {
border-radius: 5px;
}

View File

@ -1,25 +0,0 @@
import { ButtonConfig } from '/components/button';
ButtonConfig.decorator('popButton')
.mixin(popButtonMixin)
.className('button-pop');
function popButtonMixin(buttonInstance) {
return {
onRelease() {
alert('pop!');
}
};
}
/*
//instance config
<button [config]="{popButton: true}" />
<button config-pop-button />
import ButtonConfig
ButtonConfig.set({ popButton: true })
ButtonConfig.platform('lg').set({ popButton: true })
*/

View File

@ -1,6 +0,0 @@
.button.button-pop {
box-shadow: 0 9px 0 black;
&:active {
transform: translate3d(0, 2px, 0);
}
}