tay 0.0.3 → 0.0.4

data/.gitignore

@@ -16,3 +16,5 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+lib/tay/cli/generators/templates/**/*.html
+lib/tay/cli/generators/templates/**/*.js

data/README.md

@@ -2,10 +2,22 @@
 
 Tay is designed to help you swiftly write Google Chrome extensions using your favourite languages and tools.
 
+## Quickstart
+
+    $ gem install tay
+    $ tay new my_extension
+    $ cd my_extension
+    $ tay generate browser_action
+    $ tay build
+
+Now go and load your extension in Chrome and look in the top right for the puzzle piece!
+
 ## Installation
 
     $ gem install tay
 
+If installing the gem from source, be sure to run `rake build_generators` first!
+
 ## Usage
 
 Tay helps create, bootstrap, develop and publish Chrome extentions. It all works through the `tay` command. Running `tay` alone will show you a list of commands.
@@ -71,7 +83,7 @@ To build the extension, run `tay build`. Source files will be compiled and writt
 
 If you run `tay watch` in the top level directory, tay will automatically build whenever a change is detected in the `src` directory *(you still need to go and reload the unpacked extension in Chrome)*.
 
-To use `tay watch` you'll need to add the `[guard-tay](http://github.com/rixth/guard-tay` gem to your Gemfile and run `bundle install`. If you want to customize the directories that are watched for changes, you can generate a [Guardfile](http://github.com/guard/guard) by running `guard init tay`.
+To use `tay watch` you'll need to add the [guard-tay](http://github.com/rixth/guard-tay) gem to your Gemfile and run `bundle install`. If you want to customize the directories that are watched for changes, you can generate a [Guardfile](http://github.com/guard/guard) by running `guard init tay`.
 
     Usage:
       tay watch
@@ -85,7 +97,7 @@ To use `tay watch` you'll need to add the `[guard-tay](http://github.com/rixth/g
 
 ### Minifying
 
-If you have the `[uglifier](https://github.com/lautis/uglifier)` and/or `[yui-compressor](https://github.com/sstephenson/ruby-yui-compressor)` gems in your Gemfile, you will be able to minify the JS and CSS in a built extension.
+If you have the [uglifier](https://github.com/lautis/uglifier) and/or [yui-compressor](https://github.com/sstephenson/ruby-yui-compressor) gems in your Gemfile, you will be able to minify the JS and CSS in a built extension.
 
     Usage:
       tay minify
@@ -130,6 +142,5 @@ The filename of the key can be specified using by setting `key_path` in the Tayf
 
 ## TODO
 
-* Generators that can also make haml/coffeescript
 * Localization of extensions
 * Generator for extension option pages

data/Rakefile

@@ -1,6 +1,28 @@
 #!/usr/bin/env rake
 require "bundler/gem_tasks"
 
+task :build_generators do
+  require 'tilt'
+  require 'haml'
+  require 'coffee-script'
+
+  templates_dir = Pathname.new('lib//tay/cli/generators/templates').expand_path(File.dirname(__FILE__))
+  Dir[templates_dir.join('**/*.coffee')].each do |cs_path|
+    File.open(cs_path.sub(/\.coffee/, ''), 'w') do |f|
+      f.write Tilt.new(cs_path).render
+    end
+  end
+
+  Dir[templates_dir.join('**/*.haml')].each do |haml_path|
+    File.open(haml_path.sub(/\.haml/, ''), 'w') do |f|
+      html = Tilt.new(haml_path).render
+      # We need to fix the ERB tags which have been encoded
+      html = html.gsub(/%&gt;/, '%>').gsub(/&lt;%/, '<%')
+      f.write html
+    end
+  end
+end
+
 task :doc do
   `sdoc`
 end

data/lib/tay/cli/generate.rb

@@ -16,6 +16,7 @@ module Tay
       require 'tay/cli/generators/page_action'
       require 'tay/cli/generators/browser_action'
       require 'tay/cli/generators/content_script'
+      require 'tay/cli/generators/options_page'
 
       protected
 
@@ -33,12 +34,55 @@ module Tay
       # Render a template in the context of self and return its contents
       # Thor does not provide a way to do this.
       def render_template(path, locals = {})
+        path = path.to_s
+
+        # Try to use a haml file path if available
+        if path[/\.html$/] && using_haml?
+          begin
+            if find_in_source_paths(path + '.haml')
+              path = path + '.haml'
+            end
+          rescue Exception
+          end
+        end
+
         tayfile_template = Tilt::ERBTemplate.new(find_in_source_paths(path), {
           :trim => '-'
         })
         tayfile_template.render(self, locals)
       end
 
+      ##
+      # Automatically use the coffeescript/haml templates when copying a file
+      # if the user has the gems in their gemfile
+      def copy_file(from, to)
+        from = from.to_s
+        to = to.to_s
+
+        if from[/\.js$/] && using_coffeescript?
+          from = from + '.coffee'
+          to = to + '.coffee'
+        end
+
+        if from[/\.html$/] && using_haml?
+          from = from + '.haml'
+          to = to + '.haml'
+        end
+
+        super(from, to)
+      end
+
+      ##
+      # Create a file, tacking on .haml if we're using it
+      def create_file(path, content, *args)
+        path = path.to_s
+        if path[/\.html$/] && using_haml?
+          path = path + '.haml'
+        end
+
+        super
+      end
+
       ##
       # Get path to src/assets
       def asset_dir

data/lib/tay/cli/generators/browser_action.rb

@@ -12,7 +12,9 @@ module Tay
         fs_name = Utils.filesystem_name(options['action-name'])
         copy_file('browser_action/action.js', javascript_dir.join(fs_name+ '.js'))
         copy_file('browser_action/action.css', stylesheet_dir.join(fs_name+ '.css'))
-        create_file(html_dir.join(fs_name+ '.html'), render_template('browser_action/action.html', :fs_name => fs_name))
+
+        create_file(html_dir.join(fs_name + '.html'), render_template('browser_action/action.html', :fs_name => fs_name))
+
         inject_tayfile_content(render_template('browser_action/tayfile', :fs_name => fs_name))
       end
     end

data/lib/tay/cli/generators/content_script.rb

@@ -1,16 +1,3 @@
-module Tay
-  module CLI
-    class Generate < ::Thor
-      desc "content_script", "Generate a content script"
-      def content_script
-        copy_file('content_script/content_script.js', javascript_dir.join('content_script.js'))
-        copy_file('content_script/content_script.css', stylesheet_dir.join('content_script.css'))
-        inject_tayfile_content(File.read(find_in_source_paths('content_script/tayfile_content')))
-      end
-    end
-  end
-end
-
 module Tay
   module CLI
     class Generate < ::Thor

data/lib/tay/cli/generators/options_page.rb

@@ -0,0 +1,17 @@
+  module Tay
+    module CLI
+      class Generate < ::Thor
+        desc "options_page", "Generate an options page"
+        def options_page
+          copy_file('options_page/options.js', javascript_dir.join('options.js'))
+          copy_file('options_page/options_page.js', javascript_dir.join('options_page.js'))
+          copy_file('options_page/options_server.js', javascript_dir.join('options_server.js'))
+          copy_file('options_page/options_page.css', stylesheet_dir.join('options_page.css'))
+
+          create_file(html_dir.join('options_page.html'), render_template('options_page/options_page.html'))
+
+          inject_tayfile_content(render_template('options_page/tayfile'))
+        end
+      end
+    end
+  end

data/lib/tay/cli/generators/templates/browser_action/action.html.haml

@@ -0,0 +1,8 @@
+!!!5
+%html
+  %head
+    %title <%= options['action-name'] %>
+    %script{src: "/javascripts/<%= fs_name %>.js"}
+    %style{href: "/stylesheets/<%= fs_name %>.css", type: "text/css", rel: "stylesheet"}
+  %body
+    %h1 Hello World!

data/lib/tay/cli/generators/templates/browser_action/action.js.coffee

@@ -0,0 +1,6 @@
+document.addEventListener 'DOMContentLoaded', ->
+  el = document.createElement('p');
+  currentTime = (new Date()).toTimeString()
+  el.appendChild document.createTextNode("The time is now: #{currentTime}")
+  document.body.appendChild el
+, false

data/lib/tay/cli/generators/templates/content_script/content_script.js.coffee

@@ -0,0 +1,2 @@
+h1 = document.querySelector 'h1'
+h1.innerHTML = 'Set by content_script.js'

data/lib/tay/cli/generators/templates/options_page/options.js.coffee

@@ -0,0 +1,33 @@
+class OptionStore
+  get: (key, callback) ->
+    callback = key if typeof(key) == 'function'
+
+    if !key or key == callback
+      chrome.extension.sendRequest {method: "options.getAll"}, (@options) =>
+        @optionsLoaded = true
+        callback(options) if callback
+    else if @optionsLoaded
+      callback @options[key]
+    else
+      @get =>
+        callback(@options[key])
+
+  setAll: (options) ->
+    chrome.extension.sendRequest {
+      method: "options.setAll",
+      options: options
+    }
+
+  set: (key, value) ->
+    if typeof(key) == 'object'
+      attrs = key
+    else
+      attrs = {}
+      attrs[key] = value
+
+    chrome.extension.sendRequest {
+      method: "options.setMany",
+      options: attrs
+    }
+
+this.optionStore = new OptionStore

data/lib/tay/cli/generators/templates/options_page/options_page.css

@@ -0,0 +1,55 @@
+body {
+   background: #f9f9f9;
+   padding: 20px;
+   font-size: 75%;
+   color: #222;
+   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+ul {
+   list-style: none;
+   margin: 0;
+   padding: 0;
+}
+
+a {
+   color: #0054A6;
+}
+a:hover {
+   color: #590;
+   cursor: pointer;
+}
+
+.module {
+   padding: 0;
+   border: 1px solid #ccc;
+   border-radius: 5px;
+   background: white;
+   box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
+   margin: 0 auto;
+   width: 300px;
+}
+.module>.content {
+   padding: 10px;
+}
+.module .bottom{
+   background-color: #eee;
+   border-top: 1px solid #d2d2d2;
+   padding: 10px 15px;
+   font-weight: bold;
+   overflow: hidden;
+   border-bottom-left-radius: 5px;
+   border-bottom-right-radius: 5px;
+   box-shadow: inset 0px 0px 0px 1px #fff;
+}
+.module>h1 {
+   font-size: 18px;
+   font-weight: bold;
+   margin: 10px 10px 0 10px;
+   padding: 0 0 10px 0;
+}
+.module>h1>img {
+   display:inline-block;
+   vertical-align:-15px;
+   margin-right:7px
+}

data/lib/tay/cli/generators/templates/options_page/options_page.html.haml

@@ -0,0 +1,38 @@
+!!!5
+%html
+  %head
+    %title Options
+    %link{rel: "stylesheet", type: "text/css", href: "/stylesheets/options_page.css"}
+  %body
+    .module
+      %h1
+        Options
+      .content
+        %form#options
+          %ul
+            %li
+              %label
+                A boolean option
+                %input{type: "checkbox", name: "boolean_option"}
+            %li
+              %label
+                A text option
+                %input{type: "text", name: "string_option"}
+            %li
+              %label
+                A select option
+                %select{name: "select_option"}
+                  %option{value: "1"} One
+                  %option{value: "2"} Two
+                  %option{value: "3"} Three
+            %li
+              %label
+                Radio option
+                %input{type: "radio", name: "radio_option", value: "a"} A
+                %input{type: "radio", name: "radio_option", value: "b"} B
+                %input{type: "radio", name: "radio_option", value: "c"} C
+
+      .bottom
+        %a#saveSettings Save your settings
+    %script{src: "/javascripts/options.js"}
+    %script{src: "/javascripts/options_page.js"}

data/lib/tay/cli/generators/templates/options_page/options_page.js.coffee

@@ -0,0 +1,57 @@
+setValueOnInput = (name, value) ->
+  inputs = document.querySelectorAll("form#options *[name='#{name}']")
+  input = inputs[0]
+
+  if input.tagName == 'INPUT'
+    if input.type == 'checkbox'
+      input.checked = true if value
+    else if input.type == 'radio'
+      Array.prototype.slice.call(inputs,0).some (radio) ->
+        if radio.value == value
+          radio.checked = true if value
+          true
+    else
+      input.value = value
+  else if input.tagName == 'SELECT'
+    for option in input.options
+      option.selected = true if option.value == value
+  else if input.tagName = 'TEXTAREA'
+    input.value = value
+
+getOptionValuesFromForm = ->
+  inputs = document.querySelectorAll("form#options *[name]")
+  values = {}
+  for input in inputs
+    name = input.name
+
+    if input.tagName == 'INPUT'
+      if input.type == 'checkbox'
+        values[name] = (input.value || "checked") if input.checked
+      else if input.type == 'radio'
+        if Object.keys(values).indexOf input.name > -1
+          radios = document.querySelectorAll("form#options input[type='radio'][name='#{name}']")
+          for radio in radios
+            values[name] = radio.value if radio.checked
+      else
+        values[name] = input.value
+    else if input.tagName == 'SELECT'
+      for option in input.options
+        values[name] = option.value if option.selected
+    else if input.tagName = 'TEXTAREA'
+      input.value = value
+  values
+
+###
+Load the options from the backend and load them in to the form
+###
+optionStore.get (options) ->
+  Object.keys(options).forEach (name) ->
+    setValueOnInput(name, options[name])
+
+###
+Take the values from the form and save them to the data store
+###
+document.getElementById('saveSettings').addEventListener 'click', (event) ->
+  optionStore.setAll getOptionValuesFromForm()
+  event.preventDefault()
+, false

data/lib/tay/cli/generators/templates/options_page/options_server.js.coffee

@@ -0,0 +1,26 @@
+defaultOptions =
+  boolean_option: true
+  string_option: "@rx"
+  select_option: "2"
+  radio_option: "b"
+
+extendObject = (dest, srcs...) ->
+  for src in srcs
+    for name in Object.getOwnPropertyNames(src) when name not in dest
+      dest[name] = src[name]
+  dest
+
+options = extendObject {}, defaultOptions, JSON.parse(localStorage.getItem('options') || "{}")
+
+chrome.extension.onRequest.addListener (request, sender, sendResponse) ->
+  return unless /^options\./.test(request.method)
+
+  switch request.method
+    when "options.getAll"
+      sendResponse options
+    when "options.setMany"
+      extendObject options, request.options
+      localStorage.setItem 'options', JSON.stringify(options)
+    when "options.setAll"
+      options = request.options
+      localStorage.setItem 'options', JSON.stringify(options)

data/lib/tay/cli/generators/templates/options_page/tayfile

@@ -0,0 +1,5 @@
+  ext.javascripts << 'javascripts/options.js'
+  ext.javascripts << 'javascripts/options_page.js'
+  ext.stylesheets << 'stylesheets/options_page.css'
+  ext.options_page = 'html/options_page.html'
+  ext.background_scripts << 'javascripts/options_server.js'

data/lib/tay/cli/generators/templates/page_action/controller.js.coffee

@@ -0,0 +1,5 @@
+chrome.tabs.onUpdated.addListener (tabId, changed, info) ->
+  chrome.pageAction.show tabId
+
+chrome.pageAction.onClicked.addListener (tab) ->
+  alert "The page action was clicked on tab: #{tab.title}"

data/lib/tay/cli/helpers.rb

@@ -47,6 +47,18 @@ module Tay
       def build_dir
         base_dir.join(options['build-directory'] || 'build')
       end
+
+      ##
+      # Detect if the user has coffee-script in their Gemfile
+      def using_coffeescript?
+        Gem.loaded_specs.keys.include?('coffee-script')
+      end
+
+      ##
+      # Detect if the user has haml in their Gemfile
+      def using_haml?
+        Gem.loaded_specs.keys.include?('haml')
+      end
     end
   end
 end

data/lib/tay/version.rb

@@ -1,3 +1,3 @@
 module Tay
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/tay.gemspec

@@ -15,6 +15,7 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
   gem.version       = Tay::VERSION
 
+  gem.add_dependency 'bundler', '>= 1.1.3'
   gem.add_dependency 'thor', '>= 0.15.2'
   gem.add_dependency 'tilt', '>= 1.3.3'
   gem.add_dependency 'sprockets', '>= 2.4.3'
@@ -23,4 +24,6 @@ Gem::Specification.new do |gem|
   gem.add_development_dependency 'rspec'
   gem.add_development_dependency 'sdoc'
   gem.add_development_dependency 'rake'
+  gem.add_development_dependency 'coffee-script'
+  gem.add_development_dependency 'haml'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tay
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,8 +9,24 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-25 00:00:00.000000000 Z
+date: 2012-05-30 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.1.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.1.3
 - !ruby/object:Gem::Dependency
   name: thor
   requirement: !ruby/object:Gem::Requirement
@@ -123,6 +139,38 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: coffee-script
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: haml
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Tay helps you develop Chrome extensions
 email:
 - tom@rixth.org
@@ -144,15 +192,22 @@ files:
 - lib/tay/cli/generate.rb
 - lib/tay/cli/generators/browser_action.rb
 - lib/tay/cli/generators/content_script.rb
+- lib/tay/cli/generators/options_page.rb
 - lib/tay/cli/generators/page_action.rb
 - lib/tay/cli/generators/templates/browser_action/action.css
-- lib/tay/cli/generators/templates/browser_action/action.html
-- lib/tay/cli/generators/templates/browser_action/action.js
+- lib/tay/cli/generators/templates/browser_action/action.html.haml
+- lib/tay/cli/generators/templates/browser_action/action.js.coffee
 - lib/tay/cli/generators/templates/browser_action/tayfile
 - lib/tay/cli/generators/templates/content_script/content_script.css
-- lib/tay/cli/generators/templates/content_script/content_script.js
+- lib/tay/cli/generators/templates/content_script/content_script.js.coffee
 - lib/tay/cli/generators/templates/content_script/tayfile
-- lib/tay/cli/generators/templates/page_action/controller.js
+- lib/tay/cli/generators/templates/options_page/options.js.coffee
+- lib/tay/cli/generators/templates/options_page/options_page.css
+- lib/tay/cli/generators/templates/options_page/options_page.html.haml
+- lib/tay/cli/generators/templates/options_page/options_page.js.coffee
+- lib/tay/cli/generators/templates/options_page/options_server.js.coffee
+- lib/tay/cli/generators/templates/options_page/tayfile
+- lib/tay/cli/generators/templates/page_action/controller.js.coffee
 - lib/tay/cli/generators/templates/page_action/icon.png
 - lib/tay/cli/generators/templates/page_action/tayfile
 - lib/tay/cli/helpers.rb
@@ -194,7 +249,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3059562880123652420
+      hash: 1815708585182084014
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -203,7 +258,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3059562880123652420
+      hash: 1815708585182084014
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24

data/lib/tay/cli/generators/templates/browser_action/action.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title><%= options['action-name'] %></title>
-    <script src="/javascripts/<%= fs_name %>.js"></script>
-    <link rel="stylesheet" type="text/css" href="/stylesheets/<%= fs_name %>.css">
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-  </body>
-</html>

data/lib/tay/cli/generators/templates/browser_action/action.js

@@ -1,5 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-  var el = document.createElement('p');
-  el.appendChild(document.createTextNode('The time is now: ' + (new Date()).toTimeString()));
-  document.body.appendChild(el);
-}, false);

data/lib/tay/cli/generators/templates/content_script/content_script.js

@@ -1,4 +0,0 @@
-(function () {
-  var h1 = document.querySelector('h1');
-  h1.innerHTML = 'Set by content_script.js';
-}());

data/lib/tay/cli/generators/templates/page_action/controller.js

@@ -1,7 +0,0 @@
-chrome.tabs.onUpdated.addListener(function (tabId, changed, info) {
-  chrome.pageAction.show(tabId);
-});
-
-chrome.pageAction.onClicked.addListener(function (tab) {
-  alert('The page action was clicked on tab: ' + tab.title)
-});