mercury-rails 0.2.0 → 0.2.3

data/POST_INSTALL

@@ -0,0 +1,15 @@
++============================================================================+
+Congratulations, Mercury was successfully installed in your app. Documentation
+and other useful info can be found at: https://github.com/jejacks0n/mercury
+
+Here's a post install checklist:
+
+* Setup the database for image processing (if you haven't already) by running
+
+  rake mercury_engine:install:migrations
+  rake db:migrate
+
+* Learn about, and make your configuration adjustments in the mercury.js file
+
+* If installed, check out mercury.html.erb and mercury_overrides.css for more
+  customization info.

data/README.md

@@ -8,6 +8,28 @@ block elements, instead of iframes, which allows for CSS to be applied in ways t
 Mercury has been written using CoffeeScript and jQuery for the Javascript portions, and is written on top of Rails 3.1.
 
 
+## Translations
+
+Hey international open source contributors, want to contribute to the Mercury Editor project without having to do much
+coding?  We're looking for good translations.  If you have a good grasp of english, another common language, and have
+the desire and time to do a translation for the project it would be awesome to hear from you.  Just shoot me a message
+or email and I'll provide more details.  While any translation would be a good thing, the languages that seem like they
+would give the most value are:
+
+- French
+- German
+- Spanish
+- Japanese
+- Chinese
+- Dutch
+
+
+## Awesomeness
+
+Mercury has been added as a Featured Project on Pivotal Tracker!  If you're interested in what's planned, check out the
+public project at: https://www.pivotaltracker.com/projects/295823
+
+
 ## Browser Support
 
 Mercury has been written for the future, and thus doesn't support legacy browsers or browsers that don't follow the W3C
@@ -62,7 +84,6 @@ The feature list is actually pretty long, so here's a short list that need highl
 - Table Editing: Advanced table editing and creation.
 - Snippets: Insert and edit predefined and reusable bits of markup/code using drag and drop.
 - Notes: Attach notes to any page and communicate with other content authors.
-- Colaborative Editing: Edit any page that others are editing at the same time and see their changes in real time.
 
 
 ## Installation
@@ -108,10 +129,10 @@ the Usage portion of this documentation.
 ## Usage
 
 Mercury has an expectation that content regions will be on the page (not required, but probably useful).  To define
-content regions that Mercury will make editable you need to add a `mercury-region` class attribute to a div.  Then
-specify what region type by using the `data-type` attribute -- which can be *editable*, *markupable*, or *snippetable*.
-It's important for saving that an id attribute be set on regions, you should always include.  Region types are outlined
-below.
+content regions that Mercury will make editable you need to add a `mercury-region` class attribute to a div (this is
+configurable).  Then specify what region type by using the `data-type` attribute -- which can be *editable*,
+*markupable*, or *snippetable*. It's important for saving that an id attribute be set on regions, you should always
+include.  Region types are outlined below.
 
     <div id="primary" class="mercury-region" data-type="editable">
       default content
@@ -202,7 +223,7 @@ default it will use JSON, that JSON looks like:
             }
           }
         }
-      },
+      }
     }
 
 Where it gets saved to is also up to you.. by default it submits a post to the current url, but you can adjust this by

data/VERSION

@@ -1 +1 @@
-0.2.0
+0.2.3

data/app/controllers/mercury_controller.rb

@@ -10,15 +10,15 @@ class MercuryController < ActionController::Base
   end
 
   def snippet_options
-    render :action => "/snippets/#{params[:name]}_options", :layout => false
+    render :action => "/snippets/#{params[:name]}/options", :layout => false
   end
 
   def snippet_preview
-    render :action => "/snippets/#{params[:name]}", :layout => false
+    render :action => "/snippets/#{params[:name]}/preview", :layout => false
   end
 
-  def post
-    render :json => params
+  def test_page
+    render :text => params
   end
 
 end

data/app/views/layouts/mercury.html.erb

@@ -1,14 +1,25 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
     <%= csrf_meta_tags %>
     <title>Mercury Editor</title>
-    <link href="/assets/mercury.css" media="screen" rel="stylesheet" type="text/css" />
-    <script src="/assets/mercury.js" type="text/javascript"></script>
+    <%= stylesheet_link_tag    'mercury', 'mercury_overrides' %>
+    <%= javascript_include_tag 'mercury' %>
   </head>
   <body>
+    <% if Rails.application.config.respond_to?(:mercury_config) %>
+      <%= javascript_tag("jQuery.extend(Mercury.config, #{Rails.application.config.mercury_config});") %>
+    <% end -%>
+
     <script type="text/javascript">
-      new Mercury.PageEditor()
+      var saveUrl = null;
+      var options = {
+        saveStyle: null,  // 'form', or 'json' (default json)
+        saveMethod: null, // 'POST', or 'PUT', (create, vs. update -- default POST)
+        visible: null     // if the interface should start visible or not (default true)
+      };
+      new Mercury.PageEditor(saveUrl, options);
     </script>
   </body>
 </html>

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

@@ -3,7 +3,7 @@
     <input class="filter" type="text">
   </div>
   <ul>
-    <li data-filter="example-snippet">
+    <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 to two line long description of what this snippet does.</div>

data/config/routes.rb

@@ -2,7 +2,7 @@ Rails.application.routes.draw do
 
   resources :images
 
-  match '/editor(/*requested_uri)' => "mercury#edit"
+  match '/editor(/*requested_uri)' => "mercury#edit", :as => :mercury_editor
   scope '/mercury' do
     match ':type/:resource' => "mercury#resource"
     match 'snippets/:name/options' => "mercury#snippet_options"
@@ -10,6 +10,6 @@ Rails.application.routes.draw do
   end
 
   if defined?(Mercury::Application)
-    match '/test_post' => "mercury#post"
+    match 'mercury/test_page' => "mercury#test_page"
   end
 end

data/features/loading/loading.feature

@@ -0,0 +1,22 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to expect the editor to load properly
+
+  Background:
+    Given I am on an editable page
+
+
+  Scenario: A user can expect to see the toolbar
+    Then I should see "Save" within the toolbar
+    And I should see "Preview" within the toolbar
+    And I should see "Bold" within the toolbar
+
+
+  Scenario: A user can expect to see the contents of the iframe
+    Then I should see "Editable region" in the content frame
+
+
+  Scenario: A user can expect to see the status bar
+    Then I should see "Mercury Editor v0.2.1" within the statusbar

data/features/loading/navigating.feature

@@ -0,0 +1,77 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to expect the editor to not get in the way when I navigate and submit forms
+
+  Background:
+    Given I adjust the configuration to have: "{nonHijackableClasses: ['lightview']}"
+    And am on an editable page
+
+
+  Scenario: A user can navigate links targeting _top
+    When I follow "_top" in the content frame
+    Then I should be on the test page
+
+
+  Scenario: A user can navigate links targeting _blank
+    When I follow "_blank" in the content frame
+    Then I should be on the editable page
+    And I should see "test_page" in the "/mercury/test_page" window
+
+
+  Scenario: A user can navigate links targeting _self
+    When I follow "_self" in the content frame
+    Then I should be on the test page
+
+
+  Scenario: A user can navigate links with no target set
+    When I follow "[none]" in the content frame
+    Then I should be on the test page
+
+
+  Scenario: A user can navigate links that are ignored by configuration
+    When I follow "_self .lightview" in the content frame
+    Then I should be on the editable page
+
+
+  Scenario: A user can navigate links targeting random windows
+    When I follow "foo" in the content frame
+    Then I should be on the editable page
+    Then I should see "test_page" in the "foo" window
+
+
+  Scenario: A user can submit forms targeting _top
+    When I press "post _top" in the content frame
+    Then I should be on the test page
+    And I should see "post _top"
+
+
+  # todo: intermittent failure
+#  Scenario: A user can submit forms targeting _blank
+#    When I press "post _blank" in the content frame
+#    Then I should be on the editable page
+#    And I should see "post _blank" in the "/mercury/test_page" window
+
+
+  Scenario: A user can submit forms targeting _self
+    When I press "post _self" in the content frame
+    Then I should be on the test page
+    And I should see "post _self"
+
+
+  Scenario: A user can submit forms with no target set
+    When I press "get [none]" in the content frame
+    Then I should be on the test page
+    And I should see "get [none]"
+
+
+  Scenario: A user can submit forms that are ignored by configuration
+    When I press "post _self .lightview" in the content frame
+    Then I should be on the editable page
+
+
+  Scenario: A user can submit forms targeting random windows
+    When I press "get foo" in the content frame
+    Then I should be on the editable page
+    And I should see "get foo" in the "foo" window

data/features/loading/user_interface.feature

@@ -0,0 +1,67 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to interact with various user interface aspects of the editor
+
+  Background:
+    Given I am on an editable page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can view and close the about dialog
+    When I click on the about the editor link
+    Then I should see "About Mercury Editor" within the lightview title
+    And I should see "Mercury Editor is an open source project written by Jeremy Jackson" within the lightview window
+    And I should see "Project Home" within the lightview window
+    And I should see "Project Source" within the lightview window
+
+    When I click on the lightview overlay
+    Then the lightview window should not be visible
+    And the lightview overlay should not be visible
+
+
+#  Scenario: A user can open and close select dropdowns
+    When I click on the formatblock editor dropdown
+    Then the formatblock select should be visible
+    And I should see "Heading 1 <h1>" within the formatblock select
+
+    When I click on the style editor dropdown
+    Then the style select should be visible
+    And the formatblock select should not be visible
+
+
+#  Scenario: A user can open and close palette dialogs
+    When I click on the background color editor button
+    Then the background color palette should be visible
+
+    When I click on the foreground color editor button
+    Then the foreground color palette should be visible
+    And the background color palette should not be visible
+
+
+#  Scenario: A user can open and close a panel
+    When I click on the "View History" button
+    Then the history panel should be visible
+    And I should see "Page Version History" within the history panel
+
+    When I click on the "View History" button
+    Then the history panel should not be visible
+
+
+#  Scenario: A user can open and close a modal window
+    When I click on the "Insert Link" button
+    Then the modal window should be visible
+    And the modal overlay should be visible
+    And I should see "Insert Link" within the modal title
+    And I should see "Standard Links" within the insert link modal
+
+    When I click on the modal close button
+    Then the modal window should not be visible
+    And the modal overlay should not be visible
+
+    When I click on the "Insert Link" button
+    And click on the modal overlay
+    Then the modal window should not be visible
+    And the modal overlay should not be visible

data/features/regions/editable/basic_editing.feature

@@ -0,0 +1,195 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to manipulate it in various ways (eg. bold, add italics, set headers, colors, etc.)
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can set and unset bold content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <b><span>simple</span></b> <b>content</b>"
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can italicize content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <i><span>simple</span></i> <b>content</b>"
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can overline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the overline editor button
+    Then the contents of the editable region should be "this is <span style='text-decoration:overline'><span>simple</span></span> <b>content</b>"
+    # doesn't remove overlines
+
+
+#  Scenario: A user can strikeout content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <strike><span>simple</span></strike> <b>content</b>"
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+#  Scenario: A user can underline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <u><span>simple</span></u> <b>content</b>"
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content superscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <sup><span>simple</span></sup> <b>content</b>"
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content subscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <sub><span>simple</span></sub> <b>content</b>"
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can justify content to the left, center, right, or fully justified
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the justify left editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='left'>this is <span>justifiable</span> <b>content</b></div>"
+
+    When I click on the justify center editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='center'>this is <span>justifiable</span> <b>content</b></div>"
+
+    When I click on the justify right editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='right'>this is <span>justifiable</span> <b>content</b></div>"
+
+    When I click on the full justification editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='justify'>this is <span>justifiable</span> <b>content</b></div>"
+
+
+#  Scenario: A user can make an unordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert unordered list editor button
+    Then the contents of the editable region should be "<ul><li>this is <span>simple</span> <b>content</b></li></ul>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+#  Scenario: A user can make an ordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert ordered list editor button
+    Then the contents of the editable region should be "<ol><li>this is <span>simple</span> <b>content</b></li></ol>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+
+#  Scenario: A user can indent and outdent content
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span> <b>content</b></blockquote>"
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote><blockquote>this is <span>justifiable</span> <b>content</b></blockquote></blockquote>"
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span> <b>content</b></blockquote>"
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br>this is <span>justifiable</span> <b>content</b>"
+
+
+#  Scenario: A user can insert horizontal rules
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'> <b>content</b>"
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'><hr size='2' width='100%'> <b>content</b>"
+
+
+#  Scenario: A user can clean/remove formatting on their selection
+    Given the content of the editable region has wrapped content
+    And I make a selection
+
+    When I click on the remove formatting editor button
+    Then the contents of the editable region should be "this is wrapped content"
+
+
+#  Scenario: A user can wrap content within predefined styles
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the style editor dropdown
+    And select the red style from the dropdown
+    Then the contents of the editable region should be "this is <span class='red'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can wrap content in formatted block tags
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the block format editor dropdown
+    And select the heading 2 block from the dropdown
+    Then the contents of the editable region should be "<h2>this is <span>simple</span> <b>content</b></h2>"
+
+
+#  Scenario: A user can set the background color of a selection
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the background color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <span style='background-color:#FF0000'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can set the foreground color
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the foreground color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <font color='rgb(255, 0, 0)'><span>simple</span></font> <b>content</b>"