aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/utils/loadSprite.js
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2018-06-17 01:26:24 +1000
committerSam Potts <sam@potts.es>2018-06-17 01:26:24 +1000
commitf1b4db4f3665ea824ad75d7b68df1efc9f1a0524 (patch)
treed3fd6d76a15a94f8a5889b3d0033c65b35420c4f /src/js/utils/loadSprite.js
parent6a6f3914c0943c72a85c290a8175d759e7f70809 (diff)
parentd4abb4b1438cb316aacae480e7b7e9b055a60b24 (diff)
downloadplyr-f1b4db4f3665ea824ad75d7b68df1efc9f1a0524.tar.lz
plyr-f1b4db4f3665ea824ad75d7b68df1efc9f1a0524.tar.xz
plyr-f1b4db4f3665ea824ad75d7b68df1efc9f1a0524.zip
Merge branch 'develop' into a11y-improvements
# Conflicts: # 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 # src/js/controls.js # src/js/fullscreen.js # src/js/plyr.js # src/js/ui.js # src/js/utils.js
Diffstat (limited to 'src/js/utils/loadSprite.js')
-rw-r--r--src/js/utils/loadSprite.js75
1 files changed, 75 insertions, 0 deletions
diff --git a/src/js/utils/loadSprite.js b/src/js/utils/loadSprite.js
new file mode 100644
index 00000000..dbb00cf2
--- /dev/null
+++ b/src/js/utils/loadSprite.js
@@ -0,0 +1,75 @@
+// ==========================================================================
+// Sprite loader
+// ==========================================================================
+
+import Storage from './../storage';
+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(() => {});
+ }
+}