https://kluvos.com/assets/controllers/forms_controller-04e4697de97…3bad30d0a5ca417331d9ca2a63d49318e471d773.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="forms"
4export default class extends Controller {
5
6  static targets = [ 'property', 'platform' ]
7
8  connect() {
9    if (this.hasPlatformTarget) {
10      this.updateForm();
11      this.addEventListenerToPlatformSelect();
12    }
13
14    // Pre-select Shopify option and trigger the appropriate updates
15    this.preselectPlatform();
16    this.addEventListenerToRadioButtons();
17  }
18
19  preselectPlatform() {
20    const selectedRadio = this.element.querySelector('input[name="property[type]"]:checked') || document.querySelector('input[name="property[type]"]:checked')
21    if (!selectedRadio) return
22    this.handlePlatformSelection(selectedRadio.value); // Pre-select Shopify and apply border/style
23  }
24
25  addEventListenerToPlatformSelect() {
26    let select = this.platformTarget.querySelector("select");
27    select.addEventListener("change", () => {
28      this.updateForm();
29    });
30  }
31
32  addEventListenerToRadioButtons() {
33    // Add event listeners to radio buttons for platform selection
34    let radioButtons = this.element.querySelectorAll('input[name="property[type]"]');
35    if (radioButtons.length === 0) {
36      radioButtons = document.querySelectorAll('input[name="property[type]"]')
37    }
38    radioButtons.forEach((radio) => {
39      radio.addEventListener("change", () => {
40        this.handlePlatformSelection(radio.value);
41      });
42    });
43  }
44
45  handlePlatformSelection(selectedPlatform) {
46    const shopifyInstructions = document.getElementById('shopify-instru

46ctions');
47    const woocommerceForm = document.getElementById('woocommerce-form');
48
49    if (!shopifyInstructions || !woocommerceForm) return
50
51    if (selectedPlatform === "Shopify") {
52      // Hide WooCommerce form
53      this.fadeOut(woocommerceForm);
54      // Show Shopify instructions
55      this.fadeIn(shopifyInstructions);
56    } else if (selectedPlatform === "Woocommerce") {
57      // Hide Shopify instructions
58      this.fadeOut(shopifyInstructions);
59      // Show WooCommerce form
60      this.fadeIn(woocommerceForm);
61    }
62
63    // Highlight the selected button (update styling)
64    const buttons = this.element.querySelectorAll('.platform-btn');
65    const globalButtons = document.querySelectorAll('.platform-btn');
66    const buttonCollection = buttons.length ? buttons : globalButtons
67    buttonCollection.forEach(button => {
68      button.style.border = '2px solid transparent';
69    });
70
71    const selectedInput = (this.element.querySelector(`input[value="${selectedPlatform}"]`) || document.querySelector(`input[value="${selectedPlatform}"]`))
72    if (selectedInput) {
73      selectedInput.closest('.platform-btn').style.border = '2px solid #6DBF87';
74    }
75  }
76
77  fadeIn(element) {
78    element.classList.add('show'); // Add 'show' class to trigger the opacity transition
79    element.style.display = 'block'; // Ensure the element is displayed
80  }
81
82  fadeOut(element) {
83    element.classList.remove('show'); // Remove 'show' class to hide it
84    setTimeout(() => {
85      element.style.display = 'none'; // After transition, set display to 'none'
86    }, 500); // Match the transition time (0.5s)
87  }
88
89  updateForm() {
90    this.updateShopifyUrlField();
91    this.updatePlatformImage();
92  }
93
94  updateShopifyUrlField() {
95    let field = this.element.querySelector("[data-shopify-url]") || document.querySelector("[data-shopify-url]");
96    let selectEl = this.element.querySelector(".platform-select") || document.querySelector(".platform-select");
97    if (!field || !selectEl) { // No shopify-url field since new @property.
98      return;
99    }
100    if (selectEl.value == "Woocommerce") {
101      field.style.display = "none";
102      return;
103    }
104    field.style.display = "block";
105  }
106
107  updatePlatformImage() {
108    let selectEl = this.element.querySelector(".platform-select") || document.querySelector(".platform-select");
109    if (!selectEl) return
110    let images = this.element.querySelectorAll("[data-form-image]");
111    if (!images.length) {
112      images = document.querySelectorAll("[data-form-image]")
113    }
114    images.forEach(image => {
115      if (image.dataset.value === selectEl.value) {
116        image.style.display = "flex";
117      } else {
118        image.style.display = "none";
119      }
120    });
121  }
122};