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