diff --git a/ionic/animations/scroll-to.ts b/ionic/animations/scroll-to.ts index 7130bab44d..386841be86 100644 --- a/ionic/animations/scroll-to.ts +++ b/ionic/animations/scroll-to.ts @@ -35,16 +35,15 @@ export class ScrollTo { y = y || 0; tolerance = tolerance || 0; - let ele = self._el; - let fromY = ele.scrollTop; - let fromX = ele.scrollLeft; + let fromY = self._el.scrollTop; + let fromX = self._el.scrollLeft; let xDistance = Math.abs(x - fromX); let yDistance = Math.abs(y - fromY); if (yDistance <= tolerance && xDistance <= tolerance) { // prevent scrolling if already close to there - this._el = ele = null; + self._el = null; return Promise.resolve(); } @@ -62,6 +61,10 @@ export class ScrollTo { // scroll loop function step() { + if (!self._el) { + return resolve(); + } + let time = Math.min(1, ((Date.now() - start) / duration)); // where .5 would be 50% of time on a linear scale easedT gives a @@ -69,10 +72,10 @@ export class ScrollTo { let easedT = easeOutCubic(time); if (fromY != y) { - ele.scrollTop = parseInt((easedT * (y - fromY)) + fromY, 10); + self._el.scrollTop = parseInt((easedT * (y - fromY)) + fromY, 10); } if (fromX != x) { - ele.scrollLeft = parseInt((easedT * (x - fromX)) + fromX, 10); + self._el.scrollLeft = parseInt((easedT * (x - fromX)) + fromX, 10); } if (time < 1 && self.isPlaying) { @@ -80,12 +83,12 @@ export class ScrollTo { } else if (!self.isPlaying) { // stopped - this._el = ele = null; + self._el = null; reject(); } else { // done - this._el = ele = null; + self._el = null; resolve(); } } diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index f0bcae1eb2..a00c3e6aea 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -90,31 +90,32 @@ export class Menu extends Ion { */ onInit() { super.onInit(); - let content = this.content; - this._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement(); + let self = this; - if (!this._cntEle) { + let content = self.content; + self._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement(); + + if (!self._cntEle) { return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); } - if (this.side !== 'left' && this.side !== 'right') { - this.side = 'left'; + if (self.side !== 'left' && self.side !== 'right') { + self.side = 'left'; } - if (!this.id) { + if (!self.id) { // Auto register - this.id = 'menu'; - this.app.register(this.id, this); + self.id = 'menu'; + self.app.register(self.id, self); } - this._initGesture(); - this._initType(this.type); + self._initGesture(); + self._initType(self.type); - this._cntEle.classList.add('menu-content'); - this._cntEle.classList.add('menu-content-' + this.type); + self._cntEle.classList.add('menu-content'); + self._cntEle.classList.add('menu-content-' + self.type); - let self = this; - this.onContentClick = function(ev) { + self.onContentClick = function(ev) { if (self.isEnabled) { ev.preventDefault(); ev.stopPropagation(); @@ -150,6 +151,9 @@ export class Menu extends Ion { this.type = type; } + /** + * @private + */ _getType() { if (!this._type) { this._type = new menuTypes[this.type](this); @@ -238,7 +242,9 @@ export class Menu extends Ion { */ _after(isOpen) { // keep opening/closing the menu disabled for a touch more yet - if (this.isEnabled) { + // 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; @@ -246,6 +252,7 @@ export class Menu extends Ion { this._cntEle.classList[isOpen ? 'add' : 'remove']('menu-content-open'); this._cntEle.removeEventListener('click', this.onContentClick); + if (isOpen) { this._cntEle.addEventListener('click', this.onContentClick); @@ -297,10 +304,17 @@ export class Menu extends Ion { } /** - * @private + * 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 dragged open. + * @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. */ enable(shouldEnable) { this.isEnabled = shouldEnable; + if (!shouldEnable) { + this.close(); + } + return this; } /** @@ -324,6 +338,9 @@ export class Menu extends Ion { return this.backdrop.elementRef.nativeElement; } + /** + * @private + */ static register(name, cls) { menuTypes[name] = cls; }