javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

abstract types clearly

Browse Source
This commit is contained in:
Andrew
2015-03-25 20:19:37 -06:00
parent b6579f4be2
commit 08b5658c2a
2 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/aside/aside.js
View File

@ -12,9 +12,9 @@ AsideConfig.property('side')
.when('bottom', gestures.BottomAsideGesture) .when('bottom', gestures.BottomAsideGesture)
AsideConfig.property('type') AsideConfig.property('type')
.when('overlay', types.AsideOverlayType) .when('overlay', types.AsideTypeOverlay)
.when('push', types.AsidePushType) .when('push', types.AsideTypePush)
.when('reveal', types.AsideRevealType) .when('reveal', types.AsideTypeReveal)
@Component({ @Component({
selector: 'ion-aside', selector: 'ion-aside',

89
src/components/aside/extensions/types/types.js
View File

@ -1,12 +1,35 @@
import {Aside} from '../../aside'; import {Aside} from '../../aside';
// TODO figure out if we can make all of these bindings (eg can we make it so content's transform is bound to // TODO use setters instead of direct dom manipulation
// aside component's `transform` property?) let asideManipulator = {
class AsideBaseType { setSliding(is) {
constructor(aside: Aside) { this.aside.domElement.classList[is ? 'add' : 'remove']('no-transition');
},
setOpen(is) {
this.aside.domElement.classList[is ? 'add' : 'remove']('open');
},
setTransform(t) {
this.aside.domElement.style.transform = t;
}
}
let contentManipulator = {
setSliding(is) {
this.aside.content.domElement.classList[is ? 'add' : 'remove']('no-transition');
},
setOpen(is) {
this.aside.content.domElement.classList[is ? 'add' : 'remove'](
`aside-open-${this.aside.side}`
)
},
setTransform(t) {
this.aside.content.domElement.style.transform = t;
}
}
class AsideType {
constructor(aside) {
this.aside = aside; this.aside = aside;
// TODO make this a setter
aside.domElement.classList.add(`type-${aside.type}`); aside.domElement.classList.add(`type-${aside.type}`);
//FIXME(ajoslin): have to wait for for bindings to apply in a component //FIXME(ajoslin): have to wait for for bindings to apply in a component
@ -14,46 +37,44 @@ class AsideBaseType {
this.aside.content.domElement.classList.add('aside-content') this.aside.content.domElement.classList.add('aside-content')
}) })
} }
setSliding(isSliding) {
this.aside.domElement.classList[isSliding ? 'add' : 'remove']('no-transition');
} }
setOpen(isOpen) {
this.aside.domElement.classList[isOpen ? 'add' : 'remove']('open'); export class AsideTypeOverlay extends AsideType {
setSliding(is) {
asideManipulator.setSliding.call(this, is);
} }
setTransform(transform) { setOpen(is) {
this.aside.domElement.style.transform = transform; asideManipulator.setOpen.call(this, is);
}
setTransform(t) {
asideManipulator.setTransform.call(this, t);
} }
} }
export class AsideOverlayType extends AsideBaseType {} export class AsideTypePush extends AsideType {
setSliding(is) {
export class AsidePushType extends AsideBaseType { asideManipulator.setSliding.call(this, is);
setSliding(isSliding) { contentManipulator.setSliding.call(this, is);
super.setSliding(isSliding);
this.aside.content.domElement.classList[isSliding ? 'add' : 'remove']('no-transition');
} }
setOpen(isOpen) { setOpen(is) {
super.setOpen(isOpen); asideManipulator.setOpen.call(this, is);
this.aside.content.domElement.classList[isOpen ? 'add' : 'remove']( contentManipulator.setOpen.call(this, is);
`aside-open-${this.aside.side}`
);
} }
setTransform(transform) { setTransform(t) {
super.setTransform(transform); asideManipulator.setTransform.call(this, t);
this.aside.content.domElement.style.transform = transform; contentManipulator.setTransform.call(this, t);
} }
} }
export class AsideRevealType extends AsideBaseType { export class AsideTypeReveal extends AsideType {
setSliding(isSliding) { setSliding(is) {
this.aside.content.domElement.classList[isSliding ? 'add' : 'remove']('no-transition'); contentManipulator.setSliding.call(this, is);
} }
setOpen(isOpen) { setOpen(is) {
this.aside.content.domElement.classList[isOpen ? 'add' : 'remove']( asideManipulator.setOpen.call(this, is);
`aside-open-${this.aside.side}` contentManipulator.setOpen.call(this, is);
);
} }
setTransform(transform) { setTransform(t) {
this.aside.content.domElement.style.transform = transform; contentManipulator.setTransform.call(this, t);
} }
} }