alchemy_cms 5.3.8 → 6.0.0.b1

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

@@ -42,36 +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', (evt) ->
-          message = "Could not load #{this.src}"
-          spinner.stop()
-          console.error(message, evt)
-          $parent.html('<span class="icon fas fa-exclamation-triangle" title="' + message + '" />')
-          return
-
-  # 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

@@ -82,12 +82,7 @@ class window.Alchemy.Dialog
     @dialog_body.hide()
     @dialog_body.html(data)
     @init()
-    @dialog[0].dispatchEvent(new CustomEvent(
-      "DialogReady.Alchemy",
-      bubbles: true
-      detail:
-        body: @dialog_body[0]
-    ))
+    @dialog.trigger('DialogReady.Alchemy', @dialog_body)
     if @options.ready?
       @options.ready(@dialog_body)
     @dialog_body.show('fade', 200)
@@ -256,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 =
@@ -80,14 +86,12 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
               name: page.name
               url_path: page.url_path
               page_id: page.id
-              language: page.language
-              site: page.site
           more: meta.page * meta.per_page < meta.total_count
       initSelection: ($element, callback) =>
         urlname = $element.val()
         $.get Alchemy.routes.api_pages_path,
           q:
-            urlname_eq: urlname.replace(/^\/([a-z]{2}(-[A-Z]{2})?\/)?(.+?)\/?$/, '$3')
+            urlname_eq: urlname.replace(/^\/([a-z]{2}(-[A-Z]{2})?\/)?/, '')
           page: 1
           per_page: 1,
           (data) =>
@@ -138,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) ->
@@ -153,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: ->
@@ -207,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.
@@ -230,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
@@ -242,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/alchemy.page_sorter.js

@@ -0,0 +1,24 @@
+Alchemy.PageSorter = function () {
+  var $sortables = $("ul#sitemap").find("ul.level_0_children")
+
+  $sortables.nestedSortable({
+    disableNesting: "no-nest",
+    forcePlaceholderSize: true,
+    handle: ".handle",
+    items: "li",
+    listType: "ul",
+    opacity: 0.5,
+    placeholder: "placeholder",
+    tabSize: 16,
+    tolerance: "pointer",
+    toleranceElement: "> div"
+  })
+
+  $("#save_page_order").click(function (e) {
+    e.preventDefault()
+    Alchemy.Buttons.disable(this)
+    $.post(Alchemy.routes.order_admin_pages_path, {
+      set: JSON.stringify($sortables.nestedSortable("toHierarchy"))
+    })
+  })
+}

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

@@ -0,0 +1,119 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+# The admin sitemap Alchemy module
+Alchemy.Sitemap =
+
+  # Storing some objects.
+  init: (options) ->
+    @search_field = $(".search_input_field")
+    @filter_field_clear = $('.search_field_clear')
+    @display = $('#page_filter_result')
+    @sitemap_wrapper = $('#sitemap-wrapper p.loading')
+    @template = Handlebars.compile($('#sitemap-template').html())
+    list_template_regexp = new RegExp '\/' + options.page_root_id, 'g'
+    list_template_html = $('#sitemap-list').html().replace(list_template_regexp, '/{{id}}')
+    @list_template = Handlebars.compile(list_template_html)
+    @items = null
+    @options = options
+    @watchPagePublicationState()
+    true
+
+    Handlebars.registerPartial('list', list_template_html)
+
+    @fetch()
+
+  # Fetches the sitemap from JSON
+  fetch: (foldingId) ->
+    self = Alchemy.Sitemap
+
+    if foldingId
+      spinner = new Alchemy.Spinner('small')
+      spinTarget = $('#fold_button_' + foldingId)
+      renderTarget = $('#page_' + foldingId)
+      renderTemplate = @list_template
+      pageId = foldingId
+    else
+      spinner = @options.spinner || new Alchemy.Spinner('medium')
+      spinTarget = @sitemap_wrapper
+      renderTarget = @sitemap_wrapper
+      renderTemplate = @template
+      pageId = @options.page_root_id
+
+    spinner.spin(spinTarget[0])
+
+    request = $.ajax url: @options.url, data:
+      id: pageId
+      full: @options.full
+
+    request.done (data) ->
+      # This will also remove the spinner
+      renderTarget.replaceWith(renderTemplate({children: data.pages}))
+      self.items = $(".sitemap_page", '#sitemap')
+      self._observe()
+
+      if self.options.ready
+        self.options.ready()
+
+    request.fail (jqXHR, status) ->
+      console.warn("Request failed: " + status)
+
+  # Filters the sitemap
+  filter: (term) ->
+    results = []
+    self = Alchemy.Sitemap
+    self.items.map ->
+      item = $(this)
+      if term != '' && item.attr('name').toLowerCase().indexOf(term) != -1
+        item.addClass('highlight')
+        item.removeClass('no-match')
+        results.push item
+      else
+        item.addClass('no-match')
+        item.removeClass('highlight')
+    self.filter_field_clear.show()
+    length = results.length
+    if length == 1
+      self.display.show().text("1 #{Alchemy.t('page_found')}")
+      $.scrollTo(results[0], {duration: 400, offset: -80})
+    else if length > 1
+      self.display.show().text("#{length} #{Alchemy.t('pages_found')}")
+    else
+      self.items.removeClass('no-match highlight')
+      self.display.hide()
+      $.scrollTo('0', 400)
+      self.filter_field_clear.hide()
+
+  # Adds onkey up observer to search field
+  _observe: ->
+    filter = @filter
+    @search_field.on 'keyup', ->
+      term = $(this).val()
+      filter(term.toLowerCase())
+    @search_field.on 'focus', ->
+      key.setScope('search')
+    @filter_field_clear.click =>
+      @search_field.val('')
+      filter('')
+      false
+
+  # Handles the page publication date fields
+  watchPagePublicationState: ->
+    $(document).on 'DialogReady.Alchemy', (e, $dialog) ->
+      $public_on_field = $('#page_public_on', $dialog)
+      $public_until_field = $('#page_public_until', $dialog)
+      $publication_date_fields = $('.page-publication-date-fields', $dialog)
+
+      $('#page_public', $dialog).click ->
+        $checkbox = $(this)
+        format = $checkbox.data('date-format')
+        now = new Date()
+        if $checkbox.is(':checked')
+          $publication_date_fields.removeClass('hidden')
+          $public_on_field[0]._flatpickr.setDate(now)
+        else
+          $publication_date_fields.addClass('hidden')
+          $public_on_field.val('')
+        $public_until_field.val('')
+        true
+
+    return

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

@@ -1,11 +1,9 @@
-$.fn.alchemyPageSelect = function (options) {
+$.fn.alchemyPageSelect = function(options) {
   var pageTemplate = HandlebarsTemplates.page
 
   return this.select2({
     placeholder: options.placeholder,
-    allowClear: options.hasOwnProperty("allowClear")
-      ? options.allowClear
-      : true,
+    allowClear: true,
     minimumInputLength: 3,
     initSelection: function (_$el, callback) {
       if (options.initialSelection) {
@@ -14,16 +12,13 @@ $.fn.alchemyPageSelect = function (options) {
     },
     ajax: {
       url: options.url,
-      datatype: "json",
+      datatype: 'json',
       quietMillis: 300,
       data: function (term, page) {
         return {
-          q: $.extend(
-            {
-              name_cont: term
-            },
-            options.query_params
-          ),
+          q: $.extend({
+            name_cont: term
+          }, options.query_params),
           page: page
         }
       },
@@ -39,8 +34,8 @@ $.fn.alchemyPageSelect = function (options) {
     formatSelection: function (page) {
       return page.text || page.name
     },
-    formatResult: function (page) {
-      return pageTemplate({ page: page })
+    formatResult: function(page) {
+      return pageTemplate({page: page})
     }
   })
 }

data/app/assets/javascripts/alchemy/templates/index.js

@@ -2,4 +2,3 @@
 //= require alchemy/templates/page
 //= require alchemy/templates/node_folder
 //= require alchemy/templates/node
-//= require alchemy/templates/page_folder

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/javascripts/alchemy/templates/page.hbs

@@ -1,19 +1,9 @@
 <div class="page-select--page">
-  <div class="page-select--top">
-    <i class="icon far fa-file fa-lg"></i>
-    <span class="page-select--page-name">
-      {{ page.name }}
-    </span>
-    <span class="page-select--page-urlname">
-      {{ page.url_path }}
-    </span>
-  </div>
-  <div class="page-select--bottom">
-    <span class="page-select--site-name">
-      {{ page.site.name }}
-    </span>
-    <span class="page-select--language-code">
-      {{ page.language.name }}
-    </span>
-  </div>
+  <i class="icon far fa-file fa-lg"></i>
+  <span class="page-select--page-name">
+    {{ page.name }}
+  </span>
+  <span class="page-select--page-urlname">
+    {{ page.url_path }}
+  </span>
 </div>

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

@@ -33,10 +33,6 @@ div#image_assign_filter_and_image_sizing {
   background-color: $thumbnail-background-color;
   width: 100%;
   height: 120px;
-
-  &:hover {
-    text-decoration: none;
-  }
 }
 
 .picture_thumbnail {
@@ -47,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 {
@@ -145,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;
-    }
   }
 }