creation of the repo fbpatch

js/calculations.js

@@ -0,0 +1,70 @@
+
+function patch_form_calculation_CIPF() {
+	let form_calculation = document.querySelector('form.fb_form.multistep');
+	if (form_calculation === null)
+		return;
+
+	/*
+	* finds the input:checked in the element .calculate_field
+	* and trigger the event 'change' on it
+	* - this event 'change' is added by form builder in divi-form-calc-min.js :
+	*    $(document).on(
+	*      'change',
+	*      '.calculate_field input:not([type="hidden"]), .calculate_field select',
+	*      function () {
+	*        ...
+	*      }
+	*    );
+	*
+	*/
+	function trigger_change(element) {
+		/*
+		* jquery version
+		*
+		let inputs = $(element).find('input:checked');
+		inputs.trigger('change');
+		*/
+
+		/*
+		* js version
+		*
+		*/
+		let inputs = element.querySelectorAll('input:checked');
+		// loop through inputs and trigger 'change' event on each
+		inputs.forEach(function(input) {
+			// Triggering 'change' event
+			let change_event = new Event('change', {
+				bubbles: true,
+				cancelable: true,
+			});
+			input.dispatchEvent(change_event);
+		});
+	}
+
+
+	// create an observer on form to check if child nodes are modified
+	const observer_form = new MutationObserver(wait_for_calculation_class);
+	observer_form.observe(form_calculation, {
+		subtree: true,
+		attributes: true,
+	});
+
+	// observe mutations to see if they include the addition of class .calculate_field
+	// if the class is added, call the function that might trigger the change event on it
+	function wait_for_calculation_class(mutationsList) {
+		mutationsList.forEach((mutation) => {
+			// check if class where added
+			if (mutation.type !== 'attributes')
+				return;
+			if (mutation.attributeName !== 'class')
+				return;
+			// check if added class is .calculate_field
+			let target = mutation.target;
+			if (target.classList.contains('calculate_field')) {
+				// If the class is added, trigger the 'change' event
+				trigger_change(target);
+			}
+		});
+	}
+}
+patch_form_calculation_CIPF();

js/dates.js

@@ -0,0 +1,145 @@
+
+/*
+* overriding the datepicker function to intercept the arguments
+* -> https://stackoverflow.com/questions/26667720/how-to-get-the-selected-date-from-jquery-datepicker
+* then create an false input that will mask the real one
+* and put the original date format on the false element,
+*   while transforming the real one with the acf format 'Ymd'
+* 
+* another solution would be to find the elements with the datepicker, and add the onSelect here
+*
+*/
+// store the original jQuery UI datepicker function
+const original_datepicker = jQuery.fn.datepicker;
+// override the datepicker function
+jQuery.fn.datepicker = function(options) {
+	/*
+	* first creates the fake input
+	*
+	*/
+	create_fake_date_input(options, this);
+
+
+	/*
+	* then override the options to add action on select date :
+	* -> store the date in acf format in the hidden field value
+	*
+	*/
+	options.onSelect = function(date_text, inst) {
+		const acf_date_format = "yymmdd";
+		const selected_date = jQuery(this).datepicker('getDate');
+		const formated_date = jQuery.datepicker.formatDate(acf_date_format, selected_date);
+
+		const fake_id = 'acf_date_fake_' + inst.id;
+		jQuery('#' + fake_id).val(date_text);
+		jQuery(this).val(formated_date);
+	}
+
+	// call the original datepicker function with the updated option
+	return original_datepicker.call(this, options);
+};
+
+
+
+
+/*
+* creates the false element
+* place it above the real one to hide it
+*
+*/
+async function create_fake_date_input(options, element) {
+	const fake_id = 'acf_date_fake_' + element.attr('id');
+	if (jQuery('#' + fake_id).length !== 0) {
+		return;
+	}
+
+
+	const fake_name = 'acf_date_fake_for_' + element.attr('name');
+	const original_date_string = await get_acf_date_from_rest(element);
+	const fake_value = original_date_string;
+
+
+	/*
+	* we position the hidden element right in top of the real datepicker one
+	* it might nor work in some situation, but so far it's good
+	* then we remove pointer events, so that clicking on it actually clicks on the real input
+	*
+	*/
+	let fake_style = `
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		pointer-events: none;
+	`;
+	const font_weight = element.css('font-weight');
+	if (font_weight) {
+		fake_style += `font-weight: ${font_weight};`;
+	}
+
+
+	/*
+	* gives the parent element a defined position if needed
+	* then create the false input above the real one
+	*
+	*/
+	if (element.parent().css('position') === 'static') {
+		element.parent().css('position', 'relative');
+	}
+	jQuery(`<input type="text" id="${fake_id}" name="${fake_name}" style="${fake_style}" value="${fake_value}">`).insertAfter(element);
+}
+
+
+
+
+/*
+* use the rest api to get the formated value for the date field
+*
+*/
+async function get_acf_date_from_rest(element) {
+	const pid = getUrlParameter('pid');
+
+	const prefix = "de_fb_";
+	const name = element.attr('name')
+	let acf_name = name.substring(prefix.length);
+
+	let date = element.val(); // default date, not formated, if fetch call fails
+	let fetch_data = null;
+
+	try {
+		const response = await fetch(`/wp-json/wp/v2/posts/${pid}?_fields=acf.${acf_name}&acf_format=standard`);
+		fetch_data = await response.json();
+		tmp_date = fetch_data.acf[acf_name];
+		if (tmp_date) {
+			date = tmp_date;
+		}
+	}
+	catch (error) {
+		console.error('Error fetching ACF field:', error);
+	}
+
+	return date;
+}
+
+
+
+
+/*
+* https://stackoverflow.com/a/21903119/9497573
+*
+*/
+function getUrlParameter(sParam) {
+	let sPageURL = window.location.search.substring(1),
+			sURLVariables = sPageURL.split('&'),
+			sParameterName,
+			i;
+
+	for (i = 0; i < sURLVariables.length; i++) {
+		sParameterName = sURLVariables[i].split('=');
+
+		if (sParameterName[0] === sParam) {
+			return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
+		}
+	}
+	return false;
+};
+

js/modals.js

@@ -0,0 +1,29 @@
+let modal_wrapper_CIPF = document.querySelector('#de-fb-modal-wrapper-');
+
+// create an observer on first #de-fb-modal-wrapper- to check if child nodes are added
+const observer_CIPF = new MutationObserver(wait_for_close_button_CIPF);
+observer_CIPF.observe(modal_wrapper_CIPF, {
+	subtree: true,
+	childList: true,
+});
+
+// observe mutations to see if they include the creation of the button .modal-close
+// if the button is created, add an eventListener to it
+function wait_for_close_button_CIPF(mutationsList) {
+	mutationsList.forEach((mutation) => {
+		// check if nodes were added
+		if (mutation.type !== 'childList')
+			return;
+		// check if added nodes includes the button .modal-close
+		let modal_close = document.querySelector('#de-fb-modal-wrapper- .modal-close');
+		if (modal_close !== null) {
+			modal_close.addEventListener("click", delete_modal_CIPF);
+		}
+	});
+}
+
+// when triggered, the .modal-close button will remove all childs from #de-fb-modal-wrapper-
+function delete_modal_CIPF() {
+	modal_wrapper_CIPF.innerHTML = '';
+}
+

js/urls.js

@@ -0,0 +1,9 @@
+// https://stackoverflow.com/questions/12741517/how-to-make-url-validation-without-http-or-add-it-after-validation-passed/44848476#44848476
+
+let old_url = jQuery.validator.methods.url;
+jQuery.validator.addMethod( 'url', function(value, element) {
+		let url = old_url.bind(this);
+		return url(value, element) || url('http://' + value, element);
+	}, 'Please enter a valid URL'
+);
+