diff options
author | Sam Potts <sam@potts.es> | 2018-11-11 11:05:09 +1100 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2018-11-11 11:05:09 +1100 |
commit | b7b2e3c0aa0749eed53ae91230082cb0482e1f28 (patch) | |
tree | f073bde14df6459419323dd6570b2549b8d26c41 /src/js/utils/loadSprite.js | |
parent | 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f (diff) | |
parent | 2c8a337f265f3f84133bc674f3836802588c0c13 (diff) | |
download | plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.tar.lz plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.tar.xz plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.zip |
Merge branch 'develop' into css-variables
# Conflicts:
# demo/dist/demo.css
# demo/dist/demo.js
# demo/dist/demo.js.map
# demo/dist/demo.min.js
# demo/dist/demo.min.js.map
# dist/plyr.css
# dist/plyr.js
# dist/plyr.js.map
# dist/plyr.min.js
# dist/plyr.min.js.map
# dist/plyr.polyfilled.js
# dist/plyr.polyfilled.js.map
# dist/plyr.polyfilled.min.js
# dist/plyr.polyfilled.min.js.map
# gulpfile.js
# src/sass/components/captions.scss
# src/sass/components/control.scss
Diffstat (limited to 'src/js/utils/loadSprite.js')
-rw-r--r-- | src/js/utils/loadSprite.js | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/js/utils/loadSprite.js b/src/js/utils/loadSprite.js new file mode 100644 index 00000000..917bd6ac --- /dev/null +++ b/src/js/utils/loadSprite.js @@ -0,0 +1,76 @@ +// ========================================================================== +// 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) => { + 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(() => {}); + } +} |