diff --git a/mockup/model.js b/mockup/model.js deleted file mode 100644 index 60cc028739..0000000000 --- a/mockup/model.js +++ /dev/null @@ -1,219 +0,0 @@ -class Element { -} -class DomElement extends Element { -} -class NativeElement extends Element { -} - -class View { - el: Element; - children: List - - // Child operations - addChild(child) { - } - removeChild(child) { - } - insertChild(child, index) { - } - constructor(el: Element) { - } - - getElement() { - return el - } -} - -class TabBarView extends View { - tabBarButtons: List -} -class TabBarButtonView extends Button { - icon: Icon - title: String -} - -/** - * VIEW CONTROLLERS - */ - -class ViewController { - view: View; - behaviors: List - - 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; - 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; - - 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 { -} - diff --git a/mockup/router.html b/mockup/router.html deleted file mode 100644 index 5daee858b6..0000000000 --- a/mockup/router.html +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/mockup/router.js b/mockup/router.js deleted file mode 100644 index 1e40e22f8e..0000000000 --- a/mockup/router.js +++ /dev/null @@ -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 { -} diff --git a/mockup/router/readme.md b/mockup/router/readme.md deleted file mode 100644 index dd26acf840..0000000000 --- a/mockup/router/readme.md +++ /dev/null @@ -1,108 +0,0 @@ -# Router - - -### App Views extend View - -``` -class MyView1 extends View { - constructor(navView) {} -} - -@Template({ - template: '
blah blah
' -}) -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: '
crazy dynamic template
' -}) -``` - - -### Markup Nav - -``` - - - -``` - -### 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.