mercury-rails 0.2.3 → 0.3.1

data/vendor/assets/javascripts/mercury/plugins/save_as_xml/mercury/page_editor.js.coffee

@@ -7,6 +7,7 @@ class Mercury.PageEditor extends Mercury.PageEditor
     return
     method = 'PUT' if @options.saveMethod == 'PUT'
     jQuery.ajax url, {
+      headers: Mercury.ajaxHeaders()
       type: method || 'POST'
       dataType: 'xml'
       data: data

data/vendor/assets/javascripts/mercury/region.js.coffee

@@ -6,11 +6,12 @@ class @Mercury.Region
     Mercury.log("building #{@type}", @element, @options)
 
     @document = @window.document
-    @name = @element.attr('id')
+    @name = @element.attr(Mercury.config.regions.identifier)
     @history = new Mercury.HistoryBuffer()
     @build()
     @bindEvents()
     @pushHistory()
+    @element.data('region', @)
 
 
   build: ->
@@ -20,28 +21,24 @@ class @Mercury.Region
 
 
   bindEvents: ->
-    Mercury.bind 'mode', (event, options) =>
-      @togglePreview() if options.mode == 'preview'
+    Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
 
-    Mercury.bind 'focus:frame', =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'focus:frame', =>
+      return if @previewing || Mercury.region != @
       @focus()
 
-    Mercury.bind 'action', (event, options) =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'action', (event, options) =>
+      return if @previewing || Mercury.region != @
       @execCommand(options.action, options) if options.action
 
-    @element.mousemove (event) =>
-      return if @previewing
-      return unless Mercury.region == @
+    @element.on 'mousemove', (event) =>
+      return if @previewing || Mercury.region != @
       snippet = jQuery(event.target).closest('.mercury-snippet')
       if snippet.length
         @snippet = snippet
         Mercury.trigger('show:toolbar', {type: 'snippet', snippet: @snippet})
 
-    @element.mouseout (event) =>
+    @element.on 'mouseout', =>
       return if @previewing
       Mercury.trigger('hide:toolbar', {type: 'snippet', immediately: false})
 
@@ -55,7 +52,7 @@ class @Mercury.Region
       container.html(@element.html().replace(/^\s+|\s+$/g, ''))
 
       # replace snippet contents to be an identifier
-      if filterSnippets then for snippet, index in container.find('.mercury-snippet')
+      if filterSnippets then for snippet in container.find('.mercury-snippet')
         snippet = jQuery(snippet)
         snippet.attr({contenteditable: null, 'data-version': null})
         snippet.html("[#{snippet.data('snippet')}]")
@@ -66,11 +63,11 @@ class @Mercury.Region
   togglePreview: ->
     if @previewing
       @previewing = false
-      @element.addClass(Mercury.config.regionClass).removeClass("#{Mercury.config.regionClass}-preview")
+      @element.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
       @focus() if Mercury.region == @
     else
       @previewing = true
-      @element.addClass("#{Mercury.config.regionClass}-preview").removeClass(Mercury.config.regionClass)
+      @element.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
       Mercury.trigger('region:blurred', {region: @})
 
 
@@ -79,7 +76,7 @@ class @Mercury.Region
     @pushHistory() unless action == 'redo'
 
     Mercury.log('execCommand', action, options.value)
-    Mercury.changes = true
+    Mercury.changes = true unless options.already_handled
 
 
   pushHistory: ->
@@ -95,9 +92,16 @@ class @Mercury.Region
     return snippets
 
 
+  dataAttributes: ->
+    data = {}
+    data[attr] = @element.attr('data-' + attr) for attr in Mercury.config.regions.dataAttributes
+    return data
+
+
   serialize: ->
     return {
       type: @type
+      data: @dataAttributes()
       value: @content(null, true)
       snippets: @snippets()
     }

data/vendor/assets/javascripts/mercury/regions/editable.js.coffee

@@ -1,4 +1,8 @@
 class @Mercury.Regions.Editable extends Mercury.Region
+  # No IE support yet because it doesn't follow the W3C standards for HTML5 contentEditable (aka designMode).
+  @supported: document.designMode && !jQuery.browser.konqueror && !jQuery.browser.msie
+  @supportedText: "Chrome 10+, Firefox 4+, Safari 5+"
+
   type = 'editable'
 
   constructor: (@element, @window, @options = {}) ->
@@ -41,15 +45,14 @@ class @Mercury.Regions.Editable extends Mercury.Region
   bindEvents: ->
     super
 
-    Mercury.bind 'region:update', =>
-      return if @previewing
-      return unless Mercury.region == @
-      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
+    Mercury.on 'region:update', =>
+      return if @previewing || Mercury.region != @
+      setTimeout(1, => @selection().forceSelection(@element.get(0)))
       currentElement = @currentElement()
       if currentElement.length
         # setup the table editor if we're inside a table
         table = currentElement.closest('table', @element)
-        Mercury.tableEditor(table, currentElement.closest('tr, td'), ' ') if table.length
+        Mercury.tableEditor(table, currentElement.closest('tr, td'), '<br/>') if table.length
         # display a tooltip if we're in an anchor
         anchor = currentElement.closest('a', @element)
         if anchor.length && anchor.attr('href')
@@ -57,25 +60,25 @@ class @Mercury.Regions.Editable extends Mercury.Region
         else
           Mercury.tooltip.hide()
 
-    @element.bind 'dragenter', (event) =>
+    @element.on 'dragenter', (event) =>
       return if @previewing
       event.preventDefault() unless Mercury.snippet
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
-    @element.bind 'dragover', (event) =>
+    @element.on 'dragover', (event) =>
       return if @previewing
       event.preventDefault() unless Mercury.snippet
       event.originalEvent.dataTransfer.dropEffect = 'copy'
       if jQuery.browser.webkit
         clearTimeout(@dropTimeout)
-        @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 10)
+        @dropTimeout = setTimeout(10, => @element.trigger('possible:drop'))
 
-    @element.bind 'drop', (event) =>
+    @element.on 'drop', (event) =>
       return if @previewing
 
       # handle dropping snippets
       clearTimeout(@dropTimeout)
-      @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 1)
+      @dropTimeout = setTimeout(1, => @element.trigger('possible:drop'))
 
       # handle any files that were dropped
       return unless event.originalEvent.dataTransfer.files.length
@@ -88,7 +91,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     # isn't handled (eg, putting the image where it was dropped,) so to allow the browser to do it's thing, and also do
     # our thing we have this little hack.  *sigh*
     # read: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
-    @element.bind 'possible:drop', =>
+    @element.on 'possible:drop', =>
       return if @previewing
       if snippet = @element.find('img[data-snippet]').get(0)
         @focus()
@@ -97,11 +100,11 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     # custom paste handling: we have to do some hackery to get the pasted content since it's not exposed normally
     # through a clipboard in firefox (heaven forbid), and to keep the behavior across all browsers, we manually detect
-    # what was pasted by running a quick diff, removing it by calling undo, making our adjustments, and then putting the
-    # content back.  This is possible, so it doesn't make sense why it wouldn't be exposed in a sensible way.  *sigh*
-    @element.bind 'paste', (event) =>
-      return if @previewing
-      return unless Mercury.region == @
+    # what was pasted by focusing a different (hidden) region, letting it paste there, making our adjustments, and then
+    # inserting the content where it was intended.  This is possible, so it doesn't make sense why it wouldn't be
+    # exposed in a sensible way.  *sigh*
+    @element.on 'paste', (event) =>
+      return if @previewing || Mercury.region != @
       if @specialContainer
         event.preventDefault()
         return
@@ -109,35 +112,34 @@ class @Mercury.Regions.Editable extends Mercury.Region
       Mercury.changes = true
       @handlePaste(event.originalEvent)
 
-    @element.focus =>
+    @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
-      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
+      setTimeout(1, => @selection().forceSelection(@element.get(0)))
       Mercury.trigger('region:focused', {region: @})
 
-    @element.blur =>
+    @element.on 'blur', =>
       return if @previewing
       Mercury.trigger('region:blurred', {region: @})
       Mercury.tooltip.hide()
 
-    @element.click (event) =>
-      jQuery(event.target).closest('a').attr('target', '_top') if @previewing
+    @element.on 'click', (event) =>
+      jQuery(event.target).closest('a').attr('target', '_parent') if @previewing
 
-    @element.dblclick (event) =>
+    @element.on 'dblclick', (event) =>
       return if @previewing
       image = jQuery(event.target).closest('img', @element)
       if image.length
         @selection().selectNode(image.get(0), true)
         Mercury.trigger('button', {action: 'insertMedia'})
 
-    @element.mouseup =>
+    @element.on 'mouseup', =>
       return if @previewing
       @pushHistory()
       Mercury.trigger('region:update', {region: @})
 
-    @element.keydown (event) =>
+    @element.on 'keydown', (event) =>
       return if @previewing
-      Mercury.changes = true
       switch event.keyCode
         when 90 # undo / redo
           return unless event.metaKey
@@ -166,7 +168,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
             else if container.parents('ul, ol').length > 1
               @execCommand('outdent')
           else
-            @execCommand('insertHTML', {value: '&nbsp; '})
+            @execCommand('insertHTML', {value: '&nbsp;&nbsp;'})
 
       if event.metaKey
         switch event.keyCode
@@ -184,15 +186,21 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
       @pushHistory(event.keyCode)
 
-    @element.keyup =>
+    @element.on 'keyup', =>
       return if @previewing
       Mercury.trigger('region:update', {region: @})
+      Mercury.changes = true
 
 
   focus: ->
     if Mercury.region != @
-      @element.focus()
-      selection = @selection().selection.collapseToStart()
+      setTimeout(10, => @element.focus())
+      try
+        @selection().selection.collapseToStart()
+      catch e
+        # intentially do nothing
+    else
+      setTimeout(10, => @element.focus())
 
     Mercury.trigger('region:focused', {region: @})
     Mercury.trigger('region:update', {region: @})
@@ -278,9 +286,12 @@ class @Mercury.Regions.Editable extends Mercury.Region
         @document.execCommand(action, false, options.value)
       catch error
         # mozilla: indenting when there's no br tag handles strangely
-        # todo: mozilla: trying to justify the first line of any contentEditable fails
+        # mozilla: trying to justify the first line of any contentEditable fails
         @element.prev().remove() if action == 'indent' && @element.prev() != sibling
 
+    # handle any broken images by replacing the source with an alert image
+    @element.find('img').one 'error', -> jQuery(@).attr({src: '/assets/mercury/missing-image.png', title: 'Image not found'})
+
 
   pushHistory: (keyCode) ->
     # when pressing return, delete or backspace it should push to the history
@@ -297,7 +308,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
       @history.push(@content(null, false, true))
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout((=> @history.push(@content(null, false, true))), waitTime * 1000)
+      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@content(null, false, true)))
     else
       # push to the history immediately
       @history.push(@content(null, false, true))
@@ -331,7 +342,6 @@ class @Mercury.Regions.Editable extends Mercury.Region
       event.preventDefault()
       return
     else
-      console.debug('testing')
       # get current selection & range
       selection = @selection()
       selection.placeMarker()
@@ -354,7 +364,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
   sanitize: (sanitizer) ->
     # always remove nested regions
-    sanitizer.find(".#{Mercury.config.regionClass}").remove()
+    sanitizer.find(".#{Mercury.config.regions.className}").remove()
 
     if Mercury.config.pasting.sanitize
       switch Mercury.config.pasting.sanitize
@@ -369,8 +379,8 @@ class @Mercury.Regions.Editable extends Mercury.Region
             for allowedTag, allowedAttributes of Mercury.config.pasting.whitelist
               if element.tagName.toLowerCase() == allowedTag.toLowerCase()
                 allowed = true
-                for attr, index in element.attributes
-                  jQuery(element).attr(attr.name, null) if attr && allowedAttributes.indexOf(attr.name) == -1
+                for attr in jQuery(element.attributes)
+                  jQuery(element).removeAttr(attr.name) unless attr.name in allowedAttributes
                 break
             jQuery(element).replaceWith(jQuery(element).contents()) unless allowed
           content = sanitizer.html()
@@ -426,6 +436,8 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     insertImage: (selection, options) -> @execCommand('insertHTML', {value: jQuery('<img/>', options.value)})
 
+    insertTable: (selection, options) -> @execCommand('insertHTML', {value: options.value})
+
     insertLink: (selection, options) ->
       anchor = jQuery("<#{options.value.tagName}>", @document).attr(options.value.attrs).html(options.value.content)
       selection.insertNode(anchor)

data/vendor/assets/javascripts/mercury/regions/markupable.js.coffee

@@ -4,6 +4,9 @@
 # nice if we could activate the bold button for instance.
 
 class @Mercury.Regions.Markupable extends Mercury.Region
+  @supported: document.getElementById
+  @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
+
   type = 'markupable'
 
   constructor: (@element, @window, @options = {}) ->
@@ -17,54 +20,46 @@ class @Mercury.Regions.Markupable extends Mercury.Region
     height = @element.height()
 
     value = @element.html().replace(/^\s+|\s+$/g, '').replace('>', '>')
+    @element.removeClass(Mercury.config.regions.className)
     @textarea = jQuery('<textarea>', @document).val(value)
     @textarea.attr('class', @element.attr('class')).addClass('mercury-textarea')
-    @textarea.css({border: 0, background: 'transparent', display: 'block', width: width, height: height, fontFamily: '"Courier New", Courier, monospace', fontSize: '14px'})
+    @textarea.css({border: 0, background: 'transparent', display: 'block', 'overflow-y': 'hidden', width: width, height: height, fontFamily: '"Courier New", Courier, monospace'})
+    @element.addClass(Mercury.config.regions.className)
     @element.empty().append(@textarea)
-    @element.removeClass(Mercury.config.regionClass)
 
     @previewElement = jQuery('<div>', @document)
     @element.append(@previewElement)
+    @container = @element
+    @container.data('region', @)
     @element = @textarea
     @resize()
 
 
-  focus: ->
-    @element.focus()
-
-
   bindEvents: ->
-    Mercury.bind 'mode', (event, options) =>
-      @togglePreview() if options.mode == 'preview'
+    Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
+    Mercury.on 'focus:frame', => @focus() if !@previewing && Mercury.region == @
 
-    Mercury.bind 'focus:frame', =>
-      return if @previewing
-      return unless Mercury.region == @
-      @focus()
-
-    Mercury.bind 'action', (event, options) =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'action', (event, options) =>
+      return if @previewing || Mercury.region != @
       @execCommand(options.action, options) if options.action
 
-    Mercury.bind 'unfocus:regions', (event) =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'unfocus:regions', =>
+      return if @previewing || Mercury.region != @
       @element.blur()
-      @element.removeClass('focus')
+      @container.removeClass('focus')
       Mercury.trigger('region:blurred', {region: @})
 
-    @element.bind 'dragenter', (event) =>
+    @element.on 'dragenter', (event) =>
       return if @previewing
       event.preventDefault()
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
-    @element.bind 'dragover', (event) =>
+    @element.on 'dragover', (event) =>
       return if @previewing
       event.preventDefault()
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
-    @element.bind 'drop', (event) =>
+    @element.on 'drop', (event) =>
       return if @previewing
 
       # handle dropping snippets
@@ -79,15 +74,14 @@ class @Mercury.Regions.Markupable extends Mercury.Region
         @focus()
         Mercury.uploader(event.originalEvent.dataTransfer.files[0])
 
-    @element.focus =>
+    @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
-      @element.addClass('focus')
+      @container.addClass('focus')
       Mercury.trigger('region:focused', {region: @})
 
-    @element.keydown (event) =>
+    @element.on 'keydown', (event) =>
       return if @previewing
-      Mercury.changes = true
       @resize()
       switch event.keyCode
         when 90 # undo / redo
@@ -133,17 +127,23 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
       @pushHistory(event.keyCode)
 
-    @element.keyup =>
+    @element.on 'keyup', =>
       return if @previewing
+      Mercury.changes = true
+      @resize()
       Mercury.trigger('region:update', {region: @})
 
-    @element.mouseup =>
+    @element.on 'mouseup', =>
       return if @previewing
       @focus()
       Mercury.trigger('region:focused', {region: @})
 
-    @previewElement.click (event) =>
-      $(event.target).closest('a').attr('target', '_top') if @previewing
+    @previewElement.on 'click', (event) =>
+      $(event.target).closest('a').attr('target', '_parent') if @previewing
+
+
+  focus: ->
+    @element.focus()
 
 
   content: (value = null, filterSnippets = true) ->
@@ -163,14 +163,19 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
   togglePreview: ->
     if @previewing
+      @previewing = false
+      @container.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
       @previewElement.hide()
       @element.show()
+      @focus() if Mercury.region == @
     else
+      @previewing = true
+      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
       value = @converter.makeHtml(@element.val())
       @previewElement.html(value)
       @previewElement.show()
       @element.hide()
-    super
+      Mercury.trigger('region:blurred', {region: @})
 
 
   execCommand: (action, options = {}) ->
@@ -195,7 +200,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
+      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
     else
       # push to the history immediately
       @history.push(@contentAndSelection())
@@ -208,9 +213,8 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
   resize: ->
-    # todo: get this working if possible, and it seems to be useful
-    # adjustedHeight = Math.max(@textarea.get(0).scrollHeight, @textarea.get(0).clientHeight)
-    # @textarea.height(adjustedHeight) if adjustedHeight >= @textarea.get(0).clientHeight
+    @element.css({height: @element.get(0).scrollHeight - 100})
+    @element.css({height: @element.get(0).scrollHeight});
 
 
   snippets: ->
@@ -231,6 +235,9 @@ class @Mercury.Regions.Markupable extends Mercury.Region
     insertImage: (selection, options) ->
       selection.replace('![add alt text](' + encodeURI(options.value.src) + ')', true)
 
+    insertTable: (selection, options) ->
+      selection.replace(options.value.replace(/<br>|<br\/>/ig, ''), false, true)
+
     insertLink: (selection, options) ->
       selection.replace("[#{options.value.content}](#{options.value.attrs.href} 'optional title')", true)