UNPKG

ionic-framework

Version:

An advanced HTML5 mobile app framework built on Angular2

448 lines (447 loc) 16 kB
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); }; var __param = (this && this.__param) || function (paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); } }; var core_1 = require('angular2/core'); var ion_1 = require('../ion'); var config_1 = require('../../config/config'); var platform_1 = require('../../platform/platform'); var keyboard_1 = require('../../util/keyboard'); var menu_gestures_1 = require('./menu-gestures'); var menu_controller_1 = require('./menu-controller'); var util_1 = require('../../util/util'); /** * @private */ var Menu = (function (_super) { __extends(Menu, _super); function Menu(_menuCtrl, _elementRef, _config, _platform, _renderer, _keyboard, _zone) { _super.call(this, _elementRef); this._menuCtrl = _menuCtrl; this._elementRef = _elementRef; this._config = _config; this._platform = _platform; this._renderer = _renderer; this._keyboard = _keyboard; this._zone = _zone; this._preventTime = 0; this._isEnabled = true; this._isSwipeEnabled = true; this._isPers = false; this._init = false; /** * @private */ this.isOpen = false; /** * @private */ this.opening = new core_1.EventEmitter(); } Object.defineProperty(Menu.prototype, "enabled", { /** * @private */ get: function () { return this._isEnabled; }, set: function (val) { this._isEnabled = util_1.isTrueProperty(val); this._setListeners(); }, enumerable: true, configurable: true }); Object.defineProperty(Menu.prototype, "swipeEnabled", { /** * @private */ get: function () { return this._isSwipeEnabled; }, set: function (val) { this._isSwipeEnabled = util_1.isTrueProperty(val); this._setListeners(); }, enumerable: true, configurable: true }); Object.defineProperty(Menu.prototype, "persistent", { /** * @private */ get: function () { return this._isPers; }, set: function (val) { this._isPers = util_1.isTrueProperty(val); }, enumerable: true, configurable: true }); /** * @private */ Menu.prototype.ngOnInit = function () { var self = this; self._init = true; var content = self.content; self._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement(); // requires content element if (!self._cntEle) { return void 0; } // normalize the "side" if (self.side !== 'left' && self.side !== 'right') { self.side = 'left'; } self._renderer.setElementAttribute(self._elementRef.nativeElement, 'side', self.side); // normalize the "type" if (!self.type) { self.type = self._config.get('menuType'); } self._renderer.setElementAttribute(self._elementRef.nativeElement, 'type', self.type); // add the gestures self._cntGesture = new menu_gestures_1.MenuContentGesture(self, self.getContentElement()); self._menuGesture = new menu_gestures_1.MenuTargetGesture(self, self.getNativeElement()); // register listeners if this menu is enabled // check if more than one menu is on the same side var hasEnabledSameSideMenu = self._menuCtrl.getMenus().some(function (m) { return m.side === self.side && m.enabled; }); if (hasEnabledSameSideMenu) { // auto-disable if another menu on the same side is already enabled self._isEnabled = false; } self._setListeners(); // create a reusable click handler on this instance, but don't assign yet self.onContentClick = function (ev) { if (self._isEnabled) { ev.preventDefault(); ev.stopPropagation(); self.close(); } }; self._cntEle.classList.add('menu-content'); self._cntEle.classList.add('menu-content-' + self.type); // register this menu with the app's menu controller self._menuCtrl.register(self); }; /** * @private */ Menu.prototype._setListeners = function () { var self = this; if (self._init) { // only listen/unlisten if the menu has initialized if (self._isEnabled && self._isSwipeEnabled && !self._cntGesture.isListening) { // should listen, but is not currently listening void 0; self._zone.runOutsideAngular(function () { self._cntGesture.listen(); self._menuGesture.listen(); }); } else if (self._cntGesture.isListening && (!self._isEnabled || !self._isSwipeEnabled)) { // should not listen, but is currently listening void 0; self._cntGesture.unlisten(); self._menuGesture.unlisten(); } } }; /** * @private */ Menu.prototype._getType = function () { if (!this._type) { this._type = menu_controller_1.MenuController.create(this.type, this); if (this._config.get('animate') === false) { this._type.ani.duration(0); } } return this._type; }; /** * Sets the state of the Menu to open or not. * @param {boolean} shouldOpen If the Menu is open or not. * @return {Promise} returns a promise once set */ Menu.prototype.setOpen = function (shouldOpen) { var _this = this; // _isPrevented is used to prevent unwanted opening/closing after swiping open/close // or swiping open the menu while pressing down on the menuToggle button if ((shouldOpen && this.isOpen) || this._isPrevented()) { return Promise.resolve(this.isOpen); } this._before(); return new Promise(function (resolve) { _this._getType().setOpen(shouldOpen, function () { _this._after(shouldOpen); resolve(_this.isOpen); }); }); }; /** * @private */ Menu.prototype.swipeStart = function () { // user started swiping the menu open/close if (this._isPrevented() || !this._isEnabled || !this._isSwipeEnabled) return; this._before(); this._getType().setProgressStart(this.isOpen); }; /** * @private */ Menu.prototype.swipeProgress = function (stepValue) { // user actively dragging the menu if (this._isEnabled && this._isSwipeEnabled) { this._prevent(); this._getType().setProgessStep(stepValue); this.opening.next(stepValue); } }; /** * @private */ Menu.prototype.swipeEnd = function (shouldComplete, currentStepValue) { var _this = this; // user has finished dragging the menu if (this._isEnabled && this._isSwipeEnabled) { this._prevent(); this._getType().setProgressEnd(shouldComplete, currentStepValue, function (isOpen) { void 0; _this._after(isOpen); }); } }; /** * @private */ Menu.prototype._before = function () { // this places the menu into the correct location before it animates in // this css class doesn't actually kick off any animations if (this._isEnabled) { this.getNativeElement().classList.add('show-menu'); this.getBackdropElement().classList.add('show-backdrop'); this._prevent(); this._keyboard.close(); } }; /** * @private */ Menu.prototype._after = function (isOpen) { // keep opening/closing the menu disabled for a touch more yet // only add listeners/css if it's enabled and isOpen // and only remove listeners/css if it's not open if ((this._isEnabled && isOpen) || !isOpen) { this._prevent(); this.isOpen = isOpen; this._cntEle.classList[isOpen ? 'add' : 'remove']('menu-content-open'); this._cntEle.removeEventListener('click', this.onContentClick); if (isOpen) { this._cntEle.addEventListener('click', this.onContentClick); } else { this.getNativeElement().classList.remove('show-menu'); this.getBackdropElement().classList.remove('show-backdrop'); } } }; /** * @private */ Menu.prototype._prevent = function () { // used to prevent unwanted opening/closing after swiping open/close // or swiping open the menu while pressing down on the menuToggle this._preventTime = Date.now() + 20; }; /** * @private */ Menu.prototype._isPrevented = function () { return this._preventTime > Date.now(); }; /** * Progamatically open the Menu. * @return {Promise} returns a promise when the menu is fully opened. */ Menu.prototype.open = function () { return this.setOpen(true); }; /** * Progamatically close the Menu. * @return {Promise} returns a promise when the menu is fully closed. */ Menu.prototype.close = function () { return this.setOpen(false); }; /** * Toggle the menu. If it's closed, it will open, and if opened, it will close. * @return {Promise} returns a promise when the menu has been toggled. */ Menu.prototype.toggle = function () { return this.setOpen(!this.isOpen); }; /** * Used to enable or disable a menu. For example, there could be multiple * left menus, but only one of them should be able to be opened at the same * time. If there are multiple menus on the same side, then enabling one menu * will also automatically disable all the others that are on the same side. * @param {boolean} shouldEnable True if it should be enabled, false if not. * @return {Menu} Returns the instance of the menu, which is useful for chaining. */ Menu.prototype.enable = function (shouldEnable) { var _this = this; this.enabled = shouldEnable; if (!shouldEnable && this.isOpen) { // close if this menu is open, and should not be enabled this.close(); } if (shouldEnable) { // if this menu should be enabled // then find all the other menus on this same side // and automatically disable other same side menus var sameSideMenus = this._menuCtrl .getMenus() .filter(function (m) { return m.side === _this.side && m !== _this; }) .map(function (m) { return m.enabled = false; }); } return this; }; /** * Used to enable or disable the ability to swipe open the menu. * @param {boolean} shouldEnable True if it should be swipe-able, false if not. * @return {Menu} Returns the instance of the menu, which is useful for chaining. */ Menu.prototype.swipeEnable = function (shouldEnable) { this.swipeEnabled = shouldEnable; return this; }; /** * @private */ Menu.prototype.getMenuElement = function () { return this.getNativeElement(); }; /** * @private */ Menu.prototype.getContentElement = function () { return this._cntEle; }; /** * @private */ Menu.prototype.getBackdropElement = function () { return this.backdrop.elementRef.nativeElement; }; /** * @private */ Menu.prototype.ngOnDestroy = function () { this._menuCtrl.unregister(this); this._cntGesture && this._cntGesture.destroy(); this._menuGesture && this._menuGesture.destroy(); this._type && this._type.destroy(); this._resizeUnreg && this._resizeUnreg(); this._cntEle = null; }; __decorate([ core_1.Input(), __metadata('design:type', Object) ], Menu.prototype, "content", void 0); __decorate([ core_1.Input(), __metadata('design:type', String) ], Menu.prototype, "id", void 0); __decorate([ core_1.Input(), __metadata('design:type', String) ], Menu.prototype, "side", void 0); __decorate([ core_1.Input(), __metadata('design:type', String) ], Menu.prototype, "type", void 0); __decorate([ core_1.Input(), __metadata('design:type', Boolean) ], Menu.prototype, "enabled", null); __decorate([ core_1.Input(), __metadata('design:type', Boolean) ], Menu.prototype, "swipeEnabled", null); __decorate([ core_1.Input(), __metadata('design:type', Boolean) ], Menu.prototype, "persistent", null); __decorate([ core_1.Input(), __metadata('design:type', Number) ], Menu.prototype, "maxEdgeStart", void 0); __decorate([ core_1.Output(), __metadata('design:type', core_1.EventEmitter) ], Menu.prototype, "opening", void 0); Menu = __decorate([ core_1.Component({ selector: 'ion-menu', host: { 'role': 'navigation' }, template: '<ng-content></ng-content>' + '<div tappable disable-activated class="backdrop"></div>', directives: [core_1.forwardRef(function () { return MenuBackdrop; })] }), __metadata('design:paramtypes', [menu_controller_1.MenuController, core_1.ElementRef, config_1.Config, platform_1.Platform, core_1.Renderer, keyboard_1.Keyboard, core_1.NgZone]) ], Menu); return Menu; })(ion_1.Ion); exports.Menu = Menu; /** * @private */ var MenuBackdrop = (function () { function MenuBackdrop(_menuCtrl, elementRef) { this._menuCtrl = _menuCtrl; this.elementRef = elementRef; _menuCtrl.backdrop = this; } /** * @private */ MenuBackdrop.prototype.clicked = function (ev) { void 0; ev.preventDefault(); ev.stopPropagation(); this._menuCtrl.close(); }; MenuBackdrop = __decorate([ core_1.Directive({ selector: '.backdrop', host: { '(click)': 'clicked($event)', } }), __param(0, core_1.Host()), __metadata('design:paramtypes', [Menu, core_1.ElementRef]) ], MenuBackdrop); return MenuBackdrop; })(); exports.MenuBackdrop = MenuBackdrop;