mercury-rails 0.8.0 → 0.9.0

data/app/assets/javascripts/mercury/toolbar.expander.js.coffee

@@ -2,13 +2,14 @@ class @Mercury.Toolbar.Expander extends Mercury.Palette
 
   constructor: (@name, @options) ->
     @container = @options.for
-    @containerWidth = @container.outerWidth()
     super(null, @name, @options)
     return @element
 
 
   build: ->
-    @container.css({whiteSpace: 'normal'})
+    @container.css({whiteSpace: 'normal', visibility: 'hidden', display: 'block'})
+    @containerWidth = @container.outerWidth()
+    @container.css({visibility: 'visible'})
     @trigger = jQuery('<div>', {class: 'mercury-toolbar-expander'}).appendTo(jQuery(@options.appendTo).get(0) ? 'body')
     @element = jQuery('<div>', {class: "mercury-palette mercury-expander mercury-#{@name}-expander", style: 'display:none'})
     @windowResize()
@@ -43,7 +44,7 @@ class @Mercury.Toolbar.Expander extends Mercury.Palette
 
   position: (keepVisible) ->
     @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
-    position = @trigger.offset()
+    position = @trigger.position()
     width = @element.width()
 
     position.left = position.left - width + @trigger.width() if position.left + width > jQuery(window).width()

data/app/assets/javascripts/mercury/toolbar.js.coffee

@@ -8,7 +8,7 @@ class @Mercury.Toolbar
 
   build: ->
     @element = jQuery('<div>', {class: 'mercury-toolbar-container', style: 'width:10000px'})
-    @element.css({display: 'none'}) unless @visible
+    @element.css({width: '100%'})
     @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
     for own toolbarName, buttons of Mercury.config.toolbars
@@ -28,7 +28,7 @@ class @Mercury.Toolbar
 
       toolbar.addClass('disabled') if Mercury.config.toolbars['primary'] && toolbarName != 'primary'
 
-    @element.css({width: '100%'})
+    @element.css({display: 'none'}) unless @visible
 
 
   buildButton: (name, options) ->
@@ -75,6 +75,10 @@ class @Mercury.Toolbar
     if @visible || force then @element.outerHeight() else 0
 
 
+  top: ->
+    if @visible then @element.offset().top else 0
+
+
   show: ->
     @visible = true
     @element.css({top: -@element.outerHeight(), display: 'block'})

data/app/assets/stylesheets/_mercury-bootstrap-overrides.scss

@@ -0,0 +1,61 @@
+/*
+ * Bootsrap Overrides (overrides what's in bootstrap-ish)
+ *---------------------------------------------------------------------------*/
+.btn-group > .btn {
+  margin-right: 0;
+}
+form {
+  margin-bottom: 0;
+}
+fieldset {
+  margin-bottom: 15px;
+  background: #F6F6F6;
+  border: 1px solid #CCC;
+  border-radius: 7px;
+  padding: 10px;
+}
+legend {
+  display: block;
+  position: relative;
+  margin-left: 10px;
+  margin-bottom: 0;
+  font-weight: bold;
+  width: auto;
+  padding: 0;
+  font-size: 12px;
+  color: #333333;
+  border: 0;
+  line-height: 1px;
+}
+select {
+  width: auto;
+}
+.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+.control-group {
+  margin-bottom: 0;
+}
+legend + .control-group {
+  margin-top: 0;
+  -webkit-margin-top-collapse: separate;
+}
+.form-horizontal .control-group {
+  margin-bottom: 0;
+}
+.form-horizontal .controls {
+  margin-left: 150px;
+}
+.form-horizontal hr {
+  margin-left: 150px;
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+label input[type=radio] {
+  margin-right: 5px;
+}
+.form-actions {
+  padding-bottom: 0;
+}

data/app/assets/stylesheets/_mercury-sass.scss

@@ -0,0 +1,33 @@
+/*!
+ * Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
+ * found at https://github.com/jejacks0n/mercury
+ *
+ * Copyright (c) 2011 Jeremy Jackson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+ * persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+ * Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+ * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+$linkColor: #09F !default;
+$linkColorHover: darken($linkColor, 15%) !default;
+
+@import '/assets/mercury/mercury.css';
+@import 'mercury-bootstrap-overrides';
+
+#mercury_about a { color: $linkColor; }
+#mercury_table #table_display .selected { background: $linkColor; }
+.mercury-uploader .mercury-uploader-progress div.mercury-uploader-indicator div {
+  background-color: $linkColor;
+  border: 1px solid $linkColorHover;
+}

data/app/assets/stylesheets/mercury.css

@@ -18,6 +18,7 @@
  * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  *
  *= require_self
+ *= require mercury/bootstrap-ish
  *= require mercury/mercury
  */
 

data/app/assets/stylesheets/mercury/all_images.css.erb

@@ -74,6 +74,10 @@ form fieldset.buttons .commit input {
 .mercury-expander-button[data-button=historyPanel] em     { background-image: url(<%= asset_path 'mercury/toolbar/primary/historypanel.png' %>) }
 .mercury-primary-toolbar .mercury-notesPanel-button em,
 .mercury-expander-button[data-button=notesPanel] em       { background-image: url(<%= asset_path 'mercury/toolbar/primary/notespanel.png' %>) }
+.mercury-primary-toolbar .mercury-userPanel-button em,
+.mercury-expander-button[data-button=userPanel] em        { background-image: url(<%= asset_path 'mercury/toolbar/primary/user.png' %>) }
+.mercury-primary-toolbar .mercury-toolsPanel-button em,
+.mercury-expander-button[data-button=toolsPanel] em       { background-image: url(<%= asset_path 'mercury/toolbar/primary/tools.png' %>) }
 .mercury-editable-toolbar .mercury-button {
   background-image: url(<%= asset_path 'mercury/toolbar/editable/buttons.png' %>);
 }

data/app/assets/stylesheets/mercury/dialog.css

@@ -15,11 +15,12 @@
   border-radius: 2px;
   -moz-border-radius: 2px;
   margin-top: -1px;
-  background-color: #E2E1E2;
+  background-color: #FFFFFF;
 	box-shadow: 1px 1px 4px rgba(0,0,0, .5);
 	-moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
   font-family: Helvetica, Tahoma, Arial, sans-serif;
   font-size: 8.5pt;
+  color: #333;
 }
 .mercury-dialog.loading,
 .mercury-select.loading,
@@ -40,7 +41,7 @@
  * Panels
  *----------------------------------------------------------------------------*/
 .mercury-panel {
-  position: absolute;
+  position: fixed;
   z-index: 10011;
   background-color: #f5f5f5;
   opacity: .9;
@@ -64,6 +65,7 @@
   margin: 0;
   background: #333;
   white-space: nowrap;
+  line-height: normal;
 }
 .mercury-panel h1 {
   -webkit-user-select: none;
@@ -185,6 +187,7 @@
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   width: 100%;
+  height: auto;
   padding-left: 20px;
   background-color: #FFF;
   background-repeat: no-repeat;

data/app/assets/stylesheets/mercury/mercury.css

@@ -1,6 +1,5 @@
 /*
  *= require_self
- *= require ./bootstrap-ish
  *= require ./bootstrap-overrides
  *= require ./dialog
  *= require ./lightview

data/app/assets/stylesheets/mercury/toolbar.css

@@ -46,6 +46,9 @@
   width: 1px;
   background: #727272;
 }
+.mercury-button {
+  cursor: pointer;
+}
 .mercury-button em {
   display: block;
   font-style: normal;

data/app/assets/stylesheets/mercury/uploader.css

@@ -95,9 +95,9 @@
   background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255, 0.17), rgba(255,255,255, 0.17) 15px, rgba(255,255,255, 0) 15px, rgba(255,255,255, 0) 30px),
               -moz-linear-gradient(rgba(255,255,255, 0.1) 0%, rgba(255,255,255, 0.37) 100%);
   background-color: #09F;
+  border: 1px solid #0083DA;
   box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 -1px 1px rgba(0,0,0, 0.2);
   -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 -1px 1px rgba(0,0,0, 0.2);
-  border: 1px solid #0083DA;
 }
 .mercury-uploader .mercury-uploader-progress div.mercury-uploader-indicator div b {
   display: none;

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

@@ -51,6 +51,16 @@
               <option value="absbottom">Absolute Bottom</option>
             </select>
           </div>
+          <label class="select optional control-label" for="media_image_float">Float</label>
+          <div class="controls">
+            <select class="select optional" id="media_image_float" name="media[image_float]">
+              <option value="">None</option>
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+              <option value="none">None</option>
+              <option value="inherit">Inherit</option>
+            </select>
+          </div>
         </div>
       </div>
       <div class="media-options" id="youtube_url_options" style="display:none">

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

@@ -1,6 +1,6 @@
 <div class="mercury-snippet-panel">
   <div class="filter">
-    <input class="filter" type="text">
+    <input class="filter focusable" type="text">
   </div>
   <ul>
     <li data-filter="example, snippet, favorite, beer">
@@ -8,5 +8,10 @@
       <h4>Snippet Name</h4>
       <div class="description">A one or two line long description of what this snippet does.</div>
     </li>
+    <li data-filter="no options, snippet">
+      <img alt="No Option Snippet" data-snippet="no_options" data-options="false" src="/assets/mercury/default-snippet.png"/>
+      <h4>No Options Snippet</h4>
+      <div class="description">This snippet doesn't have options.</div>
+    </li>
   </ul>
 </div>

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

@@ -1,4 +1,4 @@
-<%= form_for 'options', {html: {class: 'form-horizontal', style: 'width:615px'}} do |f| %>
+<%= form_for 'options', {url: '', html: {class: 'form-horizontal', style: 'width:615px'}} do |f| %>
 
   <div class="form-inputs mercury-display-pane-container">
 

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

@@ -0,0 +1 @@
+<strong>No Option Snippet</strong>

data/features/loading/loading.feature

@@ -21,5 +21,5 @@ Feature:
   # Latest selenium webdriver seems to consider the lightview hidden
   @use_hidden_elements
   Scenario: A user can expect to see the status bar
-    Then I should see "Mercury Editor v0.8.0" within the statusbar
+    Then I should see "Mercury Editor v0.9.0" within the statusbar
 

data/features/regions/full/basic_editing.feature

@@ -147,10 +147,10 @@ Feature:
     And I make a selection
 
     When I click on the insert hr editor button
-    Then the contents of the full region should be "this is&nbsp;<hr size='2' width='100%'> <b>content</b>"
+    Then the contents of the full region should be "this is&nbsp;<hr> <b>content</b>"
 
     When I click on the insert hr editor button
-    Then the contents of the full region should be "this is&nbsp;<hr size='2' width='100%'><hr size='2' width='100%'> <b>content</b>"
+    Then the contents of the full region should be "this is&nbsp;<hr><hr> <b>content</b>"
 
 
   Scenario: A user can clean/remove formatting on their selection

data/features/regions/full/inserting_media.feature

@@ -49,6 +49,24 @@ Feature:
     And press "Insert Media"
     Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
 
+#  Scenario: A user can insert and edit an image with an explicit float setting
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    When I fill in "media_image_url" with "/assets/mercury/temp-logo.png"
+    And select "Right" from "Float"
+    And press "Insert Media"
+    Then the contents of the full region should be "this is <img style='float: right;' src='/assets/mercury/temp-logo.png'> <b>content</b>"
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    And select "Absolute Middle" from "Alignment"
+    And select "None" from "Float"
+    And press "Insert Media"
+    Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
+
+
 
   Scenario: A user can edit an image by double clicking it
     Given the content of the full region has an image

data/features/regions/full/inserting_snippets.feature

@@ -28,6 +28,17 @@ Feature:
     And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
 
 
+  Scenario: A user can drag and drop snippets with no options into a full region
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I open the snippet panel
+    And I drag the snippet with no options into the full region
+    Then the modal window should not be visible
+
+    And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='no_options-snippet' contenteditable='false'><strong>No Option Snippet</strong></div><span>simple</span> <b>content</b>"
+
+
   Scenario: A user can use the snippet toolbar to remove a snippet
     Given the options for the example snippet "snippet_42" are first_name: "Jeremy", favorite_beer: "Stella"
     And the content of the full region has that snippet

data/features/step_definitions/custom_web_steps.rb

@@ -0,0 +1,22 @@
+## Generic web steps
+#------------------------------------------------------------------------------
+When /^(?:|I )click on (.+)$/ do |locator|
+  selector = selector_for(locator)
+  find(selector, :message => "Unable to locate the element '#{selector}' to click on").click
+end
+
+Then /^(.+) should (not )?be visible$/ do |locator, boolean|
+  selector = selector_for(locator)
+  if boolean == 'not '
+    page.has_no_css?("#{selector}")
+  else
+    page.has_css?("#{selector}", :visible => true)
+  end
+end
+
+# scoping step for different windows
+When /^(.*) in the "([^"]*)" window$/ do |s, window|
+  page.driver.within_window(window) do
+    step(s)
+  end
+end

data/features/step_definitions/mercury_steps.rb

@@ -1,439 +1 @@
-## Generic web steps
-#------------------------------------------------------------------------------
-When /^(?:|I )click on (.+)$/ do |locator|
-  selector = selector_for(locator)
-  find(selector, :message => "Unable to locate the element '#{selector}' to click on").click
-end
-
-Then /^(.+) should (not )?be visible$/ do |locator, boolean|
-  selector = selector_for(locator)
-  if boolean == 'not '
-    page.has_no_css?("#{selector}")
-  else
-    page.has_css?("#{selector}", :visible => true)
-  end
-end
-
-# scoping step for different windows
-When /^(.*) in the "([^"]*)" window$/ do |s, window|
-  page.driver.within_window(window) do
-    step(s)
-  end
-end
-
-
-## Mercury general steps
-#------------------------------------------------------------------------------
-Given /^(?:|I )adjust the configuration to have: \{([^\}]*)\}$/ do |javascript|
-  Rails.application.config.mercury_config = JSON.parse("{#{javascript}}")
-end
-
-# scoping step for the mercury content frame
-When /^(.*) in the content frame$/ do |s|
-  page.driver.within_frame('mercury_iframe') do
-    step(s)
-  end
-end
-
-# silence mercury's onbeforeunload confirmation
-Given /^the editor won't prompt when leaving the page$/ do
-  page.driver.execute_script('Mercury.silent = true;')
-end
-
-
-## Toolbar specific steps
-#------------------------------------------------------------------------------
-# for the select dropdowns
-When /^(?:|I )select (.*?) from the dropdown$/ do |locator|
-  selector = selector_for(locator)
-  find(selector, :message => "Unable to locate the element '#{selector}' to click on").click
-end
-
-
-## Panel specific steps
-#------------------------------------------------------------------------------
-When /^(?:I )(?:open|close|toggle) the (.*?) panel$/ do |panel_locator|
-  step(%Q{I click on the "#{panel_locator}" button})
-end
-
-
-## Modal specific steps
-#------------------------------------------------------------------------------
-When /^(?:I )close the modal(?: window)?$/ do
-  step(%Q{I click on the modal close button})
-end
-
-
-## Region specific steps
-#------------------------------------------------------------------------------
-# setting content
-Given /^the content of (.*?) (?:is|are|has|includes) (.*?)$/ do |region_locator, contents|
-  step(%Q{I set the contents of #{region_locator} to #{contents}})
-end
-
-When /^(?:|I )(?:change|set) the contents? of (.*?) to (.*?)$/ do |region_locator, contents|
-  region_id = region_selector_for(region_locator).gsub('#', '')
-  content = contents[0] == '"' ? contents : "\"#{contents_for(contents)}\""
-  page.driver.within_frame('mercury_iframe') do
-    find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
-    page.driver.execute_script <<-JAVASCRIPT
-      var element = top.jQuery(document).find('##{region_id}');
-      if (element.data('type') == 'markdown') {
-        element.find('textarea').val(#{content});
-      } else {
-        var region = top.mercuryInstance.getRegionByName('#{region_id}');
-        region.content(#{content});
-      }
-    JAVASCRIPT
-  end
-end
-
-# setting/making selections
-When /^(?:|I )(?:make|have) a selection$/ do
-  step(%Q{I have a selection for "span"})
-end
-
-When /^(?:|I )(?:make|have) a selection (?:in (.*?) )?for "([^"]*)"$/ do |region_locator, selector|
-  step(%Q{I can simulate complex javascript events})
-  # assume the first full region if one wasn't provided'
-  region_selector = region_selector_for(region_locator || 'the full region')
-  page.driver.within_frame('mercury_iframe') do
-    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
-    find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
-    page.driver.execute_script <<-JAVASCRIPT
-      var element = top.jQuery(document).find('#{region_selector}');
-      if (element.data('type') == 'markdown') {
-        alert('unimplemented');
-        throw('unimplemented');
-      } else {
-        var selectedElement = element.find('#{selector}');
-        var selection = new top.Mercury.Regions.Full.Selection(window.getSelection(), document);
-        selection.selectNode(selectedElement.get(0));
-        selectedElement.simulate('mouseup');
-      }
-    JAVASCRIPT
-  end
-end
-
-# other events
-When /^(?:|I )double click on (.*?) in (.*?)$/ do |locator, region_locator|
-  step(%Q{I can simulate complex javascript events})
-  selector = selector_for(locator)
-  # assume the first full region if one wasn't provided'
-  region_selector = region_selector_for(region_locator || 'the full region')
-  page.driver.within_frame('mercury_iframe') do
-    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
-    find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
-    page.driver.execute_script <<-JAVASCRIPT
-      top.jQuery(document).find('#{region_selector} #{selector}').simulate('dblclick');
-    JAVASCRIPT
-  end
-end
-
-# getting contents
-Then /^the contents? of (.*?) should be "([^"]*)"$/ do |region_locator, content|
-  region_selector = region_selector_for(region_locator)
-  page.driver.within_frame('mercury_iframe') do
-    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
-    results = page.driver.execute_script <<-JAVASCRIPT
-      var element = top.jQuery(document).find('#{region_selector}');
-      if (element.data('type') == 'markdown') {
-        return element.find('textarea').val();
-      } else {
-        return element.html();
-      }
-    JAVASCRIPT
-    assert_equal content, results.gsub('"', "'").gsub("\n", '')
-  end
-end
-
-
-## Saving specific steps
-#------------------------------------------------------------------------------
-# caching for the last save -- a request will still be made
-Given /^save results will be cached$/ do
-  page.driver.execute_script <<-JAVASCRIPT
-    Mercury.PageEditor.prototype.save = function() {
-      window.cachedResults = this.serialize();
-      Mercury.changes = false;
-    }
-  JAVASCRIPT
-end
-
-# check for the last save cached results
-Then /^the save should have (.*?) for (.*?)$/ do |contents, region_locator|
-  region_id = region_selector_for(region_locator).gsub('#', '')
-  content = contents[0] == '"' ? contents : "\"#{contents_for(contents)}\""
-  results = page.driver.execute_script <<-JAVASCRIPT
-    return (window.cachedResults['#{region_id}']) ?
-      window.cachedResults['#{region_id}']['value'] : null;
-  JAVASCRIPT
-  assert_equal content, "\"#{results}\""
-end
-
-
-## Table editing specific steps
-#------------------------------------------------------------------------------
-# in the modal window
-When /^(?:|I )(?:add|insert) a (row|column) (before|after)(?: it)?$/ do |row_or_column, before_or_after|
-  name = "add_#{row_or_column}_#{before_or_after}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content button[data-action='#{name}']"})
-end
-
-When /^(?:|I )delete the(?: current)? (row|column)$/ do |row_or_column|
-  name = "remove_#{row_or_column}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content button[data-action='#{name}']"})
-end
-
-When /^(?:|I )(increase|decrease) the (rowspan|colspan)$/ do |increase_or_decrease, rowspan_or_colspan|
-  name = "#{increase_or_decrease}_#{rowspan_or_colspan}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content button[data-action=#{name}]"})
-end
-
-Then /^the selected cell should be (.*?)$/ do |locator|
-  selector = selector_for(locator).gsub('td:', 'td.selected:')
-  find("#{selector}", :message => "Unable to locate the selected cell for '#{selector}'")
-end
-
-# in general
-Then /^the(?: table)? (row|column) count should be (\d+)$/ do |row_or_column, expected_count|
-  method = "get_#{row_or_column}_count".camelcase(:lower)
-  actual_count = page.driver.execute_script("return Mercury.tableEditor.#{method}()")
-  assert_equal expected_count.to_i, actual_count.to_i
-end
-
-
-## Snippet specific steps
-#------------------------------------------------------------------------------
-# setting snippet options
-Given /^the options for the (.*?) snippet "([^"]*)" are (.*?)$/ do |snippet_name, snippet_id, options|
-  @snippet_id = snippet_id
-  options_json = parse_snippet_options_from(options)
-  page.driver.execute_script <<-JAVASCRIPT
-    Mercury.Snippet.load({#{snippet_id}: {name: '#{snippet_name}', options: #{options_json}}});
-  JAVASCRIPT
-end
-
-# dragging/dropping
-When /^(?:|I )(?:drag|drop) (.*?) (?:into|on) (.*?)$/ do |snippet_locator, region_locator|
-  snippet_name = snippet_name_for(snippet_locator)
-  region_id = region_selector_for(region_locator).gsub('#', '')
-  page.driver.within_frame('mercury_iframe') do
-    find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
-    page.driver.execute_script <<-JAVASCRIPT
-      var element = top.jQuery(document).find('##{region_id}');
-      if (element.data('type') == 'markdown') {
-        alert('unimplemented');
-        throw('unimplemented');
-      } else {
-        var region = top.mercuryInstance.getRegionByName('#{region_id}');
-        region.selection().range.collapse(true);
-        document.execCommand('insertHTML', false, '<img data-snippet="#{snippet_name}" src="/assets/mercury/default-snippet.png">');
-        element.trigger('possible:drop');
-      }
-    JAVASCRIPT
-  end
-end
-
-When /^(?:|I )hover over (.*?)(?: in (.*?))?$/ do |locator, region_locator|
-  step(%Q{I can simulate complex javascript events})
-  selector = selector_for(locator)
-  region_selector = region_selector_for(region_locator || 'the full region')
-  page.driver.within_frame('mercury_iframe') do
-    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
-    page.driver.execute_script <<-JAVASCRIPT
-      var element = top.jQuery(document).find('#{region_selector}');
-      if (element.data('type') == 'markdown') {
-        alert('unimplemented');
-        throw('unimplemented');
-      } else {
-        element.find('#{selector}').simulate('mousemove');
-      }
-    JAVASCRIPT
-  end
-end
-
-When /^(?:|I )edit the snippet$/ do
-  step(%{I hover over the snippet})
-  step(%{click on the edit snippet settings toolbar button})
-end
-
-
-## Dropping image specific steps
-#------------------------------------------------------------------------------
-#When /^(?:|I )drop an image into (.*?) from a different browser/ do |region_locator|
-#  Given(%Q{I can simulate complex javascript events})
-#  region_selector = region_selector_for(region_locator || 'the full region')
-#  page.driver.within_frame('mercury_iframe') do
-#    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
-#    page.driver.execute_script <<-JAVASCRIPT
-#      var element = top.jQuery(document).find('#{region_selector}');
-#      if (element.data('type') == 'markdown') {
-#        alert('unimplemented');
-#        throw('unimplemented');
-#      } else {
-#        element.find('#{region_selector}').simulate('drop', {'text/html': '<img src="testing.gif"/>'});
-#      }
-#    JAVASCRIPT
-#  end
-#end
-
-
-## Javascript event simulation steps
-#------------------------------------------------------------------------------
-Given /^(?:|I )can simulate complex javascript events$/ do
-  page.driver.execute_script(EVENT_SIMULATION_JAVASCRIPT)
-end
-
-#------------------------------------------------------------------------------
-
-EVENT_SIMULATION_JAVASCRIPT = <<-JAVASCRIPT
-  /*
-   * jquery.simulate - simulate browser mouse and keyboard events
-   *
-   * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
-   * Dual licensed under the MIT or GPL Version 2 licenses.
-   * http://jquery.org/license
-   *
-   */
-  ;(function($) {
-
-  $.fn.extend({
-    simulate: function(type, options) {
-      return this.each(function() {
-        var opt = $.extend({}, $.simulate.defaults, options || {});
-        new $.simulate(this, type, opt);
-      });
-    }
-  });
-
-  $.simulate = function(el, type, options) {
-    this.target = el;
-    this.options = options;
-
-    if (/^drag$/.test(type)) {
-      this[type].apply(this, [this.target, options]);
-    } else {
-      this.simulateEvent(el, type, options);
-    }
-  }
-
-  $.extend($.simulate.prototype, {
-    simulateEvent: function(el, type, options) {
-      var evt = this.createEvent(type, options);
-      this.dispatchEvent(el, type, evt, options);
-      return evt;
-    },
-    createEvent: function(type, options) {
-      if (/^mouse(over|out|down|up|move)|(dbl)?click$/.test(type)) {
-        return this.mouseEvent(type, options);
-      } else if (/^key(up|down|press)$/.test(type)) {
-        return this.keyboardEvent(type, options);
-      }
-    },
-    mouseEvent: function(type, options) {
-      var evt;
-      var e = $.extend({
-        bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
-        screenX: 0, screenY: 0, clientX: 0, clientY: 0,
-        ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
-        button: 0, relatedTarget: undefined
-      }, options);
-
-      var relatedTarget = $(e.relatedTarget)[0];
-
-      if ($.isFunction(document.createEvent)) {
-        evt = document.createEvent("MouseEvents");
-        evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
-          e.screenX, e.screenY, e.clientX, e.clientY,
-          e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
-          e.button, e.relatedTarget || document.body.parentNode);
-      } else if (document.createEventObject) {
-        evt = document.createEventObject();
-        $.extend(evt, e);
-        evt.button = { 0:1, 1:4, 2:2 }[evt.button] || evt.button;
-      }
-      return evt;
-    },
-    keyboardEvent: function(type, options) {
-      var evt;
-
-      var e = $.extend({ bubbles: true, cancelable: true, view: window,
-        ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
-        keyCode: 0, charCode: 0
-      }, options);
-
-      if ($.isFunction(document.createEvent)) {
-        try {
-          evt = document.createEvent("KeyEvents");
-          evt.initKeyEvent(type, e.bubbles, e.cancelable, e.view,
-            e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
-            e.keyCode, e.charCode);
-        } catch(err) {
-          evt = document.createEvent("Events");
-          evt.initEvent(type, e.bubbles, e.cancelable);
-          $.extend(evt, { view: e.view,
-            ctrlKey: e.ctrlKey, altKey: e.altKey, shiftKey: e.shiftKey, metaKey: e.metaKey,
-            keyCode: e.keyCode, charCode: e.charCode
-          });
-        }
-      } else if (document.createEventObject) {
-        evt = document.createEventObject();
-        $.extend(evt, e);
-      }
-      if ($.browser.msie || $.browser.opera) {
-        evt.keyCode = (e.charCode > 0) ? e.charCode : e.keyCode;
-        evt.charCode = undefined;
-      }
-      return evt;
-    },
-    dispatchEvent: function(el, type, evt) {
-      if (el.dispatchEvent) {
-        el.dispatchEvent(evt);
-      } else if (el.fireEvent) {
-        el.fireEvent('on' + type, evt);
-      }
-      return evt;
-    },
-    drag: function(el) {
-      var self = this, center = this.findCenter(this.target),
-        options = this.options,	x = Math.floor(center.x), y = Math.floor(center.y),
-        dx = options.dx || 0, dy = options.dy || 0, target = this.target;
-      var coord = { clientX: x, clientY: y };
-      this.simulateEvent(target, "mousedown", coord);
-      coord = { clientX: x + 1, clientY: y + 1 };
-      this.simulateEvent(document, "mousemove", coord);
-      coord = { clientX: x + dx, clientY: y + dy };
-      this.simulateEvent(document, "mousemove", coord);
-      this.simulateEvent(document, "mousemove", coord);
-      this.simulateEvent(target, "mouseup", coord);
-      this.simulateEvent(target, "click", coord);
-    },
-    findCenter: function(el) {
-      var el = $(this.target), o = el.offset(), d = $(document);
-      return {
-        x: o.left + el.outerWidth() / 2 - d.scrollLeft(),
-        y: o.top + el.outerHeight() / 2 - d.scrollTop()
-      };
-    }
-  });
-
-  $.extend($.simulate, {
-    defaults: {
-      speed: 'sync'
-    },
-    VK_TAB: 9,
-    VK_ENTER: 13,
-    VK_ESC: 27,
-    VK_PGUP: 33,
-    VK_PGDN: 34,
-    VK_END: 35,
-    VK_HOME: 36,
-    VK_LEFT: 37,
-    VK_UP: 38,
-    VK_RIGHT: 39,
-    VK_DOWN: 40
-  });
-
-  })(jQuery);
-JAVASCRIPT
+require 'mercury/cucumber/step_definitions'