Skip to content

Instantly share code, notes, and snippets.

@nobilelucifero

nobilelucifero/sm-annotated.html

Forked from hdragomir/sm-annotated.html
Created June 29, 2014 22:54
Show Gist options
  • Save nobilelucifero/a922e98a93f173743bb4 to your computer and use it in GitHub Desktop.
Save nobilelucifero/a922e98a93f173743bb4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @hdragomir 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;
    }
  2. @hdragomir 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>