UNPKG

7.21 kBJavaScriptView Raw
1import "core-js/modules/es6.regexp.split";
2
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
29/* eslint-disable */
30var isServer = typeof window === 'undefined';
31/* istanbul ignore next */
32
33var requestFrame = function () {
34 if (isServer) return;
35
36 var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
37 return window.setTimeout(fn, 20);
38 };
39
40 return function (fn) {
41 return raf(fn);
42 };
43}();
44/* istanbul ignore next */
45
46
47var cancelFrame = function () {
48 if (isServer) return;
49 var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
50 return function (id) {
51 return cancel(id);
52 };
53}();
54/* istanbul ignore next */
55
56
57var resetTrigger = function resetTrigger(element) {
58 var trigger = element.__resizeTrigger__;
59 var expand = trigger.firstElementChild;
60 var contract = trigger.lastElementChild;
61 var expandChild = expand.firstElementChild;
62 contract.scrollLeft = contract.scrollWidth;
63 contract.scrollTop = contract.scrollHeight;
64 expandChild.style.width = expand.offsetWidth + 1 + 'px';
65 expandChild.style.height = expand.offsetHeight + 1 + 'px';
66 expand.scrollLeft = expand.scrollWidth;
67 expand.scrollTop = expand.scrollHeight;
68};
69/* istanbul ignore next */
70
71
72var checkTriggers = function checkTriggers(element) {
73 return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
74};
75/* istanbul ignore next */
76
77
78var scrollListener = function scrollListener(event) {
79 var _this = this;
80
81 resetTrigger(this);
82 if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
83 this.__resizeRAF__ = requestFrame(function () {
84 if (checkTriggers(_this)) {
85 _this.__resizeLast__.width = _this.offsetWidth;
86 _this.__resizeLast__.height = _this.offsetHeight;
87
88 _this.__resizeListeners__.forEach(function (fn) {
89 fn.call(_this, event);
90 });
91 }
92 });
93};
94/* Detect CSS Animations support to detect element display/re-attach */
95
96
97var attachEvent = isServer ? {} : document.attachEvent;
98var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
99var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
100var RESIZE_ANIMATION_NAME = 'resizeanim';
101var animation = false;
102var keyFramePrefix = '';
103var animationStartEvent = 'animationstart';
104/* istanbul ignore next */
105
106if (!attachEvent && !isServer) {
107 var testElement = document.createElement('fakeelement');
108
109 if (testElement.style.animationName !== undefined) {
110 animation = true;
111 }
112
113 if (animation === false) {
114 var prefix = '';
115
116 for (var i = 0; i < DOM_PREFIXES.length; i++) {
117 if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
118 prefix = DOM_PREFIXES[i];
119 keyFramePrefix = '-' + prefix.toLowerCase() + '-';
120 animationStartEvent = START_EVENTS[i];
121 animation = true;
122 break;
123 }
124 }
125 }
126}
127
128var stylesCreated = false;
129/* istanbul ignore next */
130
131var createStyles = function createStyles() {
132 if (!stylesCreated && !isServer) {
133 var animationKeyframes = "@".concat(keyFramePrefix, "keyframes ").concat(RESIZE_ANIMATION_NAME, " { from { opacity: 0; } to { opacity: 0; } } ");
134 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
135
136 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%; }");
137 var head = document.head || document.getElementsByTagName('head')[0];
138 var style = document.createElement('style');
139 style.type = 'text/css';
140
141 if (style.styleSheet) {
142 style.styleSheet.cssText = css;
143 } else {
144 style.appendChild(document.createTextNode(css));
145 }
146
147 head.appendChild(style);
148 stylesCreated = true;
149 }
150};
151/* istanbul ignore next */
152
153
154export var addResizeListener = function addResizeListener(element, fn) {
155 if (isServer) return;
156
157 if (attachEvent) {
158 element.attachEvent('onresize', fn);
159 } else {
160 if (!element.__resizeTrigger__) {
161 if (getComputedStyle(element).position === 'static') {
162 element.style.position = 'relative';
163 }
164
165 createStyles();
166 element.__resizeLast__ = {};
167 element.__resizeListeners__ = [];
168 var resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
169 resizeTrigger.className = 'resize-triggers';
170 resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
171 element.appendChild(resizeTrigger);
172 resetTrigger(element);
173 element.addEventListener('scroll', scrollListener, true);
174 /* Listen for a css animation to detect element display/re-attach */
175
176 if (animationStartEvent) {
177 resizeTrigger.addEventListener(animationStartEvent, function (event) {
178 if (event.animationName === RESIZE_ANIMATION_NAME) {
179 resetTrigger(element);
180 }
181 });
182 }
183 }
184
185 element.__resizeListeners__.push(fn);
186 }
187};
188/* istanbul ignore next */
189
190export var removeResizeListener = function removeResizeListener(element, fn) {
191 if (attachEvent) {
192 element.detachEvent('onresize', fn);
193 } else {
194 element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
195
196 if (!element.__resizeListeners__.length) {
197 element.removeEventListener('scroll', scrollListener);
198 element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
199 }
200 }
201};
\No newline at end of file