image_cropper 1.0.1

data/app/assets/stylesheets/image_cropper.css

@@ -0,0 +1,199 @@
+
+.image-cropper-container{
+  display: block;
+  width: 100%;
+}
+
+
+.image-cropper-container .image-cropper-crop-container{
+  position: relative;
+}
+
+
+
+
+
+
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls{
+  position: absolute;
+  right: 2%;
+  top: 2%;
+  bottom: 2%;
+  background-color: #0006;
+  padding: 10px;
+  border-radius: 8px;
+  -webkit-transition: background-color 0.5s ease;
+  -moz-transition: background-color 0.5s ease;
+  transition: background-color 0.5s ease; 
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;  
+}
+
+
+
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls .image-cropper-crop-control,
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls .image-cropper-crop-control:hover,
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls .image-cropper-crop-control:active,
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls .image-cropper-crop-control:focus{
+  color: #FFF;
+  font-size: 32px;
+  width: 100%;
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;   
+  outline: 0;
+  background-color: transparent;
+}
+
+
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls .image-cropper-crop-control:first-child{
+  margin-top: 0;
+}
+
+.image-cropper-container .image-cropper-crop-container .image-cropper-crop-controls  .image-cropper-crop-control:hover i.fa{
+  color: #9F9;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-name: pulse;
+  animation-name: pulse;  
+}
+
+.image-cropper-container .image-cropper-crop-container img.image-cropper-crop{
+  max-width: 100%;
+}
+
+
+
+.image-cropper-container .image-cropper-file{
+  position: absolute; 
+  width: 0; 
+  height: 0;
+  opacity: 0;
+  margin-left: -500px;
+}
+
+
+.image-cropper-container.circle .image-cropper-img,
+.image-cropper-container.circle .image-cropper-img-controls,
+.image-cropper-container.circle .image-cropper-img-background,
+.image-cropper-container.circle .guillotine-window{
+  border-radius: 50%;
+}
+
+
+
+.image-cropper-crop-container.disable .guillotine-window {
+  cursor: not-allowed;
+  cursor: -webkit-not-allowed;
+  cursor:    -moz-not-allowed;
+}
+
+.image-cropper-container .image-cropper-crop-container.disable .image-cropper-crop-controls .image-cropper-crop-control.image-cropper-zoom-in,
+.image-cropper-container .image-cropper-crop-container.disable .image-cropper-crop-controls .image-cropper-crop-control.image-cropper-zoom-out{
+  display: none;
+}
+
+
+
+
+
+
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.3, 1.3, 1.3);
+  }
+}
+
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.3, 1.3, 1.3);
+  }
+}
+
+
+
+img.image-cropper{
+  max-width: 100%;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+
+
+
+
+
+
+/* --------------- GUILLOTINE STYLE -----------------*/
+
+
+body.guillotine-dragging, body.guillotine-dragging * {
+  cursor: move !important;
+  cursor: -webkit-grabbing !important;
+  cursor:    -moz-grabbing !important;
+  cursor:         grabbing !important;
+  cursor: grabbing, move;  /* IE hack */
+}
+
+.guillotine-window {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor:    -moz-grab;
+  cursor:         grab;
+  cursor: grab, move;  /* IE hack */
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.guillotine-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.guillotine-canvas > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.guillotine-sample {
+  position: absolute !important;
+  top: -100000px     !important;
+  left: -100000px    !important;
+  width: auto        !important;
+  height: auto       !important;
+}

data/lib/generators/image_cropper/install_generator.rb

@@ -0,0 +1,14 @@
+require 'rails/generators'  
+
+module ImageCropper
+  class InstallGenerator < ::Rails::Generators::Base
+    source_root File.expand_path("../templates", __FILE__)
+    
+
+    def install
+      copy_file 'images/default.png', 'app/assets/images/image_cropper/default.png'
+    end
+  end
+end
+
+

data/lib/generators/image_cropper/migrate_generator.rb

@@ -0,0 +1,27 @@
+require 'rails/generators'
+require 'rails/generators/migration'
+
+module ImageCropper
+  class MigrateGenerator < ::Rails::Generators::Base
+    include ::Rails::Generators::Migration
+    source_root File.expand_path('../templates', __FILE__)
+
+    desc "add coords to model"
+
+    def self.next_migration_number(path)
+      unless @prev_migration_nr
+        @prev_migration_nr = Time.now.utc.strftime("%Y%m%d%H%M%S").to_i
+      else
+        @prev_migration_nr += 1
+      end
+     @prev_migration_nr.to_s
+    end
+
+    def copy_migrations()
+      if self.args.count == 1
+        @tableize_name = self.args.first.tableize
+        migration_template "migration/migrate.rb", "db/migrate/image_cropper_add_fields_to_#{@tableize_name}.rb"
+      end
+    end
+  end
+end

data/lib/generators/image_cropper/templates/migration/migrate.rb

@@ -0,0 +1,11 @@
+class ImageCropperAddFieldsTo<%= @tableize_name.camelize %> < ActiveRecord::Migration[5.1]
+  def change
+    #Used to crop file
+    add_column :<%= @tableize_name %>, :coord_x, :float, default: 0
+    add_column :<%= @tableize_name %>, :coord_y, :float, default: 0
+    add_column :<%= @tableize_name %>, :coord_w, :float, default: 0
+    add_column :<%= @tableize_name %>, :coord_h, :float, default: 0
+    add_column :<%= @tableize_name %>, :coord_z, :float, default: 1
+    add_column :<%= @tableize_name %>, :frame, :string, default: 'square' 
+  end
+end

data/lib/image_cropper.rb

@@ -0,0 +1,13 @@
+
+# requires all dependencies
+Gem.loaded_specs['image_cropper'].dependencies.each do |d|
+ require d.name
+end
+
+require 'image_cropper/rails' if defined?(Rails)
+require 'image_cropper/uploader.rb'
+require 'image_cropper/model.rb'
+
+module ImageCropper
+end
+

data/lib/image_cropper/model.rb

@@ -0,0 +1,28 @@
+module ImageCropper::Model
+
+    extend ActiveSupport::Concern
+
+    included do
+            
+
+        after_update :crop_file
+
+          #If method not exist, default mount column is 'file'
+          unless self.methods(false).include?(:mount_uploader_columns)
+            def self.mount_uploader_columns
+              [:file]
+            end
+          end
+
+        def crop_file
+          self.class.mount_uploader_columns.each do |c|
+            #OLD VERSION of match:
+            #self.send("#{c}_was") == self.send(c)
+            self.send(c).recreate_versions! if self.send(c).present? && self.send("#{c}_before_last_save") == self.send(c).file.filename
+          end
+        end
+
+    end
+end
+
+

data/lib/image_cropper/rails.rb

@@ -0,0 +1,8 @@
+require 'rails'
+require 'rails/engine'
+require 'image_cropper/rails/engine'
+
+module ImageCropper
+  module Rails
+  end
+end

data/lib/image_cropper/rails/engine.rb

@@ -0,0 +1,9 @@
+module ImageCropper
+  module Rails
+    class Engine < ::Rails::Engine
+      initializer 'image_cropper.form_helpers' do |_app|
+        ActiveSupport.on_load(:action_view) { require 'image_cropper/rails/form_helper' }
+      end
+    end
+  end
+end

data/lib/image_cropper/rails/form_builder.rb

@@ -0,0 +1,89 @@
+module ImageCropper
+  module Rails
+    module FormBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Helpers::JavaScriptHelper
+      include ActionView::Context
+
+      def image_cropper_field(method, options = {})
+        aspect_ratio = options[:aspect_ratio]         || '4:3' 
+        frame = options[:frame]                       || 'square' 
+        operation_object = options[:parent_object]    || self
+        destroyable = options[:destroyable]           || false
+        destroy_class = options[:destroy_class]       || '.image-cropper-container'
+        destroy_confirm = options[:destroy_confirm]   || 'Are you sure?'
+        image_cropper_id = operation_object.index     || 'only'
+
+
+        content_tag(:div, id: "image-cropper-#{operation_object.object_id}-#{image_cropper_id}", class: "image-cropper-container #{frame}", data: { 'aspect-ratio' => aspect_ratio}) do
+          
+          concat(
+            content_tag(:div, class: "image-cropper-crop-container") do
+              concat(
+                content_tag(:div, class: "image-cropper-crop-controls") do
+                  concat(
+                    link_to('javascript:;', class: "image-cropper-crop-control image-cropper-file-trigger") do
+                      content_tag(:i, '', class: "fa fa-image")
+                    end
+                  )
+                  concat(
+                    link_to('javascript:;', class: "image-cropper-crop-control image-cropper-zoom-in") do
+                      content_tag(:i, '', class: "fa fa-search-plus")
+                    end
+                  )
+                  concat(
+                    link_to('javascript:;', class: "image-cropper-crop-control image-cropper-zoom-out") do
+                      content_tag(:i, '', class: "fa fa-search-minus")
+                    end
+                  )
+                  if destroyable == true
+                    concat(@template.hidden_field(operation_object.object_name, :_destroy, value: operation_object.object._destroy))
+                    concat(
+                        link_to('javascript:;', class: "image-cropper-crop-control image-cropper-remove", data: {destroy_confirm: destroy_confirm}) do
+                          content_tag(:i, '', class: "fa fa-trash")
+                        end
+                    )
+                  end
+                end
+              )
+              concat(
+                @template.image_tag(@object.send(method.to_sym).url, class: 'image-cropper-crop')
+              )
+            end
+          )
+          concat(@template.hidden_field(@object_name, :coord_x, class: 'coord-x', value: @object.coord_x))
+          concat(@template.hidden_field(@object_name, :coord_y, class: 'coord-y', value: @object.coord_y))
+          concat(@template.hidden_field(@object_name, :coord_w, class: 'coord-w', value: @object.coord_w))
+          concat(@template.hidden_field(@object_name, :coord_h, class: 'coord-h', value: @object.coord_h))
+          concat(@template.hidden_field(@object_name, :coord_z, class: 'coord-z', value: @object.coord_z))
+          concat(@template.hidden_field(@object_name, :frame, value: frame))
+          
+          concat(@template.file_field(@object_name, method.to_sym, class: 'image-cropper-file', autoComplete: 'off'))
+          if @object.send("#{method}_cache".to_sym).present?
+            concat(@template.hidden_field(@object_name, "#{method}_cache".to_sym, class: 'image-cropper-file-cache', value: @object.send("#{method}_cache".to_sym)))
+          end
+          concat(@template.hidden_field(@object_name, "remote_#{method}_url".to_sym, class: 'image-cropper-file-url', value: @object.send("remote_#{method}_url".to_sym)))
+
+
+          concat(content_tag(:div, '', style: "clear:both;"))
+
+          concat(
+            if @object.send("#{method}".to_sym).file.present?
+              javascript_tag("$('\#image-cropper-#{operation_object.object_id}-#{image_cropper_id}').image_cropper({destroy_class: '#{destroy_class}'});")
+            else
+              javascript_tag("$('\#image-cropper-#{operation_object.object_id}-#{image_cropper_id}').image_cropper({enabled: false, destroy_class: '#{destroy_class}'});")
+            end
+          )
+
+        end
+
+      end
+
+
+
+    end
+  end
+end
+
+ImageCropper::FormBuilder = ImageCropper::Rails::FormBuilder

data/lib/image_cropper/rails/form_helper.rb

@@ -0,0 +1,16 @@
+require 'action_view/helpers'
+require 'image_cropper/rails/form_builder'
+
+module ImageCropper
+  module Rails
+    module FormHelper
+      def self.included(_base)
+        ActionView::Helpers::FormBuilder.instance_eval do
+          include FormBuilder
+        end
+      end
+    end
+  end
+end
+
+ActionView::Base.send :include, ImageCropper::Rails::FormHelper

data/lib/image_cropper/uploader.rb

@@ -0,0 +1,89 @@
+module ImageCropper::Uploader
+
+    extend ActiveSupport::Concern
+
+    included do
+            
+        include CarrierWave::MiniMagick
+
+        def default_url(*args)
+          ActionController::Base.helpers.asset_path("image_cropper/default.png")
+        end
+
+
+        version :thumb do
+          process :crop
+        end
+
+
+        def crop
+
+          x = model.coord_x
+          y = model.coord_y
+          w = model.coord_w
+          h = model.coord_h
+          z = model.coord_z
+          w_z = self.width*z
+          h_z = self.height*z
+
+          manipulate! do |img|
+    
+           #img.resize "#{w_z}x#{h_z}"
+           #img.coalesce
+           #img.repage "0x0"
+           #img.crop "#{w}x#{h}+#{x}+#{y}"
+           #img << "+repage"
+      
+            img.combine_options do |c|
+              c.resize "#{w_z}x#{h_z}"
+              c.coalesce
+              c.repage("0x0")
+              c.crop "#{w}x#{h}+#{x}+#{y}"
+              c.args << '+repage'
+            end
+
+            if model.frame == 'circle'
+
+                mask = ::MiniMagick::Image.open img.path
+
+                mask.combine_options do |m|
+                  m.alpha 'transparent'
+                  m.background 'none'
+                  m.fill 'white'
+                  m.strokewidth 0
+                  m.draw "ellipse #{w/2},#{h/2} #{w/2},#{h/2}, 0, 360"
+                end
+         
+                overlay = ::MiniMagick::Image.open img.path
+
+                overlay.combine_options do |o|
+                  o.alpha 'transparent'
+                  o.background 'none'
+                  o.fill 'none'
+                  o.strokewidth 0
+                  o.draw "ellipse #{w/2},#{h/2} #{w/2},#{h/2}, 0, 360"
+                end
+
+                masked = img.composite(mask) do |i|
+                  i.alpha "set"
+                  i.compose 'DstIn'
+                end
+
+                masked.composite(overlay) do |i|
+                  i.compose 'Over'
+                end
+
+            else
+
+                img
+
+            end
+
+
+          end
+
+
+        end
+
+    end
+end