Merge pull request #2554 from sascha-karnatz/update_javascript/migrat…

…e-datepicker-to-web-component Migrate datepicker into a web component
AlchemyCMS · Aug 25, 2023 · 7f0a856 · 7f0a856
2 parents 584edef + 6e4af1e
commit 7f0a856
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/app/helpers/alchemy/admin/base_helper.rb b/app/helpers/alchemy/admin/base_helper.rb
@@ -323,7 +323,7 @@ def alchemy_datepicker(object, method, html_options = {})
         value = date&.iso8601
 
         text_field object.class.name.demodulize.underscore.to_sym,
-          method.to_sym, {:type => "text", :class => type, "data-datepicker-type" => type, :value => value}.merge(html_options)
+          method.to_sym, {:type => "text", :class => type, :is => "alchemy-datepicker", "data-datepicker-type" => type, :value => value}.merge(html_options)
       end
 
       # Render a hint icon with tooltip for given object.

diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
@@ -11,13 +11,13 @@ import pictureEditors from "alchemy_admin/picture_editors"
 import ImageLoader from "alchemy_admin/image_loader"
 import ImageCropper from "alchemy_admin/image_cropper"
 import Initializer from "alchemy_admin/initializer"
-import Datepicker from "alchemy_admin/datepicker"
 import Sitemap from "alchemy_admin/sitemap"
 import Tinymce from "alchemy_admin/tinymce"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 
 // Web Components
 import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/datepicker"
 
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {
@@ -37,7 +37,6 @@ Object.assign(Alchemy, {
   ImageCropper,
   Initializer,
   IngredientAnchorLink,
-  Datepicker,
   Sitemap,
   Tinymce,
   PagePublicationFields

diff --git a/app/javascript/alchemy_admin/datepicker.js → ...pt/alchemy_admin/components/datepicker.js b/app/javascript/alchemy_admin/datepicker.js → ...pt/alchemy_admin/components/datepicker.js
@@ -1,17 +1,10 @@
 import flatpickr from "flatpickr"
 
-export default function Datepicker(scope = document) {
-  if (scope === "") {
-    scope = document
-  } else if (scope instanceof String) {
-    scope = document.querySelectorAll(scope)
-  }
-
-  const datepickerInputs = scope.querySelectorAll("input[data-datepicker-type]")
+class Datepicker extends HTMLInputElement {
+  constructor() {
+    super()
 
-  // Initializes the datepickers
-  datepickerInputs.forEach((input) => {
-    const type = input.dataset.datepickerType
+    const type = this.dataset.datepickerType
     const options = {
       // alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
       locale: Alchemy.locale.slice(0, 2),
@@ -26,6 +19,9 @@ export default function Datepicker(scope = document) {
         Alchemy.setElementDirty(instance.element.closest(".element-editor"))
       }
     }
-    flatpickr(input, options)
-  })
+
+    flatpickr(this, options)
+  }
 }
+
+customElements.define("alchemy-datepicker", Datepicker, { extends: "input" })
diff --git a/app/javascript/alchemy_admin/gui.js b/app/javascript/alchemy_admin/gui.js
@@ -2,7 +2,6 @@ import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
 
 function init(scope) {
   Alchemy.SelectBox(scope)
-  Alchemy.Datepicker(scope && scope.selector)
   Alchemy.Tooltips(scope)
   Alchemy.Buttons.observe(scope)
   if (!scope) {