UNPKG

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