1 | import _typeof from 'babel-runtime/helpers/typeof';
|
2 | import { camelcase, hyphenate } from './string';
|
3 | import { each, isPlainObject } from './object';
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | export var hasDOM = typeof window !== 'undefined' && !!window.document && !!document.createElement;
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | export function hasClass(node, className) {
|
21 |
|
22 | if (!hasDOM || !node) {
|
23 | return false;
|
24 | }
|
25 |
|
26 | if (node.classList) {
|
27 | return node.classList.contains(className);
|
28 | } else {
|
29 | return node.className.indexOf(className) > -1;
|
30 | }
|
31 | }
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | export function addClass(node, className, _force) {
|
42 |
|
43 | if (!hasDOM || !node) {
|
44 | return;
|
45 | }
|
46 |
|
47 | if (node.classList) {
|
48 | node.classList.add(className);
|
49 | } else if (_force === true || !hasClass(node, className)) {
|
50 | node.className += ' ' + className;
|
51 | }
|
52 | }
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | export function removeClass(node, className, _force) {
|
63 |
|
64 | if (!hasDOM || !node) {
|
65 | return;
|
66 | }
|
67 |
|
68 | if (node.classList) {
|
69 | node.classList.remove(className);
|
70 | } else if (_force === true || hasClass(node, className)) {
|
71 | node.className = node.className.replace(className, '').replace(/\s+/g, ' ').trim();
|
72 | }
|
73 | }
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | export function toggleClass(node, className) {
|
85 |
|
86 | if (!hasDOM || !node) {
|
87 | return false;
|
88 | }
|
89 |
|
90 | if (node.classList) {
|
91 | return node.classList.toggle(className);
|
92 | } else {
|
93 | var flag = hasClass(node, className);
|
94 | flag ? removeClass(node, className, true) : addClass(node, className, true);
|
95 |
|
96 | return !flag;
|
97 | }
|
98 | }
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 | export var matches = function () {
|
110 | var matchesFn = null;
|
111 |
|
112 | if (hasDOM) {
|
113 | var _body = document.body || document.head;
|
114 | matchesFn = _body.matches ? 'matches' : _body.webkitMatchesSelector ? 'webkitMatchesSelector' : _body.msMatchesSelector ? 'msMatchesSelector' : _body.mozMatchesSelector ? 'mozMatchesSelector' : null;
|
115 | }
|
116 |
|
117 | return function (node, selector) {
|
118 | if (!hasDOM || !node) {
|
119 | return false;
|
120 | }
|
121 |
|
122 | return matchesFn ? node[matchesFn](selector) : false;
|
123 | };
|
124 | }();
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | function _getComputedStyle(node) {
|
133 | return node && node.nodeType === 1 ? window.getComputedStyle(node, null) : {};
|
134 | }
|
135 |
|
136 | var PIXEL_PATTERN = /margin|padding|width|height|max|min|offset|size|top/i;
|
137 | var removePixel = { left: 1, top: 1, right: 1, bottom: 1 };
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 | function _getStyleValue(node, type, value) {
|
147 | type = type.toLowerCase();
|
148 |
|
149 | if (value === 'auto') {
|
150 | if (type === 'height') {
|
151 | return node.offsetHeight || 0;
|
152 | }
|
153 | if (type === 'width') {
|
154 | return node.offsetWidth || 0;
|
155 | }
|
156 | }
|
157 |
|
158 | if (!(type in removePixel)) {
|
159 |
|
160 | removePixel[type] = PIXEL_PATTERN.test(type);
|
161 | }
|
162 |
|
163 | return removePixel[type] ? parseFloat(value) || 0 : value;
|
164 | }
|
165 |
|
166 | var floatMap = { cssFloat: 1, styleFloat: 1, float: 1 };
|
167 |
|
168 | export function getNodeHozWhitespace(node) {
|
169 | var paddingLeft = getStyle(node, 'paddingLeft');
|
170 | var paddingRight = getStyle(node, 'paddingRight');
|
171 | var marginLeft = getStyle(node, 'marginLeft');
|
172 | var marginRight = getStyle(node, 'marginRight');
|
173 | return paddingLeft + paddingRight + marginLeft + marginRight;
|
174 | }
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 | export function getStyle(node, name) {
|
183 |
|
184 | if (!hasDOM || !node) {
|
185 | return null;
|
186 | }
|
187 |
|
188 | var style = _getComputedStyle(node);
|
189 |
|
190 |
|
191 | if (arguments.length === 1) {
|
192 | return style;
|
193 | }
|
194 |
|
195 |
|
196 | if (isPlainObject(style)) {
|
197 | return null;
|
198 | }
|
199 |
|
200 | name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
|
201 |
|
202 | return _getStyleValue(node, name, style.getPropertyValue(hyphenate(name)) || node.style[camelcase(name)]);
|
203 | }
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 | export function setStyle(node, name, value) {
|
221 |
|
222 | if (!hasDOM || !node) {
|
223 | return false;
|
224 | }
|
225 |
|
226 |
|
227 | if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object' && arguments.length === 2) {
|
228 | each(name, function (val, key) {
|
229 | return setStyle(node, key, val);
|
230 | });
|
231 | } else {
|
232 | name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
|
233 | if (typeof value === 'number' && PIXEL_PATTERN.test(name)) {
|
234 | value = value + 'px';
|
235 | }
|
236 | node.style[camelcase(name)] = value;
|
237 | }
|
238 | }
|
239 |
|
240 | var isScrollDisplay = function isScrollDisplay(element) {
|
241 | try {
|
242 | var scrollbarStyle = window.getComputedStyle(element, '::-webkit-scrollbar');
|
243 | return !scrollbarStyle || scrollbarStyle.getPropertyValue('display') !== 'none';
|
244 | } catch (e) {
|
245 |
|
246 | }
|
247 |
|
248 | return true;
|
249 | };
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 | export function scrollbar() {
|
256 | var scrollDiv = document.createElement('div');
|
257 | scrollDiv.className += 'just-to-get-scrollbar-size';
|
258 |
|
259 | setStyle(scrollDiv, {
|
260 | position: 'absolute',
|
261 | width: '100px',
|
262 | height: '100px',
|
263 | overflow: 'scroll',
|
264 | top: '-9999px'
|
265 | });
|
266 | document.body && document.body.appendChild(scrollDiv);
|
267 | var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
268 | var scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
269 | document.body.removeChild(scrollDiv);
|
270 |
|
271 | return {
|
272 | width: scrollbarWidth,
|
273 | height: scrollbarHeight
|
274 | };
|
275 | }
|
276 |
|
277 | export function hasScroll(containerNode) {
|
278 |
|
279 | var overflow = getStyle(containerNode, 'overflow');
|
280 | if (overflow === 'hidden') {
|
281 | return false;
|
282 | }
|
283 |
|
284 | var parentNode = containerNode.parentNode;
|
285 |
|
286 | return parentNode && parentNode.scrollHeight > parentNode.clientHeight && scrollbar().width > 0 && isScrollDisplay(parentNode) && isScrollDisplay(containerNode);
|
287 | }
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 | export function getOffset(node) {
|
294 | var rect = node.getBoundingClientRect();
|
295 | var win = node.ownerDocument.defaultView;
|
296 | return {
|
297 | top: rect.top + win.pageYOffset,
|
298 | left: rect.left + win.pageXOffset
|
299 | };
|
300 | }
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 | export function getPixels(len) {
|
308 | var win = document.defaultView;
|
309 | if (typeof +len === 'number' && !isNaN(+len)) {
|
310 | return +len;
|
311 | }
|
312 |
|
313 | if (typeof len === 'string') {
|
314 | var PX_REG = /(\d+)px/;
|
315 | var VH_REG = /(\d+)vh/;
|
316 | if (Array.isArray(len.match(PX_REG))) {
|
317 | return +len.match(PX_REG)[1] || 0;
|
318 | }
|
319 |
|
320 | if (Array.isArray(len.match(VH_REG))) {
|
321 | var _1vh = win.innerHeight / 100;
|
322 | return +(len.match(VH_REG)[1] * _1vh) || 0;
|
323 | }
|
324 | }
|
325 |
|
326 | return 0;
|
327 | }
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 | export function getClosest(dom, selector) {
|
336 |
|
337 | if (!hasDOM || !dom) {
|
338 | return null;
|
339 | }
|
340 |
|
341 |
|
342 |
|
343 | if (!Element.prototype.closest) {
|
344 | if (!document.documentElement.contains(dom)) return null;
|
345 | do {
|
346 | if (getMatches(dom, selector)) return dom;
|
347 | dom = dom.parentElement;
|
348 | } while (dom !== null);
|
349 | } else {
|
350 | return dom.closest(selector);
|
351 | }
|
352 | return null;
|
353 | }
|
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 | export function getMatches(dom, selector) {
|
362 |
|
363 | if (!hasDOM || !dom) {
|
364 | return null;
|
365 | }
|
366 |
|
367 |
|
368 | if (Element.prototype.matches) {
|
369 | return dom.matches(selector);
|
370 | } else if (Element.prototype.msMatchesSelector) {
|
371 | return dom.msMatchesSelector(selector);
|
372 | } else if (Element.prototype.webkitMatchesSelector) {
|
373 | return dom.webkitMatchesSelector(selector);
|
374 | }
|
375 |
|
376 | return null;
|
377 | }
|
378 |
|
379 | export function saveRef(ref) {
|
380 | if (!ref) {
|
381 | return null;
|
382 | }
|
383 | return function (element) {
|
384 | if (typeof ref === 'string') {
|
385 | throw new Error('can not set ref string for ' + ref);
|
386 | } else if (typeof ref === 'function') {
|
387 | ref(element);
|
388 | } else if (Object.prototype.hasOwnProperty.call(ref, 'current')) {
|
389 | ref.current = element;
|
390 | }
|
391 | };
|
392 | } |
\ | No newline at end of file |