drifterz28
6/19/2014 - 3:24 PM

use a URL hash to setup and refresh CSS, for use when live reload will not do and just need the css to get updated.

use a URL hash to setup and refresh CSS, for use when live reload will not do and just need the css to get updated.

#CSS Refresher

For when LiveReload will not work.

##How to

Save as bookmarklet

javascript:(function(){var a=document.createElement("script");a.setAttribute("src","https://rawgit.com/drifterz28/0d459bb1286df63130f1/raw/f9c20f507bf17aaa456060a77ae51770ee54dcf2/css-refresher.js");document.body.appendChild(a);}());

when on a site that you need to refresh the page click on bookmark, do start|10|styles.css will update styles.css every 10 seconds. stop will stop the refreshing and refresh will do a single refresh.

(function(){
    var CSSrefresher, hash, interval;
    var styles = document.querySelectorAll('link[rel="stylesheet"]');
    var ev = {
        start: function () {
            console.log('start refreshing every ' + interval/1000 + ' seconds');
            clearInterval(CSSrefresher);
            CSSrefresher = setInterval(ev.refresh, interval);
        },
        refresh: function () {
            console.log('refreshing');
            for (var i = 0; i < styles.length; i++) {
                var style = styles[i].href.split('?')[0];
                if (!hash[2] || styles[i].href.search(hash[2]) !== -1) {
                    styles[i].href= style + '?' + new Date().getTime();
                }
            }
        },
        stop: function () {
            console.log('stoped');
            clearInterval(CSSrefresher);
        },
        help: function () {
            console.log('Format: #action|time|css_script');
            console.log('Actions: Start, stop, refresh');
            console.log('Time: based in seconds');
            console.log('CSS script: the name of the style sheet baase off of js .search()');
        }
    };
    console.log('started');
    window.addEventListener("hashchange", function (){
        console.log('started');
        hash = location.hash.slice(1).split('|');
        interval = (hash && hash[1])? parseFloat(hash[1]) * 1000 : 100000;
        if(ev[hash[0]]){
            console.log(hash[0]);
            ev[hash[0]]();
        }else{
            ev.help();
        }
    },false);
})();