PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.4.6
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.4.6
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/SwitcherStyle.php +167 -962 2.0.41.4.6 View file →
@@ -1,8 +1,8 @@
1 1 <?php
2 2
3 3 /**
4 - * SwitcherStyle class for Switcher options.
4 + * Views class for Shortcode generator options.
5 5 *
6 6 * @link https://themeatelier.net
7 7 * @since 1.0.0
8 8 *
@@ -12,9 +12,9 @@
12 12 */
13 13
14 14 namespace ThemeAtelier\Darkify\Admin\Views;
15 15
16 -use ThemeAtelier\Darkify\Admin\Schema\SchemaRegistry as Darkify;
16 +use ThemeAtelier\Darkify\Admin\Framework\Classes\Darkify;
17 17
18 18 class SwitcherStyle
19 19 {
20 20 /**
@@ -27,12 +27,9 @@
27 27 {
28 28 Darkify::createSection(
29 29 $prefix,
30 30 array(
31 - // See Control.php: ids are pinned so routes never follow the
32 - // translated title.
33 - 'id' => 'switches',
34 - 'title' => esc_html__('Switches', 'darkify'),
31 + 'title' => esc_html__('SWITCHES', 'darkify'),
35 32 'icon' => 'icofont-toggle-on',
36 33 'fields' => array(
37 34
38 35 array(
@@ -38,68 +35,44 @@
38 35 array(
39 36 'type' => 'section_tab',
40 37 'tabs' => array(
41 38 array(
42 - 'id' => 'floating-switch',
43 - 'title' => esc_html__('Floating Switch', 'darkify'),
39 + 'title' => esc_html__('Customization', 'darkify'),
44 40 'icon' => 'icofont-ui-theme',
45 41 'fields' => array(
46 - // Intro line, rendered plain above the section cards.
47 42 array(
48 - 'type' => 'page_hint',
49 - 'content' => sprintf(
50 - /* translators: %s: "Open the live preview" action link */
51 - esc_html__('Design the floating dark-mode switch and choose where it sits. %s to see changes instantly.', 'darkify'),
52 - '<a href="#" data-darkify-open-preview>' . esc_html__('Open the live preview', 'darkify') . '</a>'
53 - ),
54 - ),
55 - array(
56 - 'title' => esc_html__('Floating Switch Styles', 'darkify'),
57 - 'type' => 'heading',
58 - 'section_start' => true,
59 - ),
60 - array(
61 43 'id' => 'enable_dark_switcher',
62 44 'type' => 'image_select',
63 45 'title' => esc_html__('Switch Toggler', 'darkify'),
64 - 'title_help' =>
65 - '<div class="darkify-info-label">' .
66 - __('Choose the default floating switch toggler.', 'darkify') .
67 - '</div>',
46 + 'title_help' => '<div class="darkify-info-label">' . __( 'Choose default floating switch toggler.', 'darkify' ) . '</div><a class="tooltip_btn_primary" href="https://darkifywp.com/switches/#switchers" target="_blank">' . __( 'Live Demo', 'darkify' ) . '</a><a class="tooltip_btn_secondary" href="https://docs.themeatelier.net/docs/darkify-pro/darkify-settings/switcher/" target="_blank">' . __( 'Open Docs', 'darkify' ) . '</a>',
68 47 'class' => 'icon_select ',
69 48 'options' => array(
70 - 'orbit' => array(
71 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/orbit.svg',
72 - 'text' => esc_html__('Orbit', 'darkify'),
73 - 'option_demo_url' => '',
74 - ),
75 -
76 49 'classic' => array(
77 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/classic.svg',
50 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/classic.svg',
78 51 'text' => esc_html__('Classic', 'darkify'),
79 52 'option_demo_url' => '',
80 53 ),
81 54
82 55 'expand' => array(
83 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/expand.svg',
56 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/expand.svg',
84 57 'text' => esc_html__('Expand', 'darkify'),
85 58 'option_demo_url' => '',
86 59 ),
87 60
88 61 'inner-moon' => array(
89 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/inner-moon.svg',
62 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/inner-moon.svg',
90 63 'text' => esc_html__('Inner Moon', 'darkify'),
91 64 'option_demo_url' => '',
92 65 ),
93 66
94 67 'within' => array(
95 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/within.svg',
68 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/within.svg',
96 69 'text' => esc_html__('Within', 'darkify'),
97 70 'option_demo_url' => '',
98 71 ),
99 72
100 73 'around' => array(
101 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/around.svg',
74 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/around.svg',
102 75 'text' => esc_html__('Around', 'darkify'),
103 76 'option_demo_url' => '',
104 77 'pro_only' => true,
105 78 ),
@@ -104,9 +77,9 @@
104 77 'pro_only' => true,
105 78 ),
106 79
107 80 'dark-side' => array(
108 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-side.svg',
81 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/dark-side.svg',
109 82 'text' => esc_html__('Dark Side', 'darkify'),
110 83 'option_demo_url' => '',
111 84 'pro_only' => true,
112 85 ),
@@ -111,9 +84,9 @@
111 84 'pro_only' => true,
112 85 ),
113 86
114 87 'horizon' => array(
115 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/horizon.svg',
88 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/horizon.svg',
116 89 'text' => esc_html__('Horizon', 'darkify'),
117 90 'option_demo_url' => '',
118 91 'pro_only' => true,
119 92 ),
@@ -118,9 +91,9 @@
118 91 'pro_only' => true,
119 92 ),
120 93
121 94 'eclipse' => array(
122 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/eclipse.svg',
95 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/eclipse.svg',
123 96 'text' => esc_html__('Eclipse', 'darkify'),
124 97 'option_demo_url' => '',
125 98 'pro_only' => true,
126 99 ),
@@ -125,9 +98,9 @@
125 98 'pro_only' => true,
126 99 ),
127 100
128 101 'lightbulb' => array(
129 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/lightbulb.svg',
102 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/lightbulb.svg',
130 103 'text' => esc_html__('Lightbulb', 'darkify'),
131 104 'option_demo_url' => '',
132 105 'pro_only' => true,
133 106 ),
@@ -132,9 +105,9 @@
132 105 'pro_only' => true,
133 106 ),
134 107
135 108 'dark-inner' => array(
136 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-inner.svg',
109 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/dark-inner.svg',
137 110 'text' => esc_html__('Dark Inner', 'darkify'),
138 111 'option_demo_url' => '',
139 112 'pro_only' => true,
140 113 ),
@@ -139,9 +112,9 @@
139 112 'pro_only' => true,
140 113 ),
141 114
142 115 'half-sun' => array(
143 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/half-sun.svg',
116 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/half-sun.svg',
144 117 'text' => esc_html__('Half Sun', 'darkify'),
145 118 'option_demo_url' => '',
146 119 'pro_only' => true,
147 120 ),
@@ -146,70 +119,25 @@
146 119 'pro_only' => true,
147 120 ),
148 121
149 122 'simple' => array(
150 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/simple.svg',
123 + 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/simple.svg',
151 124 'text' => esc_html__('Simple', 'darkify'),
152 125 'option_demo_url' => '',
153 126 'pro_only' => true,
154 127 ),
155 - 'duality' => array(
156 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/duality.svg',
157 - 'text' => esc_html__('Duality', 'darkify'),
158 - 'option_demo_url' => '',
159 - 'pro_only' => true,
160 - ),
161 - 'dual' => array(
162 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dual.svg',
163 - 'text' => esc_html__('Dual', 'darkify'),
164 - 'option_demo_url' => '',
165 - 'pro_only' => true,
166 - ),
167 - 'shift' => array(
168 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/shift.svg',
169 - 'text' => esc_html__('Shift', 'darkify'),
170 - 'option_demo_url' => '',
171 - 'pro_only' => true,
172 - ),
128 +
173 129 ),
174 - 'default' => 'orbit',
130 + 'default' => 'classic',
175 131 ),
176 132 array(
177 - 'id' => 'switch_size',
178 - 'type' => 'button_set',
179 - 'title' => esc_html__('Switch Size', 'darkify'),
180 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the size of the floating toggle switch as you need.', 'darkify') . '</div>',
181 - 'options' => array(
182 - '0.6' => esc_html__('XS', 'darkify'),
183 - '0.8' => esc_html__('S', 'darkify'),
184 - '1' => esc_html__('M', 'darkify'),
185 - '1.2' => esc_html__('L', 'darkify'),
186 - '1.4' => esc_html__('XL', 'darkify'),
187 - '1.6' => esc_html__('XXL', 'darkify'),
188 - 'custom' => esc_html__('Custom', 'darkify'),
189 - ),
190 - 'default' => '1',
191 - ),
192 - array(
193 - 'id' => 'switch_size_custom',
194 - 'type' => 'slider',
195 - 'title' => esc_html__('Custom Switch Size', 'darkify'),
196 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Scale in percentage relative to normal size.', 'darkify') . '</div>',
197 - 'default' => '100',
198 - 'min' => 40,
199 - 'max' => 300,
200 - 'dependency' => array('switch_size', '==', 'custom')
201 - ),
202 - array(
203 133 'id' => 'switch_background',
204 134 'type' => 'color_group',
205 135 'title' => esc_html__('Switch Background', 'darkify'),
206 - 'title_help' => '<div class="darkify-info-label">' .
207 - __('Customize the floating switch background to match your design.', 'darkify') .
208 - '</div>',
209 - 'options' => array(
136 + 'title_help' => '<div class="darkify-info-label">' . __('Customize the Floating Switch background as you need.', 'darkify') . '</div>',
137 + 'options' => array(
210 138 'switch_light_mode_bg' => esc_html__('Light Mode', 'darkify'),
211 - 'switch_dark_mode_bg' => esc_html__('Dark Mode', 'darkify'),
139 + 'switch_dark_mode_bg' => esc_html__('Dark Mode', 'darkify'),
212 140 ),
213 141 'default' => array(
214 142 'switch_light_mode_bg' => '#121116',
215 143 'switch_dark_mode_bg' => '#ffffff',
@@ -214,16 +142,31 @@
214 142 'switch_light_mode_bg' => '#121116',
215 143 'switch_dark_mode_bg' => '#ffffff',
216 144 )
217 145 ),
146 +
218 147 array(
148 + 'id' => 'switch_width_height',
149 + 'type' => 'dimensions',
150 + 'title' => esc_html__('Switch Size', 'darkify'),
151 + 'title_help' => '<div class="darkify-info-label">' . __('Customize the Floating Switch width & height as you need.', 'darkify') . '</div>',
152 + 'units' => ['px'],
153 + 'width_text' => __( 'Width', 'darkify' ),
154 + 'height_text' => __( 'Height', 'darkify' ),
155 + 'default' => array(
156 + 'width' => '60',
157 + 'height' => '60',
158 + ),
159 + 'attributes' => array(
160 + 'min' => 0,
161 + ),
162 + ),
163 +
164 + array(
219 165 'id' => 'switch_icon_color',
220 166 'type' => 'color_group',
221 167 'title' => esc_html__('Switch Icon Color', 'darkify'),
222 - 'title_help' => '<div class="darkify-info-label">' .
223 - __('Customize the floating switch icon color as needed.', 'darkify') .
224 - '</div>',
225 -
168 + 'title_help' => '<div class="darkify-info-label">' . __('Customize the Floating Switch icon color as you need.', 'darkify') . '</div>',
226 169 'options' => array(
227 170 'switch_light_mode_color' => esc_html__('Light Mode', 'darkify'),
228 171 'switch_dark_mode_color' => esc_html__('Dark Mode', 'darkify'),
229 172 ),
@@ -229,28 +172,29 @@
229 172 ),
230 173 'default' => array(
231 174 'switch_light_mode_color' => '#ffffff',
232 175 'switch_dark_mode_color' => '#121116',
233 - ),
176 + )
234 177 ),
235 178 array(
179 + 'id' => 'switch_icon_size',
180 + 'type' => 'dimensions',
181 + 'title' => esc_html__('Switch Icon Size', 'darkify'),
182 + 'title_help' => '<div class="darkify-info-label">' . __('Customize the Selected Switch Icon Size.', 'darkify') . '</div>',
183 + 'height' => false,
184 + 'units' => ['px'],
185 + 'default' => array(
186 + 'width' => '40',
187 + )
188 + ),
189 + array(
236 190 'id' => 'switch_border',
237 191 'type' => 'border',
238 - 'title' => esc_html__('Switch Border', 'darkify'),
239 - 'title_help' =>
240 - '<div class="darkify-info-label">' .
241 - __('Customize the floating switch border and border radius.', 'darkify') .
242 - '</div>' .
243 - '' .
244 - '',
192 + 'title' => __( 'Switch Border', 'darkify' ),
193 + 'title_help' => '<div class="darkify-info-label">' . __('Customize the Floating Switch border & border radius as you need.', 'darkify') . '</div>',
245 194 'color' => true,
246 195 'style' => false,
247 196 'color2' => false,
248 - // The switch has a separate border colour per mode: `color` is
249 - // light, `color3` is dark. Both are read by
250 - // DarkifyUtils::generateSwitchStyles() and the [darkify]
251 - // shortcode, so the dark one needs a control of its own.
252 - 'color3' => true,
253 197 'all' => true,
254 198 'radius' => true,
255 199 'default' => array(
256 200 'color' => '#121116',
@@ -259,30 +203,96 @@
259 203 'radius' => 7,
260 204 ),
261 205 ),
262 206 array(
263 - 'title' => esc_html__('Switch Positioning', 'darkify'),
264 - 'type' => 'heading',
265 - 'section_start' => true,
207 + 'id' => 'tooltip_on_floating_switch',
208 + 'type' => 'fieldset',
209 + 'fields' => array(
210 + array(
211 + 'id' => 'floating_switch_width',
212 + 'type' => 'switcher',
213 + 'title' => esc_html__('Tooltip On Floating Switch', 'darkify'),
214 + 'title_help' => '<div class="darkify-info-label">' . __('Want to show a hint on dark mode floating switch as tooltip?', 'darkify') . '</div>',
215 + 'text_on' => esc_html__('Enabled', 'darkify'),
216 + 'text_off' => esc_html__('Disabled', 'darkify'),
217 + 'text_width' => 100,
218 + 'default' => false,
219 + ),
220 + array(
221 + 'id' => 'tooltip_position',
222 + 'type' => 'button_set',
223 + 'title' => esc_html__('Tooltip Position', 'darkify'),
224 + 'title_help' => '<div class="darkify-info-label">' . __('Choose the position where the tooltip should be displaed relative to the floating switch.', 'darkify') . '</div>',
225 + 'options' => array(
226 + 'left' => esc_html__('Left', 'darkify'),
227 + 'right' => esc_html__('Right', 'darkify'),
228 + 'top' => esc_html__('Top', 'darkify'),
229 + 'bottom' => esc_html__('Bottom', 'darkify'),
230 + ),
231 + 'default' => 'left',
232 + 'dependency' => array('floating_switch_width', '==', 'true'),
233 + ),
234 + array(
235 + 'id' => 'tooltip_text',
236 + 'type' => 'text',
237 + 'title' => esc_html__('Tooltip Text', 'darkify'),
238 + 'title_help' => '<div class="darkify-info-label">' . __('Customize text to be displayed on the tooltip.', 'darkify') . '</div>',
239 + 'default' => esc_html__('Toggle Dark Mode', 'darkify'),
240 + 'dependency' => array('floating_switch_width', '==', 'true'),
241 + ),
242 +
243 + array(
244 + 'id' => 'tooltip_color',
245 + 'type' => 'color_group',
246 + 'title' => esc_html__('Tooltip Color', 'darkify'),
247 + 'title_help' => '<div class="darkify-info-label">' . __('Customize tooltip design in your way.', 'darkify') . '</div>',
248 + 'options' => array(
249 + 'tooltip_background_color' => esc_html__('Background', 'darkify'),
250 + 'tooltip_text_color' => esc_html__('Color', 'darkify'),
251 + ),
252 + 'default' => array(
253 + 'tooltip_background_color' => '#142434',
254 + 'tooltip_text_color' => '#B0CBE7',
255 + ),
256 + 'dependency' => array('floating_switch_width', '==', 'true'),
257 + ),
258 +
259 + ),
266 260 ),
267 261 array(
262 + 'id' => 'alternative_dark_mode_switcher',
263 + 'type' => 'text',
264 + 'title' => esc_html__('Alternative Dark Mode Switch', 'darkify'),
265 + 'title_help' => '<div class="darkify-info-label">' . __('Enter comma-separated CSS class or ID selectors to treat them as dark mode switch.', 'darkify') . '</div>',
266 + ),
267 + array(
268 + 'id' => 'switcher_shortcode',
269 + 'type' => 'switcher_shortcode',
270 + 'title' => esc_html__('Switcher Shortcode', 'darkify'),
271 + 'title_help' => esc_html__('Copy this shortcode and put any page or post to show switcher. You will able to customize all value including swtich 1-4 currently available in this version of plugin.', 'darkify'),
272 + ),
273 + )
274 + ),
275 + array(
276 + 'title' => esc_html__('Positioning', 'darkify'),
277 + 'icon' => 'icofont-hand-drag',
278 + 'fields' => array(
279 +
280 + // Switch Position
281 + array(
268 282 'id' => 'switcher_button_position',
269 283 'type' => 'fieldset',
270 284 'fields' => array(
271 285 array(
272 286 'id' => 'dark_mode_switch_position',
273 - // Corner tiles rather than a button row: the choice is
274 - // spatial, so the diagram reads faster than the words.
275 - // Presentation only — the stored keys, the default and
276 - // the dependencies below are unchanged.
277 - 'type' => 'position_select',
287 + 'type' => 'button_set',
278 288 'title' => esc_html__('Switch Position', 'darkify'),
279 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the screen position where the Floating Switch should be displayed.', 'darkify') . '</div>',
280 - 'options' => array(
289 + 'title_help' => '<div class="darkify-info-label">' . __('Choose the screen position where the Floating Switch should be displayed.', 'darkify') . '</div>',
290 + 'options' => array(
281 291 'bottom_right' => esc_html__('Bottom Right', 'darkify'),
282 - 'bottom_left' => esc_html__('Bottom Left', 'darkify'),
283 - 'top_right' => esc_html__('Top Right', 'darkify'),
284 - 'top_left' => esc_html__('Top Left', 'darkify'),
292 + 'bottom_left' => esc_html__('Bottom Left', 'darkify'),
293 + 'top_right' => esc_html__('Top Right', 'darkify'),
294 + 'top_left' => esc_html__('Top Left', 'darkify'),
285 295 ),
286 296 'default' => 'bottom_right',
287 297 ),
288 298 array(
@@ -288,9 +298,9 @@
288 298 array(
289 299 'id' => 'switch_position_top_right',
290 300 'type' => 'spacing',
291 301 'title' => esc_html__('Margin From Top Right', 'darkify'),
292 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the top right of the Floating Switch.', 'darkify') . '</div>',
302 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the top right of the Floating Switch.', 'darkify') . '</div>',
293 303 'left' => false,
294 304 'bottom' => false,
295 305 'units' => ['px'],
296 306 'default' => array(
@@ -302,9 +312,9 @@
302 312 array(
303 313 'id' => 'switch_position_top_left',
304 314 'type' => 'spacing',
305 315 'title' => esc_html__('Margin From Top Left', 'darkify'),
306 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the top left of the Floating Switch.', 'darkify') . '</div>',
316 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the top left of the Floating Switch.', 'darkify') . '</div>',
307 317 'right' => false,
308 318 'bottom' => false,
309 319 'units' => ['px'],
310 320 'default' => array(
@@ -316,9 +326,9 @@
316 326 array(
317 327 'id' => 'switch_position_bottom_right',
318 328 'type' => 'spacing',
319 329 'title' => esc_html__('Margin From Bottom Right', 'darkify'),
320 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the bottom right of the Floating Switch.', 'darkify') . '</div>',
330 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the bottom right of the Floating Switch.', 'darkify') . '</div>',
321 331 'left' => false,
322 332 'top' => false,
323 333 'units' => ['px'],
324 334 'default' => array(
@@ -330,9 +340,9 @@
330 340 array(
331 341 'id' => 'switch_position_bottom_left',
332 342 'type' => 'spacing',
333 343 'title' => esc_html__('Margin From Bottom Left', 'darkify'),
334 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the bottom left of the Floating Switch.', 'darkify') . '</div>',
344 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the bottom left of the Floating Switch.', 'darkify') . '</div>',
335 345 'right' => false,
336 346 'top' => false,
337 347 'units' => ['px'],
338 348 'default' => array(
@@ -342,443 +352,11 @@
342 352 'dependency' => array('dark_mode_switch_position', '==', 'bottom_left'),
343 353 ),
344 354 ),
345 355 ),
346 - array(
347 - 'id' => 'enable_absolute_position',
348 - 'type' => 'switcher',
349 - 'title' => esc_html__('Absolute Switch Position', 'darkify'),
350 - 'text_on' => esc_html__('Enabled', 'darkify'),
351 - 'text_off' => esc_html__('Disabled', 'darkify'),
352 - 'text_width' => '100',
353 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Enable to make the floating switch scroll from its position with page scrolling.', 'darkify') . '</div>',
354 - ),
355 - array(
356 - 'id' => 'enable_switch_dragging',
357 - 'type' => 'switcher',
358 - 'title' => esc_html__('Draggable Position Change', 'darkify'),
359 - 'text_on' => esc_html__('Enabled', 'darkify'),
360 - 'text_off' => esc_html__('Disabled', 'darkify'),
361 - 'text_width' => '100',
362 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Allow/Disallow users to change the floating switch position by dragging to where they want.', 'darkify') . '</div>',
363 356
364 - // Free-only: dragging is a Pro feature, so the row renders
365 - // locked with an upgrade prompt. Pro has no such marker.
366 - 'class' => 'switcher_pro_only',
367 - ),
357 + // Different Switch Position in Mobile
368 358 array(
369 - 'title' => esc_html__('Switch Extra', 'darkify'),
370 - 'type' => 'heading',
371 - 'section_start' => true,
372 - ),
373 - array(
374 - 'id' => 'enable_switch_attention',
375 - 'type' => 'switcher',
376 - 'title' => esc_html__('Switch Attention Effect', 'darkify'),
377 - 'text_on' => esc_html__('Enabled', 'darkify'),
378 - 'text_off' => esc_html__('Disabled', 'darkify'),
379 - 'text_width' => '100',
380 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Enable an animation to draw visitor attention to the floating dark mode switch.', 'darkify') . '</div>',
381 - ),
382 - array(
383 - 'id' => 'switch_attention_effect',
384 - 'type' => 'button_set',
385 - 'title' => esc_html__('Attention Effect Style', 'darkify'),
386 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the animation style for the attention effect. Hover pauses the animation.', 'darkify') . '</div>',
387 - 'options' => array(
388 - 'pulse' => esc_html__('Pulse', 'darkify'),
389 - 'radiance' => array('label' => esc_html__('Radiance', 'darkify'), 'disabled' => true),
390 - 'leap' => array('label' => esc_html__('Leap', 'darkify'), 'disabled' => true),
391 - 'swing' => array('label' => esc_html__('Swing', 'darkify'), 'disabled' => true),
392 - 'drift' => array('label' => esc_html__('Drift', 'darkify'), 'disabled' => true),
393 - 'nudge' => array('label' => esc_html__('Nudge', 'darkify'), 'disabled' => true),
394 - ),
395 - 'default' => 'pulse',
396 - 'dependency' => array('enable_switch_attention', '==', 'true'),
397 - ),
398 - array(
399 - 'id' => 'tooltip_on_floating_switch',
400 - 'type' => 'fieldset',
401 - 'fields' => array(
402 - array(
403 - 'id' => 'floating_switch_width',
404 - 'type' => 'switcher',
405 - 'title' => esc_html__('Tooltip on Floating Switch', 'darkify'),
406 - 'title_help' =>
407 - '<div class="darkify-info-label">' .
408 - __('Display a tooltip hint on the dark mode floating switch.', 'darkify') .
409 - '</div>' .
410 - '' .
411 - '',
412 - 'text_on' => esc_html__('Enabled', 'darkify'),
413 - 'text_off' => esc_html__('Disabled', 'darkify'),
414 - 'text_width' => 100,
415 - 'default' => false,
416 - ),
417 - array(
418 - 'id' => 'tooltip_position',
419 - 'type' => 'button_set',
420 - 'title' => esc_html__('Tooltip Position', 'darkify'),
421 - 'title_help' =>
422 - '<div class="darkify-info-label">' .
423 - __('Choose where the tooltip should appear relative to the floating switch.', 'darkify') .
424 - '</div>' .
425 - '' .
426 - '',
427 - 'options' => array(
428 - 'left' => esc_html__('Left', 'darkify'),
429 - 'right' => esc_html__('Right', 'darkify'),
430 - 'top' => esc_html__('Top', 'darkify'),
431 - 'bottom' => esc_html__('Bottom', 'darkify'),
432 - ),
433 - 'default' => 'left',
434 - 'dependency' => array('floating_switch_width', '==', 'true'),
435 - ),
436 - array(
437 - 'id' => 'tooltip_text',
438 - 'type' => 'text',
439 - 'title' => esc_html__('Tooltip Text', 'darkify'),
440 - 'title_help' =>
441 - '<div class="darkify-info-label">' .
442 - __('Add tooltip text for floating switch toggler.', 'darkify') .
443 - '</div>' .
444 - '' .
445 - '',
446 - 'default' => esc_html__('Toggle Dark Mode', 'darkify'),
447 - 'dependency' => array('floating_switch_width', '==', 'true'),
448 - ),
449 -
450 - array(
451 - 'id' => 'tooltip_color',
452 - 'type' => 'color_group',
453 - 'title' => esc_html__('Tooltip Color', 'darkify'),
454 - 'title_help' =>
455 - '<div class="darkify-info-label">' .
456 - __('Customize the tooltip colors and appearance.', 'darkify') .
457 - '</div>',
458 - 'options' => array(
459 - 'tooltip_background_color' => esc_html__('Background', 'darkify'),
460 - 'tooltip_text_color' => esc_html__('Color', 'darkify'),
461 - ),
462 - 'default' => array(
463 - 'tooltip_background_color' => '#142434',
464 - 'tooltip_text_color' => '#B0CBE7',
465 - ),
466 - 'dependency' => array('floating_switch_width', '==', 'true'),
467 - ),
468 -
469 - ),
470 - ),
471 - array(
472 - 'title' => esc_html__('Switch Visibility', 'darkify'),
473 - 'type' => 'heading',
474 - 'section_start' => true,
475 - ),
476 - array(
477 - 'id' => 'hide_on_desktop',
478 - 'type' => 'switcher',
479 - 'title' => esc_html__('Hide Dark Mode Switch on Desktop', 'darkify'),
480 - 'title_help' =>
481 - '<div class="darkify-info-label">' .
482 - __('Hide the dark mode floating switch when users are browsing on a desktop or laptop.', 'darkify') .
483 - '</div>' .
484 - '' .
485 - '',
486 -
487 - 'text_on' => esc_html__('Yes', 'darkify'),
488 - 'text_off' => esc_html__('No', 'darkify'),
489 -
490 - ),
491 - array(
492 - 'id' => 'hide_on_mobile',
493 - 'type' => 'fieldset',
494 - 'fields' => array(
495 - array(
496 - 'id' => 'hide_dark_mode_on_mobile',
497 - 'type' => 'switcher',
498 - 'title' => esc_html__('Hide Dark Mode on Mobile', 'darkify'),
499 - 'title_help' =>
500 - '<div class="darkify-info-label">' .
501 - __('Hide the dark mode floating switch when users are browsing on mobile devices.', 'darkify') .
502 - '</div>' .
503 - '' .
504 - '',
505 -
506 - 'text_on' => esc_html__('Yes', 'darkify'),
507 - 'text_off' => esc_html__('No', 'darkify'),
508 -
509 - ),
510 - array(
511 - 'id' => 'type_of_hide_by',
512 - 'type' => 'button_set',
513 - 'title' => esc_html__('Hide Detection Method', 'darkify'),
514 -
515 - 'title_help' =>
516 - '<div class="darkify-info-label">' .
517 - __('Choose how mobile devices are detected: by User Agent, by Screen Size, or use Both for maximum accuracy.', 'darkify') .
518 - '</div>' .
519 - '' .
520 - '',
521 -
522 - 'options' => array(
523 - 'user_agent' => esc_html__('User Agent', 'darkify'),
524 - 'screen_size' => esc_html__('Screen Size', 'darkify'),
525 - 'both' => esc_html__('Both', 'darkify'),
526 - ),
527 -
528 - 'default' => 'both',
529 - 'dependency' => array('hide_dark_mode_on_mobile', '==', 'true'),
530 - ),
531 - ),
532 - ),
533 - array(
534 - 'title' => esc_html__('Mobile Switch', 'darkify'),
535 - 'type' => 'heading',
536 - 'section_start' => true,
537 - ),
538 - array(
539 - 'id' => 'dark_switcher_switch_in_mobile',
540 - 'type' => 'switcher',
541 - 'title' => esc_html__('Different Switch in Mobile', 'darkify'),
542 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Should the Floating Switch be displayed on different in mobile?', 'darkify') . '</div>',
543 - 'text_on' => esc_html__('Yes', 'darkify'),
544 - 'text_off' => esc_html__('No', 'darkify'),
545 - ),
546 - array(
547 - 'id' => 'enable_dark_switcher_in_mobile',
548 - 'type' => 'image_select',
549 - 'title' => esc_html__('Switch Toggler', 'darkify'),
550 - 'title_help' =>
551 - '<div class="darkify-info-label">' .
552 - __('Choose the default floating switch toggler.', 'darkify') .
553 - '</div>' .
554 - '' .
555 - '',
556 - 'class' => 'icon_select ',
557 - 'options' => array(
558 - 'orbit' => array(
559 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/orbit.svg',
560 - 'text' => esc_html__('Orbit', 'darkify'),
561 - 'option_demo_url' => '',
562 - ),
563 -
564 - 'classic' => array(
565 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/classic.svg',
566 - 'text' => esc_html__('Classic', 'darkify'),
567 - 'option_demo_url' => '',
568 - ),
569 -
570 - 'expand' => array(
571 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/expand.svg',
572 - 'text' => esc_html__('Expand', 'darkify'),
573 - 'option_demo_url' => '',
574 - ),
575 -
576 - 'inner-moon' => array(
577 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/inner-moon.svg',
578 - 'text' => esc_html__('Inner Moon', 'darkify'),
579 - 'option_demo_url' => '',
580 - ),
581 -
582 - 'within' => array(
583 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/within.svg',
584 - 'text' => esc_html__('Within', 'darkify'),
585 - 'option_demo_url' => '',
586 - ),
587 -
588 - 'around' => array(
589 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/around.svg',
590 - 'text' => esc_html__('Around', 'darkify'),
591 - 'option_demo_url' => '',
592 - 'pro_only' => true,
593 - ),
594 -
595 - 'dark-side' => array(
596 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-side.svg',
597 - 'text' => esc_html__('Dark Side', 'darkify'),
598 - 'option_demo_url' => '',
599 - 'pro_only' => true,
600 - ),
601 -
602 - 'horizon' => array(
603 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/horizon.svg',
604 - 'text' => esc_html__('Horizon', 'darkify'),
605 - 'option_demo_url' => '',
606 - 'pro_only' => true,
607 - ),
608 -
609 - 'eclipse' => array(
610 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/eclipse.svg',
611 - 'text' => esc_html__('Eclipse', 'darkify'),
612 - 'option_demo_url' => '',
613 - 'pro_only' => true,
614 - ),
615 -
616 - 'lightbulb' => array(
617 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/lightbulb.svg',
618 - 'text' => esc_html__('Lightbulb', 'darkify'),
619 - 'option_demo_url' => '',
620 - 'pro_only' => true,
621 - ),
622 -
623 - 'dark-inner' => array(
624 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-inner.svg',
625 - 'text' => esc_html__('Dark Inner', 'darkify'),
626 - 'option_demo_url' => '',
627 - 'pro_only' => true,
628 - ),
629 -
630 - 'half-sun' => array(
631 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/half-sun.svg',
632 - 'text' => esc_html__('Half Sun', 'darkify'),
633 - 'option_demo_url' => '',
634 - 'pro_only' => true,
635 - ),
636 -
637 - 'simple' => array(
638 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/simple.svg',
639 - 'text' => esc_html__('Simple', 'darkify'),
640 - 'option_demo_url' => '',
641 - 'pro_only' => true,
642 - ),
643 - 'duality' => array(
644 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/duality.svg',
645 - 'text' => esc_html__('Duality', 'darkify'),
646 - 'option_demo_url' => '',
647 - 'pro_only' => true,
648 - ),
649 - 'dual' => array(
650 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dual.svg',
651 - 'text' => esc_html__('Dual', 'darkify'),
652 - 'option_demo_url' => '',
653 - 'pro_only' => true,
654 - ),
655 - 'shift' => array(
656 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/shift.svg',
657 - 'text' => esc_html__('Shift', 'darkify'),
658 - 'option_demo_url' => '',
659 - 'pro_only' => true,
660 - ),
661 - ),
662 - 'default' => 'orbit',
663 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
664 - ),
665 - array(
666 - 'id' => 'switch_size_in_mobile',
667 - 'type' => 'button_set',
668 - 'title' => esc_html__('Switch Size', 'darkify'),
669 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the size of the floating toggle switch as you need.', 'darkify') . '</div>',
670 - 'options' => array(
671 - '0.6' => esc_html__('XS', 'darkify'),
672 - '0.8' => esc_html__('S', 'darkify'),
673 - '1' => esc_html__('M', 'darkify'),
674 - '1.2' => esc_html__('L', 'darkify'),
675 - '1.4' => esc_html__('XL', 'darkify'),
676 - '1.6' => esc_html__('XXL', 'darkify'),
677 - 'custom' => esc_html__('Custom', 'darkify'),
678 - ),
679 - 'default' => '1',
680 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
681 - ),
682 - array(
683 - 'id' => 'switch_size_custom_in_mobile',
684 - 'type' => 'slider',
685 - 'title' => esc_html__('Custom Switch Size', 'darkify'),
686 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Scale in percentage relative to normal size.', 'darkify') . '</div>',
687 - 'default' => '100',
688 - 'min' => 40,
689 - 'max' => 300,
690 - 'dependency' => array('switch_size_in_mobile|dark_switcher_switch_in_mobile', '==|==', 'custom|true')
691 - ),
692 - array(
693 - 'id' => 'switch_background_in_mobile',
694 - 'type' => 'color_group',
695 - 'title' => esc_html__('Switch Background', 'darkify'),
696 - 'title_help' => '<div class="darkify-info-label">' .
697 - __('Customize the floating switch background to match your design.', 'darkify') .
698 - '</div>',
699 - 'options' => array(
700 - 'switch_light_mode_bg' => esc_html__('Light Mode', 'darkify'),
701 - 'switch_dark_mode_bg' => esc_html__('Dark Mode', 'darkify'),
702 - ),
703 - 'default' => array(
704 - 'switch_light_mode_bg' => '#121116',
705 - 'switch_dark_mode_bg' => '#ffffff',
706 - ),
707 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
708 - ),
709 - array(
710 - 'id' => 'switch_icon_color_in_mobile',
711 - 'type' => 'color_group',
712 - 'title' => esc_html__('Switch Icon Color', 'darkify'),
713 - 'title_help' => '<div class="darkify-info-label">' .
714 - __('Customize the floating switch icon color as needed.', 'darkify') .
715 - '</div>',
716 -
717 - 'options' => array(
718 - 'switch_light_mode_color' => esc_html__('Light Mode', 'darkify'),
719 - 'switch_dark_mode_color' => esc_html__('Dark Mode', 'darkify'),
720 - ),
721 - 'default' => array(
722 - 'switch_light_mode_color' => '#ffffff',
723 - 'switch_dark_mode_color' => '#121116',
724 - ),
725 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
726 - ),
727 - array(
728 - 'id' => 'switch_border_in_mobile',
729 - 'type' => 'border',
730 - 'title' => esc_html__('Switch Border', 'darkify'),
731 - 'title_help' =>
732 - '<div class="darkify-info-label">' .
733 - __('Customize the floating switch border and border radius.', 'darkify') .
734 - '</div>' .
735 - '' .
736 - '',
737 - 'color' => true,
738 - 'style' => false,
739 - 'color2' => false,
740 - // Light (`color`) / dark (`color3`) border colours — see the
741 - // desktop Switch Border field above.
742 - 'color3' => true,
743 - 'all' => true,
744 - 'radius' => true,
745 - 'default' => array(
746 - 'color' => '#121116',
747 - 'color3' => '#ffffff',
748 - 'all' => 0,
749 - 'radius' => 7,
750 - ),
751 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
752 - ),
753 -
754 - array(
755 - 'id' => 'enable_switch_attention_in_mobile',
756 - 'type' => 'switcher',
757 - 'title' => esc_html__('Switch Attention Effect', 'darkify'),
758 - 'text_on' => esc_html__('Enabled', 'darkify'),
759 - 'text_off' => esc_html__('Disabled', 'darkify'),
760 - 'text_width' => '100',
761 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Enable an animation to draw visitor attention to the floating dark mode switch.', 'darkify') . '</div>',
762 - 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'),
763 - ),
764 - array(
765 - 'id' => 'switch_attention_effect_in_mobile',
766 - 'type' => 'button_set',
767 - 'title' => esc_html__('Attention Effect Style', 'darkify'),
768 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the animation style for the attention effect. Hover pauses the animation.', 'darkify') . '</div>',
769 - 'options' => array(
770 - 'pulse' => esc_html__('Pulse', 'darkify'),
771 - 'radiance' => array('label' => esc_html__('Radiance', 'darkify'), 'disabled' => true),
772 - 'leap' => array('label' => esc_html__('Leap', 'darkify'), 'disabled' => true),
773 - 'swing' => array('label' => esc_html__('Swing', 'darkify'), 'disabled' => true),
774 - 'drift' => array('label' => esc_html__('Drift', 'darkify'), 'disabled' => true),
775 - 'nudge' => array('label' => esc_html__('Nudge', 'darkify'), 'disabled' => true),
776 - ),
777 - 'default' => 'pulse',
778 - 'dependency' => array('enable_switch_attention_in_mobile|dark_switcher_switch_in_mobile', '==|==', 'true|true'),
779 - ),
780 - array(
781 359 'id' => 'different_switch_in_mobile',
782 360 'type' => 'fieldset',
783 361 'fields' => array(
784 362 array(
@@ -784,25 +362,24 @@
784 362 array(
785 363 'id' => 'switch_position_different_in_mobile',
786 364 'type' => 'switcher',
787 365 'title' => esc_html__('Different Switch Position in Mobile', 'darkify'),
788 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Should the Floating Switch be displayed on different position in mobile?', 'darkify') . '</div>',
366 + 'title_help' => '<div class="darkify-info-label">' . __('CShould the Floating Switch be displayed on different position in mobile?', 'darkify') . '</div>',
789 367 'text_on' => esc_html__('Yes', 'darkify'),
790 368 'text_off' => esc_html__('No', 'darkify'),
791 -
369 +
792 370 ),
793 371 array(
794 372 'id' => 'switch_position_in_mobile',
795 - 'type' => 'position_select',
373 + 'type' => 'button_set',
796 374 'title' => esc_html__('Switch Position in Mobile', 'darkify'),
797 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the screen position where the Floating Switch should be displayed in mobile.', 'darkify') . '</div>',
798 - 'options' => array(
799 - 'bottom_right' => esc_html__('Bottom Right', 'darkify'),
800 - 'bottom_left' => esc_html__('Bottom Left', 'darkify'),
801 - 'top_right' => esc_html__('Top Right', 'darkify'),
802 - 'top_left' => esc_html__('Top Left', 'darkify'),
375 + 'title_help' => '<div class="darkify-info-label">' . __('Choose the screen position where the Floating Switch should be displayed in mobile.', 'darkify') . '</div>',
376 + 'options' => array(
377 + 'bottom_right' => esc_html__('Bottom Right', 'darkify'),
378 + 'bottom_left' => esc_html__('Bottom Left', 'darkify'),
379 + 'top_right' => esc_html__('Top Right', 'darkify'),
380 + 'top_left' => esc_html__('Top Left', 'darkify'),
803 381 ),
804 -
805 382 'default' => 'bottom_right',
806 383 'dependency' => array('switch_position_different_in_mobile', '==', 'true'),
807 384 ),
808 385 array(
@@ -808,9 +385,9 @@
808 385 array(
809 386 'id' => 'switch_position_top_right_in_mobile',
810 387 'type' => 'spacing',
811 388 'title' => esc_html__('Margin From Top Right in Mobile', 'darkify'),
812 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the top right of the Floating Switch.', 'darkify') . '</div>',
389 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the top right of the Floating Switch.', 'darkify') . '</div>',
813 390 'left' => false,
814 391 'bottom' => false,
815 392 'units' => ['px'],
816 393 'default' => array(
@@ -822,9 +399,9 @@
822 399 array(
823 400 'id' => 'switch_position_top_left_in_mobile',
824 401 'type' => 'spacing',
825 402 'title' => esc_html__('Margin From Top Left in Mobile', 'darkify'),
826 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the top left of the Floating Switch.', 'darkify') . '</div>',
403 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the top left of the Floating Switch.', 'darkify') . '</div>',
827 404 'right' => false,
828 405 'bottom' => false,
829 406 'units' => ['px'],
830 407 'default' => array(
@@ -836,9 +413,9 @@
836 413 array(
837 414 'id' => 'switch_position_bottom_right_in_mobile',
838 415 'type' => 'spacing',
839 416 'title' => esc_html__('Margin From Bottom Right in Mobile', 'darkify'),
840 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the bottom right of the Floating Switch.', 'darkify') . '</div>',
417 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the bottom right of the Floating Switch.', 'darkify') . '</div>',
841 418 'left' => false,
842 419 'top' => false,
843 420 'units' => ['px'],
844 421 'default' => array(
@@ -850,9 +427,9 @@
850 427 array(
851 428 'id' => 'switch_position_bottom_left_in_mobile',
852 429 'type' => 'spacing',
853 430 'title' => esc_html__('Margin From Bottom Left in Mobile', 'darkify'),
854 - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Customize default margin from the bottom left of the Floating Switch.', 'darkify') . '</div>',
431 + 'title_help' => '<div class="darkify-info-label">' . __('Customize default margin from the bottom left of the Floating Switch.', 'darkify') . '</div>',
855 432 'right' => false,
856 433 'top' => false,
857 434 'units' => ['px'],
858 435 'default' => array(
@@ -862,398 +439,26 @@
862 439 'dependency' => array('switch_position_different_in_mobile|switch_position_in_mobile', '==|==', 'true|bottom_left'),
863 440 ),
864 441 ),
865 442 ),
866 - )
867 - ),
868 - array(
869 - 'id' => 'other-switches',
870 - 'title' => esc_html__('Other Switches', 'darkify'),
871 - 'icon' => 'icofont-toggle-off',
872 - 'fields' => array(
873 - // Intro line, rendered plain above the section cards.
874 443 array(
875 - 'type' => 'page_hint',
876 - 'content' => esc_html__('Add dark-mode switches inside menus or anywhere on your site with a shortcode, and register custom elements as switches.', 'darkify'),
444 + 'id' => 'enable_absolute_position',
445 + 'type' => 'switcher',
446 + 'title' => esc_html__('Absolute Switch Position', 'darkify'),
447 + 'text_on' => esc_html__('Enabled', 'darkify'),
448 + 'text_off' => esc_html__('Disabled', 'darkify'),
449 + 'text_width' => '100',
450 + 'title_help' => '<div class="darkify-info-label">' . __('Enable to make the floating switch scroll from its position with page scrolling.', 'darkify') . '</div>',
877 451 ),
878 452 array(
879 - 'title' => esc_html__('Menu Switch', 'darkify'),
880 - 'type' => 'heading',
881 - 'section_start' => true,
882 - ),
883 - array(
884 - 'id' => 'show_in_menu',
885 - 'type' => 'fieldset',
886 - // Divide the master toggle from the per-switch group below it.
887 - 'class' => 'fieldset-divided',
888 - 'fields' => array(
889 - array(
890 - 'id' => 'enable_switch_in_menu',
891 - 'type' => 'switcher',
892 - 'title' => esc_html__('Enable Menu Switch', 'darkify'),
893 -
894 - 'title_help' =>
895 - '<div class="darkify-info-label">' .
896 - __('Display a dark mode switch inside a WordPress menu.', 'darkify') .
897 - '</div>' .
898 - '' .
899 - '',
900 -
901 - 'text_on' => esc_html__('Yes', 'darkify'),
902 - 'text_off' => esc_html__('No', 'darkify'),
903 -
904 - ),
905 - array(
906 - 'id' => 'select_menus',
907 - 'type' => 'group',
908 - 'title' => esc_html__('Menu Switches', 'darkify'),
909 -
910 - 'title_help' =>
911 - '<div class="darkify-info-label">' .
912 - __('Choose the menu and position for your switch.', 'darkify') .
913 - '</div>' .
914 - '' .
915 - '',
916 -
917 - 'add_more_text' => sprintf(
918 - /* translators: %s: URL to the Darkify Pro pricing page. */
919 - __(
920 - 'Want to use the switch in an unlimited number of menus? <a target="_blank" href="%s"><strong>Upgrade to Pro</strong></a>.',
921 - 'darkify'
922 - ),
923 - esc_url(DARKIFY_DEMO_URL . 'pricing/?ref=1')
924 - ),
925 -
926 - // Same accordion-title pattern as Pro (menu name + placement
927 - // once chosen, numbered "Menu Switch #1" fallback before
928 - // that) — kept in sync even though Free is capped at one row.
929 - 'accordion_title_number' => false,
930 - 'accordion_title_auto' => true,
931 - 'accordion_title_by' => array('switch_in_menu_location', 'select_menu_position'),
932 - 'accordion_title_by_prefix' => ' — ',
933 - 'accordion_title_require' => 'switch_in_menu_location',
934 - 'row_title' => esc_html__('Menu Switch', 'darkify'),
935 - 'class' => 'select_menus',
936 - 'empty_title' => esc_html__('No menu switches configured', 'darkify'),
937 - 'empty_desc' => esc_html__('Add a switch and choose the WordPress menu where it should appear.', 'darkify'),
938 - 'button_title' => esc_html__('Add Menu Switch', 'darkify'),
939 - 'max' => 1,
940 -
941 - 'fields' => array(
942 - array(
943 - 'id' => 'switch_in_menu_location',
944 - 'type' => 'select',
945 - 'class' => 'select_menu_location',
946 - 'title' => esc_html__('Menu', 'darkify'),
947 - 'title_help' =>
948 - '<div class="darkify-info-label">' .
949 - esc_html__('Choose the WordPress menu where this switch should appear.', 'darkify') .
950 - '</div>' .
951 - '' .
952 - '',
953 - 'placeholder' => esc_html__('Choose a menu…', 'darkify'),
954 - 'empty_message' => esc_html__(
955 - 'You have not created a menu yet. If you are using a Full Site Editing (FSE) theme, copy the shortcode below and paste it where you want the switch to appear.',
956 - 'darkify'
957 - ),
958 - 'options' => 'menus',
959 - ),
960 - array(
961 - 'id' => 'select_menu_position',
962 - 'type' => 'button_set',
963 - 'title' => esc_html__('Switch Placement', 'darkify'),
964 - 'title_help' =>
965 - '<div class="darkify-info-label">' .
966 - esc_html__('Choose whether the dark mode switch appears at the beginning or end of the selected menu.', 'darkify') .
967 - '</div>' .
968 - '' .
969 - '',
970 -
971 - // Options relabeled for clarity; keys unchanged
972 - // ('after'/'before') so existing saved rows keep
973 - // their exact stored placement.
974 - 'options' => array(
975 - 'after' => esc_html__('End of Menu', 'darkify'),
976 - 'before' => esc_html__('Beginning of Menu', 'darkify'),
977 - ),
978 -
979 - 'default' => 'after',
980 - ),
981 - array(
982 - 'id' => 'darkify_menu_shortcode_helper',
983 - 'type' => 'menu_switch_shortcode',
984 - 'title' => esc_html__('Shortcode', 'darkify'),
985 - 'title_help' =>
986 - '<div class="darkify-info-label">' .
987 - __('Automatically generated from the settings above.', 'darkify') .
988 - '</div>' .
989 - '' .
990 - '',
991 - 'default' => '[darkify switch="1"]',
992 - ),
993 - ),
994 - 'dependency' => array('enable_switch_in_menu', '==', 'true'),
995 - ),
996 - ),
997 - ),
998 - array(
999 - 'title' => esc_html__('Shortcode', 'darkify'),
1000 - 'type' => 'heading',
1001 - 'section_start' => true,
1002 - ),
1003 - array(
1004 - 'id' => 'shortcode_use_global_switch_settings',
1005 - 'type' => 'switcher',
1006 - 'title' => esc_html__('Use Global Switch Settings', 'darkify'),
1007 - 'title_help' =>
1008 - '<div class="darkify-info-label">' .
1009 - __('Use the same switch style, size, and colors as your site-wide floating switch. Turn this off to customize this shortcode independently, without changing the floating switch.', 'darkify') .
1010 - '</div>',
1011 - 'text_on' => esc_html__('Yes', 'darkify'),
1012 - 'text_off' => esc_html__('No', 'darkify'),
1013 - // Off by default so the customizable style controls are visible.
1014 - 'default' => false,
1015 - ),
1016 - // Mirrors the Floating Switch's own style controls (same field
1017 - // ids, nested here) so `buildSwitcherShortcode()` on the React
1018 - // side can generate this shortcode's styling exactly the same
1019 - // way it does for the global one. `pro_only` flags on the style
1020 - // options match the Floating Switch tab's own list so this panel
1021 - // can't be used to bypass the tier gate on switch styles.
1022 - array(
1023 - 'id' => 'shortcode_custom_switch_settings',
1024 - 'type' => 'fieldset',
1025 - 'title' => esc_html__('Custom Switch Style', 'darkify'),
1026 - 'title_help' =>
1027 - '<div class="darkify-info-label">' .
1028 - __('These settings apply only to this shortcode, not your site-wide floating switch.', 'darkify') .
1029 - '</div>',
1030 - 'dependency' => array('shortcode_use_global_switch_settings', '==', 'false'),
1031 - 'fields' => array(
1032 - array(
1033 - 'id' => 'enable_dark_switcher',
1034 - 'type' => 'image_select',
1035 - 'title' => esc_html__('Switch Style', 'darkify'),
1036 - 'class' => 'icon_select ',
1037 - 'options' => array(
1038 - 'orbit' => array(
1039 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/orbit.svg',
1040 - 'text' => esc_html__('Orbit', 'darkify'),
1041 - 'option_demo_url' => '',
1042 - ),
1043 - 'classic' => array(
1044 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/classic.svg',
1045 - 'text' => esc_html__('Classic', 'darkify'),
1046 - 'option_demo_url' => '',
1047 - ),
1048 - 'expand' => array(
1049 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/expand.svg',
1050 - 'text' => esc_html__('Expand', 'darkify'),
1051 - 'option_demo_url' => '',
1052 - ),
1053 - 'inner-moon' => array(
1054 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/inner-moon.svg',
1055 - 'text' => esc_html__('Inner Moon', 'darkify'),
1056 - 'option_demo_url' => '',
1057 - ),
1058 - 'within' => array(
1059 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/within.svg',
1060 - 'text' => esc_html__('Within', 'darkify'),
1061 - 'option_demo_url' => '',
1062 - ),
1063 - 'around' => array(
1064 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/around.svg',
1065 - 'text' => esc_html__('Around', 'darkify'),
1066 - 'option_demo_url' => '',
1067 - 'pro_only' => true,
1068 - ),
1069 - 'dark-side' => array(
1070 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-side.svg',
1071 - 'text' => esc_html__('Dark Side', 'darkify'),
1072 - 'option_demo_url' => '',
1073 - 'pro_only' => true,
1074 - ),
1075 - 'horizon' => array(
1076 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/horizon.svg',
1077 - 'text' => esc_html__('Horizon', 'darkify'),
1078 - 'option_demo_url' => '',
1079 - 'pro_only' => true,
1080 - ),
1081 - 'eclipse' => array(
1082 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/eclipse.svg',
1083 - 'text' => esc_html__('Eclipse', 'darkify'),
1084 - 'option_demo_url' => '',
1085 - 'pro_only' => true,
1086 - ),
1087 - 'lightbulb' => array(
1088 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/lightbulb.svg',
1089 - 'text' => esc_html__('Lightbulb', 'darkify'),
1090 - 'option_demo_url' => '',
1091 - 'pro_only' => true,
1092 - ),
1093 - 'dark-inner' => array(
1094 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-inner.svg',
1095 - 'text' => esc_html__('Dark Inner', 'darkify'),
1096 - 'option_demo_url' => '',
1097 - 'pro_only' => true,
1098 - ),
1099 - 'half-sun' => array(
1100 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/half-sun.svg',
1101 - 'text' => esc_html__('Half Sun', 'darkify'),
1102 - 'option_demo_url' => '',
1103 - 'pro_only' => true,
1104 - ),
1105 - 'simple' => array(
1106 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/simple.svg',
1107 - 'text' => esc_html__('Simple', 'darkify'),
1108 - 'option_demo_url' => '',
1109 - 'pro_only' => true,
1110 - ),
1111 - 'duality' => array(
1112 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/duality.svg',
1113 - 'text' => esc_html__('Duality', 'darkify'),
1114 - 'option_demo_url' => '',
1115 - 'pro_only' => true,
1116 - ),
1117 - 'dual' => array(
1118 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dual.svg',
1119 - 'text' => esc_html__('Dual', 'darkify'),
1120 - 'option_demo_url' => '',
1121 - 'pro_only' => true,
1122 - ),
1123 - 'shift' => array(
1124 - 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/shift.svg',
1125 - 'text' => esc_html__('Shift', 'darkify'),
1126 - 'option_demo_url' => '',
1127 - 'pro_only' => true,
1128 - ),
1129 - ),
1130 - 'default' => 'orbit',
1131 - ),
1132 - array(
1133 - 'id' => 'switch_size',
1134 - 'type' => 'button_set',
1135 - 'title' => esc_html__('Switch Size', 'darkify'),
1136 - 'options' => array(
1137 - '0.6' => esc_html__('XS', 'darkify'),
1138 - '0.8' => esc_html__('S', 'darkify'),
1139 - '1' => esc_html__('M', 'darkify'),
1140 - '1.2' => esc_html__('L', 'darkify'),
1141 - '1.4' => esc_html__('XL', 'darkify'),
1142 - '1.6' => esc_html__('XXL', 'darkify'),
1143 - 'custom' => esc_html__('Custom', 'darkify'),
1144 - ),
1145 - 'default' => '1',
1146 - ),
1147 - array(
1148 - 'id' => 'switch_size_custom',
1149 - 'type' => 'slider',
1150 - 'title' => esc_html__('Custom Switch Size', 'darkify'),
1151 - 'title_help' => '<div class="darkify-info-desc">' . esc_html__('Scale in percentage relative to normal size.', 'darkify') . '</div>',
1152 - 'default' => '100',
1153 - 'min' => 40,
1154 - 'max' => 300,
1155 - 'dependency' => array('switch_size', '==', 'custom'),
1156 - ),
1157 - array(
1158 - 'id' => 'switch_background',
1159 - 'type' => 'color_group',
1160 - 'title' => esc_html__('Switch Background', 'darkify'),
1161 - 'options' => array(
1162 - 'switch_light_mode_bg' => esc_html__('Light Mode', 'darkify'),
1163 - 'switch_dark_mode_bg' => esc_html__('Dark Mode', 'darkify'),
1164 - ),
1165 - 'default' => array(
1166 - 'switch_light_mode_bg' => '#121116',
1167 - 'switch_dark_mode_bg' => '#ffffff',
1168 - ),
1169 - ),
1170 - array(
1171 - 'id' => 'switch_icon_color',
1172 - 'type' => 'color_group',
1173 - 'title' => esc_html__('Switch Icon Color', 'darkify'),
1174 - 'options' => array(
1175 - 'switch_light_mode_color' => esc_html__('Light Mode', 'darkify'),
1176 - 'switch_dark_mode_color' => esc_html__('Dark Mode', 'darkify'),
1177 - ),
1178 - 'default' => array(
1179 - 'switch_light_mode_color' => '#ffffff',
1180 - 'switch_dark_mode_color' => '#121116',
1181 - ),
1182 - 'dependency' => array('enable_dark_switcher', 'not-any', 'duality,dual,shift'),
1183 - ),
1184 - array(
1185 - 'id' => 'switch_text_color',
1186 - 'type' => 'color_group',
1187 - 'title' => esc_html__('Switch Text Color', 'darkify'),
1188 - 'options' => array(
1189 - 'switch_text_light_mode_color' => esc_html__('Light Mode', 'darkify'),
1190 - 'switch_text_dark_mode_color' => esc_html__('Dark Mode', 'darkify'),
1191 - ),
1192 - 'default' => array(
1193 - 'switch_text_light_mode_color' => '#121116',
1194 - 'switch_text_dark_mode_color' => '#ffffff',
1195 - ),
1196 - 'dependency' => array('enable_dark_switcher', 'any', 'dual'),
1197 - ),
1198 - array(
1199 - 'id' => 'switch_border',
1200 - 'type' => 'border',
1201 - 'title' => esc_html__('Switch Border', 'darkify'),
1202 - 'color' => true,
1203 - 'style' => false,
1204 - 'color2' => false,
1205 - 'color3' => true,
1206 - 'all' => true,
1207 - 'radius' => true,
1208 - 'default' => array(
1209 - 'color' => '#121116',
1210 - 'color3' => '#ffffff',
1211 - 'all' => 0,
1212 - 'radius' => 7,
1213 - ),
1214 - ),
1215 - ),
1216 - ),
1217 - array(
1218 - 'id' => 'switcher_shortcode',
1219 - 'type' => 'switcher_shortcode',
1220 - 'title' => esc_html__('Dark Mode Switch Shortcode', 'darkify'),
1221 - 'title_help' => '<div class="darkify-info-content">' .
1222 - __('Use the shortcode below to display a dark mode switch anywhere WordPress shortcodes are supported.', 'darkify') .
1223 - '</div>' .
1224 - '' .
1225 - '',
1226 - 'dependency' => array('enable_dark_switcher', 'not-any', 'orbit,duality,dual,shift'),
1227 - ),
1228 - array(
1229 - 'id' => 'switcher_shortcode_v2',
1230 - 'type' => 'switcher_shortcode_v2',
1231 - 'title' => esc_html__('Dark Mode Switch Shortcode', 'darkify'),
1232 - 'title_help' => '<div class="darkify-info-content">' .
1233 - __('Use the shortcode below to display a dark mode switch anywhere WordPress shortcodes are supported.', 'darkify') .
1234 - '</div>' .
1235 - '' .
1236 - '',
1237 - 'dependency' => array('enable_dark_switcher', 'any', 'orbit,duality,dual,shift'),
1238 - ),
1239 - array(
1240 - 'title' => esc_html__('Custom Switch Selectors', 'darkify'),
1241 - 'type' => 'heading',
1242 - 'section_start' => true,
1243 - ),
1244 - array(
1245 - 'id' => 'alternative_dark_mode_switcher',
1246 - 'type' => 'text',
1247 - 'title' => esc_html__('Alternative Switch Selectors', 'darkify'),
1248 - 'title_help' =>
1249 - '<div class="darkify-info-label">' .
1250 - __('Enter CSS selectors for elements that should toggle dark mode when clicked. Separate multiple selectors with commas.', 'darkify') .
1251 - '</div>' .
1252 - '' .
1253 - '',
1254 - 'placeholder' => esc_html__('e.g., .my-dark-switch, #dark-mode-toggle', 'darkify'),
1255 - 'validate' => 'css_selectors',
453 + 'id' => 'enable_switch_dragging',
454 + 'type' => 'switcher',
455 + 'title' => esc_html__('Draggable Position Change', 'darkify'),
456 + 'text_on' => esc_html__('Enabled', 'darkify'),
457 + 'text_off' => esc_html__('Disabled', 'darkify'),
458 + 'text_width' => '100',
459 + 'title_help' => '<div class="darkify-info-label">' . __('Allow/Disallow users to change the floating switch position by dragging to where they want.', 'darkify') . '</div>',
460 + 'class' => 'switcher_pro_only',
1256 461 ),
1257 462 )
1258 463 ),
1259 464 )