https://ford.ba/assets/controllers/extra_info_controller-babd66ae4…370718c3ba97ce92b31a8a79ea012bba927e78ce.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="extra-info"
4export default class extends Controller {
5  static values = {
6    id: String,
7    exclusions: Array,
8    selectable: Array
9  }
10  connect() {
11    let _this = this;
12    let checkbox = document.getElementById(`${this.idValue}`);
13    _this.checkSelectable(this.idValue);
14    _this.checkExclusions(true);
15    checkbox.addEventListener('change', function(){
16      _this.checkSelectable(_this.idValue);
17      _this.triggerCheckAllSelectable();
18      _this.checkExclusions();
19    });
20
21
22  }
23
24  triggerCheckAllSelectable() {
25    let _this = this;
26    document.querySelectorAll('.c-car-model-color__checkbox').forEach((item) => {
27      _this.checkSelectable(item.getAttribute('id'));
28    })
29  }
30
31  checkSelectable(id) {
32    let _this = this;
33    let checkbox = document.getElementById(`${id}`);
34
35    let selectableValues = checkbox.getAttribute('data-extra-info-selectable-value').split(' ').filter((item) => { return item.length > 0});
36    console.log(selectableValues);
37    let selected = [];
38    selectableValues.forEach((item) => {
39      console.log(item);
40      if(document.getElementById(`${item}`) && document.getElementById(`${item}`).checked) {
41        selected.push(true);
42      }
43    });
44
45    if(selectableValues.length > 0) {
46      console.log(id);
47      console.log(selected);
48      if(selected.length > 0 && selected.indexOf(true) > -1) {
49        document.getElementById(`${id}`).disabled = false;
50      } else {
51        document.getElementById(`${id}`).disabled = true;
52        document.getElementById(`${id}`).checked = false;
53      }
54    }
55  }
56
57  checkExclusions(first_time) {
58    let _this = this;
59    let checkbox = document.getElementById(`${this.idValue}`);
60    //Case when the item is an extra
61    if(checkbox) {
62      if(checkbox.checked) {
63        document.querySelectorAll(`.extra-${this.idValue}-image`).forEach((item) => {
64          item.classList.remove('hidden');
65        });
66        _this.exclusionsValue.forEach((item) => {
67          if(document.getElementById(`${item}`)) {
68            document.getElementById(`${item}`).disabled = true;
69            document.getElementById(`${item}`).checked = false;
70          }
71        });
72      } else {
73        if(!first_time) {
74          document.querySelectorAll(`.extra-${this.idValue}-image`).forEach((item) => {
75            item.classList.add('hidden');
76          });
77          _this.exclusionsValue.forEach((item) => {
78            if(document.getElementById(`${item}`)) {
79              document.getElementById(`${item}`).disabled = false;
80            }
81          });
82        }
83      }
84    } else {
85    }
86
87    if(!first_time) {
88      if(document.getElementById('your-vehicle-form')) {
89        document.getElementById('your-vehicle-form').requestSubmit();
90      }
91    }
92  }
93
94  openModal(event) {
95    event.preventDefault();
96    document.getElementById(`${this.idValue}_modal`).classList.remove('hidden');
97  }
98};