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)
AsideConfig.property('type')
.when('overlay', types.AsideOverlayType)
.when('push', types.AsidePushType)
.when('reveal', types.AsideRevealType)
.when('overlay', types.AsideTypeOverlay)
.when('push', types.AsideTypePush)
.when('reveal', types.AsideTypeReveal)
@Component({
selector: 'ion-aside',

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

@ -1,12 +1,35 @@
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
// aside component's `transform` property?)
class AsideBaseType {
constructor(aside: Aside) {
// TODO use setters instead of direct dom manipulation
let asideManipulator = {
setSliding(is) {
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;
// TODO make this a setter
aside.domElement.classList.add(`type-${aside.type}`);
//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')
})
}
setSliding(isSliding) {
this.aside.domElement.classList[isSliding ? 'add' : 'remove']('no-transition');
}
export class AsideTypeOverlay extends AsideType {
setSliding(is) {
asideManipulator.setSliding.call(this, is);
}
setOpen(isOpen) {
this.aside.domElement.classList[isOpen ? 'add' : 'remove']('open');
setOpen(is) {
asideManipulator.setOpen.call(this, is);
}
setTransform(transform) {
this.aside.domElement.style.transform = transform;
setTransform(t) {
asideManipulator.setTransform.call(this, t);
}
}
export class AsideOverlayType extends AsideBaseType {}
export class AsidePushType extends AsideBaseType {
setSliding(isSliding) {
super.setSliding(isSliding);
this.aside.content.domElement.classList[isSliding ? 'add' : 'remove']('no-transition');
export class AsideTypePush extends AsideType {
setSliding(is) {
asideManipulator.setSliding.call(this, is);
contentManipulator.setSliding.call(this, is);
}
setOpen(isOpen) {
super.setOpen(isOpen);
this.aside.content.domElement.classList[isOpen ? 'add' : 'remove'](
`aside-open-${this.aside.side}`
);
setOpen(is) {
asideManipulator.setOpen.call(this, is);
contentManipulator.setOpen.call(this, is);
}
setTransform(transform) {
super.setTransform(transform);
this.aside.content.domElement.style.transform = transform;
setTransform(t) {
asideManipulator.setTransform.call(this, t);
contentManipulator.setTransform.call(this, t);
}
}
export class AsideRevealType extends AsideBaseType {
setSliding(isSliding) {
this.aside.content.domElement.classList[isSliding ? 'add' : 'remove']('no-transition');
export class AsideTypeReveal extends AsideType {
setSliding(is) {
contentManipulator.setSliding.call(this, is);
}
setOpen(isOpen) {
this.aside.content.domElement.classList[isOpen ? 'add' : 'remove'](
`aside-open-${this.aside.side}`
);
setOpen(is) {
asideManipulator.setOpen.call(this, is);
contentManipulator.setOpen.call(this, is);
}
setTransform(transform) {
this.aside.content.domElement.style.transform = transform;
setTransform(t) {
contentManipulator.setTransform.call(this, t);
}
}