mercury-rails 0.1.2 → 0.2.0

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

@@ -11,6 +11,9 @@ class @Mercury.Select extends Mercury.Dialog
 
   bindEvents: ->
     Mercury.bind 'hide:dialogs', (event, dialog) => @hide() unless dialog == @
+
+    @element.mousedown (event) => event.preventDefault()
+
     super
 
 

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

@@ -3,7 +3,11 @@ class @Mercury.Snippet
   @all: []
 
   @displayOptionsFor: (name) ->
-    Mercury.modal("/mercury/snippets/#{name}/options", {title: 'Snippet Options', handler: 'insertSnippet', snippetName: name})
+    Mercury.modal Mercury.config.snippets.optionsUrl.replace(':name', name), {
+      title: 'Snippet Options'
+      handler: 'insertSnippet'
+      snippetName: name
+    }
     Mercury.snippet = null
 
 
@@ -47,8 +51,8 @@ class @Mercury.Snippet
 
 
   loadPreview: (element, callback = null) ->
-    jQuery.ajax "/mercury/snippets/#{@name}/preview", {
-      type: 'POST'
+    jQuery.ajax Mercury.config.snippets.previewUrl.replace(':name', @name), {
+      type: Mercury.config.snippets.method
       data: @options
       success: (data) =>
         @data = data
@@ -61,10 +65,10 @@ class @Mercury.Snippet
 
   displayOptions: ->
     Mercury.snippet = @
-    Mercury.modal "/mercury/snippets/#{@name}/options", {
+    Mercury.modal Mercury.config.snippets.optionsUrl.replace(':name', @name), {
       title: 'Snippet Options',
       handler: 'insertSnippet',
-      loadType: 'post',
+      loadType: Mercury.config.snippets.method,
       loadData: @options
     }
 

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

@@ -0,0 +1,51 @@
+class @Mercury.Statusbar
+
+  constructor: (@options = {}) ->
+    @visible = @options.visible
+    @build()
+    @bindEvents()
+
+
+  build: ->
+    @element = jQuery('<div>', {class: 'mercury-statusbar'})
+    @aboutElement = jQuery('<a>', {class: "mercury-statusbar-about"}).appendTo(@element).html("Mercury Editor v#{Mercury.version}")
+    @pathElement = jQuery('<div>', {class: 'mercury-statusbar-path'}).appendTo(@element)
+
+    @element.css({visibility: 'hidden'}) unless @visible
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+
+
+  bindEvents: ->
+    Mercury.bind 'region:update', (event, options) =>
+      @setPath(options.region.path()) if options.region && jQuery.type(options.region.path) == 'function'
+
+    @aboutElement.click =>
+      Mercury.lightview('/mercury/lightviews/about.html', {title: "About Mercury Editor v#{Mercury.version}"})
+
+
+  height: ->
+    @element.outerHeight()
+
+
+  top: ->
+    top =  @element.offset().top
+    currentTop = if parseInt(@element.css('bottom')) < 0 then top - @element.outerHeight() else top
+    if @visible then currentTop else top + @element.outerHeight()
+
+
+  setPath: (elements) ->
+    path = []
+    path.push("<a>#{element.tagName.toLowerCase()}</a>") for element in elements
+
+    @pathElement.html("<span><strong>Path: </strong>#{path.reverse().join(' &raquo; ')}</span>")
+
+
+  show: ->
+    @visible = true
+    @element.css({opacity: 0, visibility: 'visible'})
+    @element.animate({opacity: 1}, 200, 'easeInOutSine')
+
+
+  hide: ->
+    @visible = false
+    @element.css({visibility: 'hidden'})

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

@@ -1,10 +1,10 @@
-@Mercury.tableEditor = (table, cell) ->
-  Mercury.tableEditor.load(table, cell)
+@Mercury.tableEditor = (table, cell, cellContent) ->
+  Mercury.tableEditor.load(table, cell, cellContent)
   return Mercury.tableEditor
 
 jQuery.extend Mercury.tableEditor, {
 
-  load: (@table, @cell) ->
+  load: (@table, @cell, @cellContent = '') ->
     @row = @cell.parent('tr')
     @columnCount = @getColumnCount()
     @rowCount = @getRowCount()
@@ -17,7 +17,7 @@ jQuery.extend Mercury.tableEditor, {
       rowSpan = 1
       matchOptions = if position == 'after' then {right: sig.right} else {left: sig.left}
       if matching = @findCellByOptionsFor(row, matchOptions)
-        newCell = jQuery("<#{matching.cell.get(0).tagName}>").text('')
+        newCell = jQuery("<#{matching.cell.get(0).tagName}>").html(@cellContent)
         @setRowspanFor(newCell, matching.height)
         if position == 'before' then matching.cell.before(newCell) else matching.cell.after(newCell)
         i += matching.height - 1
@@ -51,7 +51,7 @@ jQuery.extend Mercury.tableEditor, {
     cellCount = 0
     for cell in @row.find('th, td')
       colspan = @colspanFor(cell)
-      newCell = jQuery("<#{cell.tagName}>").text('')
+      newCell = jQuery("<#{cell.tagName}>").html(@cellContent)
       @setColspanFor(newCell, colspan)
       cellCount += colspan
       if (rowspan = @rowspanFor(cell)) > 1 && position == 'after'
@@ -70,7 +70,8 @@ jQuery.extend Mercury.tableEditor, {
             @setRowspanFor(cell, rowspan + 1)
           else if rowspan - 1 >= rowCount && position == 'after'
             if rowspan - 1 == rowCount
-              newCell = jQuery("<#{cell.tagName}>", {colspan: @colspanFor(cell)})
+              newCell = jQuery("<#{cell.tagName}>").html(@cellContent)
+              @setColspanFor(newCell, @colspanFor(cell))
               newRow.append(newCell)
             else
               @setRowspanFor(cell, rowspan + 1)
@@ -129,7 +130,7 @@ jQuery.extend Mercury.tableEditor, {
   decreaseColspan: ->
     return if @colspanFor(@cell) == 1
     @setColspanFor(@cell, @colspanFor(@cell) - 1)
-    newCell = jQuery("<#{@cell.get(0).tagName}>").text('')
+    newCell = jQuery("<#{@cell.get(0).tagName}>").html(@cellContent)
     @setRowspanFor(newCell, @rowspanFor(@cell))
     @cell.after(newCell)
 
@@ -146,7 +147,7 @@ jQuery.extend Mercury.tableEditor, {
     return if sig.height == 1
     nextRow = @row.nextAll('tr')[sig.height - 2]
     if match = @findCellByOptionsFor(nextRow, {left: sig.left, forceAdjacent: true})
-      newCell = jQuery("<#{@cell.get(0).tagName}>").text('')
+      newCell = jQuery("<#{@cell.get(0).tagName}>").html(@cellContent)
       @setColspanFor(newCell, @colspanFor(@cell))
       @setRowspanFor(@cell, sig.height - 1)
       if match.direction == 'before' then match.cell.before(newCell) else match.cell.after(newCell)

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

@@ -1,12 +1,14 @@
 class @Mercury.Toolbar
 
   constructor: (@options = {}) ->
+    @visible = @options.visible
     @build()
     @bindEvents()
 
 
   build: ->
     @element = jQuery('<div>', {class: 'mercury-toolbar-container', style: 'width:10000px'})
+    @element.css({display: 'none'}) unless @visible
     @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
     for own toolbarName, buttons of Mercury.config.toolbars
@@ -68,4 +70,15 @@ class @Mercury.Toolbar
 
 
   height: ->
-    @element.outerHeight()
+    if @visible then @element.outerHeight() else 0
+
+
+  show: ->
+    @visible = true
+    @element.css({top: -@element.outerHeight(), display: 'block'})
+    @element.animate({top: 0}, 200, 'easeInOutSine')
+
+
+  hide: ->
+    @visible = false
+    @element.hide()

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

@@ -25,6 +25,9 @@ jQuery.extend Mercury.tooltip, {
   bindEvents: ->
     Mercury.bind 'resize', => @position() if @visible
     @document.scroll => @position() if @visible
+    for parent in @forElement.parentsUntil(jQuery('body', @document))
+      if parent.scrollHeight > parent.clientHeight
+        jQuery(parent).scroll => @position() if @visible
     @element.mousedown (event) ->
       event.preventDefault()
       event.stopPropagation()

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

@@ -1,5 +1,5 @@
 @Mercury.uploader = (file, options) ->
-  Mercury.uploader.show(file, options)
+  Mercury.uploader.show(file, options) if Mercury.config.uploading.enabled
   return Mercury.uploader
 
 jQuery.extend Mercury.uploader, {
@@ -65,15 +65,12 @@ jQuery.extend Mercury.uploader, {
 
 
   position: ->
-    viewportWidth = jQuery(window).width()
-    viewportHeight = jQuery(window).height()
-
     width = @element.outerWidth()
     height = @element.outerHeight()
 
     @element.css {
-      top: (viewportHeight - height) / 2
-      left: (viewportWidth - width) / 2
+      top: (Mercury.displayRect.height - height) / 2
+      left: (Mercury.displayRect.width - width) / 2
     }
 
 
@@ -93,16 +90,28 @@ jQuery.extend Mercury.uploader, {
     jQuery.each ['onloadstart', 'onprogress', 'onload', 'onabort', 'onerror'], (index, eventName) =>
       xhr.upload[eventName] = (event) => @uploaderEvents[eventName].call(@, event)
     xhr.onload = (event) =>
-      try
-        response = jQuery.evalJSON(event.target.responseText)
-        Mercury.trigger('action', {action: 'insertImage', value: {src: response.url}})
-      catch error
-        @updateStatus('Unable to process response')
+      console.debug(event)
+      if (event.currentTarget.status >= 400)
+        @updateStatus('Error: Unable to upload the file')
+        alert("#{event.currentTarget.status}: Unable to process response")
+        @hide()
+      else
+        try
+          response =
+            if Mercury.config.uploading.handler
+              Mercury.config.uploading.handler(event.target.responseText)
+            else
+              jQuery.parseJSON(event.target.responseText)
+          Mercury.trigger('action', {action: 'insertImage', value: {src: response.image.url}})
+        catch error
+          @updateStatus('Error: Unable to upload the file')
+          alert("Unable to process response: #{error}")
+          @hide()
 
     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)
+    xhr.setRequestHeader(Mercury.config.csrfHeader, Mercury.csrfToken)
 
     @file.readAsBinaryString (result) =>
       # build the multipart post string
@@ -158,7 +167,7 @@ jQuery.extend Mercury.uploader, {
 
     onerror: ->
       @updateStatus('Error: Unable to upload the file')
-      @hide(1)
+      @hide(3)
 }
 
 

data/vendor/assets/javascripts/mercury_loader.js

@@ -0,0 +1,191 @@
+/*!
+ * Mercury Editor is a CoffeeScript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
+ * found at https://github.com/jejacks0n/mercury
+ *
+ * Supported browsers:
+ *   - Firefox 4+
+ *   - Chrome 10+
+ *   - Safari 5+
+ *
+ * Copyright (c) 2011 Jeremy Jackson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+ * persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+ * Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+ * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+// ## Default Packages
+//
+// Some default packages are provided for you.  If you want to define your own, feel free to do so before including this
+// script.  These, or your own packages can be specified to the loader in query params (read below for details).
+if (!window.mercuryPackages) window.mercuryPackages = {
+  development: {javascripts: 'mercury.js', stylesheets: 'mercury.css'},
+  bundled: {javascripts: 'javascripts/mercury.min.js,javascripts/mercury_dialogs.js', stylesheets: 'stylesheets/mercury.bundle.css'}
+};
+
+
+// ## Mercury Loader
+(function() {
+  // Useragent detection, which we use to determine if the client is supported.  We do this method instead of checking
+  // features because many of the features are supported in IE, but aren't implemented to the W3C spec.
+  var browser = {
+    webkit: /(webkit)[ \/]([\w.]+)/,
+    opera: /(opera)(?:.*version)?[ \/]([\w.]+)/,
+    msie: /(msie) ([\w.]+)/,
+    mozilla: /(mozilla)(?:.*? rv:([\w.]+))?/
+  };
+
+  var ua = navigator.userAgent.toLowerCase();
+  var match = browser.webkit.exec(ua) || browser.opera.exec(ua) || browser.msie.exec(ua) || ua.indexOf("compatible") < 0 && browser.mozilla.exec(ua) || [];
+  browser = {version: match[2] || "0" };
+  browser[match[1] || ""] = true;
+
+  // If the browser isn't supported, we don't try to do anything more.  We do direct userAgent detection here because IE
+  // thinks it's supported but isn't -- in part because it has it's own implementation of the contentEditable spec.
+  if (document.getElementsByTagName && document.getElementById && document.designMode && !browser.konqueror && !browser.msie) {
+    // supported
+  } else {
+    return;
+  }
+
+  // Default options, which can be overridden by specifying them in query params to the loader script.
+  // You can provide any additional options to the loader, and they will be passed to the PageEditor instance when it's
+  // created, so for instance you could put `visible=false`, and the editor be hidden after it's created.
+  var options = {
+    // A path or url from which the javascripts and css should be loaded.
+    src: '/assets',
+    // A value defined in the packages above.  Development is used by default.  If you want to provide your own package
+    // you can just define one before including this script.
+    pack: 'development'
+  };
+
+  // Hide the document during loading so there isn't a flicker while mercury is being loaded.
+  var head = document.getElementsByTagName("head")[0];
+  if (window == top) {
+    var style = document.createElement('style');
+    var rules = document.createTextNode('body{visibility:hidden;display:none}');
+    style.type = 'text/css';
+    if (style.styleSheet) style.styleSheet.cssText = rules.nodeValue;
+    else style.appendChild(rules);
+    head.appendChild(style);
+  }
+
+  // Because Mercury loads the document it's going to edit into an iframe we do some tweaks to the current document to
+  // make that feel more seamless.
+  function loadMercury() {
+    if (document.mercuryLoaded) return;
+    if (timer) window.clearTimeout(timer);
+    document.mercuryLoaded = true;
+
+    // If the current window is the top window, it means that Mercury hasn't been loaded yet.  So we load it.
+    if (window == top) {
+      var i;
+
+      // Find the loader script and determine what options were provided so the defaults can be overridden.  To provide
+      // options just pass them in as query params (eg. `mercury_loader.js?src=/asset_path&pack=bundled`)
+      var scripts = document.getElementsByTagName('script');
+      for (i = 0; i <= scripts.length - 1; i += 1) {
+        var match = scripts[i].src.match(/mercury_loader\.js\??(.*)?$/);
+        if (!match || !match[1]) continue;
+
+        match[1].replace(/([^&=]*)=([^&=]*)/g, function (m, attr, value) {
+          options[attr] = value;
+        });
+      }
+
+      var pack = window.mercuryPackages[options.pack];
+      setTimeout(function() {
+        // Once we're ready to load Mercury we clear the document contents, and add in the css and javascript tags.
+        // Once the script has loaded we display the body again, and instantiate a new instance of Mercury.PageEditor.
+        document.body.innerHTML = '&nbsp;';
+        for (i = 0; i <= document.styleSheets.length - 1; i += 1) {
+          document.styleSheets[i].disabled = true
+        }
+
+        // Load all the stylesheets.
+        var stylesheets = pack.stylesheets.split(',');
+        for (i = 0; i <= stylesheets.length - 1; i += 1) {
+          var link = document.createElement('link');
+          link.href = options.src + '/' + stylesheets[i];
+          link.media = 'screen';
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          head.appendChild(link);
+        }
+
+        // Load all the javascripts.
+        var javascripts = pack.javascripts.split(',');
+        var loaded = 0;
+        function loadScript(src) {
+          var script = document.createElement('script');
+          script.src = options.src + '/' + src;
+          script.type = 'text/javascript';
+          head.appendChild(script);
+          script.onload = function() {
+            loaded += 1;
+            if (loaded >= javascripts.length) {
+              document.body.style.visibility = 'visible';
+              document.body.style.display = 'block';
+              // Instantiate the PageEditor, passing in the options that were provided to the loader.
+              new Mercury.PageEditor(null, {visible: true});
+              // If there's a mercuryLoaded function available, call it.   You can provide one before the loading script
+              // and it will be called after everything is loaded, but before everything is initialized.  You can bind
+              // to the mercury:ready event or use Mercury.bind('ready', function() {}).
+              if (typeof(window.mercuryLoaded) == 'function') {
+                window.mercuryLoaded();
+              }
+            } else {
+              loadScript(javascripts[loaded]);
+            }
+          }
+        }
+        loadScript(javascripts[loaded]);
+      }, 1);
+    } else if (top.Mercury) {
+      // Since this file will be included in the iframe as well, we use it to tell Mercury that the document is ready to
+      // be worked on.  By firing this event we're able to build the regions and get everything ready without having to
+      // wait for assets and slow javascripts to load or complete.
+      window.Mercury = top.Mercury;
+      Mercury.trigger('initialize:frame');
+    }
+  }
+
+  // This is a common technique for determining if the document has loaded yet, and is based on the methods used in
+  // Prototype.js.  The following portions just call loadMercury once it's appropriate to do so.
+  //
+  // Support for the DOMContentLoaded event is based on work by Dan Webb, Matthias Miller, Dean Edwards, John Resig,
+  // and Diego Perini.
+  var timer;
+  function checkReadyState() {
+    if (document.readyState === 'complete') {
+      document.stopObserving('readystatechange', checkReadyState);
+      loadMercury();
+    }
+  }
+
+  function pollDoScroll() {
+    try { document.documentElement.doScroll('left'); }
+    catch(e) {
+      timer = pollDoScroll.defer();
+      return;
+    }
+    loadMercury();
+  }
+
+  if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', loadMercury, false);
+  } else {
+    document.observe('readystatechange', checkReadyState);
+    if (window == top) { timer = pollDoScroll.defer(); }
+  }
+})();