alchemy-crop-image 0.1.0

data/app/assets/javascripts/alchemy/crop/image/cropping.js

@@ -0,0 +1,277 @@
+$(document).on("page:change turbolinks:load", function () {
+
+    var cropper = null;
+    var cropperData = null;
+
+    var enableCropperStructure = function () {
+        var imageContainer = $(".zoomed-picture-background")[0];
+        var picture = $(imageContainer).find("img")[0];
+
+        if (picture) {
+
+            //awful trick: disable click on background to prevent closing popup
+            $(".zoomed-picture-background").css("pointer-events", "none");
+
+            var middleBox = $(imageContainer).find(".middle-box-for-cropping")[0]
+
+            if (!middleBox) {
+                var box = "<div class='middle-box-for-cropping'><div class=\"cropperjs-container\"></div></div>"
+                $(imageContainer).append(box)
+                middleBox = $(box)
+                var cropperContainer = $(imageContainer).find(".cropperjs-container")
+
+                $(cropperContainer).append(picture)
+
+
+            }
+
+            //awful trick: enable click on cropping element and prevent propagation of click on it
+            middleBox = $(imageContainer).find(".middle-box-for-cropping")[0]
+            $(middleBox).css("pointer-events", "auto")
+            $(middleBox).click(function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            })
+
+
+        }
+
+
+    }
+
+    var onCrop = function (e) {
+        var roundedWidth = Math.round(e.detail.width)
+        var roundedHeight = Math.round(e.detail.height)
+        $("#field_width_crop").val(roundedWidth)
+        $("#field_height_crop").val(roundedHeight)
+    }
+
+    var enableCropperWithOptions = function (options) {
+        var imageContainer = $(".zoomed-picture-background")[0];
+        var picture = $(imageContainer).find("img")[0];
+
+        if (picture) {
+            // var cropperData = $(picture).data("cropperjs-data")
+            //
+            // if(cropperData) {
+            //     options = $.extend(options,{
+            //         autoCrop: true,
+            //         data: cropperData
+            //     });
+            // }
+
+
+            if (cropper) {
+                destroyCropper();
+                // var currentOptions = cropper.options
+                // var cropeprElement = cropper.element
+                // disableCropper()
+                // var newOptions = $.extend(currentOptions, options)
+                // cropper = new Cropper(cropeprElement, newOptions)
+            }
+
+            cropper = new Cropper(picture, options)
+
+            $(picture).unbind("crop").on("crop", onCrop)
+
+
+        }
+
+
+    }
+
+    var disableCropper = function () {
+        if (cropper) {
+            var picture = cropper.element
+            $(picture).data("cropperjs-data", cropper.getData())
+            cropper.destroy();
+        }
+    }
+
+    var destroyCropper = function () {
+        if (cropper) {
+            cropper.destroy();
+            cropper = null;
+        }
+        //awful trick: enable click on background to prevent closing popup
+        $(".zoomed-picture-background").css("pointer-events", "auto");
+    }
+
+
+    var showPanelCropping = function () {
+        $(".buttons-action-crop").show()
+        $(".crop-panel").show()
+        $("#enable-crop").hide()
+    }
+
+    var hidePanelCropping = function () {
+        $(".buttons-action-crop").hide()
+        $(".crop-panel").hide()
+        $("#enable-crop").show()
+    }
+
+
+    $(document).on("click", "#enable-crop", function () {
+        showPanelCropping();
+        enableCropperStructure();
+        enableCropperWithOptions(
+            {
+                dragMode: 'none',
+                modal: false,
+                rotatable: false,
+                scalable: false,
+                viewMode: 1,
+                autoCrop: true
+            }
+        );
+
+        // abilito il plugin del cropping
+    })
+
+    $(document).on("click", "#button-cancel-crop", function () {
+        hidePanelCropping();
+        destroyCropper();
+        //disabilito il plugin del cropping
+    })
+
+    $(document).on("click", "#button-save-crop", function () {
+
+        var imageContainer = $(".zoomed-picture-background")[0];
+        var originalPictureId = $(imageContainer).data("displayed-image-id");
+
+        if (cropper) {
+
+            //disable button for submit
+            $(this).prop("disabled", true)
+            $(this).attr("disabled", true)
+
+            var canvas = cropper.getCroppedCanvas();
+            if (canvas) {
+                canvas.toBlob(function (blob) {
+                    var formData = new FormData();
+                    var imgInfo = cropper.getCropBoxData()
+
+                    formData.append('picture[image_file]', blob);
+                    formData.append('image_info[width]', imgInfo.width);
+                    formData.append('image_info[height]', imgInfo.height);
+
+                    // Use `jQuery.ajax` method for example1
+                    $.ajax(Routes.alchemy_admin_picture_crop_path(originalPictureId), {
+                        method: 'POST',
+                        data: formData,
+                        processData: false,
+                        contentType: false
+                    });
+                });
+            }
+        }
+
+    })
+
+    $(document).on("click", "#drag-image", function () {
+
+        if (cropper) {
+
+            if ($(this).hasClass("active")) {
+                cropper.setDragMode("none")
+                $(this).removeClass("active")
+            } else {
+                cropper.setDragMode("move")
+                $(this).addClass("active")
+            }
+        }
+
+        //     if($(this).hasClass("active")) {
+        //     disableCropper()
+        //     $(this).removeClass("active")
+        // } else {
+        //     enableCropperWithOptions({
+        //         dragMode: "move"
+        //     })
+        //     $(this).addClass("active")
+        // }
+
+
+    })
+
+    $(document).on("click", "#preview-image", function () {
+        if (cropper) {
+
+            if ($(this).hasClass("active-no-change")) {
+
+                var imageContainer = $(".zoomed-picture-background")[0];
+                var middlebox = $(imageContainer).find(".middle-box-for-cropping")[0];
+                var containerCropper = $(middlebox).find(".cropperjs-container")
+                var previewBox = $(middlebox).find(".preview-crop");
+                var buttonsActions = $(".crop-block .block-command .direct-action");
+
+                $(previewBox).remove();
+                $(containerCropper).show()
+
+                $(buttonsActions).prop("disabled", false);
+                $(buttonsActions).removeAttr("disabled");
+
+
+                $(this).removeClass("active-no-change")
+                $(this).html("<span class= \"fa fa-eye\"></span>")
+            } else {
+
+                var imageContainer = $(".zoomed-picture-background")[0];
+                var middlebox = $(imageContainer).find(".middle-box-for-cropping")[0];
+                var containerCropper = $(middlebox).find(".cropperjs-container");
+                var buttonsActions = $(".crop-block .block-command .direct-action");
+                $(containerCropper).css("display", "none");
+
+                var previewBox = $("<div class=\"preview-crop\"></div>");
+
+                var thisButton = this;
+
+                cropper.getCroppedCanvas().toBlob(function (blob) {
+
+                    var urlCreator = window.URL || window.webkitURL;
+                    var imageUrl = urlCreator.createObjectURL(blob);
+                    $(previewBox).append("<img src='" + imageUrl + "'>");
+                    $(middlebox).append(previewBox);
+
+                    $(buttonsActions).prop("disabled", true);
+                    $(buttonsActions).attr("disabled", true);
+
+                    $(thisButton).addClass("active-no-change")
+                    $(thisButton).html("<span class=\"fa fa-edit\"></span>")
+                });
+
+
+            }
+
+
+        }
+    })
+
+    $(document).on("click", "#crop-zoom-in", function () {
+        if (cropper) {
+            cropper.zoom(0.05)
+        }
+    })
+
+    $(document).on("click", "#crop-zoom-out", function () {
+        if (cropper) {
+            cropper.zoom(-0.05)
+        }
+    })
+
+    $(document).on("click", ".cropper-action-preset-ratio", function () {
+        if ($(this).hasClass("active")) {
+            $(this).removeClass("active");
+        } else {
+            $(".cropper-action-preset-ratio").removeClass("active");
+            var aspectRatioVal = $(this).data("value")
+
+            if (cropper) {
+                cropper.setAspectRatio(aspectRatioVal)
+            }
+            $(this).addClass("active");
+        }
+    })
+
+
+})

data/app/assets/javascripts/alchemy/crop/image/routes.js.erb

@@ -0,0 +1 @@
+Routes = <%= JsRoutes.generate() %>

data/app/assets/stylesheets/alchemy/crop/image/application.scss

@@ -0,0 +1,17 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ * require_tree .
+ * require_self
+ *= require cropperjs/dist/cropper
+ *= require ./cropping
+ */

data/app/assets/stylesheets/alchemy/crop/image/cropping.scss

@@ -0,0 +1,144 @@
+
+@import "alchemy/variables";
+$background_command: #214166;
+$color_command: #ffffff;
+
+
+.crop-block {
+  margin-top: 1rem;
+
+  #enable-crop, #button-save-crop{
+    background-color: $background_command;
+    color: $color_command;
+  }
+
+
+  .buttons-action-crop {
+    display: none;
+  }
+
+  .crop-panel {
+    display: none;
+  }
+
+  .block-command {
+    margin-top: 0.5rem;
+
+    .btn-group {
+      display: inline-block;
+      &.isolated{
+        margin-left: 15px;
+      }
+    }
+
+    .cropper-action {
+      padding: 0.55em 1.5em;
+      &.active {
+        color: red
+      }
+    }
+  }
+
+  .block-info {
+    margin-top: 0.5rem;
+
+    .form-group {
+      margin-bottom: 0.5rem;
+
+      label {
+        display: inline-block;
+        margin-bottom: .5rem;
+        cursor: default;
+      }
+
+      .form-control {
+        display: block;
+        width: 100%;
+        padding: .375rem .75rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: .25rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        margin: auto;
+      }
+
+      .input-group {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        width: 100%;
+
+        .form-control {
+          position: relative;
+          flex: 1 1 auto;
+          width: 1%;
+          margin-bottom: 0;
+        }
+
+        .input-group-append {
+          margin-left: -1px;
+          display: flex;
+
+          .input-group-text {
+            display: flex;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            padding: .375rem .75rem;
+            margin-bottom: 0;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #495057;
+            text-align: center;
+            white-space: nowrap;
+            background-color: #e9ecef;
+            border: 1px solid #ced4da;
+            border-radius: .25rem;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+
+    }
+  }
+
+  .block-default-crop-size {
+    margin-top: 1rem;
+
+    .suggestion {
+      margin: 5px 0px;
+    }
+
+    .cropper-action-preset-ratio {
+      &.active {
+        color: red;
+      }
+    }
+  }
+
+
+  .button_with_label {
+    margin: 0px;
+  }
+
+}
+
+.middle-box-for-cropping {
+  display: inline-block;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  box-shadow: 0 0 8px rgba(51, 59, 81, 0.8);
+  background-color: #666666;
+  vertical-align: middle;
+  cursor: default;
+}

data/app/controllers/alchemy/admin/pictures/crops_controller.rb

@@ -0,0 +1,46 @@
+module Alchemy
+  module Admin
+    module Pictures
+      class CropsController < Alchemy::Admin::BaseController
+
+        before_action :load_original_picture
+
+
+        def create
+          @picture = Picture.new(picture_params)
+          authorize! :create, @picture
+          if !params[:image_info].nil?
+            puts params[:image_info]
+            width = params[:image_info][:width]
+            height = params[:image_info][:height]
+
+            @picture.name = "#{@original_picture.name}_#{width}x#{height}"
+          else
+            @picture.name = "#{@original_picture.name}_#{SecureRandom.hex}"
+          end
+          @picture.image_file_name = @picture.name
+          @picture.tag_list = @original_picture.tag_list + ["#{width}x#{height}"]
+          if @picture.save
+            flash.notice = Alchemy.t(:cropped_image_succesfully_save, scope: :alchemy_crop_image)
+            redirect_to admin_pictures_path(filter: "last_upload")
+          else
+            flash[:error] = Alchemy.t(:cropped_image_not_saved, scope: :alchemy_crop_image)
+            redirect_to admin_pictures_path
+          end
+        end
+
+
+        private
+
+        def load_original_picture
+          @original_picture = Alchemy::Picture.find params[:picture_id]
+        end
+
+        def picture_params
+          params.require(:picture).permit(:image_file)
+        end
+
+      end
+    end
+  end
+end

data/app/helpers/alchemy/crop/image/application_helper.rb

@@ -0,0 +1,8 @@
+module Alchemy
+  module Crop
+    module Image
+      module ApplicationHelper
+      end
+    end
+  end
+end

data/app/jobs/alchemy/crop/image/application_job.rb

@@ -0,0 +1,8 @@
+module Alchemy
+  module Crop
+    module Image
+      class ApplicationJob < ActiveJob::Base
+      end
+    end
+  end
+end

data/app/mailers/alchemy/crop/image/application_mailer.rb

@@ -0,0 +1,10 @@
+module Alchemy
+  module Crop
+    module Image
+      class ApplicationMailer < ActionMailer::Base
+        default from: 'from@example.com'
+        layout 'mailer'
+      end
+    end
+  end
+end

data/app/views/alchemy/admin/pictures/_cropping.html.erb

@@ -0,0 +1,93 @@
+<div class="crop-block">
+  <div class="block-button">
+    <button id="enable-crop">
+      <%= Alchemy.t(:enable_cropping, scope: :alchemy_crop_image) %>
+    </button>
+    <div class="buttons-action-crop">
+      <button id="button-cancel-crop">
+        <%= Alchemy.t(:cancel, scope: :alchemy_crop_image) %>
+      </button>
+      <button id="button-save-crop">
+        <%= Alchemy.t(:save_crop, scope: :alchemy_crop_image) %>
+      </button>
+    </div>
+  </div>
+  <div class="crop-panel">
+    <div class="block-command">
+      <div class="btn-group">
+        <button type="button" id="drag-image" class="cropper-action button_with_label direct-action">
+            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="<%= Alchemy.t(:move_image, scope: [:alchemy_crop_image, :cropping_actions]) %>">
+              <span class="fa fa-arrows-alt"></span>
+            </span>
+          <label><%= Alchemy.t(:label_drag_image, scope: [:alchemy_crop_image, :button_labels]) %></label>
+
+        </button>
+        <button id="crop-zoom-in" type="button" class="btn btn-primary button_with_label cropper-action direct-action">
+            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="">
+              <span class="fa fa-search-plus"></span>
+            </span>
+          <label><%= Alchemy.t(:label_zoom_in, scope: [:alchemy_crop_image, :button_labels]) %></label>
+
+        </button>
+        <button id="crop-zoom-out" type="button" class="btn btn-primary button_with_label cropper-action direct-action">
+            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="">
+              <span class="fa fa-search-minus"></span>
+            </span>
+          <label><%= Alchemy.t(:label_zoom_out, scope: [:alchemy_crop_image, :button_labels]) %></label>
+        </button>
+      </div>
+
+
+      <div class="btn-group isolated">
+        <button type="button" id="preview-image" class="button_with_label cropper-action">
+            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="<%= Alchemy.t(:crop_image, scope: [:alchemy_crop_image, :cropping_actions]) %>">
+              <span class="fa fa-eye"></span>
+            </span>
+          <label><%= Alchemy.t(:label_preview_image, scope: [:alchemy_crop_image, :button_labels]) %></label>
+        </button>
+      </div>
+
+
+    </div>
+    <div class="block-info">
+
+
+      <div class="form-group">
+        <label><%= Alchemy.t(:width_crop, scope: :alchemy_crop_image) %></label>
+        <div class="input-group">
+          <input type="text" class="form-control" id="field_width_crop" readonly="true">
+          <div class="input-group-append">
+            <span class="input-group-text">px</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label><%= Alchemy.t(:height_crop, scope: :alchemy_crop_image) %></label>
+        <div class="input-group">
+          <input type="text" class="form-control" id="field_height_crop" readonly="true">
+          <div class="input-group-append">
+            <span class="input-group-text">px</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="block-default-crop-size">
+      <div class="suggestion"><%= Alchemy.t(:you_can_select_a_preset_ratio_for_cropping, scope: :alchemy_crop_image) %></div>
+      <div class="btn-group">
+        <% Alchemy::Crop::Image::Configuration.available_preset_cropbox.each do |preset| %>
+          <button type="button" class="button_with_label cropper-action-preset-ratio" data-value="<%= preset[:value] %>">
+            <span class="label-ratio"><%= preset[:label] %></span>
+            <label><%= Alchemy.t(:label_crop_preset, scope: [:alchemy_crop_image, :button_labels], preset: preset[:label]) %></label>
+          </button>
+        <% end %>
+        <button type="button" class="button_with_label cropper-action-preset-ratio active" data-value="NaN">
+          <span class="label-ratio"><%= Alchemy.t(:preset_crop_ratio_none, scope: :alchemy_crop_image) %></span>
+          <label><%= Alchemy.t(:label_crop_preset_none, scope: [:alchemy_crop_image, :button_labels]) %></label>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/alchemy/admin/pictures/show.html.erb

@@ -0,0 +1,44 @@
+<div class="zoomed-picture-background" data-displayed-image-id="<%= @picture.id %>">
+  <%= image_tag @picture.url(format: @picture.image_file_format) %>
+</div>
+
+<div class="picture-overlay-navigation">
+  <% if @previous %>
+    <%= link_to alchemy.admin_picture_path(
+        id: @previous,
+        q: search_filter_params[:q],
+        page: params[:page],
+        tagged_with: search_filter_params[:tagged_with],
+        size: params[:size],
+        filter: search_filter_params[:filter]
+      ),
+      class: "previous-picture",
+      remote: true do %>
+      <i class="icon fas fa-angle-left fa-fw"></i>
+    <% end %>
+  <% end %>
+  <% if @next %>
+    <%= link_to alchemy.admin_picture_path(
+        id: @next,
+        q: search_filter_params[:q],
+        page: params[:page],
+        tagged_with: search_filter_params[:tagged_with],
+        size: params[:size],
+        filter: search_filter_params[:filter]
+      ),
+      class: "next-picture",
+      remote: true do %>
+      <i class="icon fas fa-angle-right fa-fw"></i>
+    <% end %>
+  <% end %>
+</div>
+
+<div class="picture-details-overlay">
+  <%= render 'form' %>
+  <%= render 'infos' %>
+  <%= render partial: "cropping" %>
+</div>
+
+<div class="picture-overlay-handle">
+  <i class="icon fas fa-angle-double-right fa-fw"></i>
+</div>

data/app/views/layouts/alchemy/crop/image/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Alchemy crop image</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "alchemy/crop/image/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/bin/rails

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('..', __dir__)
+ENGINE_PATH = File.expand_path('../lib/alchemy/crop/image/engine', __dir__)
+APP_PATH = File.expand_path('../test/dummy/config/application', __dir__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/initializers/assets.rb

@@ -0,0 +1 @@
+Alchemy::Crop::Image::Engine.config.assets.paths << Rails.root.join('node_modules')