ionic-framework
Version:
238 lines • 11.5 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/**
* @ngdoc service
* @name ActionSheet
* @module ionic
* @description
* The ActionSheet is a modal menu with options to select based on an action.
*/
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var overlay_controller_1 = require('../overlay/overlay-controller');
var config_1 = require('../../config/config');
var icon_1 = require('../icon/icon');
var animation_1 = require('../../animations/animation');
var nav_controller_1 = require('../nav/nav-controller');
var util_1 = require('../../util/util');
var ActionSheetCmp = (function () {
function ActionSheetCmp(params, renderer) {
this.d = params.data;
if (this.d.cssClass) {
renderer.setElementClass(elementRef, this.d.cssClass, true);
}
}
ActionSheetCmp.prototype.cancel = function () {
this.d.cancel && this.d.cancel();
return this.close();
};
ActionSheetCmp.prototype.destructive = function () {
if (this.d.destructiveButtonClicked()) {
return this.close();
}
};
ActionSheetCmp.prototype.buttonClicked = function (index) {
if (this.d.buttonClicked(index)) {
return this.close();
}
};
ActionSheetCmp = __decorate([
core_1.Component({
selector: 'ion-action-sheet',
template: '<div (click)="cancel()" tappable disable-activated class="backdrop"></div>' +
'<div class="action-sheet-wrapper">' +
'<div class="action-sheet-container">' +
'<div class="action-sheet-group action-sheet-options">' +
'<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
'<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
'<icon [name]="b.icon" *ng-if="b.icon" class="action-sheet-icon"></icon> ' +
'{{b.text}}' +
'</button>' +
'<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
'<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
'{{d.destructiveText}}' +
'</button>' +
'</div>' +
'<div class="action-sheet-group" *ng-if="d.cancelText">' +
'<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
'<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon" class="action-sheet-icon"></icon> ' +
'{{d.cancelText}}' +
'</button>' +
'</div>' +
'</div>' +
'</div>',
host: {
'role': 'dialog'
},
directives: [common_1.NgFor, common_1.NgIf, icon_1.Icon]
}),
__metadata('design:paramtypes', [(typeof (_a = typeof nav_controller_1.NavParams !== 'undefined' && nav_controller_1.NavParams) === 'function' && _a) || Object, (typeof (_b = typeof core_1.Renderer !== 'undefined' && core_1.Renderer) === 'function' && _b) || Object])
], ActionSheetCmp);
return ActionSheetCmp;
var _a, _b;
})();
/**
* @name ActionSheet
* @description
* The Action Sheet is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
* There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing.
*
* @usage
* ```ts
* openMenu() {
*
* this.actionSheet.open({
* buttons: [
* { text: 'Share This' },
* { text: 'Move' }
* ],
* destructiveText: 'Delete',
* titleText: 'Modify your album',
* cancelText: 'Cancel',
* cancel: function() {
* console.log('Canceled');
* },
* destructiveButtonClicked: () => {
* console.log('Destructive clicked');
* },
* buttonClicked: function(index) {
* console.log('Button clicked', index);
* if(index == 1) { return false; }
* return true;
* }
*
* }).then(actionSheetRef => {
* this.actionSheetRef = actionSheetRef;
* });
*
* }
* ```
*
* @demo /docs/v2/demos/action-sheet/
* @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs}
*/
var ActionSheet = (function () {
function ActionSheet(ctrl, config) {
this.ctrl = ctrl;
this.config = config;
}
/**
* Create and open a new Action Sheet. This is the
* public API, and most often you will only use ActionSheet.open()
*
* @param {Object} [opts={}] An object containing optional settings.
* - `[Object]` `buttons` Which buttons to show. Each button is an object with a `text` field.
* - `{string}` `titleText` The title to show on the action sheet.
* - `{string=}` `cancelText` the text for a 'cancel' button on the action sheet.
* - `{string=}` `destructiveText` The text for a 'danger' on the action sheet.
* - `{function=}` `cancel` Called if the cancel button is pressed, the backdrop is tapped or
* the hardware back button is pressed.
* - `{function=}` `buttonClicked` Called when one of the non-destructive buttons is clicked,
* with the index of the button that was clicked and the button object. Return true to close
* the action sheet, or false to keep it opened.
* - `{function=}` `destructiveButtonClicked` Called when the destructive button is clicked.
* Return true to close the action sheet, or false to keep it opened.
* @param {String} [opts.enterAnimation='action-sheet-slide-in'] The class used to animate an actionSheet that is entering.
* @param {String} [opts.leaveAnimation='action-sheet-slide-out'] The class used to animate an actionSheet that is leaving.
* @return {Promise} Promise that resolves when the action sheet is open.
*/
ActionSheet.prototype.open = function (opts) {
if (opts === void 0) { opts = {}; }
opts = util_1.extend({
pageType: OVERLAY_TYPE,
enterAnimation: this.config.get('actionSheetEnter'),
leaveAnimation: this.config.get('actionSheetLeave'),
cancelIcon: this.config.get('actionSheetCancelIcon'),
destructiveIcon: this.config.get('actionSheetDestructiveIcon')
}, opts);
return this.ctrl.open(ActionSheetCmp, opts, opts);
};
/**
* Retrieves an actionSheet instance.
*
* @param {String} [handle] The handle used to open the instance to be retrieved.
* @returns {ActionSheet} An actionSheet instance.
*/
ActionSheet.prototype.get = function (handle) {
if (handle) {
return this.ctrl.getByHandle(handle);
}
return this.ctrl.getByType(OVERLAY_TYPE);
};
ActionSheet = __decorate([
core_1.Injectable(),
__metadata('design:paramtypes', [(typeof (_a = typeof overlay_controller_1.OverlayController !== 'undefined' && overlay_controller_1.OverlayController) === 'function' && _a) || Object, (typeof (_b = typeof config_1.Config !== 'undefined' && config_1.Config) === 'function' && _b) || Object])
], ActionSheet);
return ActionSheet;
var _a, _b;
})();
exports.ActionSheet = ActionSheet;
var OVERLAY_TYPE = 'action-sheet';
var ActionSheetSlideIn = (function (_super) {
__extends(ActionSheetSlideIn, _super);
function ActionSheetSlideIn(enteringView, leavingView, opts) {
_super.call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new animation_1.Animation(ele.querySelector('.backdrop'));
var wrapper = new animation_1.Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '100%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add([backdrop, wrapper]);
}
return ActionSheetSlideIn;
})(animation_1.Animation);
animation_1.Animation.register('action-sheet-slide-in', ActionSheetSlideIn);
var ActionSheetSlideOut = (function (_super) {
__extends(ActionSheetSlideOut, _super);
function ActionSheetSlideOut(enteringView, leavingView, opts) {
_super.call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new animation_1.Animation(ele.querySelector('.backdrop'));
var wrapper = new animation_1.Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.4, 0);
wrapper.fromTo('translateY', '0%', '100%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add([backdrop, wrapper]);
}
return ActionSheetSlideOut;
})(animation_1.Animation);
animation_1.Animation.register('action-sheet-slide-out', ActionSheetSlideOut);
var ActionSheetMdSlideIn = (function (_super) {
__extends(ActionSheetMdSlideIn, _super);
function ActionSheetMdSlideIn(enteringView, leavingView, opts) {
_super.call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new animation_1.Animation(ele.querySelector('.backdrop'));
var wrapper = new animation_1.Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.26);
wrapper.fromTo('translateY', '100%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add([backdrop, wrapper]);
}
return ActionSheetMdSlideIn;
})(animation_1.Animation);
animation_1.Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
var ActionSheetMdSlideOut = (function (_super) {
__extends(ActionSheetMdSlideOut, _super);
function ActionSheetMdSlideOut(enteringView, leavingView, opts) {
_super.call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new animation_1.Animation(ele.querySelector('.backdrop'));
var wrapper = new animation_1.Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.26, 0);
wrapper.fromTo('translateY', '0%', '100%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add([backdrop, wrapper]);
}
return ActionSheetMdSlideOut;
})(animation_1.Animation);
animation_1.Animation.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);