From 5fbff2194ce0d770f49be9b0442709b105e75848 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Thu, 15 Dec 2022 09:34:58 +0100
Subject: [PATCH] Update ingredient icon on element update

---
 app/views/alchemy/admin/elements/update.js.erb  |  3 +++
 .../alchemy/admin/ingredients/update.js.erb     |  3 +--
 package/admin.js                                |  2 ++
 package/src/ingredient_anchor_link.js           | 17 +++++++++++++++++
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 package/src/ingredient_anchor_link.js

diff --git a/app/views/alchemy/admin/elements/update.js.erb b/app/views/alchemy/admin/elements/update.js.erb
index c1f1cf8322..f44af7365e 100644
--- a/app/views/alchemy/admin/elements/update.js.erb
+++ b/app/views/alchemy/admin/elements/update.js.erb
@@ -7,6 +7,9 @@
 
   $errors.hide();
   $el.trigger('SaveElement.Alchemy', {previewText: '<%= j sanitize(@element.preview_text) %>'});
+  <% @element.ingredients.select { |i| i.settings[:anchor] }.each do |ingredient| %>
+    Alchemy.IngredientAnchorLink.updateIcon(<%= ingredient.id %>, <%= ingredient.dom_id.present? %>);
+  <% end %>
   Alchemy.growl('<%= Alchemy.t(:element_saved) %>');
   Alchemy.PreviewWindow.refresh(function() {
     Alchemy.ElementEditors.focusElementPreview(<%= @element.id %>);
diff --git a/app/views/alchemy/admin/ingredients/update.js.erb b/app/views/alchemy/admin/ingredients/update.js.erb
index 42d50774e2..ef60ede109 100644
--- a/app/views/alchemy/admin/ingredients/update.js.erb
+++ b/app/views/alchemy/admin/ingredients/update.js.erb
@@ -1,8 +1,7 @@
 Alchemy.closeCurrentDialog(
 <% if @ingredient.settings[:anchor] %>
   function() {
-    const ingredientEditor = document.querySelector('[data-ingredient-id="<%= @ingredient.id %>"]');
-    ingredientEditor.querySelector('.edit-ingredient-anchor-link a').innerHTML = '<%= j render_icon(:bookmark, { style: @ingredient.dom_id.present? ? "solid" : "regular" }) %>';
+    Alchemy.IngredientAnchorLink.updateIcon(<%= @ingredient.id %>, <%= @ingredient.dom_id.present? %>);
   }
 <% end %>
 );
diff --git a/package/admin.js b/package/admin.js
index 2529e74c61..2898d4cee2 100644
--- a/package/admin.js
+++ b/package/admin.js
@@ -2,6 +2,7 @@ import translate from "./src/i18n"
 import translationData from "./src/translations"
 import NodeTree from "./src/node_tree"
 import fileEditors from "./src/file_editors"
+import IngredientAnchorLink from "./src/ingredient_anchor_link"
 import pictureEditors from "./src/picture_editors"
 import ImageLoader from "./src/image_loader"
 import ImageCropper from "./src/image_cropper"
@@ -24,6 +25,7 @@ Object.assign(Alchemy, {
   pictureEditors,
   ImageLoader: ImageLoader.init,
   ImageCropper,
+  IngredientAnchorLink,
   Datepicker,
   Sitemap,
   PagePublicationFields
diff --git a/package/src/ingredient_anchor_link.js b/package/src/ingredient_anchor_link.js
new file mode 100644
index 0000000000..3af84e1f92
--- /dev/null
+++ b/package/src/ingredient_anchor_link.js
@@ -0,0 +1,17 @@
+export default class IngredientAnchorLink {
+  static updateIcon(ingredientId, active = false) {
+    const ingredientEditor = document.querySelector(
+      `[data-ingredient-id="${ingredientId}"]`
+    )
+    if (ingredientEditor) {
+      const icon = ingredientEditor.querySelector(
+        ".edit-ingredient-anchor-link > a > .icon"
+      )
+      if (icon) {
+        active
+          ? icon.classList.replace("far", "fas")
+          : icon.classList.replace("fas", "far")
+      }
+    }
+  }
+}