change to data-mercury="region-type" (and adjusted region.type style)

app/assets/javascripts/mercury.js

@@ -455,8 +455,8 @@ window.Mercury = {
       '[data-mercury] table { border: 1px dotted red; min-width: 6px; }' +
       '[data-mercury] th    { border: 1px dotted red; min-width: 6px; }' +
       '[data-mercury] td    { border: 1px dotted red; min-width: 6px; }' +
-      '.mercury-textarea    { border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: none; }' +
-      '.mercury-textarea:focus { outline: none; }'
+      '[data-mercury] .mercury-textarea       { border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: none; }' +
+      '[data-mercury] .mercury-textarea:focus { outline: none; }'
   },
 
   // ## Silent Mode

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

@@ -82,7 +82,7 @@ class @Mercury.PageEditor
     if region.data('region')
       region = region.data('region')
     else
-      type = (region.data('type') || Mercury.config.regions.determineType?(region) || 'unknown').titleize()
+      type = (region.attr(Mercury.config.regions.attribute) || Mercury.config.regions.determineType?(region) || 'unknown').titleize()
       throw Mercury.I18n('Region type is malformed, no data-type provided, or "%s" is unknown for the "%s" region.', type, region.attr('id') || 'unknown') if type == 'Unknown' || !Mercury.Regions[type]
       if !Mercury.Regions[type].supported
         Mercury.notify('Mercury.Regions.%s is unsupported in this client. Supported browsers are %s.', type, Mercury.Regions[type].supportedText)

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,7 +33,7 @@ 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})
@@ -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,7 +63,7 @@ class @Mercury.Region
   togglePreview: ->
     if @previewing
       @previewing = false
-      @element.attr(Mercury.config.regions.attribute, @type)
+      @element.attr(Mercury.config.regions.attribute, @type())
       @focus() if Mercury.region == @
     else
       @previewing = true
@@ -100,7 +100,7 @@ class @Mercury.Region
 
   serialize: ->
     return {
-      type: @type
+      type: @type()
       data: @dataAttributes()
       value: @content(null, true)
       snippets: @snippets()

app/assets/javascripts/mercury/regions/editable.js.coffee

@@ -2,11 +2,10 @@ 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'
+  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')
 
@@ -509,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

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

@@ -1,29 +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', =>
@@ -34,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()
@@ -48,59 +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)
+      @element.attr(Mercury.config.regions.attribute, type)
       @build()
     else
       @previewing = true
       @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)

app/assets/javascripts/mercury/regions/markupable.js.coffee

@@ -1,30 +1,29 @@
-# 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
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
   type = 'markupable'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'markupable'
     super
     @converter = new Showdown.converter()
 
 
   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.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)
+#      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
       value = @converter.makeHtml(@element.val())
       @previewElement.html(value)
       @previewElement.show()

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

app/assets/javascripts/mercury/regions/snippetable.js.coffee

@@ -1,11 +1,11 @@
 class @Mercury.Regions.Snippetable extends Mercury.Region
   @supported: document.getElementById
   @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
   type = 'snippetable'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'snippetable'
+    Mercury.log("building #{type}", @element, @options)
     super
     @makeSortable()
 
@@ -85,7 +85,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',

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

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')

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')

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')