mercury-rails 0.5.0 → 0.6.0

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

@@ -1,10 +1,7 @@
 class @Mercury.Region
-  type = 'region'
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'region' unless @type
-    Mercury.log("building #{@type}", @element, @options)
-
+    Mercury.log("building #{@type()}", @element, @options)
     @document = @window.document
     @name = @element.attr(Mercury.config.regions.identifier)
     @history = new Mercury.HistoryBuffer()
@@ -14,6 +11,9 @@ class @Mercury.Region
     @element.data('region', @)
 
 
+  type: -> 'unknown'
+
+
   build: ->
 
 
@@ -33,10 +33,10 @@ class @Mercury.Region
 
     @element.on 'mousemove', (event) =>
       return if @previewing || Mercury.region != @
-      snippet = jQuery(event.target).closest('.mercury-snippet')
+      snippet = jQuery(event.target).closest('[data-snippet]')
       if snippet.length
         @snippet = snippet
-        Mercury.trigger('show:toolbar', {type: 'snippet', snippet: @snippet})
+        Mercury.trigger('show:toolbar', {type: 'snippet', snippet: @snippet}) if @snippet.data('snippet')
 
     @element.on 'mouseout', =>
       return if @previewing
@@ -52,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 in container.find('.mercury-snippet')
+      if filterSnippets then for snippet in container.find('[data-snippet]')
         snippet = jQuery(snippet)
         snippet.attr({contenteditable: null, 'data-version': null})
         snippet.html("[#{snippet.data('snippet')}]")
@@ -63,11 +63,11 @@ class @Mercury.Region
   togglePreview: ->
     if @previewing
       @previewing = false
-      @element.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
+      @element.attr(Mercury.config.regions.attribute, @type())
       @focus() if Mercury.region == @
     else
       @previewing = true
-      @element.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
+      @element.removeAttr(Mercury.config.regions.attribute)
       Mercury.trigger('region:blurred', {region: @})
 
 
@@ -87,6 +87,7 @@ class @Mercury.Region
     snippets = {}
     for element in @element.find('[data-snippet]')
       snippet = Mercury.Snippet.find(jQuery(element).data('snippet'))
+      continue unless snippet
       snippet.setVersion(jQuery(element).data('version'))
       snippets[snippet.identity] = snippet.serialize()
     return snippets
@@ -100,7 +101,7 @@ class @Mercury.Region
 
   serialize: ->
     return {
-      type: @type
+      type: @type()
       data: @dataAttributes()
       value: @content(null, true)
       snippets: @snippets()

data/app/assets/javascripts/mercury/regions/{editable.js.coffee → full.coffee}

@@ -1,12 +1,11 @@
-class @Mercury.Regions.Editable extends Mercury.Region
+class @Mercury.Regions.Full 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'
+  type = 'full'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'editable'
     super
 
 
@@ -26,7 +25,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     @element.get(0).contentEditable = true
 
     # make all snippets not editable, and set their versions to 1
-    for element in @element.find('.mercury-snippet')
+    for element in @element.find('[data-snippet]')
       element.contentEditable = false
       jQuery(element).attr('data-version', '1')
 
@@ -47,7 +46,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     Mercury.on 'region:update', =>
       return if @previewing || Mercury.region != @
-      setTimeout(1, => @selection().forceSelection(@element.get(0)))
+      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
       currentElement = @currentElement()
       if currentElement.length
         # setup the table editor if we're inside a table
@@ -71,14 +70,14 @@ class @Mercury.Regions.Editable extends Mercury.Region
       event.originalEvent.dataTransfer.dropEffect = 'copy'
       if jQuery.browser.webkit
         clearTimeout(@dropTimeout)
-        @dropTimeout = setTimeout(10, => @element.trigger('possible:drop'))
+        @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 10)
 
     @element.on 'drop', (event) =>
       return if @previewing
 
       # handle dropping snippets
       clearTimeout(@dropTimeout)
-      @dropTimeout = setTimeout(1, => @element.trigger('possible:drop'))
+      @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 1)
 
       # handle any files that were dropped
       return unless event.originalEvent.dataTransfer.files.length
@@ -115,7 +114,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
-      setTimeout(1, => @selection().forceSelection(@element.get(0)))
+      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
       Mercury.trigger('region:focused', {region: @})
 
     @element.on 'blur', =>
@@ -194,13 +193,13 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
   focus: ->
     if Mercury.region != @
-      setTimeout(10, => @element.focus())
+      setTimeout((=> @element.focus()), 10)
       try
         @selection().selection.collapseToStart()
       catch e
         # intentially do nothing
     else
-      setTimeout(10, => @element.focus())
+      setTimeout((=> @element.focus()), 10)
 
     Mercury.trigger('region:focused', {region: @})
     Mercury.trigger('region:update', {region: @})
@@ -277,7 +276,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     super
 
     # use a custom handler if there's one, otherwise use execCommand
-    if handler = Mercury.config.behaviors[action] || Mercury.Regions.Editable.actions[action]
+    if handler = Mercury.config.behaviors[action] || Mercury.Regions.Full.actions[action]
       handler.call(@, @selection(), options)
     else
       sibling = @element.get(0).previousSibling if action == 'indent'
@@ -308,7 +307,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(waitTime * 1000, => @history.push(@content(null, false, true)))
+      @historyTimeout = setTimeout((=> @history.push(@content(null, false, true))), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@content(null, false, true))
@@ -317,7 +316,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
 
   selection: ->
-    return new Mercury.Regions.Editable.Selection(@window.getSelection(), @document)
+    return new Mercury.Regions.Full.Selection(@window.getSelection(), @document)
 
 
   path: ->
@@ -349,7 +348,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
       sanitizer = jQuery('#mercury_sanitizer', @document).focus()
 
       # set 1ms timeout to allow paste event to complete
-      setTimeout 1, =>
+      setTimeout =>
         # sanitize the content
         content = @sanitize(sanitizer)
 
@@ -360,11 +359,12 @@ class @Mercury.Regions.Editable extends Mercury.Region
         # paste sanitized content
         @element.focus()
         @execCommand('insertHTML', {value: content})
+      , 1
 
 
   sanitize: (sanitizer) ->
     # always remove nested regions
-    sanitizer.find(".#{Mercury.config.regions.className}").remove()
+    sanitizer.find("[#{Mercury.config.regions.attribute}]").remove()
 
     if Mercury.config.pasting.sanitize
       switch Mercury.config.pasting.sanitize
@@ -466,7 +466,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
 
 # Helper class for managing selection and getting information from it
-class Mercury.Regions.Editable.Selection
+class Mercury.Regions.Full.Selection
 
   constructor: (@selection, @context) ->
     return unless @selection.rangeCount >= 1
@@ -508,7 +508,7 @@ class Mercury.Regions.Editable.Selection
     range = @context.createRange()
 
     if @range
-      if @commonAncestor(true).closest('.mercury-snippet').length
+      if @commonAncestor(true).closest('[data-snippet]').length
         lastChild = @context.createTextNode("\x00")
         element.appendChild(lastChild)
     else

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

@@ -1,30 +1,16 @@
-# The image region is designed for a single, stand-along image. It
-# allows drag & drop uploading of a replacement right into the page,
-# but no editing of other DOM attributes at this time.
-#
+# The image region is designed for a single, stand-along image and allows drag & drop uploading of a replacement right
+# into the page, but provides no editing of other DOM attributes at this time.
 class @Mercury.Regions.Image extends Mercury.Region
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
   type = 'image'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'image'
     super
 
-  build: ->
-    # We've going to drive all the interaction with events
-    # in bindEvent. Here we just highlight the elements to it
-    # appears "changeable" to the user.
-    @element.
-      addClass( Mercury.config.regions.className ).
-      removeClass( "#{Mercury.config.regions.className}-preview" )
 
   bindEvents: ->
-    # This is standard stuff, take from the region parent
-    # class. We copy it instead of super() to avoid the snippet
-    # code.
-    # 
     Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
 
     Mercury.on 'focus:frame', =>
@@ -35,8 +21,6 @@ class @Mercury.Regions.Image extends Mercury.Region
       return if @previewing || Mercury.region != @
       @execCommand(options.action, options) if options.action
 
-    # The meat. D&D uploading similar to the editable class.
-    #
     @element.on 'dragenter', (event) =>
       return if @previewing
       event.preventDefault()
@@ -49,60 +33,55 @@ class @Mercury.Regions.Image extends Mercury.Region
 
     @element.on 'drop', (event) =>
       return if @previewing
-      # handle any files that were dropped
       if event.originalEvent.dataTransfer.files.length
         event.preventDefault()
-        # Mercury.uploader will call a Mercury action of insertImage
-        # as a callback. If this region is the currently focused one,
-        # then we process the callback. Focus, then fire the upload.
-        #
         @focus()
         Mercury.uploader(event.originalEvent.dataTransfer.files[0])
 
     @element.on 'focus', =>
       @focus()
 
+
   togglePreview: ->
     if @previewing
       @previewing = false
+      @element.attr(Mercury.config.regions.attribute, type)
       @build()
     else
       @previewing = true
-      @element.
-        addClass( "#{Mercury.config.regions.className}-preview" ).
-        removeClass( Mercury.config.regions.className )
+      @element.removeAttr(Mercury.config.regions.attribute)
       Mercury.trigger('region:blurred', {region: @})
   
+
   focus: ->
     return if @previewing
     Mercury.region = @
     Mercury.trigger('region:focused', {region: @})
     Mercury.trigger('region:update', {region: @})
 
+
   execCommand: (action, options = {}) ->
-    # Our history is pushed in the parent.
-    #
     super
     handler.call(@, options) if handler = Mercury.Regions.Image.actions[action]
 
+
   pushHistory: () ->
-    # Store the current image src
-    #
     @history.push(src: @element.attr('src'))
 
+
   updateSrc: (src) ->
     @element.attr('src', src)
 
+
   serialize: ->
     return {
-      type: @type
+      type: type
       data: @dataAttributes()
       attributes:
         src: @element.attr('src')
     }
 
-  # Actions. These are all fired by execCommand.
-  #
+
   @actions: {
 
     undo: -> if prev = @history.undo() then @updateSrc(prev.src)

data/app/assets/javascripts/mercury/regions/{markupable.js.coffee → markdown.coffee}

@@ -1,16 +1,10 @@
-# todo:
-# context for the toolbar buttons and groups needs to change so we can do the following:
-# how to handle context for buttons?  if the cursor is within a bold area (**bo|ld**), or selecting it -- it would be
-# nice if we could activate the bold button for instance.
-
-class @Mercury.Regions.Markupable extends Mercury.Region
+class @Mercury.Regions.Markdown extends Mercury.Region
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
-  type = 'markupable'
+  type = 'markdown'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'markupable'
     super
     @converter = new Showdown.converter()
 
@@ -18,13 +12,18 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   build: ->
     width = '100%'
     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', 'overflow-y': 'hidden', width: width, height: height, fontFamily: '"Courier New", Courier, monospace'})
-    @element.addClass(Mercury.config.regions.className)
+
+    @textarea = jQuery('<textarea>', @document).val(value).addClass('mercury-textarea')
+    @textarea.css
+      border: 0
+      background: 'transparent'
+      display: 'block'
+      'overflow-y': 'hidden'
+      width: width
+      height: height
+      fontFamily: '"Courier New", Courier, monospace'
+
     @element.empty().append(@textarea)
 
     @previewElement = jQuery('<div>', @document)
@@ -164,13 +163,13 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   togglePreview: ->
     if @previewing
       @previewing = false
-      @container.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
+      @container.attr(Mercury.config.regions.attribute, type)
       @previewElement.hide()
       @element.show()
       @focus() if Mercury.region == @
     else
       @previewing = true
-      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
+      @container.removeAttr(Mercury.config.regions.attribute)
       value = @converter.makeHtml(@element.val())
       @previewElement.html(value)
       @previewElement.show()
@@ -181,7 +180,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   execCommand: (action, options = {}) ->
     super
 
-    handler.call(@, @selection(), options) if handler = Mercury.Regions.Markupable.actions[action]
+    handler.call(@, @selection(), options) if handler = Mercury.Regions.Markdown.actions[action]
     @resize()
 
 
@@ -200,7 +199,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
+      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@contentAndSelection())
@@ -209,7 +208,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
   selection: ->
-    return new Mercury.Regions.Markupable.Selection(@element)
+    return new Mercury.Regions.Markdown.Selection(@element)
 
 
   resize: ->
@@ -261,7 +260,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       }
       selection.unWrapLine("#{wrapper[0]}", "#{wrapper[1]}") for wrapperName, wrapper of wrappers
       if options.value == 'blockquote'
-        Mercury.Regions.Markupable.actions.indent.call(@, selection, options)
+        Mercury.Regions.Markdown.actions.indent.call(@, selection, options)
         return
       selection.wrapLine("#{wrappers[options.value][0]}", "#{wrappers[options.value][1]}")
 
@@ -289,7 +288,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
 # Helper class for managing selection and getting information from it
-class Mercury.Regions.Markupable.Selection
+class Mercury.Regions.Markdown.Selection
 
   constructor: (@element) ->
     @el = @element.get(0)

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

@@ -1,16 +1,11 @@
-# todo:
-# context for the toolbar buttons and groups needs to change so we can do the following:
-# how to handle context for buttons?  if the cursor is within a bold area (**bo|ld**), or selecting it -- it would be
-# nice if we could activate the bold button for instance.
-
 class @Mercury.Regions.Simple extends Mercury.Region
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
   type = 'simple'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'simple'
+    Mercury.log("building #{type}", @element, @options)
     super
 
 
@@ -23,9 +18,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       height = @element.height() # 'auto'
 
     value = @element.text()
-    @element.removeClass(Mercury.config.regions.className)
-    @textarea = jQuery('<textarea>', @document).val(value)
-    @textarea.attr('class', @element.attr('class')).addClass('mercury-textarea')
+    @textarea = jQuery('<textarea>', @document).val(value).addClass('mercury-textarea')
     @textarea.css
       border: 0
       background: 'transparent'
@@ -44,7 +37,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       display: 'inherit'
       lineHeight: 'inherit'
       textAlign: 'inherit'
-    @element.addClass(Mercury.config.regions.className)
+
     @element.empty().append(@textarea)
 
     @container = @element
@@ -67,31 +60,10 @@ class @Mercury.Regions.Simple extends Mercury.Region
       @container.removeClass('focus')
       Mercury.trigger('region:blurred', {region: @})
 
-    @element.on 'dragenter', (event) =>
-      return if @previewing
-      event.preventDefault()
-      event.originalEvent.dataTransfer.dropEffect = 'copy'
-
-    @element.on 'dragover', (event) =>
-      return if @previewing
-      event.preventDefault()
-      event.originalEvent.dataTransfer.dropEffect = 'copy'
+    @bindElementEvents()
 
-    @element.on 'drop', (event) =>
-      return if @previewing
-
-      # handle dropping snippets
-      if Mercury.snippet
-        event.preventDefault()
-        @focus()
-        Mercury.Snippet.displayOptionsFor(Mercury.snippet)
-
-      # handle any files that were dropped
-      if event.originalEvent.dataTransfer.files.length
-        event.preventDefault()
-        @focus()
-        Mercury.uploader(event.originalEvent.dataTransfer.files[0])
 
+  bindElementEvents: ->
     @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
@@ -188,15 +160,14 @@ class @Mercury.Regions.Simple extends Mercury.Region
     if @previewing
       @previewing = false
       @element = @container
+      @container.attr(Mercury.config.regions.attribute, type)
       @build()
+      @bindElementEvents()
       @focus() if Mercury.region == @
-      # @container.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
-      # @previewElement.hide()
-      # @element.show()
     else
       @previewing = true
-      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
       value = jQuery('<div></div>').text(@element.val()).html()
+      @container.removeAttr(Mercury.config.regions.attribute)
       @container.html(value)
       Mercury.trigger('region:blurred', {region: @})
 
@@ -223,7 +194,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
+      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@contentAndSelection())