mercury-rails 0.6.0 → 0.7.0

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

@@ -34,7 +34,7 @@
 #
 @Mercury ||= {}
 jQuery.extend @Mercury,
-  version: '0.6.0'
+  version: '0.7.0'
 
   # Mercury object namespaces
   Regions: Mercury.Regions || {}

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

@@ -1,19 +1,27 @@
 @Mercury.modal = (url, options = {}) ->
-  Mercury.modal.show(url, options)
-  return Mercury.modal
+  Mercury.modal.instance ||= new Mercury.Modal(url, options)
+  Mercury.modal.instance.show(url, options)
+  return Mercury.modal.instance
 
-jQuery.extend Mercury.modal,
-  minWidth: 400
 
-  show: (@url, @options = {}) ->
+class @Mercury.Modal
+
+  constructor: (@url, @options = {}) ->
+
+
+  show: (url = null, options = null) ->
+    @url = url || @url
+    @options = options || @options
+    @options.minWidth ||= 400
+
     Mercury.trigger('focus:window')
-    @initialize()
+    @initializeModal()
     if @visible then @update() else @appear()
     if @options.content
-      setTimeout 500, => @loadContent(@options.content)
+      setTimeout((=> @loadContent(@options.content)), 500)
 
 
-  initialize: ->
+  initializeModal: ->
     return if @initialized
     @build()
     @bindEvents()
@@ -51,7 +59,7 @@ jQuery.extend Mercury.modal,
         @loadContent(content)
 
     jQuery(document).on 'keydown', (event) =>
-       @hide() if event.keyCode == 27 && @visible
+      @hide() if event.keyCode == 27 && @visible
 
 
   appear: ->
@@ -81,16 +89,16 @@ jQuery.extend Mercury.modal,
 
     height = @contentElement.outerHeight() + titleHeight
 
-    width = @minWidth if width < @minWidth
-    height = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 20 || @options.fullHeight
+    width = @options.minWidth if width < @options.minWidth
+    height = Mercury.displayRect.fullHeight if height > Mercury.displayRect.fullHeight || @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})
+        controlHeight = if @contentControl.length then @contentControl.outerHeight() + 10 else 0
+        @contentPane.css({height: height - titleHeight - controlHeight - 20})
+        @contentPane.find('.mercury-display-pane').css({width: width - 20})
       else
         @contentElement.css({height: height - titleHeight, overflow: 'auto'})
 
@@ -105,15 +113,15 @@ jQuery.extend Mercury.modal,
     width = @element.width()
     height = @element.height()
 
-    width = @minWidth if width < @minWidth
-    height = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 20 || @options.fullHeight
+    width = @options.minWidth if width < @options.minWidth
+    height = Mercury.displayRect.fullHeight if height > Mercury.displayRect.fullHeight || @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})
+      controlHeight = if @contentControl.length then @contentControl.outerHeight() + 10 else 0
+      @contentPane.css({height: height - titleHeight - controlHeight - 20})
+      @contentPane.find('.mercury-display-pane').css({width: width - 20})
     else
       @contentElement.css({height: height - titleHeight, overflow: 'auto'})
 
@@ -151,7 +159,7 @@ jQuery.extend Mercury.modal,
 
 
   loadContent: (data, options = null) ->
-    @initialize()
+    @initializeModal()
     @options = options || @options
     @setTitle()
     @loaded = true
@@ -166,9 +174,17 @@ jQuery.extend Mercury.modal,
     @options.afterLoad.call(@) if @options.afterLoad
     if @options.handler
       if Mercury.modalHandlers[@options.handler]
-        Mercury.modalHandlers[@options.handler].call(@)
+        if typeof(Mercury.modalHandlers[@options.handler]) == 'function'
+          Mercury.modalHandlers[@options.handler].call(@)
+        else
+          jQuery.extend(@, Mercury.modalHandlers[@options.handler])
+          @initialize()
       else if Mercury.lightviewHandlers[@options.handler]
-        Mercury.lightviewHandlers[@options.handler].call(@)
+        if typeof(Mercury.lightviewHandlers[@options.handler]) == 'function'
+          Mercury.lightviewHandlers[@options.handler].call(@)
+        else
+          jQuery.extend(@, Mercury.lightviewHandlers[@options.handler])
+          @initialize()
 
     @element.localize(Mercury.locale()) if Mercury.config.localization.enabled
     @resize()
@@ -188,7 +204,6 @@ jQuery.extend Mercury.modal,
   hide: ->
     return if @showing
     @options = {}
-    @initialized = false
 
     Mercury.trigger('focus:frame')
     @element.hide()

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

@@ -1,4 +1,5 @@
 @Mercury.modalHandlers.htmlEditor = ->
+
   # fill the text area with the content
   content = Mercury.region.content(null, true, false)
   @element.find('textarea').val(content)

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

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

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

@@ -1,67 +1,117 @@
-@Mercury.modalHandlers.insertLink = ->
-  # make the inputs work with the radio buttons
-  @element.find('label input').on 'click', ->
-    jQuery(@).closest('label').next('.selectable').focus()
+@Mercury.modalHandlers.insertLink = {
 
-  @element.find('.selectable').on 'focus', ->
-    jQuery(@).prev('label').find('input[type=radio]').prop("checked", true)
+  initialize: ->
+    # make the inputs work with the radio buttons
+    @element.find('.control-label input').on('click', @onLabelChecked)
+    @element.find('.controls .optional, .controls .required').on('focus', @onInputFocused)
 
-  # show/hide the link target options on target change
-  @element.find('#link_target').on 'change', =>
+    # show/hide the link target options on target change
+    @element.find('#link_target').on('change', => @onChangeTarget())
+
+    @initializeForm()
+
+    # build the link on form submission
+    @element.find('form').on 'submit', (event) =>
+      event.preventDefault()
+      @validateForm()
+      unless @valid
+        @resize()
+        return
+      @submitForm()
+      @hide()
+
+
+  initializeForm: ->
+    @fillExistingBookmarks()
+
+    # get the selection and initialize its information into the form
+    return unless Mercury.region && Mercury.region.selection
+    selection = Mercury.region.selection()
+
+    # set the text content
+    @element.find('#link_text').val(selection.textContent()) if selection.textContent
+
+    # if we're editing a link prefill the information
+    a = selection.commonAncestor(true).closest('a') if selection && selection.commonAncestor
+    return false unless a && a.length
+    @editing = a
+
+    # 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 a.attr('href') && a.attr('href').indexOf('#') == 0
+      bookmarkSelect = @element.find('#link_existing_bookmark')
+      bookmarkSelect.val(a.attr('href').replace(/[^#]*#/, ''))
+      bookmarkSelect.closest('.control-group').find('input[type=radio]').prop('checked', true)
+    else
+      @element.find('#link_external_url').val(a.attr('href'))
+
+    # if it has a name, assume it's a bookmark target
+    if a.attr('name')
+      newBookmarkInput = @element.find('#link_new_bookmark')
+      newBookmarkInput.val(a.attr('name'))
+      newBookmarkInput.closest('.control-group').find('input[type=radio]').prop('checked', true)
+
+    # if it has a target, select it, and try to pull options out
+    if a.attr('target')
+      @element.find('#link_target').val(a.attr('target'))
+
+    # if it's a popup window
+    if a.attr('href') && a.attr('href').indexOf('javascript:void') == 0
+      href = a.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()
+
+
+  fillExistingBookmarks: ->
+    bookmarkSelect = @element.find('#link_existing_bookmark')
+    for tag in jQuery('a[name]', window.mercuryInstance.document)
+      bookmarkSelect.append(jQuery('<option>', {value: jQuery(tag).attr('name')}).text(jQuery(tag).text()))
+
+
+  onLabelChecked: ->
+    forInput = jQuery(@).closest('.control-label').attr('for')
+    jQuery(@).closest('.control-group').find("##{forInput}").focus()
+
+
+  onInputFocused: ->
+    jQuery(@).closest('.control-group').find('input[type=radio]').prop('checked', true)
+
+
+  onChangeTarget: ->
     @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()
+  addInputError: (input, message) ->
+    input.after('<span class="help-inline error-message">' + Mercury.I18n(message) + '</span>').closest('.control-group').addClass('error')
+    @valid = false
 
-    # 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()
+  clearInputErrors: ->
+    @element.find('.control-group.error').removeClass('error').find('.error-message').remove()
+    @valid = true
 
-      # 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()
+  validateForm: ->
+    @clearInputErrors()
+
+    type = @element.find('input[name=link_type]:checked').val()
+
+    el = @element.find("#link_#{type}")
+    @addInputError(el, "can't be blank") unless el.val()
+
+    unless @editing
+      el = @element.find('#link_text')
+      @addInputError(el, "can't be blank") unless el.val()
 
+
+  submitForm: ->
     content = @element.find('#link_text').val()
     target = @element.find('#link_target').val()
     type = @element.find('input[name=link_type]:checked').val()
@@ -74,19 +124,20 @@
     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'
+        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
+      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)})
+    if @editing
+      Mercury.trigger('action', {action: 'replaceLink', value: value, node: @editing.get(0)})
     else
       Mercury.trigger('action', {action: 'insertLink', value: value})
 
-    @hide()
+}

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

@@ -1,46 +1,97 @@
-@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()
+@Mercury.modalHandlers.insertMedia = {
 
-  @element.find('.selectable').on 'focus', (event) =>
-    element = jQuery(event.target)
-    element.prev('label').find('input[type=radio]').prop("checked", true)
+  initialize: ->
+    @element.find('.control-label input').on('click', @onLabelChecked)
+    @element.find('.controls .optional, .controls .required').on('focus', (event) => @onInputFocused($(event.target)))
+
+    @focus('#media_image_url')
+    @initializeForm()
+
+    # build the image or embed/iframe on form submission
+    @element.find('form').on 'submit', (event) =>
+      event.preventDefault()
+      @validateForm()
+      unless @valid
+        @resize()
+        return
+      @submitForm()
+      @hide()
 
-    @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
+  initializeForm: ->
+    # get the selection and initialize its information into the form
+    return unless 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')
+    if image = selection.is?('img')
       @element.find('#media_image_url').val(image.attr('src'))
       @element.find('#media_image_alignment').val(image.attr('align'))
-      setTimeout((=> @element.find('#media_image_url').focus()), 300)
+      @focus('#media_image_url')
 
     # if we're editing an iframe (assume it's a video for now)
-    if selection.is && iframe = selection.is('iframe')
+    if iframe = selection.is?('iframe')
       src = iframe.attr('src')
-      if src.indexOf('http://www.youtube.com') > -1
+      if /^https?:\/\/www.youtube.com\//i.test(src)
         # it's a youtube video
-        @element.find('#media_youtube_url').val("http://youtu.be/#{src.match(/\/embed\/(\w+)/)[1]}")
+        @element.find('#media_youtube_url').val("#{src.match(/^https?/)[0]}://youtu.be/#{src.match(/\/embed\/(\w+)/)[1]}")
         @element.find('#media_youtube_width').val(iframe.width())
         @element.find('#media_youtube_height').val(iframe.height())
-        setTimeout((=> @element.find('#media_youtube_url').focus()), 300)
-      else if src.indexOf('http://player.vimeo.com') > -1
+        @focus('#media_youtube_url')
+      else if /^https?:\/\/player.vimeo.com\//i.test(src)
         # it's a vimeo video
-        @element.find('#media_vimeo_url').val("http://vimeo.com/#{src.match(/\/video\/(\w+)/)[1]}")
+        @element.find('#media_vimeo_url').val("#{src.match(/^https?/)[0]}://vimeo.com/#{src.match(/\/video\/(\w+)/)[1]}")
         @element.find('#media_vimeo_width').val(iframe.width())
         @element.find('#media_vimeo_height').val(iframe.height())
-        setTimeout((=> @element.find('#media_vimeo_url').focus()), 300)
+        @focus('#media_vimeo_url')
+
+
+  focus: (selector) ->
+    setTimeout((=> @element.find(selector).focus()), 300)
+
+
+  onLabelChecked: ->
+    forInput = jQuery(@).closest('.control-label').attr('for')
+    jQuery(@).closest('.control-group').find("##{forInput}").focus()
+
+
+  onInputFocused: (input) ->
+    input.closest('.control-group').find('input[type=radio]').prop('checked', true)
+
+    return if input.closest('.media-options').length
+    @element.find(".media-options").hide()
+    @element.find("##{input.attr('id').replace('media_', '')}_options").show()
+    @resize(true)
+
+
+  addInputError: (input, message) ->
+    input.after('<span class="help-inline error-message">' + Mercury.I18n(message) + '</span>').closest('.control-group').addClass('error')
+    @valid = false
+
+
+  clearInputErrors: ->
+    @element.find('.control-group.error').removeClass('error').find('.error-message').remove()
+    @valid = true
+
+
+  validateForm: ->
+    @clearInputErrors()
+
+    type = @element.find('input[name=media_type]:checked').val()
+    el = @element.find("#media_#{type}")
+
+    switch type
+      when 'youtube_url'
+        url = @element.find('#media_youtube_url').val()
+        @addInputError(el, "is invalid") unless /^https?:\/\/youtu.be\//.test(url)
+      when 'vimeo_url'
+        url = @element.find('#media_vimeo_url').val()
+        @addInputError(el, "is invalid") unless /^https?:\/\/vimeo.com\//.test(url)
+      else
+        @addInputError(el, "can't be blank") unless el.val()
 
 
-  # build the image or youtube embed on form submission
-  @element.find('form').on 'submit', (event) =>
-    event.preventDefault()
+  submitForm: ->
     type = @element.find('input[name=media_type]:checked').val()
 
     switch type
@@ -51,15 +102,12 @@
 
       when 'youtube_url'
         url = @element.find('#media_youtube_url').val()
-        unless /^https?:\/\/youtu.be\//.test(url)
-          Mercury.notify('Error: The provided youtube share url was invalid.')
-          return
         code = url.replace(/https?:\/\/youtu.be\//, '')
         protocol = 'http'
         protocol = 'https' if /^https:/.test(url)
         value = jQuery('<iframe>', {
-          width: @element.find('#media_youtube_width').val() || 560,
-          height: @element.find('#media_youtube_height').val() || 349,
+          width: parseInt(@element.find('#media_youtube_width').val(), 10) || 560,
+          height: parseInt(@element.find('#media_youtube_height').val(), 10) || 349,
           src: "#{protocol}://www.youtube.com/embed/#{code}?wmode=transparent",
           frameborder: 0,
           allowfullscreen: 'true'
@@ -68,18 +116,15 @@
 
       when 'vimeo_url'
         url = @element.find('#media_vimeo_url').val()
-        unless /^https?:\/\/vimeo.com\//.test(url)
-          Mercury.notify('Error: The provided vimeo url was invalid.')
-          return
         code = url.replace(/^https?:\/\/vimeo.com\//, '')
         protocol = 'http'
         protocol = 'https' if /^https:/.test(url)
         value = jQuery('<iframe>', {
-          width: @element.find('#media_vimeo_width').val() || 400,
-          height: @element.find('#media_vimeo_height').val() || 225,
+          width: parseInt(@element.find('#media_vimeo_width').val(), 10) || 400,
+          height: parseInt(@element.find('#media_vimeo_height').val(), 10) || 225,
           src: "#{protocol}://player.vimeo.com/video/#{code}?title=1&byline=1&portrait=0&color=ffffff",
           frameborder: 0
         })
         Mercury.trigger('action', {action: 'insertHTML', value: value})
 
-    @hide()
+}