croppable 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc06a6b34a2f7a532d24d39e64720bac364ccf40d176a2c47d64e0a93814c779
-  data.tar.gz: 6045bfc5c350d93eae70dd4692194327e38f47b3d8008ee87610c21a5160a2fd
+  metadata.gz: 4d7748fdc65361664f5e6b39b0c8bb68a64453f7bb47a43a3957cd3984e60115
+  data.tar.gz: 2f2c3b3cce9896172e1f2117ae25e3e4d537230c2fc38a1dc742cbaf04d37157
 SHA512:
-  metadata.gz: 4b9055c91ee55c59e79f1f2c46abee67d3b99dda35fbb90cb4d5abf24f7df39587ecb4e7d07bc08554831db71ab631a3e645629a181299eb760ad4bf406d1b65
-  data.tar.gz: 1904b7435d75b0c19ed2db1c1887d722e07e2991374a53e051403c417738c3310518254cfb13a60cc13cc3ad40253c23a7417bf7262fb68d2266c99821f9d002
+  metadata.gz: 2c43837b3fa737eaa8006a8e57f8fb78467bf5a54ffeb0877f501066a892a66eb7ca3ff4a8b19398215ced4ca15c4fda45e71ae59317f54a7b1c74e492d34757
+  data.tar.gz: b5edca4cffaef90aed0ba2c8233c17b737a1a06353b3ceac2fbc1a1ee13052764d0080126662b52a387e5cdc2ac56294d734edf1900115ac0815375aef74f7c0

data/README.md

@@ -54,9 +54,13 @@ brew install vips
 ## Usage
 Add has_croppable into your model
 ```ruby
-has_croppable :logo, width: 300, height: 300
+has_croppable :logo, width: 300, height: 300, scale: 2
 ```
 
+`width` and `height` are in pixels and required.
+
+`scale: 2` will generate an image twice as big. Useful for retina display monitors. It defaults to 1.
+
 Add croppable_field to your form
 ```ruby
 form.croppable_field :logo

data/app/assets/javascripts/croppable.js

@@ -1,20 +1,11 @@
 import Cropper from 'cropperjs';
 
-function isTurbolinksEnabled() {
-  try {
-    return Turbolinks.supported;
-  } catch(_) {
-    return false;
-  }
-}
-
-if(isTurbolinksEnabled()) {
-  document.addEventListener('turbo:load', start)
-} else {
-  document.addEventListener('DOMContentLoaded', start)
-}
+document.addEventListener('turbo:load', start);
+document.addEventListener('DOMContentLoaded', start);
 
 function start() {
+  document.removeEventListener('DOMContentLoaded', start)
+
   const dropAreas  = document.getElementsByClassName('croppable-droparea');
 
   Array.from(dropAreas).forEach((dropArea) => {
@@ -50,7 +41,7 @@ function start() {
         input.files = event.dataTransfer.files;
 
         const image = document.createElement('img');
-        image.src = URL.createObjectURL(file);
+        image.src   = URL.createObjectURL(file);
 
         updateImageDisplay(image, wrapper, true, input)
       }
@@ -85,7 +76,9 @@ function updateImageDisplay(image, wrapper, isNewImage, input) {
 
   dropArea.classList.add("inactive");
   container.classList.add("active");
-  deleteInput.checked = false;
+
+  deleteInput.checked    = false;
+  controls.style.display = "flex";
 
   cleanContainer()
 
@@ -94,20 +87,13 @@ function updateImageDisplay(image, wrapper, isNewImage, input) {
   const cropperImage  = cropper.getCropperImage();
   const cropperCanvas = cropper.getCropperCanvas();
 
-  controls.style.display = "flex";
+  cropperCanvas.style.backgroundColor = bgColorBtn.value;
 
   var saveTransform = false;
 
   cropperImage.$ready(() => {
     if (xInput.value != "" && !isNewImage) {
-      var waitForTranform = null;
-
-      // Turbolinks hack to actually apply initial transformation
-      if(isTurbolinksEnabled) {
-        waitForTranform = 10;
-      } else {
-        waitForTranform = 0;
-      }
+      var waitForTranform = 10; // needed due turbolinks 🤦
 
       setTimeout(() => {
         cropperImage.$setTransform(+scaleInput.value, 0, 0, +scaleInput.value, +xInput.value, +yInput.value);
@@ -116,6 +102,7 @@ function updateImageDisplay(image, wrapper, isNewImage, input) {
       }, waitForTranform)
     } else {
       const matrix     = cropperImage.$getTransform();
+
       xInput.value     = matrix[4];
       yInput.value     = matrix[5];
       scaleInput.value = matrix[0];
@@ -133,8 +120,6 @@ function updateImageDisplay(image, wrapper, isNewImage, input) {
     }
   });
 
-  cropperCanvas.style.backgroundColor = bgColorBtn.value;
-
   bgColorBtn.addEventListener("change", (event) => {
     event.preventDefault();
     cropperCanvas.style.backgroundColor = event.target.value;

data/lib/croppable/crop.rb

@@ -2,45 +2,40 @@ require 'open-uri'
 require 'vips'
 
 module Croppable
-
   class Crop
     def initialize(model, attr_name)
       @model     = model
       @attr_name = attr_name
       @data      = model.send("#{attr_name}_croppable_data")
       @setup     = model.send("#{attr_name}_croppable_setup")
-      original   = model.send("#{attr_name}_original")
-      @url       = Rails.application.routes.url_helpers.rails_blob_url(original, host: Rails.application.config.asset_host)
     end
 
     def perform()
-      file = URI(@url).open
-      vips_img = Vips::Image.new_from_file(file.path)
+      @model.send("#{@attr_name}_original").open do |file|
+        vips_img = Vips::Image.new_from_file(file.path)
+
+        height = vips_img.height
+        width  = vips_img.width
 
-      height = vips_img.height
-      width  = vips_img.width
+        x = ((width  - (width  * @data.scale)) / 2 + @data.x) * @setup[:scale]
+        y = ((height - (height * @data.scale)) / 2 + @data.y) * @setup[:scale]
 
-      x = (width  - (width  * @data.scale)) / 2 + @data.x
-      y = (height - (height * @data.scale)) / 2 + @data.y
+        background = @data.background_color.remove("#").scan(/\w{2}/).map {|color| color.to_i(16) }
+        background_embed = background.dup
+        background_embed << 255 if vips_img.bands == 4
 
-      background = @data.background_color.remove("#").scan(/\w{2}/).map {|color| color.to_i(16) }
-      background_embed = background.dup
-      background_embed << 255 if vips_img.bands == 4
+        new_width  = @setup[:width]  * @setup[:scale]
+        new_height = @setup[:height] * @setup[:scale]
 
-      vips_img = vips_img.resize(@data.scale * @setup[:resolution])
-      vips_img = vips_img.embed(
-        x * @setup[:resolution],
-        y * @setup[:resolution],
-        @setup[:width] * @setup[:resolution],
-        @setup[:height] * @setup[:resolution],
-        background: background_embed
-      )
+        vips_img = vips_img.resize(@data.scale * @setup[:scale])
+        vips_img = vips_img.embed(x, y, new_width, new_height, background: background_embed)
 
-      path = Tempfile.new('cropped').path + ".jpg"
+        path = Tempfile.new('cropped').path + ".jpg"
 
-      vips_img.write_to_file(path, background: background, Q: 100)
+        vips_img.write_to_file(path, background: background, Q: 100)
 
-      @model.send("#{ @attr_name }_cropped").attach(io: File.open(path), filename: "cropped")
+        @model.send("#{ @attr_name }_cropped").attach(io: File.open(path), filename: "cropped")
+      end
     end
   end
 end

data/lib/croppable/model.rb

@@ -2,12 +2,8 @@ module Croppable
   module Model
     extend ActiveSupport::Concern
 
-    # High-resolution displays, which are a large part of the market, need twice
-    # the pixels to look professional.
-    DEFAULT_RESOLUTION = 2
-
     class_methods do
-      def has_croppable(name, width:, height:, resolution: DEFAULT_RESOLUTION)
+      def has_croppable(name, width:, height:, scale: 1)
         has_one_attached :"#{ name }_cropped"
         has_one_attached :"#{ name }_original"
 
@@ -20,7 +16,7 @@ module Croppable
 
         generated_association_methods.class_eval <<-CODE, __FILE__, __LINE__ + 1
           def #{ name }_croppable_setup
-            {width: #{ width }, height: #{ height }, resolution: #{ resolution }}
+            {width: #{ width }, height: #{ height }, scale: #{ scale }}
           end
 
           def to_crop_croppable

data/lib/croppable/version.rb

@@ -1,3 +1,3 @@
 module Croppable
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: croppable
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Steven Barragán Naranjo
@@ -40,7 +40,7 @@ dependencies:
         version: '1.2'
 description:
 email:
-- me@steven.mx
+- stvnbarragan@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -74,11 +74,11 @@ files:
 - lib/croppable/version.rb
 - lib/generators/croppable/install/install_generator.rb
 - lib/tasks/croppable_tasks.rake
-homepage: https://github.com/stevenbarragan/croppable
+homepage: https://rubygems.org/gems/croppable
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://github.com/stevenbarragan/croppable
+  homepage_uri: https://rubygems.org/gems/croppable
   source_code_uri: https://github.com/stevenbarragan/croppable
 post_install_message:
 rdoc_options: []