rails-carrierwave-focuspoint 0.0.1

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    NDQ0Yjk5ZDAyYzc4NGI5YzE1ZjQ3ZGRhMTE4NTRkZDdmNzFjODQ4Mw==
+  data.tar.gz: !binary |-
+    YmExYWY2MDViOTBmNWVmNGI4ZGMxYzU0NDk3ODgyMTAyNGVmZmZlOQ==
+SHA512:
+  metadata.gz: !binary |-
+    ZjA0MjFhM2I4NjgzMDNhMWY3ZDYxNDBkNGVjZDMyN2ZkMTYyYzRhNWU5ZjFi
+    MmQzZGNlNjg2NjFjMGE2OTI5ODRhNTFlNjE4Mzc3MTA3ZmJlZWFjNjljOGFm
+    NzhkNTFmMWI4NjE1YWFlM2M5OGNlMjk1NjU3NTg5NWY2YjljMWM=
+  data.tar.gz: !binary |-
+    ZjVhOGZhYzRhNjA4MDBkODI5YTQwMWJlOWRkMjQ2NjE1NTllMzE4YTg0NDg0
+    ZjNlOGE5MDQxNzliZmY5YmI1NGY5YzE5N2Q5NjJlMDUxNTQ1MTBkZjU2YWY2
+    YWNhNWMyM2NiMzk4YTFjYjkzNzU3ZDBhMDFmNGNjM2NkODc0OWU=

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 Eugene Gavrilov
+
+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.

data/README.md

@@ -0,0 +1,81 @@
+# RailsCarrierwaveFocuspoint
+
+CarrierWave extension for specifying focus point on image before they upload on server and cropped.
+
+This gem based on [helper tool](http://jonom.github.io/jquery-focuspoint/demos/helper/index.html) of jquery.focuspoint javascript library (https://github.com/jonom/jquery-focuspoint)
+
+## Installation
+
+in Gemfile
+
+```Ruby
+    gem 'rails-carrierwave-focuspoint'
+```
+
+## Usage
+
+For using this gem you must add fields `focus_x:decimal` and `focus_y:decimal` to your db table used for storing CarrierWave picture information. Use migration:
+
+```Ruby
+    class AddFocusToUsers < ActiveRecord::Migration
+      def change
+        add_column :users, :focus_x, :decimal
+        add_column :users, :focus_y, :decimal
+      end
+    end
+```
+
+in CarrierWave uploader
+
+```Ruby
+    class UserAvatarUploader < CarrierWave::Uploader::Base
+      include CarrierWave::MiniMagick
+      
+      version :small do
+        process crop_with_focuspoint: [100, 100]
+      end
+      
+      version :big do
+        process crop_with_focuspoint: [300, 200]
+      end
+    end
+```
+
+in model
+
+```Ruby
+    class User < ActiveRecord::Base
+        mount_uploader :avatar, UserAvatarUploader
+    end
+```
+
+in .js file
+
+```js
+    //= require focuspoint.js
+    //= require_self
+    
+    $(document).ready(function() {
+        document.focuspoint.init(file_input_id: 'user_avatar');
+    });
+```
+
+in .css file
+
+```css
+    /*
+    *= require focuspoint_control.css
+    */
+```
+
+in view template
+
+```haml
+    = form_for @user do |f|
+        = f.input :avatar
+        = f.focuspoint_control :avatar
+```
+
+## LICENSE
+
+This project rocks and uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,9 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+Bundler::GemHelper.install_tasks
+

data/app/assets/javascripts/focuspoint_control.js

@@ -0,0 +1,118 @@
+document.focuspoint = (function() {
+    var exports = { };
+
+    var internal = {
+        focusPointAttr: {
+            x: 0,
+            y: 0
+        }
+    };
+
+    internal.bind_click_event = function(e){
+        var imageW = $(this).width();
+        var imageH = $(this).height();
+
+        //Calculate FocusPoint coordinates
+        var offsetX = e.pageX - $(this).offset().left;
+        var offsetY = e.pageY - $(this).offset().top;
+        var focusX = (offsetX/imageW - 0.5)*2;
+        var focusY = (offsetY/imageH - 0.5)*(-2);
+        internal.focusPointAttr.x = focusX;
+        internal.focusPointAttr.y = focusY;
+        internal.input_x.val(internal.focusPointAttr.x);
+        internal.input_y.val(internal.focusPointAttr.y);
+
+        if (exports.options.debug) {
+            console.log(internal.focusPointAttr.x);
+            console.log(internal.focusPointAttr.y);
+        }
+
+        //Leave a sweet target reticle at the focus point.
+        var percentageX = (offsetX/imageW)*100;
+        var percentageY = (offsetY/imageH)*100;
+        $('.focuspoint-control-target').css({
+            'top':percentageY+'%',
+            'left':percentageX+'%'
+        });
+    };
+
+    internal.init_picture_control = function() {
+        exports.focuspoint_control_target_overlay.on('load', function () {
+            internal.current_image_width = this.width;
+            internal.current_image_height = this.height;
+        });
+
+        exports.focuspoint_control_target_overlay.on('click', internal.bind_click_event);
+
+        if (exports.focuspoint_control_image.attr('src')) {
+            internal.current_image_width = exports.focuspoint_control_image.width();
+            internal.current_image_height = exports.focuspoint_control_image.height();
+
+            $('.focuspoint-control-target').css({
+                'top': (((internal.input_y.val() || 0) / (-2)) + 0.5) * 100 + '%',
+                'left': (((internal.input_x.val() || 0) / 2) + 0.5) * 100 + '%'
+            });
+        }
+
+        exports.options.file_input.change(function(){
+            if (exports.options.after_change) { exports.options.after_change(); }
+            internal.readURL(this);
+        });
+    };
+
+    internal.readURL = function(input)
+    {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+
+            reader.onload = function(e){
+                exports.focuspoint_control.show();
+                exports.focuspoint_control_image.attr('src', e.target.result);
+                exports.focuspoint_control_target_overlay.attr('src', e.target.result);
+            };
+            reader.readAsDataURL(input.files[0]);
+        }
+    };
+
+    internal.init_options = function(options) {
+        options = options || {};
+
+        options.file_input_id = options.file_input_id ? '#' + options.file_input_id : '#file_input_focuspoint';
+        options.file_input = $(options.file_input_id);
+
+        if (options.file_input.length > 0) {
+            internal.input_x = $('.focus_x');
+            internal.input_y = $('.focus_y');
+
+            internal.focuspoint_control_selector = '.focuspoint-control';
+            exports.focuspoint_control = $(internal.focuspoint_control_selector);
+            if (exports.focuspoint_control.length == 0) {
+                throw "element '" + internal.focuspoint_control_selector + "' not found";
+            }
+
+            exports.focuspoint_control_image = exports.focuspoint_control.find('img.focuspoint-control-image');
+            if (exports.focuspoint_control_image.length == 0) {
+                throw "element '" + internal.focuspoint_control_selector + " img.focuspoint-control-image" + "' not found";
+            }
+
+            exports.focuspoint_control_target_overlay = exports.focuspoint_control.find('img.focuspoint-control-target-overlay');
+            if (exports.focuspoint_control_target_overlay.length == 0) {
+                throw "element '" + internal.focuspoint_control_selector + " img.focuspoint-control-target-overlay" + "' not found";
+            }
+        }
+        exports.options = options;
+
+        return options;
+    };
+
+    exports.init = function(options) {
+        internal.init_options(options);
+
+        if (options.file_input.length > 0) {
+            internal.init_picture_control();
+            exports.is_initialized = true;
+        }
+    };
+
+    return exports;
+})();

data/app/assets/stylesheets/focuspoint_control.css

@@ -0,0 +1,38 @@
+.focuspoint-control {
+    position: relative;
+    width: 300px;
+    overflow: hidden;
+    margin-bottom: 1em;
+}
+
+.focuspoint-control img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.focuspoint-control img.focuspoint-control-target {
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    transition: all 500ms ease-in-out;
+    -webkit-transition: all 500ms ease-in-out;
+    -moz-transition: all 500ms ease-in-out;
+    display: block;
+    max-width: 100%;
+    height: auto;
+    position: absolute;
+}
+
+.focuspoint-control img.focuspoint-control-target-overlay{
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.focuspoint-control img.focuspoint-control-target-overlay {
+    cursor: pointer;
+    opacity: 0.01;
+}

data/app/helpers/focuspoint_helper.rb

@@ -0,0 +1,22 @@
+module FocuspointHelper
+  def focuspoint_control(attachment, opts = {})
+    attachment_instance = self.object.send(attachment)
+
+    if(attachment_instance.is_a? CarrierWave::Uploader::Base)
+      @template.content_tag(:div, class: 'focuspoint-control', style: ('display: none;' if self.object.new_record?)) do
+        @template.concat @template.content_tag(:img, nil, src: attachment_instance.url, class: 'focuspoint-control-image')
+        @template.concat @template.image_tag('focuspoint-target.png', class: 'focuspoint-control-target')
+        @template.concat @template.content_tag(:img, nil, src: attachment_instance.url, class: 'focuspoint-control-target-overlay')
+        [:focus_x ,:focus_y].each do |attribute|
+          @template.concat self.hidden_field attribute, class: attribute
+        end
+      end
+    end
+  end
+end
+
+if defined? ActionView::Helpers::FormBuilder
+  ActionView::Helpers::FormBuilder.class_eval do
+    include FocuspointHelper
+  end
+end

data/lib/rails-carrierwave-focuspoint.rb

@@ -0,0 +1,5 @@
+require 'rails-carrierwave-focuspoint/engine'
+require 'rails-carrierwave-focuspoint/uploader_additions'
+
+module RailsCarrierwaveFocuspoint
+end

data/lib/rails-carrierwave-focuspoint/engine.rb

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

data/lib/rails-carrierwave-focuspoint/uploader_additions.rb

@@ -0,0 +1,64 @@
+module FocuspointRails
+  module UploaderAdditions
+    # Performs cropping with focuspoint
+    def crop_with_focuspoint(width = nil, height = nil)
+      if self.respond_to? "resize_to_limit"
+        begin
+          x = model.focus_x || 0
+          y = -(model.focus_y || 0)
+
+          manipulate! do |img|
+            orig_w = img['width']
+            orig_h = img['height']
+
+            ratio = width.to_f / height
+            orig_ratio = orig_w.to_f / orig_h
+
+            x_offset = 0
+            y_offset = 0
+            w = orig_w
+            h = orig_h
+            if ratio < orig_ratio
+              w = orig_h * ratio
+
+              half_w = w / 2.0
+              half_orig_w = orig_w / 2.0
+
+              x_offset = x * half_orig_w
+
+              x_offset = (x <=> 0.0) * (half_orig_w - half_w) if x != 0 && x_offset.abs > half_orig_w - half_w
+            elsif ratio > orig_ratio
+              h = orig_w / ratio
+
+              half_h = h / 2.0
+              half_orig_h = orig_h / 2.0
+
+              y_offset = y * half_orig_h
+
+              y_offset = (y <=> 0.0) * (half_orig_h - half_h) if y != 0 && y_offset.abs > half_orig_h - half_h
+            end
+
+            img.combine_options do |op|
+              op.crop "#{w.to_i}x#{h.to_i}#{'%+d' % x_offset.round}#{'%+d' % y_offset.round}"
+              op.gravity 'Center'
+            end
+            img.resize("#{width}x#{height}")
+            img
+          end
+
+        rescue Exception => e
+          raise "Failed to crop - #{e.message}"
+        end
+
+      else
+        raise "Failed to crop #{attachment}. Add mini_magick."
+      end
+    end
+  end ## End of UploaderAdditions
+end ## End of FocuspointRails
+
+if defined? CarrierWave::Uploader::Base
+  CarrierWave::Uploader::Base.class_eval do
+    include FocuspointRails::UploaderAdditions
+  end
+end

data/lib/rails-carrierwave-focuspoint/version.rb

@@ -0,0 +1,3 @@
+module RailsCarrierwaveFocuspoint
+  VERSION = '0.0.1'
+end

metadata

@@ -0,0 +1,68 @@
+--- !ruby/object:Gem::Specification
+name: rails-carrierwave-focuspoint
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- evg2108
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-09-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.21
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.21
+description: RailsCarrierwaveFocuspoint is a wrapper for jquery-focuspoint library.
+email:
+- evg2108@yandex.ru
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/images/focuspoint-target.png
+- app/assets/javascripts/focuspoint_control.js
+- app/assets/stylesheets/focuspoint_control.css
+- app/helpers/focuspoint_helper.rb
+- lib/rails-carrierwave-focuspoint.rb
+- lib/rails-carrierwave-focuspoint/engine.rb
+- lib/rails-carrierwave-focuspoint/uploader_additions.rb
+- lib/rails-carrierwave-focuspoint/version.rb
+homepage: 
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: RailsCarrierwaveFocuspoint is a wrapper for jquery-focuspoint library.
+test_files: []