From a7d6ea637c6809d29463de5159091ac0452e1991 Mon Sep 17 00:00:00 2001 From: Brad Richardson Date: Wed, 3 Aug 2016 22:31:55 -0400 Subject: [PATCH] feat(mdPanel): Wrapper and Panel elements referenced in the MdPanelRef A JQLite reference of the Container/Wrapper and Panel elements have been added to the MdPanelRef object as public properties. It is now possible to use the standard `addClass`, `removeClass`, `toggleClass`, etc methods on those referenced elements. Fixes #9109 Ping @ErinCoughlan --- src/components/panel/panel.js | 160 +++++++++++++++++++---------- src/components/panel/panel.spec.js | 127 +++++++++++------------ 2 files changed, 165 insertions(+), 122 deletions(-) diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index 1d14328bb3d..a744e91e940 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -145,12 +145,12 @@ angular * when the open() action is finished. * - `onRemoving` - `{function=}`: Callback function used to announce the * close/hide() action is starting. - * - `onDomRemoved` - `{function=}`: Callback function used to announce when the - * panel is removed from the DOM. + * - `onDomRemoved` - `{function=}`: Callback function used to announce when + * the panel is removed from the DOM. * - `origin` - `{(string|!angular.JQLite|!Element)=}`: The element to - * focus on when the panel closes. This is commonly the element which triggered - * the opening of the panel. If you do not use `origin`, you need to control - * the focus manually. + * focus on when the panel closes. This is commonly the element which + * triggered the opening of the panel. If you do not use `origin`, you need + * to control the focus manually. * * @returns {MdPanelRef} panelRef */ @@ -214,6 +214,12 @@ angular * create. * - `isAttached` - `{boolean}`: Whether the panel is attached to the DOM. * Visibility to the user does not factor into isAttached. + * - `panelContainer` - `{angular.JQLite}`: The wrapper element containing the + * panel. This property is added in order to have access to the `addClass`, + * `removeClass`, `toggleClass`, etc methods. + * - `panelEl` - `{angular.JQLite}`: The panel element. This property is added + * in order to have access to the `addClass`, `removeClass`, `toggleClass`, + * etc methods. */ /** @@ -289,10 +295,14 @@ angular /** * @ngdoc method * @name MdPanelRef#addClass + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * @description - * Adds a class to the panel. DO NOT use this to hide/show the panel. + * Adds a class to the panel. DO NOT use this hide/show the panel. * - * @param {string} newClass Class to be added. + * @param {string} newClass class to be added. * @param {boolean} toElement Whether or not to add the class to the panel * element instead of the container. */ @@ -300,6 +310,10 @@ angular /** * @ngdoc method * @name MdPanelRef#removeClass + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * @description * Removes a class from the panel. DO NOT use this to hide/show the panel. * @@ -311,6 +325,10 @@ angular /** * @ngdoc method * @name MdPanelRef#toggleClass + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * @description * Toggles a class on the panel. DO NOT use this to hide/show the panel. * @@ -820,6 +838,12 @@ function MdPanelRef(config, $injector) { /** @type {!Object} */ this.config = config; + /** @type {!angular.JQLite|undefined} */ + this.panelContainer; + + /** @type {!angular.JQLite|undefined} */ + this.panelEl; + /** * Whether the panel is attached. This is synchronous. When attach is called, * isAttached is set to true. When detach is called, isAttached is set to @@ -829,12 +853,6 @@ function MdPanelRef(config, $injector) { this.isAttached = false; // Private variables. - /** @private {!angular.JQLite|undefined} */ - this._panelContainer; - - /** @private {!angular.JQLite|undefined} */ - this._panelEl; - /** @private {Array} */ this._removeListeners = []; @@ -901,7 +919,7 @@ MdPanelRef.prototype.close = function() { * the panel is attached. */ MdPanelRef.prototype.attach = function() { - if (this.isAttached && this._panelEl) { + if (this.isAttached && this.panelEl) { return this._$q.when(this); } @@ -954,7 +972,7 @@ MdPanelRef.prototype.detach = function() { self._bottomFocusTrap.parentNode.removeChild(self._bottomFocusTrap); } - self._panelContainer.remove(); + self.panelContainer.remove(); self.isAttached = false; return self._$q.when(self); }; @@ -993,19 +1011,19 @@ MdPanelRef.prototype.destroy = function() { * shown and animations finish. */ MdPanelRef.prototype.show = function() { - if (!this._panelContainer) { + if (!this.panelContainer) { return this._$q(function(resolve, reject) { reject('Panel does not exist yet. Call open() or attach().'); }); } - if (!this._panelContainer.hasClass(MD_PANEL_HIDDEN)) { + if (!this.panelContainer.hasClass(MD_PANEL_HIDDEN)) { return this._$q.when(this); } var self = this; var animatePromise = function() { - self.removeClass(MD_PANEL_HIDDEN); + self.panelContainer.removeClass(MD_PANEL_HIDDEN); return self._animateOpen(); }; @@ -1030,13 +1048,13 @@ MdPanelRef.prototype.show = function() { * hidden and animations finish. */ MdPanelRef.prototype.hide = function() { - if (!this._panelContainer) { + if (!this.panelContainer) { return this._$q(function(resolve, reject) { reject('Panel does not exist yet. Call open() or attach().'); }); } - if (this._panelContainer.hasClass(MD_PANEL_HIDDEN)) { + if (this.panelContainer.hasClass(MD_PANEL_HIDDEN)) { return this._$q.when(this); } @@ -1054,7 +1072,7 @@ MdPanelRef.prototype.hide = function() { }; var hidePanel = function() { - self.addClass(MD_PANEL_HIDDEN); + self.panelContainer.addClass(MD_PANEL_HIDDEN); }; self._$q.all([ @@ -1071,12 +1089,22 @@ MdPanelRef.prototype.hide = function() { /** * Add a class to the panel. DO NOT use this to hide/show the panel. + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * * @param {string} newClass Class to be added. * @param {boolean} toElement Whether or not to add the class to the panel * element instead of the container. */ MdPanelRef.prototype.addClass = function(newClass, toElement) { + this._$log.warn( + 'The addClass method is in the process of being deprecated. ' + + 'Full deprecation is scheduled for the Angular Material 1.2 release. ' + + 'To achieve the same results, use the panelContainer or panelEl ' + + 'JQLite elements that are referenced in MdPanelRef.'); + if (!this._panelContainer) { throw new Error('Panel does not exist yet. Call open() or attach().'); } @@ -1091,12 +1119,22 @@ MdPanelRef.prototype.addClass = function(newClass, toElement) { /** * Remove a class from the panel. DO NOT use this to hide/show the panel. + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * * @param {string} oldClass Class to be removed. * @param {boolean} fromElement Whether or not to remove the class from the * panel element instead of the container. */ MdPanelRef.prototype.removeClass = function(oldClass, fromElement) { + this._$log.warn( + 'The removeClass method is in the process of being deprecated. ' + + 'Full deprecation is scheduled for the Angular Material 1.2 release. ' + + 'To achieve the same results, use the panelContainer or panelEl ' + + 'JQLite elements that are referenced in MdPanelRef.'); + if (!this._panelContainer) { throw new Error('Panel does not exist yet. Call open() or attach().'); } @@ -1111,12 +1149,22 @@ MdPanelRef.prototype.removeClass = function(oldClass, fromElement) { /** * Toggle a class on the panel. DO NOT use this to hide/show the panel. + * @deprecated + * This method is in the process of being deprecated in favor of using the panel + * and container JQLite elements that are referenced in the MdPanelRef object. + * Full deprecation is scheduled for material 1.2. * * @param {string} toggleClass The class to toggle. * @param {boolean} onElement Whether or not to toggle the class on the panel * element instead of the container. */ MdPanelRef.prototype.toggleClass = function(toggleClass, onElement) { + this._$log.warn( + 'The toggleClass method is in the process of being deprecated. ' + + 'Full deprecation is scheduled for the Angular Material 1.2 release. ' + + 'To achieve the same results, use the panelContainer or panelEl ' + + 'JQLite elements that are referenced in MdPanelRef.'); + if (!this._panelContainer) { throw new Error('Panel does not exist yet. Call open() or attach().'); } @@ -1147,34 +1195,34 @@ MdPanelRef.prototype._createPanel = function() { self.config.locals.mdPanelRef = self; self._$mdCompiler.compile(self.config) .then(function(compileData) { - self._panelContainer = compileData.link(self.config['scope']); - getElement(self.config['attachTo']).append(self._panelContainer); + self.panelContainer = compileData.link(self.config['scope']); + getElement(self.config['attachTo']).append(self.panelContainer); if (self.config['disableParentScroll']) { self._restoreScroll = self._$mdUtil.disableScrollAround( null, - self._panelContainer, + self.panelContainer, { disableScrollMask: true } ); } - self._panelEl = angular.element( - self._panelContainer[0].querySelector('.md-panel')); + self.panelEl = angular.element( + self.panelContainer[0].querySelector('.md-panel')); // Add a custom CSS class to the panel element. if (self.config['panelClass']) { - self._panelEl.addClass(self.config['panelClass']); + self.panelEl.addClass(self.config['panelClass']); } // Handle click and touch events for the panel container. if (self.config['propagateContainerEvents']) { - self._panelContainer.css('pointer-events', 'none'); + self.panelContainer.css('pointer-events', 'none'); } // Panel may be outside the $rootElement, tell ngAnimate to animate // regardless. if (self._$animate.pin) { - self._$animate.pin(self._panelContainer, + self._$animate.pin(self.panelContainer, getElement(self.config['attachTo'])); } @@ -1195,18 +1243,18 @@ MdPanelRef.prototype._createPanel = function() { MdPanelRef.prototype._addStyles = function() { var self = this; return this._$q(function(resolve) { - self._panelContainer.css('z-index', self.config['zIndex']); - self._panelEl.css('z-index', self.config['zIndex'] + 1); + self.panelContainer.css('z-index', self.config['zIndex']); + self.panelEl.css('z-index', self.config['zIndex'] + 1); var hideAndResolve = function() { // Remove left: -9999px and add hidden class. - self._panelEl.css('left', ''); - self._panelContainer.addClass(MD_PANEL_HIDDEN); + self.panelEl.css('left', ''); + self.panelContainer.addClass(MD_PANEL_HIDDEN); resolve(self); }; if (self.config['fullscreen']) { - self._panelEl.addClass('_md-panel-fullscreen'); + self.panelEl.addClass('_md-panel-fullscreen'); hideAndResolve(); return; // Don't setup positioning. } @@ -1233,7 +1281,7 @@ MdPanelRef.prototype._addStyles = function() { * @param {!MdPanelPosition} position */ MdPanelRef.prototype.updatePosition = function(position) { - if (!this._panelContainer) { + if (!this.panelContainer) { throw new Error('Panel does not exist yet. Call open() or attach().'); } @@ -1251,21 +1299,21 @@ MdPanelRef.prototype._updatePosition = function(init) { var positionConfig = this.config['position']; if (positionConfig) { - positionConfig._setPanelPosition(this._panelEl); + positionConfig._setPanelPosition(this.panelEl); // Hide the panel now that position is known. if (init) { - this._panelContainer.addClass(MD_PANEL_HIDDEN); + this.panelContainer.addClass(MD_PANEL_HIDDEN); } - this._panelEl.css(MdPanelPosition.absPosition.TOP, positionConfig.getTop()); - this._panelEl.css(MdPanelPosition.absPosition.BOTTOM, positionConfig.getBottom()); - this._panelEl.css(MdPanelPosition.absPosition.LEFT, positionConfig.getLeft()); - this._panelEl.css(MdPanelPosition.absPosition.RIGHT, positionConfig.getRight()); + this.panelEl.css(MdPanelPosition.absPosition.TOP, positionConfig.getTop()); + this.panelEl.css(MdPanelPosition.absPosition.BOTTOM, positionConfig.getBottom()); + this.panelEl.css(MdPanelPosition.absPosition.LEFT, positionConfig.getLeft()); + this.panelEl.css(MdPanelPosition.absPosition.RIGHT, positionConfig.getRight()); // Use the vendor prefixed version of transform. var prefixedTransform = this._$mdConstant.CSS.TRANSFORM; - this._panelEl.css(prefixedTransform, positionConfig.getTransform()); + this.panelEl.css(prefixedTransform, positionConfig.getTransform()); } }; @@ -1281,8 +1329,8 @@ MdPanelRef.prototype._focusOnOpen = function() { // isn't available to focus. var self = this; this._$rootScope['$$postDigest'](function() { - var target = self._$mdUtil.findFocusTarget(self._panelEl) || - self._panelEl; + var target = self._$mdUtil.findFocusTarget(self.panelEl) || + self.panelEl; target.focus(); }); } @@ -1362,12 +1410,12 @@ MdPanelRef.prototype._configureEscapeToClose = function() { }; // Add keydown listeners - this._panelContainer.on('keydown', keyHandlerFn); + this.panelContainer.on('keydown', keyHandlerFn); parentTarget.on('keydown', keyHandlerFn); // Queue remove listeners function this._removeListeners.push(function() { - self._panelContainer.off('keydown', keyHandlerFn); + self.panelContainer.off('keydown', keyHandlerFn); parentTarget.off('keydown', keyHandlerFn); }); } @@ -1380,7 +1428,7 @@ MdPanelRef.prototype._configureEscapeToClose = function() { */ MdPanelRef.prototype._configureClickOutsideToClose = function() { if (this.config['clickOutsideToClose']) { - var target = this._panelContainer; + var target = this.panelContainer; var sourceElem; // Keep track of the element on which the mouse originally went down @@ -1449,9 +1497,9 @@ MdPanelRef.prototype._configureScrollListener = function() { */ MdPanelRef.prototype._configureTrapFocus = function() { // Focus doesn't remain instead of the panel without this. - this._panelEl.attr('tabIndex', '-1'); + this.panelEl.attr('tabIndex', '-1'); if (this.config['trapFocus']) { - var element = this._panelEl; + var element = this.panelEl; // Set up elements before and after the panel to capture focus and // redirect back into the panel. this._topFocusTrap = FOCUS_TRAP_TEMPLATE.clone()[0]; @@ -1486,11 +1534,11 @@ MdPanelRef.prototype._configureTrapFocus = function() { * @private */ MdPanelRef.prototype._animateOpen = function() { - this.addClass('md-panel-is-showing'); + this.panelContainer.addClass('md-panel-is-showing'); var animationConfig = this.config['animation']; if (!animationConfig) { // Promise is in progress, return it. - this.addClass('_md-panel-shown'); + this.panelContainer.addClass('_md-panel-shown'); return this._$q.when(this); } @@ -1503,7 +1551,7 @@ MdPanelRef.prototype._animateOpen = function() { done(); }; - animationConfig.animateOpen(self._panelEl) + animationConfig.animateOpen(self.panelEl) .then(done, warnAndOpen); }); }; @@ -1517,15 +1565,15 @@ MdPanelRef.prototype._animateOpen = function() { MdPanelRef.prototype._animateClose = function() { var animationConfig = this.config['animation']; if (!animationConfig) { - this.removeClass('md-panel-is-showing'); - this.removeClass('_md-panel-shown'); + this.panelContainer.removeClass('md-panel-is-showing'); + this.panelContainer.removeClass('_md-panel-shown'); return this._$q.when(this); } var self = this; return this._$q(function(resolve) { var done = function() { - self.removeClass('md-panel-is-showing'); + self.panelContainer.removeClass('md-panel-is-showing'); resolve(self); }; var warnAndClose = function() { @@ -1534,7 +1582,7 @@ MdPanelRef.prototype._animateClose = function() { done(); }; - animationConfig.animateClose(self._panelEl) + animationConfig.animateClose(self.panelEl) .then(done, warnAndClose); }); }; diff --git a/src/components/panel/panel.spec.js b/src/components/panel/panel.spec.js index 71063c66d9e..bd7bd29c70c 100644 --- a/src/components/panel/panel.spec.js +++ b/src/components/panel/panel.spec.js @@ -176,7 +176,7 @@ describe('$mdPanel', function() { expect(openResolved).toBe(true); expect(PANEL_WRAPPER_CLASS).toExist(); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); expect(panelRef.isAttached).toEqual(true); panelRef.close().then(function() { closeResolved = true; }); @@ -227,7 +227,7 @@ describe('$mdPanel', function() { expect(openResolved).toBe(true); expect(panelRef.isAttached).toEqual(true); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); }); it('should reject on show when opening', function() { @@ -242,7 +242,7 @@ describe('$mdPanel', function() { expect(openRejected).toBe(true); expect(panelRef.isAttached).toEqual(true); - expect(panelRef._panelContainer).toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS); }); it('should reject on hide when closing', function() { @@ -250,7 +250,7 @@ describe('$mdPanel', function() { openPanel(); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); expect(panelRef.isAttached).toEqual(true); panelRef.hide = function() { @@ -269,7 +269,7 @@ describe('$mdPanel', function() { openPanel(); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); expect(panelRef.isAttached).toEqual(true); panelRef.config.animation.animateClose = function() { @@ -281,7 +281,7 @@ describe('$mdPanel', function() { expect(closeResolved).toBe(true); expect(panelRef.isAttached).toEqual(false); - expect(panelRef._panelContainer).toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS); }); it('should reject on detach when closing', function() { @@ -289,7 +289,7 @@ describe('$mdPanel', function() { openPanel(); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); expect(panelRef.isAttached).toEqual(true); panelRef.detach = function() { @@ -539,7 +539,7 @@ describe('$mdPanel', function() { var topTrap = focusTraps[0]; var bottomTrap = focusTraps[1]; - var panel = panelRef._panelEl; + var panel = panelRef.panelEl; var isPanelFocused = false; panel[0].addEventListener('focus', function() { isPanelFocused = true; @@ -703,7 +703,7 @@ describe('$mdPanel', function() { expect(PANEL_EL).toExist(); expect(attachResolved).toBe(true); expect(panelRef.isAttached).toEqual(true); - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); }); it('should reject open when onDomAdded rejects', function() { @@ -725,7 +725,7 @@ describe('$mdPanel', function() { expect(onDomAddedCalled).toBe(true); expect(openRejected).toBe(true); expect(panelRef.isAttached).toEqual(true); - expect(panelRef._panelContainer).toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS); }); it('should call onOpenComplete if provided after adding the panel to the ' + @@ -896,84 +896,79 @@ describe('$mdPanel', function() { }); describe('CSS class logic:', function() { - it('should add a class to the container/wrapper when toElement=false', - function() { - openPanel(DEFAULT_CONFIG); + it('should add a class to the container/wrapper', function() { + openPanel(DEFAULT_CONFIG); - panelRef.addClass('my-class'); + panelRef.panelContainer.addClass('my-class'); - expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); - }); + expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); + }); - it('should add a class to the element when toElement=true', function() { + it('should add a class to the element', function() { openPanel(DEFAULT_CONFIG); - panelRef.addClass('my-class', true); + panelRef.panelEl.addClass('my-class'); expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); expect(PANEL_EL).toHaveClass('my-class'); }); - it('should remove a class from the container/wrapper when fromElement=false', - function() { - openPanel(DEFAULT_CONFIG); + it('should remove a class from the container/wrapper', function() { + openPanel(DEFAULT_CONFIG); - panelRef.addClass('my-class'); + panelRef.panelContainer.addClass('my-class'); - expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); + expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); - panelRef.removeClass('my-class'); + panelRef.panelContainer.removeClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); - }); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); + }); - it('should remove a class from the element when fromElement=true', - function() { - openPanel(DEFAULT_CONFIG); + it('should remove a class from the element', function() { + openPanel(DEFAULT_CONFIG); - panelRef.addClass('my-class', true); + panelRef.panelEl.addClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).toHaveClass('my-class'); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).toHaveClass('my-class'); - panelRef.removeClass('my-class', true); + panelRef.panelEl.removeClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); - }); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); + }); - it('should toggle a class on the container/wrapper when onElement=false', - function() { - openPanel(DEFAULT_CONFIG); + it('should toggle a class on the container/wrapper', function() { + openPanel(DEFAULT_CONFIG); - panelRef.toggleClass('my-class'); + panelRef.panelContainer.toggleClass('my-class'); - expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); + expect(PANEL_WRAPPER_CLASS).toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); - panelRef.toggleClass('my-class'); + panelRef.panelContainer.toggleClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('my-class'); - }); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('my-class'); + }); - it('should toggle a class on the element when onElement=true', - function() { - openPanel(DEFAULT_CONFIG); + it('should toggle a class on the element', function() { + openPanel(DEFAULT_CONFIG); - panelRef.toggleClass('my-class', true); + panelRef.panelEl.toggleClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).toHaveClass('my-class'); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).toHaveClass('my-class'); - panelRef.toggleClass('my-class', true); + panelRef.panelEl.toggleClass('my-class'); - expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); - expect(PANEL_EL).not.toHaveClass('n-class'); - }); + expect(PANEL_WRAPPER_CLASS).not.toHaveClass('my-class'); + expect(PANEL_EL).not.toHaveClass('n-class'); + }); }); describe('should focus on the origin element on', function() { @@ -1312,7 +1307,7 @@ describe('$mdPanel', function() { .absolute() .top(top) .left(left); - + config['position'] = position; openPanel(config); @@ -2051,11 +2046,11 @@ describe('$mdPanel', function() { openPanel(); // If animation dies, panel doesn't unhide. - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); closePanel(); // If animation dies, panel doesn't hide. - expect(panelRef._panelContainer).toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS); }); it('should animate with custom class', function() { @@ -2065,11 +2060,11 @@ describe('$mdPanel', function() { openPanel(); // If animation dies, panel doesn't unhide. - expect(panelRef._panelContainer).not.toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).not.toHaveClass(HIDDEN_CLASS); closePanel(); // If animation dies, panel doesn't hide. - expect(panelRef._panelContainer).toHaveClass(HIDDEN_CLASS); + expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS); }); describe('should determine openFrom when', function() { @@ -2147,7 +2142,7 @@ describe('$mdPanel', function() { return; } - var container = panelRef._panelContainer; + var container = panelRef.panelContainer; container.triggerHandler({ type: 'mousedown', @@ -2167,7 +2162,7 @@ describe('$mdPanel', function() { return; } - var container = panelRef._panelContainer; + var container = panelRef.panelContainer; container.triggerHandler({ type: 'keydown',