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

Removed mockup folder

Browse Source
This commit is contained in:
Max Lynch
2015-06-01 16:45:47 -05:00
parent add20aca9c
commit 8afe225e98
4 changed files with 0 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
mockup/model.js
View File

@ -1,219 +0,0 @@
class Element {
}
class DomElement extends Element {
}
class NativeElement extends Element {
}
class View {
el: Element;
children: List<View>
// Child operations
addChild(child) {
}
removeChild(child) {
}
insertChild(child, index) {
}
constructor(el: Element) {
}
getElement() {
return el
}
}
class TabBarView extends View {
tabBarButtons: List<TabBarButtonView>
}
class TabBarButtonView extends Button {
icon: Icon
title: String
}
/**
* VIEW CONTROLLERS
*/
class ViewController {
view: View;
behaviors: List<Behavior>
behaviorEmit(lifeCycleEventName) {
forEach(this.behaviors, function(behavior) {
if(behavior[lifeCycleEventName](this.view) === false) {
return true
}
})
}
// Lifecycle methods, same as Adam Lifecycle
onCompile() {
behaviorEmit('onCompile')
}
onInsert() {
behaviorEmit('onInsert')
}
onRemove() {
behaviorEmit('onRemove')
}
}
class NavViewController extends ViewController {
viewControllers: Stack<ViewController>;
visibleViewController: ViewController;
push(viewController) {
stack.push(viewController)
}
pop(viewController) {
stack.pop(viewController)
}
set viewControllers(v) {
this.viewControllers = v
}
}
class TabsViewController extends ViewController {
tabBar: TabBarView;
viewControllers: List<ViewController>;
constructor() {
this.tabBar.bind('tabClick', function(tabItem) {
// A specific tab item was clicked
this.selectTab(tabItem)
})
}
addTab(viewController) {
this.viewControllers.push(viewController)
}
}
class SideMenuController extends ViewController {
sideMenuView: SideMenuView
contentView: View
constructor(contentView, side) {
this.sideMenuView = new SideMenuView()
if(contentView) {
// Explicit content view
this.contentView = contentView
} else {
// Heuristic to try to find it
this.inferContentView()
}
this.side = side
// The default behavior
this.behaviors.push(new SideMenuContentSlideBehavior(
this.sideMenuView,
this.contentView
))
}
inferContentView() {
this.contentView = this.getParent().find('is(Content)')[0]
/*
var index = this.getParent().getChildren().indexOf(this.sideMenuView))
if(this.side == 'left') {
targetIndex = index + 1
}
if(this.side == 'right') {
targetIndex = index - 1
}
this.contentView = this.getParent().getChildAtIndex(targetIndex)
*/
}
}
class Behavior {
// The Behavior class will hook into lifecycle events for views
// Component compiled
onCompile(view) {
}
// Component inserted
onInsert(view) {
}
beforeCreate() {
}
onCreate() {
}
afterCreate() {
}
}
class SideMenuContentSlideBehavior extends Behavior {
constructor(sideMenuView, contentView) {
var gesture = new EdgePanGesture(this.onDrag, contentView)
}
act: function(view, lifecycle) {
return false
}
onDrag: function(event) {
// Drag out side menu
}
}
class DrawerStyleBehavior extends Behavior {
act: function(view, lifecycle) {
var gesture = new EdgePanGesture(this.onDrag, contentView)
return false
}
onInsert(view) {
}
onDrag: function(event) {
// Drag out side menu
}
}
/**
* Gestures
**/
class Gesture {
}
class EdgePanGesture extends Gesture {
constructor(el) {
el.onDrag(this.onDrag)
}
onDrag(e) {
x = e.pageX
y = e.pageY
if(!isDragging && x > edgeThreshold) {
// Not in threshold
return
} else if(!isDragging) {
// Check if we've started yet
if(!start) {
start = {
x: x
}
}
// Check if we dragged enough (like 3 px or whatever)
if(Math.abs(start.x - x) > dragThreshold) {
isDragging = true
}
}
}
onDragEnd(e) {
start = null
x = null
isDragging = false
}
}
class PinchToZoomGesture extends Gesture {
}
class HoldGesture extends Gesture {
}
class SwipeGesture extends Gesture {
}

8
mockup/router.html
View File

@ -1,8 +0,0 @@
<ion-app>
<ion-nav>
<login-page>
<button push="signup">Sign up</button>
<button pop>Back</button>
</login-page>
</ion-nav>
</ion-app>

51
mockup/router.js
View File

@ -1,51 +0,0 @@
/**
* This is a mockup of how the new router might work.
*
* The goal of this is to help shape the new Angular router, or
* figure out if we need to do our own implementation.
Some design decisions we need to figure out and agree on:
* Deep linking. In v1 we did a complicated nested view linking, where
a route with a URL like /contacts/name would navigate in each sub
view, reconstructing a whole navigation context.
I'm not convinced this is the right approach for v2. Instead, we might
want to make it more explicit, where certain URLs can trigger a handler
where navigation can be reconstructed by the developer, but with the
default behavior of routes being navigated to in the root nav.
*/
// Decorators
@Route({
})
class App extends Ionic {
constructor(nav: Navigation) {
nav.urls({
templateUrl: '/contacts/:contact',
navigate: (url, params) => {
if(params.contactId) {
// Explicit routing
var contactList = new ContactList();
rootNav.push(contactList, false // whether to animate);
var contactPage = new ContactPage(params.contactId);
rootNav.push(contactPage);
// Now the user has a 2 history navigation:
// root -> contact list -> contact page
//
// But note, it was up to the developer to construct the appropriate history
}
}
})
}
}
@Route({
name: 'login'
templateUrl: '/login' // Optional
})
class LoginPage extends View {
}

108
mockup/router/readme.md
View File

@ -1,108 +0,0 @@
# Router
### App Views extend View
```
class MyView1 extends View {
constructor(navView) {}
}
@Template({
template: '<div>blah blah</div>'
})
class MyView2 extends View {
constructor(navView) {}
}
@Route({
templateUrl: '/myview4'
})
class MyView4 extends View {
constructor(navView) {}
}
```
### JS Nav
```
navView.push(MyView2)
navView.push({
controller: MyView3,
template: 'view3.html'
})
navView.push({
animation: 'horizontal',
controller: MyView3,
template: 'view3.html'
})
navView.push({
templateUrl: '/whateves',
template: '<div>crazy dynamic template</div>'
})
```
### Markup Nav
```
<a nav-link="MyView2"></a>
<a [nav-link]="{ controller: MyView3, template: 'view3.html', animation: horizontal }"></a>
```
### Animations
```
platform: Whatever the platform would have naturally done (Default)
horizontal: Right to center when going forward. Center to right when going back
vertial: Bottom to center when going forward. Bottom to center when going back
right-to-center: Always right to center
left-to-center: Always left to center
top-to-center: Always top to center
bottom-to-center: Always bottom to center
```
### Simple webdev:
1. Give markup a templateUrl: Saving the file, CMS url, or creating an endpoint serversize (django, RoR, etc)
2. In the markup, add a link all the linked pages using `href=url`
Pros: Simple. Its how the web works.
Cons: Not ideal for web applications
### Ionic v1
1. Create the stateProvider
2. Create state name
3. Give the state a url
4. Set the state name of where the state should live (name the div)
5. Wire up this state to the controller
6. Wire up this state to the template
7. In the template, add a link to all the linked pages using `href=url` or `ui-sref=stateName`
Pros: Centralizes all routes and URLs for easy management. Can update numerous sections of the webapp, rather than just one div. Deep linking: click to any view of the entire webapp from anywhere. Good for webapps.
Cons: Many repetitive steps. Confusing what each of the variables actually do. Web devs aren't familiar with JS routing.
### Ionic v2 (without a markup shorthand)
1. Create custom view component by extending base ionic view
2. Add template to component
3. Add DI of nav-view to the view's constructor's arguments
4. Add a click handler for every link
5. In each click handler, use `navView.push()` (would each view we link to require an import on that page?)
6. In the template, add the click handler to each of the linked views
Pros: Decentralized routing. More like native apps and OO languages/frameworks. Only concerned about informing it's parent navView, rather than a global configuration.
Cons: Decentralized routing. Creating click methods in JS and wiring them up in HTML. No/Difficult deep linking: Only can go forward and back. Only updates one div.