paper_cropper 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 765ec5c7bbb8a9db019e7c04a976c98a61d0b5ce
+  data.tar.gz: db472297bc0ae0fe57f463d113141514198fefaa
+SHA512:
+  metadata.gz: 8005e706ae466fb0029f9c34aee3fe5929fbee660b7bd9486347267c1ad657a84717e3204fc2caf83338f709a57b2784659a3acdab82f9938f516a61ebe7f68e
+  data.tar.gz: 81906bd23691a56d4617c5ebe2981efc16b9995c37315eca45adae02ced0d7a3137e8bea97dc2e0f03b669e789da56db4df93c5fcf6e62aabffa9d7a2eaebdb0

data/README.md

@@ -0,0 +1,127 @@
+# PaperCropper gem
+
+PaperCropper gem is a gem for cropping images using [cropper js](https://github.com/fengyuanchen/cropperjs) and [Paperclip](https://github.com/thoughtbot/paperclip)
+
+All examples are based on a `cover` attachment
+
+## migrations
+
+```ruby
+create_table :gallery_albums do |t|
+  t.attachment        :cover # paperclip required
+  t.crop_attachment   :cover # add extra columns for crop
+end
+```
+
+## model
+
+```ruby
+# aspect 1:1
+crop_attached_file :cover
+
+# aspect 16:4
+crop_attached_file :cover, aspect: '16:4'
+
+# free (without aspect restriction)
+crop_attached_file :cover, aspect: false
+```
+
+## controler
+Take care of permitted params. Add the following fields to ```permitted``` strong attributes:
+
+```ruby
+:cover_crop_x, :cover_crop_y, :cover_crop_width, :cover_crop_height
+```
+
+## javascripts
+
+~~~
+//= require cropper
+//= require paper_cropper
+
+// Crop
+$('.crop-image-container').each(function(){
+  papercropper = new PaperCropper(this, {})
+});
+~~~
+
+## scss
+
+~~~
+@import "cropper";
+@import "paper_cropper";
+~~~
+
+The paper_cropper is not required, is only for a small changes. The only thing required from 'paper_cropper' is this rule:
+
+~~~
+/* Limit image width to avoid overflow the container */
+.crop-image-container img.crop-image {
+  max-width: 100%; /* This rule is very important, please do not ignore this! */
+}
+~~~
+
+---------------------------------------------
+
+## helpers
+
+helper, with twitter bootstrap classes, custom formatted, and other things
+
+~~~
+<%= form_for ..... %>
+  <%= f.tws_cropper_box :cover %>
+<% end %>
+~~~
+
+**custom (without helper)**
+
+if you do not want to use helper, you can do what you want, for example you could make the file selector ".crop-image-file-input" below the picture "crop-image-wrapper"
+
+the most important thing is to keep the "crop-image ..." classes and "crop-image-container" and "crop-image-wrapper" containers
+
+for example:
+
+~~~
+<!-- [required] Main container (you need to supply this in JS constructor) -->
+<div class="crop-image-container">
+  <!-- [required] Hidden input for save the crop values -->
+  <input class="crop-image-value-x"       type="hidden" name="cover_crop_x"       value="">
+  <input class="crop-image-value-y"       type="hidden" name="cover_crop_y"       value="">
+  <input class="crop-image-value-width"   type="hidden" name="cover_crop_width"   value="">
+  <input class="crop-image-value-height"  type="hidden" name="cover_crop_height"  value="">
+
+  <!-- [required] Wrap the image or canvas element with a block element (container) -->
+  <div class="crop-image-wrapper">
+    <!-- [required] Image to crop -->
+    <img class="crop-image" src="">
+  </div>
+
+  <!-- [required] File input for change the image -->
+  <input class="crop-image-file-input" type="file">
+
+  <!-- [optional] Buttons -->
+  <button class="crop-image-btn-zoom-in"     type="button">Zoom in</button>
+  <button class="crop-image-btn-zoom-out"    type="button">Zoom out</button>
+  <button class="crop-image-btn-move-left"   type="button">Move left</button>
+  <button class="crop-image-btn-move-right"  type="button">Move right</button>
+  <button class="crop-image-btn-move-up"     type="button">Move up</button>
+  <button class="crop-image-btn-move-down"   type="button">Move down</button>
+</div>
+~~~
+
+# License
+
+PaperCropper is Copyright © 2016 CodiTramuntana SL. It is free software, and may be redistributed under the terms specified in the MIT-LICENSE file.
+
+# About CodiTramuntana
+
+![coditramuntana](http://www.coditramuntana.com/assets/ic_logo_medium.png)
+
+PaperCropper is maintained by [CodiTramuntana](http://www.coditramuntana.com).
+PaperCropper is the mix of [cropper js](https://github.com/fengyuanchen/cropperjs) and
+[Paperclip](https://github.com/thoughtbot/paperclip) and some glue code to make things
+easier.
+
+The names and logos for CodiTramuntana are trademarks of CodiTramuntana SL.
+
+We love open source software!

data/lib/assets/javascripts/paper_cropper.js

@@ -0,0 +1,149 @@
+/**
+ * PaperCropper
+ *
+ * @param container
+ *  Main container of objects
+ * @param options
+ *  Extra options
+ *
+ * Example, important all classes used for crop starts with "crop-image*"
+ * The buttons, classes 'crop-image-btn-*' are optional
+ *
+<!-- Main container (you need to supply this in constructor) -->
+<div class="crop-image-container">
+  <!-- Hidden input for save the crop values -->
+  <input class="crop-image-value-x"       type="hidden" name="cover_crop_x"       value="">
+  <input class="crop-image-value-y"       type="hidden" name="cover_crop_y"       value="">
+  <input class="crop-image-value-width"   type="hidden" name="cover_crop_width"   value="">
+  <input class="crop-image-value-height"  type="hidden" name="cover_crop_height"  value="">
+
+  <!-- File input for change the image -->
+  <input class="crop-image-file-input" type="file">
+
+  <hr>
+
+  <!-- Wrap the image or canvas element with a block element (container) -->
+  <div class="crop-image-wrapper">
+   <img class="crop-image" src="">
+  </div>
+
+  <hr>
+
+  <button class="crop-image-btn-zoom-in"     type="button">Zoom in</button>
+  <button class="crop-image-btn-zoom-out"    type="button">Zoom out</button>
+  <button class="crop-image-btn-move-left"   type="button">Move left</button>
+  <button class="crop-image-btn-move-right"  type="button">Move right</button>
+  <button class="crop-image-btn-move-up"     type="button">Move up</button>
+  <button class="crop-image-btn-move-down"   type="button">Move down</button>
+</div>
+
+ */
+function PaperCropper(container, opt) {
+  var that = this;
+  this.container = $(container);
+  this.image = $(container).find('.crop-image');
+  this.inputX = $(container).find('.crop-image-value-x');
+  this.inputY = $(container).find('.crop-image-value-y');
+  this.inputWidth = $(container).find('.crop-image-value-width');
+  this.inputHeight = $(container).find('.crop-image-value-height');
+
+  var aspect = $(container).attr('data-crop-image-range');
+  if( isNaN(aspect) ) {
+    this.aspect = null;
+  } else {
+    this.aspect = parseFloat(aspect);
+  }
+
+  this.init();
+}
+
+/** Check if browswer support it */
+PaperCropper.isSupported = function() {
+  return (typeof FileReader !== "undefined");
+}
+
+/** Initializes all */
+PaperCropper.prototype.init = function() {
+  var fileInput = this.container.find('input.crop-image-file-input');
+  var that = this;
+
+  // file input change
+  fileInput.change(function(event){
+    that.fileInputChange(event);
+  });
+
+  // cropper
+  this.cropper = new Cropper(this.image[0], {
+    aspectRatio: this.aspect,
+    crop: function(event){
+      that.cropperCrop(event);
+    },
+    built: function() {
+      console.log('cropper build')
+      that.cropperBuild();
+    }
+  });
+
+
+  // buttons
+  this.container.find('.crop-image-btn-zoom-in').click(function(){
+    that.cropper.zoom(0.1);
+  });
+  this.container.find('.crop-image-btn-zoom-out').click(function(){
+    that.cropper.zoom(-0.1);
+  });
+  this.container.find('.crop-image-btn-move-left').click(function(){
+    that.cropper.move(-10,0);
+  });
+  this.container.find('.crop-image-btn-move-right').click(function(){
+    that.cropper.move(10,0);
+  });
+  this.container.find('.crop-image-btn-move-up').click(function(){
+    that.cropper.move(0,-10);
+  });
+  this.container.find('.crop-image-btn-move-down').click(function(){
+    that.cropper.move(0,10);
+  });
+}
+
+/** Callback method used when cropper are full loaded */
+PaperCropper.prototype.cropperBuild = function() {
+  // set initial values
+  this.setCropperData(this.inputX.val(), this.inputY.val(), this.inputWidth.val(), this.inputHeight.val());
+}
+
+/** Callback method used when the user changes the crop */
+PaperCropper.prototype.cropperCrop = function (event) {
+  console.log('crop:',event.detail)
+  console.log('crop crop data:',this.cropper.getData())
+  this.inputX.val(parseInt(event.detail.x));
+  this.inputY.val(parseInt(event.detail.y));
+  this.inputWidth.val(parseInt(event.detail.width));
+  this.inputHeight.val(parseInt(event.detail.height));
+}
+
+/** Callback method used when the user changes the file */
+PaperCropper.prototype.fileInputChange = function (event) {
+    var input = event.target;
+    var that = this;
+    if (input.files && input.files[0]) {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        that.cropper.replace(e.target.result);
+      }
+      reader.readAsDataURL(input.files[0]);
+    }
+}
+
+/** Set the cropper data */
+PaperCropper.prototype.setCropperData = function (x, y, width, height) {
+  this.cropper.setData({
+    'x': parseInt(x),
+    'y': parseInt(y),
+    'width': parseInt(width),
+    'height': parseInt(height),
+    'rotate': 0,
+    'scaleX': 1,
+    'scaleY': 1,
+  });
+}

data/lib/assets/stylesheets/paper_cropper.css

@@ -0,0 +1,7 @@
+/* Limit image width to avoid overflow the container */
+.crop-image-container img.crop-image {
+  max-width: 100%; /* This rule is very important, please do not ignore this! */
+}
+.crop-image-container div.crop-image-wrapper {
+  max-height: 300px;
+}

data/lib/paper_cropper/engine.rb

@@ -0,0 +1,4 @@
+module PaperCropper
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/paper_cropper/helpers.rb

@@ -0,0 +1,66 @@
+module PaperCropper
+  module FormHelpers
+
+    # Create a new cropper box with all buttons and classe. This will be use the
+    # twitter bootstrap classes
+    # @param attachment_name [Symbol] Name of the attachment to crop
+    def tws_cropper_box attachment_name
+      obj = self.object
+      form_helper = self
+      aspect_ratio = obj.send "#{attachment_name}_aspect"
+
+      out = "<div class='crop-image-container' data-crop-image-range='#{aspect_ratio}'>"
+
+      out << form_helper.hidden_field(:"#{attachment_name}_crop_x", class: 'crop-image-value-x')
+      out << form_helper.hidden_field(:"#{attachment_name}_crop_y", class: 'crop-image-value-y')
+      out << form_helper.hidden_field(:"#{attachment_name}_crop_width", class: 'crop-image-value-width')
+      out << form_helper.hidden_field(:"#{attachment_name}_crop_height", class: 'crop-image-value-height')
+
+      out << form_helper.file_field(attachment_name, class: 'crop-image-file-input', label_col: "col-sm-3", control_col: "col-sm-9")
+
+      out << '<hr>'
+
+      image_src = obj.send("#{attachment_name}?") ? obj.send(attachment_name).url : ''
+      out << '<div class="crop-image-wrapper">'
+      out << "<img class='crop-image' class='crop-image' src='#{image_src}'>"
+      out << '</div>'
+
+      out << '<hr>'
+
+      out << '<div class="btn-group pull-left" role="group">'
+      out << "<button type='button' class='crop-image-btn-zoom-in btn btn-default'>&#43;</button>"
+      out << "<button type='button' class='crop-image-btn-zoom-out btn btn-default'>&#45;</button>"
+      out << '</div>'
+
+      out << '<div class="btn-group pull-right" role="group">'
+      out << "<button type='button' class='crop-image-btn-move-left btn btn-default'>left</button>"
+      out << "<button type='button' class='crop-image-btn-move-right btn btn-default'>right</button>"
+      out << "<button type='button' class='crop-image-btn-move-up btn btn-default'>up</button>"
+      out << "<button type='button' class='crop-image-btn-move-down btn btn-default'>down</button>"
+      out << '</div>'
+
+      out << '</div>'
+
+      out.html_safe
+    end
+
+  end
+end
+
+
+# ActionView::Helpers::FormBuilder support
+# #########################################################################
+if defined? ActionView::Helpers::FormBuilder
+  ActionView::Helpers::FormBuilder.class_eval do
+    include PaperCropper::FormHelpers
+  end
+end
+
+
+# BootstrapForm::FormBuilder support
+# #########################################################################
+# if defined? BootstrapForm::FormBuilder
+#   BootstrapForm::FormBuilder.class_eval do
+#     include PaperCropper::FormHelpers
+#   end
+# end

data/lib/paper_cropper/logger.rb

@@ -0,0 +1,6 @@
+module PaperCropper
+  # Paperclip log wrapper
+  def self.log(text)
+    Paperclip.log(text)
+  end
+end

data/lib/paper_cropper/model_extension.rb

@@ -0,0 +1,129 @@
+module PaperCropper
+  module ModelExtension
+    # Class methods
+    # #########################################################################
+    # Initializes attachment cropping in your model
+    #
+    #   crop_attached_file :avatar
+    #
+    # You can also define an initial aspect ratio for the crop and preview box through opts[:aspect]
+    #
+    #   crop_attached_file :avatar, :aspect => "4:3"
+    #
+    # Or unlock it
+    #
+    #   crop_attached_file :avatar, :aspect => false
+    #
+    # @param attachment_name [Symbol] Name of the desired attachment to crop
+    # @param opts [Hash]
+    # @option opts [Range, String, FalseClass] :aspect
+    module ClassMethods
+      def crop_attached_file(attachment_name, opts = {})
+        opts = opts.dup
+
+        include PaperCropper::ModelExtension::InstanceMethods
+
+        aspect = normalize_aspect opts[:aspect]
+        send :define_method, :"#{attachment_name}_aspect" do
+          aspect.first.to_f / aspect.last.to_f if aspect
+        end
+
+        if respond_to? :attachment_definitions
+          # for Paperclip <= 3.4
+          definitions = attachment_definitions
+        else
+          # for Paperclip >= 3.5
+          definitions = Paperclip::Tasks::Attachments.instance.definitions_for(self)
+        end
+        processors = definitions[attachment_name][:processors] ||= []
+        unless processors.include? :paper_cropper
+          processors << :paper_cropper
+        end
+
+        after_save :"reprocess_to_crop_#{attachment_name}_attachment"
+        after_update {
+          if send(:attachment_changed?, attachment_name)
+            self.update_column(:"#{attachment_name}_updated_at", Time.now)
+          end
+        }
+      end
+
+      # Returns a valid and normalized value for aspect ratio
+      # It will return 1.. if aspect is nil or a invalid string
+      # @param aspect [Range, String, FalseClass]
+      #
+      # @return [Range]
+      def normalize_aspect(aspect)
+        if aspect.kind_of?(String) && aspect =~ PaperCropper::RegExp::ASPECT
+          Range.new *aspect.split(':').map(&:to_i)
+        elsif aspect.kind_of?(Range)
+          return aspect.first.to_i..aspect.last.to_i
+        elsif aspect == false
+          return aspect
+        else
+          1..1
+        end
+      end
+    end
+
+    # Instance methods
+    # #########################################################################
+    module InstanceMethods
+      # Asks if the attachment received a crop process
+      # @param  attachment_name [Symbol]
+      #
+      # @return [Boolean]
+      def cropping?(attachment_name)
+        !self.send(:"#{attachment_name}_crop_x").blank? &&
+          !self.send(:"#{attachment_name}_crop_y").blank? &&
+          !self.send(:"#{attachment_name}_crop_width").blank? &&
+          !self.send(:"#{attachment_name}_crop_height").blank?
+      end
+
+      def attachment_changed?(attachment_name)
+        ["#{attachment_name}_name", "#{attachment_name}_content_type",
+          "#{attachment_name}_file_size", "#{attachment_name}_updated_at",
+          "#{attachment_name}_crop_x", "#{attachment_name}_crop_y",
+          "#{attachment_name}_crop_width",
+          "#{attachment_name}_crop_height"
+        ].any? { |attr|
+          method= "#{attr}_changed?".to_sym
+          if respond_to?(method)
+            self.send(method)
+          end
+        }
+      end
+
+      # Uses method missing to responding the model callback for reprocess the image
+      def method_missing(method, *args)
+        if method.to_s =~ PaperCropper::RegExp::CALLBACK
+          reprocess_cropped_attachment(
+            method.to_s.scan(PaperCropper::RegExp::CALLBACK).flatten.first.to_sym
+          )
+        else
+          super
+        end
+      end
+
+      private
+      # Saves the attachment if the crop attributes are present
+      # @param  attachment_name [Symbol]
+      def reprocess_cropped_attachment(attachment_name)
+        if cropping?(attachment_name)
+          attachment_instance = send(attachment_name)
+          attachment_instance.assign(attachment_instance)
+          attachment_instance.save
+        end
+      end
+    end
+  end
+end
+
+
+# ActiveRercord support
+# #########################################################################
+if defined? ActiveRecord::Base
+  ActiveRecord::Base.class_eval do
+    extend  PaperCropper::ModelExtension::ClassMethods
+  end
+end

data/lib/paper_cropper/reg_exp.rb

@@ -0,0 +1,6 @@
+module PaperCropper
+  module RegExp
+    ASPECT   = /^([1-9]{1}\d*):([1-9]{1}\d*)$/
+    CALLBACK = /reprocess_to_crop_(\S{1,})_attachment/
+  end
+end

data/lib/paper_cropper/schema.rb

@@ -0,0 +1,76 @@
+# Custom migration data type
+# Based on papercli schema.rb from: https://github.com/thoughtbot/paperclip => /lib/paperclip/schema.rb
+module PaperCropper
+  module Schema
+    COLUMNS = {
+      crop_x: :integer,
+      crop_y: :integer,
+      crop_width: :integer,
+      crop_height: :integer
+    }
+
+    #
+    # #########################################################################
+    module Statements
+      def add_crop_attachment(table_name, *attachment_names)
+        raise ArgumentError, "Please specify attachment name in your add_attachment call in your migration." if attachment_names.empty?
+
+        options = attachment_names.extract_options!
+
+        attachment_names.each do |attachment_name|
+          COLUMNS.each_pair do |column_name, column_type|
+            column_options = options.merge(options[column_name.to_sym] || {})
+            add_column(table_name, "#{attachment_name}_#{column_name}", column_type, column_options)
+          end
+        end
+      end
+
+      def remove_crop_attachment(table_name, *attachment_names)
+        raise ArgumentError, "Please specify attachment name in your remove_attachment call in your migration." if attachment_names.empty?
+
+        attachment_names.each do |attachment_name|
+          COLUMNS.keys.each do |column_name|
+            remove_column(table_name, "#{attachment_name}_#{column_name}")
+          end
+        end
+      end
+    end
+
+    #
+    # #########################################################################
+    module TableDefinition
+      def crop_attachment(*attachment_names)
+        options = attachment_names.extract_options!
+        attachment_names.each do |attachment_name|
+          COLUMNS.each_pair do |column_name, column_type|
+            column_options = options.merge(options[column_name.to_sym] || {})
+            column("#{attachment_name}_#{column_name}", column_type, column_options)
+          end
+        end
+      end
+    end
+
+    #
+    # #########################################################################
+    module CommandRecorder
+      def add_attachment(*args)
+        record(:add_attachment, args)
+      end
+
+      private
+
+      def invert_add_attachment(args)
+        [:remove_attachment, args]
+      end
+    end
+  end
+end
+
+
+
+# ActiveRecord support
+# #########################################################################
+ActiveRecord::ConnectionAdapters::Table.send :include, PaperCropper::Schema::TableDefinition
+ActiveRecord::ConnectionAdapters::TableDefinition.send :include, PaperCropper::Schema::TableDefinition
+ActiveRecord::ConnectionAdapters::AbstractAdapter.send :include, PaperCropper::Schema::Statements
+ActiveRecord::Migration::CommandRecorder.send :include, PaperCropper::Schema::CommandRecorder

data/lib/paper_cropper/version.rb

@@ -0,0 +1,12 @@
+module PaperCropper
+  # Changelog based on Semantic Versioning: http://semver.org
+  # REMEMBER: Major version zero (0.y.z) is for initial development. Anything may change at any time. The public API should not be considered stable.
+
+  # 0.0.2 PATCH
+  #- Added ActiveRecord extensions to force attachment updated_at field to be setted
+  #   on every attachment change.
+
+  unless defined?(PaperCropper::VERSION)
+    VERSION = "0.0.2".freeze
+  end
+end

data/lib/paper_cropper.rb

@@ -0,0 +1,7 @@
+require 'paper_cropper/engine'
+require 'paper_cropper/schema'
+require 'paper_cropper/reg_exp'
+require 'paper_cropper/model_extension'
+require 'paper_cropper/helpers'
+require 'paper_cropper/logger'
+require 'paperclip_processors/paper_cropper'

data/lib/paperclip_processors/paper_cropper.rb

@@ -0,0 +1,31 @@
+require "paperclip"
+
+module Paperclip
+  class PaperCropper < Thumbnail
+    def transformation_command
+      if crop_command
+        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ')
+      else
+        super
+      end
+    end
+
+    def crop_command
+      target = @attachment.instance
+
+      if target.cropping?(@attachment.name)
+        begin
+          x = Integer(target.send :"#{@attachment.name}_crop_x")
+          y = Integer(target.send :"#{@attachment.name}_crop_y")
+          w = Integer(target.send :"#{@attachment.name}_crop_width")
+          h = Integer(target.send :"#{@attachment.name}_crop_height")
+          ["-crop", "#{w}x#{h}+#{x}+#{y}"]
+        rescue Exception => e
+          ::PaperCropper.log("[paper_cropper] #{@attachment.name} crop w/h/x/y were non-integer. Error: #{e.to_s}")
+          return
+        end
+      end
+    end
+
+  end
+end