alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -62,10 +62,10 @@ $.extend Alchemy,
   removePicture: (selector) ->
     $form_field = $(selector)
     $element = $form_field.closest(".element-editor")
-    if $form_field
+    if $form_field[0]
       $form_field.val ""
       $form_field.prev().remove()
-      $form_field.parent().addClass "missing"
+      $form_field.parent().html '<i class="icon far fa-image fa-fw"/>'
       Alchemy.setElementDirty $element
     false
 

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

@@ -20,7 +20,7 @@ Alchemy.Buttons =
 
   disable: (button) ->
     $button = $(button)
-    spinner = new Alchemy.Spinner('small')
+    spinner = new Alchemy.Spinner('small', {fill: '#fff'})
     $button.data('content', $button.html())
     $button.attr('disabled', true)
     $button.addClass('disabled')

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

@@ -21,7 +21,7 @@ class window.Alchemy.ConfirmDialog extends Alchemy.Dialog
 
   build_buttons: ->
     $btn_container = $('<div class="alchemy-dialog-buttons" />')
-    @cancel_button = $("<button class=\"cancel\">#{@options.cancel_label}</button>")
+    @cancel_button = $("<button class=\"cancel secondary\">#{@options.cancel_label}</button>")
     @ok_button = $("<button class=\"confirm\">#{@options.ok_label}</button>")
     $btn_container.append(@cancel_button)
     $btn_container.append(@ok_button)

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

@@ -15,6 +15,7 @@ $.extend Alchemy,
       $datepicker_inputs.each ->
         type = $(this).data('datepicker-type')
         options =
+          scrollInput: false
           format: Alchemy.t("formats.#{type}")
           timepicker: /time/.test(type)
           datepicker: /date/.test(type)

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

@@ -140,7 +140,7 @@ class window.Alchemy.Dialog
           error_header = "#{xhr.statusText} (#{xhr.status})"
         error_body = "Please check log and try again."
     $errorDiv = $("<div class=\"message #{error_type}\" />")
-    $errorDiv.append "<span class=\"icon #{error_type}\" />"
+    $errorDiv.append Alchemy.messageIcon(error_type)
     $errorDiv.append "<h1>#{error_header}</h1>"
     $errorDiv.append "<p>#{error_body}</p>"
     @dialog_body.html $errorDiv
@@ -171,7 +171,7 @@ class window.Alchemy.Dialog
     @dialog_body = $('<div class="alchemy-dialog-body" />')
     @dialog_header = $('<div class="alchemy-dialog-header" />')
     @dialog_title = $('<div class="alchemy-dialog-title" />')
-    @close_button = $('<a class="alchemy-dialog-close"><span class="icon close small"></span></a>')
+    @close_button = $('<a class="alchemy-dialog-close"><i class="icon fas fa-times fa-fw fa-xs"/></a>')
     @dialog_title.text(@options.title)
     @dialog_header.append(@dialog_title)
     @dialog_header.append(@close_button)
@@ -251,17 +251,19 @@ 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]', (e) ->
+  $(scope).on 'click', '[data-alchemy-dialog]', (event) ->
     $this = $(this)
     url = $this.attr('href')
     options = $this.data('alchemy-dialog')
     Alchemy.openDialog(url, options)
-    false
+    event.preventDefault()
+    return
   $(scope).on 'click', '[data-alchemy-confirm-delete]', (event) ->
     $this = $(this)
     options = $this.data('alchemy-confirm-delete')
     Alchemy.confirmToDeleteDialog($this.attr('href'), options)
-    false
+    event.preventDefault()
+    return
   $(scope).on 'click', '[data-alchemy-confirm]', (event) ->
     options = $(this).data('alchemy-confirm')
     Alchemy.openConfirmDialog options.message, $.extend options,
@@ -271,4 +273,15 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
         Alchemy.pleaseWaitOverlay()
         @form.submit()
         return
-    false
+    event.preventDefault()
+    return
+
+# Returns a FontAwesome icon for given message type
+#
+window.Alchemy.messageIcon = (messageType) ->
+  icon_class = switch messageType
+    when "warning", "warn", "alert" then "exclamation"
+    when "notice" then "check"
+    when "error" then "bug"
+    else messageType
+  "<i class=\"icon fas fa-#{icon_class} fa-fw\" />"

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

@@ -12,19 +12,14 @@ $.extend Alchemy,
   setElementDirty: (element) ->
     $element = $(element)
     $element.addClass('dirty')
-    $element
-      .find('> .element-header .icon[class*="element_"]')
-      .addClass('element_dirty')
     window.onbeforeunload = @pageUnload
 
   pageUnload: ->
-    Alchemy.pleaseWaitOverlay(false)
     Alchemy.t('page_dirty_notice')
 
   setElementClean: (element) ->
     $element = $(element)
     $element.removeClass('dirty')
-    $element.find('> .element-header .icon').removeClass('element_dirty')
     $element.find('> .element-content .dirty').removeClass('dirty')
     window.onbeforeunload = undefined
 
@@ -41,10 +36,11 @@ $.extend Alchemy,
         $form = $("<form action=\"#{element.action}\" method=\"POST\" style=\"display: none\" />")
         $form.append $(element).find("input")
         $form.appendTo "body"
+        Alchemy.pleaseWaitOverlay()
         $form.submit()
     else if $(element).is("a")
       callback = ->
-        window.location.href = element.pathname
+        Turbolinks.visit(element.pathname)
     if Alchemy.isPageDirty()
       Alchemy.openConfirmDialog Alchemy.t('page_dirty_notice'),
         title: Alchemy.t('warning')
@@ -52,7 +48,6 @@ $.extend Alchemy,
         cancel_label: Alchemy.t('cancel')
         on_ok: ->
           window.onbeforeunload = undefined
-          Alchemy.pleaseWaitOverlay()
           callback()
       false
     else

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

@@ -20,7 +20,9 @@ Alchemy.ElementEditors =
   # Binds click events on several DOM elements from element editors
   # Uses event delegation, so it is not necessary to rebind these events.
   bindEvents: ->
-    @element_area.on "click", ".element-header", (e) =>
+    $('body').on 'click', (e) =>
+      @onClickBody(e)
+    @element_area.on "click", ".element-editor", (e) =>
       @onClickElement(e)
     @element_area.on "dblclick", ".element-header", (e) =>
       @onDoubleClickElement(e)
@@ -39,12 +41,15 @@ Alchemy.ElementEditors =
   # Selects and scrolls to element with given id in the preview window.
   #
   selectElementInPreview: (element_id) ->
-    $frame_elements = document
-                        .getElementById("alchemy_preview_window")
-                        .contentWindow
-                        .jQuery("[data-alchemy-element]")
-    $selected_element = $frame_elements.closest("[data-alchemy-element='#{element_id}']")
-    $selected_element.trigger("SelectPreviewElement.Alchemy")
+    previewElements = document
+                        .getElementById('alchemy_preview_window')
+                        .contentDocument
+                        .querySelectorAll('[data-alchemy-element]')
+    previewElement = Array.from(previewElements).find (element) ->
+      element.getAttribute('data-alchemy-element') == element_id
+    if previewElement
+      event = new Event('SelectPreviewElement.Alchemy')
+      previewElement.dispatchEvent(event)
     return
 
   # Selects element
@@ -59,7 +64,6 @@ Alchemy.ElementEditors =
     # If we have folded parents we need to unfold each of them
     # and then finally scroll to or unfold ourself
     $folded_parents = $element.parents('.element-editor.folded')
-    @selectElement($element)
     if $folded_parents.length > 0
       @unfoldParents $folded_parents, =>
         @scrollToOrUnfold(element_id)
@@ -77,11 +81,10 @@ Alchemy.ElementEditors =
 
   # Marks an element as selected in the element window and scrolls to it.
   #
-  selectElement: ($element) ->
-    $elements = $("#element_area .element-editor")
-    $elements.removeClass("selected")
+  selectElement: ($element, scroll = false) ->
+    $("#element_area .element-editor").not($element[0]).removeClass("selected")
     $element.addClass("selected")
-    @scrollToElement($element)
+    @scrollToElement($element) if scroll
     return
 
   # Unfolds given parents until the last one is reached, then calls callback
@@ -104,9 +107,10 @@ Alchemy.ElementEditors =
   #
   scrollToOrUnfold: (element_id, callback) ->
     $el = $("#element_#{element_id}")
-    @selectElement($el)
     if $el.hasClass("folded")
       @toggleFold(element_id, callback)
+    else
+      @selectElement($el, true)
     return
 
   # Scrolls the element window to given element editor dom element.
@@ -114,7 +118,7 @@ Alchemy.ElementEditors =
   scrollToElement: (el) ->
     $("#element_area").scrollTo el,
       duration: 400
-      offset: -10
+      offset: -6
 
   # Expands or folds a element editor
   #
@@ -138,7 +142,7 @@ Alchemy.ElementEditors =
   toggleFold: (id, callback) ->
     spinner = new Alchemy.Spinner('small')
     spinner.spin("#element_#{id} > .element-header .ajax-folder")
-    $("#element_#{id}_folder").hide()
+    $("#element_#{id}_folder .icon").hide()
     $.post Alchemy.routes.fold_admin_element_path(id), =>
       callback.call() if callback?
       return
@@ -168,37 +172,43 @@ Alchemy.ElementEditors =
 
   # Event handlers
 
-  # Click event handler for element head.
+  onClickBody: (e) ->
+    frameWindow = $('#alchemy_preview_window')[0].contentWindow
+    element = $(e.target).parents('.element-editor')[0]
+    $('#element_area .element-editor').not(element).removeClass('selected')
+    unless element
+      frameWindow.postMessage('blurAlchemyElements', window.location.origin)
+    return
+
+  # Click event handler for element body.
   #
   # - Focuses the element
   # - Triggers custom 'SelectPreviewElement.Alchemy' event on target element in preview frame.
   #
   onClickElement: (e) ->
-    $element = $(e.target).closest(".element-editor")
+    $target = $(e.target)
+    $element = $target.closest(".element-editor")
     element_id = $element.attr("id").replace(/\D/g, "")
-    $("#element_area .element-editor").removeClass("selected")
-    $element.addClass("selected")
     @selectElement($element)
     @selectElementInPreview(element_id)
-    e.preventDefault()
-    e.stopPropagation()
-    false
+    # Element submit button needs to keep it's default event
+    e.preventDefault() unless $target.is(':submit')
+    return
 
   # Double click event handler for element head.
   onDoubleClickElement: (e) ->
     id = $(e.target).closest('.element-editor').attr('id').replace(/\D/g, '')
     @toggle(id)
     e.preventDefault()
-    e.stopPropagation()
-    false
+    return
 
   # Click event handler for element toggle icon.
   onClickToggle: (e) ->
-    id = $(e.target).data('element-toggle')
+    id = $(e.currentTarget).data('element-toggle')
     @toggle(id)
     e.preventDefault()
     e.stopPropagation()
-    false
+    return
 
   # Handles the custom 'FocusElementEditor.Alchemy' event.
   #

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

@@ -11,8 +11,8 @@ Alchemy.ToolbarButton = (options) ->
   $lnk.click (e) ->
     e.preventDefault()
     options.onClick(e)
-    false
-  $lnk.append "<span class='icon #{options.iconClass}' />"
+    return
+  $lnk.append "<i class='icon fas fa-#{options.iconClass} fa-fw' />"
   $btn.append $lnk
   $btn.append "<br><label>#{options.label}</label>"
   $btn
@@ -21,6 +21,7 @@ Alchemy.ElementsWindow =
 
   init: (url, options, callback) ->
     @hidden = false
+    @$body = $('body')
     @element_window = $('<div id="alchemy_elements_window"/>')
     @element_area = $('<div id="element_area"/>')
     @url = url
@@ -32,11 +33,11 @@ Alchemy.ElementsWindow =
     @button.click =>
       @hide()
       false
-    height = @resize()
     window.requestAnimationFrame =>
       spinner = new Alchemy.Spinner('medium')
       spinner.spin @element_area[0]
     $('#main_content').append(@element_window)
+    @show()
     @reload()
 
   createToolbar: (buttons) ->
@@ -45,14 +46,6 @@ Alchemy.ElementsWindow =
       @toolbar.append Alchemy.ToolbarButton(btn)
     @toolbar
 
-  resize: ->
-    height = $(window).height() - 73
-    @element_window.css
-      height: height
-    @element_area.css
-      height: height - 46
-    height
-
   reload: ->
     $.get @url, (data) =>
       @element_area.html data
@@ -63,16 +56,14 @@ Alchemy.ElementsWindow =
       Alchemy.AjaxErrorHandler @element_area, xhr.status, status, error
 
   hide: ->
-    @element_window.css(right: -400)
+    @$body.removeClass('elements-window-visible');
     @hidden = true
     @toggleButton()
-    Alchemy.PreviewWindow.resize()
 
   show: ->
-    @element_window.css(right: 0)
+    @$body.addClass('elements-window-visible');
     @hidden = false
     @toggleButton()
-    Alchemy.PreviewWindow.resize()
 
   toggleButton: ->
     if @hidden

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

@@ -9,7 +9,7 @@ Alchemy.FileProgress = (file) ->
     @$fileProgressElement = $('<div class="progress-container"/>')
 
     # Append Cancel Button
-    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"/>')
+    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="fas fa-times fa-fw"/></a>')
     @$fileProgressElement.append @$fileProgressCancel
 
     # Append Filename

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

@@ -4,24 +4,21 @@ Alchemy.Growler =
 
   build: (message, flash_type) ->
     $flash_container = $("<div class=\"flash #{flash_type}\" />")
-    icon_class = (if flash_type is "notice" then "tick" else flash_type)
-    $flash_container.append "<span class=\"icon #{icon_class}\" />"
+    $flash_container.append Alchemy.messageIcon(flash_type)
     $flash_container.append message
     $("#flash_notices").append $flash_container
     $("#flash_notices").show()
     Alchemy.Growler.fade()
 
   fade: ->
-    $(".flash.notice, .flash.warning, .flash.warn, .flash.alert", "#flash_notices").delay(5000).hide "drop",
-      direction: "up"
-    , 400, ->
-      $(this).remove()
+    $(".flash:not(.error)", "#flash_notices").delay(5000).queue(-> Alchemy.Growler.dismiss(this))
+    $(".flash", "#flash_notices").click((e) => @dismiss(e.currentTarget))
+    return
 
-    $(".flash.error", "#flash_notices").click ->
-      $(this).hide "drop",
-        direction: "up"
-      , 400, ->
-        $(this).remove()
+  dismiss: (element) ->
+    $(element).on 'transitionend', => $(element).remove()
+    $(element).addClass('dismissed')
+    return
 
 Alchemy.growl = (message, style = "notice") ->
   Alchemy.Growler.build message, style

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

@@ -9,7 +9,10 @@ Alchemy.GUI =
     Alchemy.Datepicker(scope)
     Alchemy.Tooltips(scope)
     Alchemy.Buttons.observe(scope)
-    Alchemy.watchForDialogs(scope)
+    # Dialog links use event delegation and therefore do not
+    # need to be re-initialized after dom elements get replaced
+    unless scope
+      Alchemy.watchForDialogs()
     Alchemy.Hotkeys(scope)
     Alchemy.ListFilter(scope)
     Alchemy.Autocomplete.tags(scope)

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

@@ -44,7 +44,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     @dialog = $('<div class="alchemy-image-overlay-dialog" />')
     @dialog_body = $('<div class="alchemy-image-overlay-body" />')
     @close_button = $('<a class="alchemy-image-overlay-close">
-      <span class="icon close small"></span>
+      <i class="icon fas fa-times fa-fw"></i>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

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

@@ -15,11 +15,9 @@ Alchemy.Initializer = ->
     Alchemy.Growler.fade()
 
   # Add observer for please wait overlay.
-  $('.please_wait, #main_navi a, .button_with_label form :submit, .locked_page a, .pagination a')
-    .not('*[data-alchemy-confirm], .locked_page button')
-    .click ->
-      unless Alchemy.isPageDirty()
-        Alchemy.pleaseWaitOverlay()
+  $('.please_wait, .button_with_label form :submit')
+    .not('*[data-alchemy-confirm]')
+    .click Alchemy.pleaseWaitOverlay
 
   # Hack for enabling tab focus for <a>'s styled as button.
   $('a.button').attr({tabindex: 0})
@@ -28,17 +26,16 @@ Alchemy.Initializer = ->
   $('select#change_locale').on 'change', (e) ->
     url = window.location.pathname
     delimiter = if url.match(/\?/) then '&' else '?'
-    window.location.href = "#{url}#{delimiter}admin_locale=#{$(this).val()}"
+    Turbolinks.visit "#{url}#{delimiter}admin_locale=#{$(this).val()}"
 
   # Site select handler
   $('select#change_site').on 'change', (e) ->
     url = window.location.pathname
     delimiter = if url.match(/\?/) then '&' else '?'
-    window.location.href = "#{url}#{delimiter}site_id=#{$(this).val()}"
+    Turbolinks.visit "#{url}#{delimiter}site_id=#{$(this).val()}"
 
   # Submit forms of selects with `data-autosubmit="true"`
   $('select[data-auto-submit="true"]').on 'change', (e) ->
-    Alchemy.pleaseWaitOverlay()
     $(this.form).submit()
 
   # Attaches the image loader on all images
@@ -49,12 +46,6 @@ Alchemy.Initializer = ->
     tagName = (event.target || event.srcElement).tagName
     key.isPressed('esc') || !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA')
 
-  # Sticky table headers
-  $('table.list').floatThead
-    useAbsolutePositioning: false,
-    scrollingTop: 122,
-    zIndex: 1
-
 # Enabling the Turbolinks Progress Bar for v2.5
 Turbolinks.enableProgressBar() if Turbolinks.enableProgressBar