mercury-rails 0.1.1 → 0.1.2

data/README.rdoc

@@ -42,52 +42,6 @@ library, etc.) so here's a list of some other editors that you might want to che
 * {NicEdit}[http://nicedit.com/]
 
 
-== Project Details
-
-=== WYSIWYG Editors Suck
-
-They just do.  Which as I've learned, is primarily due to the browser implementations.  Don't get me wrong, what the
-browsers have implemented is amazing, because it's hard stuff, plain and simple.  But if you're expecting a WYSIWYG
-editor to solve all your content problems you're wrong.  A better perception is that it will solve many of them, but
-shifts some into a new area.
-
-With that being said, Mercury tries to solve many of those issues and succeeds to a great degree, but alas, it's nearly
-impossible to address everything, and the browsers don't expose enough to fix some things.  This is true for every
-editor that I've looked into as well.
-
-It's important to understand this, and the details are more suited for long nerdy blog posts, so they won't be covered
-here.
-
-=== The Code and Why
-
-==== CoffeeScript
-
-Mercury has been written entirely in CoffeeScript because it simplifies a lot of the patterns that are used, and allows
-for very readable code.  The goal was to provide good readable code that could be adjusted based on need, instead of a
-complex configuration that makes the code harder to understand and tweak.
-
-==== jQuery
-
-jQuery was used as the javascript library, but is primarily used for the selectors, traversing, and manipulating the
-DOM.  Chaining is kept to a minimum for readability, and even though much of Mercury could've been written as jQuery
-plugins, it was not.
-
-==== Rails
-
-With the asset handling that comes bundled with Rails 3.1, Rails Engines, and the gem tools, there really wasn't any
-other option.  The javascript from Mercury can be used by any back end system, and isn't limited to Rails.  Many of the
-features do require a back end, and that stuff would have to be rewritten in whatever language you wanted support for.
-The coffeescript files can be found in the repo, and I would be fully supportive of anyone who wanted to add support for
-different back end frameworks or languages.
-
-==== Specs / Integration Tests
-
-Mercury is fully tested using Jasmine (via Evergreen) and Cucumber.  You can clone the project to run the full suite.
-
-  rake spec:javascripts
-  rake cucumber
-
-
 == Features
 
 The feature list is actually pretty long, so here's a short list that need highlighting.
@@ -113,9 +67,6 @@ 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
 
@@ -128,6 +79,33 @@ Region types are outlined below.
     default content
   </div>
 
+There's two methods to initialize Mercury Editor, and each one has it's benefits.
+
+=== Script Method
+
+Include the mercury_loader.js file.  The loader will reload the page and enable Mercury in full page editing mode, so
+you may want to wrap this in conditional logic (eg. only admins or something).
+
+  javascript_include_tag 'mercury_loader.js'
+
+Even though many efforts have been made to keep conflicts with javascript libraries from happening, we can't avoid all
+of them.  If you use this method, understand that there may be conflicts with javascript and css.  You should use the
+route method if you see any issues.
+
+=== Route Method
+
+The other way to initialize Mercury, which provides some slight performance improvements to the script method, is to
+access the editor route.  There's a glob route that captures everything beginning with /editor, so for instance to edit
+an /about_us content page, you should access it at the /editor/about_us path.  Again, you may want to define this route
+in your own routes file to restrict access to it.
+
+If you use this method, you may want to notify Mercury when the page is ready to be initialized.  To do this just
+trigger the initialize:frame event.  You can do this when the dom is ready to be interacted with (eg. dom:loaded,
+document.ready), or at the bottom of your body tag.  It's recommended that you do this because it gives you some load
+performance improvements, but it's not required.
+
+  top.Mercury.trigger('initialize:frame');
+
 
 == Region Types
 
@@ -154,4 +132,57 @@ defined by a developer and placed into content regions later.  More on this belo
 Snippets are reusable and configurable chunks of markup.  They can be defined by developers, and then placed anywhere in
 content regions.  When you drag a snippet into a region you'll be prompted to enter options, and after entering options
 the snippet will be rendered into the page as a preview.  Snippets can be dragged around (in snippetable regions) and
-edited or removed.
+edited or removed.
+
+Mercury does very little to save content and snippets for you, but it does provide the ability to load snippets from
+your own storage implementation.  Here's an example of loading existing snippet options back into Mercury.
+
+  top.Mercury.Snippet.load({
+    'snippet_1': {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "Jeremy"}},
+  });
+
+
+== Project Details
+
+=== WYSIWYG Editors Suck
+
+They just do.  Which as I've learned, is primarily due to the browser implementations.  Don't get me wrong, what the
+browsers have implemented is amazing, because it's hard stuff, plain and simple.  But if you're expecting a WYSIWYG
+editor to solve all your content problems you're wrong.  A better perception is that it will solve many of them, but
+shifts some into a new area.
+
+With that being said, Mercury tries to solve many of those issues and succeeds to a great degree, but alas, it's nearly
+impossible to address everything, and the browsers don't expose enough to fix some things.  This is true for every
+editor that I've looked into as well.
+
+It's important to understand this, and the details are more suited for long nerdy blog posts, so they won't be covered
+here.
+
+=== The Code and Why
+
+==== CoffeeScript
+
+Mercury has been written entirely in CoffeeScript because it simplifies a lot of the patterns that are used, and allows
+for very readable code.  The goal was to provide good readable code that could be adjusted based on need, instead of a
+complex configuration that makes the code harder to understand and tweak.
+
+==== jQuery
+
+jQuery was used as the javascript library, but is primarily used for the selectors, traversing, and manipulating the
+DOM.  Chaining is kept to a minimum for readability, and even though much of Mercury could've been written as jQuery
+plugins, it was not.
+
+==== Rails
+
+With the asset handling that comes bundled with Rails 3.1, Rails Engines, and the gem tools, there really wasn't any
+other option.  The javascript from Mercury can be used by any back end system, and isn't limited to Rails.  Many of the
+features do require a back end, and that stuff would have to be rewritten in whatever language you wanted support for.
+The coffeescript files can be found in the repo, and I would be fully supportive of anyone who wanted to add support for
+different back end frameworks or languages.
+
+==== Specs / Integration Tests
+
+Mercury is fully tested using Jasmine (via Evergreen) and Cucumber.  You can clone the project to run the full suite.
+
+  rake spec:javascripts
+  rake cucumber

data/VERSION

@@ -1 +1 @@
-0.1.1
+0.1.2

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

@@ -9,8 +9,8 @@ class @Mercury.Dialog
 
 
   build: ->
-    @element = $('<div>', {class: "mercury-dialog mercury-#{@name}-dialog loading", style: 'display:none'})
-    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+    @element = jQuery('<div>', {class: "mercury-dialog mercury-#{@name}-dialog loading", style: 'display:none'})
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
 
   bindEvents: ->
@@ -46,7 +46,7 @@ class @Mercury.Dialog
 
   appear: ->
     @element.css({display: 'block', opacity: 0})
-    @element.animate {opacity: .95}, 200, 'easeInOutSine', =>
+    @element.animate {opacity: 0.95}, 200, 'easeInOutSine', =>
       @load(=> @resize()) unless @loaded
 
 
@@ -57,7 +57,7 @@ class @Mercury.Dialog
 
   load: (callback) ->
     return unless @url
-    $.ajax @url, {
+    jQuery.ajax @url, {
       success: (data) =>
         @loadContent(data)
         Mercury.dialogHandlers[@name].call(@) if Mercury.dialogHandlers[@name]

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

@@ -1,6 +1,6 @@
-@Mercury.dialogHandlers.backcolor = ->
+@Mercury.dialogHandlers.backColor = ->
   @element.find('.picker, .last-picked').click (event) =>
-    color = $(event.target).css('background-color')
+    color = jQuery(event.target).css('background-color')
     @element.find('.last-picked').css({background: color})
     @button.css({backgroundColor: color})
-    Mercury.trigger('action', {action: 'backcolor', value: color})
+    Mercury.trigger('action', {action: 'backColor', value: color})

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

@@ -1,6 +1,6 @@
-@Mercury.dialogHandlers.forecolor = ->
+@Mercury.dialogHandlers.foreColor = ->
   @element.find('.picker, .last-picked').click (event) =>
-    color = $(event.target).css('background-color')
+    color = jQuery(event.target).css('background-color')
     @element.find('.last-picked').css({background: color})
     @button.css({backgroundColor: color})
-    Mercury.trigger('action', {action: 'forecolor', value: color})
+    Mercury.trigger('action', {action: 'foreColor', value: color})

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

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

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

@@ -1,10 +1,10 @@
-@Mercury.dialogHandlers.objectspanel = ->
+@Mercury.dialogHandlers.objectsPanel = ->
   # make the filter work
   @element.find('input.filter').keyup =>
     value = @element.find('input.filter').val()
     for snippet in @element.find('li[data-filter]')
-      if LiquidMetal.score($(snippet).data('filter'), value) == 0 then $(snippet).hide() else $(snippet).show()
+      if LiquidMetal.score(jQuery(snippet).data('filter'), value) == 0 then jQuery(snippet).hide() else jQuery(snippet).show()
 
   # when an element is dragged, set it so we have a global object
   @element.find('img[data-snippet]').bind 'dragstart', (event) ->
-    Mercury.snippet = $(@).data('snippet')
+    Mercury.snippet = jQuery(@).data('snippet')

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).data('class')
+    className = jQuery(event.target).data('class')
     Mercury.trigger('action', {action: 'style', value: className})

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

@@ -7,9 +7,9 @@ class @Mercury.HistoryBuffer
 
 
   push: (item) ->
-    if $.type(item) == 'string'
+    if jQuery.type(item) == 'string'
       return if @stack[@index] && @stack[@index].replace(@markerRegExp, '') == item.replace(@markerRegExp, '')
-    else if $.type(item) == 'object' && item.html
+    else if jQuery.type(item) == 'object' && item.html
       return if @stack[@index] && @stack[@index].html == item.html
 
     @stack = @stack[0...@index + 1]

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

@@ -1,12 +1,9 @@
 #
 #= require jquery-1.6
-#= require jquery-ui-1.8.13.custom.min
-#= require jquery-ui-1.8.13.sortable.custom
-#= require jquery.easing
-#= require jquery.json2
-#= require jquery.ujs
-#= require jquery.serialize_object
+#= require jquery-ui-1.8.13.custom
+#= require jquery.additions
 #= require liquidmetal
+#= require showdown
 #
 #= require_self
 #= require ./native_extensions
@@ -32,24 +29,22 @@
 #= require_tree ./dialogs
 #= require_tree ./modals
 #
-#= require showdown
-#
 
-@Mercury = {
+@Mercury =
 
-  version: 1.0
+  version: '0.1.1'
 
 
   # No IE support yet because it doesn't follow the W3C standards for HTML5 contentEditable (aka designMode).
-  supported: document.getElementById && document.designMode && !$.browser.konqueror && !$.browser.msie
+  supported: document.getElementById && document.designMode && !jQuery.browser.konqueror && !jQuery.browser.msie
 
 
   # Silent mode disables things like asking about unsaved changes before leaving the page.
-  silent: true
+  silent: false
 
 
   # Turning debug mode on will log events and other various things (using console.log if available).
-  debug: true
+  debug: false
 
 
   # Configuration
@@ -137,15 +132,15 @@
           undo:                ['Undo', 'Undo your last action']
           redo:                ['Redo', 'Redo your last action']
           sep:                 ' '
-        insertlink:            ['Link', 'Insert Link', {modal: '/mercury/modals/link', regions: ['editable', 'markupable']}]
-        insertmedia:           ['Media', 'Insert Media (images and videos)', {modal: '/mercury/modals/media', regions: ['editable', 'markupable']}]
-        inserttable:           ['Table', 'Insert Table', {modal: '/mercury/modals/table', regions: ['editable', 'markupable']}]
-        insertcharacter:       ['Character', 'Special Characters', {modal: '/mercury/modals/character', regions: ['editable', 'markupable']}]
-        objectspanel:          ['Snippet', 'Snippet Panel', {panel: '/mercury/panels/snippets'}]
+        insertLink:            ['Link', 'Insert Link', {modal: '/mercury/modals/link', regions: ['editable', 'markupable']}]
+        insertMedia:           ['Media', 'Insert Media (images and videos)', {modal: '/mercury/modals/media', regions: ['editable', 'markupable']}]
+        insertTable:           ['Table', 'Insert Table', {modal: '/mercury/modals/table', regions: ['editable', 'markupable']}]
+        insertCharacter:       ['Character', 'Special Characters', {modal: '/mercury/modals/character', regions: ['editable', 'markupable']}]
+        objectsPanel:          ['Snippet', 'Snippet Panel', {panel: '/mercury/panels/snippets'}]
         sep2:                  ' '
-        historypanel:          ['History', 'Page Version History', {panel: '/mercury/panels/history'}]
+        historyPanel:          ['History', 'Page Version History', {panel: '/mercury/panels/history'}]
         sep3:                  ' '
-        notespanel:            ['Notes', 'Page Notes', {panel: '/mercury/panels/notes'}]
+        notesPanel:            ['Notes', 'Page Notes', {panel: '/mercury/panels/notes'}]
 
       editable:
         _regions:              ['editable', 'markupable']
@@ -156,9 +151,9 @@
           sep2:                '-'
         colors:
           _regions:            ['editable']
-          backcolor:           ['Background Color', null, {palette: '/mercury/palettes/backcolor', context: true, preload: true}]
+          backColor:           ['Background Color', null, {palette: '/mercury/palettes/backcolor', context: true, preload: true}]
           sep1:                ' '
-          forecolor:           ['Text Color', null, {palette: '/mercury/palettes/forecolor', context: true, preload: true}]
+          foreColor:           ['Text Color', null, {palette: '/mercury/palettes/forecolor', context: true, preload: true}]
           sep2:                '-'
         decoration:
           bold:                ['Bold', null, {context: true}]
@@ -173,14 +168,14 @@
           sep:                 '-'
         justify:
           _regions:            ['editable']
-          justifyleft:         ['Align Left', null, {context: true}]
-          justifycenter:       ['Center', null, {context: true}]
-          justifyright:        ['Align Right', null, {context: true}]
-          justifyfull:         ['Justify Full', null, {context: true}]
+          justifyLeft:         ['Align Left', null, {context: true}]
+          justifyCenter:       ['Center', null, {context: true}]
+          justifyRight:        ['Align Right', null, {context: true}]
+          justifyFull:         ['Justify Full', null, {context: true}]
           sep:                 '-'
         list:
-          insertunorderedlist: ['Unordered List', null, {context: true}]
-          insertorderedlist:   ['Numbered List', null, {context: true}]
+          insertUnorderedList: ['Unordered List', null, {context: true}]
+          insertOrderedList:   ['Numbered List', null, {context: true}]
           sep:                 '-'
         indent:
           outdent:             ['Decrease Indentation', null]
@@ -189,35 +184,35 @@
         table:
           _context:            true
           _regions:            ['editable']
-          insertrowbefore:     ['Insert Table Row', 'Insert a table row before the cursor']
-          insertrowafter:      ['Insert Table Row', 'Insert a table row after the cursor']
-          deleterow:           ['Delete Table Row', 'Delete this table row']
-          insertcolumnbefore:  ['Insert Table Column', 'Insert a table column before the cursor']
-          insertcolumnafter:   ['Insert Table Column', 'Insert a table column after the cursor']
-          deletecolumn:        ['Delete Table Column', 'Delete this table column']
+          insertRowBefore:     ['Insert Table Row', 'Insert a table row before the cursor']
+          insertRowAfter:      ['Insert Table Row', 'Insert a table row after the cursor']
+          deleteRow:           ['Delete Table Row', 'Delete this table row']
+          insertColumnBefore:  ['Insert Table Column', 'Insert a table column before the cursor']
+          insertColumnAfter:   ['Insert Table Column', 'Insert a table column after the cursor']
+          deleteColumn:        ['Delete Table Column', 'Delete this table column']
           sep1:                ' '
-          increasecolspan:     ['Increase Cell Columns', 'Increase the cells colspan']
-          decreasecolspan:     ['Decrease Cell Columns', 'Decrease the cells colspan and add a new cell']
-          increaserowspan:     ['Increase Cell Rows', 'Increase the cells rowspan']
-          decreaserowspan:     ['Decrease Cell Rows', 'Decrease the cells rowspan and add a new cell']
+          increaseColspan:     ['Increase Cell Columns', 'Increase the cells colspan']
+          decreaseColspan:     ['Decrease Cell Columns', 'Decrease the cells colspan and add a new cell']
+          increaseRowspan:     ['Increase Cell Rows', 'Increase the cells rowspan']
+          decreaseRowspan:     ['Decrease Cell Rows', 'Decrease the cells rowspan and add a new cell']
           sep2:                '-'
         rules:
-          horizontalrule:      ['Horizontal Rule', 'Insert a horizontal rule']
+          horizontalRule:      ['Horizontal Rule', 'Insert a horizontal rule']
           sep1:                '-'
         formatting:
           _regions:            ['editable']
-          removeformatting:    ['Remove Formatting', 'Remove formatting for the selection']
+          removeFormatting:    ['Remove Formatting', 'Remove formatting for the selection']
           sep2:                ' '
         editors:
           _regions:            ['editable']
-          htmleditor:          ['Edit HTML', 'Edit the HTML content'] # example behavior below
+          htmlEditor:          ['Edit HTML', 'Edit the HTML content'] # example behavior below
 
       snippetable:
         _custom:               true
         actions:
-          editsnippet:         ['Edit Snippet Settings', null]
+          editSnippet:         ['Edit Snippet Settings', null]
           sep1:                ' '
-          removesnippet:       ['Remove Snippet', null]
+          removeSnippet:       ['Remove Snippet', null]
 
 
     # Behaviors
@@ -228,15 +223,15 @@
     #
     # You can see how the behavior matches up directly with the button name.  It's also important to note that the
     # callback functions are executed within the scope of the given region, so you have access to all it's methods.
-    # todo: figure out how this impacts different regions.. should they go away, or should they get moved into region types?
+    # todo: figure out how this impacts different regions.. should they go away, or should they get moved into regions?
     behaviors:
-      horizontalrule: (selection) -> selection.replace('<hr/>')
+      horizontalRule: (selection) -> selection.replace('<hr/>')
 
-      htmleditor: ->
+      htmlEditor: ->
         Mercury.modal '/mercury/modals/htmleditor', {
-          title: 'HTML Editor',
-          fullHeight: true,
-          handler: 'htmleditor'
+          title: 'HTML Editor'
+          fullHeight: true
+          handler: 'htmlEditor'
         }
 
 
@@ -263,7 +258,7 @@
       .mercury-region, .mercury-textarea { min-height: 10px; outline: 1px dotted #09F }
       .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:after { content: '.'; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }
       .mercury-region table, .mercury-region td { border: 1px dotted red; }
       '''
   }
@@ -271,12 +266,12 @@
 
   # Custom event and logging methods
   bind: (eventName, callback) ->
-    $(document).bind("mercury:#{eventName}", callback)
+    jQuery(document).bind("mercury:#{eventName}", callback)
 
 
   trigger: (eventName, options) ->
     Mercury.log(eventName, options)
-    $(document).trigger("mercury:#{eventName}", options)
+    jQuery(document).trigger("mercury:#{eventName}", options)
 
 
   log: ->
@@ -289,5 +284,3 @@
   Regions: {}
   modalHandlers: {}
   dialogHandlers: {}
-
-}