diff --git a/src/components/aside/aside.scss b/src/components/aside/aside.scss index b7a2b9ac8a..7c36d574e7 100644 --- a/src/components/aside/aside.scss +++ b/src/components/aside/aside.scss @@ -8,7 +8,7 @@ $aside-transition: 0.3s linear transform; background: #eee; - &.type-overlay { + &[type=overlay] { z-index: 10; } diff --git a/src/components/aside/extensions/types.js b/src/components/aside/extensions/types.js index f039bf4eae..e5b8f281ae 100644 --- a/src/components/aside/extensions/types.js +++ b/src/components/aside/extensions/types.js @@ -27,14 +27,12 @@ const contentManipulator = { } export class AsideType { - constructor(aside) { + constructor(aside: 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') + aside.content.domElement.classList.add('aside-content') }) } } diff --git a/src/components/aside/gestures/gestures.js b/src/components/aside/gestures/gestures.js deleted file mode 100644 index 6d3e44303a..0000000000 --- a/src/components/aside/gestures/gestures.js +++ /dev/null @@ -1,92 +0,0 @@ -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/types/types.js b/src/components/aside/types/types.js deleted file mode 100644 index f039bf4eae..0000000000 --- a/src/components/aside/types/types.js +++ /dev/null @@ -1,80 +0,0 @@ -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); - } -} diff --git a/src/components/tabs/test/advanced/main.html b/src/components/tabs/test/advanced/main.html new file mode 100644 index 0000000000..4757597ce9 --- /dev/null +++ b/src/components/tabs/test/advanced/main.html @@ -0,0 +1,5 @@ + + Hello! + + + diff --git a/src/components/tabs/test/advanced/main.js b/src/components/tabs/test/advanced/main.js index badc0d32f6..ce0fca7ab8 100644 --- a/src/components/tabs/test/advanced/main.js +++ b/src/components/tabs/test/advanced/main.js @@ -1,13 +1,13 @@ import {Component, Template, bootstrap} from 'angular2/angular2' -import {NavViewport} from 'ionic2/components' +import {NavViewport, Aside} from 'ionic2/components' import {SignInPage} from 'app/pages/sign-in' @Component({ selector: '[ion-app]' }) @Template({ - inline: '', - directives: [NavViewport] + url: 'main.html', + directives: [NavViewport, Aside] }) class App { constructor() { diff --git a/src/config/component.js b/src/config/component.js index c6e10c3c7d..091271c31c 100644 --- a/src/config/component.js +++ b/src/config/component.js @@ -38,7 +38,7 @@ export class IonicComponent { } invoke(instance) { - let config = this + const config = this instance.domElement.classList.add(this.componentCssName) instance.domElement.classList.add(`${this.componentCssName}-${platformName}`) @@ -53,13 +53,16 @@ export class IonicComponent { return { getDelegate(delegateName) { - let cases = (config.delegates || {})[delegateName] || [] + let cases = (config.delegates || {})[delegateName] || []; for (let i = 0; i < cases.length; i++) { - let delegateCase = cases[i] + let delegateCase = cases[i]; if (util.isArray(delegateCase)) { - if (delegateCase[0](instance)) return new delegateCase[1](instance) + let [ check, DelegateConstructor ] = delegateCase; + if (check(instance)) { + return new DelegateConstructor(instance); + } } else { - return new delegateCase(instance) + return new delegateCase(instance); } } }