alchemy_cms 7.4.10 → 8.0.0.a

data/app/models/alchemy/storage_adapter/dragonfly.rb

@@ -0,0 +1,183 @@
+module Alchemy
+  class StorageAdapter
+    module Dragonfly
+      module PictureClassMethods
+        def self.included(base)
+          base.class_eval do
+            dragonfly_accessor :image_file, app: :alchemy_pictures do
+              # Preprocess after uploading the picture
+              after_assign do |image|
+                if has_convertible_format?
+                  Alchemy.storage_adapter.preprocessor_class.new(image).call
+                end
+              end
+            end
+
+            has_many :thumbs, class_name: "Alchemy::PictureThumb", dependent: :destroy
+
+            # Create important thumbnails upfront
+            after_create -> { PictureThumb.generate_thumbs!(self) },
+              if: :has_convertible_format?
+          end
+        end
+      end
+
+      module AttachmentClassMethods
+        def self.included(base)
+          base.class_eval do
+            dragonfly_accessor :file, app: :alchemy_attachments do
+              after_assign { |file|
+                write_attribute(:file_mime_type, file.mime_type)
+              }
+            end
+          end
+        end
+      end
+
+      extend self
+
+      CONVERTIBLE_FILE_FORMATS = %w[gif jpg jpeg png webp].freeze
+
+      def attachment_url_class
+        AttachmentUrl
+      end
+
+      def preprocessor_class
+        Preprocessor
+      end
+
+      def picture_url_class
+        PictureUrl
+      end
+
+      def file_formats(class_name, scope:)
+        mime_type_column = case class_name
+        when "Alchemy::Attachment" then :file_mime_type
+        when "Alchemy::Picture" then :image_file_format
+        end
+
+        scope.reorder(mime_type_column).distinct.pluck(mime_type_column).compact.presence || []
+      end
+
+      # @param [String]
+      # @return [Array<String>]
+      def searchable_alchemy_resource_attributes(class_name)
+        case class_name
+        when "Alchemy::Attachment"
+          %w[name file_name]
+        when "Alchemy::Picture"
+          %w[name image_file_name]
+        end
+      end
+      alias_method :ransackable_attributes, :searchable_alchemy_resource_attributes
+
+      # @param [String]
+      # @return [Array<String>]
+      def ransackable_associations(_class_name)
+        %w[]
+      end
+
+      def rescuable_errors
+        ::Dragonfly::Job::Fetch::NotFound
+      end
+
+      # @param [String]
+      # @return [Alchemy::Picture::ActiveRecord_Relation]
+      def by_file_format_scope(file_format)
+        Picture.where(image_file_format: file_format)
+      end
+
+      # @param [String]
+      # @return [Alchemy::Attachment::ActiveRecord_Relation]
+      def by_file_type_scope(file_type)
+        Attachment.where(file_mime_type: file_type)
+      end
+
+      # @param [Alchemy::Attachment]
+      # @return [String]
+      def file_name(attachment)
+        attachment.read_attribute(:file_name)
+      end
+
+      # @param [Alchemy::Attachment]
+      # @return [Integer]
+      def file_size(attachment)
+        attachment.read_attribute(:file_size)
+      end
+
+      # @param [Alchemy::Attachment]
+      # @return [String]
+      def file_mime_type(attachment)
+        attachment.read_attribute(:file_mime_type)
+      end
+
+      # @param [Alchemy::Attachment]
+      # @return [String]
+      def file_extension(attachment)
+        content_type = file_mime_type(attachment)
+        Marcel::Magic.new(content_type).extensions.first if content_type
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [TrueClass, FalseClass]
+      def has_convertible_format?(picture)
+        image_file_extension(picture).in?(CONVERTIBLE_FILE_FORMATS)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [String]
+      def image_file_name(picture)
+        picture.read_attribute(:image_file_name)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [String]
+      def image_file_format(picture)
+        ext = picture.read_attribute(:image_file_format)
+        Marcel::MimeType.for(extension: ext) if ext
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [Integer]
+      def image_file_size(picture)
+        picture.read_attribute(:image_file_size)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [Integer]
+      def image_file_width(picture)
+        picture.read_attribute(:image_file_width)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [Integer]
+      def image_file_height(picture)
+        picture.read_attribute(:image_file_height)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [String]
+      def image_file_extension(picture)
+        picture.read_attribute(:image_file_format)
+      end
+
+      # @param [Alchemy::Picture]
+      # @return [TrueClass, FalseClass]
+      def image_file_present?(picture)
+        !!picture.image_file
+      end
+
+      # @param Alchemy::Picture::ActiveRecord_Relation
+      # @return Alchemy::Picture::ActiveRecord_Relation
+      def preloaded_pictures(pictures)
+        pictures.includes(:thumbs)
+      end
+
+      # @param [Alchemy::Attachment]
+      # @return [TrueClass, FalseClass]
+      def set_attachment_name?(attachment)
+        attachment.file_name_changed?
+      end
+    end
+  end
+end

data/app/models/alchemy/storage_adapter.rb

@@ -0,0 +1,74 @@
+module Alchemy
+  class StorageAdapter
+    class UnknownAdapterError < StandardError; end
+
+    attr_reader :name, :adapter
+
+    delegate(
+      :attachment_url_class,
+      :by_file_format_scope,
+      :by_file_type_scope,
+      :file_extension,
+      :file_formats,
+      :file_mime_type,
+      :file_name,
+      :file_size,
+      :has_convertible_format?,
+      :image_file_extension,
+      :image_file_format,
+      :image_file_height,
+      :image_file_name,
+      :image_file_present?,
+      :image_file_size,
+      :image_file_width,
+      :picture_url_class,
+      :preloaded_pictures,
+      :preprocessor_class,
+      :ransackable_associations,
+      :ransackable_attributes,
+      :rescuable_errors,
+      :searchable_alchemy_resource_attributes,
+      :set_attachment_name?,
+      to: :adapter
+    )
+
+    def initialize(name)
+      @name = name.to_sym
+      @adapter = adapter_class
+    end
+
+    def ==(other)
+      name == other.to_sym
+    end
+
+    def active_storage?
+      name == :active_storage
+    end
+
+    def dragonfly?
+      name == :dragonfly
+    end
+
+    def picture_class_methods
+      adapter::PictureClassMethods
+    end
+
+    def attachment_class_methods
+      adapter::AttachmentClassMethods
+    end
+
+    private
+
+    def adapter_class
+      case name
+      when :active_storage
+        ActiveStorage
+      when :dragonfly
+        Dragonfly
+      else
+        raise UnknownAdapterError,
+          "Unknown storage adapter: #{name}. Please use either 'active_storage' or 'dragonfly'."
+      end
+    end
+  end
+end

data/app/models/concerns/alchemy/picture_thumbnails.rb

@@ -28,7 +28,7 @@ module Alchemy
     #
     # @option options format [String]
     #   The format the picture should be rendered in.
-    #   Defaults to the +image_output_format+ from the +Alchemy::Config+.
+    #   Defaults to the +image_output_format+ from the +Alchemy.config+.
     #
     # @option options crop [Boolean]
     #   If set to true the picture will be cropped to fit the size value.
@@ -84,7 +84,7 @@ module Alchemy
         crop_from: crop && crop_from.presence || default_crop_from&.join("x"),
         crop_size: crop && crop_size.presence || default_crop_size&.join("x"),
         flatten: true,
-        format: picture&.image_file_format || "jpg"
+        format: picture&.image_file_extension || "jpg"
       }
     end
 
@@ -102,14 +102,27 @@ module Alchemy
 
     # Show image cropping link for ingredient
     def allow_image_cropping?
-      settings[:crop] && picture&.can_be_cropped_to?(
-        settings[:size],
-        settings[:upsample]
-      ) && !!picture.image_file
+      settings[:crop] && picture &&
+        Alchemy.storage_adapter.image_file_present?(picture) &&
+        can_be_cropped_to?
     end
 
     private
 
+    # An Image smaller than dimensions
+    # can not be cropped to given size - unless upsample is true.
+    #
+    def can_be_cropped_to?
+      return true if settings[:upsample]
+
+      dimensions = inferred_dimensions_from_string(settings[:size])
+      if dimensions
+        picture.image_file_width > dimensions[0] && picture.image_file_height > dimensions[1]
+      else
+        false
+      end
+    end
+
     def default_crop_size
       return nil unless settings[:crop] && settings[:size]
 

data/app/serializers/alchemy/element_serializer.rb

@@ -10,7 +10,6 @@ module Alchemy
       :tag_list,
       :created_at,
       :updated_at,
-      :dom_id,
       :display_name
 
     has_many :nested_elements

data/app/services/alchemy/dragonfly_to_image_processing.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module DragonflyToImageProcessing
+    RESIZE_TO_LIMIT = />$/
+    RESIZE_TO_FILL = /\#$/
+    RESIZE_TO_FIT = /\^$/
+    NOSHARPEN = {sharpen: false}.freeze
+
+    class << self
+      def call(options = {})
+        opts = crop_options(options).presence || resize_options(options)
+        opts.merge!(format_options(options))
+        opts.merge!(quality_options(options))
+        opts
+      end
+
+      private
+
+      def crop_options(options)
+        return {} unless options[:crop] && options[:crop_from] && options[:crop_size] && options[:size]
+
+        crop_from = options[:crop_from].split("x", 2).map(&:to_i)
+        crop_size = options[:crop_size].split("x", 2).map(&:to_i)
+        {
+          crop: crop_from + crop_size
+        }.merge(resize_options(options.except(:crop)))
+      end
+
+      def resize_options(options)
+        return {} unless options[:size]
+
+        size_string = image_magick_string(options)
+        width, height = size_string.split("x", 2).map(&:to_i)
+        case size_string
+        when RESIZE_TO_FIT
+          resize_to_fit_options(width, height)
+        when RESIZE_TO_FILL
+          resize_to_fill_options(width, height)
+        else
+          resize_to_limit_options(width, height)
+        end.transform_values! do |value|
+          value.push(sharpen_option(options))
+        end
+      end
+
+      def quality_options(options)
+        quality = options[:quality] || Alchemy.config.get(:output_image_quality)
+        {saver: {quality: quality}}
+      end
+
+      def format_options(options)
+        format = options[:format] || default_output_format
+        return {} if format.nil?
+
+        {format: format}
+      end
+
+      def image_magick_string(options)
+        if options[:crop] == true
+          "#{options[:size]}#"
+        else
+          options[:size]
+        end
+      end
+
+      def resize_to_fit_options(width, height)
+        {
+          resize_to_fit: [width, height]
+        }
+      end
+
+      def resize_to_fill_options(width, height)
+        {
+          resize_to_fill: [width, height]
+        }
+      end
+
+      def resize_to_limit_options(width, height)
+        {
+          resize_to_limit: [width, height]
+        }
+      end
+
+      def sharpen_option(options)
+        sharpen_value(options) ? {} : NOSHARPEN
+      end
+
+      def sharpen_value(options)
+        options.key?(:sharpen) ? options[:sharpen] : Alchemy.config.get(:sharpen_images)
+      end
+
+      def default_output_format
+        return nil if Alchemy.config.image_output_format == "original"
+
+        Alchemy.config.image_output_format
+      end
+    end
+  end
+end

data/app/stylesheets/alchemy/_defaults.scss

@@ -0,0 +1,3 @@
+@use "variables";
+@use "mixins";
+@use "extends";

data/app/stylesheets/alchemy/_extends.scss

@@ -0,0 +1,69 @@
+@use "sass:color";
+@use "mixins";
+
+%text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+}
+
+%field-with-error {
+  border-color: var(--notice-error-border-color);
+  color: var(--notice-error-text-color);
+  background-color: var(--form-field-error-bg-color);
+  box-shadow: var(--form-field-error-box-shadow);
+}
+
+%default-input-style {
+  border-radius: var(--border-radius_medium);
+  box-shadow: var(--form-field-box-shadow);
+  font: var(--font-default);
+  color: var(--form-field-text-color);
+  padding: var(--form-field-padding);
+  margin: var(--form-field-margin);
+  background: var(--form-field-background-color);
+  border-width: var(--form-field-border-width);
+  border-style: var(--form-field-border-style);
+  border-color: var(--form-field-border-color);
+  height: var(--form-field-height);
+  width: 100%;
+  font-size: var(--form-field-font-size);
+  line-height: var(--form-field-line-height);
+  transition: var(--transition-duration);
+
+  &:focus:not(.readonly) {
+    @include mixins.default-focus-style(
+      $box-shadow: 0 0 0 1px var(--focus-color)
+    );
+  }
+
+  &[disabled],
+  &.disabled,
+  &:not(.flatpickr-input)[readonly],
+  &:not(.flatpickr-input).readonly {
+    color: var(--form-field-disabled-text-color);
+    background-color: var(--form-field-disabled-bg-color);
+    cursor: default;
+  }
+
+  &[disabled],
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &:not(.flatpickr-input)[readonly],
+  &:not(.flatpickr-input).readonly {
+    pointer-events: none;
+  }
+}
+
+%gradiated-toolbar {
+  display: flex;
+  background: var(--toolbar-bg-color);
+  padding: var(--toolbar-padding);
+  height: var(--toolbar-height);
+  border-bottom: var(--toolbar-border-bottom);
+}

data/app/{assets/stylesheets → stylesheets}/alchemy/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin default-focus-style(
-  $border-color: $focus-color,
-  $box-shadow: 0 0 0 2px $focus-color,
-  $border-radius: $default-border-radius
+  $border-color: var(--focus-color),
+  $box-shadow: 0 0 0 2px var(--focus-color),
+  $border-radius: var(--border-radius_medium)
 ) {
   border-color: $border-color;
   border-radius: $border-radius;
@@ -15,26 +15,26 @@
 }
 
 @mixin button-defaults(
-  $background-color: $button-bg-color,
-  $hover-color: $button-hover-bg-color,
-  $hover-border-color: $button-hover-border-color,
-  $border-radius: $button-border-radius,
-  $border: $button-border-width solid $button-border-color,
-  $box-shadow: $button-box-shadow,
-  $padding: $button-padding,
-  $margin: $button-margin,
-  $color: $button-text-color,
-  $line-height: $form-field-line-height,
-  $focus-border-color: $button-focus-border-color,
-  $focus-box-shadow: $button-focus-box-shadow
+  $background-color: var(--button-bg-color),
+  $hover-color: var(--button-hover-bg-color),
+  $hover-border-color: var(--button-hover-border-color),
+  $border-radius: var(--button-border-radius),
+  $border: var(--button-border),
+  $box-shadow: var(--button-box-shadow),
+  $padding: var(--button-padding),
+  $margin: var(--button-margin),
+  $color: var(--button-text-color),
+  $line-height: var(--button-line-height),
+  $focus-border-color: var(--button-focus-border-color),
+  $focus-box-shadow: var(--button-focus-box-shadow)
 ) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: $default-font-family;
-  font-size: $default-font-size;
-  font-weight: $button-font-weight;
-  height: 30px;
+  font-family: var(--font-sans);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  height: var(--button-height);
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -44,7 +44,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: all $transition-duration;
+  transition: all var(--transition-duration);
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -55,7 +55,7 @@
 
   &:active,
   &.active {
-    box-shadow: inset $button-box-shadow;
+    box-shadow: inset var(--button-box-shadow);
   }
 
   &:focus {
@@ -86,7 +86,7 @@
 }
 
 @mixin form-label {
-  width: $form-left-width;
+  width: var(--form-left-column-width);
   padding-right: var(--spacing-2);
   padding-top: 0.6em;
   margin-top: var(--spacing-1);
@@ -94,18 +94,18 @@
   word-break: normal;
   float: left;
   text-align: right;
-  font-size: $default-font-size;
+  font-size: var(--font-size_medium);
 }
 
 @mixin form-value-display {
   float: right;
-  width: $form-right-width;
-  margin: $form-field-margin;
+  width: var(--form-right-column-width);
+  margin: var(--form-field-margin);
   padding: var(--spacing-1) var(--spacing-2);
   line-height: 21px;
-  min-height: $form-field-height;
+  min-height: var(--form-field-height);
   background: white;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
 }
 
 @mixin form-hint(
@@ -119,7 +119,7 @@
   border: 1px solid $border-color;
   display: block;
   clear: both;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
 }
 
 @mixin animate-left {
@@ -162,8 +162,8 @@
   background-color: var(--color-grey_light);
   overflow: hidden;
   position: relative;
-  border-radius: $default-border-radius;
-  color: var(--color-text);
+  border-radius: var(--border-radius_medium);
+  color: var(--text-color);
 }
 
 @mixin tag-base($margin: var(--spacing-2) 0, $padding: var(--spacing-2)) {
@@ -182,28 +182,12 @@
   }
 
   &:focus {
-    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+    @include default-focus-style(
+      $box-shadow: inset 0 0 0 2px var(--focus-color)
+    );
   }
 }
 
-@mixin linked-button(
-  $border-radius: $default-border-radius,
-  $line-height: $form-field-line-height,
-  $padding: 3px
-) {
-  @include button-defaults(
-    $line-height: $line-height,
-    $background-color: $linked-button-color,
-    $hover-color: darken($linked-button-color, 10%),
-    $border: 1px solid $linked-border-color,
-    $hover-border-color: darken($linked-border-color, 10%),
-    $border-radius: $border-radius,
-    $box-shadow: none,
-    $padding: $padding,
-    $margin: 0
-  );
-}
-
 @mixin zoom-in {
   cursor: pointer;
   cursor: -webkit-zoom-in;

data/app/stylesheets/alchemy/_variables.scss

@@ -0,0 +1,5 @@
+$small-screen-break-point: 500px;
+$medium-screen-break-point: 700px;
+$large-screen-break-point: 1000px;
+$xlarge-screen-break-point: 1440px;
+$xxlarge-screen-break-point: 1680px;