cropper 0.2.1

data/.gitignore

@@ -0,0 +1,8 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+spec/dummy/db/*.sqlite3
+spec/dummy/log/*.log
+spec/dummy/tmp/
+.DS_Store

data/.rspec

@@ -0,0 +1,2 @@
+--color
+--format progress

data/.rvmrc

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+# This is an RVM Project .rvmrc file, used to automatically load the ruby
+# development environment upon cd'ing into the directory
+
+# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
+# Only full ruby name is supported here, for short names use:
+#     echo "rvm use 1.9.3" > .rvmrc
+environment_id="ruby-1.9.3-p194"
+
+# Uncomment the following lines if you want to verify rvm version per project
+# rvmrc_rvm_version="1.13.8 (master)" # 1.10.1 seams as a safe start
+# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
+#   echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
+#   return 1
+# }
+
+# First we attempt to load the desired environment directly from the environment
+# file. This is very fast and efficient compared to running through the entire
+# CLI and selector. If you want feedback on which environment was used then
+# insert the word 'use' after --create as this triggers verbose mode.
+if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
+  && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
+then
+  \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
+  [[ -s "${rvm_path:-$HOME/.rvm}/hooks/after_use" ]] &&
+    \. "${rvm_path:-$HOME/.rvm}/hooks/after_use" || true
+else
+  # If the environment file has not yet been created, use the RVM CLI to select.
+  rvm --create  "$environment_id" || {
+    echo "Failed to create RVM environment '${environment_id}'."
+    return 1
+  }
+fi
+
+# If you use bundler, this might be useful to you:
+# if [[ -s Gemfile ]] && {
+#   ! builtin command -v bundle >/dev/null ||
+#   builtin command -v bundle | GREP_OPTIONS= \grep $rvm_path/bin/bundle >/dev/null
+# }
+# then
+#   printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
+#   gem install bundler
+# fi
+# if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
+# then
+#   bundle install | GREP_OPTIONS= \grep -vE '^Using|Your bundle is complete'
+# fi

data/Gemfile

@@ -0,0 +1,7 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in cropper.gemspec
+gemspec
+
+# jquery-rails is used by the dummy application
+gem "jquery-rails"

data/README.md

@@ -0,0 +1,17 @@
+# Cropper
+
+This is a rails-specific gem. It uses paperclip to provide a general-purpose upload-and-crop mechanism 
+in which a single upload object (with attached file) can be shared between any number of models, and
+each model can have any number of upload relations. Each associate has its own cropping paramaters.
+
+## Status
+
+New and in progress. Extracted from working code but likely to have suffered in the process. Please file issues.
+
+## Copyright
+
+Developed by spanner for Socionical and released under the MIT license.
+
+## Bugs and issues
+
+Very likely. Please file github issues or write to will at spanner dot org.

data/Rakefile

@@ -0,0 +1,31 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'cropper'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+task :default => :spec

data/app/assets/javascripts/cropper.js.coffee

@@ -0,0 +1,9 @@
+#= require lib/modernizr
+#= require lib/es5-shim
+#= require cropper/filedrop
+#= require cropper/upload_crop_scale
+
+jQuery ($) ->
+  $.activate_with () ->
+    @find_including_self('[data-action="upload"]').uploader()
+    @find_including_self('[data-action="recrop"]').recropper()

data/app/assets/javascripts/cropper/filedrop.js.coffee

@@ -0,0 +1,255 @@
+# 
+#
+#  This is a somewhat hacked up version of filedrop, by Weixi Yen:
+# 
+#  Email: [Firstname][Lastname]@gmail.com
+#  
+#  Copyright (c) 2010 Resopollution
+#  
+#  Licensed under the MIT license:
+#    http://www.opensource.org/licenses/mit-license.php
+# 
+#  Project home:
+#    http://www.github.com/weixiyen/jquery-filedrop
+# 
+#  Version:  0.1.0
+# 
+#  Features:
+#       Allows sending of extra parameters with file.
+#       Works with Firefox 3.6+
+#       Future-compliant with HTML5 spec (will work with Webkit browsers and IE9)
+#  Usage:
+#      See README at project homepage
+
+Modernizr.addTest 'filereader', ->
+  !!(window.File && window.FileList && window.FileReader)
+
+jQuery ($) ->
+  jQuery.event.props.push "dataTransfer"
+
+  opts = {}
+  errors = [ "BrowserNotSupported", "TooManyFiles", "FileTooLarge" ]
+  doc_leave_timer = undefined
+  stop_loop = false
+  files_count = 0
+  files = undefined
+  
+  drop = (e) ->
+    e.preventDefault()
+    opts.drop e
+    files = e.dataTransfer.files
+    unless Modernizr.filereader && files?
+      opts.error(errors[0])
+      return false
+    files_count = files.length
+    upload()
+    false
+
+  pick = (e, filefield) ->
+    e.preventDefault()
+    files = filefield.files
+    unless Modernizr.filereader && files?
+      opts.error(errors[0])
+      return false
+    files_count = files.length
+    console.log "pick", files
+    upload()
+    false
+
+  getBuilder = (filename, filedata, boundary) ->
+    dashdash = "--"
+    crlf = "\r\n"
+    builder = ""
+    $.each opts.data, (i, val) ->
+      val = val()  if typeof val is "function"
+      builder += dashdash
+      builder += boundary
+      builder += crlf
+      builder += "Content-Disposition: form-data; name=\"" + i + "\""
+      builder += crlf
+      builder += crlf
+      builder += val
+      builder += crlf
+
+    builder += dashdash
+    builder += boundary
+    builder += crlf
+    builder += "Content-Disposition: form-data; name=\"" + opts.paramname + "\""
+    builder += "; filename=\"" + filename + "\""
+    builder += crlf
+    builder += "Content-Type: image/jpeg"
+    builder += crlf
+    builder += crlf
+    builder += filedata
+    builder += crlf
+    builder += dashdash
+    builder += boundary
+    builder += dashdash
+    builder += crlf
+    builder
+
+  progress = (e) ->
+    if e.lengthComputable
+      percentage = Math.round((e.loaded * 100) / e.total)
+      unless @currentProgress is percentage
+        @currentProgress = percentage
+        opts.progressUpdated @index, @file, @currentProgress
+        elapsed = new Date().getTime()
+        diffTime = elapsed - @currentStart
+        if diffTime >= opts.refresh
+          diffData = e.loaded - @startData
+          speed = diffData / diffTime
+          opts.speedUpdated @index, @file, speed
+          @startData = e.loaded
+          @currentStart = elapsed
+
+  upload = ->
+    send = (e) ->
+      e.target.index = getIndexBySize(e.total)  if e.target.index is `undefined`
+      xhr = new XMLHttpRequest()
+      ul = xhr.upload
+      file = files[e.target.index]
+      index = e.target.index
+      start_time = new Date().getTime()
+      boundary = "------multipartformboundary" + (new Date).getTime()
+      builder = undefined
+      newName = rename(file.name)
+      if typeof newName is "string"
+        builder = getBuilder(newName, e.target.result, boundary)
+      else
+        builder = getBuilder(file.name, e.target.result, boundary)
+      ul.index = index
+      ul.file = file
+      ul.downloadStartTime = start_time
+      ul.currentStart = start_time
+      ul.currentProgress = 0
+      ul.startData = 0
+      ul.addEventListener "progress", progress, false
+      xhr.open "POST", opts.url, true
+      xhr.setRequestHeader "content-type", "multipart/form-data; boundary=" + boundary
+      xhr.sendAsBinary builder
+      opts.uploadStarted index, file, files_count
+      xhr.onload = ->
+        if xhr.responseText
+          now = new Date().getTime()
+          timeDiff = now - start_time
+          result = opts.uploadFinished(index, file, xhr.responseText, timeDiff)
+          filesDone++
+          afterAll()  if filesDone is files_count - filesRejected
+          stop_loop = true  if result is false
+
+    stop_loop = false
+    unless files
+      opts.error errors[0]
+      return false
+    filesDone = 0
+    filesRejected = 0
+    if files_count > opts.maxfiles
+      opts.error errors[1]
+      return false
+    i = 0
+
+    while i < files_count
+      return false  if stop_loop
+      try
+        unless beforeEach(files[i]) is false
+          return  if i is files_count
+          reader = new FileReader()
+          max_file_size = 1048576 * opts.maxfilesize
+          reader.index = i
+          if files[i].size > max_file_size
+            opts.error errors[2], files[i], i
+            filesRejected++
+            continue
+          reader.onloadend = send
+          reader.readAsBinaryString files[i]
+        else
+          filesRejected++
+      catch err
+        opts.error errors[0]
+        return false
+      i++
+  getIndexBySize = (size) ->
+    i = 0
+
+    while i < files_count
+      return i  if files[i].size is size
+      i++
+    `undefined`
+  rename = (name) ->
+    opts.rename name
+  beforeEach = (file) ->
+    opts.beforeEach file
+  afterAll = ->
+    opts.afterAll()
+  dragEnter = (e) ->
+    clearTimeout doc_leave_timer
+    e.preventDefault()
+    opts.dragEnter e
+  dragOver = (e) ->
+    clearTimeout doc_leave_timer
+    e.preventDefault()
+    opts.docOver e
+    opts.dragOver e
+  dragLeave = (e) ->
+    clearTimeout doc_leave_timer
+    opts.dragLeave e
+    e.stopPropagation()
+  docDrop = (e) ->
+    e.preventDefault()
+    opts.docLeave e
+    false
+  docEnter = (e) ->
+    clearTimeout doc_leave_timer
+    e.preventDefault()
+    opts.docEnter e
+    false
+  docOver = (e) ->
+    clearTimeout doc_leave_timer
+    e.preventDefault()
+    opts.docOver e
+    false
+  docLeave = (e) ->
+    doc_leave_timer = setTimeout(->
+      opts.docLeave e
+    , 200)
+  empty = ->
+
+  default_opts =
+    url: ""
+    refresh: 1000
+    paramname: "userfile"
+    maxfiles: 25
+    maxfilesize: 1
+    data: {}
+    drop: empty
+    dragEnter: empty
+    dragOver: empty
+    dragLeave: empty
+    docEnter: empty
+    docOver: empty
+    docLeave: empty
+    beforeEach: empty
+    afterAll: empty
+    rename: empty
+    error: (err, file, i) ->
+      alert err
+
+    uploadStarted: empty
+    uploadFinished: empty
+    progressUpdated: empty
+    speedUpdated: empty
+
+  $.fn.filedrop = (options) ->
+    opts = $.extend({}, default_opts, options)
+    @bind("drop", drop).bind("pick", pick).bind("dragenter", dragEnter).bind("dragover", dragOver).bind "dragleave", dragLeave
+    $(document).bind("drop", docDrop).bind("dragenter", docEnter).bind("dragover", docOver).bind "dragleave", docLeave
+
+  try
+    return if XMLHttpRequest::sendAsBinary
+    XMLHttpRequest::sendAsBinary = (datastr) ->
+      byteValue = (x) ->
+        x.charCodeAt(0) & 0xff
+      ords = Array::map.call(datastr, byteValue)
+      ui8a = new Uint8Array(ords)
+      @send ui8a.buffer

data/app/assets/javascripts/cropper/upload_crop_scale.js.coffee

@@ -0,0 +1,360 @@
+jQuery ($) ->
+
+  $.fn.detach_upload = ->
+    @click (e) ->
+      e.preventDefault() if e
+      $(@).parents('div.uploadbox').find('input[data-clear-on-detach]').val(1)
+      $(@).parents('.img').empty()
+
+  $.fn.recropper = ->
+    uploadbox = $("div.uploadbox")
+    @click (e) ->
+      e.preventDefault()
+      uploadbox.find("div.waiter").show()
+      $.get $(this).attr("href"), ((response) ->
+        new Cropper(response, uploadbox)
+      ), "html"
+    @
+
+  $.fn.picker = (filefield) ->
+    @click (e) ->
+      e.preventDefault()
+      e.stopPropagation()
+      filefield ?= $(".uploadbox").find('input[type="file"]')
+      filefield.trigger('click')
+    @
+
+  $.fn.click_proxy = (target_selector) ->
+    this.bind "click", (e) ->
+      e.preventDefault()
+      $(target_selector).click()
+
+  $.fn.uploader = (opts) ->
+    @each ->
+      options = $.extend {}, opts
+      dropbox = $(@)
+      csrf_token = dropbox.parents("form").find('input[name="authenticity_token"]').val()
+      filefield = dropbox.find('input[type="file"]')
+      url = options.url ? dropbox.attr("data-url")
+      paramname = options.paramname ? "upload[file]"
+    
+      finisher = (i, file, response, time) ->
+        dropbox.find(".progress_holder").remove()
+        dropbox.find(".waiter").remove()
+        new Cropper(response, dropbox)
+
+      dropbox.filedrop
+        maxfiles: 1
+        maxfilesize: 10
+        url: url
+        paramname: paramname
+        data:
+          authenticity_token: csrf_token
+
+        error: (err, file) ->
+          switch err
+            when "BrowserNotSupported"
+              auth = $('input[name="authenticity_token"]').clone()
+              form = $('<form id="uform" method="post" enctype="multipart/form-data" />').append(auth)
+              iframe = $('<iframe id="uframe" name="uframe" />').appendTo($('body'))
+              newff = filefield.clone()
+              filefield.before(newff).attr("name", paramname)
+              form.append(filefield).appendTo("body").attr("action", url).attr("target", "uframe")
+              newff.change((e) ->
+                dropbox.trigger "pick", filefield[0]
+              )
+              filefield = newff
+              iframe.bind "load", () ->
+                response = iframe[0].contentWindow.document.body.innerHTML
+                if response and response isnt ""
+                  finisher.call this, null, null, response, null
+                  iframe.remove()
+                  form.remove()
+
+              dropbox.find(".instructions").hide()
+              dropbox.find(".img").fadeTo('slow', 0.1)
+              dropbox.find(".waiter").show()
+              form.submit()
+
+            when "TooManyFiles"
+              alert "You can only upload 1 file."
+
+            when "FileTooLarge"
+              alert "#{file.name} is too large! Files up to 10MB are allowed"
+            
+            else
+              alert "#{file.name} caused an unknown error: #{err}"
+            
+        dragOver: ->
+          dropbox.addClass "hover"
+
+        dragLeave: ->
+          dropbox.removeClass "hover"
+
+        beforeEach: (file) ->
+          dropbox.removeClass "hover"
+          unless file.type.match(/^image\//)
+            alert "Sorry: only image files are allowed!"
+            false
+
+        afterAll: ->
+          filefield.val ""
+
+        uploadStarted: (i, file, len) ->
+          dropbox.find("img").fadeTo "fast", 0.5
+          dropbox.find("p.instructions").hide()
+          dropbox.append "<div class=\"progress_holder\"><div class=\"progress\"></div><div class=\"commentary\">0% uploaded</div></div>"
+
+        progressUpdated: (i, file, progress) ->
+          dropbox.find("div.progress").width progress + "%"
+          dropbox.find("div.commentary").text progress + "% uploaded"
+
+        uploadFinished: finisher
+
+      dropbox.find('a[data-action="pick"]').picker(filefield)
+      dropbox.find('a[data-action="detach"]').detach_upload()
+      filefield.change (e) ->
+        dropbox.trigger "pick", filefield[0]
+    @
+    
+
+
+
+  class Cropper
+    constructor: (response, container) ->
+      @element = $(response)
+      @container = $(container)
+      @filefield = @container.find('input[type="file"]')
+      @fields = @element.find("fieldset.crop")
+      @preview = @element.find("div.preview")
+      @instructions = @element.find("p.drag_instructions")
+      @overflow = $("<div class=\"overflow\">").append(@preview.find("img").clone())
+      @controls = @container.find(".controls")
+      @container.find("div.preview").remove()
+      @container.find("div.img").after(@preview)
+      @container.find("div.waiter").hide()
+      @container.append @instructions
+      @container.append @fields
+      @container.before @overflow
+
+      @filefield?.prop('disabled', true)
+      
+      @detacher = $('<a href="#" class="detach" />').appendTo(@container)
+      @detacher.click @cancel
+
+      @top = @preview.position().top
+      @left = @preview.position().left
+      @lastX = 0
+      @lastY = 0
+
+      range = @fields.find("input[type=\"range\"]")
+      @scaler = new Scaler range,
+        drag: @showOverflow
+        move: @resize
+        drop: @hideOverflow
+
+      @controls.find(".cancel a").bind "click", @cancel
+      @preview.bind "mousedown", @drag
+
+      @recalculateLimits()
+      @setOverflow()
+      @setControls()
+      @container.bind "mouseover", @showClutter
+      @container.bind "mouseout", @hideClutter
+      # @hide()
+
+    drag: (e) =>
+      e.preventDefault()
+      $(document).bind "mousemove", @move
+      $(document).bind "mouseup", @drop
+      @lastY = e.pageY
+      @lastX = e.pageX
+      @hideClutter()
+      @showOverflow()
+
+    move: (e) =>
+      e.preventDefault()
+      @moveTop e.pageY - @lastY
+      @moveLeft e.pageX - @lastX
+      @lastY = e.pageY
+      @lastX = e.pageX
+      @setOverflow()
+
+    resize: (w) =>
+      h = Math.round(w * @aspect)
+      deltaT = Math.round((w - @preview.width()) / 2)
+      deltaL = Math.round((h - @preview.height()) / 2)
+      @preview.css
+        width: w
+        height: h
+      @fields.find("input.sh").val h
+      @recalculateLimits()
+      @moveTop(-deltaT)
+      @moveLeft(-deltaL)
+      @setOverflow()
+
+    recalculateLimits: (argument) =>
+      @toplimit = @container.height() - @preview.height()
+      @leftlimit = @container.width() - @preview.width()
+      @aspect = @preview.height() / @preview.width()
+
+    moveTop: (y) =>
+      @top = @top + y
+      @top = 0 if @top > 0
+      @top = @toplimit if @top < @toplimit
+      @preview.css "top", @top
+      @fields.find("input.ot").val @top
+
+    moveLeft: (x) =>
+      @left = @left + x
+      @left = 0  if @left > 0
+      @left = @leftlimit  if @left < @leftlimit
+      @preview.css "left", @left
+      @fields.find("input.ol").val @left
+
+    drop: (e) =>
+      $(document).unbind "mousemove", @move
+      $(document).unbind "mouseup", @drop
+      @move e
+      @showClutter()
+      @hideOverflow()
+
+    setOverflow: () =>
+      @overflow.css
+        width: @preview.width()
+        height: @preview.height()
+      @overflow.offset @preview.offset()
+
+    cancel: (e) =>
+      e.preventDefault()
+      @preview.remove()
+      @overflow.remove()
+      @scaler.remove()
+      @fields.remove()
+      @detacher.remove()
+      @instructions.remove()
+      @resetControls()
+      @container.find("img").fadeIn "slow"
+      @container.find("p.instructions").show()
+      @filefield?.prop('disabled', false)
+      
+    resume: (e) =>
+      e.preventDefault()
+      @scaler.show()
+      @detacher.show()
+      @showOverflow()
+      @preview.bind "mousedown", @drag
+      @preview.css "cursor", 'move'
+      @container.find(".range_marker").show()
+      @setControls()
+
+    setControls: =>
+      @controls.show()
+      @controls.find(".edit").hide()
+      @controls.find(".cancel").show()
+      @controls.find('a[data-action="pick"]').addClass("unavailable").unbind("click").bind("click", @blocker)
+      @detacher.bind "click", @cancel
+
+    resetControls: =>
+      @controls.find(".cancel").hide()
+      @controls.find(".edit").show()
+      @controls.find('a[data-action="pick"]').removeClass("unavailable").picker()
+
+    blocker: (e) =>
+      if e
+        e.preventDefault()
+        e.stopPropagation()
+
+    show: =>
+      @showClutter()
+      @showOverflow()
+
+    showClutter: =>
+      @scaler?.show()
+      @controls?.show()
+      @detacher?.show()
+      @instructions?.show()
+
+    showOverflow: =>
+      @overflow.show()#fadeTo('normal', 0.3)
+
+    hide: =>
+      @hideClutter()
+      @hideOverflow()
+
+    hideClutter: =>
+      @scaler?.hide()
+      @controls?.hide()
+      @detacher?.hide()
+      @instructions?.hide()
+
+    hideOverflow: =>
+      @overflow.hide()#fadeOut('normal')
+
+  class Scaler
+    constructor: (range, callbacks) ->
+      @callbacks = $.extend {}, callbacks
+      @input = $(range)
+      @pos = 0
+      @value = @input.val()
+      @max = parseInt(@input.attr("max"), 10)
+      @min = parseInt(@input.attr("min"), 10)
+      @slider = $("<span class=\"slider\"><span class=\"scale\"><span class=\"marker\"></span></span></span>")
+      @scale = @slider.find(".scale")
+      @marker = @slider.find(".marker")
+      @lastX = 0
+
+      @marker.bind("mousedown", @drag)
+      @input.before(@slider).hide()
+      @scale_width = @scale.width() || 480
+      @reposition()
+
+    drag: (e) =>
+      e.preventDefault()
+      @lastX = e.pageX
+      $(document).bind "mousemove", @move
+      $(document).bind "mouseup", @drop
+      @callbacks.drag?.call @, @value
+
+    move: (e) =>
+      deltaX = e.pageX - @lastX
+      @pos = @pos + deltaX
+      @pos = 0 if @pos < 0
+      @pos = @scale_width-5 if @pos > @scale_width-5
+      @placeMarker(@pos)
+      @recalculate()
+      @lastX = e.pageX
+      @callbacks.move?.call @, @value
+
+    drop: (e) =>
+      @move e
+      $(document).unbind "mousemove", @move
+      $(document).unbind "mouseup", @drop
+      @callbacks.drop?.call @, @value
+
+    recalculate: =>
+      origin = @min
+      pixel_proportion = (@pos / @scale_width)
+      value_width = @max - @min
+      @value = Math.round(origin + (value_width * pixel_proportion))
+      @input.val(@value)
+
+    reposition: =>
+      origin = @min
+      value_proportion = (@value - origin) / (@max - origin)
+      @pos = Math.round(@scale_width * value_proportion)
+      @placeMarker @pos
+
+    placeMarker: (x) =>
+      @marker.css "left", x
+
+    remove: =>
+      @slider.remove()
+    
+    hide: =>
+      @slider.hide()
+
+    show: =>
+      @slider.show()
+      
+