Add Element Editor Custom Element

.github/workflows/test.yml

@@ -122,4 +122,4 @@ jobs:
       - name: Install yarn
         run: yarn install
       - name: Run jest
-        run: yarn jest
+        run: yarn jest --verbose

app/assets/javascripts/alchemy/admin.js

@@ -13,7 +13,6 @@
 //= require alchemy/alchemy.dialog
 //= require alchemy/alchemy.confirm_dialog
 //= require alchemy/alchemy.dragndrop
-//= require alchemy/alchemy.element_editors
 //= require alchemy/alchemy.elements_window
 //= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.growler

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

@@ -3,6 +3,8 @@ 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" />')
+  if options.align
+    $btn.addClass(options.align)
   if options.buttonId
     $btn.attr(id: options.buttonId)
   $lnk = $("<a title='#{options.title}' class='icon_button' href='#' />")
@@ -14,7 +16,7 @@ Alchemy.ToolbarButton = (options) ->
     return
   $lnk.append "<i class='icon fas fa-#{options.iconClass} fa-fw' />"
   $btn.append $lnk
-  $btn.append "<br><label>#{options.label}</label>"
+  $btn.append "<br><label class='#{options.align || "left"}-aligned'>#{options.label}</label>"
   $btn
 
 Alchemy.ElementsWindow =
@@ -33,25 +35,45 @@ Alchemy.ElementsWindow =
     @button.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: "compress-alt"
+      align: "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)
       if @callback
         @callback.call()
     .fail (xhr, status, error) =>

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

@@ -136,7 +136,8 @@ 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'))
+    element_editor = @$link_object[0].closest('alchemy-element-editor')
+    element_editor.setDirty()
     if @link_object.editor
       @setTinyMCELink(url, title, target)
     else
@@ -262,7 +263,8 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     link_class_field.value = ""
     link_target_field.value = ""
     if link.classList.contains('linked')
-      Alchemy.setElementDirty link.closest('.element-editor')
+      element_editor = link.closest('alchemy-element-editor')
+      element_editor.setDirty()
       link.classList.replace('linked', 'disabled')
       link.setAttribute('tabindex', '-1')
       link.blur()

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