livecss 0.0.1

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in livecss.gemspec
+gemspec

data/README.md

@@ -0,0 +1,10 @@
+Based on this awesome work https://github.com/ooyala/livecss
+
+Rails 3
+-------
+To start using simply add gem to :development section of your Gemfile
+  
+  group :development do
+    gem 'livecss'
+  end
+  

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/livecss/engine.rb

@@ -0,0 +1,4 @@
+module Livecss
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/livecss/version.rb

@@ -0,0 +1,3 @@
+module Livecss
+  VERSION = "0.0.1"
+end

data/lib/livecss.rb

@@ -0,0 +1,2 @@
+require 'livecss/engine'
+require 'livecss/version'

data/livecss.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "livecss/version"
+
+Gem::Specification.new do |s|
+  s.name        = "livecss"
+  s.version     = Livecss::VERSION
+  s.authors     = ["Alex K"]
+  s.email       = ["flskif@gmail.com"]
+  s.homepage    = ""
+  s.summary     = %q{Live CSS - instantly see your CSS changes in browser}
+  s.description = %q{}
+
+  s.rubyforge_project = "livecss"
+  s.required_rubygems_version = ">= 1.3.6"
+  s.add_dependency "railties", ">= 3.2.0", "< 5.0"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/vendor/assets/javascripts/livecss.js

@@ -0,0 +1,174 @@
+$(document).ready(function() { livecss.watchAll(); })
+
+/*
+ * Live CSS will monitor <link> tags on the page and poll the server for changes to the CSS. This enables you
+ * to refresh styles without disrupting the state of the view, and the page updates itself without you
+ * having to switch from your editor to the browser and hit refresh.
+ *
+ * Usage:
+ * livecss.watchAll() - starts polling all <link> tags in the current page for changes.
+ *
+ * If you want more fine grained control over which CSS is being autoreloaded:
+ * livecss.watch(linkElement) - start watching a single <link> element for changes.
+ * livecss.unwatchAll()
+ * livecss.unwatch(linkElement)
+ *
+ * For convenience, livecss will call watchAll() right away if the page has "startlivecss=true" in the URL's
+ * query string.
+ */
+var livecss = {
+  // How often to poll for changes to the CSS.
+  pollFrequency: 1000,
+  outstandingRequests: {}, // stylesheet url => boolean
+  filesLastModified: {}, // stylesheet url => last modified timestamp
+  watchTimers: {}, // stylesheet url => timer ID
+
+  /*
+   * Begins polling all link elements on the current page for changes.
+   */
+  watchAll: function() {
+    this.unwatchAll();
+    var timerId = setInterval(this.proxy(function() {
+      var linkElements = document.getElementsByTagName("link");
+      var validMediaTypes = ["screen", "handheld", "all", ""];
+      for (var i = 0; i < linkElements.length; i++) {
+        var media = (linkElements[i].getAttribute("media") || "").toLowerCase();
+        if (linkElements[i].getAttribute("rel") == "stylesheet"
+            && livecss.indexOf(validMediaTypes, media) >= 0
+            && this.isLocalLink(linkElements[i])) {
+          this.refreshLinkElement(linkElements[i]);
+        }
+      }
+    }), this.pollFrequency);
+    this.watchTimers["all"] = timerId;
+  },
+
+  watch: function(linkElement) {
+    var url = linkElement.getAttribute("href");
+    this.unwatch(url);
+    this.watchTimers[url] = setInterval(this.proxy(function() {
+      var linkElement = this.linkElementWithHref(url);
+      this.refreshLinkElement(linkElement);
+    }), this.pollFrequency);
+  },
+
+  unwatchAll: function() {
+    for (var url in this.watchTimers)
+      this.unwatch(url);
+  },
+
+  unwatch: function(url) {
+    if (this.watchTimers[url] != null) {
+      clearInterval(this.watchTimers[url]);
+      delete this.watchTimers[url];
+      delete this.outstandingRequests[url];
+    }
+  },
+
+  linkElementWithHref: function(url) {
+    var linkElements = document.getElementsByTagName("link");
+    for (var i = 0; i < linkElements.length; i++)
+      if (linkElements[i].href == url)
+        return linkElements[i]
+  },
+
+  /*
+   * Replaces a link element with a new one for the given URL. This has to wait for the new <link> to fully
+   * load, because simply changing the href on an existing <link> causes the page to flicker.
+   */
+  replaceLinkElement: function(linkElement, stylesheetUrl) {
+    var parent = linkElement.parentNode;
+    var sibling = linkElement.nextSibling;
+    var url = this.addCacheBust(linkElement.href);
+
+    var newLinkElement = document.createElement("link");
+    newLinkElement.href = url;
+    newLinkElement.setAttribute("rel", "stylesheet");
+
+    if (sibling)
+      parent.insertBefore(newLinkElement, sibling);
+    else
+      parent.appendChild(newLinkElement);
+
+    // We're polling to check whether the CSS is loaded, because firefox doesn't support an onload event
+    // for <link> elements.
+    var loadingTimer = setInterval(this.proxy(function() {
+      if (!this.isCssElementLoaded(newLinkElement)) return;
+      if (typeof(console) != "undefined")
+        console.log("CSS refreshed:", this.removeCacheBust(url));
+      clearInterval(loadingTimer);
+      delete this.outstandingRequests[this.removeCacheBust(url)];
+      parent.removeChild(linkElement);
+    }), 100);
+  },
+
+  /*
+   * Refreshes the provided linkElement if it's changed. We issue a HEAD request for the CSS. If its
+   * last-modified header is changed, we remove and re-add the <link> element to the DOM which trigger a
+   * re-render from the browser. This uses a cache-bust querystring parameter to ensure we always bust through
+   * the browser's cache.
+   */
+  refreshLinkElement: function(linkElement) {
+    var url = this.removeCacheBust(linkElement.getAttribute("href"));
+    if (this.outstandingRequests[url]) return;
+    var request = new XMLHttpRequest();
+    this.outstandingRequests[url] = request;
+    var cacheBustUrl = this.addCacheBust(url);
+
+    request.onreadystatechange = this.proxy(function(event) {
+      if (request.readyState != 4) return;
+      delete this.outstandingRequests[url];
+      if (request.status != 200 && request.status != 304) return;
+      var lastModified = Date.parse(request.getResponseHeader("Last-Modified"));
+      if (!this.filesLastModified[url] || this.filesLastModified[url] < lastModified) {
+        this.filesLastModified[url] = lastModified;
+        this.replaceLinkElement(linkElement, cacheBustUrl);
+      }
+    });
+    request.open("HEAD", cacheBustUrl);
+    request.send(null);
+  },
+
+  isCssElementLoaded: function(cssElement) {
+    // cssElement.sheet.cssRules will throw an error in firefox when the css file is not yet loaded.
+    try { return (cssElement.sheet && cssElement.sheet.cssRules.length > 0); } catch(error) { }
+    return false;
+  },
+
+  /* returns true for local urls such as: '/screen.css', 'http://mydomain.com/screen.css', 'css/screen.css'
+  */
+  isLocalLink: function(linkElement) {
+  	//On all tested browsers, this javascript property returns a normalized URL
+	var url = linkElement.href;
+    var regexp = new RegExp("^\/|^" +
+      document.location.protocol + "//" + document.location.host);
+    return (url.search(regexp) == 0);
+  },
+
+  /*
+   * Adds and removes a "cache_bust" querystring parameter to the given URLs. This is so we always bust
+   * through the browser's cache when checking for updated CSS.
+   */
+  addCacheBust: function(url) { return this.removeCacheBust(url) + "?cache_bust=" + (new Date()).getTime(); },
+  removeCacheBust: function(url) { return url.replace(/\?cache_bust=[^&]+/, ""); },
+
+  /* A utility method to bind the value of "this". Equivalent to jQuery's proxy() function. */
+  proxy: function(fn) {
+    var self = this;
+    return function() { return fn.apply(self, []); };
+  },
+
+  /* Unfortunately IE7 doesn't have this built-in. */
+  indexOf: function(array, item) {
+    for (var i = 0; i < array.length; i++) { if (array[i] == item) return i; }
+    return -1;
+  },
+
+  /* A utility function for abstracting the difference between event listening in IE and other browsers. */
+  addEventListener: function(object, event, fn) {
+    object.attachEvent ? object.attachEvent("on" + event, fn) : object.addEventListener(event, fn, false);
+  }
+};
+
+if (window.location.search.toString().indexOf("startlivecss=true") >= 0)
+  livecss.addEventListener(window, "load", function() { livecss.watchAll(); });

metadata

@@ -0,0 +1,68 @@
+--- !ruby/object:Gem::Specification
+name: livecss
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Alex K
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-03-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: &70205702935160 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+    - - <
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70205702935160
+description: ''
+email:
+- flskif@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- lib/livecss.rb
+- lib/livecss/engine.rb
+- lib/livecss/version.rb
+- livecss.gemspec
+- vendor/assets/javascripts/livecss.js
+homepage: ''
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: livecss
+rubygems_version: 1.8.17
+signing_key: 
+specification_version: 3
+summary: Live CSS - instantly see your CSS changes in browser
+test_files: []