← All changes | resources/backend/js/settings-conditional-display.js +79 -37 2.3.0 → 3.4.3 View file →

		@@ -1,9 +1,8 @@
1	1	/**
2	2	* Displays or hides settings in the UI, depending on which settings are enabled
3	3	* or disabled.
4	4	*
5		- * @package ConvertKit
6	5	* @author ConvertKit
7	6	*/
8	7
9	8	/**
		@@ -11,61 +10,104 @@
11	10	* or disabled.
12	11	*
13	12	* @since 2.2.4
14	13	*/
15		-jQuery( document ).ready(
16		- function ( $ ) {
	14	+document.addEventListener('DOMContentLoaded', function () {
	15	+ // Update settings and refresh UI when a setting is changed.
	16	+ const sourceInputs = document.querySelectorAll(
	17	+ '.convertkit-conditional-display'
	18	+ );
	19	+ sourceInputs.forEach(function (input) {
	20	+ input.addEventListener('change', function () {
	21	+ convertKitConditionallyDisplaySettings(this);
	22	+ });
17	23
18		- // Update settings and refresh UI when a setting is changed.
19		- $( 'input[type=checkbox]' ).on(
20		- 'change',
21		- function () {
	24	+ convertKitConditionallyDisplaySettings(input);
	25	+ });
	26	+});
22	27
23		- convertKitConditionallyDisplaySettings( $( this ).attr( 'id' ), $( this ).prop( 'checked' ) );
24		-
25		- }
26		- );
27		-
28		- // Restrict Content.
29		- convertKitConditionallyDisplaySettings( 'enabled', $( 'input#enabled' ).prop( 'checked' ) );
30		-
31		- }
32		-);
33		-
34	28	/**
35	29	* Shows all table rows on a ConvertKit settings screen, and then hides
36	30	* table rows related to a setting, if that setting is disabled.
37	31	*
38	32	* @since 2.2.4
	33	+ *
	34	+ * @param {Object} input Element interacted with.
39	35	*/
40		-function convertKitConditionallyDisplaySettings( name, display ) {
	36	+function convertKitConditionallyDisplaySettings(input) {
	37	+ const rows = document.querySelectorAll('table.form-table tr');
41	38
42		- ( function ( $ ) {
	39	+ switch (input.type) {
	40	+ case 'checkbox':
	41	+ // Show all rows.
	42	+ rows.forEach((row) => (row.style.display = ''));
43	43
44		- // Show all rows.
45		- $( 'table.form-table tr' ).show();
	44	+ // Don't do anything else if the checkbox is checked.
	45	+ if (input.checked) {
	46	+ return;
	47	+ }
46	48
47		- // Don't do anything else if display is true.
48		- if ( display ) {
49		- return;
50		- }
51		-
52		- // Iterate through the table rows, hiding any settings.
53		- $( 'table.form-table tr' ).each(
54		- function () {
55		-
	49	+ // Iterate through the table rows, hiding any settings.
	50	+ rows.forEach(function (row) {
56	51	// Skip if this table row is for the setting we've just checked/unchecked.
57		- if ( $( '[id="' + name + '"]', $( this ) ).length > 0 ) {
	52	+ if (row.querySelector(`[id = "${input.id}"]`)) {
58	53	return;
59	54	}
60	55
61		- // Hide this row if the input, select, link or span element within the row has the CSS class of the setting name.
62		- if ( $( 'input, select, a, span', $( this ) ).hasClass( name ) ) {
63		- $( this ).hide();
	56	+ // Hide this row if the input, select, link or span element within the row has the CSS class of the setting ID.
	57	+ if (
	58	+ row.querySelector(
	59	+ `input.${input.id}, select.${input.id}, a.${input.id}, span.${input.id}`
	60	+ )
	61	+ ) {
	62	+ row.style.display = 'none';
64	63	}
	64	+ });
	65	+ break;
65	66
	67	+ default:
	68	+ // Group pattern: source has data-conditional-class-prefix; rows opt
	69	+ // into the group by declaring a CSS class of the form
	70	+ // "<prefix><value>". Rows in the group whose class matches the
	71	+ // source's current value are shown; other rows in the group are
	72	+ // hidden. Rows without any matching prefix class are left alone.
	73	+ if (input.dataset.conditionalClassPrefix) {
	74	+ const prefix = input.dataset.conditionalClassPrefix;
	75	+ const expectedClass = prefix + input.value;
	76	+ rows.forEach(function (row) {
	77	+ const inGroup = Array.from(row.classList).some((c) =>
	78	+ c.startsWith(prefix)
	79	+ );
	80	+ if (!inGroup) {
	81	+ return;
	82	+ }
	83	+ row.style.display = row.classList.contains(expectedClass)
	84	+ ? ''
	85	+ : 'none';
	86	+ });
	87	+ break;
66	88	}
67		- );
68	89
69		- } )( jQuery );
	90	+ // Single-target pattern: source has data-conditional-element (id)
	91	+ // and data-conditional-value; the matching row is shown when the
	92	+ // source value equals the expected value and hidden otherwise.
	93	+ rows.forEach(function (row) {
	94	+ // Skip if this table row is for the setting we've just changed.
	95	+ if (row.querySelector(`[id = "${input.id}"]`)) {
	96	+ return;
	97	+ }
70	98
	99	+ if (
	100	+ row.querySelector(
	101	+ `input#${input.dataset.conditionalElement}`
	102	+ )
	103	+ ) {
	104	+ if (input.value !== input.dataset.conditionalValue) {
	105	+ row.style.display = 'none';
	106	+ } else {
	107	+ row.style.display = '';
	108	+ }
	109	+ }
	110	+ });
	111	+ break;
	112	+ }
71	113	}