1 | import * as DomEvent from './DomEvent';
|
2 | import * as Util from '../core/Util';
|
3 | import {Point} from '../geometry/Point';
|
4 | import Browser from '../core/Browser';
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | export var TRANSFORM = testProp(
|
21 | ['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform']);
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | export var TRANSITION = testProp(
|
29 | ['webkitTransition', 'transition', 'OTransition', 'MozTransition', 'msTransition']);
|
30 |
|
31 |
|
32 |
|
33 | export var TRANSITION_END =
|
34 | TRANSITION === 'webkitTransition' || TRANSITION === 'OTransition' ? TRANSITION + 'End' : 'transitionend';
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | export function get(id) {
|
41 | return typeof id === 'string' ? document.getElementById(id) : id;
|
42 | }
|
43 |
|
44 |
|
45 |
|
46 |
|
47 | export function getStyle(el, style) {
|
48 | var value = el.style[style] || (el.currentStyle && el.currentStyle[style]);
|
49 |
|
50 | if ((!value || value === 'auto') && document.defaultView) {
|
51 | var css = document.defaultView.getComputedStyle(el, null);
|
52 | value = css ? css[style] : null;
|
53 | }
|
54 | return value === 'auto' ? null : value;
|
55 | }
|
56 |
|
57 |
|
58 |
|
59 | export function create(tagName, className, container) {
|
60 | var el = document.createElement(tagName);
|
61 | el.className = className || '';
|
62 |
|
63 | if (container) {
|
64 | container.appendChild(el);
|
65 | }
|
66 | return el;
|
67 | }
|
68 |
|
69 |
|
70 |
|
71 | export function remove(el) {
|
72 | var parent = el.parentNode;
|
73 | if (parent) {
|
74 | parent.removeChild(el);
|
75 | }
|
76 | }
|
77 |
|
78 |
|
79 |
|
80 | export function empty(el) {
|
81 | while (el.firstChild) {
|
82 | el.removeChild(el.firstChild);
|
83 | }
|
84 | }
|
85 |
|
86 |
|
87 |
|
88 | export function toFront(el) {
|
89 | var parent = el.parentNode;
|
90 | if (parent && parent.lastChild !== el) {
|
91 | parent.appendChild(el);
|
92 | }
|
93 | }
|
94 |
|
95 |
|
96 |
|
97 | export function toBack(el) {
|
98 | var parent = el.parentNode;
|
99 | if (parent && parent.firstChild !== el) {
|
100 | parent.insertBefore(el, parent.firstChild);
|
101 | }
|
102 | }
|
103 |
|
104 |
|
105 |
|
106 | export function hasClass(el, name) {
|
107 | if (el.classList !== undefined) {
|
108 | return el.classList.contains(name);
|
109 | }
|
110 | var className = getClass(el);
|
111 | return className.length > 0 && new RegExp('(^|\\s)' + name + '(\\s|$)').test(className);
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 | export function addClass(el, name) {
|
117 | if (el.classList !== undefined) {
|
118 | var classes = Util.splitWords(name);
|
119 | for (var i = 0, len = classes.length; i < len; i++) {
|
120 | el.classList.add(classes[i]);
|
121 | }
|
122 | } else if (!hasClass(el, name)) {
|
123 | var className = getClass(el);
|
124 | setClass(el, (className ? className + ' ' : '') + name);
|
125 | }
|
126 | }
|
127 |
|
128 |
|
129 |
|
130 | export function removeClass(el, name) {
|
131 | if (el.classList !== undefined) {
|
132 | el.classList.remove(name);
|
133 | } else {
|
134 | setClass(el, Util.trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' ')));
|
135 | }
|
136 | }
|
137 |
|
138 |
|
139 |
|
140 | export function setClass(el, name) {
|
141 | if (el.className.baseVal === undefined) {
|
142 | el.className = name;
|
143 | } else {
|
144 |
|
145 | el.className.baseVal = name;
|
146 | }
|
147 | }
|
148 |
|
149 |
|
150 |
|
151 | export function getClass(el) {
|
152 |
|
153 |
|
154 | if (el.correspondingElement) {
|
155 | el = el.correspondingElement;
|
156 | }
|
157 | return el.className.baseVal === undefined ? el.className : el.className.baseVal;
|
158 | }
|
159 |
|
160 |
|
161 |
|
162 |
|
163 | export function setOpacity(el, value) {
|
164 | if ('opacity' in el.style) {
|
165 | el.style.opacity = value;
|
166 | } else if ('filter' in el.style) {
|
167 | _setOpacityIE(el, value);
|
168 | }
|
169 | }
|
170 |
|
171 | function _setOpacityIE(el, value) {
|
172 | var filter = false,
|
173 | filterName = 'DXImageTransform.Microsoft.Alpha';
|
174 |
|
175 |
|
176 | try {
|
177 | filter = el.filters.item(filterName);
|
178 | } catch (e) {
|
179 |
|
180 |
|
181 | if (value === 1) { return; }
|
182 | }
|
183 |
|
184 | value = Math.round(value * 100);
|
185 |
|
186 | if (filter) {
|
187 | filter.Enabled = (value !== 100);
|
188 | filter.Opacity = value;
|
189 | } else {
|
190 | el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';
|
191 | }
|
192 | }
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | export function testProp(props) {
|
199 | var style = document.documentElement.style;
|
200 |
|
201 | for (var i = 0; i < props.length; i++) {
|
202 | if (props[i] in style) {
|
203 | return props[i];
|
204 | }
|
205 | }
|
206 | return false;
|
207 | }
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | export function setTransform(el, offset, scale) {
|
214 | var pos = offset || new Point(0, 0);
|
215 |
|
216 | el.style[TRANSFORM] =
|
217 | (Browser.ie3d ?
|
218 | 'translate(' + pos.x + 'px,' + pos.y + 'px)' :
|
219 | 'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
|
220 | (scale ? ' scale(' + scale + ')' : '');
|
221 | }
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 | export function setPosition(el, point) {
|
228 |
|
229 |
|
230 | el._leaflet_pos = point;
|
231 |
|
232 |
|
233 | if (Browser.any3d) {
|
234 | setTransform(el, point);
|
235 | } else {
|
236 | el.style.left = point.x + 'px';
|
237 | el.style.top = point.y + 'px';
|
238 | }
|
239 | }
|
240 |
|
241 |
|
242 |
|
243 | export function getPosition(el) {
|
244 |
|
245 |
|
246 |
|
247 | return el._leaflet_pos || new Point(0, 0);
|
248 | }
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 | export var disableTextSelection;
|
259 | export var enableTextSelection;
|
260 | var _userSelect;
|
261 | if ('onselectstart' in document) {
|
262 | disableTextSelection = function () {
|
263 | DomEvent.on(window, 'selectstart', DomEvent.preventDefault);
|
264 | };
|
265 | enableTextSelection = function () {
|
266 | DomEvent.off(window, 'selectstart', DomEvent.preventDefault);
|
267 | };
|
268 | } else {
|
269 | var userSelectProperty = testProp(
|
270 | ['userSelect', 'WebkitUserSelect', 'OUserSelect', 'MozUserSelect', 'msUserSelect']);
|
271 |
|
272 | disableTextSelection = function () {
|
273 | if (userSelectProperty) {
|
274 | var style = document.documentElement.style;
|
275 | _userSelect = style[userSelectProperty];
|
276 | style[userSelectProperty] = 'none';
|
277 | }
|
278 | };
|
279 | enableTextSelection = function () {
|
280 | if (userSelectProperty) {
|
281 | document.documentElement.style[userSelectProperty] = _userSelect;
|
282 | _userSelect = undefined;
|
283 | }
|
284 | };
|
285 | }
|
286 |
|
287 |
|
288 |
|
289 |
|
290 | export function disableImageDrag() {
|
291 | DomEvent.on(window, 'dragstart', DomEvent.preventDefault);
|
292 | }
|
293 |
|
294 |
|
295 |
|
296 | export function enableImageDrag() {
|
297 | DomEvent.off(window, 'dragstart', DomEvent.preventDefault);
|
298 | }
|
299 |
|
300 | var _outlineElement, _outlineStyle;
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 | export function preventOutline(element) {
|
307 | while (element.tabIndex === -1) {
|
308 | element = element.parentNode;
|
309 | }
|
310 | if (!element.style) { return; }
|
311 | restoreOutline();
|
312 | _outlineElement = element;
|
313 | _outlineStyle = element.style.outline;
|
314 | element.style.outline = 'none';
|
315 | DomEvent.on(window, 'keydown', restoreOutline);
|
316 | }
|
317 |
|
318 |
|
319 |
|
320 | export function restoreOutline() {
|
321 | if (!_outlineElement) { return; }
|
322 | _outlineElement.style.outline = _outlineStyle;
|
323 | _outlineElement = undefined;
|
324 | _outlineStyle = undefined;
|
325 | DomEvent.off(window, 'keydown', restoreOutline);
|
326 | }
|
327 |
|
328 |
|
329 |
|
330 | export function getSizedParentNode(element) {
|
331 | do {
|
332 | element = element.parentNode;
|
333 | } while ((!element.offsetWidth || !element.offsetHeight) && element !== document.body);
|
334 | return element;
|
335 | }
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 | export function getScale(element) {
|
342 | var rect = element.getBoundingClientRect();
|
343 |
|
344 | return {
|
345 | x: rect.width / element.offsetWidth || 1,
|
346 | y: rect.height / element.offsetHeight || 1,
|
347 | boundingClientRect: rect
|
348 | };
|
349 | }
|