@radioactive-labs/plutonium 0.1.15 → 0.1.16

package/src/js/controllers/easymde_controller.js

@@ -6,13 +6,13 @@ import { marked } from 'marked';
 export default class extends Controller {
   connect() {
     console.log(`easymde connected: ${this.element}`)
-    self.easyMDE = new EasyMDE(this.#buildOptions())
+    this.easyMDE = new EasyMDE(this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->easymde#reconnect")
   }
 
   disconnect() {
-    self.easyMDE.toTextArea()
-    self.easyMDE = null
+    this.easyMDE.toTextArea()
+    this.easyMDE = null
   }
 
   reconnect() {

package/src/js/controllers/flatpickr_controller.js

@@ -4,13 +4,13 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   connect() {
     console.log(`flatpickr connected: ${this.element}`)
-    self.picker = new flatpickr(this.element, this.#buildOptions())
+    this.picker = new flatpickr(this.element, this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->flatpickr#reconnect")
   }
 
   disconnect() {
-    self.picker.destroy()
-    self.picker = null
+    this.picker.destroy()
+    this.picker = null
   }
 
   reconnect() {

package/src/js/controllers/intl_tel_input_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="intl-tel-input"
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    console.log(`intl-tel-input connected: ${this.element}`)
+  }
+
+  disconnect() {
+    this.inputTargetDisconnected()
+  }
+
+  inputTargetConnected() {
+    if (!this.hasInputTarget) return;
+
+    this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions())
+    this.inputTarget.setAttribute("data-action", "turbo:morph-element->intl-tel-input#reconnect")
+  }
+
+  inputTargetDisconnected() {
+    if (this.iti) this.iti.destroy()
+    this.iti = null
+  }
+
+  reconnect() {
+    this.inputTargetDisconnected()
+    this.inputTargetConnected()
+  }
+
+  #buildOptions() {
+    return {
+      strictMode: true,
+      hiddenInput: () => ({ phone: this.inputTarget.attributes.name.value }),
+      loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/utils.js",
+    }
+  }
+}

package/src/js/controllers/register_controllers.js

@@ -24,6 +24,7 @@ import ColorModeController from "./color_mode_controller.js"
 import EasyMDEController from "./easymde_controller.js"
 import SlimSelectController from "./slim_select_controller.js"
 import FlatpickrController from "./flatpickr_controller.js"
+import IntlTelInputController from "./intl_tel_input_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -52,4 +53,5 @@ export default function (application) {
   application.register("easymde", EasyMDEController)
   application.register("slim-select", SlimSelectController)
   application.register("flatpickr", FlatpickrController)
+  application.register("intl-tel-input", IntlTelInputController)
 }

package/src/js/controllers/slim_select_controller.js

@@ -4,15 +4,15 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   connect() {
     console.log(`slim-select connected: ${this.element}`)
-    self.slimSelect = new SlimSelect({
+    this.slimSelect = new SlimSelect({
       select: this.element
     })
     this.element.setAttribute("data-action", "turbo:morph-element->slim-select#reconnect")
   }
 
   disconnect() {
-    self.slimSelect.destroy()
-    self.slimSelect = null
+    this.slimSelect.destroy()
+    this.slimSelect = null
   }
 
   reconnect() {