markupable.js.coffee in mercury-rails-0.3.1

- old
+ new

@@ -2,10 +2,13 @@
 # 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'
 
   constructor: (@element, @window, @options = {}) ->
     @type = 'markupable'
     super
@@ -15,58 +18,50 @@
   build: ->
     width = '100%'
     height = @element.height()
 
     value = @element.html().replace(/^\s+|\s+$/g, '').replace('&gt;', '>')
+    @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', width: width, height: height, fontFamily: '"Courier New", Courier, monospace', fontSize: '14px'})
+    @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)
     @element.empty().append(@textarea)
-    @element.removeClass(Mercury.config.regionClass)
 
     @previewElement = jQuery('<div>', @document)
     @element.append(@previewElement)
+    @container = @element
+    @container.data('region', @)
     @element = @textarea
     @resize()
 
 
-  focus: ->
-    @element.focus()
-
-
   bindEvents: ->
-    Mercury.bind 'mode', (event, options) =>
-      @togglePreview() if options.mode == 'preview'
+    Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
+    Mercury.on 'focus:frame', => @focus() if !@previewing && Mercury.region == @
 
-    Mercury.bind 'focus:frame', =>
-      return if @previewing
-      return unless Mercury.region == @
-      @focus()
-
-    Mercury.bind 'action', (event, options) =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'action', (event, options) =>
+      return if @previewing || Mercury.region != @
       @execCommand(options.action, options) if options.action
 
-    Mercury.bind 'unfocus:regions', (event) =>
-      return if @previewing
-      return unless Mercury.region == @
+    Mercury.on 'unfocus:regions', =>
+      return if @previewing || Mercury.region != @
       @element.blur()
-      @element.removeClass('focus')
+      @container.removeClass('focus')
       Mercury.trigger('region:blurred', {region: @})
 
-    @element.bind 'dragenter', (event) =>
+    @element.on 'dragenter', (event) =>
       return if @previewing
       event.preventDefault()
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
-    @element.bind 'dragover', (event) =>
+    @element.on 'dragover', (event) =>
       return if @previewing
       event.preventDefault()
       event.originalEvent.dataTransfer.dropEffect = 'copy'
 
-    @element.bind 'drop', (event) =>
+    @element.on 'drop', (event) =>
       return if @previewing
 
       # handle dropping snippets
       if Mercury.snippet
         event.preventDefault()
@@ -77,19 +72,18 @@
       if event.originalEvent.dataTransfer.files.length
         event.preventDefault()
         @focus()
         Mercury.uploader(event.originalEvent.dataTransfer.files[0])
 
-    @element.focus =>
+    @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
-      @element.addClass('focus')
+      @container.addClass('focus')
       Mercury.trigger('region:focused', {region: @})
 
-    @element.keydown (event) =>
+    @element.on 'keydown', (event) =>
       return if @previewing
-      Mercury.changes = true
       @resize()
       switch event.keyCode
         when 90 # undo / redo
           return unless event.metaKey
           event.preventDefault()
@@ -131,23 +125,29 @@
             @execCommand('underline')
             event.preventDefault()
 
       @pushHistory(event.keyCode)
 
-    @element.keyup =>
+    @element.on 'keyup', =>
       return if @previewing
+      Mercury.changes = true
+      @resize()
       Mercury.trigger('region:update', {region: @})
 
-    @element.mouseup =>
+    @element.on 'mouseup', =>
       return if @previewing
       @focus()
       Mercury.trigger('region:focused', {region: @})
 
-    @previewElement.click (event) =>
-      $(event.target).closest('a').attr('target', '_top') if @previewing
+    @previewElement.on 'click', (event) =>
+      $(event.target).closest('a').attr('target', '_parent') if @previewing
 
 
+  focus: ->
+    @element.focus()
+
+
   content: (value = null, filterSnippets = true) ->
     if value != null
       if jQuery.type(value) == 'string'
         @element.val(value)
       else
@@ -161,18 +161,23 @@
     return {html: @content(null, false), selection: @selection().serialize()}
 
 
   togglePreview: ->
     if @previewing
+      @previewing = false
+      @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)
       value = @converter.makeHtml(@element.val())
       @previewElement.html(value)
       @previewElement.show()
       @element.hide()
-    super
+      Mercury.trigger('region:blurred', {region: @})
 
 
   execCommand: (action, options = {}) ->
     super
 
@@ -193,11 +198,11 @@
     # 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(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
+      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
     else
       # push to the history immediately
       @history.push(@contentAndSelection())
 
     @lastKnownKeyCode = knownKeyCode
@@ -206,13 +211,12 @@
   selection: ->
     return new Mercury.Regions.Markupable.Selection(@element)
 
 
   resize: ->
-    # todo: get this working if possible, and it seems to be useful
-    # adjustedHeight = Math.max(@textarea.get(0).scrollHeight, @textarea.get(0).clientHeight)
-    # @textarea.height(adjustedHeight) if adjustedHeight >= @textarea.get(0).clientHeight
+    @element.css({height: @element.get(0).scrollHeight - 100})
+    @element.css({height: @element.get(0).scrollHeight});
 
 
   snippets: ->
 
 
@@ -228,9 +232,12 @@
         options.value = jQuery('<div>').html(element).html()
       selection.replace(options.value, false, true)
 
     insertImage: (selection, options) ->
       selection.replace('![add alt text](' + encodeURI(options.value.src) + ')', true)
+
+    insertTable: (selection, options) ->
+      selection.replace(options.value.replace(/<br>|<br\/>/ig, ''), false, true)
 
     insertLink: (selection, options) ->
       selection.replace("[#{options.value.content}](#{options.value.attrs.href} 'optional title')", true)
 
     insertUnorderedList: (selection) -> selection.addList('unordered')