mercury-rails 0.1.2 → 0.2.0

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

@@ -0,0 +1,157 @@
+# # Mercury Dialog
+#
+# Dialog is a base class that's used by Palette, Select, Panel, and through Palette, the Toolbar.Expander.  It's basic
+# function is to provide an interface element that can be opened, interacted with, and then closed.
+#
+class @Mercury.Dialog
+
+  # The constructor expects a url to load, a name, and options.
+  #
+  # @url _string_ used to load the contents, either using Ajax or by pulling content from preloadedViews
+  #
+  # @name _string_ used in building of the element, and is assigned as part of the elements class (eg.
+  #     `mercury-[name]-dialog`)
+  #
+  # @options _object_
+  #
+  # **Options**
+  #
+  # @for _Toolbar.Button_ used so the dialog can be shown/hidden based on button interactions.
+  #
+  # @preload _boolean_ if true, the view for this dialog will be loaded prior to being shown, otherwise the view will be
+  #     loaded the first time it's shown, and cached for all future interactions.
+  #
+  # @appendTo _element_ you can append a dialog to any element by providing this option.
+  constructor: (@url, @name, @options = {}) ->
+    @button = @options.for
+
+    @build()
+    @bindEvents()
+    @preload()
+
+
+  # ## #build
+  #
+  # Builds the element and appends it to the DOM.  You can provide an element to append it to in the options, otherwise
+  # it will be appended to the body.
+  build: ->
+    @element = jQuery('<div>', {class: "mercury-dialog mercury-#{@name}-dialog loading", style: 'display:none'})
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+
+
+  # ## #bindEvents
+  #
+  # Bind to all the events we should handle.  In this case we only stop the mousedown event, since dialogs aren't
+  # expected to have inputs etc.
+  #
+  # **Note:** By stopping the mousedown event we're limiting what's possible in dialogs, but this is needed to keep
+  # focus from being taken away from the active region when different things are clicked on in dialogs.
+  bindEvents: ->
+    @element.mousedown (event) -> event.stopPropagation()
+
+
+  # ## #preload
+  #
+  # If the options dictate that the content should be preloaded we load the view before we do anything else.  This is
+  # useful if you don't want to make the user wait the half second or however long the server may take to respond when
+  # they open various dialogs.
+  preload: ->
+    @load() if @options.preload
+
+
+  # ## #toggle
+  #
+  # Toggle the dialog based on current visibility.
+  toggle: ->
+    if @visible then @hide() else @show()
+
+
+  # ## #resize
+  #
+  # In the base class resize just calls through to show, but in the implementation classes resize typically adjusts the
+  # size based on it's contents.
+  resize: ->
+    @show()
+
+
+  # ## #show
+  #
+  # When showing a dialog it's expected that all other dialogs will close, and we fire an event for this.  The dialog is
+  # then positioned and shown.  The show animation of the dialog is typically dictated by the implementation class.
+  show: ->
+    # Tell all other dialogs to close.
+    Mercury.trigger('hide:dialogs', @)
+    @visible = true
+    if @loaded
+      @element.css({width: 'auto', height: 'auto'})
+      @position(@visible)
+    else
+      @position()
+    # Then show the element.
+    @appear()
+
+
+  # ## #position
+  #
+  # Interface method.  Implemenations are expected to position the dialog themselves.
+  #
+  # @keepVisible _boolean_ specifies if the element should stay visible if it's already visible.
+  position: (keepVisible) ->
+
+
+  # ## #appear
+  #
+  # Animate the element into view.  After it's done showing, we load and resize it if it's not already loaded, so in
+  # cases where content is not preloaded we can display the dialog, fill it's contents, and then animate the resize.
+  appear: ->
+    @element.css({display: 'block', opacity: 0})
+    @element.animate {opacity: 0.95}, 200, 'easeInOutSine', =>
+      @load(=> @resize()) unless @loaded
+
+
+  # ## #hide
+  #
+  # Hides the element and keeps track of it's visibility.
+  hide: ->
+    @element.hide()
+    @visible = false
+
+
+  # ## #load
+  #
+  # Fetches the content that will be loaded into the dialog.
+  #
+  # @callback _function_ will be called after the content is loaded.
+  load: (callback) ->
+    return unless @url
+    if Mercury.preloadedViews[@url]
+      # If there's a preloadedView defined for the url being requested, load that one.
+      @loadContent(Mercury.preloadedViews[@url])
+      # And call the dialog handler if there's one.  We've broken the handlers out into seperate files so they can be
+      # tested more easily, but you can define your own by putting them in dialogHanders.
+      Mercury.dialogHandlers[@name].call(@) if Mercury.dialogHandlers[@name]
+      callback() if callback
+    else
+      # Otherwise make an Ajax request to get the content.
+      jQuery.ajax @url, {
+        success: (data) =>
+          @loadContent(data)
+          Mercury.dialogHandlers[@name].call(@) if Mercury.dialogHandlers[@name]
+          callback() if callback
+        error: =>
+          # If the Ajax fails, we hide the dialog and alert the user about the error.
+          @hide()
+          @button.removeClass('pressed') if @button
+          alert("Mercury was unable to load #{@url} for the #{@name} dialog.")
+      }
+
+
+  # ## #loadContent
+  #
+  # Loads content into the element, and removes the loading class.
+  #
+  # @data _mixed_ a string or jQuery object that can be inserted into the dialog.
+  loadContent: (data) ->
+    @loaded = true
+    @element.removeClass('loading')
+    @element.html(data)

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

@@ -1,4 +1,4 @@
-@Mercury.dialogHandlers.objectsPanel = ->
+@Mercury.dialogHandlers.snippetPanel = ->
   # make the filter work
   @element.find('input.filter').keyup =>
     value = @element.find('input.filter').val()

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

@@ -0,0 +1,156 @@
+@Mercury.lightview = (url, options = {}) ->
+  Mercury.lightview.show(url, options)
+  return Mercury.lightview
+
+jQuery.extend Mercury.lightview, {
+
+  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 = jQuery('<div>', {class: 'mercury-lightview loading'})
+    @element.html('<h1 class="mercury-lightview-title"><span></span></h1>')
+    @element.append('<div class="mercury-lightview-content"></div>')
+
+    @overlay = jQuery('<div>', {class: 'mercury-lightview-overlay'})
+
+    @titleElement = @element.find('.mercury-lightview-title')
+    @contentElement = @element.find('.mercury-lightview-content')
+
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+
+    @titleElement.find('span').html(@options.title)
+
+
+  bindEvents: ->
+    Mercury.bind 'refresh', => @resize(true)
+    Mercury.bind 'resize', => @position() if @visible
+
+    @overlay.click => @hide()
+
+    jQuery(document).bind 'keydown', (event) =>
+       @hide() if event.keyCode == 27 && @visible
+
+
+  appear: ->
+    @position()
+
+    @overlay.show().css({opacity: 0})
+    @overlay.animate {opacity: 1}, 200, 'easeInOutSine', =>
+      @setTitle()
+      @element.show().css({opacity: 0})
+      @element.animate {opacity: 1}, 200, 'easeInOutSine', =>
+        @visible = true
+        @load()
+
+
+  resize: (keepVisible) ->
+    viewportWidth = Mercury.displayRect.width
+    viewportHeight = Mercury.displayRect.fullHeight
+
+    @element.css({overflow: 'hidden'})
+    @contentElement.css({visibility: 'hidden', display: 'none', width: 'auto', height: 'auto'})
+
+    width = @contentElement.outerWidth() + 40 + 2
+    width = viewportWidth - 40 if width > viewportWidth - 40 || @options.fullSize
+    height = @contentElement.outerHeight() + @titleElement.outerHeight() + 30
+    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullSize
+
+    width = 300 if width < 300
+    height = 150 if height < 150
+
+    @element.stop().animate {top: ((viewportHeight - height) / 2) + 10, left: (Mercury.displayRect.width - width) / 2, width: width, height: height}, 200, 'easeInOutSine', =>
+      @contentElement.css({visibility: 'visible', display: 'block', opacity: 0})
+      @contentElement.stop().animate({opacity: 1}, 200, 'easeInOutSine')
+      @element.css({overflow: 'auto'})
+
+
+  position: ->
+    viewportWidth = Mercury.displayRect.width
+    viewportHeight = Mercury.displayRect.fullHeight
+
+    @contentElement.css({position: 'absolute', width: 'auto', height: 'auto'})
+    width = @contentElement.width() + 40 + 2
+    width = viewportWidth - 40 if width > viewportWidth - 40 || @options.fullSize
+
+    height = @contentElement.height() + @titleElement.outerHeight() + 30
+    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullSize
+    @contentElement.css({position: 'relative'})
+
+    width = 300 if width < 300
+    height = 150 if height < 150
+
+    @element.css({top: ((viewportHeight - height) / 2) + 10, left: (viewportWidth - width) / 2, width: width, height: height, overflow: 'auto'})
+    @contentElement.css({width: width - 40, height: height - 30 - @titleElement.outerHeight()}) if @visible
+
+
+  update:  ->
+    @reset()
+    @resize()
+    @load()
+
+
+  load: ->
+    @setTitle()
+    return unless @url
+    @element.addClass('loading')
+    if Mercury.preloadedViews[@url]
+      setTimeout((=> @loadContent(Mercury.preloadedViews[@url])), 10)
+    else
+      jQuery.ajax @url, {
+        type: @options.loadType || 'get'
+        data: @options.loadData
+        success: (data) => @loadContent(data)
+        error: =>
+          @hide()
+          alert("Mercury was unable to load #{@url} for the lightview.")
+      }
+
+
+  loadContent: (data, options = null) ->
+    @initialize()
+    @options = options || @options
+    @setTitle()
+    @loaded = true
+    @element.removeClass('loading')
+    @contentElement.html(data)
+    @contentElement.css({display: 'none', visibility: 'hidden'})
+
+    @options.afterLoad.call(@) if @options.afterLoad
+    if @options.handler && Mercury.lightviewHandlers[@options.handler]
+      Mercury.lightviewHandlers[@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/vendor/assets/javascripts/mercury/lightviews/imageprocessor.js.coffee

@@ -0,0 +1,2 @@
+@Mercury.lightviewHandlers.imageProcessor = ->
+  ''

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

@@ -0,0 +1,63 @@
+# ## Require all the dependencies
+#= require mercury_dependencies/jquery-1.6
+#= require mercury_dependencies/jquery-ui-1.8.13.custom
+#= require mercury_dependencies/jquery.additions
+#= require mercury_dependencies/liquidmetal
+#= require mercury_dependencies/showdown
+#
+# ## Require all mercury files
+#= require_self
+#= require ./native_extensions
+#= require ./page_editor
+#= require ./history_buffer
+#= require ./table_editor
+#= require ./dialog
+#= require ./palette
+#= require ./select
+#= require ./panel
+#= require ./modal
+#= require ./lightview
+#= require ./statusbar
+#= require ./toolbar
+#= require ./toolbar.button
+#= require ./toolbar.button_group
+#= require ./toolbar.expander
+#= require ./tooltip
+#= require ./snippet
+#= require ./snippet_toolbar
+#= require ./region
+#= require ./uploader
+#= require_tree ./regions
+#= require_tree ./dialogs
+#= require_tree ./modals
+#
+@Mercury ||= {}
+jQuery.extend @Mercury, {
+  version: '0.2.0'
+
+  # No IE support yet because it doesn't follow the W3C standards for HTML5 contentEditable (aka designMode).
+  supported: document.getElementById && document.designMode && !jQuery.browser.konqueror && !jQuery.browser.msie
+
+  # Mercury object namespaces
+  Regions: {}
+  modalHandlers: {}
+  lightviewHandlers: {}
+  dialogHandlers: {}
+  preloadedViews: {}
+
+  # Custom event and logging methods
+  bind: (eventName, callback) ->
+    jQuery(document).bind("mercury:#{eventName}", callback)
+
+
+  trigger: (eventName, options) ->
+    Mercury.log(eventName, options)
+    jQuery(document).trigger("mercury:#{eventName}", options)
+
+
+  log: ->
+    if Mercury.debug && console
+      return if arguments[0] == 'hide:toolbar' || arguments[0] == 'show:toolbar'
+      try console.debug(arguments) catch e
+
+}

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

@@ -44,8 +44,12 @@ jQuery.extend Mercury.modal, {
 
     @titleElement.find('a').click => @hide()
 
+    jQuery(document).bind 'keydown', (event) =>
+       @hide() if event.keyCode == 27 && @visible
+
 
   appear: ->
+    @showing = true
     @position()
 
     @overlay.show()
@@ -55,14 +59,13 @@ jQuery.extend Mercury.modal, {
       @element.show()
       @element.animate {top: 0}, 200, 'easeInOutSine', =>
         @visible = true
+        @showing = false
         @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 = jQuery(window).height()
     titleHeight = @titleElement.outerHeight()
 
     width = @contentElement.outerWidth()
@@ -73,9 +76,9 @@ jQuery.extend Mercury.modal, {
     height = @contentElement.outerHeight() + titleHeight
 
     width = @minWidth if width < @minWidth
-    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullHeight
+    height = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 20 || @options.fullHeight
 
-    @element.stop().animate {left: (jQuery(window).width() - width) / 2, width: width, height: height}, 200, 'easeInOutSine', =>
+    @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'})
@@ -87,8 +90,7 @@ jQuery.extend Mercury.modal, {
 
 
   position: ->
-    viewportWidth = jQuery(window).width()
-    viewportHeight = jQuery(window).height()
+    viewportWidth = Mercury.displayRect.width
 
     @contentPane.css({height: 'auto'}) if @contentPane
     @contentElement.css({height: 'auto'})
@@ -98,7 +100,7 @@ jQuery.extend Mercury.modal, {
     height = @element.height()
 
     width = @minWidth if width < @minWidth
-    height = viewportHeight - 20 if height > viewportHeight - 20 || @options.fullHeight
+    height = Mercury.displayRect.fullHeight - 20 if height > Mercury.displayRect.fullHeight - 20 || @options.fullHeight
 
     titleHeight = @titleElement.outerHeight()
     if @contentPane && @contentPane.length
@@ -125,19 +127,23 @@ jQuery.extend Mercury.modal, {
 
 
   load: ->
-    @element.addClass('loading')
     @setTitle()
-    jQuery.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.")
-    }
+    return unless @url
+    @element.addClass('loading')
+    if Mercury.preloadedViews[@url]
+      setTimeout((=> @loadContent(Mercury.preloadedViews[@url])), 10)
+    else
+      jQuery.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) ->
+  loadContent: (data, options = null) ->
     @initialize()
     @options = options || @options
     @setTitle()
@@ -167,6 +173,8 @@ jQuery.extend Mercury.modal, {
 
 
   hide: ->
+    return if @showing
+
     Mercury.trigger('focus:frame')
     @element.hide()
     @overlay.hide()