Introduce ingredients as new content structure

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)

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

@@ -50,8 +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").selector)
-      Alchemy.pictureEditors(@element_area.find(".essence_picture").selector)
+      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) =>

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

@@ -23,5 +23,5 @@ Alchemy.GUI =
     Alchemy.ElementDirtyObserver($el)
     Alchemy.GUI.init($el)
     Alchemy.ImageLoader($el[0])
-    Alchemy.fileEditors($el.find(".essence_file, .essence_video, .essence_audio").selector)
-    Alchemy.pictureEditors($el.find(".essence_picture").selector)
+    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)

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.
@@ -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

app/assets/stylesheets/alchemy/elements.scss

@@ -280,6 +280,7 @@
     }
 
     .content_editor,
+    .ingredient-editor,
     .picture_thumbnail {
       width: 100%;
     }
@@ -413,7 +414,8 @@
   }
 }
 
-.element-content-editors {
+.element-content-editors,
+.element-ingredient-editors {
   display: flex;
   flex-wrap: wrap;
 }
@@ -524,7 +526,8 @@
   }
 }
 
-.essence_picture {
+.essence_picture,
+.ingredient-editor.picture {
   position: relative;
 
   .picture_thumbnail {
@@ -559,47 +562,49 @@
   }
 }
 
-.content_editor {
-  &.essence_audio,
-  &.essence_file,
-  &.essence_video {
-    .file {
-      display: flex;
-      align-items: center;
-      margin: 6px 0 $default-margin;
-      border: $default-border;
-      background-color: $white;
-      border-radius: $default-border-radius;
-      height: $form-field-height;
+.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;
+    border-radius: $default-border-radius;
+    height: $form-field-height;
 
-      .validation_failed & {
-        color: $error_text_color;
-        border-color: $error_border_color;
-      }
+    .validation_failed & {
+      color: $error_text_color;
+      border-color: $error_border_color;
     }
+  }
 
-    .file_icon {
-      text-align: center;
-      width: 24px;
-      padding: $default-padding;
-    }
+  .file_icon {
+    text-align: center;
+    width: 24px;
+    padding: $default-padding;
+  }
 
-    .file_name {
-      white-space: nowrap;
-      overflow: hidden;
-      max-width: 80%;
-      font-size: $small-font-size;
-      text-overflow: ellipsis;
-      padding: $default-padding;
-    }
+  .file_name {
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 80%;
+    font-size: $small-font-size;
+    text-overflow: ellipsis;
+    padding: $default-padding;
+  }
 
-    .remove_file_link {
-      width: 24px;
-      padding: $default-padding;
-    }
+  .remove_file_link {
+    width: 24px;
+    padding: $default-padding;
   }
 }
 
+.file_tools,
 .essence_file_tools {
   display: flex;
   align-items: center;
@@ -635,7 +640,8 @@ select.long {
   padding: 0;
 }
 
-.content_editor {
+.content_editor,
+.ingredient-editor {
   width: 100%;
   padding: $default-padding 0;
   position: relative;
@@ -676,7 +682,7 @@ select.long {
   }
 
   &.validation_failed {
-    label {
+    > label {
       color: $error_text_color;
     }
 
@@ -727,7 +733,8 @@ select.long {
     }
   }
 
-  &.essence_select {
+  &.essence_select,
+  &.select {
     label {
       margin-bottom: 2 * $default-margin;
     }
@@ -741,6 +748,7 @@ select.long {
     }
   }
 
+  select.ingredient-editor-select,
   select.essence_editor_select {
     border-radius: $default-border-radius;
     background: white;
@@ -768,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
     }
@@ -825,6 +835,8 @@ 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;
 
@@ -884,6 +896,7 @@ textarea.has_tinymce {
   }
 }
 
+.ingredient-date--label,
 .essence_date--label {
   position: absolute;
   right: 7px;

app/controllers/alchemy/admin/elements_controller.rb

@@ -55,13 +55,12 @@ def create
       # And update all contents in the elements by calling update_contents.
       #
       def update
-        if @element.update_contents(contents_params)
-          @page = @element.page
-          @element_validated = @element.update(element_params)
+        @page = @element.page
+
+        if element_params.key?(:ingredients_attributes)
+          update_element_with_ingredients
         else
-          @element_validated = false
-          @notice = Alchemy.t("Validation failed")
-          @error_message = "<h2>#{@notice}</h2><p>#{Alchemy.t(:content_validations_headline)}</p>".html_safe
+          update_element_with_contents
         end
       end
 
@@ -105,6 +104,7 @@ def element_includes
             contents: {
               essence: :ingredient_association,
             },
+            ingredients: :related_object,
           },
           :tags,
           {
@@ -113,6 +113,7 @@ def element_includes
                 contents: {
                   essence: :ingredient_association,
                 },
+                ingredients: :related_object,
               },
               :tags,
             ],
@@ -150,16 +151,36 @@ def contents_params
       end
 
       def element_params
-        if @element.taggable?
-          params.fetch(:element, {}).permit(:tag_list)
-        else
-          params.fetch(:element, {})
-        end
+        params.fetch(:element).permit(:tag_list, ingredients_attributes: {})
       end
 
       def create_element_params
         params.require(:element).permit(:name, :page_version_id, :parent_element_id)
       end
+
+      def update_element_with_ingredients
+        if @element.update(element_params)
+          @element_validated = true
+        else
+          element_update_error
+          @error_messages = @element.ingredient_error_messages
+        end
+      end
+
+      def update_element_with_contents
+        if @element.update_contents(contents_params)
+          @element_validated = @element.update(element_params)
+        else
+          element_update_error
+          @error_messages = @element.essence_error_messages
+        end
+      end
+
+      def element_update_error
+        @element_validated = false
+        @notice = Alchemy.t("Validation failed")
+        @error_message = "<h2>#{@notice}</h2><p>#{Alchemy.t(:content_validations_headline)}</p>".html_safe
+      end
     end
   end
 end