mercury-rails 0.1.2 → 0.2.0

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

@@ -55,6 +55,9 @@
         @element.find('#link_popup_height').val(href.match(/height=(\d+),/)[1])
         @element.find('#popup_options').show()
 
+    # get the text content
+    @element.find('#link_text').val(selection.textContent()) if selection.textContent
+
   # build the link on form submission
   @element.find('form').submit (event) =>
     event.preventDefault()

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

@@ -49,7 +49,11 @@
         Mercury.trigger('action', {action: 'insertImage', value: attrs})
 
       when 'youtube_url'
-        code = @element.find('#media_youtube_url').val().replace('http://youtu.be/', '')
+        url = @element.find('#media_youtube_url').val()
+        unless /^http:\/\/youtu.be\//.test(url)
+          alert('Error: The provided youtube share url was invalid.')
+          return
+        code = url.replace('http://youtu.be/', '')
         value = jQuery('<iframe>', {
           width: @element.find('#media_youtube_width').val() || 560,
           height: @element.find('#media_youtube_height').val() || 349,
@@ -60,7 +64,11 @@
         Mercury.trigger('action', {action: 'insertHTML', value: value})
 
       when 'vimeo_url'
-        code = @element.find('#media_vimeo_url').val().replace('http://vimeo.com/', '')
+        url = @element.find('#media_vimeo_url').val()
+        unless /^http:\/\/vimeo.com\//.test(url)
+          alert('Error: The provided vimeo url was invalid.')
+          return
+        code = url.replace('http://vimeo.com/', '')
         value = jQuery('<iframe>', {
           width: @element.find('#media_vimeo_width').val() || 400,
           height: @element.find('#media_vimeo_height').val() || 225,

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

@@ -7,12 +7,12 @@
     table = cell.closest('table')
     table.find('.selected').removeClass('selected')
     cell.addClass('selected')
-    Mercury.tableEditor(table, cell)
+    Mercury.tableEditor(table, cell, ' ')
 
   # select the first td
   firstCell = table.find('td, th').first()
   firstCell.addClass('selected')
-  Mercury.tableEditor(table, firstCell)
+  Mercury.tableEditor(table, firstCell, ' ')
 
   # make the buttons work
   @element.find('input.action').click (event) =>

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

@@ -2,15 +2,18 @@ class @Mercury.PageEditor
 
   # options
   # saveStyle: 'form', or 'json' (defaults to json)
-  # ignoredLinks: an array containing classes for links to ignore (eg. lightbox or accordian controls)
+  # visible: boolean, if the interface should start visible or not (defaults to true)
   constructor: (@saveUrl = null, @options = {}) ->
     throw "Mercury.PageEditor is unsupported in this client. Supported browsers are chrome 10+, firefix 4+, and safari 5+." unless Mercury.supported
     throw "Mercury.PageEditor can only be instantiated once." if window.mercuryInstance
 
+    @options.visible = true unless @options.visible == false
+    @visible = @options.visible
+
     window.mercuryInstance = @
     @regions = []
     @initializeInterface()
-    Mercury.csrfToken = token if token = jQuery('meta[name="csrf-token"]').attr('content')
+    Mercury.csrfToken = token if token = jQuery(Mercury.config.csrfSelector).attr('content')
 
 
   initializeInterface: ->
@@ -35,12 +38,16 @@ class @Mercury.PageEditor
       # jquery: make jQuery evaluate scripts within the context of the iframe window -- note that this means that we
       # can't use eval in mercury (eg. script tags in ajax responses) because it will eval in the wrong context (you can
       # use top.Mercury though, if you keep it in mind)
+      # todo: look into `context` options for ajax as an alternative
       iframeWindow = @iframe.get(0).contentWindow
       jQuery.globalEval = (data) -> (iframeWindow.execScript || (data) -> iframeWindow["eval"].call(iframeWindow, data))(data) if (data && /\S/.test(data))
+      iframeWindow.Mercury = Mercury
 
       @bindEvents()
+      @resize()
       @initializeRegions()
       @finalizeInterface()
+      Mercury.trigger('ready')
 
       @iframe.css({visibility: 'visible'})
     catch error
@@ -49,6 +56,7 @@ class @Mercury.PageEditor
 
   initializeRegions: ->
     @buildRegion(jQuery(region)) for region in jQuery('.mercury-region', @document)
+    return unless @options.visible
     for region in @regions
       if region.focus
         region.focus()
@@ -67,8 +75,8 @@ class @Mercury.PageEditor
   finalizeInterface: ->
     @snippetToolbar = new Mercury.SnippetToolbar(@document)
 
-    @hijackLinks()
-    @resize()
+    @hijackLinksAndForms()
+    Mercury.trigger('mode', {mode: 'preview'}) unless @options.visible
 
 
   bindEvents: ->
@@ -76,23 +84,39 @@ class @Mercury.PageEditor
     Mercury.bind 'focus:frame', => @iframe.focus()
     Mercury.bind 'focus:window', => setTimeout((=> @focusableElement.focus()), 10)
 
+    Mercury.bind 'toggle:interface', => @toggleInterface()
+
     Mercury.bind 'action', (event, options) =>
        @save() if options.action == 'save'
 
     @document.mousedown (event) ->
       Mercury.trigger('hide:dialogs')
-      Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest('.mercury-region').get(0) == Mercury.region.element.get(0)
+      if Mercury.region
+        Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest('.mercury-region').get(0) == Mercury.region.element.get(0)
 
     jQuery(window).resize => @resize()
     window.onbeforeunload = @beforeUnload
 
 
+  toggleInterface: ->
+    if @visible
+      @visible = false
+      @toolbar.hide()
+      @statusbar.hide()
+    else
+      @visible = true
+      @toolbar.show()
+      @statusbar.show()
+    Mercury.trigger('mode', {mode: 'preview'})
+    @resize()
+
+
   resize: ->
     width = jQuery(window).width()
     height = @statusbar.top()
     toolbarHeight = @toolbar.height()
 
-    Mercury.displayRect = {top: toolbarHeight, left: 0, width: width, height: height - toolbarHeight}
+    Mercury.displayRect = {top: toolbarHeight, left: 0, width: width, height: height - toolbarHeight, fullHeight: height}
 
     @iframe.css {
       top: toolbarHeight
@@ -107,15 +131,15 @@ class @Mercury.PageEditor
     (url ? window.location.href).replace(/([http|https]:\/\/.[^\/]*)\/editor\/?(.*)/i, "$1/$2")
 
 
-  hijackLinks: ->
-    for link in jQuery('a', @document)
+  hijackLinksAndForms: ->
+    for element in jQuery('a, form', @document)
       ignored = false
-      for classname in @options.ignoredLinks || []
-        if jQuery(link).hasClass(classname)
+      for classname in Mercury.config.nonHijackableClasses || []
+        if jQuery(element).hasClass(classname)
           ignored = true
           continue
-      if !ignored && (link.target == '' || link.target == '_self') && !jQuery(link).closest('.mercury-region').length
-        jQuery(link).attr('target', '_top')
+      if !ignored && (element.target == '' || element.target == '_self') && !jQuery(element).closest('.mercury-region').length
+        jQuery(element).attr('target', '_top')
 
 
   beforeUnload: ->
@@ -125,12 +149,13 @@ class @Mercury.PageEditor
 
 
   save: ->
-    url = @saveUrl ? @iframeSrc()
+    url = @saveUrl ? Mercury.saveURL ? @iframeSrc()
     data = @serialize()
     Mercury.log('saving', data)
     data = jQuery.toJSON(data) unless @options.saveStyle == 'form'
     jQuery.ajax url, {
       type: 'POST'
+      headers: @saveHeaders()
       data: {content: data}
       success: =>
         Mercury.changes = false
@@ -139,6 +164,12 @@ class @Mercury.PageEditor
     }
 
 
+  saveHeaders: ->
+    headers = {}
+    headers[Mercury.config.csrfHeader] = Mercury.csrfToken
+    return headers
+
+
   serialize: ->
     serialized = {}
     serialized[region.name] = region.serialize() for region in @regions

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

@@ -18,7 +18,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     @specialContainer = jQuery.browser.mozilla && @element.get(0).tagName != 'DIV'
 
     # make it editable
-    # gecko: in this makes double clicking in textareas fail: https://bugzilla.mozilla.org/show_bug.cgi?id=490367
+    # mozilla: this makes double clicking in textareas fail: https://bugzilla.mozilla.org/show_bug.cgi?id=490367
     @element.get(0).contentEditable = true
 
     # make all snippets not editable, and set their versions to 1
@@ -46,7 +46,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
       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'), ' ') if table.length
         # display a tooltip if we're in an anchor
         anchor = currentElement.closest('a', @element)
         if anchor.length && anchor.attr('href')
@@ -56,12 +56,12 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     @element.bind 'dragenter', (event) =>
       return if @previewing
-      event.preventDefault() if event.shiftKey
+      event.preventDefault() unless Mercury.snippet
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
     @element.bind 'dragover', (event) =>
       return if @previewing
-      event.preventDefault() if event.shiftKey
+      event.preventDefault() unless Mercury.snippet
       event.originalEvent.dataTransfer.dropEffect = 'copy'
       if jQuery.browser.webkit
         clearTimeout(@dropTimeout)
@@ -100,9 +100,12 @@ class @Mercury.Regions.Editable extends Mercury.Region
       return if @previewing
       return unless Mercury.region == @
       Mercury.changes = true
+      if @specialContainer
+        event.preventDefault()
+        return
       content = @content()
-      event.preventDefault() if @specialContainer
-      setTimeout((=> @handlePaste(content)), 1)
+      clearTimeout(@handlePasteTimeout)
+      @handlePasteTimeout = setTimeout((=> @handlePaste(content)), 100)
 
     @element.focus =>
       return if @previewing
@@ -183,8 +186,11 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
 
   focus: ->
-    @element.focus()
-    setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
+    if Mercury.region != @
+      @element.focus()
+      selection = @selection().selection.collapseToStart()
+
+    Mercury.trigger('region:focused', {region: @})
     Mercury.trigger('region:update', {region: @})
 
 
@@ -268,6 +274,7 @@ 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
         @element.prev().remove() if action == 'indent' && @element.prev() != sibling
 
 
@@ -348,6 +355,44 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
   # Custom actions (eg. things that execCommand doesn't do, or doesn't do well)
   @actions: {
+#    bold: (selection) ->
+#      unless selection.collapsed
+#        @document.execCommand('bold', false, null)
+#      else
+##        selection.selectWordByCursor()
+##        @document.execCommand('bold', false, null)
+#
+#        selection.placeMarker()
+#        node = @element.find('.mercury-marker').get(0)
+#        prev = node.previousSibling
+#        selection.removeMarker()
+#        next = prev.nextSibling
+#        console.debug(prev, next)
+##        if prev.textContent[prev.textContent.length - 1] != ' ' &&
+
+
+#[some]| content
+# textContent = some, wholeText = some
+# textContent = '', wholeText = some
+#content |[some]
+#content [s|ome]
+#co|ntent [some]
+#|content [some]
+
+
+#
+#        console.debug(commonAncestor)
+#        beforeText = commonAncestor.textContent
+#        afterText = commonAncestor.wholeText.substring(commonAncestor.wholeText.lastIndexOf(beforeText) + beforeText.length, commonAncestor.wholeText.length)
+#        if beforeText && afterText && (beforeChar = beforeText[beforeText.length - 1]) != ' ' && (afterChar = afterText[0]) != ' '
+#          console.debug('bolding word', beforeChar, afterChar)
+#        else
+#          @document.execCommand('bold', false, null)
+#
+##          selection.selectWord()
+##      commonAncestor.wholeText, commonAncestor.textContent
+#      else
+
     insertRowBefore: -> Mercury.tableEditor.addRow('before')
 
     insertRowAfter: -> Mercury.tableEditor.addRow('after')
@@ -385,11 +430,11 @@ class @Mercury.Regions.Editable extends Mercury.Region
     insertImage: (selection, options) -> @execCommand('insertHTML', {value: jQuery('<img/>', options.value)})
 
     insertLink: (selection, options) ->
-      anchor = jQuery("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content)
+      anchor = jQuery("<#{options.value.tagName}>", @document).attr(options.value.attrs).html(options.value.content)
       selection.insertNode(anchor)
 
     replaceLink: (selection, options) ->
-      anchor = jQuery("<#{options.value.tagName}>").attr(options.value.attrs).html(options.value.content)
+      anchor = jQuery("<#{options.value.tagName}>", @document).attr(options.value.attrs).html(options.value.content)
       selection.selectNode(options.node)
       html = jQuery('<div>').html(selection.content()).find('a').html()
       selection.replace(jQuery(anchor, selection.context).html(html))
@@ -419,6 +464,7 @@ class Mercury.Regions.Editable.Selection
     @range = @selection.getRangeAt(0)
     @fragment = @range.cloneContents()
     @clone = @range.cloneRange()
+    @collapsed = @selection.isCollapsed
 
 
   commonAncestor: (onlyTag = false) ->
@@ -456,12 +502,12 @@ class Mercury.Regions.Editable.Selection
     # https://github.com/lautis/uglifier/issues/11
     if @range
       if @commonAncestor(true).closest('.mercury-snippet').length
-        lastChild = @context.createTextNode(' ') #\00
+        lastChild = @context.createTextNode('\00') #\00
         element.appendChild(lastChild)
     else
       if element.lastChild && element.lastChild.nodeType == 3 && element.lastChild.textContent.replace(/^[\s+|\n+]|[\s+|\n+]$/, '') == ''
         lastChild = element.lastChild
-        element.lastChild.textContent = ' ' #\00
+        element.lastChild.textContent = '\00' #\00
       else
         lastChild = @context.createTextNode(' ') #\00
         element.appendChild(lastChild)

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

@@ -13,20 +13,20 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
   build: ->
-    width = @element.width()
-    width = '100%' unless width
+    width = '100%'
     height = @element.height()
 
-    value = @element.html().replace(/^\s+|\s+$/g, '')
+    value = @element.html().replace(/^\s+|\s+$/g, '').replace('>', '>')
     @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'})
-    @element.after(@textarea)
-    @element.hide()
-    @resize()
+    @element.empty().append(@textarea)
+    @element.removeClass('mercury-region')
 
-    @previewElement = @element
+    @previewElement = jQuery('<div>', @document)
+    @element.append(@previewElement)
     @element = @textarea
+    @resize()
 
 
   focus: ->
@@ -49,10 +49,10 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
     Mercury.bind 'unfocus:regions', (event) =>
       return if @previewing
-      if Mercury.region == @
-        @element.blur()
-        @element.removeClass('focus')
-        Mercury.trigger('region:blurred', {region: @})
+      return unless Mercury.region == @
+      @element.blur()
+      @element.removeClass('focus')
+      Mercury.trigger('region:blurred', {region: @})
 
     @element.bind 'dragenter', (event) =>
       return if @previewing
@@ -90,6 +90,12 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       Mercury.changes = true
       @resize()
       switch event.keyCode
+        when 90 # undo / redo
+          return unless event.metaKey
+          event.preventDefault()
+          if event.shiftKey then @execCommand('redo') else @execCommand('undo')
+          return
+
         when 13 # enter or return
           selection = @selection()
           text = @element.val()
@@ -107,11 +113,9 @@ class @Mercury.Regions.Markupable extends Mercury.Region
               selection.replace("\n#{number += 1}. ", false, true)
               event.preventDefault()
 
-        when 90 # undo / redo
-          return unless event.metaKey
+        when 9 # tab
           event.preventDefault()
-          if event.shiftKey then @execCommand('redo') else @execCommand('undo')
-          return
+          @execCommand('insertHTML', {value: '  '})
 
       if event.metaKey
         switch event.keyCode
@@ -144,8 +148,6 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
   content: (value = null, filterSnippets = true) ->
     if value != null
-      if $.type(value) == 'string'
-        @element.val(value)
       if jQuery.type(value) == 'string'
         @element.val(value)
       else
@@ -155,6 +157,10 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       return @element.val()
 
 
+  contentAndSelection: ->
+    return {html: @content(null, false), selection: @selection().serialize()}
+
+
   togglePreview: ->
     if @previewing
       @previewElement.hide()
@@ -174,10 +180,6 @@ class @Mercury.Regions.Markupable extends Mercury.Region
     @resize()
 
 
-  htmlAndSelection: ->
-    return {html: @content(null, false), selection: @selection().serialize()}
-
-
   pushHistory: (keyCode) ->
     # when pressing return, delete or backspace it should push to the history
     # all other times it should store if there's a 1 second pause
@@ -190,13 +192,13 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
     # if the key code was return, delete, or backspace store now -- unless it was the same as last time
     if knownKeyCode >= 0 && knownKeyCode != @lastKnownKeyCode # || !keyCode
-      @history.push(@htmlAndSelection())
+      @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout((=> @history.push(@htmlAndSelection())), waitTime * 1000)
+      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
     else
       # push to the history immediately
-      @history.push(@htmlAndSelection())
+      @history.push(@contentAndSelection())
 
     @lastKnownKeyCode = knownKeyCode