mercury-rails 0.1.0

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

@@ -0,0 +1,152 @@
+class @Mercury.Toolbar.Button
+
+  constructor: (@name, @title, @summary = null, @types = [], @options = {}) ->
+    @build()
+    @bindEvents()
+    return @element
+
+
+  build: ->
+    @element = $('<div>', {title: @summary ? @title, class: "mercury-button mercury-#{@name}-button"}).html("<em>#{@title}</em>")
+    @element.data('expander', "<div class=\"mercury-expander-button\" data-button=\"#{@name}\"><em></em><span>#{@title}</span></div>")
+
+    @handled = []
+    dialogOptions = {title: @summary || @title, preload: @types.preload, appendTo: @options.appendDialogsTo || 'body', for: @element}
+    for type, mixed of @types
+      switch type
+
+        when 'preload' then true
+
+        when 'regions'
+          @element.addClass('disabled')
+          @handled[type] = if $.isFunction(mixed) then mixed.call(@, @name) else mixed
+
+        when 'toggle'
+          @handled[type] = true
+
+        when 'mode'
+          @handled[type] = if mixed == true then @name else mixed
+
+        when 'context'
+          @handled[type] = if $.isFunction(mixed) then mixed else Mercury.Toolbar.Button.contexts[@name]
+
+        when 'palette'
+          @element.addClass("mercury-button-palette")
+          url = if $.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled[type] = new Mercury.Palette(url, @name, dialogOptions)
+
+        when 'select'
+          @element.addClass("mercury-button-select").find('em').html(@title)
+          url = if $.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled[type] = new Mercury.Select(url, @name, dialogOptions)
+
+        when 'panel'
+          @element.addClass('mercury-button-panel')
+          url = if $.isFunction(mixed) then mixed.call(@, @name) else mixed
+          @handled['toggle'] = true
+          @handled[type] = new Mercury.Panel(url, @name, dialogOptions)
+
+        when 'modal'
+          @handled[type] = if $.isFunction(mixed) then mixed.apply(@, @name) else mixed
+
+        else throw "Unknown button type #{type} used for the #{@name} button."
+
+
+  bindEvents: ->
+    Mercury.bind 'button', (event, options) =>
+      @element.click() if options.action == @name
+
+    Mercury.bind 'region:update', (event, options) =>
+      if @handled.context && options.region && $.type(options.region.currentElement) == 'function'
+        element = options.region.currentElement()
+        if element.length && @handled.context.call(@, element, options.region.element)
+          @element.addClass('active')
+        else
+          @element.removeClass('active')
+      else
+        @element.removeClass('active')
+
+    Mercury.bind 'region:focused', (event, options) =>
+      if @handled.regions && options.region && options.region.type
+        if @handled.regions.indexOf(options.region.type) > -1
+          @element.removeClass('disabled')
+        else
+          @element.addClass('disabled')
+
+    Mercury.bind 'region:blurred', (event, options) =>
+      @element.addClass('disabled') if @handled.regions
+
+    @element.mousedown (event) =>
+      @element.addClass('active')
+
+    @element.mouseup (event) =>
+      @element.removeClass('active')
+
+    @element.click (event) =>
+      if @element.closest('.disabled').length then return
+
+      handled = false
+      for type, mixed of @handled
+        switch type
+
+          when 'toggle'
+            @togglePressed()
+
+          when 'mode'
+            handled = true
+            Mercury.trigger('mode', {mode: mixed})
+
+          when 'modal'
+            Mercury.modal(@handled.modal, {title: @summary || @title, handler: @name})
+
+          when 'palette', 'select', 'panel'
+            event.stopPropagation()
+            handled = true
+            @handled[type].toggle()
+
+      Mercury.trigger('action', {action: @name}) unless handled
+      Mercury.trigger('focus:frame')
+
+
+  togglePressed: ->
+    @element.toggleClass('pressed')
+
+
+
+# Button contexts
+@Mercury.Toolbar.Button.contexts =
+
+  backcolor: (node) -> @element.css('background-color', node.css('background-color'))
+
+  forecolor: (node) -> @element.css('background-color', node.css('color'))
+
+  bold: (node) ->
+    weight = node.css('font-weight')
+    weight == 'bold' || weight > 400
+
+  italic: (node) -> node.css('font-style') == 'italic'
+
+  # todo: overline is a bit weird because <u> and <strike> override text-decoration, so we can't always tell
+  # todo: maybe walk up the tree if it's not too expensive?
+  overline: (node) -> node.css('text-decoration') == 'overline'
+
+  # todo: this should never check for tags, because they could be styled differently
+  strikethrough: (node, region) -> node.css('text-decoration') == 'line-through' || !!node.closest('strike', region).length
+
+  underline: (node, region) -> node.css('text-decoration') == 'underline' || !!node.closest('u', region).length
+
+  subscript: (node, region) -> !!node.closest('sub', region).length
+
+  superscript: (node, region) -> !!node.closest('sup', region).length
+
+  justifyleft: (node) -> node.css('text-align').indexOf('left') > -1
+
+  justifycenter: (node) -> node.css('text-align').indexOf('center') > -1
+
+  justifyright: (node) -> node.css('text-align').indexOf('right') > -1
+
+  justifyfull: (node) -> node.css('text-align').indexOf('justify') > -1
+
+  insertorderedlist: (node, region) -> !!node.closest('ol', region.element).length
+
+  insertunorderedlist: (node, region) -> !!node.closest('ul', region.element).length

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

@@ -0,0 +1,42 @@
+class @Mercury.Toolbar.ButtonGroup
+
+  constructor: (@name, @options = {}) ->
+    @build()
+    @bindEvents()
+    @regions = @options._regions
+    return @element
+
+
+  build: ->
+    @element = $('<div>', {class: "mercury-button-group mercury-#{@name}-group"})
+    if @options._context || @options._regions
+      @element.addClass('disabled')
+
+
+  bindEvents: ->
+    Mercury.bind 'region:update', (event, options) =>
+      context = Mercury.Toolbar.ButtonGroup.contexts[@name]
+      if context
+        if options.region && $.type(options.region.currentElement) == 'function'
+          element = options.region.currentElement()
+          if element.length && context.call(@, element, options.region.element)
+            @element.removeClass('disabled')
+          else
+            @element.addClass('disabled')
+
+    Mercury.bind 'region:focused', (event, options) =>
+      if @regions && options.region && options.region.type
+        if @regions.indexOf(options.region.type) > -1
+          @element.removeClass('disabled') unless @options._context
+        else
+          @element.addClass('disabled')
+
+    Mercury.bind 'region:blurred', (event, options) =>
+      @element.addClass('disabled') if @options.regions
+
+
+
+# ButtonGroup contexts
+@Mercury.Toolbar.ButtonGroup.contexts =
+
+  table: (node, region) -> !!node.closest('table', region).length

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

@@ -0,0 +1,56 @@
+class @Mercury.Toolbar.Expander extends Mercury.Palette
+
+  constructor: (@name, @options) ->
+    @container = @options.for
+    @containerWidth = @container.outerWidth()
+    super(null, @name, @options)
+    return @element
+
+
+  build: ->
+    @container.css({whiteSpace: 'normal'})
+    @trigger = $('<div>', {class: 'mercury-toolbar-expander'}).appendTo($(@options.appendTo).get(0) ? 'body')
+    @element = $('<div>', {class: "mercury-palette mercury-expander mercury-#{@name}-expander", style: 'display:none'})
+    @windowResize()
+
+
+  bindEvents: ->
+    Mercury.bind 'hide:dialogs', (event, dialog) => @hide() unless dialog == @
+    Mercury.bind 'resize', => @windowResize()
+
+    super
+
+    @trigger.click (event) =>
+      event.stopPropagation()
+      hiddenButtons = []
+      for button in @container.find('.mercury-button')
+        button = $(button)
+        hiddenButtons.push(button.data('expander')) if button.position().top > 5
+
+      @loadContent(hiddenButtons.join(''))
+      @toggle()
+
+    @element.click (event) =>
+      buttonName = $(event.target).closest('[data-button]').data('button')
+      button = @container.find(".mercury-#{buttonName}-button")
+      button.click()
+
+
+  windowResize: ->
+    if @containerWidth > $(window).width() then @trigger.show() else @trigger.hide()
+    @hide()
+
+
+  position: (keepVisible) ->
+    @element.css({top: 0, left: 0, display: 'block', visibility: 'hidden'})
+    position = @trigger.offset()
+    width = @element.width()
+
+    position.left = position.left - width + @trigger.width() if position.left + width > $(window).width()
+
+    @element.css {
+      top: position.top + @trigger.height(),
+      left: position.left,
+      display: if keepVisible then 'block' else 'none',
+      visibility: 'visible'
+    }

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

@@ -0,0 +1,72 @@
+class @Mercury.Toolbar
+
+  constructor: (@options = {}) ->
+    @build()
+    @bindEvents()
+
+
+  build: ->
+    @element = $('<div>', {class: 'mercury-toolbar-container', style: 'width:10000px'})
+    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+
+    for toolbarName, buttons of Mercury.config.toolbars
+      continue if buttons._custom
+      toolbar = $('<div>', {class: "mercury-toolbar mercury-#{toolbarName}-toolbar"}).appendTo(@element)
+      toolbar.attr('data-regions', buttons._regions) if buttons._regions
+      container = $('<div>', {class: 'mercury-toolbar-button-container'}).appendTo(toolbar)
+
+      for buttonName, options of buttons
+        continue if buttonName == '_regions'
+        button = @buildButton(buttonName, options)
+        button.appendTo(container) if button
+
+      if container.css('white-space') == 'nowrap'
+        expander = new Mercury.Toolbar.Expander(toolbarName, {appendTo: toolbar, for: container})
+        expander.appendTo(@element)
+
+      toolbar.addClass('disabled') unless toolbarName == 'primary'
+
+    @element.css({width: '100%'})
+
+
+  buildButton: (name, options) ->
+    return false if name[0] == '_'
+    switch $.type(options)
+
+      when 'array' # button
+        [title, summary, handled] = options
+        new Mercury.Toolbar.Button(name, title, summary, handled, {appendDialogsTo: @element})
+
+      when 'object' # button group
+        group = new Mercury.Toolbar.ButtonGroup(name, options)
+        for a, o of options
+          button = @buildButton(a, o)
+          button.appendTo(group) if button
+        group
+
+      when 'string' # separator
+        $('<hr>', {class: "mercury-#{if options == '-' then 'line-separator' else 'separator'}"})
+
+      else throw "Unknown button structure -- please provide an array, object, or string for #{name}."
+
+
+  bindEvents: ->
+    Mercury.bind 'region:focused', (event, options) =>
+      for toolbar in @element.find(".mercury-toolbar")
+        toolbar = $(toolbar)
+        if regions = toolbar.data('regions')
+          toolbar.removeClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
+
+    Mercury.bind 'region:blurred', (event, options) =>
+      for toolbar in @element.find(".mercury-toolbar")
+        toolbar = $(toolbar)
+        if regions = toolbar.data('regions')
+          toolbar.addClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
+
+
+    @element.click -> Mercury.trigger('hide:dialogs')
+    @element.mousedown (event) -> event.preventDefault()
+
+
+  height: ->
+    @element.outerHeight()

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

@@ -0,0 +1,67 @@
+@Mercury.tooltip = (forElement, content, options = {}) ->
+  Mercury.tooltip.show(forElement, content, options)
+  return Mercury.tooltip
+
+$.extend Mercury.tooltip, {
+
+  show: (@forElement, @content, @options = {}) ->
+    @document = $(@forElement.get(0).ownerDocument)
+    @initialize()
+    if @visible then @update() else @appear()
+
+
+  initialize: ->
+    return if @initialized
+    @build()
+    @bindEvents()
+    @initialized = true
+
+
+  build: ->
+    @element = $('<div>', {class: 'mercury-tooltip'})
+    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+
+
+  bindEvents: ->
+    Mercury.bind 'resize', => @position() if @visible
+    @document.scroll => @position() if @visible
+    @element.mousedown (event) ->
+      event.preventDefault()
+      event.stopPropagation()
+
+
+  appear: ->
+    @update()
+
+    @element.show()
+    @element.animate {opacity: 1}, 200, 'easeInOutSine', =>
+      @visible = true
+
+
+  update: ->
+    @element.html(@content)
+    @position()
+
+
+  position: ->
+    offset = @forElement.offset()
+    width = @element.width()
+
+    top = offset.top + (Mercury.displayRect.top - $(@document).scrollTop()) + @forElement.outerHeight()
+    left = offset.left - $(@document).scrollLeft()
+
+    left = left - (left + width + 25) - Mercury.displayRect.width if (left + width + 25) > Mercury.displayRect.width
+    left = if left <= 0 then 0 else left
+
+    @element.css {
+      top: top,
+      left: left
+    }
+
+
+  hide: ->
+    return unless @initialized
+    @element.hide()
+    @visible = false
+
+}

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

@@ -0,0 +1,213 @@
+@Mercury.uploader = (file, options) ->
+  Mercury.uploader.show(file, options)
+  return Mercury.uploader
+
+$.extend Mercury.uploader, {
+
+  show: (file, @options = {}) ->
+    @file = new Mercury.uploader.File(file)
+    if @file.errors
+      alert("Error: #{@file.errors}")
+      return
+    return unless @supported()
+
+    Mercury.trigger('focus:window')
+    @initialize()
+    @appear()
+
+
+  initialize: ->
+    return if @initialized
+    @build()
+    @bindEvents()
+    @initialized = true
+
+
+  supported: ->
+    xhr = new XMLHttpRequest
+    fileReader = window.FileReader
+
+    if window.Uint8Array && window.ArrayBuffer && !XMLHttpRequest.prototype.sendAsBinary
+      XMLHttpRequest::sendAsBinary = (datastr) ->
+        ui8a = new Uint8Array(datastr.length)
+        ui8a[index] = (datastr.charCodeAt(index) & 0xff) for data, index in datastr
+        @send(ui8a.buffer)
+
+    return !!(xhr.upload && xhr.sendAsBinary && fileReader)
+
+
+  build: ->
+    @element = $('<div>', {class: 'mercury-uploader', style: 'display:none'})
+    @element.append('<div class="mercury-uploader-preview"><b><img/></b></div>')
+    @element.append('<div class="mercury-uploader-details"></div>')
+    @element.append('<div class="mercury-uploader-progress"><span>Processing...</span><div class="mercury-uploader-indicator"><div><b>0%</b></div></div></div>')
+
+    @overlay = $('<div>', {class: 'mercury-uploader-overlay', style: 'display:none'})
+
+    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo($(@options.appendTo).get(0) ? 'body')
+
+
+  bindEvents: ->
+    Mercury.bind 'resize', => @position()
+
+
+  appear: ->
+    @fillDisplay()
+    @position()
+
+    @overlay.show()
+    @overlay.animate {opacity: 1}, 200, 'easeInOutSine', =>
+      @element.show()
+      @element.animate {opacity: 1}, 200, 'easeInOutSine', =>
+        @visible = true
+        @loadImage()
+
+
+  position: ->
+    viewportWidth = $(window).width()
+    viewportHeight = $(window).height()
+
+    width = @element.outerWidth()
+    height = @element.outerHeight()
+
+    @element.css {
+      top: (viewportHeight - height) / 2
+      left: (viewportWidth - width) / 2
+    }
+
+
+  fillDisplay: ->
+    details = ["Name: #{@file.name}", "Size: #{@file.readableSize}", "Type: #{@file.type}"]
+    @element.find('.mercury-uploader-details').html(details.join('<br/>'))
+
+
+  loadImage: ->
+    @file.readAsDataURL (result) =>
+      @element.find('.mercury-uploader-preview b').html($('<img>', {src: result}))
+      @upload()
+
+
+  upload: ->
+    xhr = new XMLHttpRequest
+    $.each ['onloadstart', 'onprogress', 'onload', 'onabort', 'onerror'], (index, eventName) =>
+      xhr.upload[eventName] = (event) => @uploaderEvents[eventName].call(@, event)
+    xhr.onload = (event) =>
+      try
+        response = $.evalJSON(event.target.responseText)
+        Mercury.trigger('action', {action: 'insertImage', value: {src: response.url}})
+      catch error
+        @updateStatus('Unable to process response')
+
+    xhr.open('post', Mercury.config.uploading.url, true)
+    xhr.setRequestHeader('Accept', 'application/json, text/javascript, text/html, application/xml, text/xml, */*')
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+    xhr.setRequestHeader('X-CSRF-Token', Mercury.csrfToken)
+
+    @file.readAsBinaryString (result) =>
+      # build the multipart post string
+      multipart = new Mercury.uploader.MultiPartPost(Mercury.config.uploading.inputName, @file, result)
+
+      # 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)
+
+
+  updateStatus: (message, loaded) ->
+    @element.find('.mercury-uploader-progress span').html(message)
+    if loaded
+      percent = Math.floor(loaded * 100 / @file.size) + '%'
+      @element.find('.mercury-uploader-indicator div').css({width: percent})
+      @element.find('.mercury-uploader-indicator b').html(percent).show()
+
+
+  hide: (delay = 0) ->
+    setTimeout((=>
+      @element.animate {opacity: 0}, 200, 'easeInOutSine', =>
+        @overlay.animate {opacity: 0}, 200, 'easeInOutSine', =>
+          @overlay.hide()
+          @element.hide()
+          @reset()
+          @visible = false
+          Mercury.trigger('focus:frame')
+    ), delay * 1000)
+
+
+  reset: ->
+    @element.find('.mercury-uploader-preview b').html('')
+    @element.find('.mercury-uploader-indicator div').css({width: 0})
+    @element.find('.mercury-uploader-indicator b').html('0%').hide()
+    @updateStatus('Processing...',)
+
+
+  uploaderEvents: {
+    onloadstart: -> @updateStatus('Uploading...')
+
+    onprogress: (event) -> @updateStatus('Uploading...', event.loaded)
+
+    onabort: ->
+      @updateStatus('Aborted')
+      @hide(1)
+
+    onload: ->
+      @updateStatus('Successfully uploaded', @file.size)
+      @hide(1)
+
+    onerror: ->
+      @updateStatus('Error: Unable to upload the file')
+      @hide(1)
+  }
+}
+
+
+
+class Mercury.uploader.File
+
+  constructor: (@file) ->
+    @size = @file.size
+    @fullSize = @file.size
+    @readableSize = @file.size.toBytes()
+    @name = @file.fileName
+    @type = @file.type
+
+    # add any errors if we need to
+    errors = []
+    errors.push('Too large') if @size >= Mercury.config.uploading.maxFileSize
+    errors.push('Unsupported format') unless Mercury.config.uploading.allowedMimeTypes.indexOf(@type) > -1
+    @errors = errors.join(' / ') if errors.length
+
+
+  readAsDataURL: (callback = null) ->
+    reader = new FileReader()
+    reader.readAsDataURL(@file)
+    reader.onload = => callback(reader.result) if callback
+
+
+  readAsBinaryString: (callback = null) ->
+    reader = new FileReader()
+    reader.readAsBinaryString(@file)
+    reader.onload = => callback(reader.result) if callback
+
+
+  updateSize: (delta) ->
+    @fullSize = @size + delta
+
+
+
+class Mercury.uploader.MultiPartPost
+
+  constructor: (@inputName, @file, @contents, @formInputs = {}) ->
+    @boundary = 'Boundaryx20072377098235644401115438165x'
+    @body = ''
+    @buildBody()
+    @delta = @body.length - @file.size
+
+
+  buildBody: ->
+    boundary = '--' + @boundary
+    for name, value of @formInputs
+      @body += "#{boundary}\r\nContent-Disposition: form-data; name=\"#{name}\"\r\n\r\n#{unescape(encodeURIComponent(value))}\r\n"
+    @body += "#{boundary}\r\nContent-Disposition: form-data; name=\"#{@inputName}\"; filename=\"#{@file.name}\"\r\nContent-Type: #{@file.type}\r\nContent-Transfer-Encoding: binary\r\n\r\n#{@contents}\r\n#{boundary}--"