← All changes | src/Admin/Views/AdvancedSettings.php +82 -87 1.5.4 → 2.1.3 View file →

		@@ -12,9 +12,9 @@
12	12	*/
13	13
14	14	namespace ThemeAtelier\Darkify\Admin\Views;
15	15
16		-use ThemeAtelier\Darkify\Admin\Framework\Classes\Darkify;
	16	+use ThemeAtelier\Darkify\Admin\Schema\SchemaRegistry as Darkify;
17	17
18	18	class AdvancedSettings
19	19	{
20	20	/**
		@@ -25,9 +25,10 @@
25	25	*/
26	26	public static function options($prefix)
27	27	{
28	28	Darkify::createSection($prefix, array(
29		- 'title' => esc_html__('ADVANCED', 'darkify'),
	29	+ 'id' => 'advanced',
	30	+ 'title' => esc_html__('Advanced', 'darkify'),
30	31	'icon' => 'icofont-settings',
31	32	'fields' => array(
32	33	array(
33	34	'type' => 'section_tab',
		@@ -32,11 +33,29 @@
32	33	array(
33	34	'type' => 'section_tab',
34	35	'tabs' => array(
35	36	array(
	37	+ // Matches the key in darkify-react/src/lib/navIcons.js
	38	+ // (and Pro's id for the same tab). The id used to be
	39	+ // derived from the title, where sanitize_title() drops
	40	+ // the slash and yields `htmlcss-restriction` — which is
	41	+ // in neither map, so this tab always fell back to the
	42	+ // generic gear icon.
	43	+ 'id' => 'html-css-restriction',
36	44	'title' => esc_html__('HTML/CSS Restriction', 'darkify'),
37	45	'icon' => 'icofont-code-alt',
38	46	'fields' => array(
	47	+ // Intro line, rendered plain above the section card.
	48	+ array(
	49	+ 'type' => 'page_hint',
	50	+ 'content' => esc_html__('Restrict which HTML elements dark mode applies to, by tag, CSS class, or CSS ID.', 'darkify'),
	51	+ ),
	52	+ // ===== HTML/CSS RESTRICTION =====
	53	+ array(
	54	+ 'type' => 'heading',
	55	+ 'title' => esc_html__('HTML/CSS Restriction', 'darkify'),
	56	+ 'section_start' => true,
	57	+ ),
39	58	// ALLOWED ELEMENTS
40	59	array(
41	60	'id' => 'allowed_elements',
42	61	'type' => 'textarea',
		@@ -43,13 +62,9 @@
43	62	'title' => esc_html__('Allow Only Elements', 'darkify'),
44	63	'title_help' =>
45	64	'<div class="darkify-info-label">' .
46	65	__('Dark mode will be applied only to these elements.', 'darkify') .
47		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#element_targeting" target="_blank">' .
48		- __('Live Demo', 'darkify') .
49		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#html-css-restriction" target="_blank">' .
50		- __('Open Docs', 'darkify') .
51		- '</a>',
	66	+ '</div>',
52	67	'placeholder' => esc_html__(
53	68	'Enter comma-separated HTML tags, CSS classes, or CSS IDs. Example: div, #site-header, .my-footer',
54	69	'darkify'
55	70	),
		@@ -64,13 +79,9 @@
64	79	'title' => esc_html__('Force Design Correction', 'darkify'),
65	80	'title_help' =>
66	81	'<div class="darkify-info-label">' .
67	82	__('Force Darkify to preserve layout and readability when background or text colors are modified on allowed elements.', 'darkify') .
68		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#element_targeting" target="_blank">' .
69		- __('Live Demo', 'darkify') .
70		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#html-css-restriction" target="_blank">' .
71		- __('Open Docs', 'darkify') .
72		- '</a>',
	83	+ '</div>',
73	84
74	85	'class' => 'switcher_pro_only',
75	86	'text_on' => esc_html__('Yes', 'darkify'),
76	87	'text_off' => esc_html__('No', 'darkify'),
		@@ -85,13 +96,9 @@
85	96	'title' => esc_html__('Disallowed Elements', 'darkify'),
86	97	'title_help' =>
87	98	'<div class="darkify-info-label">' .
88	99	esc_html__('Dark mode will NOT be applied to the elements.', 'darkify') .
89		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#element_targeting" target="_blank">' .
90		- esc_html__('Live Demo', 'darkify') .
91		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#html-css-restriction" target="_blank">' .
92		- esc_html__('Open Docs', 'darkify') .
93		- '</a>',
	100	+ '</div>',
94	101
95	102	'placeholder' => esc_html__(
96	103	'Enter comma-separated HTML tags, CSS classes, or CSS IDs. Example: div, #site-header, .my-footer',
97	104	'darkify'
		@@ -104,13 +111,9 @@
104	111	'type' => 'switcher',
105	112	'title' => esc_html__('Force To Correct', 'darkify'),
106	113	'title_help' => '<div class="darkify-info-label">' .
107	114	__('Force Darkify to keep the design correct when background or text colors do not work properly for disallowed elements.', 'darkify') .
108		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#element_targeting" target="_blank">' .
109		- __('Live Demo', 'darkify') .
110		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#html-css-restriction" target="_blank">' .
111		- __('Open Docs', 'darkify') .
112		- '</a>',
	115	+ '</div>',
113	116
114	117	'class' => 'switcher_pro_only',
115	118	'text_on' => esc_html__('Yes', 'darkify'),
116	119	'text_off' => esc_html__('No', 'darkify'),
		@@ -119,16 +122,23 @@
119	122	)
120	123	),
121	124
122	125	array(
	126	+ 'id' => 'page-posts-restriction',
123	127	'title' => esc_html__('Page/Posts Restriction', 'darkify'),
124	128	'icon' => 'icofont-eye-blocked',
125	129	'fields' => array(
	130	+ // Intro line, rendered plain above the section cards.
126	131	array(
127		- 'type' => 'heading',
128		- 'title' => esc_html__('Pages Restriction', 'darkify'),
	132	+ 'type' => 'page_hint',
	133	+ 'content' => esc_html__('Limit where dark mode and the floating switch run, by specific pages or posts.', 'darkify'),
129	134	),
130	135	array(
	136	+ 'type' => 'heading',
	137	+ 'title' => esc_html__('Pages Restriction', 'darkify'),
	138	+ 'section_start' => true,
	139	+ ),
	140	+ array(
131	141	'id' => 'allowed_pages',
132	142	'type' => 'select',
133	143	'title' => esc_html__('Allow Only Pages', 'darkify'),
134	144	'title_help' =>
		@@ -135,13 +145,9 @@
135	145	'<div class="darkify-info-label">' .
136	146	__('Dark mode will be applied only to the selected pages.', 'darkify') .
137	147	'</div><div class="darkify-short-content">' .
138	148	__('Choose only the pages where dark mode and the floating switch should work. Dark mode will not be applied to any other pages.', 'darkify') .
139		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#granular_control" target="_blank">' .
140		- __('Live Demo', 'darkify') .
141		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#pages-restriction" target="_blank">' .
142		- __('Open Docs', 'darkify') .
143		- '</a>',
	149	+ '</div>',
144	150	'placeholder' => esc_html__('Select pages', 'darkify'),
145	151
146	152	'class' => 'only_pro',
147	153	'options' => 'pages',
		@@ -157,13 +163,9 @@
157	163	'<div class="darkify-info-label">' .
158	164	__('Dark mode will not be applied to these pages.', 'darkify') .
159	165	'</div><div class="darkify-short-content">' .
160	166	__('Choose the pages where dark mode and the floating switch should not work. Dark mode will work on all other pages.', 'darkify') .
161		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#granular_control" target="_blank">' .
162		- __('Live Demo', 'darkify') .
163		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#pages-restriction" target="_blank">' .
164		- __('Open Docs', 'darkify') .
165		- '</a>',
	167	+ '</div>',
166	168
167	169	'class' => 'only_pro',
168	170	'placeholder' => esc_html__('Select pages', 'darkify'),
169	171	'options' => 'pages',
		@@ -172,10 +174,11 @@
172	174	'dependency' => array('allowed_pages', '==', ''),
173	175	),
174	176
175	177	array(
176		- 'type' => 'heading',
177		- 'title' => esc_html__('Posts Restriction', 'darkify'),
	178	+ 'type' => 'heading',
	179	+ 'title' => esc_html__('Posts Restriction', 'darkify'),
	180	+ 'section_start' => true,
178	181	),
179	182	array(
180	183	'id' => 'allowed_posts',
181	184	'type' => 'select',
		@@ -184,13 +187,9 @@
184	187	'<div class="darkify-info-label">' .
185	188	__('Dark mode will be applied only to these posts.', 'darkify') .
186	189	'</div><div class="darkify-short-content">' .
187	190	__('Choose only the posts where dark mode and the floating switch should work. Dark mode will not be applied to any other posts.', 'darkify') .
188		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#granular_control" target="_blank">' .
189		- __('Live Demo', 'darkify') .
190		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#posts-restriction" target="_blank">' .
191		- __('Open Docs', 'darkify') .
192		- '</a>',
	191	+ '</div>',
193	192
194	193	'placeholder' => esc_html__('Select posts', 'darkify'),
195	194	'class' => 'only_pro',
196	195	'options' => 'posts',
		@@ -205,13 +204,9 @@
205	204	'<div class="darkify-info-label">' .
206	205	__('Dark mode will not be applied to these posts.', 'darkify') .
207	206	'</div><div class="darkify-short-content">' .
208	207	__('Choose the posts where dark mode and the floating switch cannot work. Other posts will be able to process dark mode.', 'darkify') .
209		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#granular_control" target="_blank">' .
210		- __('Live Demo', 'darkify') .
211		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#posts-restriction" target="_blank">' .
212		- __('Open Docs', 'darkify') .
213		- '</a>',
	208	+ '</div>',
214	209	'placeholder' => esc_html__('Select posts', 'darkify'),
215	210	'class' => 'only_pro',
216	211	'options' => 'posts',
217	212	'chosen' => true,
		@@ -220,12 +215,24 @@
220	215	),
221	216	)
222	217	),
223	218	array(
	219	+ 'id' => 'custom-css',
224	220	'title' => esc_html__('Custom CSS', 'darkify'),
225	221	'icon' => 'icofont-file-css',
226	222	'fields' => array(
	223	+ // Intro line, rendered plain above the section card.
227	224	array(
	225	+ 'type' => 'page_hint',
	226	+ 'content' => esc_html__('Add your own CSS for dark mode, and CSS that applies in both modes.', 'darkify'),
	227	+ ),
	228	+ // ===== CUSTOM CSS =====
	229	+ array(
	230	+ 'type' => 'heading',
	231	+ 'title' => esc_html__('Custom CSS', 'darkify'),
	232	+ 'section_start' => true,
	233	+ ),
	234	+ array(
228	235	'id' => 'custom_css',
229	236	'type' => 'code_editor',
230	237	'title' => esc_html__('Dark Mode CSS', 'darkify'),
231	238	'title_help' =>
		@@ -230,13 +237,9 @@
230	237	'title' => esc_html__('Dark Mode CSS', 'darkify'),
231	238	'title_help' =>
232	239	'<div class="darkify-info-label">' .
233	240	__('The CSS code will only be applied when dark mode is active.', 'darkify') .
234		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#custom_css" target="_blank">' .
235		- __('Live Demo', 'darkify') .
236		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#custom-css" target="_blank">' .
237		- __('Open Docs', 'darkify') .
238		- '</a>',
	241	+ '</div>',
239	242
240	243	'settings' => array(
241	244	'theme' => 'default',
242	245	'mode' => 'css',
		@@ -253,14 +256,10 @@
253	256	'</div>' .
254	257	'<div class="darkify-short-content">' .
255	258	__('Custom CSS selectors are automatically treated as Disallowed Elements. To override this behavior, use the :not-disallowed pseudo-class. Example: body:not-disallowed { ... }', 'darkify') .
256	259	'</div>' .
257		- '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#custom_css" target="_blank">' .
258		- __('Live Demo', 'darkify') .
259		- '</a>' .
260		- '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#custom-css" target="_blank">' .
261		- __('Open Docs', 'darkify') .
262		- '</a>',
	260	+ '' .
	261	+ '',
263	262
264	263	'text_on' => esc_html__('Yes', 'darkify'),
265	264	'text_off' => esc_html__('No', 'darkify'),
266	265
		@@ -273,14 +272,10 @@
273	272	'title_help' =>
274	273	'<div class="darkify-info-label">' .
275	274	__('The CSS code will be applied in both normal mode and dark mode.', 'darkify') .
276	275	'</div>' .
277		- '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#custom_css" target="_blank">' .
278		- __('Live Demo', 'darkify') .
279		- '</a>' .
280		- '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#custom-css" target="_blank">' .
281		- __('Open Docs', 'darkify') .
282		- '</a>',
	276	+ '' .
	277	+ '',
283	278
284	279	'settings' => array(
285	280	'theme' => 'default',
286	281	'mode' => 'css',
		@@ -287,43 +282,43 @@
287	282	),
288	283	),
289	284	)
290	285	),
	286	+ // "Extras" — the Frontend Iframe Dark Mode toggle lives here,
	287	+ // matching Pro's layout (moved out of Controls → Frontend). The
	288	+ // page's former Extras contents (Clean-up Data on Deletion +
	289	+ // Backup and Restore) now live on their own Tools page — see
	290	+ // Views/Tools.php.
291	291	array(
	292	+ 'id' => 'extras',
292	293	'title' => esc_html__('Extras', 'darkify'),
293	294	'icon' => 'icofont-holding-hands',
294	295	'fields' => array(
295		- // Enable Tooltip On Floating Switch
	296	+ // Intro line, rendered plain above the section card.
296	297	array(
297		- 'id' => 'darkify_data_remove',
298		- 'type' => 'checkbox',
299		- 'title' => esc_html__('Clean-up Data on Deletion', 'darkify'),
300		- 'title_help' =>
301		- '<div class="darkify-info-label">' .
302		- esc_html__('Enable this option to completely remove all Darkify data when the plugin is deleted.', 'darkify') .
303		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#backup" target="_blank">' .
304		- esc_html__('Live Demo', 'darkify') .
305		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#extras" target="_blank">' .
306		- esc_html__('Open Docs', 'darkify') .
307		- '</a>',
308		-
	298	+ 'type' => 'page_hint',
	299	+ 'content' => esc_html__('Extra behaviors that don’t fit elsewhere.', 'darkify'),
309	300	),
	301	+ // ===== EXTRAS =====
310	302	array(
311		- 'type' => 'heading',
312		- 'title' => esc_html__('Backup', 'darkify'),
	303	+ 'type' => 'heading',
	304	+ 'title' => esc_html__('Extras', 'darkify'),
	305	+ 'section_start' => true,
313	306	),
314	307	array(
315		- 'title' => esc_html__('Backup and Restore Settings', 'darkify'),
	308	+ 'id' => 'enable_frontend_iframe_dark_mode',
	309	+ 'type' => 'switcher',
	310	+ 'title' => esc_html__('Frontend Iframe Dark Mode', 'darkify'),
316	311	'title_help' =>
317	312	'<div class="darkify-info-label">' .
318		- esc_html__('Use these options to back up your settings for safekeeping or restore them when needed. You can export your current settings as a .json file and import it anytime to restore your configuration.', 'darkify') .
319		- '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'advanced/#backup" target="_blank">' .
320		- __('Live Demo', 'darkify') .
321		- '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'advanced/#extras" target="_blank">' .
322		- __('Open Docs', 'darkify') .
323		- '</a>',
324		-
325		- 'type' => 'backup',
	313	+ __('Apply dark mode to iframes when dark mode is active. Same-origin iframes receive full dark mode styling; cross-origin iframes (embedded third-party widgets) are dimmed to 60% brightness. Disable to keep all iframes at their original appearance.', 'darkify') .
	314	+ '</div>' .
	315	+ '' .
	316	+ '',
	317	+ 'text_on' => esc_html__('Enabled', 'darkify'),
	318	+ 'text_off' => esc_html__('Disabled', 'darkify'),
	319	+ 'text_width' => 100,
	320	+ 'default' => true,
326	321	),
327	322	)
328	323	),
329	324	)