mercury-rails 0.5.0 → 0.6.0

data/app/assets/javascripts/mercury/regions/{snippetable.js.coffee → snippets.js.coffee}

@@ -1,16 +1,17 @@
-class @Mercury.Regions.Snippetable extends Mercury.Region
+class @Mercury.Regions.Snippets extends Mercury.Region
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
-  type = 'snippetable'
+  type = 'snippets'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'snippetable'
+    Mercury.log("building #{type}", @element, @options)
     super
     @makeSortable()
 
 
   build: ->
+    jQuery(snippet).attr('data-version', 0) for snippet in @element.find('[data-snippet]')
     @element.css({minHeight: 20}) if @element.css('minHeight') == '0px'
 
 
@@ -77,7 +78,7 @@ class @Mercury.Regions.Snippetable extends Mercury.Region
 
   execCommand: (action, options = {}) ->
     super
-    handler.call(@, options) if handler = Mercury.Regions.Snippetable.actions[action]
+    handler.call(@, options) if handler = Mercury.Regions.Snippets.actions[action]
 
 
   makeSortable: ->
@@ -85,7 +86,7 @@ class @Mercury.Regions.Snippetable extends Mercury.Region
       document: @document,
       scroll: false, #scrolling is buggy
       containment: 'parent',
-      items: '.mercury-snippet',
+      items: '[data-snippet]',
       opacity: 0.4,
       revert: 100,
       tolerance: 'pointer',
@@ -93,7 +94,7 @@ class @Mercury.Regions.Snippetable extends Mercury.Region
         Mercury.trigger('hide:toolbar', {type: 'snippet', immediately: true})
         return true
       stop: =>
-        setTimeout(100, => @pushHistory())
+        setTimeout((=> @pushHistory()), 100)
         return true
     }
 

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

@@ -51,7 +51,7 @@ class @Mercury.Snippet
 
   getHTML: (context, callback = null) ->
     element = jQuery("<#{@wrapperTag}>", {
-      class: "mercury-snippet #{@name}-snippet"
+      class: "#{@name}-snippet"
       contenteditable: "false"
       'data-snippet': @identity
       'data-version': @version

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

@@ -9,7 +9,7 @@ class @Mercury.SnippetToolbar extends Mercury.Toolbar
     @element = jQuery('<div>', {class: 'mercury-toolbar mercury-snippet-toolbar', style: 'display:none'})
     @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
-    for own buttonName, options of Mercury.config.toolbars.snippetable
+    for own buttonName, options of Mercury.config.toolbars.snippets
       button = @buildButton(buttonName, options)
       button.appendTo(@element) if button
 
@@ -71,10 +71,11 @@ class @Mercury.SnippetToolbar extends Mercury.Toolbar
       @element.hide()
       @visible = false
     else
-      @hideTimeout = setTimeout 500, =>
+      @hideTimeout = setTimeout =>
         @element.stop().animate {opacity: 0}, 300, 'easeInOutSine', =>
           @element.hide()
         @visible = false
+      , 500
 
   release: ->
     @element.off()

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

@@ -72,8 +72,8 @@ class @Mercury.Toolbar.Button
         @element.removeClass('active')
 
     Mercury.on 'region:focused', (event, options) =>
-      if @handled.regions && options.region && options.region.type
-        if @handled.regions.indexOf(options.region.type) > -1
+      if @handled.regions && options.region && options.region.type()
+        if @handled.regions.indexOf(options.region.type()) > -1
           @element.removeClass('disabled')
         else
           @element.addClass('disabled')

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

@@ -25,8 +25,8 @@ class @Mercury.Toolbar.ButtonGroup
             @element.addClass('disabled')
 
     Mercury.on 'region:focused', (event, options) =>
-      if @regions && options.region && options.region.type
-        if @regions.indexOf(options.region.type) > -1
+      if @regions && options.region && options.region.type()
+        if @regions.indexOf(options.region.type()) > -1
           @element.removeClass('disabled') unless @options._context
         else
           @element.addClass('disabled')

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

@@ -56,13 +56,13 @@ class @Mercury.Toolbar
       for toolbar in @element.find(".mercury-toolbar")
         toolbar = jQuery(toolbar)
         if regions = toolbar.data('regions')
-          toolbar.removeClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
+          toolbar.removeClass('disabled') if regions.split(',').indexOf(options.region.type()) > -1
 
     Mercury.on 'region:blurred', (event, options) =>
       for toolbar in @element.find(".mercury-toolbar")
         toolbar = jQuery(toolbar)
         if regions = toolbar.data('regions')
-          toolbar.addClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
+          toolbar.addClass('disabled') if regions.split(',').indexOf(options.region.type()) > -1
 
     @element.on 'click', ->
       Mercury.trigger('hide:dialogs')

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

@@ -161,7 +161,7 @@ jQuery.extend Mercury.uploader,
 
 
   hide: (delay = 0) ->
-    setTimeout delay * 1000, =>
+    setTimeout =>
       @element.animate {opacity: 0}, 200, 'easeInOutSine', =>
         @overlay.animate {opacity: 0}, 200, 'easeInOutSine', =>
           @overlay.hide()
@@ -169,6 +169,7 @@ jQuery.extend Mercury.uploader,
           @reset()
           @visible = false
           Mercury.trigger('focus:frame')
+    , delay * 1000
 
 
   reset: ->

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

@@ -82,8 +82,8 @@ form fieldset.buttons .commit input {
 }
 
 .mercury-snippet-toolbar .mercury-button {
-  background-image: url(<%= asset_path 'mercury/toolbar/snippetable/buttons.png' %>);
+  background-image: url(<%= asset_path 'mercury/toolbar/snippets/buttons.png' %>);
 }
 .mercury-snippet-toolbar .mercury-button em {
-  background-image: url(<%= asset_path 'mercury/toolbar/snippetable/buttons.png' %>);
+  background-image: url(<%= asset_path 'mercury/toolbar/snippets/buttons.png' %>);
 }

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

@@ -46,8 +46,8 @@
   opacity: .9;
   box-shadow: 1px 1px 4px rgba(0,0,0, .5);
   -moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
-  border-radius: 4px;
-  -moz-border-radius: 4px;
+  border-radius: 6px;
+  -moz-border-radius: 6px;
   color: #333;
   font-family: Helvetica, Tahoma, Arial, sans-serif;
   font-size: 9.5pt;

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

@@ -10,13 +10,13 @@
   height: 100%;
   opacity: 0;
   display: none;
-  background: rgba(0, 0, 0, .65);
+  background: rgba(255, 255, 255, .8);
 }
 .mercury-lightview {
   position: fixed;
   z-index: 10040;
   top: 20px;
-  background: #000;
+  background: #EFEFEF;
   opacity: 0;
   overflow: hidden;
   display: none;
@@ -28,7 +28,7 @@
   font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  color: #CCC;
+  color: #000;
 }
 .mercury-lightview.loading {
   background-repeat: no-repeat;
@@ -40,8 +40,8 @@
 .mercury-lightview h1.mercury-lightview-title {
   margin: 0;
   padding: 10px 20px 8px;
-  border-bottom: 1px solid #222;
-  color: #FFF;
+  border-bottom: 1px solid #CCC;
+  color: #000;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -74,7 +74,7 @@
  * Forms
  *----------------------------------------------------------------------------*/
 .mercury-lightview form fieldset {
-  background: #111;
+  background: #CCC;
   border: 1px solid #333;
 }
 .mercury-lightview form fieldset.buttons {
@@ -86,21 +86,21 @@
 .mercury-lightview form input[type="password"],
 .mercury-lightview form textarea,
 .mercury-lightview form input.text {
-  background: #444;
-  color: #FFF;
-  border: 2px solid #555;
+  background: #CCC;
+  color: #000;
+  border: 2px solid #999;
   -moz-box-shadow: inset 0 0 3px #000000;
   -webkit-box-shadow: inset 0 0 3px #000000;
   box-shadow: inset 0 0 3px #000000;
 }
 .mercury-lightview form input[type="button"] {
-  border: 2px solid #555;
-  border-radius: 4px;
-  background: #222;
-  color: #FFF;
+  /*border: 2px solid #555;*/
+  /*border-radius: 4px;*/
+  /*background: #222;*/
+  /*color: #FFF;*/
 }
 .mercury-lightview hr {
-  border-color: #333;
+  border-color: #CCC;
 }
 /*
  * Specific Lightviews

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

@@ -10,7 +10,7 @@
   height: 100%;
   opacity: 0;
   display: none;
-  background: rgba(255,255,255, .8);
+  background: rgba(255, 255, 255, .8);
 }
 .mercury-modal {
   position: fixed;

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

@@ -253,7 +253,7 @@
 .mercury-editable-toolbar .mercury-htmlEditor-button                 { background-position: -612px 0 }
 .mercury-editable-toolbar .mercury-htmlEditor-button.active          { background-position: -612px -18px }
 /*
- * Toolbar: Snippetable Region Toolbar
+ * Toolbar: Snippets Region Toolbar
  *----------------------------------------------------------------------------*/
 .mercury-snippet-toolbar {
   position: absolute;

data/features/generators/install.feature

@@ -16,6 +16,6 @@ Feature:
     When I successfully run `bundle exec rails generate mercury:install --full --trace`
     Then the following files should exist:
       | app/assets/javascripts/mercury.js             |
-      | app/assets/stylesheets/mercury_overrides.css  |
+      | app/assets/stylesheets/mercury.css            |
       | app/views/layouts/mercury.html.erb            |
     And the file "config/routes.rb" should contain "mount Mercury::Engine => '/'"

data/features/loading/loading.feature

@@ -15,11 +15,11 @@ Feature:
 
 
   Scenario: A user can expect to see the contents of the iframe
-    Then I should see "Editable region" in the content frame
+    Then I should see "Full region" in the content frame
 
 
   # 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.4.0" within the statusbar
+    Then I should see "Mercury Editor v0.6.0" within the statusbar
 

data/features/regions/full/basic_editing.feature

@@ -0,0 +1,196 @@
+@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 full region is simple content
+    And I make a selection
+
+    When I click on the bold editor button
+    Then the contents of the full 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 full region should be "this is <span>simple</span> <b>content</b>"
+
+
+ Scenario: A user can italicize content
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the italicize editor button
+    Then the contents of the full 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 full region should be "this is <span>simple</span> <b>content</b>"
+
+
+ Scenario: A user can overline content
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the overline editor button
+    Then the contents of the full 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 full region is simple content
+    And I make a selection
+
+    When I click on the strikethrough editor button
+    Then the contents of the full 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 full region should be "this is <span>simple</span> <b>content</b>"
+
+ Scenario: A user can underline content
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the underline editor button
+    Then the contents of the full 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 full region should be "this is <span>simple</span> <b>content</b>"
+
+
+ Scenario: A user can make content superscript
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the superscript editor button
+    Then the contents of the full 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 full region should be "this is <span>simple</span> <b>content</b>"
+
+
+ Scenario: A user can make content subscript
+    Given the content of the full region is simple content
+    And I make a selection
+
+    When I click on the subscript editor button
+    Then the contents of the full 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 full 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 full region has justifiable content
+    And I make a selection
+
+    When I click on the justify left editor button
+    Then the contents of the full 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 full 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 full 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 full 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 full region is simple content
+    And I make a selection
+
+    When I click on the insert unordered list editor button
+    Then the contents of the full 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 full region is simple content
+    And I make a selection
+
+    When I click on the insert ordered list editor button
+    Then the contents of the full 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 full region has justifiable content
+    And I make a selection
+
+    When I click on the indent editor button
+    Then the contents of the full 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 full 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 full 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 full 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 full region is simple content
+    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>"
+
+    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>"
+
+
+ Scenario: A user can clean/remove formatting on their selection
+    Given the content of the full region has wrapped content
+    And I make a selection
+
+    When I click on the remove formatting editor button
+    Then the contents of the full region should be "this is wrapped content"
+
+
+ Scenario: A user can wrap content within predefined styles
+    Given the content of the full 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 full 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 full 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 full 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 full 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 full 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 full 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 full region should be "this is <font color='rgb(255, 0, 0)'><span>simple</span></font> <b>content</b>"
+