mercury-rails 0.1.0

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

@@ -0,0 +1,177 @@
+@Mercury.modal = (url, options = {}) ->
+  Mercury.modal.show(url, options)
+  return Mercury.modal
+
+$.extend Mercury.modal, {
+
+  minWidth: 400
+
+  show: (@url, @options = {}) ->
+    Mercury.trigger('focus:window')
+    @initialize()
+    if @visible then @update() else @appear()
+
+
+  initialize: ->
+    return if @initialized
+    @build()
+    @bindEvents()
+    @initialized = true
+
+
+  build: ->
+    @element = $('<div>', {class: 'mercury-modal loading'})
+    @element.html('<h1 class="mercury-modal-title"><span></span><a>&times;</a></h1>')
+    @element.append('<div class="mercury-modal-content-container"><div class="mercury-modal-content"></div></div>')
+
+    @overlay = $('<div>', {class: 'mercury-modal-overlay'})
+
+    @titleElement = @element.find('.mercury-modal-title')
+    @contentContainerElement = @element.find('.mercury-modal-content-container')
+    @contentElement = @element.find('.mercury-modal-content')
+
+    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo($(@options.appendTo).get(0) ? 'body')
+
+    @titleElement.find('span').html(@options.title)
+
+
+  bindEvents: ->
+    Mercury.bind 'refresh', => @resize(true)
+    Mercury.bind 'resize', => @position()
+
+    @overlay.click => @hide()
+
+    @titleElement.find('a').click => @hide()
+
+
+  appear: ->
+    @position()
+
+    @overlay.show()
+    @overlay.animate {opacity: 1}, 200, 'easeInOutSine', =>
+      @element.css({top: -@element.height()})
+      @setTitle()
+      @element.show()
+      @element.animate {top: 0}, 200, 'easeInOutSine', =>
+        @visible = true
+        @load()
+
+
+  resize: (keepVisible) ->
+    # TODO: resizing is a bit shitty when the modal has panes and is scrollable
+    visibility = if keepVisible then 'visible' else 'hidden'
+
+    viewportHeight = $(window).height()
+    titleHeight = @titleElement.outerHeight()
+
+    width = @contentElement.outerWidth()
+
+    @contentPane.css({height: 'auto'}) if @contentPane
+    @contentElement.css({height: 'auto', visibility: visibility, display: 'block'})
+
+    height = @contentElement.outerHeight() + titleHeight
+
+    width = @minWidth if width < @minWidth
+    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullHeight
+
+    @element.stop().animate {left: ($(window).width() - width) / 2, width: width, height: height}, 200, 'easeInOutSine', =>
+      @contentElement.css({visibility: 'visible', display: 'block'})
+      if @contentPane.length
+        @contentElement.css({height: height - titleHeight, overflow: 'visible'})
+        controlHeight = if @contentControl.length then @contentControl.outerHeight() else 0
+        @contentPane.css({height: height - titleHeight - controlHeight - 40})
+        @contentPane.find('.mercury-modal-pane').css({width: width - 40})
+      else
+        @contentElement.css({height: height - titleHeight, overflow: 'auto'})
+
+
+  position: ->
+    viewportWidth = $(window).width()
+    viewportHeight = $(window).height()
+
+    @contentPane.css({height: 'auto'}) if @contentPane
+    @contentElement.css({height: 'auto'})
+    @element.css({width: 'auto', height: 'auto', display: 'block', visibility: 'hidden'})
+
+    width = @element.width()
+    height = @element.height()
+
+    width = @minWidth if width < @minWidth
+    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullHeight
+
+    titleHeight = @titleElement.outerHeight()
+    if @contentPane && @contentPane.length
+      @contentElement.css({height: height - titleHeight, overflow: 'visible'})
+      controlHeight = if @contentControl.length then @contentControl.outerHeight() else 0
+      @contentPane.css({height: height - titleHeight - controlHeight - 40})
+      @contentPane.find('.mercury-modal-pane').css({width: width - 40})
+    else
+      @contentElement.css({height: height - titleHeight, overflow: 'auto'})
+
+    @element.css {
+      left: (viewportWidth - width) / 2
+      width: width,
+      height: height,
+      display: if @visible then 'block' else 'none',
+      visibility: 'visible'
+    }
+
+
+  update:  ->
+    @reset()
+    @resize()
+    @load()
+
+
+  load: ->
+    @element.addClass('loading')
+    @setTitle()
+    $.ajax @url, {
+      type: @options.loadType || 'get'
+      data: @options.loadData
+      success: (data) => @loadContent(data)
+      error: =>
+        @hide()
+        alert("Mercury was unable to load #{@url} for the modal.")
+    }
+
+
+  loadContent: (data, options) ->
+    @initialize()
+    @options = options || @options
+    @setTitle()
+    @loaded = true
+    @element.removeClass('loading')
+    @contentElement.html(data)
+    @contentElement.css({display: 'none', visibility: 'hidden'})
+
+    # for complex modal content, we provide panes and controls
+    @contentPane = @element.find('.mercury-modal-pane-container')
+    @contentControl = @element.find('.mercury-modal-controls')
+
+    @options.afterLoad.call(@) if @options.afterLoad
+    if @options.handler && Mercury.modalHandlers[@options.handler]
+      Mercury.modalHandlers[@options.handler].call(@)
+
+    @resize()
+
+
+  setTitle: ->
+    @titleElement.find('span').html(@options.title)
+
+
+  reset: ->
+    @titleElement.find('span').html('')
+    @contentElement.html('')
+
+
+  hide: ->
+    Mercury.trigger('focus:frame')
+    @element.hide()
+    @overlay.hide()
+    @reset()
+
+    @visible = false
+
+}

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

@@ -0,0 +1,10 @@
+@Mercury.modalHandlers.htmleditor = ->
+  # fill the text area with the content
+  @element.find('textarea').val(Mercury.region.html(null, true, false))
+
+  # replace the contents on form submit
+  @element.find('form').submit (event) =>
+    event.preventDefault()
+    value = @element.find('textarea').val().replace(/\n/g, '')
+    Mercury.trigger('action', {action: 'replaceHTML', value: value})
+    @hide()

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

@@ -0,0 +1,4 @@
+@Mercury.modalHandlers.insertcharacter = ->
+  @element.find('.character').click ->
+    Mercury.trigger('action', {action: 'insertHTML', value: "&#{$(@).attr('data-entity')};"})
+    Mercury.modal.hide()

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

@@ -0,0 +1,92 @@
+@Mercury.modalHandlers.insertlink = ->
+  # make the inputs work with the radio buttons
+  @element.find('label input').click (event) ->
+    $(@).closest('label').next('.selectable').focus()
+
+  @element.find('.selectable').focus ->
+    $(@).prev('label').find('input[type=radio]').prop("checked", true)
+
+  # show/hide the link target options on target change
+  @element.find('#link_target').change =>
+    @element.find(".link-target-options").hide()
+    @element.find("##{@element.find('#link_target').val()}_options").show()
+    @resize(true)
+
+  # fill the existing bookmark select
+  bookmarkSelect = @element.find('#link_existing_bookmark')
+  for link in $('a[name]', window.mercuryInstance.document)
+    bookmarkSelect.append($('<option>', {value: $(link).attr('name')}).text($(link).text()))
+
+  # get the selection and initialize its information into the form
+  if Mercury.region && Mercury.region.selection
+    selection = Mercury.region.selection()
+
+    # if we're editing a link prefill the information
+    container = selection.commonAncestor(true).closest('a') if selection.commonAncestor
+    if container && container.length
+      existingLink = container
+
+      # don't allow changing the content on edit
+      @element.find('#link_text_container').hide()
+
+      # fill in the external url or bookmark select based on what it looks like
+      if container.attr('href') && container.attr('href').indexOf('#') == 0
+        bookmarkSelect.val(container.attr('href').replace(/[^#]*#/, ''))
+        bookmarkSelect.prev('label').find('input[type=radio]').prop("checked", true)
+      else
+        @element.find('#link_external_url').val(container.attr('href'))
+
+      # if it has a name, assume it's a bookmark target
+      if container.attr('name')
+        newBookmarkInput = @element.find('#link_new_bookmark')
+        newBookmarkInput.val(container.attr('name'))
+        newBookmarkInput.prev('label').find('input[type=radio]').prop("checked", true)
+
+      # if it has a target, select it, and try to pull options out
+      if container.attr('target')
+        @element.find('#link_target').val(container.attr('target'))
+
+      # if it's a popup window
+      if container.attr('href') && container.attr('href').indexOf('javascript:void') == 0
+        href = container.attr('href')
+        @element.find('#link_external_url').val(href.match(/window.open\('([^']+)',/)[1])
+        @element.find('#link_target').val('popup')
+        @element.find('#link_popup_width').val(href.match(/width=(\d+),/)[1])
+        @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())
+
+  # build the link on form submission
+  @element.find('form').submit (event) =>
+    event.preventDefault()
+
+    content = @element.find('#link_text').val()
+    target = @element.find('#link_target').val()
+    type = @element.find('input[name=link_type]:checked').val()
+
+    switch type
+      when 'existing_bookmark' then attrs = {href: "##{@element.find('#link_existing_bookmark').val()}"}
+      when 'new_bookmark' then attrs = {name: "##{@element.find('#link_new_bookmark').val()}"}
+      else attrs = {href: @element.find("#link_#{type}").val()}
+
+    switch target
+      when 'popup'
+        args = {
+          width: parseInt(@element.find('#link_popup_width').val()) || 500,
+          height: parseInt(@element.find('#link_popup_height').val()) || 500,
+          menubar: 'no',
+          toolbar: 'no'
+        }
+        attrs['href'] = "javascript:void(window.open('#{attrs['href']}', 'popup_window', '#{$.param(args).replace(/&/g, ',')}'))"
+      else attrs['target'] = target if target
+
+    value = {tagName: 'a', attrs: attrs, content: content}
+
+    if existingLink
+      Mercury.trigger('action', {action: 'replaceLink', value: value, node: existingLink.get(0)})
+    else
+      Mercury.trigger('action', {action: 'insertLink', value: value})
+
+    Mercury.modal.hide()

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

@@ -0,0 +1,72 @@
+@Mercury.modalHandlers.insertmedia = ->
+  # make the inputs work with the radio buttons, and options
+  @element.find('label input').click (event) ->
+    $(@).closest('label').next('.selectable').focus()
+
+  @element.find('.selectable').focus (event) =>
+    element = $(event.target)
+    element.prev('label').find('input[type=radio]').prop("checked", true)
+
+    @element.find(".media-options").hide()
+    @element.find("##{element.attr('id').replace('media_', '')}").show()
+    @resize(true)
+
+  # get the selection and initialize its information into the form
+  if Mercury.region && Mercury.region.selection
+    selection = Mercury.region.selection()
+
+    # if we're editing an image prefill the information
+    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'))
+
+    # if we're editing an iframe (assume it's a video for now)
+    if selection.is && iframe = selection.is('iframe')
+      src = iframe.attr('src')
+      if src.indexOf('http://www.youtube.com') > -1
+        # it's a youtube video
+        @element.find('#media_youtube_url').val("http://youtu.be/#{src.match(/\/embed\/(\w+)/)[1]}")
+        @element.find('#media_youtube_width').val(iframe.attr('width'))
+        @element.find('#media_youtube_height').val(iframe.attr('height'))
+        @element.find('#media_youtube_url').focus()
+      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.attr('width'))
+        @element.find('#media_vimeo_height').val(iframe.attr('height'))
+        @element.find('#media_vimeo_url').focus()
+
+  # build the image or youtube embed on form submission
+  @element.find('form').submit (event) =>
+    event.preventDefault()
+
+    type = @element.find('input[name=media_type]:checked').val()
+
+    switch type
+      when 'image_url'
+        attrs = {src: @element.find('#media_image_url').val()}
+        attrs['align'] = alignment if alignment = @element.find('#media_image_alignment').val()
+        Mercury.trigger('action', {action: 'insertImage', value: attrs})
+
+      when 'youtube_url'
+        code = @element.find('#media_youtube_url').val().replace('http://youtu.be/', '')
+        value = $('<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",
+          frameborder: 0,
+          allowfullscreen: 'true'
+        })
+        Mercury.trigger('action', {action: 'insertHTML', value: value})
+
+      when 'vimeo_url'
+        code = @element.find('#media_vimeo_url').val().replace('http://vimeo.com/', '')
+        value = $('<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&amp;byline=1&amp;portrait=0&amp;color=ffffff",
+          frameborder: 0,
+        })
+        Mercury.trigger('action', {action: 'insertHTML', value: value})
+
+    Mercury.modal.hide()

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

@@ -0,0 +1,11 @@
+@Mercury.modalHandlers.insertsnippet = ->
+  @element.find('form').submit (event) =>
+    event.preventDefault()
+    if Mercury.snippet
+      snippet = Mercury.snippet
+      snippet.setOptions(@element.find('form').serializeObject())
+      Mercury.snippet = null
+    else
+      snippet = Mercury.Snippet.create('example', @element.find('form').serializeObject())
+    Mercury.trigger('action', {action: 'insertsnippet', value: snippet})
+    @hide()

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

@@ -0,0 +1,56 @@
+@Mercury.modalHandlers.inserttable = ->
+  table = @element.find('#table_display table')
+  # make td's selectable
+  table.click (event) =>
+    cell = $(event.target)
+    table = cell.closest('table')
+    table.find('.selected').removeClass('selected')
+    cell.addClass('selected')
+    @tableEditor = Mercury.tableEditor(table, cell)
+
+  # select the first td
+  firstCell = table.find('td, th').first()
+  firstCell.addClass('selected')
+  Mercury.tableEditor(table, firstCell)
+
+  # make the buttons work
+  @element.find('input.action').click (event) =>
+    action = $(event.target).attr('name')
+    switch action
+
+      when 'insertrowbefore' then Mercury.tableEditor.addRow('before')
+      when 'insertrowafter' then Mercury.tableEditor.addRow('after')
+      when 'deleterow' then Mercury.tableEditor.removeRow()
+      when 'insertcolumnbefore' then Mercury.tableEditor.addColumn('before')
+      when 'insertcolumnafter' then Mercury.tableEditor.addColumn('after')
+      when 'deletecolumn' then Mercury.tableEditor.removeColumn()
+      when 'increasecolspan' then Mercury.tableEditor.increaseColspan()
+      when 'decreasecolspan' then Mercury.tableEditor.decreaseColspan()
+      when 'increaserowspan' then Mercury.tableEditor.increaseRowspan()
+      when 'decreaserowspan' then Mercury.tableEditor.decreaseRowspan()
+
+  # set the alignment
+  @element.find('#table_alignment').change =>
+    table.attr({align: @element.find('#table_alignment').val()})
+
+  # set the border
+  @element.find('#table_border').change =>
+    table.attr({border: parseInt(@element.find('#table_border').val())})
+
+  # set the cellspacing
+  @element.find('#table_spacing').change =>
+    table.attr({cellspacing: parseInt(@element.find('#table_spacing').val())})
+
+  # build the table on form submission
+  @element.find('form').submit (event) =>
+    event.preventDefault()
+    table.find('.selected').removeClass('selected')
+    table.find('td, th').html(' ')
+
+    tableHTML = $('<div>').html(table).html()
+    tableHTML = tableHTML.replace(/^\s+|\n/gm, '')
+    tableHTML = tableHTML.replace(/(<\/.*?>|<table.*?>|<tbody>|<tr>)/g, '$1\n')
+
+    Mercury.trigger('action', {action: 'insertHTML', value: tableHTML})
+    Mercury.modal.hide()
+

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

@@ -0,0 +1,47 @@
+String::titleize = ->
+  @[0].toUpperCase() + @slice(1)
+
+
+String::toHex = ->
+  # todo: we should handle alpha as well
+  return @ if @[0] == '#'
+  @replace /rgba?\((\d+)[\s|\,]?\s(\d+)[\s|\,]?\s(\d+)\)/gi, (a, r, g, b) ->
+    "##{parseInt(r).toHex()}#{parseInt(g).toHex()}#{parseInt(b).toHex()}"
+
+
+String::singleDiff = (that) ->
+  diff = ''
+  for char, index in that
+    if char != @[index]
+      re = new RegExp(@substr(index).regExpEscape().replace(/^\s+|^( )+/g, '') + '$', 'm')
+      diff = that.substr(index).replace(re, '')
+      break
+  return diff
+
+
+String::regExpEscape = ->
+  specials = ['/','.','*','+','?','|','(',')','[',']','{','}','\\']
+  escaped = new RegExp('(\\' + specials.join('|\\') + ')', 'g')
+  return @replace(escaped, '\\$1')
+
+
+String::sanitizeHTML = ->
+  element = $('<div>').html(@.toString())
+  element.find('style').remove()
+  content = element.text()
+  content = content.replace(/\n+/g, '<br/>').replace(/.*<!--.*-->/g, '').replace(/^(<br\/>)+|(<br\/>\s*)+$/g, '')
+  return content
+
+
+Number::toHex = ->
+  result = @toString(16).toUpperCase()
+  return if result[1] then result else "0#{result}"
+
+
+Number::toBytes = ->
+  bytes = parseInt(@)
+  i = 0
+  while 1023 < bytes
+    bytes /= 1024
+    i += 1
+  return if i then "#{bytes.toFixed(2)}#{['', ' kb', ' Mb', ' Gb', ' Tb', ' Pb', ' Eb'][i]}" else "#{bytes} bytes"