From 9f6ac8bdea90e8e9505309aaf1fdf7c4a90aeb69 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 27 Mar 2015 12:36:33 -0600 Subject: [PATCH] make js work on snapshot --- scripts/e2e/index.template.html | 2 +- src/components/aside/aside.js | 4 +- src/components/aside/config.js | 6 ++ src/components/aside/extensions/gestures.js | 92 +++++++++++++++++++++ src/components/aside/extensions/types.js | 80 ++++++++++++++++++ 5 files changed, 181 insertions(+), 3 deletions(-) create mode 100644 src/components/aside/extensions/gestures.js create mode 100644 src/components/aside/extensions/types.js diff --git a/scripts/e2e/index.template.html b/scripts/e2e/index.template.html index f203cb5ad1..6ac009cd00 100644 --- a/scripts/e2e/index.template.html +++ b/scripts/e2e/index.template.html @@ -14,7 +14,7 @@ baseURL: '<%= PREFIX %>/lib', traceurOptions: <%= JSON.stringify(buildConfig.traceurOptions) %>, map: { - 'app': location.pathname.replace(/\/$/,''), + 'app': location.pathname.replace(/\/(index.html)?$/,''), 'rx/dist/rx.all': 'rx.all', } }) diff --git a/src/components/aside/aside.js b/src/components/aside/aside.js index b68ea0e1a4..a572a4a215 100644 --- a/src/components/aside/aside.js +++ b/src/components/aside/aside.js @@ -1,7 +1,7 @@ import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2' import {ComponentConfig} from 'ionic2/config/component-config' -import * as types from 'ionic2/components/aside/types/types' -import * as gestures from 'ionic2/components/aside/gestures/gestures'; +import * as types from 'ionic2/components/aside/extensions/types' +import * as gestures from 'ionic2/components/aside/extensions/gestures'; @Component({ selector: 'ion-aside', diff --git a/src/components/aside/config.js b/src/components/aside/config.js index 50db1acfc8..5e05f4d3a4 100644 --- a/src/components/aside/config.js +++ b/src/components/aside/config.js @@ -18,3 +18,9 @@ AsideConfig.delegate('type') .when({type: 'push'}, types.AsideTypePush) .when({type: 'reveal'}, types.AsideTypeReveal) + +AsideConfig.platform('android') + .defaults({ type: 'overlay' }) + +AsideConfig.platform('ios') + .defaults({ type: 'reveal' }) diff --git a/src/components/aside/extensions/gestures.js b/src/components/aside/extensions/gestures.js new file mode 100644 index 0000000000..6d3e44303a --- /dev/null +++ b/src/components/aside/extensions/gestures.js @@ -0,0 +1,92 @@ +import {Aside} from 'ionic2/components/aside/aside'; +//TODO: figure out way to get rid of all the ../../../../ +import {SlideEdgeGesture} from 'ionic2/gestures/slide-edge-gesture'; + +class AsideGesture extends SlideEdgeGesture { + constructor(aside: Aside) { + // TODO figure out the sliding element, dont just use the parent + let slideElement = aside.domElement.parentNode; + super(slideElement, { + direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y', + edge: aside.side, + threshold: 75 + }); + this.aside = aside; + this.slideElement = slideElement; + this.listen(); + } + + canStart(ev) { + // Only restrict edges if the aside is closed + return this.aside.isOpen ? true : super.canStart(ev); + } + + // Set CSS, then wait one frame for it to apply before sliding starts + onSlideBeforeStart(slide, ev) { + this.aside.setSliding(true); + this.aside.setChanging(true); + return new Promise(resolve => { + requestAnimationFrame(resolve); + }); + } + onSlide(slide, ev) { + this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)'); + } + onSlideEnd(slide, ev) { + this.aside.setTransform(''); + this.aside.setSliding(false); + if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) { + this.aside.setOpen(!this.aside.isOpen); + } + } + + getElementStartPos(slide, ev) { + return this.aside.isOpen ? slide.max : slide.min; + } + getSlideBoundaries() { + return { + min: 0, + max: this.aside.domElement.offsetWidth + }; + } +} + +export class LeftAsideGesture extends AsideGesture {} + +export class RightAsideGesture extends LeftAsideGesture { + getElementStartPos(slide, ev) { + return this.aside.isOpen ? slide.min : slide.max; + } + getSlideBoundaries() { + return { + min: -this.aside.domElement.offsetWidth, + max: 0 + }; + } + +} + +export class TopAsideGesture extends AsideGesture { + onSlide(slide, ev) { + this.aside.setTransform('translate3d(0,' + slide.distance + 'px,0)'); + } + getSlideBoundaries() { + return { + min: 0, + max: this.aside.domElement.offsetHeight + }; + } +} + +export class BottomAsideGesture extends TopAsideGesture { + getElementStartPos(slide, ev) { + return this.aside.isOpen ? slide.min : slide.max; + } + getSlideBoundaries() { + return { + min: -this.aside.domElement.offsetHeight, + max: 0 + }; + } +} + diff --git a/src/components/aside/extensions/types.js b/src/components/aside/extensions/types.js new file mode 100644 index 0000000000..f039bf4eae --- /dev/null +++ b/src/components/aside/extensions/types.js @@ -0,0 +1,80 @@ +import {Aside} from 'ionic2/components/aside/aside'; + +// TODO use setters instead of direct dom manipulation +const asideManipulator = { + setSliding(sliding) { + this.aside.domElement.classList[sliding ? 'add' : 'remove']('no-transition'); + }, + setOpen(open) { + this.aside.domElement.classList[open ? 'add' : 'remove']('open'); + }, + setTransform(t) { + this.aside.domElement.style.transform = t; + } +} +const contentManipulator = { + setSliding(sliding) { + this.aside.content.domElement.classList[sliding ? 'add' : 'remove']('no-transition'); + }, + setOpen(open) { + this.aside.content.domElement.classList[open ? 'add' : 'remove']( + `aside-open-${this.aside.side}` + ) + }, + setTransform(t) { + this.aside.content.domElement.style.transform = t; + } +} + +export class AsideType { + constructor(aside) { + this.aside = aside; + + aside.domElement.classList.add(`type-${aside.type}`); + + //FIXME(ajoslin): have to wait for for bindings to apply in a component + setTimeout(() => { + this.aside.content.domElement.classList.add('aside-content') + }) + } +} + +export class AsideTypeOverlay extends AsideType { + setSliding(sliding) { + asideManipulator.setSliding.call(this, sliding); + } + setOpen(open) { + asideManipulator.setOpen.call(this, open); + } + setTransform(t) { + asideManipulator.setTransform.call(this, t); + } +} + +export class AsideTypePush extends AsideType { + setSliding(sliding) { + asideManipulator.setSliding.call(this, sliding); + contentManipulator.setSliding.call(this, sliding); + } + setOpen(open) { + asideManipulator.setOpen.call(this, open); + contentManipulator.setOpen.call(this, open); + } + setTransform(t) { + asideManipulator.setTransform.call(this, t); + contentManipulator.setTransform.call(this, t); + } +} + +export class AsideTypeReveal extends AsideType { + setSliding(sliding) { + contentManipulator.setSliding.call(this, sliding); + } + setOpen(sliding) { + asideManipulator.setOpen.call(this, sliding); + contentManipulator.setOpen.call(this, sliding); + } + setTransform(t) { + contentManipulator.setTransform.call(this, t); + } +}