mercury-rails 0.3.1 → 0.5.0

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

@@ -2,17 +2,23 @@ class @Mercury.Snippet
 
   @all: []
 
-  @displayOptionsFor: (name) ->
-    Mercury.modal Mercury.config.snippets.optionsUrl.replace(':name', name), {
+  @displayOptionsFor: (name, options = {}) ->
+    Mercury.modal Mercury.config.snippets.optionsUrl.replace(':name', name), jQuery.extend({
       title: 'Snippet Options'
       handler: 'insertSnippet'
       snippetName: name
-    }
+    }, options)
     Mercury.snippet = null
 
 
   @create: (name, options) ->
-    identity = "snippet_#{@all.length}"
+    if @all.length > 0
+      identity = "snippet_0"
+      for snippet, i in @all
+        identity = "snippet_#{i+1}" if snippet.identity == identity
+    else
+      identity = "snippet_#{@all.length}"
+
     instance = new Mercury.Snippet(name, identity, options)
     @all.push(instance)
     return instance
@@ -30,17 +36,26 @@ class @Mercury.Snippet
       @all.push(instance)
 
 
+  @clearAll = ->
+    delete @all
+    @all = []
+
+
   constructor: (@name, @identity, options = {}) ->
     @version = 0
     @data = ''
+    @wrapperTag = 'div'
     @history = new Mercury.HistoryBuffer()
     @setOptions(options)
 
 
   getHTML: (context, callback = null) ->
-    element = jQuery('<div class="mercury-snippet" contenteditable="false">', context)
-    element.attr({'data-snippet': @identity})
-    element.attr({'data-version': @version})
+    element = jQuery("<#{@wrapperTag}>", {
+      class: "mercury-snippet #{@name}-snippet"
+      contenteditable: "false"
+      'data-snippet': @identity
+      'data-version': @version
+    }, context)
     element.html("[#{@identity}]")
     @loadPreview(element, callback)
     return element
@@ -77,6 +92,7 @@ class @Mercury.Snippet
   setOptions: (@options) ->
     delete(@options['authenticity_token'])
     delete(@options['utf8'])
+    @wrapperTag = @options.wrapperTag if @options.wrapperTag
     @version += 1
     @history.push(@options)
 

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

@@ -1,6 +1,7 @@
 class @Mercury.SnippetToolbar extends Mercury.Toolbar
 
   constructor: (@document, @options = {}) ->
+    @_boundEvents = []
     super(@options)
 
 
@@ -14,23 +15,28 @@ class @Mercury.SnippetToolbar extends Mercury.Toolbar
 
 
   bindEvents: ->
-    Mercury.on 'show:toolbar', (event, options) =>
+    @bindReleasableEvent Mercury, 'show:toolbar', (event, options) =>
       return unless options.snippet
       options.snippet.mouseout => @hide()
       @show(options.snippet)
 
-    Mercury.on 'hide:toolbar', (event, options) =>
+    @bindReleasableEvent Mercury, 'hide:toolbar', (event, options) =>
       return unless options.type && options.type == 'snippet'
       @hide(options.immediately)
 
+    @bindReleasableEvent jQuery(@document), 'scroll', =>
+      @position() if @visible
+
     @element.mousemove =>
       clearTimeout(@hideTimeout)
 
     @element.mouseout =>
       @hide()
 
-    jQuery(@document).on 'scroll', =>
-      @position() if @visible
+
+  bindReleasableEvent: (target, eventName, handler)->
+    target.on eventName, handler
+    @_boundEvents.push [target, eventName, handler]
 
 
   show: (@snippet) ->
@@ -70,3 +76,9 @@ class @Mercury.SnippetToolbar extends Mercury.Toolbar
           @element.hide()
         @visible = false
 
+  release: ->
+    @element.off()
+    @element.remove()
+    target.off(eventName, handler) for [target, eventName, handler] in @_boundEvents
+    @_boundEvents = []
+

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

@@ -34,25 +34,25 @@ class @Mercury.Toolbar.Button
 
         when 'palette'
           @element.addClass("mercury-button-palette")
-          url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
-          @handled[type] = new Mercury.Palette(url, @name, @defaultDialogOptions())
+          result = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled[type] = if typeof result is 'string' then new Mercury.Palette(result, @name, @defaultDialogOptions()) else result
 
         when 'select'
           @element.addClass("mercury-button-select").find('em').html(@title)
-          url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
-          @handled[type] = new Mercury.Select(url, @name, @defaultDialogOptions())
+          result = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled[type] = if typeof result is 'string' then new Mercury.Select(result, @name, @defaultDialogOptions()) else result
 
         when 'panel'
           @element.addClass('mercury-button-panel')
-          url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
           @handled['toggle'] = true
-          @handled[type] = new Mercury.Panel(url, @name, @defaultDialogOptions())
+          result = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled[type] = if typeof result is 'string' then new Mercury.Panel(result, @name, @defaultDialogOptions()) else result
 
         when 'modal'
-          @handled[type] = if jQuery.isFunction(mixed) then mixed.apply(@, @name) else mixed
+          @handled[type] = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
 
         when 'lightview'
-          @handled[type] = if jQuery.isFunction(mixed) then mixed.apply(@, @name) else mixed
+          @handled[type] = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
 
         else throw Mercury.I18n('Unknown button type \"%s\" used for the \"%s\" button.', type, @name)
 

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

@@ -25,7 +25,6 @@ jQuery.extend Mercury.uploader,
 
   supported: ->
     xhr = new XMLHttpRequest
-    fileReader = window.FileReader
 
     if window.Uint8Array && window.ArrayBuffer && !XMLHttpRequest.prototype.sendAsBinary
       XMLHttpRequest::sendAsBinary = (datastr) ->
@@ -33,8 +32,13 @@ jQuery.extend Mercury.uploader,
         ui8a[index] = (datastr.charCodeAt(index) & 0xff) for data, index in datastr
         @send(ui8a.buffer)
 
-    return !!(xhr.upload && xhr.sendAsBinary && fileReader)
+    return !!(xhr.upload && xhr.sendAsBinary && (Mercury.uploader.fileReaderSupported() || Mercury.uploader.formDataSupported()))
 
+  fileReaderSupported: ->
+    !!(window.FileReader)
+  
+  formDataSupported: ->
+    !!(window.FormData)
 
   build: ->
     @element = jQuery('<div>', {class: 'mercury-uploader', style: 'display:none'})
@@ -86,8 +90,11 @@ jQuery.extend Mercury.uploader,
 
 
   loadImage: ->
-    @file.readAsDataURL (result) =>
-      @element.find('.mercury-uploader-preview b').html(jQuery('<img>', {src: result}))
+    if Mercury.uploader.fileReaderSupported()
+      @file.readAsDataURL (result) =>
+        @element.find('.mercury-uploader-preview b').html(jQuery('<img>', {src: result}))
+        @upload()
+    else
       @upload()
 
 
@@ -121,16 +128,28 @@ jQuery.extend Mercury.uploader,
     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
     xhr.setRequestHeader(Mercury.config.csrfHeader, Mercury.csrfToken)
 
-    @file.readAsBinaryString (result) =>
-      # build the multipart post string
-      multipart = new Mercury.uploader.MultiPartPost(Mercury.config.uploading.inputName, @file, result)
+    # Homespun multipart uploads. Chrome 18, Firefox 11.
+    #
+    if Mercury.uploader.fileReaderSupported()
+      @file.readAsBinaryString (result) =>
+        
+        multipart = new Mercury.uploader.MultiPartPost(Mercury.config.uploading.inputName, @file, result)
 
-      # update the content size so we can calculate
-      @file.updateSize(multipart.delta)
+        # update the content size so we can calculate
+        @file.updateSize(multipart.delta)
+
+        # set the content type and send
+        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + multipart.boundary)
+        xhr.sendAsBinary(multipart.body)
+    
+    # FormData based. Safari 5.1.2.
+    #
+    else
+      formData = new FormData()
+      formData.append(Mercury.config.uploading.inputName, @file.file, @file.file.name)
+
+      xhr.send(formData)
 
-      # set the content type and send
-      xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + multipart.boundary)
-      xhr.sendAsBinary(multipart.body)
 
 
   updateStatus: (message, loaded) ->
@@ -180,11 +199,10 @@ jQuery.extend Mercury.uploader,
 class Mercury.uploader.File
 
   constructor: (@file) ->
-    @size = @file.size
-    @fullSize = @file.size
-    @readableSize = @file.size.toBytes()
-    @name = @file.fileName
-    @type = @file.type
+    @fullSize = @size = @file.size || @file.fileSize
+    @readableSize = @size.toBytes()
+    @name = @file.name || @file.fileName
+    @type = @file.type || @file.fileType
 
     # add any errors if we need to
     errors = []

data/app/assets/stylesheets/mercury/buttons.css

@@ -0,0 +1,73 @@
+
+/*
+ * Buttons TODO: Refactor to a more generic button
+ *----------------------------------------------------------------------------*/
+.btn {
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  border-radius: 0.4em;
+  display: block;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', sans-serif;
+  font-size: 1.2em;
+  background: #f5f5f5;
+  border: 1px solid #a9a9a9;
+  color: #666;
+  cursor: pointer;
+  line-height: normal;
+  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
+  padding: 0.4em 0.8em;
+}
+.btn:visited {
+  color: #666;
+}
+.btn:hover,
+.btn:focus,
+.btn.active {
+  color: #666;
+  background: #ededed;
+}
+.btn:hover,
+.btn.active {
+  border: 1px solid #8f8f8f;
+}
+.btn:hover {
+  -webkit-box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  -moz-box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+}
+.btn:focus {
+  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6), inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6), inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 8px rgba(82, 168, 236, 0.6), inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(82, 168, 236, 0.8);
+  outline: 0;
+}
+.btn:active,
+.btn.active {
+  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Overrides for the blue "important" button */
+.btn.important {
+  background: #268bd2;
+  border: 1px solid #16527c;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.btn.important:visited {
+  color: #fff;
+}
+.btn.important:hover,
+.btn.important:focus,
+.btn.important.active {
+  color: #fff;
+  background: #2482c5;
+}
+.btn.important:hover,
+.btn.important.active {
+  border: 1px solid #0f3550;
+}
+

data/{vendor → app}/assets/stylesheets/mercury/dialog.css

@@ -42,13 +42,13 @@
 .mercury-panel {
   position: absolute;
   z-index: 10011;
-  background-color: #111;
+  background-color: #f5f5f5;
   opacity: .9;
   box-shadow: 1px 1px 4px rgba(0,0,0, .5);
   -moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
   border-radius: 4px;
   -moz-border-radius: 4px;
-  color: #FFF;
+  color: #333;
   font-family: Helvetica, Tahoma, Arial, sans-serif;
   font-size: 9.5pt;
   max-width: 500px;
@@ -69,14 +69,23 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  font-size: 10pt;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
+  color: #f5f5f5;
+  font-size: 10pt;
+  text-shadow: 1px 1px 2px rgba(0,0,0, .9);
+  border-bottom: 1px solid #222;
   height: 15px;
   cursor: move;
-  text-shadow: 1px 1px 2px rgba(0,0,0, .9);
+}
+.mercury-panel h1 span {
+  display: block;
+  width: 100%;
 }
 .mercury-panel h1 a.mercury-panel-close {
   position: absolute;

data/app/assets/stylesheets/mercury/form.css

@@ -0,0 +1,125 @@
+/*
+ * Forms
+ *---------------------------------------------------------------------------*/
+.mercury-form,
+.mercury-form ul,
+.mercury-form ol,
+.mercury-form li,
+.mercury-form fieldset,
+.mercury-form p {
+  margin: 0;
+  padding: 0;
+}
+.mercury-form abbr {
+  border: 0;
+  font-variant: normal;
+}
+.mercury-form fieldset {
+  margin-bottom: 10px;
+  background: #F6F6F6;
+  border: 1px solid #CCC;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
+}
+.mercury-form fieldset:last-child {
+  margin-bottom: 0;
+}
+.mercury-form fieldset legend {
+  font-weight: bold;
+  margin-left: 10px;
+  margin-bottom: -4px;
+}
+.mercury-form ol {
+  margin: 12px 9px;
+}
+.mercury-form ol li {
+  display: block;
+  margin-bottom: 10px;
+}
+.mercury-form label {
+  display: block;
+  float: left;
+  width: 23%;
+  margin-right: 9px;
+  text-align: right;
+  line-height: 27px;
+  font-size: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mercury-form label input {
+  width: auto !important;
+  margin: 0 5px 0 2px !important;
+}
+.mercury-form select,
+.mercury-form input[type=text],
+.mercury-form input[type=password],
+.mercury-form textarea,
+.mercury-form input.text {
+  margin: 0;
+  border: 2px solid #CCC;
+  padding: 2px 4px;
+  font-family: Arial, Geneva, sans-serif;
+  font-size: 1.5em;
+  width: 74%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+.mercury-form li.boolean {
+  margin-left: 23%;
+  padding-left: 9px;
+}
+.mercury-form li.boolean label {
+  width: auto;
+}
+.mercury-form fieldset.buttons,
+.mercury-form fieldset.actions {
+  clear: both;
+  padding: 0;
+  background: none;
+  border: none;
+  text-align: left;
+}
+.mercury-form fieldset.buttons ol,
+.mercury-form fieldset.actions ol {
+  margin: 0 -2px 0 0;
+  float: right;
+}
+.mercury-form fieldset.buttons ol li,
+.mercury-form fieldset.actions ol li {
+  float: left;
+  padding-left: 0.5em;
+  padding-right: 0;
+}
+.mercury-form fieldset.buttons .commit,
+.mercury-form fieldset.actions .action {
+  margin: 0;
+}
+.mercury-form fieldset.buttons .commit input,
+.mercury-form fieldset.actions .action input {
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  border-radius: 0.4em;
+  display: block;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', sans-serif;
+  font-size: 1.2em;
+  background: #268bd2;
+  border: 1px solid #16527c;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  line-height: normal;
+  padding: 0.4em 0.8em;
+}
+.mercury-form fieldset.buttons .commit input:hover,
+.mercury-form fieldset.actions .action input:hover {
+  color: #fff;
+  background: #2482c5;
+  border: 1px solid #0f3550;
+  -webkit-box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  -moz-box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7);
+}