rails_cropit 0.1.0

data/vendor/assets/stylesheets/cropit.coffee

@@ -0,0 +1,415 @@
+class Cropit
+
+  @_DEFAULTS:
+    exportZoom: 1
+    imageBackground: false
+    imageBackgroundBorderWidth: 0
+    imageState: null
+    allowCrossOrigin: false
+    allowDragNDrop: true
+    freeMove: false
+    minZoom: 'fill'
+
+  @PREVIEW_EVENTS: do ->
+    [
+      'mousedown', 'mouseup', 'mouseleave'
+      'touchstart', 'touchend', 'touchcancel', 'touchleave'
+    ]
+      .map (type) -> "#{type}.cropit"
+      .join ' '
+  @PREVIEW_MOVE_EVENTS: 'mousemove.cropit touchmove.cropit'
+  @ZOOM_INPUT_EVENTS: do ->
+    [
+      'mousemove', 'touchmove', 'change'
+    ]
+      .map (type) -> "#{type}.cropit"
+      .join ' '
+
+  constructor: (@element, options) ->
+    @$el = $ @element
+
+    dynamicDefaults =
+      $fileInput: @$ 'input.cropit-image-input'
+      $preview: @$ '.cropit-image-preview'
+      $zoomSlider: @$ 'input.cropit-image-zoom-input'
+      $previewContainer: @$ '.cropit-image-preview-container'
+
+    @options = $.extend {}, Cropit._DEFAULTS, dynamicDefaults, options
+    @init()
+
+  init: ->
+    @image = new Image
+    @image.crossOrigin = 'Anonymous' if @options.allowCrossOrigin
+
+    @$fileInput = @options.$fileInput
+      .attr
+        accept: 'image/*'
+    @$preview = @options.$preview
+      .css
+        backgroundRepeat: 'no-repeat'
+    @$zoomSlider = @options.$zoomSlider
+      .attr
+        min: 0
+        max: 1
+        step: .01
+
+    @previewSize =
+      w: @options.width or @$preview.width()
+      h: @options.height or @$preview.height()
+    @$preview.width @previewSize.w if @options.width
+    @$preview.height @previewSize.h if @options.height
+
+    if @options.imageBackground
+      if $.isArray @options.imageBackgroundBorderWidth
+        @imageBgBorderWidthArray = @options.imageBackgroundBorderWidth
+      else
+        @imageBgBorderWidthArray = []
+        [0..3].forEach (i) =>
+          @imageBgBorderWidthArray[i] = @options.imageBackgroundBorderWidth
+
+      $previewContainer = @options.$previewContainer
+      @$imageBg = $ '<img />'
+        .addClass 'cropit-image-background'
+        .attr 'alt', ''
+        .css 'position', 'absolute'
+      @$imageBgContainer = $ '<div />'
+        .addClass 'cropit-image-background-container'
+        .css
+          position: 'absolute'
+          zIndex: 0
+          left: -@imageBgBorderWidthArray[3] + window.parseInt @$preview.css 'border-left-width'
+          top: -@imageBgBorderWidthArray[0] + window.parseInt @$preview.css 'border-top-width'
+          width: @previewSize.w + @imageBgBorderWidthArray[1] + @imageBgBorderWidthArray[3]
+          height: @previewSize.h + @imageBgBorderWidthArray[0] + @imageBgBorderWidthArray[2]
+        .append @$imageBg
+      @$imageBgContainer.css overflow: 'hidden' if @imageBgBorderWidthArray[0] > 0
+      $previewContainer
+        .css 'position', 'relative'
+        .prepend @$imageBgContainer
+      @$preview.css 'position', 'relative'
+
+      @$preview.hover =>
+        @$imageBg.addClass 'cropit-preview-hovered'
+      , =>
+        @$imageBg.removeClass 'cropit-preview-hovered'
+
+    @initialOffset = x: 0, y: 0
+    @initialZoom = 0
+    @initialZoomSliderPos = 0
+    @imageLoaded = false
+
+    @moveContinue = false
+
+    @zoomer = new Zoomer
+
+    jQuery.event.props.push 'dataTransfer' if @options.allowDragNDrop
+    @bindListeners()
+
+    @$zoomSlider.val @initialZoomSliderPos
+    @setOffset @options.imageState?.offset or @initialOffset
+    @zoom = @options.imageState?.zoom or @initialZoom
+    @loadImage @options.imageState?.src or null
+
+  bindListeners: ->
+    @$fileInput.on 'change.cropit', @onFileChange.bind @
+    @$preview.on Cropit.PREVIEW_EVENTS, @onPreviewEvent.bind @
+    @$zoomSlider.on Cropit.ZOOM_INPUT_EVENTS, @onZoomSliderChange.bind @
+
+    if @options.allowDragNDrop
+      @$preview.on 'dragover.cropit dragleave.cropit', @onDragOver.bind @
+      @$preview.on 'drop.cropit', @onDrop.bind @
+
+  unbindListeners: ->
+    @$fileInput.off 'change.cropit'
+    @$preview.off Cropit.PREVIEW_EVENTS
+    @$preview.off 'dragover.cropit dragleave.cropit drop.cropit'
+    @$zoomSlider.off Cropit.ZOOM_INPUT_EVENTS
+
+  reset: ->
+    @zoom = @initialZoom
+    @offset = @initialOffset
+
+  onFileChange: ->
+    @options.onFileChange?()
+
+    @loadFileReader @$fileInput.get(0).files[0]
+
+  loadFileReader: (file) ->
+    fileReader = new FileReader()
+    if file?.type.match 'image'
+      @setImageLoadingClass()
+
+      fileReader.readAsDataURL file
+      fileReader.onload = @onFileReaderLoaded.bind @
+      fileReader.onerror = @onFileReaderError.bind @
+    else if file?
+      @onFileReaderError()
+
+  onFileReaderLoaded: (e) ->
+    @reset()
+    @loadImage e.target.result
+
+  onFileReaderError: ->
+    @options.onFileReaderError?()
+
+  onDragOver: (e) ->
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'copy'
+    @$preview.toggleClass 'cropit-drag-hovered', e.type is 'dragover'
+
+  onDrop: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+
+    files = Array.prototype.slice.call e.dataTransfer.files, 0
+    files.some (file) =>
+      if file.type.match 'image'
+        @loadFileReader file
+        return true
+
+    @$preview.removeClass 'cropit-drag-hovered'
+
+  loadImage: (imageSrc) ->
+    @imageSrc = imageSrc
+    return unless @imageSrc
+
+    @options.onImageLoading?()
+    @setImageLoadingClass()
+
+    @image.onload = @onImageLoaded.bind @
+    @image.onerror = @onImageError.bind @
+
+    @image.src = @imageSrc
+
+  onImageLoaded: ->
+    @setImageLoadedClass()
+
+    @setOffset @offset
+    @$preview.css 'background-image', "url(#{@imageSrc})"
+    @$imageBg.attr 'src', @imageSrc if @options.imageBackground
+
+    @imageSize =
+      w: @image.width
+      h: @image.height
+
+    @setupZoomer()
+
+    @imageLoaded = true
+
+    @options.onImageLoaded?()
+
+  onImageError: ->
+    @options.onImageError?()
+
+  setImageLoadingClass: ->
+    @$preview
+      .removeClass 'cropit-image-loaded'
+      .addClass 'cropit-image-loading'
+
+  setImageLoadedClass: ->
+    @$preview
+      .removeClass 'cropit-image-loading'
+      .addClass 'cropit-image-loaded'
+
+  getEventPosition: (e) ->
+    e = e.originalEvent?.touches?[0] if e.originalEvent?.touches?[0]
+    return x: e.clientX, y: e.clientY if e.clientX and e.clientY
+
+  onPreviewEvent: (e) ->
+    return unless @imageLoaded
+    @moveContinue = false
+    @$preview.off Cropit.PREVIEW_MOVE_EVENTS
+
+    if e.type is 'mousedown' or e.type is 'touchstart'
+      @origin = @getEventPosition e
+      @moveContinue = true
+      @$preview.on Cropit.PREVIEW_MOVE_EVENTS, @onMove.bind @
+    else
+      $(document.body).focus()
+    e.stopPropagation()
+    false
+
+  onMove: (e) ->
+    eventPosition = @getEventPosition e
+
+    if @moveContinue and eventPosition
+      @setOffset
+        x: @offset.x + eventPosition.x - @origin.x
+        y: @offset.y + eventPosition.y - @origin.y
+
+    @origin = eventPosition
+
+    e.stopPropagation()
+    false
+
+  setOffset: (position) ->
+    @offset = @fixOffset position
+    @$preview.css 'background-position', "#{@offset.x}px #{@offset.y}px"
+    if @options.imageBackground
+      @$imageBg.css
+        left: @offset.x + @imageBgBorderWidthArray[3]
+        top: @offset.y + @imageBgBorderWidthArray[0]
+
+  fixOffset: (offset) ->
+    return offset unless @imageLoaded
+
+    ret = x: offset.x, y: offset.y
+
+    unless @options.freeMove
+      if @imageSize.w * @zoom >= @previewSize.w
+        ret.x = Math.min 0, Math.max ret.x, @previewSize.w - @imageSize.w * @zoom
+      else
+        ret.x = Math.max 0, Math.min ret.x, @previewSize.w - @imageSize.w * @zoom
+
+      if @imageSize.h * @zoom >= @previewSize.h
+        ret.y = Math.min 0, Math.max ret.y, @previewSize.h - @imageSize.h * @zoom
+      else
+        ret.y = Math.max 0, Math.min ret.y, @previewSize.h - @imageSize.h * @zoom
+
+    ret.x = @round ret.x
+    ret.y = @round ret.y
+
+    ret
+
+  onZoomSliderChange: ->
+    return unless @imageLoaded
+
+    @zoomSliderPos = Number @$zoomSlider.val()
+    newZoom = @zoomer.getZoom @zoomSliderPos
+    @setZoom newZoom
+
+  enableZoomSlider: ->
+    @$zoomSlider.removeAttr 'disabled'
+    @options.onZoomEnabled?()
+
+  disableZoomSlider: ->
+    @$zoomSlider.attr 'disabled', true
+    @options.onZoomDisabled?()
+
+  setupZoomer: ->
+    @zoomer.setup @imageSize, @previewSize, @options.exportZoom, @options
+    @zoom = @fixZoom @zoom
+    @setZoom @zoom
+
+    if @isZoomable() then @enableZoomSlider() else @disableZoomSlider()
+
+  setZoom: (newZoom) ->
+    newZoom = @fixZoom newZoom
+
+    updatedWidth = @round @imageSize.w * newZoom
+    updatedHeight = @round @imageSize.h * newZoom
+
+    oldZoom = @zoom
+
+    newX = @previewSize.w / 2 - (@previewSize.w / 2 - @offset.x) * newZoom / oldZoom
+    newY = @previewSize.h / 2 - (@previewSize.h / 2 - @offset.y) * newZoom / oldZoom
+
+    @zoom = newZoom
+    @setOffset x: newX, y: newY
+
+    @zoomSliderPos = @zoomer.getSliderPos @zoom
+    @$zoomSlider.val @zoomSliderPos
+
+    @$preview.css 'background-size', "#{updatedWidth}px #{updatedHeight}px"
+    if @options.imageBackground
+      @$imageBg.css
+        width: updatedWidth
+        height: updatedHeight
+
+  fixZoom: (zoom) ->
+    @zoomer.fixZoom zoom
+
+  isZoomable: ->
+    @zoomer.isZoomable()
+
+  getCroppedImageData: (exportOptions) ->
+    return null unless @imageSrc
+
+    exportDefaults =
+      type: 'image/png'
+      quality: .75
+      originalSize: false
+      fillBg: '#fff'
+    exportOptions = $.extend {}, exportDefaults, exportOptions
+
+    croppedSize =
+      w: @previewSize.w
+      h: @previewSize.h
+
+    exportZoom = if exportOptions.originalSize then 1 / @zoom else @options.exportZoom
+
+    canvas = $ '<canvas />'
+      .attr
+        width: croppedSize.w * exportZoom
+        height: croppedSize.h * exportZoom
+      .get 0
+    canvasContext = canvas.getContext '2d'
+
+    if exportOptions.type is 'image/jpeg'
+      canvasContext.fillStyle = exportOptions.fillBg
+      canvasContext.fillRect 0, 0, canvas.width, canvas.height
+
+    canvasContext.drawImage @image,
+      @offset.x * exportZoom,
+      @offset.y * exportZoom,
+      @zoom * exportZoom * @imageSize.w,
+      @zoom * exportZoom * @imageSize.h
+
+    canvas.toDataURL exportOptions.type, exportOptions.quality
+
+  getImageState: ->
+    src: @imageSrc
+    offset: @offset
+    zoom: @zoom
+
+  getImageSrc: ->
+    @imageSrc
+
+  getOffset: ->
+    @offset
+
+  getZoom: ->
+    @zoom
+
+  getImageSize: ->
+    return null unless @imageSize
+    width: @imageSize.w
+    height: @imageSize.h
+
+  getPreviewSize: ->
+    width: @previewSize.w
+    height: @previewSize.h
+
+  setPreviewSize: (size) ->
+    return unless size?.width > 0 and size?.height > 0
+
+    @previewSize =
+      w: size.width
+      h: size.height
+    @$preview.css
+      width: @previewSize.w
+      height: @previewSize.h
+
+    if @options.imageBackground
+      @$imageBgContainer.css
+        width: @previewSize.w + @imageBgBorderWidthArray[1] + @imageBgBorderWidthArray[3]
+        height: @previewSize.h + @imageBgBorderWidthArray[0] + @imageBgBorderWidthArray[2]
+
+    if @imageLoaded
+      @setupZoomer()
+
+  disable: ->
+    @unbindListeners()
+    @disableZoomSlider()
+    @$el.addClass 'cropit-disabled'
+
+  reenable: ->
+    @bindListeners()
+    @enableZoomSlider()
+    @$el.removeClass 'cropit-disabled'
+
+  round: (x) -> +(Math.round(x * 1e2)  + 'e-2')
+
+  $: (selector) ->
+    return null unless @$el
+    @$el.find selector

data/vendor/assets/stylesheets/plugin.coffee

@@ -0,0 +1,83 @@
+dataKey = 'cropit'
+
+methods =
+
+  init: (options) ->
+    @each ->
+      # Only instantiate once per element
+      unless $.data @, dataKey
+        cropit = new Cropit @, options
+        $.data @, dataKey, cropit
+
+  destroy: ->
+    @each ->
+      $.removeData @, dataKey
+
+  isZoomable: ->
+    cropit = @first().data dataKey
+    cropit?.isZoomable()
+
+  export: (options) ->
+    cropit = @first().data dataKey
+    cropit?.getCroppedImageData options
+
+  imageState: ->
+    cropit = @first().data dataKey
+    cropit?.getImageState()
+
+  imageSrc: (newImageSrc) ->
+    if newImageSrc?
+      @each ->
+        cropit = $.data @, dataKey
+        cropit?.reset()
+        cropit?.loadImage newImageSrc
+    else
+      cropit = @first().data dataKey
+      cropit?.getImageSrc()
+
+  offset: (newOffset) ->
+    if newOffset? and newOffset.x? and newOffset.y?
+      @each ->
+        cropit = $.data @, dataKey
+        cropit?.setOffset newOffset
+    else
+      cropit = @first().data dataKey
+      cropit?.getOffset()
+
+  zoom: (newZoom) ->
+    if newZoom?
+      @each ->
+        cropit = $.data @, dataKey
+        cropit?.setZoom newZoom
+    else
+      cropit = @first().data dataKey
+      cropit?.getZoom()
+
+  imageSize: ->
+    cropit = @first().data dataKey
+    cropit?.getImageSize()
+
+  previewSize: (newSize) ->
+    if newSize?
+      @each ->
+        cropit = $.data @, dataKey
+        cropit?.setPreviewSize newSize
+    else
+      cropit = @first().data dataKey
+      cropit?.getPreviewSize()
+
+  disable: ->
+    @each ->
+      cropit = $.data @, dataKey
+      cropit.disable()
+
+  reenable: ->
+    @each ->
+      cropit = $.data @, dataKey
+      cropit.reenable()
+
+$.fn.cropit = (method) ->
+  if methods[method]
+    methods[method].apply @, [].slice.call arguments, 1
+  else
+    methods.init.apply @, arguments

data/vendor/assets/stylesheets/zoomer.coffee

@@ -0,0 +1,31 @@
+class Zoomer
+  setup: (imageSize, previewSize, exportZoom = 1, options) ->
+    widthRatio = previewSize.w / imageSize.w
+    heightRatio = previewSize.h / imageSize.h
+
+    if options?.minZoom is 'fit'
+      @minZoom = if widthRatio < heightRatio then widthRatio else heightRatio
+    else
+      @minZoom = if widthRatio < heightRatio then heightRatio else widthRatio
+
+    @maxZoom = if @minZoom < 1 / exportZoom then 1 / exportZoom else @minZoom
+
+  getZoom: (sliderPos) ->
+    return null unless @minZoom and @maxZoom
+    sliderPos * (@maxZoom - @minZoom) + @minZoom
+
+  getSliderPos: (zoom) ->
+    return null unless @minZoom and @maxZoom
+    if @minZoom is @maxZoom
+      0
+    else
+      (zoom - @minZoom) / (@maxZoom - @minZoom)
+
+  isZoomable: ->
+    return null unless @minZoom and @maxZoom
+    @minZoom isnt @maxZoom
+
+  fixZoom: (zoom) ->
+    return @minZoom if zoom < @minZoom
+    return @maxZoom if zoom > @maxZoom
+    zoom

metadata

@@ -0,0 +1,112 @@
+--- !ruby/object:Gem::Specification 
+name: rails_cropit
+version: !ruby/object:Gem::Version 
+  hash: 27
+  prerelease: 
+  segments: 
+  - 0
+  - 1
+  - 0
+  version: 0.1.0
+platform: ruby
+authors: 
+- Kaushal Kishor
+autorequire: 
+bindir: exe
+cert_chain: []
+
+date: 2015-09-27 00:00:00 +05:30
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  version_requirements: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 31
+        segments: 
+        - 1
+        - 8
+        version: "1.8"
+  prerelease: false
+  requirement: *id001
+  type: :development
+  name: bundler
+- !ruby/object:Gem::Dependency 
+  version_requirements: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 35
+        segments: 
+        - 10
+        - 0
+        version: "10.0"
+  prerelease: false
+  requirement: *id002
+  type: :development
+  name: rake
+description: It is jQuery gem for "customizable crop and zoom" on rails application platform
+email: 
+- kaushalk16@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/rails_cropit.rb
+- lib/rails_cropit/version.rb
+- rails_cropit.gemspec
+- vendor/assets/javascripts/jquery.cropit.js
+- vendor/assets/javascripts/jquery.cropit.min.js
+- vendor/assets/stylesheets/cropit.coffee
+- vendor/assets/stylesheets/plugin.coffee
+- vendor/assets/stylesheets/zoomer.coffee
+has_rdoc: true
+homepage: https://github.com/kaushal-xx/rails_cropit
+licenses: 
+- MIT
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.4.2
+signing_key: 
+specification_version: 3
+summary: Crop image run time
+test_files: []
+