Skip to content

Instantly share code, notes, and snippets.

@hdragomir

hdragomir/sm-annotated.html

Last active February 2, 2025 02:22
Show Gist options
  • Save hdragomir/8f00ce2581795fd7b1b7 to your computer and use it in GitHub Desktop.
Save hdragomir/8f00ce2581795fd7b1b7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hdragomir revised this gist Oct 21, 2014. 1 changed file with 12 additions and 5 deletions.
    17 changes: 12 additions & 5 deletions sm-annotated.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    }
    }

    // if we have the fonts in localStorage or if we've cached them using the native browser cache
    // if we have the fonts in localStorage or if we've cached them using the native batrowser cache
    if ((window.localStorage && localStorage.font_css_cache) || document.cookie.indexOf('font_css_cache') > -1){
    // just use the cached version
    injectFontsStylesheet();
    @@ -49,7 +49,8 @@
    } else {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", css_href, true);
    on(xhr, 'load', function () {
    // cater for IE8 which does not support addEventListener or attachEvent on XMLHttpRequest
    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
    // once we have the content, quickly inject the css rules
    injectRawStyle(xhr.responseText);
    @@ -58,7 +59,7 @@
    localStorage.font_css_cache = xhr.responseText;
    localStorage.font_css_cache_file = css_href;
    }
    });
    };
    xhr.send();
    }
    }
    @@ -67,9 +68,15 @@
    // this is the simple utitily that injects the cached or loaded css text
    function injectRawStyle(text) {
    var style = document.createElement('style');
    style.innerHTML = text;
    // cater for IE8 which doesn't support style.innerHTML
    style.setAttribute("type", "text/css");
    if (style.styleSheet) {
    style.styleSheet.cssText = text;
    } else {
    style.innerHTML = text;
    }
    document.getElementsByTagName('head')[0].appendChild(style);
    }

    }());
    </script>
    </script>
  2. hdragomir revised this gist Jun 29, 2014. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions sm-annotated.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,8 @@
    <script type="text/javascript">
    (function () {
    "use strict";
    // once cached, the css file is stored on the client forever unless
    // the URL below is changed. Any change will invalidate the cache
    var css_href = './index_files/web-fonts.css';
    // a simple event handler wrapper
    function on(el, ev, callback) {
    @@ -52,6 +54,7 @@
    // once we have the content, quickly inject the css rules
    injectRawStyle(xhr.responseText);
    // and cache the text content for further use
    // notice that this overwrites anything that might have already been previously cached
    localStorage.font_css_cache = xhr.responseText;
    localStorage.font_css_cache_file = css_href;
    }
  3. hdragomir created this gist Jun 12, 2014.
    72 changes: 72 additions & 0 deletions sm-annotated.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    <script type="text/javascript">
    (function () {
    "use strict";
    var css_href = './index_files/web-fonts.css';
    // a simple event handler wrapper
    function on(el, ev, callback) {
    if (el.addEventListener) {
    el.addEventListener(ev, callback, false);
    } else if (el.attachEvent) {
    el.attachEvent("on" + ev, callback);
    }
    }

    // if we have the fonts in localStorage or if we've cached them using the native browser cache
    if ((window.localStorage && localStorage.font_css_cache) || document.cookie.indexOf('font_css_cache') > -1){
    // just use the cached version
    injectFontsStylesheet();
    } else {
    // otherwise, don't block the loading of the page; wait until it's done.
    on(window, "load", injectFontsStylesheet);
    }

    // quick way to determine whether a css file has been cached locally
    function fileIsCached(href) {
    return window.localStorage && localStorage.font_css_cache && (localStorage.font_css_cache_file === href);
    }

    // time to get the actual css file
    function injectFontsStylesheet() {
    // if this is an older browser
    if (!window.localStorage || !window.XMLHttpRequest) {
    var stylesheet = document.createElement('link');
    stylesheet.href = css_href;
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(stylesheet);
    // just use the native browser cache
    // this requires a good expires header on the server
    document.cookie = "font_css_cache";

    // if this isn't an old browser
    } else {
    // use the cached version if we already have it
    if (fileIsCached(css_href)) {
    injectRawStyle(localStorage.font_css_cache);
    // otherwise, load it with ajax
    } else {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", css_href, true);
    on(xhr, 'load', function () {
    if (xhr.readyState === 4) {
    // once we have the content, quickly inject the css rules
    injectRawStyle(xhr.responseText);
    // and cache the text content for further use
    localStorage.font_css_cache = xhr.responseText;
    localStorage.font_css_cache_file = css_href;
    }
    });
    xhr.send();
    }
    }
    }

    // this is the simple utitily that injects the cached or loaded css text
    function injectRawStyle(text) {
    var style = document.createElement('style');
    style.innerHTML = text;
    document.getElementsByTagName('head')[0].appendChild(style);
    }

    }());
    </script>