resize-event.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. 'use strict';
  2. exports.__esModule = true;
  3. /* Modified from https://github.com/sdecima/javascript-detect-element-resize
  4. * version: 0.5.3
  5. *
  6. * The MIT License (MIT)
  7. *
  8. * Copyright (c) 2013 Sebastián Décima
  9. *
  10. * Permission is hereby granted, free of charge, to any person obtaining a copy of
  11. * this software and associated documentation files (the "Software"), to deal in
  12. * the Software without restriction, including without limitation the rights to
  13. * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  14. * the Software, and to permit persons to whom the Software is furnished to do so,
  15. * subject to the following conditions:
  16. *
  17. * The above copyright notice and this permission notice shall be included in all
  18. * copies or substantial portions of the Software.
  19. *
  20. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  21. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  22. * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  23. * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  24. * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  25. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  26. *
  27. */
  28. var isServer = typeof window === 'undefined';
  29. /* istanbul ignore next */
  30. var requestFrame = function () {
  31. if (isServer) return;
  32. var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
  33. return window.setTimeout(fn, 20);
  34. };
  35. return function (fn) {
  36. return raf(fn);
  37. };
  38. }();
  39. /* istanbul ignore next */
  40. var cancelFrame = function () {
  41. if (isServer) return;
  42. var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
  43. return function (id) {
  44. return cancel(id);
  45. };
  46. }();
  47. /* istanbul ignore next */
  48. var resetTrigger = function resetTrigger(element) {
  49. var trigger = element.__resizeTrigger__;
  50. var expand = trigger.firstElementChild;
  51. var contract = trigger.lastElementChild;
  52. var expandChild = expand.firstElementChild;
  53. contract.scrollLeft = contract.scrollWidth;
  54. contract.scrollTop = contract.scrollHeight;
  55. expandChild.style.width = expand.offsetWidth + 1 + 'px';
  56. expandChild.style.height = expand.offsetHeight + 1 + 'px';
  57. expand.scrollLeft = expand.scrollWidth;
  58. expand.scrollTop = expand.scrollHeight;
  59. };
  60. /* istanbul ignore next */
  61. var checkTriggers = function checkTriggers(element) {
  62. return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
  63. };
  64. /* istanbul ignore next */
  65. var scrollListener = function scrollListener(event) {
  66. var _this = this;
  67. resetTrigger(this);
  68. if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
  69. this.__resizeRAF__ = requestFrame(function () {
  70. if (checkTriggers(_this)) {
  71. _this.__resizeLast__.width = _this.offsetWidth;
  72. _this.__resizeLast__.height = _this.offsetHeight;
  73. _this.__resizeListeners__.forEach(function (fn) {
  74. fn.call(_this, event);
  75. });
  76. }
  77. });
  78. };
  79. /* Detect CSS Animations support to detect element display/re-attach */
  80. var attachEvent = isServer ? {} : document.attachEvent;
  81. var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
  82. var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
  83. var RESIZE_ANIMATION_NAME = 'resizeanim';
  84. var animation = false;
  85. var keyFramePrefix = '';
  86. var animationStartEvent = 'animationstart';
  87. /* istanbul ignore next */
  88. if (!attachEvent && !isServer) {
  89. var testElement = document.createElement('fakeelement');
  90. if (testElement.style.animationName !== undefined) {
  91. animation = true;
  92. }
  93. if (animation === false) {
  94. var prefix = '';
  95. for (var i = 0; i < DOM_PREFIXES.length; i++) {
  96. if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
  97. prefix = DOM_PREFIXES[i];
  98. keyFramePrefix = '-' + prefix.toLowerCase() + '-';
  99. animationStartEvent = START_EVENTS[i];
  100. animation = true;
  101. break;
  102. }
  103. }
  104. }
  105. }
  106. var stylesCreated = false;
  107. /* istanbul ignore next */
  108. var createStyles = function createStyles() {
  109. if (!stylesCreated && !isServer) {
  110. var animationKeyframes = '@' + keyFramePrefix + 'keyframes ' + RESIZE_ANIMATION_NAME + ' { from { opacity: 0; } to { opacity: 0; } } ';
  111. var animationStyle = keyFramePrefix + 'animation: 1ms ' + RESIZE_ANIMATION_NAME + ';';
  112. // opacity: 0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
  113. var css = animationKeyframes + '\n .resize-triggers { ' + animationStyle + ' visibility: hidden; opacity: 0; }\n .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }\n .resize-triggers > div { background: #eee; overflow: auto; }\n .contract-trigger:before { width: 200%; height: 200%; }';
  114. var head = document.head || document.getElementsByTagName('head')[0];
  115. var style = document.createElement('style');
  116. style.type = 'text/css';
  117. if (style.styleSheet) {
  118. style.styleSheet.cssText = css;
  119. } else {
  120. style.appendChild(document.createTextNode(css));
  121. }
  122. head.appendChild(style);
  123. stylesCreated = true;
  124. }
  125. };
  126. /* istanbul ignore next */
  127. var addResizeListener = exports.addResizeListener = function addResizeListener(element, fn) {
  128. if (isServer) return;
  129. if (attachEvent) {
  130. element.attachEvent('onresize', fn);
  131. } else {
  132. if (!element.__resizeTrigger__) {
  133. if (getComputedStyle(element).position === 'static') {
  134. element.style.position = 'relative';
  135. }
  136. createStyles();
  137. element.__resizeLast__ = {};
  138. element.__resizeListeners__ = [];
  139. var resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
  140. resizeTrigger.className = 'resize-triggers';
  141. resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
  142. element.appendChild(resizeTrigger);
  143. resetTrigger(element);
  144. element.addEventListener('scroll', scrollListener, true);
  145. /* Listen for a css animation to detect element display/re-attach */
  146. if (animationStartEvent) {
  147. resizeTrigger.addEventListener(animationStartEvent, function (event) {
  148. if (event.animationName === RESIZE_ANIMATION_NAME) {
  149. resetTrigger(element);
  150. }
  151. });
  152. }
  153. }
  154. element.__resizeListeners__.push(fn);
  155. }
  156. };
  157. /* istanbul ignore next */
  158. var removeResizeListener = exports.removeResizeListener = function removeResizeListener(element, fn) {
  159. if (!element || !element.__resizeListeners__) return;
  160. if (attachEvent) {
  161. element.detachEvent('onresize', fn);
  162. } else {
  163. element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
  164. if (!element.__resizeListeners__.length) {
  165. element.removeEventListener('scroll', scrollListener);
  166. element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
  167. }
  168. }
  169. };