Rename Anchor Select into Dom Id Select

It was previously a dom id - select and technically it is search for dom nodes with ids. It also adds an enabled and disabled state on the dom id - select

app/components/alchemy/admin/link_dialog/anchor_tab.rb

@@ -14,7 +14,7 @@ def self.panel_name
 
         def fields
           [
-            anchor_select,
+            dom_id_select,
             title_input
           ]
         end
@@ -25,13 +25,13 @@ def message
 
         private
 
-        def anchor_select
+        def dom_id_select
           label = label_tag("anchor_link", Alchemy.t(:anchor), class: "control-label")
           options = [[Alchemy.t("Please choose"), ""]]
           options += [[@url, @url]] if is_selected? && @url
 
           select = select_tag(:anchor_link, options_for_select(options, @url), is: "alchemy-select")
-          select_component = content_tag("alchemy-anchor-select", select, {type: "preview"})
+          select_component = content_tag("alchemy-dom-id-select", select, {type: "preview"})
 
           content_tag("div", label + select_component, class: "input select")
         end

app/components/alchemy/admin/link_dialog/internal_tab.rb

@@ -52,11 +52,11 @@ def page_select
         def dom_id_select
           fragment = uri.fragment if uri
           label = label_tag("element_anchor", Alchemy.t(:anchor), class: "control-label")
-          options = [[Alchemy.t("Please choose"), ""]]
+          options = [[page.nil? ? Alchemy.t("Select a page first") : Alchemy.t("None"), ""]]
           options += [["##{fragment}", fragment]] if is_selected? && fragment
 
-          select = select_tag("element_anchor", options_for_select(options, fragment), is: "alchemy-select")
-          select_component = content_tag("alchemy-anchor-select", select, {page: page&.id})
+          select = select_tag("element_anchor", options_for_select(options, fragment), is: "alchemy-select", disabled: page.nil?)
+          select_component = content_tag("alchemy-dom-id-select", select, {page: page&.id})
 
           content_tag("div", label + select_component, class: "input select")
         end

app/javascript/alchemy_admin/components/anchor_select.js → app/javascript/alchemy_admin/components/dom_id_select.js

@@ -1,33 +1,36 @@
 import { get } from "alchemy_admin/utils/ajax"
+import { translate } from "alchemy_admin/i18n"
 
-class AnchorSelect extends HTMLElement {
+class DomIdSelect extends HTMLElement {
   #pageId = undefined
 
   connectedCallback() {
     // get the anchors from the API or from the preview window
     if (this.type === "preview") {
-      this.#fetchAnchorsFromPreview()
+      this.#fetchDomIdsFromPreview()
     } else {
       this.page = this.getAttribute("page")
     }
   }
 
-  #fetchAnchors() {
+  #fetchDomIds() {
     get(Alchemy.routes.api_ingredients_path, { page_id: this.#pageId }).then(
       (result) => {
+        this.enable()
         this.selectElement.data = result.data.ingredients
           .filter((ingredient) => ingredient.data?.dom_id)
           .map((ingredient) => this.#dataItem(ingredient.data.dom_id))
       }
     )
   }
 
-  #fetchAnchorsFromPreview() {
+  #fetchDomIdsFromPreview() {
     // wait a tick to let the browser initialize the inner select component
     setTimeout(() => {
       const frame = document.getElementById("alchemy_preview_window")
       const elements = frame.contentDocument?.querySelectorAll("[id]") || []
       if (elements.length > 0) {
+        this.enable()
         this.selectElement.data = Array.from(elements).map((element) => {
           return this.#dataItem(element.id)
         })
@@ -37,14 +40,32 @@ class AnchorSelect extends HTMLElement {
 
   #dataItem(hash) {
     return {
-      id: hash,
+      id: `#${hash}`,
       text: `#${hash}`
     }
   }
 
   set page(pageId) {
     this.#pageId = pageId
-    this.#fetchAnchors()
+    if (pageId !== undefined) {
+      this.#fetchDomIds()
+    } else {
+      this.disable()
+      this.selectElement.data = []
+    }
+  }
+
+  enable() {
+    this.selectElement.removeAttribute("disabled")
+    this.selectElement.options[0].text =
+      this.selectElement.options.length > 0
+        ? translate("None")
+        : translate("No anchors found")
+  }
+
+  disable() {
+    this.selectElement.setAttribute("disabled", "disabled")
+    this.selectElement.options[0].text = translate("Select a page first")
   }
 
   get selectElement() {
@@ -56,4 +77,4 @@ class AnchorSelect extends HTMLElement {
   }
 }
 
-customElements.define("alchemy-anchor-select", AnchorSelect)
+customElements.define("alchemy-dom-id-select", DomIdSelect)

app/javascript/alchemy_admin/components/index.js

@@ -1,9 +1,9 @@
-import "alchemy_admin/components/anchor_select"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
 import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
+import "alchemy_admin/components/dom_id_select"
 import "alchemy_admin/components/element_editor"
 import "alchemy_admin/components/elements_window"
 import "alchemy_admin/components/message"

app/javascript/alchemy_admin/components/select.js

@@ -13,15 +13,17 @@ class Select extends HTMLSelectElement {
   set data(data) {
     let selected = this.value
     // remove all previous entries except the default please select entry which has no value or is selected
-    const emptyOption =
-      this.options[0]?.value === ""
-        ? this.options[0].cloneNode(true)
-        : undefined
+    const emptyOptions = []
+    for (let option of this.options) {
+      if (option.value === "") {
+        emptyOptions.push(option.cloneNode(true))
+      }
+    }
 
+    // reset the old options and insert the placeholder(s) first
     this.innerHTML = ""
-    if (emptyOption) {
-      this.add(emptyOption)
-    }
+    emptyOptions.forEach((option) => this.add(option))
+
     // add the new options to the select
     data.forEach((item) => {
       const option = new Option(item.text, item.id, false, item.id === selected)

app/javascript/alchemy_admin/link_dialog.js

@@ -73,12 +73,13 @@ export class LinkDialog extends Alchemy.Dialog {
    * @param page
    */
   #updatePage(page = null) {
-    document.getElementById("internal_link").value =
-      page != null ? page.url_path : undefined
+    const internalLink = document.getElementById("internal_link")
+    const domIdSelect = document.querySelector(
+      '[data-link-form-type="internal"] alchemy-dom-id-select'
+    )
 
-    document.querySelector(
-      '[data-link-form-type="internal"] alchemy-anchor-select'
-    ).page = page != null ? page.id : undefined
+    internalLink.value = page != null ? page.url_path : undefined
+    domIdSelect.page = page != null ? page.id : undefined
   }
 
   /**

app/javascript/alchemy_admin/locales/en.js

@@ -21,6 +21,9 @@ export const en = {
   "Uploaded bytes exceed file size": "Uploaded bytes exceed file size",
   "Abort upload": "Abort upload",
   "Cancel all uploads": "Cancel all uploads",
+  None: "None",
+  "No anchors found": "No anchors found",
+  "Select a page first": "Select a page first",
   Close: "Close",
   formats: {
     datetime: "Y-m-d H:i",