component.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /**
  2. * @license
  3. * Copyright 2018 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __extends } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { closest } from '@material/dom/ponyfill';
  26. import { strings } from './constants';
  27. import { MDCSnackbarFoundation } from './foundation';
  28. import * as util from './util';
  29. var SURFACE_SELECTOR = strings.SURFACE_SELECTOR, LABEL_SELECTOR = strings.LABEL_SELECTOR, ACTION_SELECTOR = strings.ACTION_SELECTOR, DISMISS_SELECTOR = strings.DISMISS_SELECTOR, OPENING_EVENT = strings.OPENING_EVENT, OPENED_EVENT = strings.OPENED_EVENT, CLOSING_EVENT = strings.CLOSING_EVENT, CLOSED_EVENT = strings.CLOSED_EVENT;
  30. /** MDC Snackbar */
  31. var MDCSnackbar = /** @class */ (function (_super) {
  32. __extends(MDCSnackbar, _super);
  33. function MDCSnackbar() {
  34. return _super !== null && _super.apply(this, arguments) || this;
  35. }
  36. MDCSnackbar.attachTo = function (root) {
  37. return new MDCSnackbar(root);
  38. };
  39. MDCSnackbar.prototype.initialize = function (announcerFactory) {
  40. if (announcerFactory === void 0) { announcerFactory = function () { return util.announce; }; }
  41. this.announce = announcerFactory();
  42. };
  43. MDCSnackbar.prototype.initialSyncWithDOM = function () {
  44. var _this = this;
  45. this.surfaceEl = this.root.querySelector(SURFACE_SELECTOR);
  46. this.labelEl = this.root.querySelector(LABEL_SELECTOR);
  47. this.actionEl = this.root.querySelector(ACTION_SELECTOR);
  48. this.handleKeyDown = function (evt) {
  49. _this.foundation.handleKeyDown(evt);
  50. };
  51. this.handleSurfaceClick = function (evt) {
  52. var target = evt.target;
  53. if (_this.isActionButton(target)) {
  54. _this.foundation.handleActionButtonClick(evt);
  55. }
  56. else if (_this.isActionIcon(target)) {
  57. _this.foundation.handleActionIconClick(evt);
  58. }
  59. };
  60. this.registerKeyDownHandler(this.handleKeyDown);
  61. this.registerSurfaceClickHandler(this.handleSurfaceClick);
  62. };
  63. MDCSnackbar.prototype.destroy = function () {
  64. _super.prototype.destroy.call(this);
  65. this.deregisterKeyDownHandler(this.handleKeyDown);
  66. this.deregisterSurfaceClickHandler(this.handleSurfaceClick);
  67. };
  68. MDCSnackbar.prototype.open = function () {
  69. this.foundation.open();
  70. };
  71. /**
  72. * @param reason Why the snackbar was closed. Value will be passed to
  73. * CLOSING_EVENT and CLOSED_EVENT via the `event.detail.reason` property.
  74. * Standard values are REASON_ACTION and REASON_DISMISS, but custom
  75. * client-specific values may also be used if desired.
  76. */
  77. MDCSnackbar.prototype.close = function (reason) {
  78. if (reason === void 0) { reason = ''; }
  79. this.foundation.close(reason);
  80. };
  81. MDCSnackbar.prototype.getDefaultFoundation = function () {
  82. var _this = this;
  83. // DO NOT INLINE this variable. For backward compatibility, foundations take
  84. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  85. // methods, we need a separate, strongly typed adapter variable.
  86. var adapter = {
  87. addClass: function (className) {
  88. _this.root.classList.add(className);
  89. },
  90. announce: function () {
  91. _this.announce(_this.labelEl);
  92. },
  93. notifyClosed: function (reason) {
  94. _this.emit(CLOSED_EVENT, reason ? { reason: reason } : {});
  95. },
  96. notifyClosing: function (reason) {
  97. _this.emit(CLOSING_EVENT, reason ? { reason: reason } : {});
  98. },
  99. notifyOpened: function () {
  100. _this.emit(OPENED_EVENT, {});
  101. },
  102. notifyOpening: function () {
  103. _this.emit(OPENING_EVENT, {});
  104. },
  105. removeClass: function (className) {
  106. _this.root.classList.remove(className);
  107. },
  108. };
  109. return new MDCSnackbarFoundation(adapter);
  110. };
  111. Object.defineProperty(MDCSnackbar.prototype, "timeoutMs", {
  112. get: function () {
  113. return this.foundation.getTimeoutMs();
  114. },
  115. set: function (timeoutMs) {
  116. this.foundation.setTimeoutMs(timeoutMs);
  117. },
  118. enumerable: false,
  119. configurable: true
  120. });
  121. Object.defineProperty(MDCSnackbar.prototype, "closeOnEscape", {
  122. get: function () {
  123. return this.foundation.getCloseOnEscape();
  124. },
  125. set: function (closeOnEscape) {
  126. this.foundation.setCloseOnEscape(closeOnEscape);
  127. },
  128. enumerable: false,
  129. configurable: true
  130. });
  131. Object.defineProperty(MDCSnackbar.prototype, "isOpen", {
  132. get: function () {
  133. return this.foundation.isOpen();
  134. },
  135. enumerable: false,
  136. configurable: true
  137. });
  138. Object.defineProperty(MDCSnackbar.prototype, "labelText", {
  139. get: function () {
  140. // This property only returns null if the node is a document, DOCTYPE,
  141. // or notation. On Element nodes, it always returns a string.
  142. return this.labelEl.textContent;
  143. },
  144. set: function (labelText) {
  145. this.labelEl.textContent = labelText;
  146. },
  147. enumerable: false,
  148. configurable: true
  149. });
  150. Object.defineProperty(MDCSnackbar.prototype, "actionButtonText", {
  151. get: function () {
  152. return this.actionEl.textContent;
  153. },
  154. set: function (actionButtonText) {
  155. this.actionEl.textContent = actionButtonText;
  156. },
  157. enumerable: false,
  158. configurable: true
  159. });
  160. MDCSnackbar.prototype.registerKeyDownHandler = function (handler) {
  161. this.listen('keydown', handler);
  162. };
  163. MDCSnackbar.prototype.deregisterKeyDownHandler = function (handler) {
  164. this.unlisten('keydown', handler);
  165. };
  166. MDCSnackbar.prototype.registerSurfaceClickHandler = function (handler) {
  167. this.surfaceEl.addEventListener('click', handler);
  168. };
  169. MDCSnackbar.prototype.deregisterSurfaceClickHandler = function (handler) {
  170. this.surfaceEl.removeEventListener('click', handler);
  171. };
  172. MDCSnackbar.prototype.isActionButton = function (target) {
  173. return Boolean(closest(target, ACTION_SELECTOR));
  174. };
  175. MDCSnackbar.prototype.isActionIcon = function (target) {
  176. return Boolean(closest(target, DISMISS_SELECTOR));
  177. };
  178. return MDCSnackbar;
  179. }(MDCComponent));
  180. export { MDCSnackbar };
  181. //# sourceMappingURL=component.js.map