alchemy_cms 5.2.1 → 6.0.0.b1

data/app/assets/javascripts/alchemy/admin.js

@@ -31,7 +31,6 @@
 //= require alchemy/alchemy.growler
 //= require alchemy/alchemy.gui
 //= require alchemy/alchemy.hotkeys
-//= require alchemy/alchemy.image_cropper
 //= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.string_extension
 //= require alchemy/alchemy.link_dialog
@@ -44,6 +43,5 @@
 //= require alchemy/alchemy.spinner
 //= require alchemy/alchemy.tinymce
 //= require alchemy/alchemy.tooltips
-//= require alchemy/alchemy.trash_window
 //= require alchemy/page_select
 //= require alchemy/node_select

data/app/assets/javascripts/alchemy/alchemy.base.js.coffee

@@ -42,33 +42,6 @@ $.extend Alchemy,
       $overlay.hide()
     return
 
-  # Shows spinner while loading images and
-  # fades the image after its been loaded
-  ImageLoader: (scope = document, options = {fill: '#fff'}) ->
-    $('img', scope).each ->
-      if !this.complete
-        image = $(this).hide()
-        $parent = image.parent()
-        spinner = new Alchemy.Spinner('small', options)
-        spinner.spin $parent[0]
-        image.on 'load', ->
-          spinner.stop()
-          image.fadeIn 400
-        image.on 'error', ->
-          spinner.stop()
-          $parent.html('<span class="icon warn"/>')
-
-  # Removes the picture from essence picture thumbnail
-  removePicture: (selector) ->
-    $form_field = $(selector)
-    $element = $form_field.closest(".element-editor")
-    $content = $form_field.closest(".content_editor")
-    if $form_field[0]
-      $form_field.val ""
-      $content.find(".thumbnail_background").html('<i class="icon far fa-image fa-fw"/>')
-      Alchemy.setElementDirty $element
-    false
-
   # Initializes all select tag with .alchemy_selectbox class as select2 instance
   # Pass a jQuery scope to only init a subset of selectboxes.
   SelectBox: (scope) ->

data/app/assets/javascripts/alchemy/alchemy.confirm_dialog.js.coffee

@@ -78,8 +78,9 @@ window.Alchemy.confirmToDeleteDialog = (url, opts) ->
         type: "DELETE"
         error: (xhr, status, error) ->
           type = if xhr.status == 403 then 'warning' else 'error'
-          Alchemy.pleaseWaitOverlay(false)
           Alchemy.growl(xhr.responseText || error, type)
+        complete: () ->
+          Alchemy.pleaseWaitOverlay(false)
 
   $.extend(options, opts)
   Alchemy.openConfirmDialog options.message, options

data/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -251,7 +251,7 @@ window.Alchemy.openDialog = (url, options) ->
 # See Alchemy.Dialog for further options you can add to the data attribute
 #
 window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
-  $(scope).on 'click', '[data-alchemy-dialog]', (event) ->
+  $(scope).on 'click', '[data-alchemy-dialog]:not(.disabled)', (event) ->
     $this = $(this)
     url = $this.attr('href')
     options = $this.data('alchemy-dialog')

data/app/assets/javascripts/alchemy/alchemy.dragndrop.js.coffee

@@ -50,7 +50,6 @@ $.extend Alchemy,
           complete: ->
             Alchemy.initializedSortableElements = false
             $(event.target).css("cursor", "")
-            Alchemy.TrashWindow.refresh(page_id)
             return
       start: (event, ui) ->
         $this = $(this)
@@ -78,27 +77,3 @@ $.extend Alchemy,
     $sortable_area.sortable(sortable_options)
     $sortable_area.find('.nested-elements').sortable(sortable_options)
     return
-
-  DraggableTrashItems: ->
-    $("#trash_items div.draggable").each ->
-      $this = $(this)
-      name = $this.data('element-name')
-      $dropzone = $("[data-droppable-elements~='#{name}']")
-      $this.draggable
-        helper: "clone"
-        iframeFix: "iframe#alchemy_preview_window"
-        connectToSortable: $dropzone
-        revert: "invalid"
-        revertDuration: 200
-        start: (event, ui) ->
-          $dropzone.css('minHeight', 36)
-          $(this).addClass "dragged"
-          ui.helper.css('width', 345)
-          return
-        stop: (event, ui) ->
-          $(this).removeClass "dragged"
-          $dropzone.css('minHeight', '')
-          ui.helper.css('width', '')
-          return
-      return
-    return

data/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -237,7 +237,7 @@ Alchemy.ElementEditors =
   # private
 
   _shouldUpdateTitle: (element, event) ->
-    editors = element.find('> .element-content .element-content-editors').children()
+    editors = element.find('> .element-content .element-content-editors, > .element-content .element-ingredient-editors').children()
     if @_hasParents(element)
       editors.length != 0
     else if @_isParent(element) && @_isFirstChild $(event.target)

data/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee

@@ -50,6 +50,8 @@ Alchemy.ElementsWindow =
     $.get @url, (data) =>
       @element_area.html data
       Alchemy.GUI.init(@element_area)
+      Alchemy.fileEditors(@element_area.find(".essence_file, .essence_video, .essence_audio, .ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video").selector)
+      Alchemy.pictureEditors(@element_area.find(".essence_picture, .ingredient-editor.picture").selector)
       if @callback
         @callback.call()
     .fail (xhr, status, error) =>

data/app/assets/javascripts/alchemy/alchemy.fixed_elements.js

@@ -10,7 +10,7 @@ Alchemy.FixedElements = {
         $tabs = $(this.TABS.replace(/{{label}}/, label));
 
     $('#main-content-elements').wrap($wrapper);
-    $('#fixed-elements').prepend($tabs).tabs('paging', {
+    $('#fixed-elements').prepend($tabs).tabs().tabs('paging', {
       follow: true,
       followOnSelect: true
     });

data/app/assets/javascripts/alchemy/alchemy.gui.js.coffee

@@ -22,4 +22,6 @@ Alchemy.GUI =
   initElement: ($el) ->
     Alchemy.ElementDirtyObserver($el)
     Alchemy.GUI.init($el)
-    Alchemy.ImageLoader($el)
+    Alchemy.ImageLoader($el[0])
+    Alchemy.fileEditors($el.find(".essence_file, .essence_video, .essence_audio, .ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video").selector)
+    Alchemy.pictureEditors($el.find(".essence_picture, .ingredient-editor.picture").selector)

data/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee

@@ -7,7 +7,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     return
 
   init: ->
-    Alchemy.ImageLoader(@dialog_body)
+    Alchemy.ImageLoader(@dialog_body[0])
     $('.zoomed-picture-background').click (e) =>
       e.stopPropagation()
       return if e.target.nodeName == 'IMG'

data/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee

@@ -4,6 +4,12 @@
 class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   constructor: (@link_object) ->
+    parent_selector = @link_object.dataset.parentSelector
+    parent = document.querySelector(parent_selector)
+    @link_value_field = parent.querySelector("[data-link-value]")
+    @link_title_field = parent.querySelector("[data-link-title]")
+    @link_target_field = parent.querySelector("[data-link-target]")
+    @link_class_field = parent.querySelector("[data-link-class]")
     @url = Alchemy.routes.link_admin_pages_path
     @$link_object = $(@link_object)
     @options =
@@ -136,7 +142,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     if @link_object.editor
       @setTinyMCELink(url, title, target)
     else
-      @setEssenceLink(url, title, target)
+      @setLinkFields(url, title, target)
 
   # Sets a link in TinyMCE editor.
   setTinyMCELink: (url, title, target) ->
@@ -151,14 +157,16 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     true
 
   # Sets a link on an Essence (e.g. EssencePicture).
-  setEssenceLink: (url, title, target) ->
-    content_id = @$link_object.data('content-id')
-    $("#contents_#{content_id}_link").val(url).change()
-    $("#contents_#{content_id}_link_title").val(title)
-    $("#contents_#{content_id}_link_class_name").val(@link_type)
-    $("#contents_#{content_id}_link_target").val(target)
-    @$link_object.addClass('linked')
-    @$link_object.next().addClass('linked').removeClass('disabled').removeAttr('tabindex')
+  setLinkFields: (url, title, target) ->
+    @link_value_field.value = url
+    @link_value_field.dispatchEvent(new Event("change"))
+    @link_title_field.value = title
+    @link_class_field.value = @link_type
+    @link_target_field.value = target
+    @link_object.classList.add("linked")
+    @link_object.nextElementSibling.classList.replace("disabled", "linked")
+    @link_object.nextElementSibling.removeAttribute("tabindex")
+    return
 
   # Selects the correct tab for link type and fills all fields.
   selectTab: ->
@@ -205,12 +213,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   # Creates a temporay $('a') object that holds all values on it.
   createTempLink: ->
     @$tmp_link = $('<a/>')
-    content_id = @$link_object.data('content-id')
-    @$tmp_link.attr 'href', $("#contents_#{content_id}_link").val()
-    @$tmp_link.attr 'title', $("#contents_#{content_id}_link_title").val()
-    @$tmp_link.attr 'data-link-target', $("#contents_#{content_id}_link_target").val()
-    @$tmp_link.attr 'target', if $("#contents_#{content_id}_link_target").val() == 'blank' then '_blank' else null
-    @$tmp_link.addClass $("#contents_#{content_id}_link_class_name").val()
+    @$tmp_link.attr('href', @link_value_field.value)
+    @$tmp_link.attr('title', @link_title_field.value)
+    @$tmp_link.attr('data-link-target', @link_target_field.value)
+    @$tmp_link.attr('target', if @link_target_field.value == 'blank' then '_blank' else null)
+    @$tmp_link.addClass(@link_class_field.value)
     @$tmp_link
 
   # Validates url for beginning with an protocol.
@@ -228,7 +235,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   # Populates the internal anchors select
   initAnchorLinks: ->
     frame = document.getElementById('alchemy_preview_window')
-    elements = frame.contentDocument.getElementsByTagName('*')
+    elements = frame.contentDocument?.getElementsByTagName('*') || []
     if elements.length > 0
       for element in elements
         if element.id
@@ -240,15 +247,21 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   # Public class methods
 
   # Removes link from Essence.
-  @removeLink = (link, content_id) ->
-    $link = $(link)
-    $("#contents_#{content_id}_link").val('').change()
-    $("#contents_#{content_id}_link_title").val('')
-    $("#contents_#{content_id}_link_class_name").val('')
-    $("#contents_#{content_id}_link_target").val('')
-    if $link.hasClass('linked')
-      Alchemy.setElementDirty $(link).closest('.element-editor')
-      $link.removeClass('linked').addClass('disabled').attr('tabindex', '-1')
-      $link.blur()
-    $('#edit_link_' + content_id).removeClass('linked')
+  @removeLink = (link, parent_selector) ->
+    parent = document.querySelector(parent_selector)
+    link_value_field = parent.querySelector("[data-link-value]")
+    link_title_field = parent.querySelector("[data-link-title]")
+    link_target_field = parent.querySelector("[data-link-target]")
+    link_class_field = parent.querySelector("[data-link-class]")
+    link_value_field.value = ""
+    link_value_field.dispatchEvent(new Event("change"))
+    link_title_field.value = ""
+    link_class_field.value = ""
+    link_target_field.value = ""
+    if link.classList.contains('linked')
+      Alchemy.setElementDirty link.closest('.element-editor')
+      link.classList.replace('linked', 'disabled')
+      link.setAttribute('tabindex', '-1')
+      link.blur()
+    link.previousElementSibling.classList.remove("linked")
     false

data/app/assets/javascripts/alchemy/templates/node_folder.hbs

@@ -1,3 +1,3 @@
-<a class="node_folder" data-node-id="{{ node.id }}">
+<a class="node_folder" data-record-id="{{ node.id }}" data-record-type="{{ node.type }}">
   <i class="far fa-{{#if node.folded }}plus{{else}}minus{{/if}}-square fa-fw"></i>
 </a>

data/app/assets/stylesheets/alchemy/admin.scss

@@ -27,6 +27,7 @@
 @import "alchemy/frame";
 @import "alchemy/hints";
 @import "alchemy/icons";
+@import "alchemy/images";
 @import "alchemy/image_library";
 @import "alchemy/labels";
 @import "alchemy/nodes";
@@ -42,7 +43,6 @@
 @import "alchemy/spinner";
 @import "alchemy/tables";
 @import "alchemy/tags";
-@import "alchemy/trash";
 @import "alchemy/typography";
 @import "alchemy/lists";
 @import "alchemy/upload";

data/app/assets/stylesheets/alchemy/archive.scss

@@ -43,10 +43,9 @@ div#image_assign_filter_and_image_sizing {
   width: 160px;
 
   img {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 
   .picture_name {
@@ -141,6 +140,7 @@ div.assign_image_list_image {
   }
 
   &.delete {
+    cursor: pointer;
     right: $default-padding;
   }
 

data/app/assets/stylesheets/alchemy/buttons.scss

@@ -40,10 +40,6 @@ input.button {
 
   &[disabled] {
     cursor: not-allowed;
-
-    & + label {
-      display: none;
-    }
   }
 }
 

data/app/assets/stylesheets/alchemy/elements.scss

@@ -45,13 +45,13 @@
   }
 
   > .message {
-    margin: 2*$default-margin
+    margin: 2 * $default-margin;
   }
 }
 
 #main-content-elements,
 .element-editor.is-fixed .nestable-elements {
-  padding: 2*$default-padding $default-padding 2px;
+  padding: 2 * $default-padding $default-padding 2px;
 }
 
 .element-title {
@@ -124,7 +124,7 @@
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
   background-color: $light-gray;
-  margin-bottom: 2*$default-margin;
+  margin-bottom: 2 * $default-margin;
   transition: box-shadow $transition-duration;
 
   &.hidden {
@@ -165,7 +165,7 @@
   &.dirty {
     border-color: #d0c83d;
 
-    >.element-header {
+    > .element-header {
       background-color: #fff8df;
     }
   }
@@ -189,7 +189,8 @@
     }
   }
 
-  &.selected:not(.is-fixed), &:hover {
+  &.selected:not(.is-fixed),
+  &:hover {
     &:not(.hidden) {
       box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
     }
@@ -203,7 +204,6 @@
   }
 
   &.folded {
-
     .nested-elements {
       display: none;
     }
@@ -248,7 +248,7 @@
       transition: all $transition-duration;
     }
 
-    .element-header:hover+.element-toolbar,
+    .element-header:hover + .element-toolbar,
     .element-toolbar:hover {
       visibility: visible;
       opacity: 1;
@@ -280,6 +280,7 @@
     }
 
     .content_editor,
+    .ingredient-editor,
     .picture_thumbnail {
       width: 100%;
     }
@@ -303,7 +304,7 @@
   }
 
   .element-content {
-    margin: 2*$default-padding;
+    margin: 2 * $default-padding;
   }
 
   .validation_notice {
@@ -315,7 +316,7 @@
   }
 
   .message {
-    margin: 2*$default-margin;
+    margin: 2 * $default-margin;
   }
 
   .foot_note {
@@ -343,7 +344,7 @@
   hr {
     height: 0;
     width: 100%;
-    margin: 0 0 4*$default-margin 0;
+    margin: 0 0 4 * $default-margin 0;
     border: 0 none;
     border-top: 1px solid $medium-gray;
     opacity: 1;
@@ -352,7 +353,7 @@
 
 .element-header {
   position: relative;
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
   background-color: $element-header-bg-color;
   @extend .disable-user-select;
   cursor: pointer;
@@ -369,7 +370,7 @@
     transition: color $transition-duration;
   }
 
-  >.hint-with-icon {
+  > .hint-with-icon {
     position: absolute;
     right: 32px;
     top: 10px;
@@ -405,7 +406,7 @@
 
 .element-footer {
   border-top: 1px solid $medium-gray;
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
   text-align: right;
 
   .button {
@@ -413,7 +414,8 @@
   }
 }
 
-.element-content-editors {
+.element-content-editors,
+.element-ingredient-editors {
   display: flex;
   flex-wrap: wrap;
 }
@@ -437,7 +439,8 @@
   right: 0;
 
   .icon_button {
-    @include button-defaults($background-color: $medium-gray,
+    @include button-defaults(
+      $background-color: $medium-gray,
       $hover-color: darken($medium-gray, 5%),
       $border: 1px solid #c0c0c0,
       $box-shadow: none,
@@ -447,7 +450,8 @@
       $margin: 0,
       $border-radius: 0,
       $focus-border-color: $focus-color,
-      $focus-box-shadow: 0 0 0 2px $focus-color);
+      $focus-box-shadow: 0 0 0 2px $focus-color
+    );
     width: 29px;
     height: $form-field-height;
 
@@ -457,9 +461,11 @@
     }
 
     &.linked.link-essence {
-      @include linked-button($border-radius: 0,
+      @include linked-button(
+        $border-radius: 0,
         $line-height: 30px,
-        $padding: 0);
+        $padding: 0
+      );
 
       &:focus {
         border-radius: 0;
@@ -467,9 +473,11 @@
     }
 
     &.linked.unlink-essence {
-      @include linked-button($border-radius: 0 $default-border-radius $default-border-radius 0,
+      @include linked-button(
+        $border-radius: 0 $default-border-radius $default-border-radius 0,
         $line-height: 30px,
-        $padding: 0);
+        $padding: 0
+      );
 
       &:focus {
         border-radius: 0 $default-border-radius $default-border-radius 0;
@@ -487,7 +495,7 @@
   height: 36px;
   border: 1px dotted $button-border-color;
   background-color: $medium-gray;
-  margin-bottom: 2*$default-margin;
+  margin-bottom: 2 * $default-margin;
   border-radius: $default-border-radius;
 }
 
@@ -518,21 +526,10 @@
   }
 }
 
-.essence_picture {
+.essence_picture,
+.ingredient-editor.picture {
   position: relative;
 
-  .picture_tool_delete {
-    position: absolute;
-    right: $default-margin;
-    top: $default-margin;
-    padding: 2px 2px 0;
-    z-index: 2;
-  }
-
-  .picture_thumbnail:hover .picture_tool_delete {
-    display: block;
-  }
-
   .picture_thumbnail {
     display: inline-block;
     width: 160px;
@@ -541,7 +538,7 @@
   }
 
   &.validation_failed .picture_thumbnail {
-    border-color: $error_border_color
+    border-color: $error_border_color;
   }
 
   .thumbnail_background .icon {
@@ -565,9 +562,15 @@
   }
 }
 
-.content_editor.essence_file {
-
+.content_editor.essence_audio,
+.content_editor.essence_file,
+.content_editor.essence_video,
+.ingredient-editor.audio,
+.ingredient-editor.file,
+.ingredient-editor.video {
   .file {
+    display: flex;
+    align-items: center;
     margin: 6px 0 $default-margin;
     border: $default-border;
     background-color: $white;
@@ -581,35 +584,39 @@
   }
 
   .file_icon {
-    display: inline-block;
     text-align: center;
-    float: left;
     width: 24px;
-    padding: 6px 4px;
+    padding: $default-padding;
   }
 
   .file_name {
     white-space: nowrap;
     overflow: hidden;
-    float: left;
     max-width: 80%;
-    line-height: 28px;
     font-size: $small-font-size;
     text-overflow: ellipsis;
+    padding: $default-padding;
+  }
+
+  .remove_file_link {
+    width: 24px;
+    padding: $default-padding;
   }
 }
 
+.file_tools,
 .essence_file_tools {
-  height: 27px;
-  float: right;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
   background-color: white;
   width: 48px;
   border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
+    text-align: center;
     text-decoration: none;
-    padding: 6px $default-margin;
-    float: left;
+    padding: $default-padding;
   }
 }
 
@@ -633,7 +640,8 @@ select.long {
   padding: 0;
 }
 
-.content_editor {
+.content_editor,
+.ingredient-editor {
   width: 100%;
   padding: $default-padding 0;
   position: relative;
@@ -644,7 +652,6 @@ select.long {
   }
 
   &.missing {
-
     .message {
       margin: 0;
       @include clearfix;
@@ -675,13 +682,12 @@ select.long {
   }
 
   &.validation_failed {
-
-    label {
-      color: $error_text_color
+    > label {
+      color: $error_text_color;
     }
 
     input {
-      @extend %field-with-error
+      @extend %field-with-error;
     }
 
     .tinymce_container {
@@ -727,10 +733,10 @@ select.long {
     }
   }
 
-  &.essence_select {
-
+  &.essence_select,
+  &.select {
     label {
-      margin-bottom: 2*$default-margin
+      margin-bottom: 2 * $default-margin;
     }
 
     .select2-container {
@@ -742,6 +748,7 @@ select.long {
     }
   }
 
+  select.ingredient-editor-select,
   select.essence_editor_select {
     border-radius: $default-border-radius;
     background: white;
@@ -769,12 +776,14 @@ select.long {
     }
   }
 
-  &.essence_picture {
+  &.essence_picture,
+  &.picture {
     width: 50%;
     padding-left: 1px; // Compensate the box shadow
     padding-right: $default-padding;
 
-    +.essence_picture {
+    + .essence_picture,
+    + .picture {
       padding-left: $default-padding;
       padding-right: 1px; // Compensate the box shadow
     }
@@ -812,7 +821,7 @@ textarea.has_tinymce {
   margin-top: 8px;
   margin-bottom: 8px;
   background-color: $error_background_color;
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
   list-style-type: none;
   border-radius: $default-border-radius;
   color: $error_text_color;
@@ -826,10 +835,12 @@ textarea.has_tinymce {
 
 .content_editor .hint-with-icon,
 .content_editor .with-hint,
+.ingredient-editor .hint-with-icon,
+.ingredient-editor .with-hint,
 .element-handle .hint-with-icon {
   margin: 0;
 
-  >.hint-bubble {
+  > .hint-bubble {
     left: -7px;
     transform: none;
 
@@ -841,13 +852,13 @@ textarea.has_tinymce {
 
 .is-fixed {
   &.with-contents {
-    >.element-footer {
+    > .element-footer {
       border-top: 0;
       border-bottom: 1px solid $medium-gray;
     }
   }
 
-  >.nestable-elements .add-nestable-element-button {
+  > .nestable-elements .add-nestable-element-button {
     width: 100%;
     text-align: center;
   }
@@ -885,6 +896,7 @@ textarea.has_tinymce {
   }
 }
 
+.ingredient-date--label,
 .essence_date--label {
   position: absolute;
   right: 7px;