kiteditor 1.0.11 → 1.0.12

data/{vendor → app}/assets/javascripts/mercury/modals/insertsnippet.js.coffee

@@ -1,4 +1,5 @@
 @Mercury.modalHandlers.insertSnippet = ->
+
   @element.find('form').on 'submit', (event) =>
     event.preventDefault()
     serializedForm = @element.find('form').serializeObject()
@@ -10,3 +11,4 @@
       snippet = Mercury.Snippet.create(@options.snippetName, serializedForm)
     Mercury.trigger('action', {action: 'insertSnippet', value: snippet})
     @hide()
+

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

@@ -0,0 +1,68 @@
+@Mercury.modalHandlers.insertTable = {
+
+  initialize: ->
+    @table = @element.find('#table_display table')
+
+    @table.on 'click', (event) => @onCellClick($(event.target))
+
+    @element.find('#table_alignment').on 'change', => @setTableAlignment()
+    @element.find('#table_border').on 'keyup', => @setTableBorder()
+    @element.find('#table_spacing').on 'keyup', => @setTableCellSpacing()
+    @element.find('[data-action]').on 'click', (event) =>
+      event.preventDefault()
+      @onActionClick(jQuery(event.target).data('action'))
+
+    @selectFirstCell()
+
+    @element.find('form').on 'submit', (event) =>
+      event.preventDefault()
+      @submitForm()
+      @hide()
+
+
+  selectFirstCell: ->
+    firstCell = @table.find('td, th').first()
+    firstCell.addClass('selected')
+    Mercury.tableEditor(@table, firstCell, ' ')
+
+
+  onCellClick: (@cell) ->
+    @table = @cell.closest('table')
+    @table.find('.selected').removeAttr('class')
+    @cell.addClass('selected')
+    Mercury.tableEditor(@table, @cell, ' ')
+
+
+  onActionClick: (action) ->
+    return unless action
+    Mercury.tableEditor[action]()
+
+
+  setTableAlignment: ->
+    @table.attr({align: @element.find('#table_alignment').val()})
+
+  setTableBorder: ->
+    border = parseInt(@element.find('#table_border').val(), 10)
+    if isNaN(border)
+      @table.removeAttr('border')
+    else
+      @table.attr({border: border})
+
+  setTableCellSpacing: ->
+    cellspacing = parseInt(@element.find('#table_spacing').val(), 10)
+    if isNaN(cellspacing)
+      @table.removeAttr('cellspacing')
+    else
+      @table.attr({cellspacing: cellspacing})
+
+
+  submitForm: ->
+    @table.find('.selected').removeAttr('class')
+    @table.find('td, th').html('<br/>')
+
+    html = jQuery('<div>').html(@table).html()
+    value = html.replace(/^\s+|\n/gm, '').replace(/(<\/.*?>|<table.*?>|<tbody>|<tr>)/g, '$1\n')
+
+    Mercury.trigger('action', {action: 'insertTable', value: value})
+
+}

data/{vendor → 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/{vendor → app}/assets/javascripts/mercury/page_editor.js.coffee

@@ -3,13 +3,14 @@ class @Mercury.PageEditor
   # options
   # saveStyle: 'form', or 'json' (defaults to json)
   # saveDataType: 'xml', 'json', 'jsonp', 'script', 'text', 'html' (defaults to json)
-  # saveMethod: 'POST', or 'PUT', create or update actions on save (defaults to POST)
+  # saveMethod: 'POST', or 'PUT', create or update actions on save (defaults to PUT)
   # visible: boolean, if the interface should start visible or not (defaults to true)
   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.visible = true unless (@options.visible == false || @options.visible == 'false')
     @visible = @options.visible
+    @options.saveDataType = 'json' unless (@options.saveDataType == false || @options.saveDataType)
 
     window.mercuryInstance = @
     @regions = []
@@ -20,25 +21,28 @@ class @Mercury.PageEditor
   initializeInterface: ->
     @focusableElement = jQuery('<input>', {class: 'mercury-focusable', type: 'text'}).appendTo(@options.appendTo ? 'body')
 
-    @iframe = jQuery('<iframe>', {id: 'mercury_iframe', class: 'mercury-iframe', seamless: 'true', frameborder: '0', src: 'about:blank'})
+    @iframe = jQuery('<iframe>', {id: 'mercury_iframe', name: 'mercury_iframe', class: 'mercury-iframe', frameborder: '0', src: 'about:blank'})
     @iframe.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
-    @toolbar = new Mercury.Toolbar(@options)
-    @statusbar = new Mercury.Statusbar(@options)
+    @toolbar = new Mercury.Toolbar(jQuery.extend(true, {}, @options, @options.toolbarOptions))
+    @statusbar = new Mercury.Statusbar(jQuery.extend(true, {}, @options, @options.statusbarOptions))
     @resize()
 
+    @iframe.one 'load', => @bindEvents()
     @iframe.on 'load', => @initializeFrame()
-    @iframe.get(0).contentWindow.document.location.href = @iframeSrc(null, true)
+    @loadIframeSrc(null)
 
 
   initializeFrame: ->
     try
       return if @iframe.data('loaded')
       @iframe.data('loaded', true)
-      Mercury.notify("Opera isn't a fully supported browser, your results may not be optimal.") if jQuery.browser.opera
+
+      # set document reference of iframe
       @document = jQuery(@iframe.get(0).contentWindow.document)
-      stylesToInject = Mercury.config.injectedStyles.replace(/{{regionClass}}/g, Mercury.config.regions.className)
-      jQuery("<style mercury-styles=\"true\">").html(stylesToInject).appendTo(@document.find('head'))
+
+      # inject styles for document to be able to highlight regions and other tools
+      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
@@ -47,12 +51,15 @@ class @Mercury.PageEditor
       iframeWindow.Mercury = Mercury
       iframeWindow.History = History if window.History && History.Adapter
 
-      @bindEvents()
+      # (re) initialize the editor against the new document
+      @bindDocumentEvents()
       @resize()
       @initializeRegions()
       @finalizeInterface()
+
+      # 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
 
@@ -63,8 +70,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()
@@ -75,11 +82,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)
@@ -90,43 +93,46 @@ class @Mercury.PageEditor
 
 
   finalizeInterface: ->
-    @santizerElement = jQuery('<div>', {id: 'mercury_sanitizer', contenteditable: 'true', style: 'position:fixed;width:100px;height:100px;top:0;left:-100px;opacity:0;overflow:hidden'})
+    @santizerElement = jQuery('<div>', {id: 'mercury_sanitizer', contenteditable: 'true', style: 'position:fixed;width:100px;height:100px;min-width:0;top:0;left:-100px;opacity:0;overflow:hidden'})
     @santizerElement.appendTo(@options.appendTo ? @document.find('body'))
 
+    @snippetToolbar.release() if @snippetToolbar
     @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.attribute}]").get(0) == Mercury.region.element.get(0)
+
+    jQuery(@document).bind 'keydown', (event) =>
+      return unless event.ctrlKey || event.metaKey
+      if (event.keyCode == 83) # meta+S
+        Mercury.trigger('action', {action: 'save'})
+        event.preventDefault()
 
 
   bindEvents: ->
     Mercury.on 'autosave', =>  @autosave()
-    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'
     Mercury.on 'action', (event, options) =>
       action = Mercury.config.globalBehaviors[options.action] || @[options.action]
       return unless typeof(action) == 'function'
-      options.already_handled = true
+      event.preventDefault()
       action.call(@, options)
 
-    @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)
-
     jQuery(window).on 'resize', =>
       @resize()
 
-    jQuery(@document).bind 'keydown', (event) =>
-      return unless event.ctrlKey || event.metaKey
-      if (event.keyCode == 83) # meta+S
-        Mercury.trigger('action', {action: 'save'})
-        event.preventDefault()
-
     jQuery(window).bind 'keydown', (event) =>
       return unless event.ctrlKey || event.metaKey
       if (event.keyCode == 83) # meta+S
@@ -138,22 +144,25 @@ 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
+      @resize()
     else
       @visible = true
+      @iframe.animate({top: @toolbar.height(true)}, 200, 'easeInOutSine', => @resize())
       @toolbar.show()
       @statusbar.show()
-    Mercury.trigger('mode', {mode: 'preview'})
-    @resize()
+      Mercury.trigger('mode', {mode: 'preview'})
+      @previewing = false
 
 
   resize: ->
     width = jQuery(window).width()
     height = @statusbar.top()
-    toolbarHeight = @toolbar.height()
+    toolbarHeight = @toolbar.top() + @toolbar.height()
 
     Mercury.displayRect = {top: toolbarHeight, left: 0, width: width, height: height - toolbarHeight, fullHeight: height}
 
@@ -167,14 +176,25 @@ class @Mercury.PageEditor
 
 
   iframeSrc: (url = null, params = false) ->
+    # remove the /editor segment of the url if it gets passed through
     url = (url ? window.location.href).replace(Mercury.config.editorUrlRegEx ?= /([http|https]:\/\/.[^\/]*)\/editor\/?(.*)/i,  "$1/$2")
-    url = url.replace(/[\?|\&]mercury_frame=true/gi, '')
+    url = url.replace(/[\?|\&]mercury_frame=true/gi, '').replace(/\&_=\d+/gi, '').replace(/#$/, '')
     if params
-      return "#{url}#{if url.indexOf('?') > -1 then '&' else '?'}mercury_frame=true"
+      # add a param allowing the server to know that the request is coming from mercury
+      # and add a cache busting param so we don't get stale content
+      return "#{url}#{if url.indexOf('?') > -1 then '&' else '?'}mercury_frame=true&_=#{new Date().getTime()}"
     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
+
+    @iframe.data('loaded', false)
+    @iframe.get(0).contentWindow.document.location.href = @iframeSrc(url, true)
+
+
   hijackLinksAndForms: ->
     for element in jQuery('a, form', @document)
       ignored = false
@@ -182,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')
 
 
@@ -214,22 +234,35 @@ class @Mercury.PageEditor
     }
 
   save: (callback) ->
-    url = @saveUrl ? Mercury.saveURL ? @iframeSrc()
+    url = @saveUrl ? Mercury.saveUrl ? @iframeSrc()
     data = @serialize()
+    data = {content: data}
+
+    if @options.saveMethod == 'POST'
+      method = 'POST'
+    else
+      method = 'PUT'
+      data['_method'] = method
+
     Mercury.log('saving', data)
-    data = jQuery.toJSON(data) unless @options.saveStyle == 'form'
-    method = 'PUT' if @options.saveMethod == 'PUT'
-    jQuery.ajax url, {
+
+    options = {
       headers: Mercury.ajaxHeaders()
-      type: method || 'POST'
-      data: {content: data, _method: method}
-      success: =>
+      type: method
+      dataType: @options.saveDataType
+      data: data
+      success: (response) =>
         Mercury.changes = false
-        Mercury.trigger('saved')
+        Mercury.trigger('saved', response)
         callback() if typeof(callback) == 'function'
-      error: =>
+      error: (response) =>
+        Mercury.trigger('save_failed', response)
         Mercury.notify('Mercury was unable to save to the url: %s', url)
     }
+    if @options.saveStyle != 'form'
+      options['data'] = jQuery.toJSON(data)
+      options['contentType'] = 'application/json'
+    jQuery.ajax url, options
 
 
   serialize: ->
@@ -238,3 +271,4 @@ class @Mercury.PageEditor
       Mercury.log("region", region)
       serialized[region.name] = region.serialize() 
     return serialized
+

data/{vendor → app}/assets/javascripts/mercury/palette.js.coffee

@@ -16,7 +16,7 @@ class @Mercury.Palette extends Mercury.Dialog
 
   position: (keepVisible) ->
     @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
-    position = @button.offset()
+    position = @button.position()
     width = @element.width()
 
     position.left = position.left - width + @button.width() if position.left + width > jQuery(window).width()

data/{vendor → app}/assets/javascripts/mercury/panel.js.coffee

@@ -6,7 +6,7 @@ class @Mercury.Panel extends Mercury.Dialog
 
   build: ->
     @element = jQuery('<div>', {class: 'mercury-panel loading', style: 'display:none;'})
-    @titleElement = jQuery("<h1>#{Mercury.I18n(@options.title)}</h1>").appendTo(@element)
+    @titleElement = jQuery("<h1><span>#{Mercury.I18n(@options.title)}</span></h1>").appendTo(@element)
     @paneElement = jQuery('<div>', {class: 'mercury-panel-pane'}).appendTo(@element)
 
     if @options.closeButton
@@ -57,6 +57,7 @@ class @Mercury.Panel extends Mercury.Dialog
       @titleElement.find('.mercury-panel-close').animate({opacity: 1}, 100)
 
       @paneElement.css({display: 'block', width: postWidth})
+      jQuery(@paneElement.find('.focusable').get(0)).focus()
       @makeDraggable()
 
     @hide() unless @visible
@@ -100,7 +101,7 @@ class @Mercury.Panel extends Mercury.Dialog
   makeDraggable: ->
     elementWidth = @element.width()
     @element.draggable {
-      handle: 'h1',
+      handle: 'h1 span',
       axis: 'x',
       opacity: 0.70
       scroll: false,

data/{vendor → app}/assets/javascripts/mercury/plugins/save_as_xml/mercury/page_editor.js.coffee

@@ -1,7 +1,7 @@
 class Mercury.PageEditor extends Mercury.PageEditor
 
   save: ->
-    url = @saveUrl ? Mercury.saveURL ? @iframeSrc()
+    url = @saveUrl ? Mercury.saveUrl ? @iframeSrc()
     data = @serializeAsXml()
     console.log('saving', data)
     return
@@ -25,4 +25,4 @@ class Mercury.PageEditor extends Mercury.PageEditor
       for snippetName, snippetProperties of regionProperties['snippets']
         snippetNodes.push("<#{snippetName} name=\"#{snippetProperties['name']}\"><![CDATA[#{jQuery.toJSON(snippetProperties['options'])}]]></#{snippetName}>")
       regionNodes.push("<region name=\"#{regionName}\" type=\"#{regionProperties['type']}\"><value>\n<![CDATA[#{regionProperties['value']}]]>\n</value><snippets>#{snippetNodes.join('')}</snippets></region>")
-    return "<regions>#{regionNodes.join('')}</regions>"
+    return "<regions>#{regionNodes.join('')}</regions>"

data/{vendor → 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: ->
 
 
@@ -28,15 +28,15 @@ class @Mercury.Region
       @focus()
 
     Mercury.on 'action', (event, options) =>
-      return if @previewing || Mercury.region != @
+      return if @previewing || Mercury.region != @ || event.isDefaultPrevented()
       @execCommand(options.action, options) if options.action
 
     @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
@@ -48,11 +48,13 @@ class @Mercury.Region
       @element.html(value)
     else
       # sanitize the html before we return it
-      container = jQuery('<div>').appendTo(@document.createDocumentFragment())
-      container.html(@element.html().replace(/^\s+|\s+$/g, ''))
+      # create the element without jQuery since $el.html() executes <script> tags
+      container = document.createElement('div')
+      container.innerHTML = @element.html().replace(/^\s+|\s+$/g, '')
+      container = $(container)
 
       # 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 +65,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: @})
 
 
@@ -76,7 +78,7 @@ class @Mercury.Region
     @pushHistory() unless action == 'redo'
 
     Mercury.log('execCommand', action, options.value)
-    Mercury.changes = true unless options.already_handled
+    Mercury.changes = true
 
 
   pushHistory: ->
@@ -87,20 +89,19 @@ class @Mercury.Region
     snippets = {}
     for element in @element.find('[data-snippet]')
       snippet = Mercury.Snippet.find(jQuery(element).data('snippet'))
-      snippet.setVersion(jQuery(element).data('version'))
+      continue unless snippet
       snippets[snippet.identity] = snippet.serialize()
     return snippets
 
 
   dataAttributes: ->
     data = {}
-    o = if @type=='simple' then jQuery(this.container[0]) else @element
-    data[attr] = o.attr('data-' + attr) for attr in Mercury.config.regions.dataAttributes
+    data[attr] = (@container || @element).attr('data-' + attr) for attr in Mercury.config.regions.dataAttributes
     return data
 
   serialize: ->
     return {
-      type: @type
+      type: @type()
       data: @dataAttributes()
       value: @content(null, true)
       snippets: @snippets()