76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
// ==========================================================================
|
|
// Sprite loader
|
|
// ==========================================================================
|
|
|
|
import Storage from '../storage';
|
|
import fetch from './fetch';
|
|
import is from './is';
|
|
|
|
// Load an external SVG sprite
|
|
export default function loadSprite(url, id) {
|
|
if (!is.string(url)) {
|
|
return;
|
|
}
|
|
|
|
const prefix = 'cache';
|
|
const hasId = is.string(id);
|
|
let isCached = false;
|
|
const exists = () => document.getElementById(id) !== null;
|
|
|
|
const update = (container, data) => {
|
|
// eslint-disable-next-line no-param-reassign
|
|
container.innerHTML = data;
|
|
|
|
// Check again incase of race condition
|
|
if (hasId && exists()) {
|
|
return;
|
|
}
|
|
|
|
// Inject the SVG to the body
|
|
document.body.insertAdjacentElement('afterbegin', container);
|
|
};
|
|
|
|
// Only load once if ID set
|
|
if (!hasId || !exists()) {
|
|
const useStorage = Storage.supported;
|
|
// Create container
|
|
const container = document.createElement('div');
|
|
container.setAttribute('hidden', '');
|
|
|
|
if (hasId) {
|
|
container.setAttribute('id', id);
|
|
}
|
|
|
|
// Check in cache
|
|
if (useStorage) {
|
|
const cached = window.localStorage.getItem(`${prefix}-${id}`);
|
|
isCached = cached !== null;
|
|
|
|
if (isCached) {
|
|
const data = JSON.parse(cached);
|
|
update(container, data.content);
|
|
}
|
|
}
|
|
|
|
// Get the sprite
|
|
fetch(url)
|
|
.then(result => {
|
|
if (is.empty(result)) {
|
|
return;
|
|
}
|
|
|
|
if (useStorage) {
|
|
window.localStorage.setItem(
|
|
`${prefix}-${id}`,
|
|
JSON.stringify({
|
|
content: result,
|
|
}),
|
|
);
|
|
}
|
|
|
|
update(container, result);
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
}
|