Migrate character counter to a web component

migrate the data attribute approach to a web component. I does not need a listener and it should be a pretty straight forward way of migrating small peaces of Javascript.

app/javascript/alchemy_admin.js

@@ -16,6 +16,9 @@ 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/char_counter"
+
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {
   window.Alchemy = {}

app/javascript/alchemy_admin/char_counter.js

@@ -1,22 +1,37 @@
-export default function CharCounter(field) {
-  const $field = $(field)
-  const $display = $('<small class="alchemy-char-counter"/>')
-  $field.after($display)
+/**
+ * Show the character counter below input fields and textareas
+ */
+class CharCounter extends HTMLElement {
+  constructor() {
+    super()
 
-  const maxChar = $field.data("alchemy-char-counter")
-  const translation = Alchemy.t("allowed_chars", maxChar)
+    this.maxChar = this.dataset.count
+    this.translation = Alchemy.t("allowed_chars", this.maxChar)
+    this.formField = this.getFormField()
 
-  function countChars() {
-    const charLength = $field.val().length
+    if (this.formField) {
+      this.createDisplayElement()
+      this.countCharacters()
+      this.formField.addEventListener("keyup", () => this.countCharacters()) // add arrow function to get a implicit this - binding
+    }
+  }
 
-    $display.removeClass("too-long")
-    $display.text(`${charLength} ${translation}`)
+  getFormField() {
+    const formFields = this.querySelectorAll("input, textarea")
+    return formFields.length > 0 ? formFields[0] : undefined
+  }
 
-    if (charLength > maxChar) {
-      $display.addClass("too-long")
-    }
+  createDisplayElement() {
+    this.display = document.createElement("small")
+    this.display.className = "alchemy-char-counter"
+    this.formField.after(this.display)
   }
 
-  countChars()
-  $field.keyup(countChars)
+  countCharacters() {
+    const charLength = this.formField.value.length
+    this.display.textContent = `${charLength} ${this.translation}`
+    this.display.classList.toggle("too-long", charLength > this.maxChar)
+  }
 }
+
+customElements.define("alchemy-char-counter", CharCounter)

app/javascript/alchemy_admin/gui.js

@@ -1,5 +1,4 @@
 import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
-import CharCounter from "alchemy_admin/char_counter"
 
 function init(scope) {
   Alchemy.SelectBox(scope)
@@ -12,9 +11,6 @@ function init(scope) {
   Alchemy.Hotkeys(scope)
   Alchemy.ListFilter(scope)
   TagsAutocomplete(scope)
-  $("[data-alchemy-char-counter]", scope).each(function () {
-    CharCounter(this)
-  })
 }
 
 function initElement($el) {

app/views/alchemy/admin/pages/_form.html.erb

@@ -16,8 +16,9 @@
 
   <%= f.input :name, autofocus: true %>
   <%= f.input :urlname, as: 'string', input_html: {value: @page.slug}, label: Alchemy::Page.human_attribute_name(:slug) %>
-  <%= f.input :title,
-    input_html: {'data-alchemy-char-counter' => 60} %>
+  <alchemy-char-counter data-count="60">
+    <%= f.input :title %>
+  </alchemy-char-counter>
 
   <% if Alchemy.enable_searchable %>
     <div class="input check_boxes">
@@ -36,9 +37,10 @@
     </div>
   </div>
 
-  <%= f.input :meta_description,
-    as: 'text',
-    input_html: {'data-alchemy-char-counter' => 160} %>
+  <alchemy-char-counter data-count="160">
+    <%= f.input :meta_description, as: 'text' %>
+  </alchemy-char-counter>
+
   <%= f.input :meta_keywords,
     as: 'text',
     hint: Alchemy.t('pages.update.comma_seperated') %>