@material/drawer
Version:
The Material Components Web drawer component
189 lines • 8.02 kB
JavaScript
/**
* @license
* Copyright 2018 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import { __assign, __extends } from "tslib";
import { MDCFoundation } from '@material/base/foundation';
import { cssClasses, strings } from '../constants';
var MDCDismissibleDrawerFoundation = /** @class */ (function (_super) {
__extends(MDCDismissibleDrawerFoundation, _super);
function MDCDismissibleDrawerFoundation(adapter) {
var _this = _super.call(this, __assign(__assign({}, MDCDismissibleDrawerFoundation.defaultAdapter), adapter)) || this;
_this.animationFrame = 0;
_this.animationTimer = 0;
return _this;
}
Object.defineProperty(MDCDismissibleDrawerFoundation, "strings", {
get: function () {
return strings;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDismissibleDrawerFoundation, "cssClasses", {
get: function () {
return cssClasses;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDismissibleDrawerFoundation, "defaultAdapter", {
get: function () {
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
return {
addClass: function () { return undefined; },
removeClass: function () { return undefined; },
hasClass: function () { return false; },
elementHasClass: function () { return false; },
notifyClose: function () { return undefined; },
notifyOpen: function () { return undefined; },
saveFocus: function () { return undefined; },
restoreFocus: function () { return undefined; },
focusActiveNavigationItem: function () { return undefined; },
trapFocus: function () { return undefined; },
releaseFocus: function () { return undefined; },
};
// tslint:enable:object-literal-sort-keys
},
enumerable: false,
configurable: true
});
MDCDismissibleDrawerFoundation.prototype.destroy = function () {
if (this.animationFrame) {
cancelAnimationFrame(this.animationFrame);
}
if (this.animationTimer) {
clearTimeout(this.animationTimer);
}
};
/**
* Opens the drawer from the closed state.
*/
MDCDismissibleDrawerFoundation.prototype.open = function () {
var _this = this;
if (this.isOpen() || this.isOpening() || this.isClosing()) {
return;
}
this.adapter.addClass(cssClasses.OPEN);
this.adapter.addClass(cssClasses.ANIMATE);
// Wait a frame once display is no longer "none", to establish basis for animation
this.runNextAnimationFrame(function () {
_this.adapter.addClass(cssClasses.OPENING);
});
this.adapter.saveFocus();
};
/**
* Closes the drawer from the open state.
*/
MDCDismissibleDrawerFoundation.prototype.close = function () {
if (!this.isOpen() || this.isOpening() || this.isClosing()) {
return;
}
this.adapter.addClass(cssClasses.CLOSING);
};
/**
* Returns true if the drawer is in the open position.
* @return true if drawer is in open state.
*/
MDCDismissibleDrawerFoundation.prototype.isOpen = function () {
return this.adapter.hasClass(cssClasses.OPEN);
};
/**
* Returns true if the drawer is animating open.
* @return true if drawer is animating open.
*/
MDCDismissibleDrawerFoundation.prototype.isOpening = function () {
return this.adapter.hasClass(cssClasses.OPENING) ||
this.adapter.hasClass(cssClasses.ANIMATE);
};
/**
* Returns true if the drawer is animating closed.
* @return true if drawer is animating closed.
*/
MDCDismissibleDrawerFoundation.prototype.isClosing = function () {
return this.adapter.hasClass(cssClasses.CLOSING);
};
/**
* Keydown handler to close drawer when key is escape.
*/
MDCDismissibleDrawerFoundation.prototype.handleKeydown = function (evt) {
var keyCode = evt.keyCode, key = evt.key;
var isEscape = key === 'Escape' || keyCode === 27;
if (isEscape) {
this.close();
}
};
/**
* Handles the `transitionend` event when the drawer finishes opening/closing.
*/
MDCDismissibleDrawerFoundation.prototype.handleTransitionEnd = function (evt) {
var OPENING = cssClasses.OPENING, CLOSING = cssClasses.CLOSING, OPEN = cssClasses.OPEN, ANIMATE = cssClasses.ANIMATE, ROOT = cssClasses.ROOT;
// In Edge, transitionend on ripple pseudo-elements yields a target without classList, so check for Element first.
var isRootElement = this.isElement(evt.target) &&
this.adapter.elementHasClass(evt.target, ROOT);
if (!isRootElement) {
return;
}
if (this.isClosing()) {
this.adapter.removeClass(OPEN);
this.closed();
this.adapter.restoreFocus();
this.adapter.notifyClose();
}
else {
this.adapter.focusActiveNavigationItem();
this.opened();
this.adapter.notifyOpen();
}
this.adapter.removeClass(ANIMATE);
this.adapter.removeClass(OPENING);
this.adapter.removeClass(CLOSING);
};
/**
* Extension point for when drawer finishes open animation.
*/
MDCDismissibleDrawerFoundation.prototype.opened = function () { }; // tslint:disable-line:no-empty
/**
* Extension point for when drawer finishes close animation.
*/
MDCDismissibleDrawerFoundation.prototype.closed = function () { }; // tslint:disable-line:no-empty
/**
* Runs the given logic on the next animation frame, using setTimeout to factor in Firefox reflow behavior.
*/
MDCDismissibleDrawerFoundation.prototype.runNextAnimationFrame = function (callback) {
var _this = this;
cancelAnimationFrame(this.animationFrame);
this.animationFrame = requestAnimationFrame(function () {
_this.animationFrame = 0;
clearTimeout(_this.animationTimer);
_this.animationTimer = setTimeout(callback, 0);
});
};
MDCDismissibleDrawerFoundation.prototype.isElement = function (element) {
// In Edge, transitionend on ripple pseudo-elements yields a target without classList.
return Boolean(element.classList);
};
return MDCDismissibleDrawerFoundation;
}(MDCFoundation));
export { MDCDismissibleDrawerFoundation };
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
export default MDCDismissibleDrawerFoundation;
//# sourceMappingURL=foundation.js.map