kiteditor 1.0.11 → 1.0.12

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

@@ -34,7 +34,7 @@
 #
 @Mercury ||= {}
 jQuery.extend @Mercury,
-  version: '0.3.0'
+  version: '0.9.0'
 
   # Mercury object namespaces
   Regions: Mercury.Regions || {}
@@ -55,6 +55,14 @@ jQuery.extend @Mercury,
     jQuery(window).on("mercury:#{eventName}", callback)
 
 
+  off: (eventName, callback) ->
+    jQuery(window).off("mercury:#{eventName}", callback)
+
+
+  one: (eventName, callback) ->
+    jQuery(window).one("mercury:#{eventName}", callback)
+
+
   trigger: (eventName, options) ->
     Mercury.log(eventName, options)
     jQuery(window).trigger("mercury:#{eventName}", options)
@@ -92,6 +100,7 @@ jQuery.extend @Mercury,
   locale: ->
     return Mercury.determinedLocale if Mercury.determinedLocale
     if Mercury.config.localization.enabled
+      debugger
       locale = []
       if navigator.language && (locale = navigator.language.toString().split('-')).length
         topLocale = Mercury.I18n[locale[0]] || {}

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

@@ -1,19 +1,27 @@
 @Mercury.modal = (url, options = {}) ->
-  Mercury.modal.show(url, options)
-  return Mercury.modal
+  instance = new Mercury.Modal(url, options)
+  instance.show()
+  return instance
 
-jQuery.extend Mercury.modal,
-  minWidth: 500
+class @Mercury.Modal
+
+  constructor: (@url, @options = {}) ->
+
+
+  show: (url = null, options = null) ->
+    @url = url || @url
+    @options = options || @options
+    @options.minWidth ||= 400
+    @options.ujsHandling = true unless @options.ujsHandling == false
 
-  show: (@url, @options = {}) ->
     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()
@@ -21,20 +29,23 @@ jQuery.extend Mercury.modal,
 
 
   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'})
-
+    @element = jQuery('.mercury-modal')
+    @overlay = jQuery('.mercury-modal-overlay')
+    
+    unless @element.get(0) && @overlay.get(0)
+      @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'})
+      
+      @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+      @overlay.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+    
     @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)
@@ -46,12 +57,13 @@ jQuery.extend Mercury.modal,
     @titleElement.find('a').on 'click', =>
       @hide()
 
-    @element.on 'ajax:beforeSend', (event, xhr, options) =>
-      options.success = (content) =>
-        @loadContent(content)
+    if @options.ujsHandling
+      @element.on 'ajax:beforeSend', (event, xhr, options) =>
+        options.success = (content) =>
+          @loadContent(content)
 
     jQuery(document).on 'keydown', (event) =>
-       @hide() if event.keyCode == 27 && @visible
+      @hide() if event.keyCode == 27 && @visible
 
 
   appear: ->
@@ -85,18 +97,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
-    if @fix_height
-      height = @fix_height
+    width = @options.minWidth if width < @options.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})
+        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'})
 
@@ -111,15 +121,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'})
 
@@ -143,7 +153,7 @@ jQuery.extend Mercury.modal,
     return unless @url
     @element.addClass('loading')
     if Mercury.preloadedViews[@url]
-      setTimeout(10, => @loadContent(Mercury.preloadedViews[@url]))
+      setTimeout((=> @loadContent(Mercury.preloadedViews[@url])), 10)
     else
       jQuery.ajax @url, {
         headers: Mercury.ajaxHeaders()
@@ -157,7 +167,7 @@ jQuery.extend Mercury.modal,
 
 
   loadContent: (data, options = null) ->
-    @initialize()
+    @initializeModal()
     @options = options || @options
     @setTitle()
     @loaded = true
@@ -172,11 +182,20 @@ 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
+    @element.find('.modal-close').on('click', @hide)
     @resize()
 
 
@@ -186,15 +205,18 @@ jQuery.extend Mercury.modal,
     if @options.closeButton == false then closeButton.hide() else closeButton.show()
 
 
+  serializeForm: ->
+    return @element.find('form').serializeObject() || {}
+
+
   reset: ->
     @titleElement.find('span').html('')
     @contentElement.html('')
 
 
-  hide: ->
+  hide: =>
     return if @showing
     @options = {}
-    @initialized = false
 
     Mercury.trigger('focus:frame')
     @element.hide()

data/{vendor → 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/{vendor → 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

@@ -0,0 +1,152 @@
+@Mercury.modalHandlers.insertLink = {
+
+  initialize: ->
+    @editing = false
+    @content = null
+
+    # 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', => @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
+    img = /<img/.test(selection.htmlContent()) if selection.htmlContent
+    return false unless img || a && a.length
+
+    # don't allow changing the content on edit
+    @element.find('#link_text_container').hide()
+
+    @content = selection.htmlContent() if img
+
+    return false unless a && a.length
+    @editing = a
+
+    # 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)
+
+
+  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=link_type]:checked').val()
+
+    el = @element.find("#link_#{type}")
+    @addInputError(el, "can't be blank") unless el.val()
+
+    if !@editing && !@content
+      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()
+
+    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 || content}
+
+    if @editing
+      Mercury.trigger('action', {action: 'replaceLink', value: value, node: @editing.get(0)})
+    else
+      Mercury.trigger('action', {action: 'insertLink', value: value})
+
+}

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

@@ -0,0 +1,132 @@
+@Mercury.modalHandlers.insertMedia = {
+
+  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()
+
+
+  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 image = selection.is?('img')
+      @element.find('#media_image_url').val(image.attr('src'))
+      @element.find('#media_image_alignment').val(image.attr('align'))
+      @element.find('#media_image_float').val(if image.attr('style')? then image.css('float') else '')
+      @focus('#media_image_url')
+
+    # if we're editing an iframe (assume it's a video for now)
+    if iframe = selection.is?('iframe')
+      src = iframe.attr('src')
+      if /^https?:\/\/www.youtube.com\//i.test(src)
+        # it's a youtube video
+        @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())
+        @focus('#media_youtube_url')
+      else if /^https?:\/\/player.vimeo.com\//i.test(src)
+        # it's a vimeo video
+        @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())
+        @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()
+
+
+  submitForm: ->
+    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()
+        attrs['style'] = 'float: ' + float + ';' if float = @element.find('#media_image_float').val()
+        Mercury.trigger('action', {action: 'insertImage', value: attrs})
+
+      when 'youtube_url'
+        url = @element.find('#media_youtube_url').val()
+        code = url.replace(/https?:\/\/youtu.be\//, '')
+        protocol = 'http'
+        protocol = 'https' if /^https:/.test(url)
+        value = jQuery('<iframe>', {
+          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'
+        })
+        Mercury.trigger('action', {action: 'insertHTML', value: value})
+
+      when 'vimeo_url'
+        url = @element.find('#media_vimeo_url').val()
+        code = url.replace(/^https?:\/\/vimeo.com\//, '')
+        protocol = 'http'
+        protocol = 'https' if /^https:/.test(url)
+        value = jQuery('<iframe>', {
+          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})
+
+}