| 1 |
"use strict"; |
| 2 |
(function ($) { |
| 3 |
$(window).on('elementor:init', () => { |
| 4 |
|
| 5 |
elementor.hooks.addAction('panel/open_editor/widget/king-addons-form-builder', function (panel, model, view) { |
| 6 |
var $parent = panel.$el.find('#elementor-panel'); |
| 7 |
var $element = panel.$el.find('.elementor-repeater-fields'); |
| 8 |
|
| 9 |
var stepObserver = new MutationObserver(function (mutations) { |
| 10 |
mutations.forEach((mutation) => { |
| 11 |
// console.log('steps mutation', mutation); |
| 12 |
if (mutation.type === 'childList') { |
| 13 |
mutation.addedNodes.forEach((node) => { |
| 14 |
if (node.nodeType === Node.ELEMENT_NODE) { |
| 15 |
// Find the child element with the specific class within the node |
| 16 |
const repeaterFields = node.querySelectorAll('.elementor-repeater-fields'); |
| 17 |
const childElement = node.querySelectorAll('.elementor-repeater-row-tools'); |
| 18 |
const childElement2 = node.querySelectorAll('.elementor-repeater-row-controls'); |
| 19 |
|
| 20 |
if (childElement2) { |
| 21 |
let selectElement = []; |
| 22 |
|
| 23 |
if (selectElement.length == 0) { |
| 24 |
childElement2.forEach(function (item) { |
| 25 |
selectElement.push(item.querySelector('select')); |
| 26 |
}); |
| 27 |
} |
| 28 |
|
| 29 |
// If the child element exists and the select value is 'step', add the certain class to it |
| 30 |
if (childElement && selectElement.length > 0) { |
| 31 |
childElement.forEach(function (item, i) { |
| 32 |
if (selectElement[i] && selectElement[i].value == 'king-addons-fb-step') { |
| 33 |
item.classList.add('king-addons-fb-step-editor-bg'); |
| 34 |
} |
| 35 |
}); |
| 36 |
} |
| 37 |
} |
| 38 |
} |
| 39 |
}); |
| 40 |
} |
| 41 |
}); |
| 42 |
}); |
| 43 |
|
| 44 |
stepObserver.observe($('#elementor-panel')[0], { |
| 45 |
childList: true, |
| 46 |
subtree: true, |
| 47 |
}); |
| 48 |
|
| 49 |
changeStepBackground(); |
| 50 |
|
| 51 |
elementor.channels.editor.on('section:activated', function (sectionName, editor) { |
| 52 |
// model.get('settings').attributes.form_fields.models.forEach(function(thisModel, i) { |
| 53 |
// if ( thisModel.attributes.field_type == 'step' ) { |
| 54 |
// $('.elementor-repeater-fields').eq(i).find('.elementor-repeater-row-tools').addClass('king-addons-fb-step-editor-bg'); |
| 55 |
// } |
| 56 |
// }); |
| 57 |
updateDynamicOptions(view); |
| 58 |
}); |
| 59 |
|
| 60 |
function changeStepBackground() { |
| 61 |
|
| 62 |
$element.each(function () { |
| 63 |
if ($(this).find('select').val() == 'king-addons-fb-step') { |
| 64 |
$(this).find('.elementor-repeater-row-tools').addClass('king-addons-fb-step-editor-bg'); |
| 65 |
} |
| 66 |
}); |
| 67 |
|
| 68 |
$('#elementor-panel').off('change', 'select').on('change', 'select', function () { |
| 69 |
if ($(this).val() == 'king-addons-fb-step') { |
| 70 |
$(this).closest('.elementor-repeater-row-controls').prev('.elementor-repeater-row-tools').addClass('king-addons-fb-step-editor-bg'); |
| 71 |
} else if ($(this).closest('.elementor-repeater-row-controls').prev('.elementor-repeater-row-tools').hasClass('king-addons-fb-step-editor-bg')) { |
| 72 |
$(this).closest('.elementor-repeater-row-controls').prev('.elementor-repeater-row-tools').removeClass('king-addons-fb-step-editor-bg'); |
| 73 |
} |
| 74 |
}); |
| 75 |
} |
| 76 |
|
| 77 |
|
| 78 |
view.listenTo(view.model.get('settings').get('form_fields'), 'add change remove', function (e) { |
| 79 |
updateDynamicOptions(view); |
| 80 |
}); |
| 81 |
|
| 82 |
function updateDynamicOptions() { |
| 83 |
var formFieldsModel = view.model.get('settings').get('form_fields'); |
| 84 |
|
| 85 |
var emailField = view.model.get('settings').get('email_field'); |
| 86 |
var firstNameField = view.model.get('settings').get('first_name_field'); |
| 87 |
var lastNameField = view.model.get('settings').get('last_name_field'); |
| 88 |
var phoneField = view.model.get('settings').get('phone_field'); |
| 89 |
var birthdayField = view.model.get('settings').get('birthday_field'); |
| 90 |
var addressField = view.model.get('settings').get('address_field'); |
| 91 |
var countryField = view.model.get('settings').get('country_field'); |
| 92 |
var cityField = view.model.get('settings').get('city_field'); |
| 93 |
var stateField = view.model.get('settings').get('state_field'); |
| 94 |
var zipField = view.model.get('settings').get('zip_field'); |
| 95 |
|
| 96 |
var emailSelectControl = panel.$el.find('.elementor-control-email_field').find('select[data-setting="email_field"]'); |
| 97 |
var firstNameSelectControl = panel.$el.find('.elementor-control-first_name_field').find('select[data-setting="first_name_field"]'); |
| 98 |
var lastNameSelectControl = panel.$el.find('.elementor-control-last_name_field').find('select[data-setting="last_name_field"]'); |
| 99 |
var phoneSelectControl = panel.$el.find('.elementor-control-phone_field').find('select[data-setting="phone_field"]'); |
| 100 |
var birthdaySelectControl = panel.$el.find('.elementor-control-birthday_field').find('select[data-setting="birthday_field"]'); |
| 101 |
var addressSelectControl = panel.$el.find('.elementor-control-address_field').find('select[data-setting="address_field"]'); |
| 102 |
var countrySelectControl = panel.$el.find('.elementor-control-country_field').find('select[data-setting="country_field"]'); |
| 103 |
var citySelectControl = panel.$el.find('.elementor-control-city_field').find('select[data-setting="city_field"]'); |
| 104 |
var stateSelectControl = panel.$el.find('.elementor-control-state_field').find('select[data-setting="state_field"]'); |
| 105 |
var zipSelectControl = panel.$el.find('.elementor-control-zip_field').find('select[data-setting="zip_field"]'); |
| 106 |
|
| 107 |
var selectControls = [emailSelectControl, firstNameSelectControl, lastNameSelectControl, phoneSelectControl, birthdaySelectControl, addressSelectControl, countrySelectControl, citySelectControl, stateSelectControl, zipSelectControl]; |
| 108 |
var fieldValues = [emailField, firstNameField, lastNameField, phoneField, birthdayField, addressField, countryField, cityField, stateField, zipField]; |
| 109 |
|
| 110 |
var options = { |
| 111 |
'none': 'None' |
| 112 |
}; |
| 113 |
|
| 114 |
var prevFieldId; |
| 115 |
|
| 116 |
formFieldsModel.each(function (field, index) { |
| 117 |
var fieldLabel = field.get('field_label'); |
| 118 |
var fieldId = field.get('field_id'); |
| 119 |
|
| 120 |
if (prevFieldId == fieldId) { |
| 121 |
$('#elementor-panel').find(':input[value=' + field.attributes._id + ']').closest('.elementor-repeater-fields').find(':input[data-setting="field_id"]').val(field.attributes._id); |
| 122 |
$('#elementor-panel').find(':input[value=' + field.attributes._id + ']').closest('.elementor-repeater-fields').find('.king-addons-form-field-shortcode').val('id=["' + field.attributes._id + '"]'); |
| 123 |
field.attributes.field_id = field.attributes._id; |
| 124 |
} |
| 125 |
|
| 126 |
prevFieldId = fieldId; |
| 127 |
|
| 128 |
if (!fieldId) { |
| 129 |
$('#elementor-panel').find(':input[value=' + field.attributes._id + ']').closest('.elementor-repeater-fields').find(':input[data-setting="field_id"]').val(field.attributes._id); |
| 130 |
$('#elementor-panel').find(':input[value=' + field.attributes._id + ']').closest('.elementor-repeater-fields').find('.king-addons-form-field-shortcode').val('id=["' + field.attributes._id + '"]'); |
| 131 |
field.attributes.field_id = field.attributes._id; |
| 132 |
} |
| 133 |
|
| 134 |
options[fieldId] = fieldLabel; |
| 135 |
}); |
| 136 |
|
| 137 |
view.model.setSetting('email_field', _.extend(emailField, {options})); |
| 138 |
view.model.setSetting('first_name_field', _.extend(firstNameField, {options})); |
| 139 |
view.model.setSetting('last_name_field', _.extend(lastNameField, {options})); |
| 140 |
view.model.setSetting('phone_field', _.extend(phoneField, {options})); |
| 141 |
view.model.setSetting('birthday_field', _.extend(birthdayField, {options})); |
| 142 |
view.model.setSetting('address_field', _.extend(addressField, {options})); |
| 143 |
view.model.setSetting('country_field', _.extend(countryField, {options})); |
| 144 |
view.model.setSetting('city_field', _.extend(cityField, {options})); |
| 145 |
view.model.setSetting('state_field', _.extend(stateField, {options})); |
| 146 |
view.model.setSetting('zip_field', _.extend(zipField, {options})); |
| 147 |
|
| 148 |
_.each(selectControls, function (control) { |
| 149 |
control.empty(); |
| 150 |
}); |
| 151 |
|
| 152 |
_.each(options, function (label, value) { |
| 153 |
_.each(selectControls, function (control, i) { |
| 154 |
const isSelected = fieldValues[i] === value ? ' selected' : ''; |
| 155 |
control.append('<option value="' + value + '"' + isSelected + '>' + label + '</option>'); |
| 156 |
}); |
| 157 |
}); |
| 158 |
}; |
| 159 |
|
| 160 |
// Change the selector below to match the field_id field in your repeater |
| 161 |
const customIdFieldSelector = 'input[data-setting="field_id"]'; |
| 162 |
|
| 163 |
// Change the selector below to match the shortcode field in your repeater |
| 164 |
const shortcodeFieldSelector = '.king-addons-form-field-shortcode'; |
| 165 |
|
| 166 |
// Listen for changes in the field_id field |
| 167 |
$('#elementor-panel').on('input', customIdFieldSelector, function () { |
| 168 |
|
| 169 |
// Get the new field_id value |
| 170 |
const newCustomId = $(this).val(); |
| 171 |
|
| 172 |
// Find the corresponding shortcode field in the same repeater item |
| 173 |
const $shortcodeField = $(this).closest('.elementor-repeater-fields').find(shortcodeFieldSelector); |
| 174 |
|
| 175 |
// Update the shortcode with the new field_id value |
| 176 |
let updatedShortcode; |
| 177 |
const currentShortcode = $shortcodeField.val(); |
| 178 |
const match = currentShortcode.match(/\[id="[^"]*"\]/); |
| 179 |
|
| 180 |
if (match) { |
| 181 |
updatedShortcode = currentShortcode.replace(match[0], `[id="${newCustomId}"]`); |
| 182 |
} else { |
| 183 |
updatedShortcode = `[id="${newCustomId}"]`; |
| 184 |
} |
| 185 |
|
| 186 |
// Set the updated shortcode in the shortcode field |
| 187 |
$shortcodeField.val(updatedShortcode); |
| 188 |
}); |
| 189 |
}); |
| 190 |
|
| 191 |
}); |
| 192 |
}(jQuery)); |
