mercury-rails 0.5.0 → 0.6.0

data/app/assets/javascripts/mercury.js

@@ -2,26 +2,6 @@
  * Mercury Editor is a CoffeeScript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
  * found at https://github.com/jejacks0n/mercury
  *
- * Supported browsers:
- *   - Firefox 4+
- *   - Chrome 10+
- *   - Safari 5+
- *
- * Copyright (c) 2011 Jeremy Jackson
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
- * persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
- * Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
- * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
- * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
  *= require_self
  *
  * Minimum jQuery requirements are 1.7
@@ -31,11 +11,7 @@
  * using :remote => true within the contents rendered in them.
  * require jquery_ujs
  *
- * If you want to override Mercury functionality, you can do so in a custom file that binds to the mercury:loaded event,
- * or do so at the end of the current file (mercury.js).  There's an example that will help you get started.
- * require mercury_overrides
- *
- * Add all requires for the support libraries that integrate nicely with Mercury Editor.
+ * Add any requires for the support libraries that integrate nicely with Mercury Editor.
  * require mercury/support/history
  *
  * Require Mercury Editor itself.
@@ -47,6 +23,9 @@
  *
  * Add all requires for plugins that extend or change the behavior of Mercury Editor.
  * require mercury/plugins/save_as_xml/plugin.js
+ *
+ * Require any files you want to use that either extend, or change the default Mercury behavior.
+ * require mercury_overrides
  */
 window.Mercury = {
 
@@ -58,16 +37,16 @@ window.Mercury = {
     // behaviors.  Any top level object put here will create a new toolbar.  Buttons are simply nested inside the
     // toolbars, along with button groups.
     //
-    // Some toolbars are custom (the snippetable toolbar for instance), and to denote that use _custom: true.  You can
-    // then build the toolbar yourself with it's own behavior.
+    // Some toolbars are custom (the snippets toolbar for instance), and to denote that use _custom: true.  You can then
+    // build the toolbar yourself with it's own behavior.
     //
     // Buttons can be grouped, and a button group is simply a way to wrap buttons for styling -- they can also handle
-    // enabling or disabling all the buttons within it by using a context.  The table button group is a good example
-    // of this.
+    // enabling or disabling all the buttons within it by using a context.  The table button group is a good example of
+    // this.
     //
-    // It's important to note that each of the button names (keys), in each toolbar object must be unique, regardless
-    // of if it's in a button group, or nested, etc.  This is because styling is applied to them by name, and because
-    // their name is used in the event that's fired when you click on them.
+    // It's important to note that each of the button names (keys), in each toolbar object must be unique, regardless of
+    // if it's in a button group, or nested, etc.  This is because styling is applied to them by name, and because their
+    // name is used in the event that's fired when you click on them.
     //
     // Button format: `[label, description, {type: action, type: action, etc}]`
     //
@@ -97,8 +76,8 @@ window.Mercury = {
     //   1. a string, denoting the name of the mode
     //   note: it's assumed that when a specific mode is turned on, all other modes will be turned off, which happens
     //         automatically, thus putting the editor into a specific "state"
-    // - regions:   allows buttons to be enabled/disabled based on what region type has focus, expects the action to be:
-    //   1. an array of region types (eg. ['editable', 'markupable'])
+    // - regions:   allows buttons to be enabled/disabled based on what region type has focus, expects:
+    //   1. an array of region types (eg. ['full', 'markdown'])
     // - preload:   allows some dialog views to be loaded when the button is created instead of on first open, expects:
     //   1. a boolean true / false
     //   note: this is only used by panels, selects, and palettes
@@ -122,10 +101,10 @@ window.Mercury = {
           redo:                ['Redo', 'Redo your last action'],
           sep:                 ' '
           },
-        insertLink:            ['Link', 'Insert Link', { modal: '/mercury/modals/link.html', regions: ['editable', 'markupable'] }],
-        insertMedia:           ['Media', 'Insert Media (images and videos)', { modal: '/mercury/modals/media.html', regions: ['editable', 'markupable'] }],
-        insertTable:           ['Table', 'Insert Table', { modal: '/mercury/modals/table.html', regions: ['editable', 'markupable'] }],
-        insertCharacter:       ['Character', 'Special Characters', { modal: '/mercury/modals/character.html', regions: ['editable', 'markupable'] }],
+        insertLink:            ['Link', 'Insert Link', { modal: '/mercury/modals/link.html', regions: ['full', 'markdown'] }],
+        insertMedia:           ['Media', 'Insert Media (images and videos)', { modal: '/mercury/modals/media.html', regions: ['full', 'markdown'] }],
+        insertTable:           ['Table', 'Insert Table', { modal: '/mercury/modals/table.html', regions: ['full', 'markdown'] }],
+        insertCharacter:       ['Character', 'Special Characters', { modal: '/mercury/modals/character.html', regions: ['full', 'markdown'] }],
         snippetPanel:          ['Snippet', 'Snippet Panel', { panel: '/mercury/panels/snippets.html' }],
         sep2:                  ' ',
         historyPanel:          ['History', 'Page Version History', { panel: '/mercury/panels/history.html' }],
@@ -134,7 +113,7 @@ window.Mercury = {
         },
 
       editable: {
-        _regions:              ['editable', 'markupable'],
+        _regions:              ['full', 'markdown'],
         predefined:            {
           style:               ['Style', null, { select: '/mercury/selects/style.html', preload: true }],
           sep1:                ' ',
@@ -142,17 +121,17 @@ window.Mercury = {
           sep2:                '-'
           },
         colors:                {
-          backColor:           ['Background Color', null, { palette: '/mercury/palettes/backcolor.html', context: true, preload: true, regions: ['editable'] }],
+          backColor:           ['Background Color', null, { palette: '/mercury/palettes/backcolor.html', context: true, preload: true, regions: ['full'] }],
           sep1:                ' ',
-          foreColor:           ['Text Color', null, { palette: '/mercury/palettes/forecolor.html', context: true, preload: true, regions: ['editable'] }],
+          foreColor:           ['Text Color', null, { palette: '/mercury/palettes/forecolor.html', context: true, preload: true, regions: ['full'] }],
           sep2:                '-'
           },
         decoration:            {
           bold:                ['Bold', null, { context: true }],
           italic:              ['Italicize', null, { context: true }],
-          overline:            ['Overline', null, { context: true, regions: ['editable'] }],
-          strikethrough:       ['Strikethrough', null, { context: true, regions: ['editable'] }],
-          underline:           ['Underline', null, { context: true, regions: ['editable'] }],
+          overline:            ['Overline', null, { context: true, regions: ['full'] }],
+          strikethrough:       ['Strikethrough', null, { context: true, regions: ['full'] }],
+          underline:           ['Underline', null, { context: true, regions: ['full'] }],
           sep:                 '-'
           },
         script:                {
@@ -161,10 +140,10 @@ window.Mercury = {
           sep: '-'
           },
         justify:               {
-          justifyLeft:         ['Align Left', null, { context: true, regions: ['editable'] }],
-          justifyCenter:       ['Center', null, { context: true, regions: ['editable'] }],
-          justifyRight:        ['Align Right', null, { context: true, regions: ['editable'] }],
-          justifyFull:         ['Justify Full', null, { context: true, regions: ['editable'] }],
+          justifyLeft:         ['Align Left', null, { context: true, regions: ['full'] }],
+          justifyCenter:       ['Center', null, { context: true, regions: ['full'] }],
+          justifyRight:        ['Align Right', null, { context: true, regions: ['full'] }],
+          justifyFull:         ['Justify Full', null, { context: true, regions: ['full'] }],
           sep:                 '-'
           },
         list:                  {
@@ -179,12 +158,12 @@ window.Mercury = {
           },
         table:                 {
           _context:            true,
-          insertRowBefore:     ['Insert Table Row', 'Insert a table row before the cursor', { regions: ['editable'] }],
-          insertRowAfter:      ['Insert Table Row', 'Insert a table row after the cursor', { regions: ['editable'] }],
-          deleteRow:           ['Delete Table Row', 'Delete this table row', { regions: ['editable'] }],
-          insertColumnBefore:  ['Insert Table Column', 'Insert a table column before the cursor', { regions: ['editable'] }],
-          insertColumnAfter:   ['Insert Table Column', 'Insert a table column after the cursor', { regions: ['editable'] }],
-          deleteColumn:        ['Delete Table Column', 'Delete this table column', { regions: ['editable'] }],
+          insertRowBefore:     ['Insert Table Row', 'Insert a table row before the cursor', { regions: ['full'] }],
+          insertRowAfter:      ['Insert Table Row', 'Insert a table row after the cursor', { regions: ['full'] }],
+          deleteRow:           ['Delete Table Row', 'Delete this table row', { regions: ['full'] }],
+          insertColumnBefore:  ['Insert Table Column', 'Insert a table column before the cursor', { regions: ['full'] }],
+          insertColumnAfter:   ['Insert Table Column', 'Insert a table column after the cursor', { regions: ['full'] }],
+          deleteColumn:        ['Delete Table Column', 'Delete this table column', { regions: ['full'] }],
           sep1:                ' ',
           increaseColspan:     ['Increase Cell Columns', 'Increase the cells colspan'],
           decreaseColspan:     ['Decrease Cell Columns', 'Decrease the cells colspan and add a new cell'],
@@ -197,15 +176,15 @@ window.Mercury = {
           sep1:                '-'
           },
         formatting:            {
-          removeFormatting:    ['Remove Formatting', 'Remove formatting for the selection', { regions: ['editable'] }],
+          removeFormatting:    ['Remove Formatting', 'Remove formatting for the selection', { regions: ['full'] }],
           sep2:                ' '
           },
         editors:               {
-          htmlEditor:          ['Edit HTML', 'Edit the HTML content', { regions: ['editable'] }]
+          htmlEditor:          ['Edit HTML', 'Edit the HTML content', { regions: ['full'] }]
           }
         },
 
-      snippetable: {
+      snippets: {
         _custom:               true,
         actions:               {
           editSnippet:         ['Edit Snippet Settings'],
@@ -220,28 +199,27 @@ window.Mercury = {
     //
     // You can customize some aspects of how regions are found, identified, and saved.
     //
-    // className: Mercury identifies editable regions by a className.  This classname has to be added in your HTML in
-    // advance, and is the only real code/naming exposed in the implementation of Mercury.  To allow this to be as
-    // configurable as possible, you can set the name of the class.  When switching to preview mode, this configuration
-    // is also used to generate a class to indicate that Mercury is in preview mode by appending it with '-preview' (so
-    // by default it would be mercury-region-preview)
+    // attribute: Mercury identifies editable regions by a data-mercury attribute.  This attribute has to be added in
+    // your HTML in advance, and is the only real code/naming exposed in the implementation of Mercury.  To allow this
+    // to be as configurable as possible, you can set the name of this attribute.  If you change this, you should adjust
+    // the injected styles as well.
     //
     // identifier: This is used as a unique identifier for any given region (and thus should be unique to the page).
     // By default this is the id attribute but can be changed to a data attribute should you want to use something
     // custom instead.
     //
-    // determineType: This function is called after checking the data-type attribute for the correct field type. Use
-    // it if you want to programatically set the type based on inspection of the region.
-    //
     // dataAttributes: The dataAttributes is an array of data attributes that will be serialized and returned to the
     // server upon saving.  These attributes, when applied to a Mercury region element, will be automatically serialized
     // and submitted with the AJAX request sent when a page is saved.  These are expected to be HTML5 data attributes,
     // and 'data-' will automatically be prepended to each item in this directive. (ex. ['scope', 'version'])
+    //
+    // determineType: This function is called after checking the data-type attribute for the correct field type. Use
+    // it if you want to dynamically set the type based on inspection of the region.
     regions: {
-      className: 'mercury-region',
+      attribute: 'data-mercury',
       identifier: 'id',
-      // determineType: function(region){},
       dataAttributes: []
+      // determineType: function(region){},
       },
 
 
@@ -329,7 +307,7 @@ window.Mercury = {
     // If you want to add behaviors to specific region types, you can mix them into the actions property of any region
     // type.
     //
-    //     Mercury.Regions.Editable.actions.htmlEditor = function() {}
+    //     Mercury.Regions.Full.actions.htmlEditor = function() {}
     //
     // You can see how the behavior matches up directly with the button names.  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.
@@ -370,12 +348,14 @@ window.Mercury = {
     csrfSelector: 'meta[name="csrf-token"]',
     csrfHeader: 'X-CSRF-Token',
 
+
     // ## Editor URLs
     //
     // When loading a given page, you may want to tweak this regex.  It's to allow the url to differ from the page
     // you're editing, and the url at which you access it.
     editorUrlRegEx: /([http|https]:\/\/.[^\/]*)\/editor\/?(.*)/i,
 
+
     // ## Hijacking Links & Forms
     //
     // Mercury will hijack links and forms that don't have a target set, or the target is set to _self and will set it
@@ -448,15 +428,16 @@ window.Mercury = {
     // Mercury tries to stay as much out of your code as possible, but because regions appear within your document we
     // need to include a few styles to indicate regions, as well as the different states of them (eg. focused).  These
     // styles are injected into your document, and as simple as they might be, you may want to change them.
-    //
-    // {{regionClass}} will be automatically replaced with whatever you have set in the regions.class config directive.
     injectedStyles: '' +
-      '.{{regionClass}} { min-height: 10px; outline: 1px dotted #09F } ' +
-      '.{{regionClass}}:focus, .{{regionClass}}.focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }' +
-      '.{{regionClass}}:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }' +
-      '.{{regionClass}} table, .{{regionClass}} td, .{{regionClass}} th { 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]       { min-height: 10px; outline: 1px dotted #09F } ' +
+      '[data-mercury]:focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }' +
+      '[data-mercury].focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }' +
+      '[data-mercury]:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }' +
+      '[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; }' +
+      '[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; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }'
   },
 
   // ## Silent Mode
@@ -467,13 +448,6 @@ window.Mercury = {
   // ## Debug Mode
   //
   // Turning debug mode on will log events and other various things (using console.debug if available).
-  debug: false,
-
-  // The onload method is provided as a callback in case you want to override default Mercury Editor behavior.  It will
-  // be called directly after the Mercury scripts have loaded, but before anything has been initialized.  It's a good
-  // place to add or change functionality.
-  onload: function() {
-    //Mercury.PageEditor.prototype.iframeSrc = function(url) { return '/testing'; }
-  },
+  debug: false
 
 };

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

@@ -146,7 +146,7 @@ jQuery.extend Mercury.lightview,
     return unless @url
     @element.addClass('loading')
     if Mercury.preloadedViews[@url]
-      setTimeout(10, => @loadContent(Mercury.preloadedViews[@url]))
+      setTimeout((=> @loadContent(Mercury.preloadedViews[@url])), 10)
     else
       jQuery.ajax @url, {
         headers: Mercury.ajaxHeaders()

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

@@ -34,7 +34,7 @@
 #
 @Mercury ||= {}
 jQuery.extend @Mercury,
-  version: '0.5.0'
+  version: '0.6.0'
 
   # Mercury object namespaces
   Regions: Mercury.Regions || {}

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

@@ -137,7 +137,7 @@ jQuery.extend Mercury.modal,
     return unless @url
     @element.addClass('loading')
     if Mercury.preloadedViews[@url]
-      setTimeout(10, => @loadContent(Mercury.preloadedViews[@url]))
+      setTimeout((=> @loadContent(Mercury.preloadedViews[@url])), 10)
     else
       jQuery.ajax @url, {
         headers: Mercury.ajaxHeaders()

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

@@ -19,7 +19,7 @@
     if selection.is && image = selection.is('img')
       @element.find('#media_image_url').val(image.attr('src'))
       @element.find('#media_image_alignment').val(image.attr('align'))
-      setTimeout 300, => @element.find('#media_image_url').focus()
+      setTimeout((=> @element.find('#media_image_url').focus()), 300)
 
     # if we're editing an iframe (assume it's a video for now)
     if selection.is && iframe = selection.is('iframe')
@@ -29,13 +29,13 @@
         @element.find('#media_youtube_url').val("http://youtu.be/#{src.match(/\/embed\/(\w+)/)[1]}")
         @element.find('#media_youtube_width').val(iframe.width())
         @element.find('#media_youtube_height').val(iframe.height())
-        setTimeout 300, => @element.find('#media_youtube_url').focus()
+        setTimeout((=> @element.find('#media_youtube_url').focus()), 300)
       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.width())
         @element.find('#media_vimeo_height').val(iframe.height())
-        setTimeout 300, => @element.find('#media_vimeo_url').focus()
+        setTimeout((=> @element.find('#media_vimeo_url').focus()), 300)
 
 
   # build the image or youtube embed on form submission
@@ -51,14 +51,16 @@
 
       when 'youtube_url'
         url = @element.find('#media_youtube_url').val()
-        unless /^http:\/\/youtu.be\//.test(url)
+        unless /^https?:\/\/youtu.be\//.test(url)
           Mercury.notify('Error: The provided youtube share url was invalid.')
           return
-        code = url.replace('http://youtu.be/', '')
+        code = url.replace(/https?:\/\/youtu.be\//, '')
+        protocol = 'http'
+        protocol = 'https' if /^https:/.test(url)
         value = jQuery('<iframe>', {
           width: @element.find('#media_youtube_width').val() || 560,
           height: @element.find('#media_youtube_height').val() || 349,
-          src: "http://www.youtube.com/embed/#{code}?wmode=transparent",
+          src: "#{protocol}://www.youtube.com/embed/#{code}?wmode=transparent",
           frameborder: 0,
           allowfullscreen: 'true'
         })
@@ -66,14 +68,16 @@
 
       when 'vimeo_url'
         url = @element.find('#media_vimeo_url').val()
-        unless /^http:\/\/vimeo.com\//.test(url)
+        unless /^https?:\/\/vimeo.com\//.test(url)
           Mercury.notify('Error: The provided vimeo url was invalid.')
           return
-        code = url.replace('http://vimeo.com/', '')
+        code = url.replace(/^https?:\/\/vimeo.com\//, '')
+        protocol = 'http'
+        protocol = 'https' if /^https:/.test(url)
         value = jQuery('<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&byline=1&portrait=0&color=ffffff",
+          src: "#{protocol}://player.vimeo.com/video/#{code}?title=1&byline=1&portrait=0&color=ffffff",
           frameborder: 0
         })
         Mercury.trigger('action', {action: 'insertHTML', value: value})

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

@@ -47,9 +47,3 @@ Number::toBytes = ->
     bytes /= 1024
     i += 1
   return if i then "#{bytes.toFixed(2)}#{['', ' kb', ' Mb', ' Gb', ' Tb', ' Pb', ' Eb'][i]}" else "#{bytes} bytes"
-
-
-# make setTimeout not suck for coffeescript
-window.originalSetTimeout = window.setTimeout
-window.setTimeout = (arg1, arg2) ->
-  if typeof(arg1) == 'number' then window.originalSetTimeout(arg2, arg1) else window.originalSetTimeout(arg1, arg2)

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

@@ -8,9 +8,9 @@ class @Mercury.PageEditor
   constructor: (@saveUrl = null, @options = {}) ->
     throw Mercury.I18n('Mercury.PageEditor can only be instantiated once.') if window.mercuryInstance
 
-    @options.visible = true unless (@options.visible == false || @options.visible == 'no')
-    @options.saveDataType = 'json' unless (@options.saveDataType == false || @options.saveDataType)
+    @options.visible = true unless (@options.visible == false || @options.visible == 'false')
     @visible = @options.visible
+    @options.saveDataType = 'json' unless (@options.saveDataType == false || @options.saveDataType)
 
     window.mercuryInstance = @
     @regions = []
@@ -32,6 +32,7 @@ class @Mercury.PageEditor
     @iframe.one 'load', => @bindEvents()
     @loadIframeSrc(null)
 
+
   initializeFrame: ->
     try
       return if @iframe.data('loaded')
@@ -42,8 +43,7 @@ class @Mercury.PageEditor
       @document = jQuery(@iframe.get(0).contentWindow.document)
 
       # inject styles for document to be able to highlight regions and other tools
-      stylesToInject = Mercury.config.injectedStyles.replace(/{{regionClass}}/g, Mercury.config.regions.className)
-      jQuery("<style mercury-styles=\"true\">").html(stylesToInject).appendTo(@document.find('head'))
+      jQuery("<style mercury-styles=\"true\">").html(Mercury.config.injectedStyles).appendTo(@document.find('head'))
 
       # jquery: make jQuery evaluate scripts within the context of the iframe window
       iframeWindow = @iframe.get(0).contentWindow
@@ -60,7 +60,7 @@ class @Mercury.PageEditor
 
       # trigger ready events
       Mercury.trigger('ready')
-      jQuery(iframeWindow).trigger('mercury:ready')
+      iframeWindow.jQuery(iframeWindow).trigger('mercury:ready') if iframeWindow.jQuery
       iframeWindow.Event.fire(iframeWindow, 'mercury:ready') if iframeWindow.Event && iframeWindow.Event.fire
       iframeWindow.onMercuryReady() if iframeWindow.onMercuryReady
 
@@ -71,8 +71,8 @@ class @Mercury.PageEditor
 
   initializeRegions: ->
     @regions = []
-    @buildRegion(jQuery(region)) for region in jQuery(".#{Mercury.config.regions.className}", @document)
-    return unless @options.visible
+    @buildRegion(jQuery(region)) for region in jQuery("[#{Mercury.config.regions.attribute}]", @document)
+    return unless @visible
     for region in @regions
       if region.focus
         region.focus()
@@ -83,11 +83,7 @@ class @Mercury.PageEditor
     if region.data('region')
       region = region.data('region')
     else
-      type = (
-        region.data('type') ||
-        ( jQuery.type(Mercury.config.regions.determineType) == 'function' && 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)
@@ -105,14 +101,14 @@ class @Mercury.PageEditor
     @snippetToolbar = new Mercury.SnippetToolbar(@document)
 
     @hijackLinksAndForms()
-    Mercury.trigger('mode', {mode: 'preview'}) unless @options.visible
+    Mercury.trigger('mode', {mode: 'preview'}) unless @visible
 
 
   bindDocumentEvents: ->
     @document.on 'mousedown', (event) ->
       Mercury.trigger('hide:dialogs')
       if Mercury.region
-        Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest(".#{Mercury.config.regions.className}").get(0) == Mercury.region.element.get(0)
+        Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest("[#{Mercury.config.regions.attribute}]").get(0) == Mercury.region.element.get(0)
 
     jQuery(@document).bind 'keydown', (event) =>
       return unless event.ctrlKey || event.metaKey
@@ -122,9 +118,9 @@ class @Mercury.PageEditor
 
 
   bindEvents: ->
-    Mercury.on 'initialize:frame', => setTimeout(100, @initializeFrame)
+    Mercury.on 'initialize:frame', => setTimeout(@initializeFrame, 100)
     Mercury.on 'focus:frame', => @iframe.focus()
-    Mercury.on 'focus:window', => setTimeout(10, => @focusableElement.focus())
+    Mercury.on 'focus:window', => setTimeout((=> @focusableElement.focus()), 10)
     Mercury.on 'toggle:interface', => @toggleInterface()
     Mercury.on 'reinitialize', => @initializeRegions()
     Mercury.on 'mode', (event, options) => @previewing = !@previewing if options.mode == 'preview'
@@ -148,15 +144,17 @@ class @Mercury.PageEditor
 
   toggleInterface: ->
     if @visible
-      Mercury.trigger('mode', {mode: 'preview'}) if @previewing
       @visible = false
       @toolbar.hide()
       @statusbar.hide()
+      Mercury.trigger('mode', {mode: 'preview'}) unless @previewing
+      @previewing = true
     else
       @visible = true
       @toolbar.show()
       @statusbar.show()
-    Mercury.trigger('mode', {mode: 'preview'})
+      Mercury.trigger('mode', {mode: 'preview'})
+      @previewing = false
     @resize()
 
 
@@ -188,6 +186,7 @@ class @Mercury.PageEditor
     else
       return url
 
+
   loadIframeSrc: (url)->
     # clear any existing events if we are loading a new iframe to replace the existing one
     @document.off() if @document
@@ -195,6 +194,7 @@ class @Mercury.PageEditor
     @iframe.data('loaded', false)
     @iframe.get(0).contentWindow.document.location.href = @iframeSrc(url, true)
 
+
   hijackLinksAndForms: ->
     for element in jQuery('a, form', @document)
       ignored = false
@@ -202,7 +202,7 @@ class @Mercury.PageEditor
         if jQuery(element).hasClass(classname)
           ignored = true
           continue
-      if !ignored && (element.target == '' || element.target == '_self') && !jQuery(element).closest(".#{Mercury.config.regions.className}").length
+      if !ignored && (element.target == '' || element.target == '_self') && !jQuery(element).closest("[#{Mercury.config.regions.attribute}]").length
         jQuery(element).attr('target', '_parent')