From 8fc6c2ba526bf1ef8cdb9476f1644089281ce60d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 21 Jun 2019 00:19:37 +1000 Subject: File rename and clean up --- src/js/utils/load-image.js | 19 ++++++++++++ src/js/utils/load-script.js | 14 +++++++++ src/js/utils/load-sprite.js | 75 +++++++++++++++++++++++++++++++++++++++++++++ src/js/utils/loadImage.js | 19 ------------ src/js/utils/loadScript.js | 14 --------- src/js/utils/loadSprite.js | 75 --------------------------------------------- 6 files changed, 108 insertions(+), 108 deletions(-) create mode 100644 src/js/utils/load-image.js create mode 100644 src/js/utils/load-script.js create mode 100644 src/js/utils/load-sprite.js delete mode 100644 src/js/utils/loadImage.js delete mode 100644 src/js/utils/loadScript.js delete mode 100644 src/js/utils/loadSprite.js (limited to 'src/js/utils') diff --git a/src/js/utils/load-image.js b/src/js/utils/load-image.js new file mode 100644 index 00000000..8acd2496 --- /dev/null +++ b/src/js/utils/load-image.js @@ -0,0 +1,19 @@ +// ========================================================================== +// Load image avoiding xhr/fetch CORS issues +// Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded +// By default it checks if it is at least 1px, but you can add a second argument to change this +// ========================================================================== + +export default function loadImage(src, minWidth = 1) { + return new Promise((resolve, reject) => { + const image = new Image(); + + const handler = () => { + delete image.onload; + delete image.onerror; + (image.naturalWidth >= minWidth ? resolve : reject)(image); + }; + + Object.assign(image, { onload: handler, onerror: handler, src }); + }); +} diff --git a/src/js/utils/load-script.js b/src/js/utils/load-script.js new file mode 100644 index 00000000..81ae36f4 --- /dev/null +++ b/src/js/utils/load-script.js @@ -0,0 +1,14 @@ +// ========================================================================== +// Load an external script +// ========================================================================== + +import loadjs from 'loadjs'; + +export default function loadScript(url) { + return new Promise((resolve, reject) => { + loadjs(url, { + success: resolve, + error: reject, + }); + }); +} diff --git a/src/js/utils/load-sprite.js b/src/js/utils/load-sprite.js new file mode 100644 index 00000000..fe4add00 --- /dev/null +++ b/src/js/utils/load-sprite.js @@ -0,0 +1,75 @@ +// ========================================================================== +// 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(() => {}); + } +} diff --git a/src/js/utils/loadImage.js b/src/js/utils/loadImage.js deleted file mode 100644 index 8acd2496..00000000 --- a/src/js/utils/loadImage.js +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Load image avoiding xhr/fetch CORS issues -// Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded -// By default it checks if it is at least 1px, but you can add a second argument to change this -// ========================================================================== - -export default function loadImage(src, minWidth = 1) { - return new Promise((resolve, reject) => { - const image = new Image(); - - const handler = () => { - delete image.onload; - delete image.onerror; - (image.naturalWidth >= minWidth ? resolve : reject)(image); - }; - - Object.assign(image, { onload: handler, onerror: handler, src }); - }); -} diff --git a/src/js/utils/loadScript.js b/src/js/utils/loadScript.js deleted file mode 100644 index 81ae36f4..00000000 --- a/src/js/utils/loadScript.js +++ /dev/null @@ -1,14 +0,0 @@ -// ========================================================================== -// Load an external script -// ========================================================================== - -import loadjs from 'loadjs'; - -export default function loadScript(url) { - return new Promise((resolve, reject) => { - loadjs(url, { - success: resolve, - error: reject, - }); - }); -} diff --git a/src/js/utils/loadSprite.js b/src/js/utils/loadSprite.js deleted file mode 100644 index fe4add00..00000000 --- a/src/js/utils/loadSprite.js +++ /dev/null @@ -1,75 +0,0 @@ -// ========================================================================== -// 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(() => {}); - } -} -- cgit v1.2.3