aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/js/lib/sprite.js
blob: bcd8a0b71d74b14178e3e236d533f47869355d93 (plain)
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
// ==========================================================================
// SVG sprite loading and caching
// This file should be at the top of the body to avoid a flash
// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id');
// The second argument is optional but prevents loading twice
// ==========================================================================

(function() {
    window.loadSprite = function(url, id) {
        if (typeof url !== "string") {
            return;
        }

        var body = document.body;
        var prefix = "cache-";
        var hasId = typeof id === "string";
        var isCached = false;

        // Check for *actual* storage support
        var cacheSupported = (function() {
            if (!hasId) {
                return false;
            }
            var test = '___test';
            try {
                localStorage.setItem(test, test);
                localStorage.removeItem(test);
                return true;
            } catch (e) {
                return false;
            }
        })();

        function updateSprite(container, data) {
            // Inject content
            container.innerHTML = data;

            // Inject the SVG to the body
            body.insertBefore(container, body.childNodes[0]);
        }

        // Only load once
        if (!hasId || document.querySelectorAll("#" + id).length === 0) {
            // Create container
            var container = document.createElement("div");
            container.setAttribute("hidden", "");

            if (hasId) {
                container.setAttribute("id", id);
            }

            // Check in cache
            if (cacheSupported) {
                var cached = localStorage.getItem(prefix + id);
                isCached = cached !== null;

                if (isCached) {
                    var data = JSON.parse(cached);
                    updateSprite(container, data.content);
                }
            }

            // ReSharper disable once InconsistentNaming
            var xhr = new XMLHttpRequest();

            // XHR for Chrome/Firefox/Opera/Safari
            if ("withCredentials" in xhr) {
                xhr.open("GET", url, true);
            }
            // Not supported
            else {
                return;
            }

            // Once loaded, inject to container and body
            xhr.onload = function() {
                if (cacheSupported) {
                    localStorage.setItem(prefix + id, JSON.stringify({
                        content: xhr.responseText
                    }));
                }

                updateSprite(container, xhr.responseText);
            };

            xhr.send();
        }
    }
})();