mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
Action Menu nice
This commit is contained in:
Max Lynch
@ -1,3 +1,11 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name ActionMenu
|
||||
* @module ionic
|
||||
* @description
|
||||
* The ActionMenu is a modal menu with options to select based on an action.
|
||||
*/
|
||||
|
||||
import {NgIf, NgFor, DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
|
||||
import {bind, Injector} from 'angular2/di';
|
||||
import {Promise} from 'angular2/src/facade/async';
|
||||
@ -10,12 +18,153 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility';
|
||||
import {Item, Icon} from 'ionic/ionic'
|
||||
import {Ionic} from 'ionic/components/app/app'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
import {raf, ready} from 'ionic/util/dom'
|
||||
import {raf, rafPromise, ready} from 'ionic/util/dom'
|
||||
import * as util from 'ionic/util'
|
||||
|
||||
import {Animation} from 'ionic/animations/animation';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-action-menu'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<div class="action-menu-backdrop">
|
||||
<div class="action-menu-wrapper">
|
||||
<div class="action-menu-container">
|
||||
<div class="action-menu-group action-menu-options">
|
||||
<div class="action-menu-title" *ng-if="options.titleText">{{options.titleText}}</div>
|
||||
<button (click)="_buttonClicked(index)" *ng-for="#b of options.buttons; #index = index" class="button action-menu-option">{{b.text}}</button>
|
||||
<button *ng-if="options.destructiveText" (click)="_destructiveButtonClicked()" class="button destructive action-menu-destructive">{{options.destructiveText}}</button>
|
||||
</div>
|
||||
<div class="action-menu-group action-menu-cancel" *ng-if="options.cancelText">
|
||||
<button class="button" (click)="_cancel()">{{options.cancelText}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
directives: [Item,Icon, NgIf, NgFor]
|
||||
})
|
||||
export class ActionMenu {
|
||||
constructor(elementRef: ElementRef) {
|
||||
this.domElement = elementRef.domElement
|
||||
this.config = ActionMenu.config.invoke(this)
|
||||
|
||||
this.wrapperEl = this.domElement.querySelector('.action-menu-wrapper');
|
||||
|
||||
this.options = {
|
||||
destructiveButtonClicked: util.noop,
|
||||
buttonClicked: util.noop,
|
||||
cancel: util.noop
|
||||
};
|
||||
|
||||
console.log('ActionMenu: Component Created', this.domElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the ActionMenu.
|
||||
*
|
||||
* @return Promise that resolves when the action menu is closed.
|
||||
*/
|
||||
close() {
|
||||
return new Promise(resolve => {
|
||||
raf(() => {
|
||||
var backdrop = this.domElement.children[0].classList.remove('active');
|
||||
var slideOut = Animation.create(this.wrapperEl, 'action-menu-slide-out');
|
||||
|
||||
slideOut.play().then(() => {
|
||||
this.wrapperEl.classList.remove('action-menu-up');
|
||||
this._clean();
|
||||
resolve();
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the Action Menu
|
||||
*
|
||||
* @return Promise that resolves when the action menu is open.
|
||||
*/
|
||||
open() {
|
||||
return new Promise(resolve => {
|
||||
raf(() => {
|
||||
var backdrop = this.domElement.children[0].classList.add('active');
|
||||
var slideIn = Animation.create(this.wrapperEl, 'action-menu-slide-in');
|
||||
|
||||
slideIn.play().then(() => {
|
||||
this.wrapperEl.classList.add('action-menu-up');
|
||||
resolve();
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the options (as in show())
|
||||
*
|
||||
* @param opts the options to set
|
||||
*/
|
||||
setOptions(opts) {
|
||||
util.extend(this.options, opts);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and open a new Action Menu. This is the
|
||||
* public API, and most often you will only use ActionMenu.open()
|
||||
*
|
||||
* @return Promise that resolves when the action menu is open.
|
||||
*/
|
||||
static open(opts) {
|
||||
console.log('Opening menu', opts, Ionic);
|
||||
|
||||
var promise = new Promise(resolve => {
|
||||
ActionMenu._inject().then((ref) => {
|
||||
let actionMenu = ref.instance;
|
||||
actionMenu.ref = ref;
|
||||
actionMenu.setOptions(opts);
|
||||
actionMenu.open();
|
||||
resolve(actionMenu);
|
||||
});
|
||||
})
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
static _inject() {
|
||||
return Ionic.appendToRoot(ActionMenu);
|
||||
}
|
||||
|
||||
_clean() {
|
||||
this.ref.dispose();
|
||||
}
|
||||
|
||||
_cancel() {
|
||||
this.options.cancel();
|
||||
this.close().then(() => {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
_destructiveButtonClicked() {
|
||||
let shouldClose = this.options.destructiveButtonClicked();
|
||||
if(shouldClose === true) {
|
||||
return this.close()
|
||||
}
|
||||
}
|
||||
|
||||
_buttonClicked(index) {
|
||||
let shouldClose = this.options.buttonClicked(index);
|
||||
if(shouldClose === true) {
|
||||
return this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(ActionMenu, {})
|
||||
|
||||
/**
|
||||
* Animations for action sheet
|
||||
*/
|
||||
class ActionMenuSlideIn extends Animation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
@ -38,90 +187,4 @@ class ActionMenuSlideOut extends Animation {
|
||||
.to('translateY', '100%');
|
||||
}
|
||||
}
|
||||
Animation.register('action-menu-slide-out', ActionMenuSlideIn);
|
||||
|
||||
@Component({
|
||||
selector: 'ion-action-menu'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<div class="action-menu-backdrop">
|
||||
<div class="action-menu-wrapper">
|
||||
<div class="action-menu-container">
|
||||
<div class="action-menu-group action-menu-options">
|
||||
<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>
|
||||
<button (click)="buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="button action-menu-option">{{b.text}}</button>
|
||||
<button *ng-if="destructiveText" (click)="destructiveButtonClicked()" class="button destructive action-menu-destructive">{{destructiveText}}</button>
|
||||
</div>
|
||||
<div class="action-menu-group action-menu-cancel" *ng-if="cancelText">
|
||||
<button class="button" (click)="cancel()">{{cancelText}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
directives: [Item,Icon, NgIf, NgFor]
|
||||
})
|
||||
export class ActionMenu {
|
||||
constructor(elementRef: ElementRef) {
|
||||
this.domElement = elementRef.domElement
|
||||
this.config = ActionMenu.config.invoke(this)
|
||||
|
||||
this.wrapperEl = this.domElement.querySelector('.action-menu-wrapper');
|
||||
|
||||
console.log('ActionMenu: Component Created', this.domElement);
|
||||
}
|
||||
|
||||
close() {
|
||||
raf(() => {
|
||||
var backdrop = this.domElement.children[0].classList.remove('active');
|
||||
var slideOut = Animation.create(this.wrapperEl, 'action-menu-slide-out');
|
||||
|
||||
return slideOut.play().then(() => {
|
||||
this.wrapperEl.classList.remove('action-menu-up');
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
open() {
|
||||
raf(() => {
|
||||
var backdrop = this.domElement.children[0].classList.add('active');
|
||||
var slideIn = Animation.create(this.wrapperEl, 'action-menu-slide-in');
|
||||
|
||||
return slideIn.play().then(() => {
|
||||
this.wrapperEl.classList.add('action-menu-up');
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
setOptions(opts) {
|
||||
util.extend(this, opts);
|
||||
}
|
||||
|
||||
// Overridden by options
|
||||
destructiveButtonClicked() {}
|
||||
buttonClicked(index) {}
|
||||
cancel() {}
|
||||
|
||||
static open(opts) {
|
||||
console.log('Opening menu', opts, Ionic);
|
||||
|
||||
var promise = new Promise(resolve => {
|
||||
ActionMenu._inject().then((actionMenu) => {
|
||||
actionMenu.setOptions(opts);
|
||||
setTimeout(() => {
|
||||
actionMenu.open();
|
||||
})
|
||||
resolve(actionMenu);
|
||||
});
|
||||
})
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
static _inject() {
|
||||
return Ionic.appendToRoot(ActionMenu);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new IonicComponent(ActionMenu, {})
|
||||
Animation.register('action-menu-slide-out', ActionMenuSlideOut);
|
||||
|
||||
Reference in New Issue
Block a user