react_editable_content 0.0.1

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

@@ -0,0 +1,248 @@
+@Mercury.uploader = (file, options) ->
+  Mercury.uploader.show(file, options) if Mercury.config.uploading.enabled
+  return Mercury.uploader
+
+jQuery.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
+
+    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 && (Mercury.uploader.fileReaderSupported() || Mercury.uploader.formDataSupported()))
+
+  fileReaderSupported: ->
+    !!(window.FileReader)
+  
+  formDataSupported: ->
+    !!(window.FormData)
+
+  build: ->
+    @element = jQuery('<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></span><div class="mercury-uploader-indicator"><div><b>0%</b></div></div></div>')
+
+    @updateStatus('Processing...')
+
+    @overlay = jQuery('<div>', {class: 'mercury-uploader-overlay', style: 'display:none'})
+
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+
+
+  bindEvents: ->
+    Mercury.on '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: ->
+    width = @element.outerWidth()
+    height = @element.outerHeight()
+
+    @element.css {
+      top: (Mercury.displayRect.height - height) / 2
+      left: (Mercury.displayRect.width - width) / 2
+    }
+
+
+  fillDisplay: ->
+    details = [
+      Mercury.I18n('Name: %s', @file.name),
+      Mercury.I18n('Size: %s', @file.readableSize),
+      Mercury.I18n('Type: %s', @file.type)
+    ]
+    @element.find('.mercury-uploader-details').html(details.join('<br/>'))
+
+
+  loadImage: ->
+    if Mercury.uploader.fileReaderSupported()
+      @file.readAsDataURL (result) =>
+        @element.find('.mercury-uploader-preview b').html(jQuery('<img>', {src: result}))
+        @upload()
+    else
+      @upload()
+
+
+  upload: ->
+    xhr = new XMLHttpRequest
+    jQuery.each ['onloadstart', 'onprogress', 'onload', 'onabort', 'onerror'], (index, eventName) =>
+      xhr.upload[eventName] = (event) => @uploaderEvents[eventName].call(@, event)
+    xhr.onload = (event) =>
+      if (event.currentTarget.status >= 400)
+        @updateStatus('Error: Unable to upload the file')
+        Mercury.notify('Unable to process response: %s', event.currentTarget.status)
+        @hide()
+      else
+        try
+          response =
+            if Mercury.config.uploading.handler
+              Mercury.config.uploading.handler(event.target.responseText)
+            else
+              jQuery.parseJSON(event.target.responseText)
+          src = response.url || response.image.url
+          throw 'Malformed response from server.' unless src
+          Mercury.trigger('action', {action: 'insertImage', value: {src: src}})
+          @hide()
+        catch error
+          @updateStatus('Error: Unable to upload the file')
+          Mercury.notify('Unable to process response: %s', error)
+          @hide()
+
+    size = ""
+    if Mercury.region.element and Mercury.region.element.data('size')
+      size = Mercury.region.element.data('size')
+    xhr.open('post', Mercury.config.uploading.url + "?size=" + size, true)
+    xhr.setRequestHeader('Accept', 'application/json, text/javascript, text/html, application/xml, text/xml, */*')
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+    xhr.setRequestHeader(Mercury.config.csrfHeader, Mercury.csrfToken)
+
+    # 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)
+
+        # 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)
+
+
+
+  updateStatus: (message, loaded) ->
+    @element.find('.mercury-uploader-progress span').html(Mercury.I18n(message).toString())
+    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)
+
+    onerror: ->
+      @updateStatus('Error: Unable to upload the file')
+      @hide(3)
+
+
+
+class Mercury.uploader.File
+
+  constructor: (@file) ->
+    @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 = []
+    errors.push(Mercury.I18n('Too large')) if @size >= Mercury.config.uploading.maxFileSize
+    errors.push(Mercury.I18n('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 own 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}--"

data/app/assets/stylesheets/mercury.css

@@ -0,0 +1,23 @@
+/*!
+ * Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
+ * found at https://github.com/jejacks0n/mercury
+ *
+ * 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.
+ *
+ *= require_self
+ *= require mercury/bootstrap-ish
+ *= require mercury/mercury
+ */

data/app/controller/editable_content/editables_controller.rb

@@ -0,0 +1,21 @@
+module EditableContent
+	class EditablesController < ::ApplicationController
+		include Mercury::Authentication
+
+		def update
+			if can_edit?
+				params[:content].each do |key, value|
+					editable = Editable.find_by_key key
+					if value[:type] == "image" and !value[:attributes][:src].start_with?("/assets")
+						editable.update_attribute(:src, value[:attributes][:src])
+					else
+						editable.update_attribute(:text, value[:value])
+					end
+				end
+				render json: {status: "ok"}
+			else
+				render nothing: true, status: :unauthorized
+			end
+		end
+	end
+end

data/app/controller/mercury/images_controller.rb

@@ -0,0 +1,24 @@
+class Mercury::ImagesController < MercuryController
+
+  respond_to :json
+
+  # POST /images.json
+  def create
+    
+    @image = Mercury::Image.new
+    @image.size = "300x300"
+    @image.size = params[:size] if params[:size] and !params[:size].empty?
+    @image.image = params.require(:image).permit(:image)[:image]
+    
+    @image.save
+    respond_with @image
+  end
+
+  # DELETE /images/1.json
+  def destroy
+    @image = Mercury::Image.find(params[:id])
+    @image.destroy
+    respond_with @image
+  end
+
+end

data/app/helpers/editable_content/application_helper.rb

@@ -0,0 +1,39 @@
+module EditableContent::ApplicationHelper
+	#extend ApplicationHelper
+	include Mercury::Authentication
+
+	def editable_content(name = nil, &block)
+		contents = capture(&block)
+		key = Digest::MD5.hexdigest(name ? name : contents)
+		e = ::EditableContent::Editable.find_by_key(key) || ::EditableContent::Editable.create(:key => key, :text => contents)
+		contents = e.text if !e.text.empty?
+
+		if can_edit?
+			return content_tag(:div, contents.html_safe, {:id => key, 'data-mercury' => 'full'}) 
+		else
+			return contents.html_safe
+		end
+	end
+
+	def editable_image_tag(src, *args)
+		options = args.extract_options!
+		size = options[:size]
+		if !size
+			raise "The attribute :size must be specified on editable_image_tag"
+		end
+
+		key = Digest::MD5.hexdigest(src)
+		if @editable = ::EditableContent::Editable.where(:key => key).first
+			src = @editable.src
+		else
+			@editable = ::EditableContent::Editable.create(:key => key, :src => src)
+		end
+
+		if can_edit?
+			image_tag(src, options.merge({:id => key, "data-size" => size, "data-mercury" => "image"}))
+		else
+			image_tag(src, options) 
+		end
+	end
+
+end

data/app/models/editable_content/editable.rb

@@ -0,0 +1,6 @@
+module EditableContent
+	class Editable < ActiveRecord::Base
+		self.table_name = "editable_content_editables"
+	  	validates_uniqueness_of :key
+	end
+end

data/app/models/mercury/image.rb

@@ -0,0 +1,21 @@
+class Mercury::Image < ActiveRecord::Base
+
+  self.table_name = :mercury_images
+
+  has_attached_file :image, :styles => lambda { |image| { :resized => image.instance.size } }
+  validates_attachment_content_type :image, :content_type => %w(image/jpeg image/jpg image/png image/gif)
+
+  attr_accessor :size
+
+  def serializable_hash(options = nil)
+    options ||= {}
+    options[:methods] ||= []
+    options[:methods] << :url
+    super(options)
+  end
+
+  def url
+    self.image(:resized)
+  end
+
+end

data/app/views/editable_content/_edit_link.html.erb

@@ -0,0 +1,3 @@
+<% if can_edit? %>
+	<%= link_to image_tag("icon_edit.png"), "/editor" + request.path[1..-1], id: "edit-link", style: "position: fixed; right:10px; top: 10px; padding:5px 5px 10px 10px; background:rgba(255,255,255,.7); border-radius:10px;", data: { no_turbolink: true } %>
+<% end %>

data/app/views/layouts/mercury.html.erb

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
+    <%= csrf_meta_tags %>
+    <title>Mercury Editor</title>
+    <%= stylesheet_link_tag    'mercury' %>
+    <%= javascript_include_tag 'jquery-1.7', 'mercury' %>
+  </head>
+  <body>
+    <script type="text/javascript">
+      // Set to the url that you want to save any given page to, leave null for default handling.
+      var saveUrl = '/editable';
+
+      // Instantiate the PageEditor
+      new Mercury.PageEditor(saveUrl, {
+        saveStyle:  'form', // 'form', or 'json' (default json)
+        saveMethod: null, // 'PUT', or 'POST', (create, vs. update -- default PUT)
+        visible:    true  // boolean - if the interface should start visible or not
+      });
+    </script>
+  </body>
+</html>

data/config/routes.rb

@@ -0,0 +1,9 @@
+Rails.application.routes.draw do
+  	namespace :mercury do
+      resources :images
+    end
+    
+	put 'editable' => 'editable_content/editables#update'
+	
+	mount Mercury::Engine => '/'
+end

data/lib/editable_content/engine.rb

@@ -0,0 +1,17 @@
+#require 'mercury-rails'
+
+module EditableContent
+  class Engine < ::Rails::Engine
+    #isolate_namespace EditableContent
+    
+    initializer :assets, :group => :all do |app|
+      app.config.assets.precompile += %w( jquery-1.7.js )
+    end
+
+    # Require mercury authentication module and potentially other aspects later (so they can be overridden).
+    initializer 'mercury.add_lib' do |app|
+      require 'mercury/authentication'
+    end
+
+  end
+end