mercury-rails 0.1.0 → 0.1.1

data/README.rdoc

@@ -104,12 +104,17 @@ The feature list is actually pretty long, so here's a short list that need highl
 
 == Installation
 
-Include the gem in your Gemfile
+Include the gem in your Gemfile and bundle to install the gem.
 
   gem 'mercury-rails'
 
-Then just bundle install and you should be all set.  Browse to any existing content page and prefix it's url with /edit,
-so for instance, localhost:3000/edit/content/page to edit the content on /content/page.
+There's a migration for images that you'll need as well.
+
+  rake mercury_engine:install:migrations
+  rake db:migrate
+
+To access the editor on any page simply browse to any existing content page and prefix it's url with /edit, so for
+instance, localhost:3000/edit/content/page to edit the content on /content/page.
 
 
 == Usage

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.1.1

data/app/assets/javascripts/mercury/dialogs/style.js.coffee

@@ -1,4 +1,4 @@
 @Mercury.dialogHandlers.style = ->
   @element.find('[data-class]').click (event) =>
-    className = $(event.target).attr('class')
+    className = $(event.target).data('class')
     Mercury.trigger('action', {action: 'style', value: className})

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

@@ -261,7 +261,7 @@
     #
     injectedStyles: '''
       .mercury-region, .mercury-textarea { min-height: 10px; outline: 1px dotted #09F }
-      .mercury-textarea { box-sizing: border-box; -moz-box-sizing: border-box; resize: vertical; }
+      .mercury-textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: vertical; }
       .mercury-region:focus, .mercury-region.focus, .mercury-textarea.focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }
       .mercury-region:after { content: '\00a0'; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }
       .mercury-region table, .mercury-region td { border: 1px dotted red; }
@@ -281,7 +281,7 @@
 
   log: ->
     if Mercury.debug && console
-      return if arguments[0] == 'hide:toolbar'
+      return if arguments[0] == 'hide:toolbar' || arguments[0] == 'show:toolbar'
       try console.debug(arguments) catch e
 
 

data/app/assets/javascripts/mercury/modals/insertlink.js.coffee

@@ -22,7 +22,7 @@
     selection = Mercury.region.selection()
 
     # if we're editing a link prefill the information
-    container = selection.commonAncestor(true).closest('a') if selection.commonAncestor
+    container = selection.commonAncestor(true).closest('a') if selection && selection.commonAncestor
     if container && container.length
       existingLink = container
 
@@ -55,9 +55,6 @@
         @element.find('#link_popup_height').val(href.match(/height=(\d+),/)[1])
         @element.find('#popup_options').show()
 
-    # get the text content
-    @element.find('#link_text').val(selection.textContent())
-
   # build the link on form submission
   @element.find('form').submit (event) =>
     event.preventDefault()
@@ -68,7 +65,7 @@
 
     switch type
       when 'existing_bookmark' then attrs = {href: "##{@element.find('#link_existing_bookmark').val()}"}
-      when 'new_bookmark' then attrs = {name: "##{@element.find('#link_new_bookmark').val()}"}
+      when 'new_bookmark' then attrs = {name: "#{@element.find('#link_new_bookmark').val()}"}
       else attrs = {href: @element.find("#link_#{type}").val()}
 
     switch target
@@ -89,4 +86,4 @@
     else
       Mercury.trigger('action', {action: 'insertLink', value: value})
 
-    Mercury.modal.hide()
+    @hide()

data/app/assets/javascripts/mercury/modals/insertmedia.js.coffee

@@ -26,14 +26,14 @@
       if src.indexOf('http://www.youtube.com') > -1
         # it's a youtube video
         @element.find('#media_youtube_url').val("http://youtu.be/#{src.match(/\/embed\/(\w+)/)[1]}")
-        @element.find('#media_youtube_width').val(iframe.attr('width'))
-        @element.find('#media_youtube_height').val(iframe.attr('height'))
+        @element.find('#media_youtube_width').val(iframe.width())
+        @element.find('#media_youtube_height').val(iframe.height())
         @element.find('#media_youtube_url').focus()
       else if src.indexOf('http://player.vimeo.com') > -1
         # it's a vimeo video
         @element.find('#media_vimeo_url').val("http://vimeo.com/#{src.match(/\/video\/(\w+)/)[1]}")
-        @element.find('#media_vimeo_width').val(iframe.attr('width'))
-        @element.find('#media_vimeo_height').val(iframe.attr('height'))
+        @element.find('#media_vimeo_width').val(iframe.width())
+        @element.find('#media_vimeo_height').val(iframe.height())
         @element.find('#media_vimeo_url').focus()
 
   # build the image or youtube embed on form submission
@@ -64,9 +64,9 @@
         value = $('<iframe>', {
           width: @element.find('#media_vimeo_width').val() || 400,
           height: @element.find('#media_vimeo_height').val() || 225,
-          src: "http://player.vimeo.com/video/#{code}?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff",
+          src: "http://player.vimeo.com/video/#{code}?title=1&byline=1&portrait=0&color=ffffff",
           frameborder: 0,
         })
         Mercury.trigger('action', {action: 'insertHTML', value: value})
 
-    Mercury.modal.hide()
+    @hide()

data/app/assets/javascripts/mercury/modals/insertsnippet.js.coffee

@@ -1,11 +1,12 @@
 @Mercury.modalHandlers.insertsnippet = ->
   @element.find('form').submit (event) =>
     event.preventDefault()
+    serializedForm = @element.find('form').serializeObject()
     if Mercury.snippet
       snippet = Mercury.snippet
-      snippet.setOptions(@element.find('form').serializeObject())
+      snippet.setOptions(serializedForm)
       Mercury.snippet = null
     else
-      snippet = Mercury.Snippet.create('example', @element.find('form').serializeObject())
+      snippet = Mercury.Snippet.create(@options.snippetName, serializedForm)
     Mercury.trigger('action', {action: 'insertsnippet', value: snippet})
     @hide()

data/app/assets/javascripts/mercury/modals/inserttable.js.coffee

@@ -1,12 +1,13 @@
 @Mercury.modalHandlers.inserttable = ->
   table = @element.find('#table_display table')
+
   # make td's selectable
   table.click (event) =>
     cell = $(event.target)
     table = cell.closest('table')
     table.find('.selected').removeClass('selected')
     cell.addClass('selected')
-    @tableEditor = Mercury.tableEditor(table, cell)
+    Mercury.tableEditor(table, cell)
 
   # select the first td
   firstCell = table.find('td, th').first()
@@ -34,11 +35,11 @@
     table.attr({align: @element.find('#table_alignment').val()})
 
   # set the border
-  @element.find('#table_border').change =>
+  @element.find('#table_border').keyup =>
     table.attr({border: parseInt(@element.find('#table_border').val())})
 
   # set the cellspacing
-  @element.find('#table_spacing').change =>
+  @element.find('#table_spacing').keyup =>
     table.attr({cellspacing: parseInt(@element.find('#table_spacing').val())})
 
   # build the table on form submission
@@ -47,10 +48,9 @@
     table.find('.selected').removeClass('selected')
     table.find('td, th').html(' ')
 
-    tableHTML = $('<div>').html(table).html()
-    tableHTML = tableHTML.replace(/^\s+|\n/gm, '')
-    tableHTML = tableHTML.replace(/(<\/.*?>|<table.*?>|<tbody>|<tr>)/g, '$1\n')
+    html = $('<div>').html(table).html()
+    value = html.replace(/^\s+|\n/gm, '').replace(/(<\/.*?>|<table.*?>|<tbody>|<tr>)/g, '$1\n')
 
-    Mercury.trigger('action', {action: 'insertHTML', value: tableHTML})
-    Mercury.modal.hide()
+    Mercury.trigger('action', {action: 'insertHTML', value: value})
+    @hide()
 

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

@@ -31,6 +31,12 @@ class @Mercury.PageEditor
       @document = $(@iframe.get(0).contentWindow.document)
       $("<style mercury-styles=\"true\">").html(Mercury.config.injectedStyles).appendTo(@document.find('head'))
 
+      # jquery: make jQuery evaluate scripts within the context of the iframe window -- note that this means that we
+      # can't use eval in mercury (eg. script tags in ajax responses) because it will eval in the wrong context (you can
+      # use top.Mercury though, if you keep it in mind)
+      iframeWindow = @iframe.get(0).contentWindow
+      $.globalEval = (data) -> (iframeWindow.execScript || (data) -> iframeWindow["eval"].call(iframeWindow, data))(data) if (data && /\S/.test(data))
+
       @bindEvents()
       @initializeRegions()
       @finalizeInterface()

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

@@ -3,7 +3,7 @@ class @Mercury.Snippet
   @all: []
 
   @displayOptionsFor: (name) ->
-    Mercury.modal("/mercury/snippets/#{name}/options", {title: 'Snippet Options', handler: 'insertsnippet'})
+    Mercury.modal("/mercury/snippets/#{name}/options", {title: 'Snippet Options', handler: 'insertsnippet', snippetName: name})
     Mercury.snippet = null
 
 

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

@@ -83,6 +83,7 @@
   .mercury-panel-pane {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     padding: 15px;
     overflow-y: auto;
     overflow-x: hidden;

data/app/assets/stylesheets/mercury/mercury.scss

@@ -74,6 +74,14 @@ form, form ul, form ol, form li, form fieldset, form p, .filter {
     width: 74%;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+  }
+  li.boolean {
+    margin-left: 23%;
+    padding-left: 9px;
+    label {
+      width: auto;
+    }
   }
   fieldset.buttons {
     clear: both;

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

@@ -77,8 +77,9 @@
     position: relative;
     overflow: auto;
     float: left;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     padding: 20px 20px 10px;
     font-family: Helvetica, Tahoma, Arial, sans-serif;
     color: #000;
@@ -109,6 +110,7 @@
     padding: 0;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
   }
 }
 /*

data/app/assets/stylesheets/mercury/statusbar.scss

@@ -8,6 +8,7 @@
   user-select: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   z-index: 10020;
   bottom: 0;
   width: 100%;

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

@@ -5,8 +5,8 @@
     = csrf_meta_tags
     = stylesheet_link_tag "mercury"
     = javascript_include_tag "mercury"
-    :javascript
-      Mercury.Snippet.load({
-        'snippet_1': {name: 'example', options: {'options[favorite_beer]': "miller_lite", 'options[first_name]': "1"}},
-      });
+    -#:javascript
+    -#  Mercury.Snippet.load({
+    -#    'snippet_1': {name: 'example', options: {'options[favorite_beer]': "miller_lite", 'options[first_name]': "1"}},
+    -#  });
   %body= javascript_tag 'new Mercury.PageEditor()'

data/mercury-rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{mercury-rails}
-  s.version = "0.1.0"
+  s.version = "0.1.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Jeremy Jackson"]
-  s.date = %q{2011-06-17}
+  s.date = %q{2011-06-19}
   s.description = %q{A fully featured and advanced HTML5 WYSIWYG editor written in CoffeeScript on top of Rails 3.1}
   s.email = %q{jejacks0n@gmail.com}
   s.extra_rdoc_files = [
@@ -120,8 +120,19 @@ Gem::Specification.new do |s|
     "log/.gitkeep",
     "mercury-rails.gemspec",
     "spec/javascripts/mercury/dialog_spec.js.coffee",
+    "spec/javascripts/mercury/dialogs/backcolor_spec.js.coffee",
+    "spec/javascripts/mercury/dialogs/forecolor_spec.js.coffee",
+    "spec/javascripts/mercury/dialogs/formatblock_spec.js.coffee",
+    "spec/javascripts/mercury/dialogs/objectspanel_spec.js.coffee",
+    "spec/javascripts/mercury/dialogs/style_spec.js.coffee",
     "spec/javascripts/mercury/history_buffer_spec.js.coffee",
     "spec/javascripts/mercury/mercury_spec.js.coffee",
+    "spec/javascripts/mercury/modals/htmleditor_spec.js.coffee",
+    "spec/javascripts/mercury/modals/insertcharacter_spec.js.coffee",
+    "spec/javascripts/mercury/modals/insertlink_spec.js.coffee",
+    "spec/javascripts/mercury/modals/insertmedia_spec.js.coffee",
+    "spec/javascripts/mercury/modals/insertsnippet_spec.js.coffee",
+    "spec/javascripts/mercury/modals/inserttable_spec.js.coffee",
     "spec/javascripts/mercury/native_extensions_spec.js.coffee",
     "spec/javascripts/mercury/page_editor_spec.js.coffee",
     "spec/javascripts/mercury/palette_spec.js.coffee",
@@ -144,6 +155,17 @@ Gem::Specification.new do |s|
     "spec/javascripts/responses/blank.html",
     "spec/javascripts/spec_helper.js",
     "spec/javascripts/templates/mercury/dialog.html",
+    "spec/javascripts/templates/mercury/dialogs/backcolor.html",
+    "spec/javascripts/templates/mercury/dialogs/forecolor.html",
+    "spec/javascripts/templates/mercury/dialogs/formatblock.html",
+    "spec/javascripts/templates/mercury/dialogs/objectspanel.html",
+    "spec/javascripts/templates/mercury/dialogs/style.html",
+    "spec/javascripts/templates/mercury/modals/htmleditor.html",
+    "spec/javascripts/templates/mercury/modals/insertcharacter.html",
+    "spec/javascripts/templates/mercury/modals/insertlink.html",
+    "spec/javascripts/templates/mercury/modals/insertmedia.html",
+    "spec/javascripts/templates/mercury/modals/insertsnippet.html",
+    "spec/javascripts/templates/mercury/modals/inserttable.html",
     "spec/javascripts/templates/mercury/page_editor.html",
     "spec/javascripts/templates/mercury/palette.html",
     "spec/javascripts/templates/mercury/panel.html",

data/spec/javascripts/mercury/dialogs/backcolor_spec.js.coffee

@@ -0,0 +1,39 @@
+require '/assets/mercury/mercury.js'
+
+describe "Mercury.dialogHandlers.backcolor", ->
+
+  template 'mercury/dialogs/backcolor.html'
+
+  beforeEach ->
+    @dialog = {element: $('#test'), button: $('#button')}
+    Mercury.dialogHandlers.backcolor.call(@dialog)
+
+  describe "when a .picker or .last-picked element is clicked", ->
+
+    it "sets the last picked color to whatever was selected", ->
+      $('.last-picked').css({background: '#0000FF'})
+      jasmine.simulate.click($('#white').get(0))
+      expect($('.last-picked').css('backgroundColor')).toEqual('rgb(255, 255, 255)')
+      jasmine.simulate.click($('#red').get(0))
+      expect($('.last-picked').css('backgroundColor')).toEqual('rgb(255, 0, 0)')
+
+    it "sets the background color of the button", ->
+      $('#button').css({background: '#0000FF'})
+      jasmine.simulate.click($('#white').get(0))
+      expect($('#button').css('backgroundColor')).toEqual('rgb(255, 255, 255)')
+      jasmine.simulate.click($('#red').get(0))
+      expect($('#button').css('backgroundColor')).toEqual('rgb(255, 0, 0)')
+
+    it "triggers an action", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#white').get(0))
+      expect(spy.callCount).toEqual(1)
+      expect(spy.argsForCall[0]).toEqual(['action', {action: 'backcolor', value: 'rgb(255, 255, 255)'}])
+
+
+  describe "when any other element is clicked", ->
+
+    it "does nothing", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#green').get(0))
+      expect(spy.callCount).toEqual(0)

data/spec/javascripts/mercury/dialogs/forecolor_spec.js.coffee

@@ -0,0 +1,39 @@
+require '/assets/mercury/mercury.js'
+
+describe "Mercury.dialogHandlers.forecolor", ->
+
+  template 'mercury/dialogs/forecolor.html'
+
+  beforeEach ->
+    @dialog = {element: $('#test'), button: $('#button')}
+    Mercury.dialogHandlers.forecolor.call(@dialog)
+
+  describe "when a .picker or .last-picked element is clicked", ->
+
+    it "sets the last picked color to whatever was selected", ->
+      $('.last-picked').css({background: '#0000FF'})
+      jasmine.simulate.click($('#white').get(0))
+      expect($('.last-picked').css('backgroundColor')).toEqual('rgb(255, 255, 255)')
+      jasmine.simulate.click($('#red').get(0))
+      expect($('.last-picked').css('backgroundColor')).toEqual('rgb(255, 0, 0)')
+
+    it "sets the background color of the button", ->
+      $('#button').css({background: '#0000FF'})
+      jasmine.simulate.click($('#white').get(0))
+      expect($('#button').css('backgroundColor')).toEqual('rgb(255, 255, 255)')
+      jasmine.simulate.click($('#red').get(0))
+      expect($('#button').css('backgroundColor')).toEqual('rgb(255, 0, 0)')
+
+    it "triggers an action", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#white').get(0))
+      expect(spy.callCount).toEqual(1)
+      expect(spy.argsForCall[0]).toEqual(['action', {action: 'forecolor', value: 'rgb(255, 255, 255)'}])
+
+
+  describe "when any other element is clicked", ->
+
+    it "does nothing", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#green').get(0))
+      expect(spy.callCount).toEqual(0)

data/spec/javascripts/mercury/dialogs/formatblock_spec.js.coffee

@@ -0,0 +1,27 @@
+require '/assets/mercury/mercury.js'
+
+describe "Mercury.dialogHandlers.formatblock", ->
+
+  template 'mercury/dialogs/formatblock.html'
+
+  beforeEach ->
+    @dialog = {element: $('#test')}
+    Mercury.dialogHandlers.formatblock.call(@dialog)
+
+  describe "when an element with a data-tag attribute is clicked", ->
+
+    it "triggers an action", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#h1').get(0))
+      expect(spy.callCount).toEqual(1)
+      expect(spy.argsForCall[0]).toEqual(['action', {action: 'formatblock', value: 'h1'}])
+      jasmine.simulate.click($('#div').get(0))
+      expect(spy.argsForCall[1]).toEqual(['action', {action: 'formatblock', value: 'pre'}])
+
+
+  describe "when any other element is clicked", ->
+
+    it "does nothing", ->
+      spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+      jasmine.simulate.click($('#em').get(0))
+      expect(spy.callCount).toEqual(0)

data/spec/javascripts/mercury/dialogs/objectspanel_spec.js.coffee

@@ -0,0 +1,32 @@
+require '/assets/mercury/mercury.js'
+
+describe "Mercury.dialogHandlers.backcolor", ->
+
+  template 'mercury/dialogs/objectspanel.html'
+
+  beforeEach ->
+    @dialog = {element: $('#test'), button: $('#button')}
+    Mercury.dialogHandlers.objectspanel.call(@dialog)
+
+  describe "filter", ->
+
+    it "filters on keypress", ->
+      $('#filter').val('foo')
+      jasmine.simulate.keyup($('#filter').get(0))
+      expect($('#first').css('display')).toNotEqual('none')
+      expect($('#second').css('display')).toEqual('none')
+
+      $('#filter').val('b')
+      jasmine.simulate.keyup($('#filter').get(0))
+      expect($('#first').css('display')).toNotEqual('none')
+      expect($('#second').css('display')).toNotEqual('none')
+
+      $('#filter').val('baz')
+      jasmine.simulate.keyup($('#filter').get(0))
+      expect($('#first').css('display')).toEqual('none')
+      expect($('#second').css('display')).toNotEqual('none')
+
+
+  describe "dragging an image with a data-snippet attribute", ->
+
+    it "sets the active snippet", ->