alchemy_cms 7.0.16 → 7.1.0.pre.b1

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

@@ -29,11 +29,10 @@ class window.Alchemy.ConfirmDialog extends Alchemy.Dialog
 
   bind_buttons: ->
     @cancel_button.focus()
-    @cancel_button.click =>
+    @cancel_button.on "click", =>
       @close()
-      Alchemy.Buttons.enable()
       false
-    @ok_button.click =>
+    @ok_button.on "click", =>
       @close()
       @options.on_ok()
       false

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

@@ -9,7 +9,6 @@ class window.Alchemy.Dialog
     title: ''
     modal: true
     overflow: 'visible'
-    draggable: true
     ready: ->
     closed: ->
 
@@ -35,11 +34,6 @@ class window.Alchemy.Dialog
     window.requestAnimationFrame =>
       @dialog_container.addClass('open')
       @overlay.addClass('open') if @overlay?
-    if @options.draggable
-      @dialog.draggable
-        iframeFix: true
-        handle: '.alchemy-dialog-title'
-        containment: 'parent'
     @$body.addClass('prevent-scrolling')
     Alchemy.currentDialogs.push(this)
     @load()
@@ -53,7 +47,6 @@ class window.Alchemy.Dialog
     @overlay.removeClass('open') if @overlay?
     @$document.on 'webkitTransitionEnd transitionend oTransitionEnd', =>
       @$document.off 'webkitTransitionEnd transitionend oTransitionEnd'
-      Alchemy.Tinymce.removeFrom $('.tinymce', @dialog_body)
       @dialog_container.remove()
       @overlay.remove() if @overlay?
       @$body.removeClass('prevent-scrolling')
@@ -105,26 +98,25 @@ class window.Alchemy.Dialog
   # Initializes the Dialog body
   init: ->
     Alchemy.GUI.init(@dialog_body)
-    Alchemy.Tinymce.initWith
-      selector: ".alchemy-dialog-body textarea.tinymce",
-      width: '65%'
-    $('#overlay_tabs', @dialog_body).tabs()
     @watch_remote_forms()
 
   # Watches ajax requests inside of dialog body and replaces the content accordingly
   watch_remote_forms: ->
     form = $('[data-remote="true"]', @dialog_body)
-    form.bind "ajax:complete", (e, xhr, status) =>
+    form.bind "ajax:success", (event) =>
+      xhr = event.detail[2]
       content_type = xhr.getResponseHeader('Content-Type')
-      Alchemy.Buttons.enable(@dialog_body)
-      if status == 'success'
-        if content_type.match(/javascript/)
-          return
-        else
-          @dialog_body.html(xhr.responseText)
-          @init()
+      if content_type.match(/javascript/)
+        return
       else
-        @show_error(xhr, status)
+        @dialog_body.html(xhr.responseText)
+        @init()
+      return
+    form.bind "ajax:error", (event, b, c) =>
+      statusText = event.detail[1]
+      xhr = event.detail[2]
+      @show_error(xhr, statusText)
+      return
 
   # Displays an error message
   show_error: (xhr, status_message, $container = @dialog_body) ->
@@ -155,10 +147,10 @@ class window.Alchemy.Dialog
   # - Overlay (if the Dialog is a modal)
   # - ESC Key
   bind_close_events: ->
-    @close_button.click =>
+    @close_button.on "click", =>
       @close()
       false
-    @dialog_container.addClass('closable').click (e) =>
+    @dialog_container.addClass('closable').on "click", (e) =>
       return true if e.target != @dialog_container.get(0)
       @close()
       false
@@ -176,7 +168,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"><i class="icon fas fa-times fa-fw fa-xs"/></a>')
+    @close_button = $('<a class="alchemy-dialog-close"><i class="icon ri-close-line ri-fw" /></a>')
     @dialog_title.text(@options.title)
     @dialog_header.append(@dialog_title)
     @dialog_header.append(@close_button)
@@ -246,7 +238,7 @@ window.Alchemy.openDialog = (url, options) ->
 
 # Watches elements for Alchemy Dialogs
 #
-# Links having a data-alchemy-dialog or data-alchemy-confirm-delete
+# Links having a data-alchemy-confirm-delete
 # and input/buttons having a data-alchemy-confirm attribute get watched.
 #
 # You can pass a scope so that only elements inside this scope are queried.
@@ -256,13 +248,6 @@ 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]:not(.disabled)', (event) ->
-    $this = $(this)
-    url = $this.attr('href')
-    options = $this.data('alchemy-dialog')
-    Alchemy.openDialog(url, options)
-    event.preventDefault()
-    return
   $(scope).on 'click', '[data-alchemy-confirm-delete]', (event) ->
     $this = $(this)
     options = $this.data('alchemy-confirm-delete')
@@ -281,12 +266,12 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
     event.preventDefault()
     return
 
-# Returns a FontAwesome icon for given message type
+# Returns a Remix icon for given message type
 #
 window.Alchemy.messageIcon = (messageType) ->
   icon_class = switch messageType
-    when "warning", "warn", "alert" then "exclamation"
+    when "warning", "warn", "alert" then "alert"
     when "notice" then "check"
     when "error" then "bug"
     else messageType
-  "<i class=\"icon fas fa-#{icon_class} fa-fw\" />"
+  "<i class=\"icon ri-#{icon_class}-line ri-fw\" />"

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

@@ -2,19 +2,20 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
 # Adds buttons into a toolbar inside of overlay windows
 Alchemy.ToolbarButton = (options) ->
-  $btn = $('<div class="button_with_label" />')
+  $btn = $("<sl-tooltip content='#{options.label}' placement='top-#{options.align}'></sl-tooltip>")
+  if options.align
+    $btn.addClass(options.class)
   if options.buttonId
     $btn.attr(id: options.buttonId)
-  $lnk = $("<a title='#{options.title}' class='icon_button' href='#' />")
+  $lnk = $("<a class='icon_button' href='#' />")
   if options.hotkey
     $lnk.attr('data-alchemy-hotkey', options.hotkey)
-  $lnk.click (e) ->
+  $lnk.on "click", (e) ->
     e.preventDefault()
     options.onClick(e)
     return
-  $lnk.append "<i class='icon fas fa-#{options.iconClass} fa-fw' />"
+  $lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
   $btn.append $lnk
-  $btn.append "<br><label>#{options.label}</label>"
   $btn
 
 Alchemy.ElementsWindow =
@@ -30,28 +31,50 @@ Alchemy.ElementsWindow =
     @element_window.append @createToolbar(options.toolbarButtons)
     @element_window.append @element_area
     @button = $('#element_window_button')
-    @button.click =>
+    @button.on "click", =>
       @hide()
       false
+
     window.requestAnimationFrame =>
       spinner = new Alchemy.Spinner('medium')
       spinner.spin @element_area[0]
+
+    window.addEventListener 'message', (event) =>
+      data = event.data
+      if data?.message == 'Alchemy.focusElementEditor'
+        element = document.getElementById("element_#{data.element_id}")
+        Alchemy.ElementsWindow.show()
+        element?.focusElement()
+      true
+
+    @$body.on "click", (evt) =>
+      unless evt.target.closest(".element-editor")
+        @element_area.find('.element-editor').removeClass('selected')
+        Alchemy.PreviewWindow.postMessage(message: 'Alchemy.blurElements')
+      return
+
     $('#main_content').append(@element_window)
     @show()
     @reload()
 
   createToolbar: (buttons) ->
-    @toolbar = $('<div id="overlay_toolbar"/>')
+    @toolbar = $('<div class="elements-window-toolbar" />')
+    buttons.push
+      label: "Collapse all elements"
+      iconClass: "contract-up-down-line"
+      align: "end"
+      class: "right"
+      onClick: =>
+        $("alchemy-element-editor:not([compact]):not([fixed])").each () ->
+          @collapse()
     for btn in buttons
       @toolbar.append Alchemy.ToolbarButton(btn)
-    @toolbar
+    @toolbar.append @collapseAllBtn
 
   reload: ->
     $.get @url, (data) =>
       @element_area.html data
-      Alchemy.GUI.init(@element_area)
-      Alchemy.fileEditors(@element_area.find(".ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video").selector)
-      Alchemy.pictureEditors(@element_area.find(".ingredient-editor.picture").selector)
+      Alchemy.SortableElements()
       if @callback
         @callback.call()
     .fail (xhr, status, error) =>
@@ -70,13 +93,15 @@ Alchemy.ElementsWindow =
   toggleButton: ->
     if @hidden
       @button.find('label').text(@options.texts.showElements)
+      @button.find('.icon').removeClass("ri-menu-unfold-line").addClass("ri-menu-fold-line")
       @button.off('click')
-      @button.click =>
+      @button.on "click", =>
         @show()
         false
     else
       @button.find('label').text(@options.texts.hideElements)
+      @button.find('.icon').removeClass("ri-menu-fold-line").addClass("ri-menu-unfold-line")
       @button.off('click')
-      @button.click =>
+      @button.on "click", =>
         @hide()
         false

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"><i class="fas fa-times fa-fw"/></a>')
+    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="icon ri-close-line ri-fw" /></a>')
     @$fileProgressElement.append @$fileProgressCancel
 
     # Append Filename

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

@@ -1,38 +1,45 @@
-window.Alchemy = Alchemy || {};
+window.Alchemy = Alchemy || {}
 
 Alchemy.FixedElements = {
-  WRAPPER: '<div id="fixed-elements"></div>',
-  TABS: '<ul><li><a href="#main-content-elements">{{label}}</a></li></ul>',
+  WRAPPER: '<sl-tab-group id="fixed-elements" />',
+  TABS: '<sl-tab slot="nav" panel="main-content-elements">{{label}}</sl-tab>',
 
   // Builds fixed elements tabs
-  buildTabs: function(label) {
+  buildTabs: function (label) {
     var $wrapper = $(this.WRAPPER),
-        $tabs = $(this.TABS.replace(/{{label}}/, label));
+      $tabs = $(this.TABS.replace(/{{label}}/, label))
 
-    $('#main-content-elements').wrap($wrapper);
-    $('#fixed-elements').prepend($tabs).tabs().tabs('paging', {
-      follow: true,
-      followOnSelect: true
-    });
+    $("#main-content-elements").wrap($wrapper)
+    $("#fixed-elements").prepend($tabs)
   },
 
   // Creates a fixed element tab.
-  createTab: function(element_id, label) {
-    var $fixed_elements = $('#fixed-elements'),
-        $tab;
-
-    $('> ul', $fixed_elements).append('<li><a href="#fixed-element-' + element_id + '">' + label + '</a></li>');
-    $tab = $('<div id="fixed-element-' + element_id + '" class="sortable-elements" />');
-    $fixed_elements.append($tab);
-    $fixed_elements.tabs().tabs('refresh');
-    $fixed_elements.tabs('option', 'active', $('#fixed-elements > div').index($tab));
+  createTab: function (element_id, label) {
+    var $fixed_elements = $("#fixed-elements")
+    var panel_name = "fixed-element-" + element_id
+
+    var $tab =
+      '<sl-tab slot="nav" panel="' + panel_name + '">' + label + "</sl-tab>"
+    $fixed_elements.append($tab)
+
+    var $panel = $(
+      '<sl-tab-panel name="' + panel_name + '" style="--padding: 0" />'
+    )
+    $fixed_elements.append($panel)
+    window.requestAnimationFrame(function () {
+      $fixed_elements.get(0).show(panel_name)
+    })
   },
 
-  removeTab: function(element_id) {
-    var $fixed_elements = $('#fixed-elements');
+  removeTab: function (element_id) {
+    var $fixed_elements = $("#fixed-elements")
 
-    $fixed_elements.find('a[href="#fixed-element-' + element_id + '"]').parent().remove();
-    $fixed_elements.find('div#fixed-element-' + element_id).remove();
-    $fixed_elements.tabs().tabs('refresh');
+    $fixed_elements
+      .find('sl-tab[panel="fixed-element-' + element_id + '"]')
+      .remove()
+    $fixed_elements
+      .find('sl-tab-panel[name="fixed-element-' + element_id + '"]')
+      .remove()
+    $fixed_elements.get(0).show("main-content-elements")
   }
-};
+}

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

@@ -12,7 +12,7 @@ Alchemy.Growler =
 
   fade: ->
     $(".flash:not(.error)", "#flash_notices").delay(5000).queue(-> Alchemy.Growler.dismiss(this))
-    $(".flash", "#flash_notices").click((e) => @dismiss(e.currentTarget))
+    $(".flash", "#flash_notices").on("click", (e) => @dismiss(e.currentTarget))
     return
 
   dismiss: (element) ->

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

@@ -1,19 +1,17 @@
 class window.Alchemy.ImageOverlay extends Alchemy.Dialog
 
   constructor: (url) ->
-    @options =
-      draggable: false
     super(url, @options)
     return
 
   init: ->
     Alchemy.ImageLoader(@dialog_body[0])
-    $('.zoomed-picture-background').click (e) =>
+    $('.zoomed-picture-background').on "click", (e) =>
       e.stopPropagation()
       return if e.target.nodeName == 'IMG'
       @close()
       false
-    $('.picture-overlay-handle').click (e) =>
+    $('.picture-overlay-handle').on "click", (e) =>
       @dialog.toggleClass('hide-form')
       false
     @$previous = $('.previous-picture')
@@ -44,7 +42,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">
-      <i class="icon fas fa-times fa-fw"></i>
+      <i class="icon ri-close-line ri-fw"></i>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

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

@@ -1,57 +0,0 @@
-# Initialize all onload scripts at once.
-#
-# Called at jQuery ready event and Turbo page change event.
-#
-Alchemy.Initializer = ->
-
-  # We obviously have javascript enabled.
-  $('html').removeClass('no-js')
-
-  # Initialize the GUI.
-  Alchemy.GUI.init()
-
-  # Fade all growl notifications.
-  if $('#flash_notices').length > 0
-    Alchemy.Growler.fade()
-
-  # Add observer for please wait overlay.
-  $('.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})
-
-  # Locale select handler
-  $('select#change_locale').on 'change', (e) ->
-    url = window.location.pathname
-    delimiter = if url.match(/\?/) then '&' else '?'
-    Turbo.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 '?'
-    Turbo.visit "#{url}#{delimiter}site_id=#{$(this).val()}"
-
-  # Submit forms of selects with `data-autosubmit="true"`
-  $('select[data-auto-submit="true"]').on 'change', (e) ->
-    $(this.form).submit()
-
-  # Attaches the image loader on all images
-  Alchemy.ImageLoader('#main_content')
-
-  # Override the filter of keymaster.js so we can blur the fields on esc key.
-  key.filter = (event) ->
-    tagName = (event.target || event.srcElement).tagName
-    key.isPressed('esc') || !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA')
-
-$(document).on 'turbo:load', ->
-  Alchemy.Initializer()
-  return
-
-$(document).on 'turbo:before-fetch-request', ->
-  # Ensure that all tinymce editors get removed before parsing a new page
-  Alchemy.Tinymce.removeIntersectionObserver()
-  Alchemy.Tinymce.removeFrom $('.has_tinymce')
-  return

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

@@ -4,13 +4,6 @@
 class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   constructor: (@link_object) ->
-    if @link_object.dataset
-      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 =
@@ -40,11 +33,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     @initPageSelect()
     return
 
-  # Attaches click events to several buttons in the link dialog.
+  # Attaches click events to forms in the link dialog.
   attachEvents: ->
-    # The ok buttons
-    $('.create-link.button', @dialog_body).click (e) =>
-      @link_type = $(e.target).data('link-type')
+    $('[data-link-form-type]', @dialog_body).on "submit", (e) =>
+      e.preventDefault()
+      @link_type = e.target.dataset.linkFormType
       url = $("##{@link_type}_link").val()
       if @link_type == 'internal' && @$element_anchor.val() != ''
         url += "##{@$element_anchor.val()}"
@@ -136,11 +129,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Sets the link either in TinyMCE or on an Ingredient.
   setLink: (url, title, target) ->
-    Alchemy.setElementDirty(@$link_object.closest('.element-editor'))
     if @link_object.editor
       @setTinyMCELink(url, title, target)
     else
-      @setLinkFields(url, title, target)
+      @link_object.setLink(url, title, target, @link_type)
+    return
 
   # Sets a link in TinyMCE editor.
   setTinyMCELink: (url, title, target) ->
@@ -154,23 +147,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     editor.selection.collapse()
     true
 
-  # Sets a link on an Ingredient (e.g. Picture).
-  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: ->
     # Creating an temporary anchor node if we are linking an Picture Ingredient.
-    if (@link_object.nodeType)
-      @$link = @createTempLink()
+    if (@link_object.getAttribute("is") == "alchemy-link-button")
+      @$link = $(@createTempLink())
     # Restoring the bookmarked selection inside the TinyMCE of an Richtext.
     else if (@link_object.node.nodeName == 'A')
       @$link = $(@link_object.node)
@@ -183,27 +164,27 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     # Checking of what kind the link is (internal, external or file).
     if @$link.hasClass('external')
       # Handles an external link.
-      tab = $('#overlay_tab_external_link')
+      tab = 'overlay_tab_external_link'
       @$external_link.val(@$link.attr('href'))
     else if @$link.hasClass('file')
       # Handles a file link.
-      tab = $('#overlay_tab_file_link')
+      tab = 'overlay_tab_file_link'
       @$file_link.select2('val', @$link[0].pathname + @$link[0].search)
     else if @$link.attr('href').match(/^#/)
       # Handles an anchor link.
-      tab = $('#overlay_tab_anchor_link')
+      tab = 'overlay_tab_anchor_link'
       @$anchor_link.select2('val', @$link.attr('href'))
     else if @$link.hasClass('internal')
       # Handles an internal link.
-      tab = $('#overlay_tab_internal_link')
+      tab = 'overlay_tab_internal_link'
       @initInternalLinkTab()
     else
       # Emit an event to allow extensions hook into the link overlay.
       @$overlay_tabs.trigger 'SelectLinkTab.Alchemy',
         link: @$link
     if tab
-      # activate the tab jquery ui 1.10 style o.O
-      @$overlay_tabs.tabs('option', 'active', $('#overlay_tabs > div').index(tab))
+      window.requestAnimationFrame =>
+        @$overlay_tabs.get(0).show(tab)
     return
 
   # Handles actions for internal link tab.
@@ -214,15 +195,15 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     # store the anchor
     @$element_anchor.val(url[1])
 
-  # Creates a temporay $('a') object that holds all values on it.
+  # Creates a temporay 'a' element that holds all values on it.
   createTempLink: ->
-    @$tmp_link = $('<a/>')
-    @$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
+    tmp_link = document.createElement("a")
+    tmp_link.setAttribute('href', @link_object.linkUrl)
+    tmp_link.setAttribute('title', @link_object.linkTitle)
+    tmp_link.setAttribute('data-link-target', @link_object.linkTarget)
+    tmp_link.setAttribute('target', if @link_object.target == 'blank' then '_blank' else "")
+    tmp_link.classList.add(@link_object.linkClass) if @link_object.linkClass != ''
+    tmp_link
 
   # Validates url for beginning with an protocol.
   validateURLFormat: (url) ->
@@ -246,25 +227,3 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     else
       @$anchor_link.html("<option>#{Alchemy.t('No anchors found')}</option>")
     return
-
-  # Public class methods
-
-  # Removes link from Ingredient.
-  @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.list_filter.js.coffee

@@ -19,10 +19,10 @@ class Alchemy.ListFilterHandler
     @filter_field.on 'keyup', (e) =>
       @clear.show()
       @_filter @filter_field.val()
-    @clear.click (e) =>
+    @clear.on "click", (e) =>
       e.preventDefault()
       @_clear()
-    @filter_field.focus ->
+    @filter_field.on "focus", ->
       key.setScope('list_filter')
     key 'esc', 'list_filter', =>
       @_clear()

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

@@ -48,7 +48,7 @@ Alchemy.initAlchemyPreviewMode = ->
 
       # Mark element in preview frame as selected and scrolls to it.
       selectElement: (element) ->
-        @blurElements()
+        @blurElements(element)
         element.classList.add('selected')
         Object.assign element.style, @getStyle('selected')
         element.scrollIntoView
@@ -57,10 +57,11 @@ Alchemy.initAlchemyPreviewMode = ->
         return
 
       # Blur all elements in preview frame.
-      blurElements: ->
+      blurElements: (selectedElement) ->
         @elements.forEach (element) =>
-          element.classList.remove('selected')
-          Object.assign element.style, @getStyle('reset')
+          if element != selectedElement
+            element.classList.remove('selected')
+            Object.assign element.style, @getStyle('reset')
           return
         return
 

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

@@ -10,7 +10,7 @@ Alchemy.PreviewWindow =
     $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{@previewUrl}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
     $reload = $('#reload_preview_button')
     @_showSpinner()
-    $iframe.load =>
+    $iframe.on "load", =>
       @_hideSpinner()
     $('body').append($iframe)
     @currentWindow = $iframe
@@ -31,7 +31,7 @@ Alchemy.PreviewWindow =
     @_showSpinner()
     # We need to be sure that no load event is binded on the preview frame.
     $iframe.off('load')
-    $iframe.load (e) =>
+    $iframe.on "load", (e) =>
       @_hideSpinner()
       if callback
         callback.call(e, $iframe)
@@ -49,13 +49,13 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<i class="icon fas fa-redo fa-fw"></i>')
+    @reload.html('<i class="icon ri-refresh-line ri-fw"></i>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')
     key 'alt+r', =>
       @refresh()
-    $reload.click (e) =>
+    $reload.on "click", (e) =>
       e.preventDefault()
       @refresh()
 
@@ -71,7 +71,7 @@ Alchemy.PreviewWindow =
       null
 
   _bindSelect: ->
-    $(@select).change (e) =>
+    $(@select).on "change", (e) =>
       @previewUrl = e.target.value
       option = e.target.querySelector("option[value='#{@previewUrl}']")
       window.localStorage.setItem("alchemyPreview", option.text)

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

@@ -1,5 +1,3 @@
-//= require alchemy/templates/spinner
 //= require alchemy/templates/page
 //= require alchemy/templates/node_folder
-//= require alchemy/templates/node
 //= require alchemy/templates/page_folder