1 | import "core-js/modules/es6.regexp.split";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | var isServer = typeof window === 'undefined';
|
31 |
|
32 |
|
33 | var 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 |
|
45 |
|
46 |
|
47 | var 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 |
|
55 |
|
56 |
|
57 | var 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 |
|
70 |
|
71 |
|
72 | var checkTriggers = function checkTriggers(element) {
|
73 | return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
|
74 | };
|
75 |
|
76 |
|
77 |
|
78 | var 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 |
|
95 |
|
96 |
|
97 | var attachEvent = isServer ? {} : document.attachEvent;
|
98 | var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
|
99 | var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
|
100 | var RESIZE_ANIMATION_NAME = 'resizeanim';
|
101 | var animation = false;
|
102 | var keyFramePrefix = '';
|
103 | var animationStartEvent = 'animationstart';
|
104 |
|
105 |
|
106 | if (!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 |
|
128 | var stylesCreated = false;
|
129 |
|
130 |
|
131 | var 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, ";");
|
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 |
|
152 |
|
153 |
|
154 | export 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 |
|
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 |
|
189 |
|
190 | export 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 |