foundation.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /**
  2. * @license
  3. * Copyright 2017 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 { __assign, __extends, __values } from "tslib";
  24. import { getCorrectPropertyName } from '@material/animation/util';
  25. import { MDCFoundation } from '@material/base/foundation';
  26. import { animationDimensionPercentages as percents, cssClasses, strings } from './constants';
  27. var MDCLinearProgressFoundation = /** @class */ (function (_super) {
  28. __extends(MDCLinearProgressFoundation, _super);
  29. function MDCLinearProgressFoundation(adapter) {
  30. var _this = _super.call(this, __assign(__assign({}, MDCLinearProgressFoundation.defaultAdapter), adapter)) || this;
  31. _this.observer = null;
  32. return _this;
  33. }
  34. Object.defineProperty(MDCLinearProgressFoundation, "cssClasses", {
  35. get: function () {
  36. return cssClasses;
  37. },
  38. enumerable: false,
  39. configurable: true
  40. });
  41. Object.defineProperty(MDCLinearProgressFoundation, "strings", {
  42. get: function () {
  43. return strings;
  44. },
  45. enumerable: false,
  46. configurable: true
  47. });
  48. Object.defineProperty(MDCLinearProgressFoundation, "defaultAdapter", {
  49. get: function () {
  50. return {
  51. addClass: function () { return undefined; },
  52. attachResizeObserver: function () { return null; },
  53. forceLayout: function () { return undefined; },
  54. getWidth: function () { return 0; },
  55. hasClass: function () { return false; },
  56. setBufferBarStyle: function () { return null; },
  57. setPrimaryBarStyle: function () { return null; },
  58. setStyle: function () { return undefined; },
  59. removeAttribute: function () { return undefined; },
  60. removeClass: function () { return undefined; },
  61. setAttribute: function () { return undefined; },
  62. };
  63. },
  64. enumerable: false,
  65. configurable: true
  66. });
  67. MDCLinearProgressFoundation.prototype.init = function () {
  68. var _this = this;
  69. this.determinate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);
  70. this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);
  71. this.progress = 0;
  72. this.buffer = 1;
  73. this.observer = this.adapter.attachResizeObserver(function (entries) {
  74. var e_1, _a;
  75. if (_this.determinate) {
  76. return;
  77. }
  78. try {
  79. for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
  80. var entry = entries_1_1.value;
  81. if (entry.contentRect) {
  82. _this.calculateAndSetDimensions(entry.contentRect.width);
  83. }
  84. }
  85. }
  86. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  87. finally {
  88. try {
  89. if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
  90. }
  91. finally { if (e_1) throw e_1.error; }
  92. }
  93. });
  94. if (!this.determinate && this.observer) {
  95. this.calculateAndSetDimensions(this.adapter.getWidth());
  96. }
  97. };
  98. MDCLinearProgressFoundation.prototype.setDeterminate = function (isDeterminate) {
  99. this.determinate = isDeterminate;
  100. if (this.determinate) {
  101. this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);
  102. this.adapter.setAttribute(strings.ARIA_VALUENOW, this.progress.toString());
  103. this.adapter.setAttribute(strings.ARIA_VALUEMAX, '1');
  104. this.adapter.setAttribute(strings.ARIA_VALUEMIN, '0');
  105. this.setPrimaryBarProgress(this.progress);
  106. this.setBufferBarProgress(this.buffer);
  107. return;
  108. }
  109. if (this.observer) {
  110. this.calculateAndSetDimensions(this.adapter.getWidth());
  111. }
  112. this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);
  113. this.adapter.removeAttribute(strings.ARIA_VALUENOW);
  114. this.adapter.removeAttribute(strings.ARIA_VALUEMAX);
  115. this.adapter.removeAttribute(strings.ARIA_VALUEMIN);
  116. this.setPrimaryBarProgress(1);
  117. this.setBufferBarProgress(1);
  118. };
  119. MDCLinearProgressFoundation.prototype.isDeterminate = function () {
  120. return this.determinate;
  121. };
  122. MDCLinearProgressFoundation.prototype.setProgress = function (value) {
  123. this.progress = value;
  124. if (this.determinate) {
  125. this.setPrimaryBarProgress(value);
  126. this.adapter.setAttribute(strings.ARIA_VALUENOW, value.toString());
  127. }
  128. };
  129. MDCLinearProgressFoundation.prototype.getProgress = function () {
  130. return this.progress;
  131. };
  132. MDCLinearProgressFoundation.prototype.setBuffer = function (value) {
  133. this.buffer = value;
  134. if (this.determinate) {
  135. this.setBufferBarProgress(value);
  136. }
  137. };
  138. MDCLinearProgressFoundation.prototype.getBuffer = function () {
  139. return this.buffer;
  140. };
  141. MDCLinearProgressFoundation.prototype.open = function () {
  142. this.adapter.removeClass(cssClasses.CLOSED_CLASS);
  143. this.adapter.removeClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);
  144. this.adapter.removeAttribute(strings.ARIA_HIDDEN);
  145. };
  146. MDCLinearProgressFoundation.prototype.close = function () {
  147. this.adapter.addClass(cssClasses.CLOSED_CLASS);
  148. this.adapter.setAttribute(strings.ARIA_HIDDEN, 'true');
  149. };
  150. MDCLinearProgressFoundation.prototype.isClosed = function () {
  151. return this.adapter.hasClass(cssClasses.CLOSED_CLASS);
  152. };
  153. /**
  154. * Handles the transitionend event emitted after `close()` is called and the
  155. * opacity fades out. This is so that animations are removed only after the
  156. * progress indicator is completely hidden.
  157. */
  158. MDCLinearProgressFoundation.prototype.handleTransitionEnd = function () {
  159. if (this.adapter.hasClass(cssClasses.CLOSED_CLASS)) {
  160. this.adapter.addClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);
  161. }
  162. };
  163. MDCLinearProgressFoundation.prototype.destroy = function () {
  164. _super.prototype.destroy.call(this);
  165. if (this.observer) {
  166. this.observer.disconnect();
  167. }
  168. };
  169. MDCLinearProgressFoundation.prototype.restartAnimation = function () {
  170. this.adapter.removeClass(cssClasses.ANIMATION_READY_CLASS);
  171. this.adapter.forceLayout();
  172. this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);
  173. };
  174. MDCLinearProgressFoundation.prototype.setPrimaryBarProgress = function (progressValue) {
  175. var value = "scaleX(" + progressValue + ")";
  176. // Accessing `window` without a `typeof` check will throw on Node
  177. // environments.
  178. var transformProp = typeof window !== 'undefined' ?
  179. getCorrectPropertyName(window, 'transform') :
  180. 'transform';
  181. this.adapter.setPrimaryBarStyle(transformProp, value);
  182. };
  183. MDCLinearProgressFoundation.prototype.setBufferBarProgress = function (progressValue) {
  184. var value = progressValue * 100 + "%";
  185. this.adapter.setBufferBarStyle(strings.FLEX_BASIS, value);
  186. };
  187. MDCLinearProgressFoundation.prototype.calculateAndSetDimensions = function (width) {
  188. var primaryHalf = width * percents.PRIMARY_HALF;
  189. var primaryFull = width * percents.PRIMARY_FULL;
  190. var secondaryQuarter = width * percents.SECONDARY_QUARTER;
  191. var secondaryHalf = width * percents.SECONDARY_HALF;
  192. var secondaryFull = width * percents.SECONDARY_FULL;
  193. this.adapter.setStyle('--mdc-linear-progress-primary-half', primaryHalf + "px");
  194. this.adapter.setStyle('--mdc-linear-progress-primary-half-neg', -primaryHalf + "px");
  195. this.adapter.setStyle('--mdc-linear-progress-primary-full', primaryFull + "px");
  196. this.adapter.setStyle('--mdc-linear-progress-primary-full-neg', -primaryFull + "px");
  197. this.adapter.setStyle('--mdc-linear-progress-secondary-quarter', secondaryQuarter + "px");
  198. this.adapter.setStyle('--mdc-linear-progress-secondary-quarter-neg', -secondaryQuarter + "px");
  199. this.adapter.setStyle('--mdc-linear-progress-secondary-half', secondaryHalf + "px");
  200. this.adapter.setStyle('--mdc-linear-progress-secondary-half-neg', -secondaryHalf + "px");
  201. this.adapter.setStyle('--mdc-linear-progress-secondary-full', secondaryFull + "px");
  202. this.adapter.setStyle('--mdc-linear-progress-secondary-full-neg', -secondaryFull + "px");
  203. // need to restart animation for custom props to apply to keyframes
  204. this.restartAnimation();
  205. };
  206. return MDCLinearProgressFoundation;
  207. }(MDCFoundation));
  208. export { MDCLinearProgressFoundation };
  209. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  210. export default MDCLinearProgressFoundation;
  211. //# sourceMappingURL=foundation.js.map