(part of zena)

Using the helper <%= css_edit('style.css') %> shows two buttons to start/stop the css live update

Usage (on your local machine) :
0. open the web page where you inserted <%= css_edit('style.css') %> (replace style.css with your own stylesheets name)
1. click start on the web page
2. open your great editor
3. edit 'style.css'
4. save the file
5 MAGIC ! the web page is updated

# CONTROLLER (version but could be anything else)
  def css_preview
    file = params[:css].gsub('..','')
    path = File.join(RAILS_ROOT, 'public', 'stylesheets', file)
    if File.exists?(path)
      if session[:css] && session[:css] == File.stat(path).mtime
        render :nothing=>true
      else
        session[:css] = File.stat(path).mtime
        @css = File.read(path)
      end
    else
      render :nothing=>true
    end
  end

# HELPER :
  def css_edit(css_file = 'zen.css')
    str = <<ENDTXT
    <div id='css_edit'>
      <div id='css' onClick='cssUpdate()'></div>
      <script type="text/javascript">
      var c=0
      var t
      function timedCount()
      {
        if (c == '#'){
          c = '_'
        } else {
          c = '#'
        }
        document.getElementById('css_counter').innerHTML=c
        new Ajax.Request('/version/css_preview', {asynchronous:true, evalScripts:true, parameters:'css=#{css_file}'});
        t=setTimeout("timedCount()",2000)
      }

      function stopCount()
      {
        clearTimeout(t)
      }

      </script>
      <form>
        <input type="button" value="Start CSS" onClick="timedCount()">
        <input type="button" value="Stop  CSS" onClick="stopCount()">
        <span id='css_counter'></span>
      </form>
    </div>
    
ENDTXT
  end

# RJS template 'css_preview.rjs'
page.replace_html    "css", "<style>#{@css}</style>"