← All changes | js/admin/style.js +39 -1 6.3 → 6.7.2 View file →

		@@ -49,8 +49,9 @@
49	49	*/
50	50	function initPreview() {
51	51	initFloatingLabels();
52	52	fillMissingSignatureValidationFunction();
	53	+ setSelectPlaceholderColor();
53	54
54	55	// Remove .wp-core-ui from the body so the preview can avoid it.
55	56	// Then add it back where we want to use admin styles (the sidebar, otherwise inputs appear short).
56	57	document.body.classList.remove( 'wp-core-ui' );
		@@ -1158,9 +1159,12 @@
1158	1159	action: 'frm_change_styling',
1159	1160	nonce: frmGlobal.nonce,
1160	1161	frm_style_setting: locStr
1161	1162	},
1162		- success: handleChangeStylingSuccess
	1163	+ success: ( css ) => {
	1164	+ handleChangeStylingSuccess( css );
	1165	+ setSelectPlaceholderColor();
	1166	+ }
1163	1167	});
1164	1168	}
1165	1169
1166	1170	/**
		@@ -1352,8 +1356,42 @@
1352	1356	const $sample = jQuery( '#datepicker_sample' );
1353	1357	if ( $sample.length && 'function' === typeof $sample.datepicker ) {
1354	1358	$sample.datepicker({ changeMonth: true, changeYear: true });
1355	1359	}
	1360	+ }
	1361	+
	1362	+ /**
	1363	+ * Set color for select placeholders.
	1364	+ *
	1365	+ * @since 6.5.1
	1366	+ */
	1367	+ function setSelectPlaceholderColor() {
	1368	+ const selects = document.querySelectorAll( '.form-field select' );
	1369	+ const styleElement = document.querySelector( '.with_frm_style' );
	1370	+ const textColorDisabled = styleElement ? getComputedStyle( styleElement ).getPropertyValue( '--text-color-disabled' ).trim() : '';
	1371	+
	1372	+ // Exit if there are no select elements or the textColorDisabled property is missing
	1373	+ if ( ! selects.length || ! textColorDisabled ) {
	1374	+ return;
	1375	+ }
	1376	+
	1377	+ // Function to change the color of a select element
	1378	+ const changeSelectColor = ( select ) => {
	1379	+ if ( select.options[select.selectedIndex] && select.options[select.selectedIndex].classList.contains( 'frm-select-placeholder' ) ) {
	1380	+ select.style.setProperty( 'color', textColorDisabled, 'important' );
	1381	+ } else {
	1382	+ select.style.color = '';
	1383	+ }
	1384	+ };
	1385	+
	1386	+ // Use a loop to iterate through each select element
	1387	+ selects.forEach( ( select ) => {
	1388	+ // Apply the color change to each select element
	1389	+ changeSelectColor( select );
	1390	+
	1391	+ // Add an event listener for future changes
	1392	+ select.addEventListener( 'change', () => changeSelectColor( select ) );
	1393	+ });
1356	1394	}
1357	1395
1358	1396	// Hook into the styleInit function in formidable_admin.js
1359	1397	wp.hooks.addAction( 'frm_style_editor_init', 'formidable', initEditPage );