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

87
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 #### Building & Running
- `gulp watch` - `gulp watch`
@ -12,84 +6,5 @@
- `open http://localhost:9000/e2e/aside/basic/index.html` - `open http://localhost:9000/e2e/aside/basic/index.html`
- Follow the structure found in src/components/aside/examples/basic - Follow the structure found in src/components/aside/examples/basic
to create more examples. to create more examples.
* The biggest thing to remember: your app has to import its dependencies with the `app/` prefix. * 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. 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. // DON'T reference this file in the source. Only in demos.
export * from 'ionic/components/action-menu/action-menu' // export * from 'ionic/components/action-menu/action-menu'
export * from 'ionic/components/alert/alert' // export * from 'ionic/components/alert/alert'
export * from 'ionic/components/aside/aside' export * from 'ionic/components/aside/aside'
export * from 'ionic/components/button/button' // export * from 'ionic/components/button/button'
export * from 'ionic/components/checkbox/checkbox' // export * from 'ionic/components/checkbox/checkbox'
export * from 'ionic/components/content/content' export * from 'ionic/components/content/content'
export * from 'ionic/components/icon/icon' // export * from 'ionic/components/icon/icon'
export * from 'ionic/components/item/item' // export * from 'ionic/components/item/item'
export * from 'ionic/components/form/form' // export * from 'ionic/components/form/form'
export * from 'ionic/components/input/input' // export * from 'ionic/components/input/input'
export * from 'ionic/components/layout/layout' // export * from 'ionic/components/layout/layout'
export * from 'ionic/components/list/list' // export * from 'ionic/components/list/list'
export * from 'ionic/components/nav/nav' export * from 'ionic/components/nav/nav'
export * from 'ionic/components/nav/nav-item' export * from 'ionic/components/nav/nav-item'
export * from 'ionic/components/nav/decorators' // export * from 'ionic/components/nav/decorators'
export * from 'ionic/components/radio/radio-button' // export * from 'ionic/components/radio/radio-button'
export * from 'ionic/components/radio/radio-group' // export * from 'ionic/components/radio/radio-group'
export * from 'ionic/components/search-bar/search-bar' // export * from 'ionic/components/search-bar/search-bar'
export * from 'ionic/components/split-view/split-view' // export * from 'ionic/components/split-view/split-view'
export * from 'ionic/components/switch/switch' // export * from 'ionic/components/switch/switch'
export * from 'ionic/components/tabs/tabs' export * from 'ionic/components/tabs/tabs'
export * from 'ionic/components/tabs/tab' export * from 'ionic/components/tabs/tab'
export * from 'ionic/components/toolbar/toolbar' 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 {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component' // import {IonicComponent} from 'ionic/config/component'
import {Icon} from 'ionic/components/icon/icon' // import {Icon} from 'ionic/components/icon/icon'
import {Item} from 'ionic/components/item/item' // import {Item} from 'ionic/components/item/item'
@Component({ // @Component({
selector: 'ion-action-menu' // selector: 'ion-action-menu'
}) // })
@NgView({ // @NgView({
template: ` // template: `
<div class="overlay-backdrop"></div> // <div class="overlay-backdrop"></div>
<div class="overlay-container"> // <div class="overlay-container">
<div class="action-menu-container"> // <div class="action-menu-container">
<div class="list-header">Action Menu List Header</div> // <div class="list-header">Action Menu List Header</div>
<div class="list"> // <div class="list">
<button ion-item class="item"> // <button ion-item class="item">
Button 1 // Button 1
</button> // </button>
<button ion-item class="item"> // <button ion-item class="item">
Button 2 // Button 2
</button> // </button>
</div> // </div>
<div class="list-header">Action Menu Label</div> // <div class="list-header">Action Menu Label</div>
<div class="list"> // <div class="list">
<button ion-item class="item">Button 1</button> // <button ion-item class="item">Button 1</button>
<button ion-item class="item">Button 2</button> // <button ion-item class="item">Button 2</button>
</div> // </div>
<div class="list"> // <div class="list">
<button ion-item class="item">Button 1</button> // <button ion-item class="item">Button 1</button>
</div> // </div>
</div> // </div>
</div>`, // </div>`,
directives: [Item,Icon] // directives: [Item,Icon]
}) // })
export class ActionMenu { // export class ActionMenu {
constructor( // constructor(
@NgElement() ngElement:NgElement // @NgElement() ngElement:NgElement
) { // ) {
this.domElement = ngElement.domElement // this.domElement = ngElement.domElement
this.config = ActionMenu.config.invoke(this) // 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 {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component' // import {IonicComponent} from 'ionic/config/component'
@Component({ // @Component({
selector: 'ion-alert' // selector: 'ion-alert'
}) // })
@NgView({ // @NgView({
template: ` // template: `
<div class="overlay-backdrop"></div> // <div class="overlay-backdrop"></div>
<div class="overlay-container"> // <div class="overlay-container">
<div class="alert-container"> // <div class="alert-container">
<div class="alert-header"> // <div class="alert-header">
Do you like cookies? // Do you like cookies?
</div> // </div>
<div class="alert-content"> // <div class="alert-content">
Seriously, who does not like cookies. // Seriously, who does not like cookies.
</div> // </div>
<div class="alert-actions"> // <div class="alert-actions">
<button class="button">OK</button> // <button class="button">OK</button>
</div> // </div>
</div> // </div>
</div>` // </div>`
}) // })
export class Alert { // export class Alert {
constructor( // constructor(
@NgElement() ngElement:NgElement // @NgElement() ngElement:NgElement
) { // ) {
this.domElement = ngElement.domElement // this.domElement = ngElement.domElement
this.config = Alert.config.invoke(this) // 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. Hello! I'm a side menu in the root.
</ion-aside> </ion-aside> -->
<ion-nav #viewport [initial]="initial"> <ion-nav #viewport [initial]="initial">
</ion-nav> </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 {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' import {SignInPage} from 'pages/sign-in'
@ -8,7 +8,7 @@ import {SignInPage} from 'pages/sign-in'
}) })
@NgView({ @NgView({
templateUrl: 'main.html', templateUrl: 'main.html',
directives: [Nav, Aside] directives: [Nav]
}) })
class App { class App {
constructor() { constructor() {

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

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

2
scripts/build/config.js
View File

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

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

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