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

barely making it work

Browse Source
This commit is contained in:
Adam Bradley
2015-04-30 23:56:15 -05:00
parent 6cd4a797a3
commit a425061d90
19 changed files with 113 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
README.md
View File

@ -1,10 +1,4 @@
#### Test it out!
- Run `gulp watch` to build, serve, and watch Ionic & playground
- Run `gulp karma-watch` while gulp watch is running to watch tests.
- All test files must be suffixed with `.spec.js`. Don't put a test as a sibling of a normal file, or import will decide the `.spec.js`is the same as the `.js`.
#### Building & Running
- `gulp watch`
@ -14,82 +8,3 @@
to create more examples.
* The biggest thing to remember: your app has to import its dependencies with the `app/` prefix.
For example `import {Apple} from 'apple';` would import apple.js in your example app.
#### Build
- JSCS
- JSHint (or TypeScript variant)
#### Current Focus
Build/Angular2
- Build system
- Repo structure overlord
- ES6/Angular2/Component conventions
- Global/Attribute config system
- Dynamically assign behaviors/templates per config
HTML/CSS/Transitions
- Markup structure
- SCSS
- View transitions
- Core View History/Navigation system
- Routing
- Snapshot
Gestures
- Gesture system
- Linear constraints
- Auto layout
- Class/inheritance system
- Translate native concepts to the web
#### Make it so
```
<nav-view>
<aside left/>
<aside right/>
<aside top/>
<view cached/>
<view cached/>
<view cached/>
<tabs active>
<tab selected>
<nav-view>
<aside left/>
<aside right/>
<view active/>
<view cached/>
<view cached/>
</nav-view>
</tab>
<tab deselected>
<nav-view>
<aside/>
<view cached/>
<view active/>
<tabs cached>
<tab deselected>
<nav-view>
<aside left/>
<aside bottom/>
<view active/>
<view cached/>
<view cached/>
</nav-view>
</tab>
<tab selected>
<nav-view>
<view cached/>
<view active/>
</nav-view>
</tab>
</tab>
</nav-view>
</tab>
</tab>
<view cached/>
</nav-view>
```

32
ionic/components.js
View File

@ -1,24 +1,24 @@
// DON'T reference this file in the source. Only in demos.
export * from 'ionic/components/action-menu/action-menu'
export * from 'ionic/components/alert/alert'
// export * from 'ionic/components/action-menu/action-menu'
// export * from 'ionic/components/alert/alert'
export * from 'ionic/components/aside/aside'
export * from 'ionic/components/button/button'
export * from 'ionic/components/checkbox/checkbox'
// export * from 'ionic/components/button/button'
// export * from 'ionic/components/checkbox/checkbox'
export * from 'ionic/components/content/content'
export * from 'ionic/components/icon/icon'
export * from 'ionic/components/item/item'
export * from 'ionic/components/form/form'
export * from 'ionic/components/input/input'
export * from 'ionic/components/layout/layout'
export * from 'ionic/components/list/list'
// export * from 'ionic/components/icon/icon'
// export * from 'ionic/components/item/item'
// export * from 'ionic/components/form/form'
// export * from 'ionic/components/input/input'
// export * from 'ionic/components/layout/layout'
// export * from 'ionic/components/list/list'
export * from 'ionic/components/nav/nav'
export * from 'ionic/components/nav/nav-item'
export * from 'ionic/components/nav/decorators'
export * from 'ionic/components/radio/radio-button'
export * from 'ionic/components/radio/radio-group'
export * from 'ionic/components/search-bar/search-bar'
export * from 'ionic/components/split-view/split-view'
export * from 'ionic/components/switch/switch'
// export * from 'ionic/components/nav/decorators'
// export * from 'ionic/components/radio/radio-button'
// export * from 'ionic/components/radio/radio-group'
// export * from 'ionic/components/search-bar/search-bar'
// export * from 'ionic/components/split-view/split-view'
// export * from 'ionic/components/switch/switch'
export * from 'ionic/components/tabs/tabs'
export * from 'ionic/components/tabs/tab'
export * from 'ionic/components/toolbar/toolbar'

84
ionic/components/action-menu/action-menu.js
View File

@ -1,49 +1,49 @@
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
import {Icon} from 'ionic/components/icon/icon'
import {Item} from 'ionic/components/item/item'
// import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
// import {IonicComponent} from 'ionic/config/component'
// import {Icon} from 'ionic/components/icon/icon'
// import {Item} from 'ionic/components/item/item'
@Component({
selector: 'ion-action-menu'
})
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="action-menu-container">
// @Component({
// selector: 'ion-action-menu'
// })
// @NgView({
// template: `
// <div class="overlay-backdrop"></div>
// <div class="overlay-container">
// <div class="action-menu-container">
<div class="list-header">Action Menu List Header</div>
<div class="list">
<button ion-item class="item">
Button 1
</button>
<button ion-item class="item">
Button 2
</button>
</div>
// <div class="list-header">Action Menu List Header</div>
// <div class="list">
// <button ion-item class="item">
// Button 1
// </button>
// <button ion-item class="item">
// Button 2
// </button>
// </div>
<div class="list-header">Action Menu Label</div>
<div class="list">
<button ion-item class="item">Button 1</button>
<button ion-item class="item">Button 2</button>
</div>
// <div class="list-header">Action Menu Label</div>
// <div class="list">
// <button ion-item class="item">Button 1</button>
// <button ion-item class="item">Button 2</button>
// </div>
<div class="list">
<button ion-item class="item">Button 1</button>
</div>
// <div class="list">
// <button ion-item class="item">Button 1</button>
// </div>
</div>
</div>`,
directives: [Item,Icon]
})
export class ActionMenu {
constructor(
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.config = ActionMenu.config.invoke(this)
}
}
// </div>
// </div>`,
// directives: [Item,Icon]
// })
// export class ActionMenu {
// constructor(
// @NgElement() ngElement:NgElement
// ) {
// this.domElement = ngElement.domElement
// this.config = ActionMenu.config.invoke(this)
// }
// }
new IonicComponent(ActionMenu, {})
// new IonicComponent(ActionMenu, {})

1
ionic/components/action-menu/test/basic/e2e.js
View File

@ -1 +0,0 @@

62
ionic/components/alert/alert.js
View File

@ -1,34 +1,34 @@
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
// import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
// import {IonicComponent} from 'ionic/config/component'
@Component({
selector: 'ion-alert'
})
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="alert-container">
<div class="alert-header">
Do you like cookies?
</div>
<div class="alert-content">
Seriously, who does not like cookies.
</div>
<div class="alert-actions">
<button class="button">OK</button>
</div>
</div>
</div>`
})
export class Alert {
constructor(
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.config = Alert.config.invoke(this)
}
}
// @Component({
// selector: 'ion-alert'
// })
// @NgView({
// template: `
// <div class="overlay-backdrop"></div>
// <div class="overlay-container">
// <div class="alert-container">
// <div class="alert-header">
// Do you like cookies?
// </div>
// <div class="alert-content">
// Seriously, who does not like cookies.
// </div>
// <div class="alert-actions">
// <button class="button">OK</button>
// </div>
// </div>
// </div>`
// })
// export class Alert {
// constructor(
// @NgElement() ngElement:NgElement
// ) {
// this.domElement = ngElement.domElement
// this.config = Alert.config.invoke(this)
// }
// }
new IonicComponent(Alert, {})
// new IonicComponent(Alert, {})

1
ionic/components/alert/test/basic/e2e.js
View File

@ -1 +0,0 @@

1
ionic/components/app/test/typography/e2e.js
View File

@ -1 +0,0 @@

0
ionic/components/card/card.js
View File

1
ionic/components/checkbox/test/basic/e2e.js
View File

@ -1 +0,0 @@

0
ionic/components/progress/progress.js
View File

1
ionic/components/radio/test/basic/e2e.js
View File

@ -1 +0,0 @@

1
ionic/components/search-bar/test/basic/e2e.js
View File

@ -1 +0,0 @@

1
ionic/components/switch/test/basic/e2e.js
View File

@ -1 +0,0 @@

4
ionic/components/tabs/test/advanced/main.html
View File

@ -1,7 +1,7 @@
<ion-aside side="left" [content]="viewport">
<!-- <ion-aside side="left" [content]="viewport">
Hello! I'm a side menu in the root.
</ion-aside>
</ion-aside> -->
<ion-nav #viewport [initial]="initial">
</ion-nav>

4
ionic/components/tabs/test/advanced/main.js
View File

@ -1,5 +1,5 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Nav, Aside} from 'ionic/ionic'
import {Nav} from 'ionic/ionic'
import {SignInPage} from 'pages/sign-in'
@ -8,7 +8,7 @@ import {SignInPage} from 'pages/sign-in'
})
@NgView({
templateUrl: 'main.html',
directives: [Nav, Aside]
directives: [Nav]
})
class App {
constructor() {

30
ionic/components/toolbar/toolbar.js
View File

@ -4,7 +4,7 @@ import {
Decorator,
View as NgView,
Viewport,
ViewContainerRef,
//ViewContainerRef,
onDestroy,
Ancestor,
ElementRef,
@ -24,33 +24,33 @@ import {platform} from 'ionic/platform/platform';
})
export class Toolbar {
constructor(
viewContainer: ViewContainerRef,
//viewContainer: ViewContainerRef,
elementRef: ElementRef,
@Ancestor() navCtrl: NavController,
element: NgElement
// context: Object TODO wait for angular to implement this
) {
this.viewContainer = viewContainer;
//this.viewContainer = viewContainer;
this.elementRef = elementRef;
this.navCtrl = navCtrl;
// TODO use config to add these classes
this.viewContainer.domElement.classList.add('toolbar');
this.viewContainer.domElement.classList.add(`toolbar-${platform.getName()}`);
// this.viewContainer.domElement.classList.add('toolbar');
// this.viewContainer.domElement.classList.add(`toolbar-${platform.getName()}`);
// TODO Make a better way than this
if (/header/i.test(this.viewContainer.domElement.tagName)) {
this.placement = 'top';
} else {
this.placement = 'bottom';
}
// if (/header/i.test(this.viewContainer.domElement.tagName)) {
// this.placement = 'top';
// } else {
// this.placement = 'bottom';
// }
}
set placement(pos) {
this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
//this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
this._placement = pos;
this.navCtrl.addToolbar(this._placement, this);
this.viewContainer.domElement.setAttribute('placement', pos);
//this.viewContainer.domElement.setAttribute('placement', pos);
}
onDestroy() {
@ -133,17 +133,17 @@ export class ToolbarTitle {
})
export class ToolbarContainer {
constructor(
viewContainer: ViewContainerRef,
//viewContainer: ViewContainerRef,
element: NgElement
) {
this.viewContainer = viewContainer;
//this.viewContainer = viewContainer;
this.domElement = element.domElement;
}
set toolbar(bar: Toolbar) {
if (bar) {
// TODO create with correct context
this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
//this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
console.log('creating viewportContainer', performance.now())
}
}

2
ionic/ionic.js
View File

@ -15,7 +15,7 @@ Object.defineProperties(ViewContainerRef.prototype, {
}
}
});
console.log(ViewContainerRef)
export * from 'ionic/components'
export * from 'ionic/platform/platform'
export * from 'ionic/routing/router'

2
scripts/build/config.js
View File

@ -6,7 +6,7 @@ module.exports = {
js: ['ionic/**/*.js', '!src/**/test/**/*.js'],
// Get all the non-js files and main.js
e2e: ['ionic/components/*/test/**/*'],
e2e: ['ionic/components/*/test/*/**/*'],
html: 'ionic/**/*.html',
scss: 'ionic/**/*.scss',
},

4
scripts/e2e/e2e-publish.js
View File

@ -38,7 +38,7 @@ module.exports = function(options) {
};
request.post({
templateUrl: 'http://' + options.domain + '/e2e/upload-url',
uri: 'http://' + options.domain + '/e2e/upload-url',
formData: formData
},
function(err, httpResponse, body) {
@ -61,7 +61,7 @@ module.exports = function(options) {
};
request.post({
templateUrl: uploadUrl,
uri: uploadUrl,
formData: formData
},
function(err, httpResponse, body) {