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

aside(): initial types work

Browse Source
This commit is contained in:
Andrew
2015-03-25 15:53:56 -06:00
parent acd6046f63
commit 2561ab1be2
20 changed files with 495 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,158 +1,81 @@
import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2';
import {Ion} from '../ion';
import {Config} from '../../core/config/config';
import {SlideEdgeGesture} from '../../core/gestures/slide-edge-gesture';
import * as util from '../../util';
import {Component, Template, Inject, Parent, NgElement, PropertySetter} from 'angular2/angular2'
import {ComponentConfig} from '../../core/config/config'
import * as types from './extensions/types/types'
import * as gestures from './extensions/gestures/gestures';
// AsideParent is just a temporary directive
@Component({
selector: 'ion-aside-parent'
})
@Template({
inline: '<content></content>'
})
export class AsideParent {
constructor(@NgElement() element: NgElement) {
this.domElement = element.domElement;
super();
}
}
export let AsideConfig = new ComponentConfig()
AsideConfig.property('side')
.when('left', gestures.LeftAsideGesture)
.when('right', gestures.RightAsideGesture)
.when('top', gestures.TopAsideGesture)
.when('bottom', gestures.BottomAsideGesture)
AsideConfig.property('type')
.when('overlay', types.AsideOverlayType)
.when('push', types.AsidePushType)
.when('reveal', types.AsideRevealType)
@Component({
selector: 'ion-aside',
bind: {
content: 'content',
side: 'side',
dragThreshold: 'dragThreshold'
}
},
services: [AsideConfig]
})
@Template({
inline: `<content></content>`
})
export class Aside {
constructor(
@Parent() asideParent: AsideParent,
@NgElement() element: NgElement
@NgElement() element: NgElement,
@PropertySetter('style.transform') transformSetter: Function,
@PropertySetter('class.notransition') noTransitionSetter: Function,
config: AsideConfig
) {
this.domElement = element.domElement;
this.domElement = element.domElement
this.transformSetter = transformSetter
// this.noTransitionSetter = noTransitionSetter
this.noTransitionSetter = is => { this.domElement.classList[is?'add':'remove']('notransition') }
this.openSetter = is => { this.domElement.classList[is?'add':'remove']('open') }
// TODO inject constant instead of using domElement.getAttribute
// TODO let config / platform handle defaults transparently
let side = this.side = this.domElement.getAttribute('side') || 'left'
let type = this.type = this.domElement.getAttribute('type') || 'overlay'
this.delegates = config.invoke(this, { side, type })
this.domElement.classList.add(side)
this.domElement.addEventListener('transitionend', ev => {
this.setChanging(false);
this.setChanging(false)
})
}
// TODO: remove this. setTimeout has to be done so the bindings can be applied
setTimeout(() => {
let GestureConstructor = {
left: LeftAsideSlideGesture,
top: TopAsideSlideGesture,
bottom: BottomAsideSlideGesture,
right: RightAsideSlideGesture
}[this.side];
this.domElement.classList.add(this.side);
this.gesture = new GestureConstructor(this, asideParent.domElement);
this.gesture.listen();
});
setTransform(transform) {
this.delegates.type.setTransform(transform)
}
setSliding(isSliding) {
if (isSliding !== this.isSliding) {
this.domElement.classList[isSliding ? 'add' : 'remove']('sliding');
this.delegates.type.setSliding(isSliding)
}
}
setChanging(isChanging) {
if (isChanging !== this.isChanging) {
this.isChanging = isChanging;
this.domElement.classList[isChanging ? 'add' : 'remove']('changing');
this.isChanging = isChanging
this.domElement.classList[isChanging ? 'add' : 'remove']('changing')
}
}
setOpen(isOpen) {
if (isOpen !== this.isOpen) {
this.isOpen = isOpen;
this.setChanging(true);
this.isOpen = isOpen
this.setChanging(true)
requestAnimationFrame(() => {
this.domElement.classList[isOpen ? 'add' : 'remove']('open');
this.delegates.type.setOpen(isOpen)
})
}
}
}
class AsideSlideGesture extends SlideEdgeGesture {
constructor(aside: Aside, slideElement: Element) {
this.aside = aside;
super(slideElement, {
direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
edge: aside.side || 'left',
threshold: /*aside.dragThreshold || */150
});
}
canStart(ev) {
// Only restrict edges if the aside is closed
return this.aside.isOpen ? true : super.canStart(ev);
}
onSlideBeforeStart(slide, ev) {
this.aside.setSliding(true);
this.aside.setChanging(true);
return new Promise(resolve => {
requestAnimationFrame(resolve);
});
}
onSlide(slide, ev) {
this.aside.domElement.style.transform = 'translate3d(' + slide.distance + 'px,0,0)';
}
onSlideEnd(slide, ev) {
this.aside.domElement.style.transform = '';
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
};
}
}
class LeftAsideSlideGesture extends AsideSlideGesture {}
class RightAsideSlideGesture extends LeftAsideSlideGesture {
getElementStartPos(slide, ev) {
return this.aside.isOpen ? slide.min : slide.max;
}
getSlideBoundaries() {
return {
min: -this.aside.domElement.offsetWidth,
max: 0
};
}
}
class TopAsideSlideGesture extends AsideSlideGesture {
onSlide(slide, ev) {
this.aside.domElement.style.transform = 'translate3d(0,' + slide.distance + 'px,0)';
}
getSlideBoundaries() {
return {
min: 0,
max: this.aside.domElement.offsetHeight
};
}
}
class BottomAsideSlideGesture extends TopAsideSlideGesture {
getElementStartPos(slide, ev) {
return this.aside.isOpen ? slide.min : slide.max;
}
getSlideBoundaries() {
return {
min: -this.aside.domElement.offsetHeight,
max: 0
};
}
}