PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 2.1.3
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v2.1.3
2.1.3 2.1.2 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 trunk 1.0.1 1.1.0 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.3.0 All 57 releases
← All changes | src/Admin/Views/AdvancedSettings.php +282 -144 1.3.02.1.3 View file →
@@ -1,13 +1,13 @@
1 1 <?php
2 2
3 3 /**
4 - * Views class for Shortcode generator options.
4 + * AdvancedSettings class for Advanced options.
5 5 *
6 6 * @link https://themeatelier.net
7 7 * @since 1.0.0
8 8 *
9 - * @package darkify
9 + * @package darkify
10 10 * @subpackage darkify/src/Admin/Views/AdvancedSettings
11 11 * @author ThemeAtelier<themeatelierbd@gmail.com>
12 12 */
13 13
@@ -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,167 +25,305 @@
25 25 */
26 26 public static function options($prefix)
27 27 {
28 28 Darkify::createSection($prefix, array(
29 - 'title' => esc_html__('ADVANCED SETTINGS', 'darkify'),
29 + 'id' => 'advanced',
30 + 'title' => esc_html__('Advanced', 'darkify'),
30 31 'icon' => 'icofont-settings',
31 32 'fields' => array(
33 + array(
34 + 'type' => 'section_tab',
35 + 'tabs' => array(
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',
44 + 'title' => esc_html__('HTML/CSS Restriction', 'darkify'),
45 + 'icon' => 'icofont-code-alt',
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 + ),
58 + // ALLOWED ELEMENTS
59 + array(
60 + 'id' => 'allowed_elements',
61 + 'type' => 'textarea',
62 + 'title' => esc_html__('Allow Only Elements', 'darkify'),
63 + 'title_help' =>
64 + '<div class="darkify-info-label">' .
65 + __('Dark mode will be applied only to these elements.', 'darkify') .
66 + '</div>',
67 + 'placeholder' => esc_html__(
68 + 'Enter comma-separated HTML tags, CSS classes, or CSS IDs. Example: div, #site-header, .my-footer',
69 + 'darkify'
70 + ),
32 71
33 - // 'HTML/CSS Restriction
34 72
35 - array(
36 - 'type' => 'heading',
37 - 'content' => esc_html__('HTML/CSS Restriction', 'darkify'),
38 - ),
73 + 'class' => 'only_pro',
74 + ),
39 75
40 - // ALLOWED ELEMENTS
76 + array(
77 + 'id' => 'allowed_elements_force_to_correct',
78 + 'type' => 'switcher',
79 + 'title' => esc_html__('Force Design Correction', 'darkify'),
80 + 'title_help' =>
81 + '<div class="darkify-info-label">' .
82 + __('Force Darkify to preserve layout and readability when background or text colors are modified on allowed elements.', 'darkify') .
83 + '</div>',
41 84
42 - array(
43 - 'id' => 'allowed_elements',
44 - 'type' => 'textarea',
45 - 'title' => esc_html__('Allow Only Elements', 'darkify'),
46 - 'desc' => esc_html__('Dark mode will be applied only to these elements.', 'darkify'),
47 - 'placeholder' => esc_html__('Enter comma separated HTML tags, CSS class or CSS ids. Example: div, #site-header, .my-footer', 'darkify'),
48 - 'class' => 'only_pro',
49 - ),
85 + 'class' => 'switcher_pro_only',
86 + 'text_on' => esc_html__('Yes', 'darkify'),
87 + 'text_off' => esc_html__('No', 'darkify'),
88 + 'default' => true,
89 + ),
50 90
51 - array(
52 - 'id' => 'allowed_elements_force_to_correct',
53 - 'type' => 'switcher',
54 - 'title' => esc_html__('Force To Correct', 'darkify'),
55 - 'desc' => esc_html__('Force to keep designs correct if background color or text color is changed on disallowed elements..', 'darkify'),
56 - 'text_on' => esc_html__('Yes', 'darkify'),
57 - 'text_off' => esc_html__('No', 'darkify'),
58 - 'default' => true,
59 - 'class' => 'switcher_pro_only',
60 - ),
61 -
62 - // DISALLOWED ELEMENTS
63 - array(
64 - 'id' => 'disallowed_elements',
65 - 'type' => 'textarea',
66 - 'title' => esc_html__('Disallowed Elements', 'darkify'),
67 - 'desc' => esc_html__('Dark mode will be applied only to these elements.', 'darkify'),
68 - 'placeholder' => esc_html__('Enter comma separated HTML tags, CSS class or CSS ids. Example: div, #site-header, .my-footer', 'darkify'),
69 - 'class' => 'only_pro',
70 - ),
71 -
72 - array(
73 - 'id' => 'disallowed_elements_force_to_correct',
74 - 'type' => 'switcher',
75 - 'title' => esc_html__('Force To Correct', 'darkify'),
76 - 'desc' => esc_html__('Force to keep designs correct if background color or text color is not working properly for allowed elements.', 'darkify'),
77 - 'text_on' => esc_html__('Yes', 'darkify'),
78 - 'text_off' => esc_html__('No', 'darkify'),
79 - 'class' => 'switcher_pro_only',
80 - 'default' => true,
81 - ),
91 + // DISALLOWED ELEMENTS
92 + array(
93 + 'id' => 'disallowed_elements',
94 + 'type' => 'textarea',
95 + 'class' => 'only_pro',
96 + 'title' => esc_html__('Disallowed Elements', 'darkify'),
97 + 'title_help' =>
98 + '<div class="darkify-info-label">' .
99 + esc_html__('Dark mode will NOT be applied to the elements.', 'darkify') .
100 + '</div>',
82 101
83 - // Page Restriction
102 + 'placeholder' => esc_html__(
103 + 'Enter comma-separated HTML tags, CSS classes, or CSS IDs. Example: div, #site-header, .my-footer',
104 + 'darkify'
105 + ),
84 106
85 - array(
86 - 'type' => 'heading',
87 - 'content' => esc_html__('Page Restriction', 'darkify'),
88 - ),
107 + ),
89 108
90 - array(
91 - 'id' => 'allowed_pages',
92 - 'type' => 'select',
93 - 'title' => esc_html__('Allow Only Pages', 'darkify'),
94 - 'help' => esc_html__('Dark mode will be applied only to these pages.', 'darkify'),
95 - 'desc' => esc_html__('Choose the pages only where dark mode and floating switch can work. No other pages will be able to process dark mode.', 'darkify'),
96 - 'placeholder' => esc_html__('Select some pages', 'darkify'),
97 - 'options' => 'pages',
98 - 'chosen' => true,
99 - 'multiple' => true,
100 - 'class' => 'only_pro',
101 - ),
109 + array(
110 + 'id' => 'disallowed_elements_force_to_correct',
111 + 'type' => 'switcher',
112 + 'title' => esc_html__('Force To Correct', 'darkify'),
113 + 'title_help' => '<div class="darkify-info-label">' .
114 + __('Force Darkify to keep the design correct when background or text colors do not work properly for disallowed elements.', 'darkify') .
115 + '</div>',
102 116
103 - array(
104 - 'id' => 'disallowed_pages',
105 - 'type' => 'select',
106 - 'title' => esc_html__('Disallowed Pages', 'darkify'),
107 - 'help' => esc_html__('Dark mode will not be applied to these pages.', 'darkify'),
108 - 'desc' => esc_html__('Choose the pages where dark mode and floating switch can not work. Other pages will be able to process dark mode.', 'darkify'),
109 - 'placeholder' => esc_html__('Select some pages', 'darkify'),
110 - 'options' => 'pages',
111 - 'chosen' => true,
112 - 'multiple' => true,
113 - 'class' => 'only_pro',
114 - ),
117 + 'class' => 'switcher_pro_only',
118 + 'text_on' => esc_html__('Yes', 'darkify'),
119 + 'text_off' => esc_html__('No', 'darkify'),
120 + 'default' => true,
121 + ),
122 + )
123 + ),
115 124
116 - // Post Restriction
125 + array(
126 + 'id' => 'page-posts-restriction',
127 + 'title' => esc_html__('Page/Posts Restriction', 'darkify'),
128 + 'icon' => 'icofont-eye-blocked',
129 + 'fields' => array(
130 + // Intro line, rendered plain above the section cards.
131 + array(
132 + 'type' => 'page_hint',
133 + 'content' => esc_html__('Limit where dark mode and the floating switch run, by specific pages or posts.', 'darkify'),
134 + ),
135 + array(
136 + 'type' => 'heading',
137 + 'title' => esc_html__('Pages Restriction', 'darkify'),
138 + 'section_start' => true,
139 + ),
140 + array(
141 + 'id' => 'allowed_pages',
142 + 'type' => 'select',
143 + 'title' => esc_html__('Allow Only Pages', 'darkify'),
144 + 'title_help' =>
145 + '<div class="darkify-info-label">' .
146 + __('Dark mode will be applied only to the selected pages.', 'darkify') .
147 + '</div><div class="darkify-short-content">' .
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') .
149 + '</div>',
150 + 'placeholder' => esc_html__('Select pages', 'darkify'),
117 151
118 - array(
119 - 'type' => 'heading',
120 - 'content' => esc_html__('Post Restriction', 'darkify'),
121 - ),
152 + 'class' => 'only_pro',
153 + 'options' => 'pages',
154 + 'chosen' => true,
155 + 'multiple' => true,
156 + ),
122 157
123 - array(
124 - 'id' => 'allowed_posts',
125 - 'type' => 'select',
126 - 'title' => esc_html__('Allow Only Posts', 'darkify'),
127 - 'help' => esc_html__('Dark mode will be applied only to these posts.', 'darkify'),
128 - 'desc' => esc_html__('Choose the posts only where dark mode and floating switch can work. No other pages will be able to process dark mode.', 'darkify'),
129 - 'placeholder' => esc_html__('Select some posts', 'darkify'),
130 - 'options' => 'posts',
131 - 'chosen' => true,
132 - 'multiple' => true,
133 - 'class' => 'only_pro',
134 - ),
158 + array(
159 + 'id' => 'disallowed_pages',
160 + 'type' => 'select',
161 + 'title' => esc_html__('Disallowed Pages', 'darkify'),
162 + 'title_help' =>
163 + '<div class="darkify-info-label">' .
164 + __('Dark mode will not be applied to these pages.', 'darkify') .
165 + '</div><div class="darkify-short-content">' .
166 + __('Choose the pages where dark mode and the floating switch should not work. Dark mode will work on all other pages.', 'darkify') .
167 + '</div>',
135 168
136 - array(
137 - 'id' => 'disallowed_posts',
138 - 'type' => 'select',
139 - 'title' => esc_html__('Disallowed Posts', 'darkify'),
140 - 'help' => esc_html__('Dark mode will not be applied to these posts.', 'darkify'),
141 - 'desc' => esc_html__('Choose the posts where dark mode and floating switch can not work. Other pages will be able to process dark mode.', 'darkify'),
142 - 'placeholder' => esc_html__('Select some posts', 'darkify'),
143 - 'options' => 'posts',
144 - 'chosen' => true,
145 - 'multiple' => true,
146 - 'class' => 'only_pro',
147 - ),
148 - array(
149 - 'type' => 'heading',
150 - 'content' => esc_html__('Custom CSS', 'darkify'),
151 - ),
169 + 'class' => 'only_pro',
170 + 'placeholder' => esc_html__('Select pages', 'darkify'),
171 + 'options' => 'pages',
172 + 'chosen' => true,
173 + 'multiple' => true,
174 + 'dependency' => array('allowed_pages', '==', ''),
175 + ),
152 176
153 - array(
154 - 'id' => 'custom_css',
155 - 'type' => 'code_editor',
156 - 'title' => esc_html__('Dark Mode CSS', 'darkify'),
157 - 'desc' => esc_html__('The CSS code will only be applied when dark mode is active.', 'darkify'),
158 - 'settings' => array(
159 - 'theme' => 'mbo',
160 - 'mode' => 'css',
161 - ),
162 - 'class' => 'only_pro',
163 - ),
177 + array(
178 + 'type' => 'heading',
179 + 'title' => esc_html__('Posts Restriction', 'darkify'),
180 + 'section_start' => true,
181 + ),
182 + array(
183 + 'id' => 'allowed_posts',
184 + 'type' => 'select',
185 + 'title' => esc_html__('Allow Only Posts', 'darkify'),
186 + 'title_help' =>
187 + '<div class="darkify-info-label">' .
188 + __('Dark mode will be applied only to these posts.', 'darkify') .
189 + '</div><div class="darkify-short-content">' .
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') .
191 + '</div>',
164 192
165 - array(
166 - 'id' => 'css_rules',
167 - 'type' => 'switcher',
168 - 'title' => esc_html__('CSS Rules', 'darkify'),
169 - 'help' => esc_html__('CSS rules should be applied to all children of the CSS selectors.', 'darkify'),
170 - 'desc' => esc_html__('Custom CSS selectors are automatically identified as Disallowed Elements, to ignore, use :not-disallowed pseudo class. i.e. body:not-disallowed{...}', 'darkify'),
171 - 'text_on' => esc_html__('Yes', 'darkify'),
172 - 'text_off' => esc_html__('No', 'darkify'),
173 - 'class' => 'switcher_pro_only',
174 - 'default' => true,
175 - ),
193 + 'placeholder' => esc_html__('Select posts', 'darkify'),
194 + 'class' => 'only_pro',
195 + 'options' => 'posts',
196 + 'chosen' => true,
197 + 'multiple' => true,
198 + ),
199 + array(
200 + 'id' => 'disallowed_posts',
201 + 'type' => 'select',
202 + 'title' => esc_html__('Disallowed Posts', 'darkify'),
203 + 'title_help' =>
204 + '<div class="darkify-info-label">' .
205 + __('Dark mode will not be applied to these posts.', 'darkify') .
206 + '</div><div class="darkify-short-content">' .
207 + __('Choose the posts where dark mode and the floating switch cannot work. Other posts will be able to process dark mode.', 'darkify') .
208 + '</div>',
209 + 'placeholder' => esc_html__('Select posts', 'darkify'),
210 + 'class' => 'only_pro',
211 + 'options' => 'posts',
212 + 'chosen' => true,
213 + 'multiple' => true,
214 + 'dependency' => array('allowed_posts', '==', ''),
215 + ),
216 + )
217 + ),
218 + array(
219 + 'id' => 'custom-css',
220 + 'title' => esc_html__('Custom CSS', 'darkify'),
221 + 'icon' => 'icofont-file-css',
222 + 'fields' => array(
223 + // Intro line, rendered plain above the section card.
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(
235 + 'id' => 'custom_css',
236 + 'type' => 'code_editor',
237 + 'title' => esc_html__('Dark Mode CSS', 'darkify'),
238 + 'title_help' =>
239 + '<div class="darkify-info-label">' .
240 + __('The CSS code will only be applied when dark mode is active.', 'darkify') .
241 + '</div>',
176 242
177 - array(
178 - 'id' => 'normal_custom_css',
179 - 'type' => 'code_editor',
180 - 'title' => esc_html__('Normal Mode CSS', 'darkify'),
181 - 'desc' => esc_html__('The CSS code will be applied on both normal mode and dark mode.', 'darkify'),
182 - 'settings' => array(
183 - 'theme' => 'mbo',
184 - 'mode' => 'css',
185 - ),
186 - 'class' => 'only_pro',
243 + 'settings' => array(
244 + 'theme' => 'default',
245 + 'mode' => 'css',
246 + ),
247 + ),
248 + array(
249 + 'id' => 'custom_css_rules',
250 + 'type' => 'switcher',
251 + 'title' => esc_html__('CSS Rules', 'darkify'),
252 +
253 + 'title_help' =>
254 + '<div class="darkify-info-label">' .
255 + __('CSS rules will be applied to all child elements of the specified CSS selectors.', 'darkify') .
256 + '</div>' .
257 + '<div class="darkify-short-content">' .
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') .
259 + '</div>' .
260 + '' .
261 + '',
262 +
263 + 'text_on' => esc_html__('Yes', 'darkify'),
264 + 'text_off' => esc_html__('No', 'darkify'),
265 +
266 + 'class' => 'switcher_pro_only',
267 + ),
268 + array(
269 + 'id' => 'normal_custom_css',
270 + 'type' => 'code_editor',
271 + 'title' => esc_html__('Normal Mode CSS', 'darkify'),
272 + 'title_help' =>
273 + '<div class="darkify-info-label">' .
274 + __('The CSS code will be applied in both normal mode and dark mode.', 'darkify') .
275 + '</div>' .
276 + '' .
277 + '',
278 +
279 + 'settings' => array(
280 + 'theme' => 'default',
281 + 'mode' => 'css',
282 + ),
283 + ),
284 + )
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 + array(
292 + 'id' => 'extras',
293 + 'title' => esc_html__('Extras', 'darkify'),
294 + 'icon' => 'icofont-holding-hands',
295 + 'fields' => array(
296 + // Intro line, rendered plain above the section card.
297 + array(
298 + 'type' => 'page_hint',
299 + 'content' => esc_html__('Extra behaviors that don’t fit elsewhere.', 'darkify'),
300 + ),
301 + // ===== EXTRAS =====
302 + array(
303 + 'type' => 'heading',
304 + 'title' => esc_html__('Extras', 'darkify'),
305 + 'section_start' => true,
306 + ),
307 + array(
308 + 'id' => 'enable_frontend_iframe_dark_mode',
309 + 'type' => 'switcher',
310 + 'title' => esc_html__('Frontend Iframe Dark Mode', 'darkify'),
311 + 'title_help' =>
312 + '<div class="darkify-info-label">' .
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,
321 + ),
322 + )
323 + ),
324 + )
187 325 ),
188 - )
326 + ),
189 327 ));
190 328 }
191 329 }