kuji-mercury-rails 0.3.2

data/app/views/mercury/modals/media.html

@@ -0,0 +1,82 @@
+<form id="mercury_media" class="mercury-form" style="width:600px">
+
+  <div class="mercury-display-pane-container">
+    <div class="mercury-display-pane">
+
+      <fieldset class="inputs">
+        <legend><span>Images</span></legend>
+        <ol>
+          <li id="media_image_url_input" class="string input optional stringish">
+            <label class="label" for="media_image_url"><input name="media_type" type="radio" value="image_url" checked="checked"/>URL</label>
+            <input class="selectable" id="media_image_url" name="media[image_url]" type="text"/>
+          </li>
+        </ol>
+      </fieldset>
+
+      <fieldset class="inputs">
+        <legend><span>Videos</span></legend>
+        <ol>
+          <li id="media_youtube_url_input" class="string input optional stringish">
+            <label class="label" for="media_youtube_url"><input name="media_type" type="radio" value="youtube_url"/>YouTube Share URL</label>
+            <input class="selectable" id="media_youtube_url" name="media[youtube_url]" type="text" placeholder="http://youtu.be/Pny4hoN8eII"/>
+          </li>
+          <li id="media_vimeo_url_input" class="string input optional stringish">
+            <label class="label" for="media_vimeo_url"><input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL</label>
+            <input class="selectable" id="media_vimeo_url" name="media[vimeo_url]" type="text" placeholder="http://vimeo.com/25708134"/>
+          </li>
+        </ol>
+      </fieldset>
+
+      <fieldset class="inputs">
+        <legend><span>Options</span></legend>
+        <ol>
+          <div id="image_url" class="media-options">
+            <li id="media_image_alignment_input" class="select input optional">
+              <label class="label" for="media_image_alignment">Alignment</label>
+              <select id="media_image_alignment" name="media[image_alignment]">
+                <option value="">None</option>
+                <option value="left">Left</option>
+                <option value="right">Right</option>
+                <option value="top">Top</option>
+                <option value="middle">Middle</option>
+                <option value="bottom">Bottom</option>
+                <option value="absmiddle">Absolute Middle</option>
+                <option value="absbottom">Absolute Bottom</option>
+              </select>
+            </li>
+          </div>
+          <div id="youtube_url" class="media-options" style="display:none">
+            <li id="media_youtube_width_input" class="string input optional stringish">
+              <label class="label" for="media_youtube_width">Width</label>
+              <input id="media_youtube_width" name="media[youtube_width]" type="text" value="560"/>
+            </li>
+            <li id="media_youtube_height_input" class="string input optional stringish">
+              <label class="label" for="media_youtube_height">Height</label>
+              <input id="media_youtube_height" name="media[youtube_height]" type="text" value="349"/>
+            </li>
+          </div>
+          <div id="vimeo_url" class="media-options" style="display:none">
+            <li id="media_vimeo_width_input" class="string input optional stringish">
+              <label class="label" for="media_vimeo_width">Width</label>
+              <input id="media_vimeo_width" name="media[vimeo_width]" type="text" value="400"/>
+            </li>
+            <li id="media_vimeo_height_input" class="string input optional stringish">
+              <label class="label" for="media_vimeo_height">Height</label>
+              <input id="media_vimeo_height" name="media[vimeo_height]" type="text" value="225"/>
+            </li>
+          </div>
+        </ol>
+      </fieldset>
+
+    </div>
+  </div>
+
+  <div class="mercury-display-controls">
+    <fieldset class="buttons">
+      <ol>
+        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Media"/></li>
+      </ol>
+    </fieldset>
+  </div>
+
+</form>

data/app/views/mercury/modals/table.html

@@ -0,0 +1,84 @@
+<form id="mercury_table" class="mercury-form" style="width:700px">
+
+  <div class="mercury-display-pane-container">
+    <div class="mercury-display-pane">
+
+      <div id="table_display">
+        <table border="1" cellspacing="0">
+          <tr>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+        </table>
+      </div>
+
+      <div id="table_options">
+        <fieldset class="inputs">
+          <ol>
+            <li id="table_rows_input" class="select input optional">
+              <label for="table_rows">Rows</label>
+              <input type="button" class="action" value="Add Before" name="insertRowBefore"/>
+              <input type="button" class="action" value="Add After" name="insertRowAfter"/>
+              <input type="button" class="action" value="Remove" name="deleteRow"/>
+            </li>
+            <li id="table_columns_input" class="select input optional">
+              <label for="table_columns">Columns</label>
+              <input type="button" class="action" value="Add Before" name="insertColumnBefore"/>
+              <input type="button" class="action" value="Add After" name="insertColumnAfter"/>
+              <input type="button" class="action" value="Remove" name="deleteColumn"/>
+            </li>
+            <hr/>
+            <li id="table_row_adjust_input" class="select input optional">
+              <label for="table_row_adjust">Row Span</label>
+              <input type="button" class="action" value="+" name="increaseRowspan"/>
+              <input type="button" class="action" value="-" name="decreaseRowspan"/>
+            </li>
+            <li id="table_column_adjust_input" class="select input optional">
+              <label for="table_column_adjust">Column Span</label>
+              <input type="button" class="action" value="+" name="increaseColspan"/>
+              <input type="button" class="action" value="-" name="decreaseColspan"/>
+            </li>
+          </ol>
+        </fieldset>
+
+        <fieldset class="inputs">
+          <legend><span>Options</span></legend>
+          <ol>
+            <li id="table_alignment_input" class="select input optional">
+              <label class="label" for="table_alignment">Alignment</label>
+              <select id="table_alignment" name="table[alignment]">
+                <option value="">None</option>
+                <option value="left">Left</option>
+                <option value="right">Right</option>
+              </select>
+            </li>
+            <li id="table_border_input" class="string input optional stringish">
+              <label class="label" for="table_border">Border</label>
+              <input id="table_border" name="table[border]" type="text" value="1"/>
+            </li>
+            <li id="table_spacing_input" class="string input optional stringish">
+              <label class="label" for="table_spacing">Spacing</label>
+              <input id="table_spacing" name="table[spacing]" type="text" value="0"/>
+            </li>
+          </ol>
+        </fieldset>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="mercury-display-controls">
+    <fieldset class="buttons">
+      <ol>
+        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Table" /></li>
+      </ol>
+    </fieldset>
+  </div>
+
+</form>

data/app/views/mercury/palettes/backcolor.html

@@ -0,0 +1,73 @@
+<div class="mercury-color-picker">
+  <div class="picker" style="background:#FFFFFF"></div>
+  <div class="picker" style="background:#FFCCCC"></div>
+  <div class="picker" style="background:#FFCC99"></div>
+  <div class="picker" style="background:#FFFF99"></div>
+  <div class="picker" style="background:#FFFFCC"></div>
+  <div class="picker" style="background:#99FF99"></div>
+  <div class="picker" style="background:#99FFFF"></div>
+  <div class="picker" style="background:#CCFFFF"></div>
+  <div class="picker" style="background:#CCCCFF"></div>
+  <div class="picker" style="background:#FFCCFF"></div>
+  <div class="picker" style="background:#CCCCCC"></div>
+  <div class="picker" style="background:#FF6666"></div>
+  <div class="picker" style="background:#FF9966"></div>
+  <div class="picker" style="background:#FFFF66"></div>
+  <div class="picker" style="background:#FFFF33"></div>
+  <div class="picker" style="background:#66FF99"></div>
+  <div class="picker" style="background:#33FFFF"></div>
+  <div class="picker" style="background:#66FFFF"></div>
+  <div class="picker" style="background:#9999FF"></div>
+  <div class="picker" style="background:#FF99FF"></div>
+  <div class="picker" style="background:#C0C0C0"></div>
+  <div class="picker" style="background:#FF0000"></div>
+  <div class="picker" style="background:#FF9900"></div>
+  <div class="picker" style="background:#FFCC66"></div>
+  <div class="picker" style="background:#FFFF00"></div>
+  <div class="picker" style="background:#33FF33"></div>
+  <div class="picker" style="background:#66CCCC"></div>
+  <div class="picker" style="background:#33CCFF"></div>
+  <div class="picker" style="background:#6666CC"></div>
+  <div class="picker" style="background:#CC66CC"></div>
+  <div class="picker" style="background:#999999"></div>
+  <div class="picker" style="background:#CC0000"></div>
+  <div class="picker" style="background:#FF6600"></div>
+  <div class="picker" style="background:#FFCC33"></div>
+  <div class="picker" style="background:#FFCC00"></div>
+  <div class="picker" style="background:#33CC00"></div>
+  <div class="picker" style="background:#00CCCC"></div>
+  <div class="picker" style="background:#3366FF"></div>
+  <div class="picker" style="background:#6633FF"></div>
+  <div class="picker" style="background:#CC33CC"></div>
+  <div class="picker" style="background:#666666"></div>
+  <div class="picker" style="background:#990000"></div>
+  <div class="picker" style="background:#CC6600"></div>
+  <div class="picker" style="background:#CC9933"></div>
+  <div class="picker" style="background:#999900"></div>
+  <div class="picker" style="background:#009900"></div>
+  <div class="picker" style="background:#339999"></div>
+  <div class="picker" style="background:#3333FF"></div>
+  <div class="picker" style="background:#6600CC"></div>
+  <div class="picker" style="background:#993399"></div>
+  <div class="picker" style="background:#333333"></div>
+  <div class="picker" style="background:#660000"></div>
+  <div class="picker" style="background:#993300"></div>
+  <div class="picker" style="background:#996633"></div>
+  <div class="picker" style="background:#666600"></div>
+  <div class="picker" style="background:#006600"></div>
+  <div class="picker" style="background:#336666"></div>
+  <div class="picker" style="background:#000099"></div>
+  <div class="picker" style="background:#333399"></div>
+  <div class="picker" style="background:#663366"></div>
+  <div class="picker" style="background:#000000"></div>
+  <div class="picker" style="background:#330000"></div>
+  <div class="picker" style="background:#663300"></div>
+  <div class="picker" style="background:#663333"></div>
+  <div class="picker" style="background:#333300"></div>
+  <div class="picker" style="background:#003300"></div>
+  <div class="picker" style="background:#003333"></div>
+  <div class="picker" style="background:#000066"></div>
+  <div class="picker" style="background:#330099"></div>
+  <div class="picker" style="background:#330033"></div>
+  <div class="last-picked">Last Color Picked</div>
+</div>

data/app/views/mercury/palettes/forecolor.html

@@ -0,0 +1,73 @@
+<div class="mercury-color-picker">
+  <div class="picker" style="background:#FFFFFF"></div>
+  <div class="picker" style="background:#FFCCCC"></div>
+  <div class="picker" style="background:#FFCC99"></div>
+  <div class="picker" style="background:#FFFF99"></div>
+  <div class="picker" style="background:#FFFFCC"></div>
+  <div class="picker" style="background:#99FF99"></div>
+  <div class="picker" style="background:#99FFFF"></div>
+  <div class="picker" style="background:#CCFFFF"></div>
+  <div class="picker" style="background:#CCCCFF"></div>
+  <div class="picker" style="background:#FFCCFF"></div>
+  <div class="picker" style="background:#CCCCCC"></div>
+  <div class="picker" style="background:#FF6666"></div>
+  <div class="picker" style="background:#FF9966"></div>
+  <div class="picker" style="background:#FFFF66"></div>
+  <div class="picker" style="background:#FFFF33"></div>
+  <div class="picker" style="background:#66FF99"></div>
+  <div class="picker" style="background:#33FFFF"></div>
+  <div class="picker" style="background:#66FFFF"></div>
+  <div class="picker" style="background:#9999FF"></div>
+  <div class="picker" style="background:#FF99FF"></div>
+  <div class="picker" style="background:#C0C0C0"></div>
+  <div class="picker" style="background:#FF0000"></div>
+  <div class="picker" style="background:#FF9900"></div>
+  <div class="picker" style="background:#FFCC66"></div>
+  <div class="picker" style="background:#FFFF00"></div>
+  <div class="picker" style="background:#33FF33"></div>
+  <div class="picker" style="background:#66CCCC"></div>
+  <div class="picker" style="background:#33CCFF"></div>
+  <div class="picker" style="background:#6666CC"></div>
+  <div class="picker" style="background:#CC66CC"></div>
+  <div class="picker" style="background:#999999"></div>
+  <div class="picker" style="background:#CC0000"></div>
+  <div class="picker" style="background:#FF6600"></div>
+  <div class="picker" style="background:#FFCC33"></div>
+  <div class="picker" style="background:#FFCC00"></div>
+  <div class="picker" style="background:#33CC00"></div>
+  <div class="picker" style="background:#00CCCC"></div>
+  <div class="picker" style="background:#3366FF"></div>
+  <div class="picker" style="background:#6633FF"></div>
+  <div class="picker" style="background:#CC33CC"></div>
+  <div class="picker" style="background:#666666"></div>
+  <div class="picker" style="background:#990000"></div>
+  <div class="picker" style="background:#CC6600"></div>
+  <div class="picker" style="background:#CC9933"></div>
+  <div class="picker" style="background:#999900"></div>
+  <div class="picker" style="background:#009900"></div>
+  <div class="picker" style="background:#339999"></div>
+  <div class="picker" style="background:#3333FF"></div>
+  <div class="picker" style="background:#6600CC"></div>
+  <div class="picker" style="background:#993399"></div>
+  <div class="picker" style="background:#333333"></div>
+  <div class="picker" style="background:#660000"></div>
+  <div class="picker" style="background:#993300"></div>
+  <div class="picker" style="background:#996633"></div>
+  <div class="picker" style="background:#666600"></div>
+  <div class="picker" style="background:#006600"></div>
+  <div class="picker" style="background:#336666"></div>
+  <div class="picker" style="background:#000099"></div>
+  <div class="picker" style="background:#333399"></div>
+  <div class="picker" style="background:#663366"></div>
+  <div class="picker" style="background:#000000"></div>
+  <div class="picker" style="background:#330000"></div>
+  <div class="picker" style="background:#663300"></div>
+  <div class="picker" style="background:#663333"></div>
+  <div class="picker" style="background:#333300"></div>
+  <div class="picker" style="background:#003300"></div>
+  <div class="picker" style="background:#003333"></div>
+  <div class="picker" style="background:#000066"></div>
+  <div class="picker" style="background:#330099"></div>
+  <div class="picker" style="background:#330033"></div>
+  <div class="last-picked">Last Color Picked</div>
+</div>

data/app/views/mercury/panels/history.html

@@ -0,0 +1,3 @@
+<div class="mercury-history-panel">
+  <p>The history panel is expected to be implemented with a server back end.  Since this is a demo, we didn't include it.</p>
+</div>

data/app/views/mercury/panels/notes.html

@@ -0,0 +1,3 @@
+<div class="mercury-notes-panel">
+  <p>The notes panel is expected to be implemented with a server back end.  Since this is a demo, we didn't include it.</p>
+</div>

data/app/views/mercury/panels/snippets.html

@@ -0,0 +1,12 @@
+<div class="mercury-snippet-panel">
+  <div class="filter">
+    <input class="filter" type="text">
+  </div>
+  <ul>
+    <li data-filter="example, snippet, favorite, beer">
+      <img alt="Snippet Name" data-snippet="example" src="/assets/mercury/default-snippet.png"/>
+      <h4>Snippet Name</h4>
+      <div class="description">A one or two line long description of what this snippet does.</div>
+    </li>
+  </ul>
+</div>

data/app/views/mercury/selects/formatblock.html

@@ -0,0 +1,11 @@
+<div class="mercury-select-options">
+  <h1 data-tag="h1">Heading 1 <span>&lt;h1&gt;</span></h1>
+  <h2 data-tag="h2">Heading 2 <span>&lt;h2&gt;</span></h2>
+  <h3 data-tag="h3">Heading 3 <span>&lt;h3&gt;</span></h3>
+  <h4 data-tag="h4">Heading 4 <span>&lt;h4&gt;</span></h4>
+  <h5 data-tag="h5">Heading 5 <span>&lt;h5&gt;</span></h5>
+  <h6 data-tag="h6">Heading 6 <span>&lt;h6&gt;</span></h6>
+  <div data-tag="p">Paragraph <span>&lt;p&gt;</span></div>
+  <div data-tag="blockquote">Blockquote <span>&lt;blockquote&gt;</span></div>
+  <div data-tag="pre">Formatted <span>&lt;pre&gt;</span></div>
+</div>

data/app/views/mercury/selects/style.html

@@ -0,0 +1,5 @@
+<div class="mercury-select-options">
+  <div class="red" data-class="red">Red text</div>
+  <div class="large-bold" data-class="large-bold">Large bold text</div>
+  <div class="blue" data-class="blue">Blue background</div>
+</div>

data/app/views/mercury/snippets/example/options.html.erb

@@ -0,0 +1,34 @@
+<%= form_for 'options', { :html => { :class => 'mercury-form', :style => 'width:600px' } } do |f| %>
+
+  <div class="mercury-display-pane-container">
+    <div class="mercury-display-pane">
+      <fieldset class="inputs">
+        <ol>
+          <li class="string input optional stringish" id="options_first_name_input">
+            <label class="label" for="options_first_name">First Name</label>
+            <input id="options_first_name" name="options[first_name]" type="text" value="<%= @options[:first_name] %>"/>
+          </li>
+        </ol>
+      </fieldset>
+
+      <fieldset class="inputs">
+        <legend><span>Options</span></legend>
+        <ol>
+          <li class="string input optional stringish" id="options_favorite_beer_input">
+            <label class="label" for="options_favorite_beer">Favorite Beer</label>
+            <input id="options_favorite_beer" name="options[favorite_beer]" type="text" value="<%= @options[:favorite_beer] %>"/>
+          </li>
+        </ol>
+      </fieldset>
+    </div>
+  </div>
+
+  <div class="mercury-display-controls">
+    <fieldset class="buttons">
+      <ol>
+        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Snippet"/></li>
+      </ol>
+    </fieldset>
+  </div>
+
+<% end %>

data/app/views/mercury/snippets/example/preview.html.erb

@@ -0,0 +1 @@
+<strong><%= params[:options][:first_name] %></strong> likes <%= params[:options][:favorite_beer] %>

data/config/engine.rb

@@ -0,0 +1,41 @@
+require "rails"
+
+module Mercury
+  class Engine < Rails::Engine
+
+    # Additional application configuration to include precompiled assets.
+    initializer :assets, :group => :all do |app|
+      app.config.assets.precompile += %w( mercury.js mercury.css mercury_overrides.css )
+    end
+
+    # Require mercury authentication module and potentially other aspects later (so they can be overridden).
+    initializer 'mercury.add_lib' do |app|
+      require 'mercury/authentication'
+    end
+
+    # To load the routes for this Engine, within your main apps routes.rb file include:
+    #
+    # Mercury::Engine.routes
+    #
+    def self.routes
+      Rails.application.routes.draw do
+        match '/editor(/*requested_uri)' => "mercury#edit", :as => :mercury_editor
+
+        namespace :mercury do
+          resources :images
+        end
+
+        scope '/mercury' do
+          match ':type/:resource' => "mercury#resource"
+          match 'snippets/:name/options' => "mercury#snippet_options"
+          match 'snippets/:name/preview' => "mercury#snippet_preview"
+        end
+
+        if defined?(Mercury::Application)
+          match 'mercury/test_page' => "mercury#test_page"
+        end
+      end
+    end
+
+  end
+end

data/db/migrate/20110526035601_create_mercury_images.rb

@@ -0,0 +1,11 @@
+class CreateMercuryImages < ActiveRecord::Migration
+  def change
+    create_table :mercury_images do |t|
+      t.string :image_file_name
+      t.string :image_content_type
+      t.integer :image_file_size
+      t.datetime :image_updated_at
+      t.timestamps
+    end
+  end
+end