kuji-mercury-rails 0.3.2

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

@@ -0,0 +1,198 @@
+@Mercury.modal = (url, options = {}) ->
+  Mercury.modal.show(url, options)
+  return Mercury.modal
+
+jQuery.extend Mercury.modal,
+  minWidth: 400
+
+  show: (@url, @options = {}) ->
+    Mercury.trigger('focus:window')
+    @initialize()
+    if @visible then @update() else @appear()
+    if @options.content
+      setTimeout 500, => @loadContent(@options.content)
+
+
+  initialize: ->
+    return if @initialized
+    @build()
+    @bindEvents()
+    @initialized = true
+
+
+  build: ->
+    @element = jQuery('<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 = jQuery('<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(jQuery(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+
+
+  bindEvents: ->
+    Mercury.on 'refresh', => @resize(true)
+    Mercury.on 'resize', => @position()
+
+    @overlay.on 'click', =>
+      @hide() if @options.allowHideUsingOverlay
+
+    @titleElement.find('a').on 'click', =>
+      @hide()
+
+    @element.on 'ajax:beforeSend', (event, xhr, options) =>
+      options.success = (content) =>
+        @loadContent(content)
+
+    jQuery(document).on 'keydown', (event) =>
+       @hide() if event.keyCode == 27 && @visible
+
+
+  appear: ->
+    @showing = true
+    @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
+        @showing = false
+        @load()
+
+
+  resize: (keepVisible) ->
+    visibility = if keepVisible then 'visible' else 'hidden'
+
+    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 = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 20 || @options.fullHeight
+
+    @element.stop().animate {left: (Mercury.displayRect.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-display-pane').css({width: width - 40})
+      else
+        @contentElement.css({height: height - titleHeight, overflow: 'auto'})
+
+
+  position: ->
+    viewportWidth = Mercury.displayRect.width
+
+    @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 = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 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-display-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: ->
+    @setTitle()
+    return unless @url
+    @element.addClass('loading')
+    if Mercury.preloadedViews[@url]
+      setTimeout(10, => @loadContent(Mercury.preloadedViews[@url]))
+    else
+      jQuery.ajax @url, {
+        headers: Mercury.ajaxHeaders()
+        type: @options.loadType || 'GET'
+        data: @options.loadData
+        success: (data) => @loadContent(data)
+        error: =>
+          @hide()
+          Mercury.notify("Mercury was unable to load %s for the modal.", @url)
+      }
+
+
+  loadContent: (data, options = null) ->
+    @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-display-pane-container')
+    @contentControl = @element.find('.mercury-display-controls')
+
+    @options.afterLoad.call(@) if @options.afterLoad
+    if @options.handler
+      if Mercury.modalHandlers[@options.handler]
+        Mercury.modalHandlers[@options.handler].call(@)
+      else if Mercury.lightviewHandlers[@options.handler]
+        Mercury.lightviewHandlers[@options.handler].call(@)
+
+    @element.localize(Mercury.locale()) if Mercury.config.localization.enabled
+    @resize()
+
+
+  setTitle: ->
+    @titleElement.find('span').html(Mercury.I18n(@options.title))
+    closeButton = @titleElement.find('a')
+    if @options.closeButton == false then closeButton.hide() else closeButton.show()
+
+
+  reset: ->
+    @titleElement.find('span').html('')
+    @contentElement.html('')
+
+
+  hide: ->
+    return if @showing
+    @options = {}
+    @initialized = false
+
+    Mercury.trigger('focus:frame')
+    @element.hide()
+    @overlay.hide()
+    @reset()
+
+    @visible = false

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

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

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

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

data/vendor/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').on 'click', ->
+    jQuery(@).closest('label').next('.selectable').focus()
+
+  @element.find('.selectable').on 'focus', ->
+    jQuery(@).prev('label').find('input[type=radio]').prop("checked", true)
+
+  # show/hide the link target options on target change
+  @element.find('#link_target').on '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 jQuery('a[name]', window.mercuryInstance.document)
+    bookmarkSelect.append(jQuery('<option>', {value: jQuery(link).attr('name')}).text(jQuery(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 && 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()) if selection.textContent
+
+  # build the link on form submission
+  @element.find('form').on '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', '#{jQuery.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})
+
+    @hide()

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

@@ -0,0 +1,81 @@
+@Mercury.modalHandlers.insertMedia = ->
+  # make the inputs work with the radio buttons, and options
+  @element.find('label input').on 'click', ->
+    jQuery(@).closest('label').next('.selectable').focus()
+
+  @element.find('.selectable').on 'focus', (event) =>
+    element = jQuery(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'))
+      setTimeout 300, => @element.find('#media_image_url').focus()
+
+    # 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.width())
+        @element.find('#media_youtube_height').val(iframe.height())
+        setTimeout 300, => @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.width())
+        @element.find('#media_vimeo_height').val(iframe.height())
+        setTimeout 300, => @element.find('#media_vimeo_url').focus()
+
+
+  # build the image or youtube embed on form submission
+  @element.find('form').on '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'
+        url = @element.find('#media_youtube_url').val()
+        unless /^http:\/\/youtu.be\//.test(url)
+          Mercury.notify('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,
+          src: "http://www.youtube.com/embed/#{code}?wmode=transparent",
+          frameborder: 0,
+          allowfullscreen: 'true'
+        })
+        Mercury.trigger('action', {action: 'insertHTML', value: value})
+
+      when 'vimeo_url'
+        url = @element.find('#media_vimeo_url').val()
+        unless /^http:\/\/vimeo.com\//.test(url)
+          Mercury.notify('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,
+          src: "http://player.vimeo.com/video/#{code}?title=1&byline=1&portrait=0&color=ffffff",
+          frameborder: 0
+        })
+        Mercury.trigger('action', {action: 'insertHTML', value: value})
+
+    @hide()

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

@@ -0,0 +1,12 @@
+@Mercury.modalHandlers.insertSnippet = ->
+  @element.find('form').on 'submit', (event) =>
+    event.preventDefault()
+    serializedForm = @element.find('form').serializeObject()
+    if Mercury.snippet
+      snippet = Mercury.snippet
+      snippet.setOptions(serializedForm)
+      Mercury.snippet = null
+    else
+      snippet = Mercury.Snippet.create(@options.snippetName, serializedForm)
+    Mercury.trigger('action', {action: 'insertSnippet', value: snippet})
+    @hide()

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

@@ -0,0 +1,54 @@
+@Mercury.modalHandlers.insertTable = ->
+  table = @element.find('#table_display table')
+
+  # make td's selectable
+  table.on 'click', (event) =>
+    cell = jQuery(event.target)
+    table = cell.closest('table')
+    table.find('.selected').removeAttr('class')
+    cell.addClass('selected')
+    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').on 'click', (event) =>
+    action = jQuery(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').on 'change', =>
+    table.attr({align: @element.find('#table_alignment').val()})
+
+  # set the border
+  @element.find('#table_border').on 'keyup', =>
+    table.attr({border: parseInt(@element.find('#table_border').val())})
+
+  # set the cellspacing
+  @element.find('#table_spacing').on 'keyup', =>
+    table.attr({cellspacing: parseInt(@element.find('#table_spacing').val())})
+
+  # build the table on form submission
+  @element.find('form').on 'submit', (event) =>
+    event.preventDefault()
+    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})
+    @hide()