-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvgxuse.js
executable file
·181 lines (181 loc) · 7.78 KB
/
svgxuse.js
1
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
/*!
* @copyright Copyright (c) 2016 IcoMoon.io
* @license Licensed under MIT license
* See https://github.com/Keyamoon/svgxuse
* @version 1.1.16
*/
/*jslint browser: true */
/*global XDomainRequest, MutationObserver, window */
(function () {
'use strict';
if (window && window.addEventListener) {
var cache = Object.create(null); // holds xhr objects to prevent multiple requests
var checkUseElems,
tid; // timeout id
var debouncedCheck = function () {
clearTimeout(tid);
tid = setTimeout(checkUseElems, 100);
};
var unobserveChanges = function () {
return;
};
var observeChanges = function () {
var observer;
window.addEventListener('resize', debouncedCheck, false);
window.addEventListener('orientationchange', debouncedCheck, false);
if (window.MutationObserver) {
observer = new MutationObserver(debouncedCheck);
observer.observe(document.documentElement, {
childList: true,
subtree: true,
attributes: true
});
unobserveChanges = function () {
try {
observer.disconnect();
window.removeEventListener('resize', debouncedCheck, false);
window.removeEventListener('orientationchange', debouncedCheck, false);
} catch (ignore) {}
};
} else {
document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false);
unobserveChanges = function () {
document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false);
window.removeEventListener('resize', debouncedCheck, false);
window.removeEventListener('orientationchange', debouncedCheck, false);
};
}
};
var xlinkNS = 'http://www.w3.org/1999/xlink';
checkUseElems = function () {
var base,
bcr,
fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
hash,
i,
Request,
inProgressCount = 0,
isHidden,
url,
uses,
xhr;
if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
if (Request.withCredentials !== undefined) {
Request = XMLHttpRequest;
} else {
Request = XDomainRequest || undefined;
}
}
if (Request === undefined) {
return;
}
function observeIfDone() {
// If done with making changes, start watching for chagnes in DOM again
inProgressCount -= 1;
if (inProgressCount === 0) { // if all xhrs were resolved
observeChanges(); // watch for changes to DOM
}
}
function attrUpdateFunc(spec) {
return function () {
if (cache[spec.base] !== true) {
spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash);
}
};
}
function onloadFunc(xhr) {
return function () {
var body = document.body;
var x = document.createElement('x');
var svg;
xhr.onload = null;
x.innerHTML = xhr.responseText;
svg = x.getElementsByTagName('svg')[0];
if (svg) {
svg.setAttribute('aria-hidden', 'true');
svg.style.position = 'absolute';
svg.style.width = 0;
svg.style.height = 0;
svg.style.overflow = 'hidden';
body.insertBefore(svg, body.firstChild);
}
observeIfDone();
};
}
function onErrorTimeout(xhr) {
return function () {
xhr.onerror = null;
xhr.ontimeout = null;
observeIfDone();
};
}
unobserveChanges(); // stop watching for changes to DOM
// find all use elements
uses = document.getElementsByTagName('use');
for (i = 0; i < uses.length; i += 1) {
try {
bcr = uses[i].getBoundingClientRect();
} catch (ignore) {
// failed to get bounding rectangle of the use element
bcr = false;
}
url = uses[i].getAttributeNS(xlinkNS, 'href').split('#');
base = url[0];
hash = url[1];
isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
// the use element is empty
// if there is a reference to an external SVG, try to fetch it
// use the optional fallback URL if there is no reference to an external SVG
if (fallback && !base.length && hash && !document.getElementById(hash)) {
base = fallback;
}
if (base.length) {
// schedule updating xlink:href
xhr = cache[base];
if (xhr !== true) {
// true signifies that prepending the SVG was not required
setTimeout(attrUpdateFunc({
useEl: uses[i],
base: base,
hash: hash
}), 0);
}
if (xhr === undefined) {
xhr = new Request();
cache[base] = xhr;
xhr.onload = onloadFunc(xhr);
xhr.onerror = onErrorTimeout(xhr);
xhr.ontimeout = onErrorTimeout(xhr);
xhr.open('GET', base);
xhr.send();
inProgressCount += 1;
}
}
} else {
if (!isHidden) {
if (cache[base] === undefined) {
// remember this URL if the use element was not empty and no request was sent
cache[base] = true;
} else if (cache[base].onload) {
// if it turns out that prepending the SVG is not necessary,
// abort the in-progress xhr.
cache[base].abort();
cache[base].onload = undefined;
cache[base] = true;
}
}
}
}
uses = '';
inProgressCount += 1;
observeIfDone();
};
// The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
window.addEventListener('load', function winLoad() {
window.removeEventListener('load', winLoad, false); // to prevent memory leaks
tid = setTimeout(checkUseElems, 0);
}, false);
}
}());