| @@ -12,9 +12,9 @@ | ||
| 12 | 12 | */ |
| 13 | 13 | |
| 14 | 14 | namespace ThemeAtelier\Darkify\Admin\Views; |
| 15 | 15 | |
| 16 | -use ThemeAtelier\Darkify\Admin\Framework\Classes\Darkify; | |
| 16 | +use ThemeAtelier\Darkify\Admin\Schema\SchemaRegistry as Darkify; | |
| 17 | 17 | |
| 18 | 18 | class SwitcherStyle |
| 19 | 19 | { |
| 20 | 20 | /** |
| @@ -27,9 +27,12 @@ | ||
| 27 | 27 | { |
| 28 | 28 | Darkify::createSection( |
| 29 | 29 | $prefix, |
| 30 | 30 | array( |
| 31 | - 'title' => esc_html__('SWITCHES', 'darkify'), | |
| 31 | + // See Control.php: ids are pinned so routes never follow the | |
| 32 | + // translated title. | |
| 33 | + 'id' => 'switches', | |
| 34 | + 'title' => esc_html__('Switches', 'darkify'), | |
| 32 | 35 | 'icon' => 'icofont-toggle-on', |
| 33 | 36 | 'fields' => array( |
| 34 | 37 | |
| 35 | 38 | array( |
| @@ -35,12 +38,27 @@ | ||
| 35 | 38 | array( |
| 36 | 39 | 'type' => 'section_tab', |
| 37 | 40 | 'tabs' => array( |
| 38 | 41 | array( |
| 42 | + 'id' => 'floating-switch', | |
| 39 | 43 | 'title' => esc_html__('Floating Switch', 'darkify'), |
| 40 | 44 | 'icon' => 'icofont-ui-theme', |
| 41 | 45 | 'fields' => array( |
| 46 | + // Intro line, rendered plain above the section cards. | |
| 42 | 47 | 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( | |
| 43 | 61 | 'id' => 'enable_dark_switcher', |
| 44 | 62 | 'type' => 'image_select', |
| 45 | 63 | 'title' => esc_html__('Switch Toggler', 'darkify'), |
| 46 | 64 | 'title_help' => |
| @@ -45,48 +63,43 @@ | ||
| 45 | 63 | 'title' => esc_html__('Switch Toggler', 'darkify'), |
| 46 | 64 | 'title_help' => |
| 47 | 65 | '<div class="darkify-info-label">' . |
| 48 | 66 | __('Choose the default floating switch toggler.', 'darkify') . |
| 49 | - '</div>' . | |
| 50 | - '<a class="tooltip_btn_primary" href="' . esc_url(DARKIFY_DEMO_URL . 'switches/#switchers') . '" target="_blank" rel="noopener noreferrer">' . | |
| 51 | - esc_html__('Live Demo', 'darkify') . | |
| 52 | - '</a>' . | |
| 53 | - '<a class="tooltip_btn_secondary" href="' . esc_url(DARKIFY_DOCS_URL . 'switcher/#switcher-customization') . '" target="_blank" rel="noopener noreferrer">' . | |
| 54 | - esc_html__('Open Docs', 'darkify') . | |
| 55 | - '</a>', | |
| 67 | + '</div>', | |
| 56 | 68 | 'class' => 'icon_select ', |
| 57 | 69 | '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 | + | |
| 58 | 76 | 'classic' => array( |
| 59 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/classic.svg', | |
| 77 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/classic.svg', | |
| 60 | 78 | 'text' => esc_html__('Classic', 'darkify'), |
| 61 | 79 | 'option_demo_url' => '', |
| 62 | 80 | ), |
| 63 | 81 | |
| 64 | 82 | 'expand' => array( |
| 65 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/expand.svg', | |
| 83 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/expand.svg', | |
| 66 | 84 | 'text' => esc_html__('Expand', 'darkify'), |
| 67 | 85 | 'option_demo_url' => '', |
| 68 | 86 | ), |
| 69 | 87 | |
| 70 | 88 | 'inner-moon' => array( |
| 71 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/inner-moon.svg', | |
| 89 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/inner-moon.svg', | |
| 72 | 90 | 'text' => esc_html__('Inner Moon', 'darkify'), |
| 73 | 91 | 'option_demo_url' => '', |
| 74 | 92 | ), |
| 75 | 93 | |
| 76 | 94 | 'within' => array( |
| 77 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/within.svg', | |
| 95 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/within.svg', | |
| 78 | 96 | 'text' => esc_html__('Within', 'darkify'), |
| 79 | 97 | 'option_demo_url' => '', |
| 80 | 98 | ), |
| 81 | - 'orbit' => array( | |
| 82 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/orbit.svg', | |
| 83 | - 'text' => esc_html__('Orbit', 'darkify'), | |
| 84 | - 'option_demo_url' => '', | |
| 85 | - ), | |
| 86 | 99 | |
| 87 | 100 | 'around' => array( |
| 88 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/around.svg', | |
| 101 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/around.svg', | |
| 89 | 102 | 'text' => esc_html__('Around', 'darkify'), |
| 90 | 103 | 'option_demo_url' => '', |
| 91 | 104 | 'pro_only' => true, |
| 92 | 105 | ), |
| @@ -91,9 +104,9 @@ | ||
| 91 | 104 | 'pro_only' => true, |
| 92 | 105 | ), |
| 93 | 106 | |
| 94 | 107 | 'dark-side' => array( |
| 95 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/dark-side.svg', | |
| 108 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-side.svg', | |
| 96 | 109 | 'text' => esc_html__('Dark Side', 'darkify'), |
| 97 | 110 | 'option_demo_url' => '', |
| 98 | 111 | 'pro_only' => true, |
| 99 | 112 | ), |
| @@ -98,9 +111,9 @@ | ||
| 98 | 111 | 'pro_only' => true, |
| 99 | 112 | ), |
| 100 | 113 | |
| 101 | 114 | 'horizon' => array( |
| 102 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/horizon.svg', | |
| 115 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/horizon.svg', | |
| 103 | 116 | 'text' => esc_html__('Horizon', 'darkify'), |
| 104 | 117 | 'option_demo_url' => '', |
| 105 | 118 | 'pro_only' => true, |
| 106 | 119 | ), |
| @@ -105,9 +118,9 @@ | ||
| 105 | 118 | 'pro_only' => true, |
| 106 | 119 | ), |
| 107 | 120 | |
| 108 | 121 | 'eclipse' => array( |
| 109 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/eclipse.svg', | |
| 122 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/eclipse.svg', | |
| 110 | 123 | 'text' => esc_html__('Eclipse', 'darkify'), |
| 111 | 124 | 'option_demo_url' => '', |
| 112 | 125 | 'pro_only' => true, |
| 113 | 126 | ), |
| @@ -112,9 +125,9 @@ | ||
| 112 | 125 | 'pro_only' => true, |
| 113 | 126 | ), |
| 114 | 127 | |
| 115 | 128 | 'lightbulb' => array( |
| 116 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/lightbulb.svg', | |
| 129 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/lightbulb.svg', | |
| 117 | 130 | 'text' => esc_html__('Lightbulb', 'darkify'), |
| 118 | 131 | 'option_demo_url' => '', |
| 119 | 132 | 'pro_only' => true, |
| 120 | 133 | ), |
| @@ -119,9 +132,9 @@ | ||
| 119 | 132 | 'pro_only' => true, |
| 120 | 133 | ), |
| 121 | 134 | |
| 122 | 135 | 'dark-inner' => array( |
| 123 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/dark-inner.svg', | |
| 136 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dark-inner.svg', | |
| 124 | 137 | 'text' => esc_html__('Dark Inner', 'darkify'), |
| 125 | 138 | 'option_demo_url' => '', |
| 126 | 139 | 'pro_only' => true, |
| 127 | 140 | ), |
| @@ -126,9 +139,9 @@ | ||
| 126 | 139 | 'pro_only' => true, |
| 127 | 140 | ), |
| 128 | 141 | |
| 129 | 142 | 'half-sun' => array( |
| 130 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/half-sun.svg', | |
| 143 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/half-sun.svg', | |
| 131 | 144 | 'text' => esc_html__('Half Sun', 'darkify'), |
| 132 | 145 | 'option_demo_url' => '', |
| 133 | 146 | 'pro_only' => true, |
| 134 | 147 | ), |
| @@ -133,39 +146,39 @@ | ||
| 133 | 146 | 'pro_only' => true, |
| 134 | 147 | ), |
| 135 | 148 | |
| 136 | 149 | 'simple' => array( |
| 137 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/simple.svg', | |
| 150 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/simple.svg', | |
| 138 | 151 | 'text' => esc_html__('Simple', 'darkify'), |
| 139 | 152 | 'option_demo_url' => '', |
| 140 | 153 | 'pro_only' => true, |
| 141 | 154 | ), |
| 142 | 155 | 'duality' => array( |
| 143 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/duality.svg', | |
| 156 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/duality.svg', | |
| 144 | 157 | 'text' => esc_html__('Duality', 'darkify'), |
| 145 | 158 | 'option_demo_url' => '', |
| 146 | 159 | 'pro_only' => true, |
| 147 | 160 | ), |
| 148 | 161 | 'dual' => array( |
| 149 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/dual.svg', | |
| 162 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/dual.svg', | |
| 150 | 163 | 'text' => esc_html__('Dual', 'darkify'), |
| 151 | 164 | 'option_demo_url' => '', |
| 152 | 165 | 'pro_only' => true, |
| 153 | 166 | ), |
| 154 | 167 | 'shift' => array( |
| 155 | - 'image' => DARKIFY_DIR_URL . 'src/Admin/Framework/assets/images/shift.svg', | |
| 168 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/shift.svg', | |
| 156 | 169 | 'text' => esc_html__('Shift', 'darkify'), |
| 157 | 170 | 'option_demo_url' => '', |
| 158 | 171 | 'pro_only' => true, |
| 159 | 172 | ), |
| 160 | 173 | ), |
| 161 | - 'default' => 'classic', | |
| 174 | + 'default' => 'orbit', | |
| 162 | 175 | ), |
| 163 | 176 | array( |
| 164 | 177 | 'id' => 'switch_size', |
| 165 | 178 | 'type' => 'button_set', |
| 166 | 179 | 'title' => esc_html__('Switch Size', 'darkify'), |
| 167 | - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the size of the floating toggle switch as you need.', 'darkify') . '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank">' . esc_html__('Live Demo', 'darkify') . '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switch-appearance" target="_blank">' . esc_html__('Open Docs', 'darkify') . '</a>', | |
| 180 | + 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the size of the floating toggle switch as you need.', 'darkify') . '</div>', | |
| 168 | 181 | 'options' => array( |
| 169 | 182 | '0.6' => esc_html__('XS', 'darkify'), |
| 170 | 183 | '0.8' => esc_html__('S', 'darkify'), |
| 171 | 184 | '1' => esc_html__('M', 'darkify'), |
| @@ -179,9 +192,9 @@ | ||
| 179 | 192 | array( |
| 180 | 193 | 'id' => 'switch_size_custom', |
| 181 | 194 | 'type' => 'slider', |
| 182 | 195 | 'title' => esc_html__('Custom Switch Size', 'darkify'), |
| 183 | - 'title_help' => '<div class="darkify-info-label">' . esc_html__('Scale in percentage relative to normal size.', 'darkify') . '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank">' . esc_html__('Live Demo', 'darkify') . '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switch-appearance" target="_blank">' . esc_html__('Open Docs', 'darkify') . '</a>', | |
| 196 | + 'title_help' => '<div class="darkify-info-label">' . esc_html__('Scale in percentage relative to normal size.', 'darkify') . '</div>', | |
| 184 | 197 | 'default' => '100', |
| 185 | 198 | 'min' => 40, |
| 186 | 199 | 'max' => 300, |
| 187 | 200 | 'dependency' => array('switch_size', '==', 'custom') |
| @@ -191,13 +204,9 @@ | ||
| 191 | 204 | 'type' => 'color_group', |
| 192 | 205 | 'title' => esc_html__('Switch Background', 'darkify'), |
| 193 | 206 | 'title_help' => '<div class="darkify-info-label">' . |
| 194 | 207 | __('Customize the floating switch background to match your design.', 'darkify') . |
| 195 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank" rel="noopener noreferrer">' . | |
| 196 | - __('Live Demo', 'darkify') . | |
| 197 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switch-appearance" target="_blank" rel="noopener noreferrer">' . | |
| 198 | - __('Open Docs', 'darkify') . | |
| 199 | - '</a>', | |
| 208 | + '</div>', | |
| 200 | 209 | 'options' => array( |
| 201 | 210 | 'switch_light_mode_bg' => esc_html__('Light Mode', 'darkify'), |
| 202 | 211 | 'switch_dark_mode_bg' => esc_html__('Dark Mode', 'darkify'), |
| 203 | 212 | ), |
| @@ -211,13 +220,9 @@ | ||
| 211 | 220 | 'type' => 'color_group', |
| 212 | 221 | 'title' => esc_html__('Switch Icon Color', 'darkify'), |
| 213 | 222 | 'title_help' => '<div class="darkify-info-label">' . |
| 214 | 223 | __('Customize the floating switch icon color as needed.', 'darkify') . |
| 215 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank" rel="noopener noreferrer">' . | |
| 216 | - __('Live Demo', 'darkify') . | |
| 217 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switch-appearance" target="_blank" rel="noopener noreferrer">' . | |
| 218 | - __('Open Docs', 'darkify') . | |
| 219 | - '</a>', | |
| 224 | + '</div>', | |
| 220 | 225 | |
| 221 | 226 | 'options' => array( |
| 222 | 227 | 'switch_light_mode_color' => esc_html__('Light Mode', 'darkify'), |
| 223 | 228 | 'switch_dark_mode_color' => esc_html__('Dark Mode', 'darkify'), |
| @@ -234,17 +239,18 @@ | ||
| 234 | 239 | 'title_help' => |
| 235 | 240 | '<div class="darkify-info-label">' . |
| 236 | 241 | __('Customize the floating switch border and border radius.', 'darkify') . |
| 237 | 242 | '</div>' . |
| 238 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank" rel="noopener noreferrer">' . | |
| 239 | - __('Live Demo', 'darkify') . | |
| 240 | - '</a>' . | |
| 241 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switch-appearance" target="_blank" rel="noopener noreferrer">' . | |
| 242 | - __('Open Docs', 'darkify') . | |
| 243 | - '</a>', | |
| 243 | + '' . | |
| 244 | + '', | |
| 244 | 245 | 'color' => true, |
| 245 | 246 | 'style' => false, |
| 246 | 247 | '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, | |
| 247 | 253 | 'all' => true, |
| 248 | 254 | 'radius' => true, |
| 249 | 255 | 'default' => array( |
| 250 | 256 | 'color' => '#121116', |
| @@ -252,10 +258,120 @@ | ||
| 252 | 258 | 'all' => 0, |
| 253 | 259 | 'radius' => 7, |
| 254 | 260 | ), |
| 255 | 261 | ), |
| 262 | + array( | |
| 263 | + 'title' => esc_html__('Switch Positioning', 'darkify'), | |
| 264 | + 'type' => 'heading', | |
| 265 | + 'section_start' => true, | |
| 266 | + ), | |
| 267 | + array( | |
| 268 | + 'id' => 'switcher_button_position', | |
| 269 | + 'type' => 'fieldset', | |
| 270 | + 'fields' => array( | |
| 271 | + array( | |
| 272 | + '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', | |
| 278 | + '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( | |
| 281 | + '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'), | |
| 285 | + ), | |
| 286 | + 'default' => 'bottom_right', | |
| 287 | + ), | |
| 288 | + array( | |
| 289 | + 'id' => 'switch_position_top_right', | |
| 290 | + 'type' => 'spacing', | |
| 291 | + '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>', | |
| 293 | + 'left' => false, | |
| 294 | + 'bottom' => false, | |
| 295 | + 'units' => ['px'], | |
| 296 | + 'default' => array( | |
| 297 | + 'top' => '40', | |
| 298 | + 'right' => '40', | |
| 299 | + ), | |
| 300 | + 'dependency' => array('dark_mode_switch_position', '==', 'top_right'), | |
| 301 | + ), | |
| 302 | + array( | |
| 303 | + 'id' => 'switch_position_top_left', | |
| 304 | + 'type' => 'spacing', | |
| 305 | + '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>', | |
| 307 | + 'right' => false, | |
| 308 | + 'bottom' => false, | |
| 309 | + 'units' => ['px'], | |
| 310 | + 'default' => array( | |
| 311 | + 'top' => '40', | |
| 312 | + 'left' => '40', | |
| 313 | + ), | |
| 314 | + 'dependency' => array('dark_mode_switch_position', '==', 'top_left'), | |
| 315 | + ), | |
| 316 | + array( | |
| 317 | + 'id' => 'switch_position_bottom_right', | |
| 318 | + 'type' => 'spacing', | |
| 319 | + '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>', | |
| 321 | + 'left' => false, | |
| 322 | + 'top' => false, | |
| 323 | + 'units' => ['px'], | |
| 324 | + 'default' => array( | |
| 325 | + 'bottom' => '40', | |
| 326 | + 'right' => '40', | |
| 327 | + ), | |
| 328 | + 'dependency' => array('dark_mode_switch_position', '==', 'bottom_right'), | |
| 329 | + ), | |
| 330 | + array( | |
| 331 | + 'id' => 'switch_position_bottom_left', | |
| 332 | + 'type' => 'spacing', | |
| 333 | + '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>', | |
| 335 | + 'right' => false, | |
| 336 | + 'top' => false, | |
| 337 | + 'units' => ['px'], | |
| 338 | + 'default' => array( | |
| 339 | + 'bottom' => '40', | |
| 340 | + 'left' => '40', | |
| 341 | + ), | |
| 342 | + 'dependency' => array('dark_mode_switch_position', '==', 'bottom_left'), | |
| 343 | + ), | |
| 344 | + ), | |
| 345 | + ), | |
| 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>', | |
| 256 | 363 | |
| 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 | + ), | |
| 257 | 368 | array( |
| 369 | + 'title' => esc_html__('Switch Extra', 'darkify'), | |
| 370 | + 'type' => 'heading', | |
| 371 | + 'section_start' => true, | |
| 372 | + ), | |
| 373 | + array( | |
| 258 | 374 | 'id' => 'enable_switch_attention', |
| 259 | 375 | 'type' => 'switcher', |
| 260 | 376 | 'title' => esc_html__('Switch Attention Effect', 'darkify'), |
| 261 | 377 | 'text_on' => esc_html__('Enabled', 'darkify'), |
| @@ -269,23 +385,18 @@ | ||
| 269 | 385 | 'title' => esc_html__('Attention Effect Style', 'darkify'), |
| 270 | 386 | 'title_help' => '<div class="darkify-info-label">' . esc_html__('Choose the animation style for the attention effect. Hover pauses the animation.', 'darkify') . '</div>', |
| 271 | 387 | 'options' => array( |
| 272 | 388 | 'pulse' => esc_html__('Pulse', 'darkify'), |
| 273 | - 'radiance' => array( 'label' => esc_html__('Radiance', 'darkify'), 'disabled' => true ), | |
| 274 | - 'leap' => array( 'label' => esc_html__('Leap', 'darkify'), 'disabled' => true ), | |
| 275 | - 'swing' => array( 'label' => esc_html__('Swing', 'darkify'), 'disabled' => true ), | |
| 276 | - 'drift' => array( 'label' => esc_html__('Drift', 'darkify'), 'disabled' => true ), | |
| 277 | - 'nudge' => array( 'label' => esc_html__('Nudge', 'darkify'), 'disabled' => true ), | |
| 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), | |
| 278 | 394 | ), |
| 279 | 395 | 'default' => 'pulse', |
| 280 | 396 | 'dependency' => array('enable_switch_attention', '==', 'true'), |
| 281 | 397 | ), |
| 282 | - | |
| 283 | 398 | array( |
| 284 | - 'title' => esc_html__('Switch Extra', 'darkify'), | |
| 285 | - 'type' => 'heading', | |
| 286 | - ), | |
| 287 | - array( | |
| 288 | 399 | 'id' => 'tooltip_on_floating_switch', |
| 289 | 400 | 'type' => 'fieldset', |
| 290 | 401 | 'fields' => array( |
| 291 | 402 | array( |
| @@ -295,14 +406,10 @@ | ||
| 295 | 406 | 'title_help' => |
| 296 | 407 | '<div class="darkify-info-label">' . |
| 297 | 408 | __('Display a tooltip hint on the dark mode floating switch.', 'darkify') . |
| 298 | 409 | '</div>' . |
| 299 | - '<a class="tooltip_btn_primary" href="' . esc_url(DARKIFY_DEMO_URL . 'switches/#custom_switches') . '" target="_blank" rel="noopener noreferrer">' . | |
| 300 | - __('Live Demo', 'darkify') . | |
| 301 | - '</a>' . | |
| 302 | - '<a class="tooltip_btn_secondary" href="' . esc_url(DARKIFY_DOCS_URL . 'switcher/#tooltips') . '" target="_blank" rel="noopener noreferrer">' . | |
| 303 | - __('Open Docs', 'darkify') . | |
| 304 | - '</a>', | |
| 410 | + '' . | |
| 411 | + '', | |
| 305 | 412 | 'text_on' => esc_html__('Enabled', 'darkify'), |
| 306 | 413 | 'text_off' => esc_html__('Disabled', 'darkify'), |
| 307 | 414 | 'text_width' => 100, |
| 308 | 415 | 'default' => false, |
| @@ -314,14 +421,10 @@ | ||
| 314 | 421 | 'title_help' => |
| 315 | 422 | '<div class="darkify-info-label">' . |
| 316 | 423 | __('Choose where the tooltip should appear relative to the floating switch.', 'darkify') . |
| 317 | 424 | '</div>' . |
| 318 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#custom_switches" target="_blank">' . | |
| 319 | - __('Live Demo', 'darkify') . | |
| 320 | - '</a>' . | |
| 321 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#tooltips" target="_blank">' . | |
| 322 | - __('Open Docs', 'darkify') . | |
| 323 | - '</a>', | |
| 425 | + '' . | |
| 426 | + '', | |
| 324 | 427 | 'options' => array( |
| 325 | 428 | 'left' => esc_html__('Left', 'darkify'), |
| 326 | 429 | 'right' => esc_html__('Right', 'darkify'), |
| 327 | 430 | 'top' => esc_html__('Top', 'darkify'), |
| @@ -337,14 +440,10 @@ | ||
| 337 | 440 | 'title_help' => |
| 338 | 441 | '<div class="darkify-info-label">' . |
| 339 | 442 | __('Add tooltip text for floating switch toggler.', 'darkify') . |
| 340 | 443 | '</div>' . |
| 341 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switchers" target="_blank">' . | |
| 342 | - __('Live Demo', 'darkify') . | |
| 343 | - '</a>' . | |
| 344 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-customization" target="_blank">' . | |
| 345 | - __('Open Docs', 'darkify') . | |
| 346 | - '</a>', | |
| 444 | + '' . | |
| 445 | + '', | |
| 347 | 446 | 'default' => esc_html__('Toggle Dark Mode', 'darkify'), |
| 348 | 447 | 'dependency' => array('floating_switch_width', '==', 'true'), |
| 349 | 448 | ), |
| 350 | 449 | |
| @@ -354,13 +453,9 @@ | ||
| 354 | 453 | 'title' => esc_html__('Tooltip Color', 'darkify'), |
| 355 | 454 | 'title_help' => |
| 356 | 455 | '<div class="darkify-info-label">' . |
| 357 | 456 | __('Customize the tooltip colors and appearance.', 'darkify') . |
| 358 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#custom_switches" target="_blank">' . | |
| 359 | - __('Live Demo', 'darkify') . | |
| 360 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#tooltips" target="_blank">' . | |
| 361 | - __('Open Docs', 'darkify') . | |
| 362 | - '</a>', | |
| 457 | + '</div>', | |
| 363 | 458 | 'options' => array( |
| 364 | 459 | 'tooltip_background_color' => esc_html__('Background', 'darkify'), |
| 365 | 460 | 'tooltip_text_color' => esc_html__('Color', 'darkify'), |
| 366 | 461 | ), |
| @@ -372,192 +467,318 @@ | ||
| 372 | 467 | ), |
| 373 | 468 | |
| 374 | 469 | ), |
| 375 | 470 | ), |
| 376 | - | |
| 377 | 471 | array( |
| 378 | - 'id' => 'switcher_shortcode', | |
| 379 | - 'type' => 'switcher_shortcode', | |
| 380 | - 'title' => esc_html__('Switcher Shortcode', 'darkify'), | |
| 381 | - 'title_help' => '<div class="darkify-info-content">' . | |
| 382 | - __('Copy this shortcode and place it on any page or post to display the switcher. You can customize all values, including Switcher styles 1–5, which are available in the current version of the plugin.', 'darkify') . | |
| 383 | - '</div>' . | |
| 384 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#custom_switches" target="_blank" rel="noopener noreferrer">' . | |
| 385 | - __('Live Demo', 'darkify') . | |
| 386 | - '</a>' . | |
| 387 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#advanced-options" target="_blank" rel="noopener noreferrer">' . | |
| 388 | - __('Open Docs', 'darkify') . | |
| 389 | - '</a>', | |
| 390 | - 'dependency' => array('enable_dark_switcher', 'not-any', 'orbit,duality,dual,shift'), | |
| 472 | + 'title' => esc_html__('Switch Visibility', 'darkify'), | |
| 473 | + 'type' => 'heading', | |
| 474 | + 'section_start' => true, | |
| 391 | 475 | ), |
| 392 | 476 | array( |
| 393 | - 'id' => 'switcher_shortcode_v2', | |
| 394 | - 'type' => 'switcher_shortcode_v2', | |
| 395 | - 'title' => esc_html__('Switcher Shortcode', 'darkify'), | |
| 396 | - 'title_help' => '<div class="darkify-info-content">' . | |
| 397 | - __('Copy this shortcode and place it on any page or post to display the switcher. You can customize all available options, including switch styles 1–5, which are available in the current version of the plugin.', 'darkify') . | |
| 398 | - '</div>' . | |
| 399 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#custom_switches" target="_blank" rel="noopener noreferrer">' . | |
| 400 | - __('Live Demo', 'darkify') . | |
| 401 | - '</a>' . | |
| 402 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#advanced-options" target="_blank" rel="noopener noreferrer">' . | |
| 403 | - __('Open Docs', 'darkify') . | |
| 404 | - '</a>', | |
| 405 | - 'dependency' => array('enable_dark_switcher', 'any', 'orbit,duality,dual,shift'), | |
| 406 | - ), | |
| 407 | - array( | |
| 408 | - 'id' => 'alternative_dark_mode_switcher', | |
| 409 | - 'type' => 'text', | |
| 410 | - 'title' => esc_html__('Alternative Dark Mode Switch', 'darkify'), | |
| 477 | + 'id' => 'hide_on_desktop', | |
| 478 | + 'type' => 'switcher', | |
| 479 | + 'title' => esc_html__('Hide Dark Mode Switch on Desktop', 'darkify'), | |
| 411 | 480 | 'title_help' => |
| 412 | 481 | '<div class="darkify-info-label">' . |
| 413 | - __('Enter comma-separated CSS class or ID selectors to use them as alternative dark mode switches.', 'darkify') . | |
| 482 | + __('Hide the dark mode floating switch when users are browsing on a desktop or laptop.', 'darkify') . | |
| 414 | 483 | '</div>' . |
| 415 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#custom_switches" target="_blank">' . | |
| 416 | - __('Live Demo', 'darkify') . | |
| 417 | - '</a>' . | |
| 418 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#tooltips" target="_blank">' . | |
| 419 | - __('Open Docs', 'darkify') . | |
| 420 | - '</a>', | |
| 421 | - 'placeholder' => esc_html__('e.g., .my-dark-switch, #dark-mode-toggle', 'darkify'), | |
| 484 | + '' . | |
| 485 | + '', | |
| 486 | + | |
| 487 | + 'text_on' => esc_html__('Yes', 'darkify'), | |
| 488 | + 'text_off' => esc_html__('No', 'darkify'), | |
| 489 | + | |
| 422 | 490 | ), |
| 423 | - | |
| 424 | - ) | |
| 425 | - ), | |
| 426 | - array( | |
| 427 | - 'title' => esc_html__('Positioning', 'darkify'), | |
| 428 | - 'icon' => 'icofont-hand-drag', | |
| 429 | - 'fields' => array( | |
| 430 | - // Switch Position | |
| 431 | 491 | array( |
| 432 | - 'id' => 'switcher_button_position', | |
| 492 | + 'id' => 'hide_on_mobile', | |
| 433 | 493 | 'type' => 'fieldset', |
| 434 | 494 | 'fields' => array( |
| 435 | 495 | array( |
| 436 | - 'id' => 'dark_mode_switch_position', | |
| 437 | - 'type' => 'button_set', | |
| 438 | - 'title' => esc_html__('Switch Position', 'darkify'), | |
| 496 | + 'id' => 'hide_dark_mode_on_mobile', | |
| 497 | + 'type' => 'switcher', | |
| 498 | + 'title' => esc_html__('Hide Dark Mode on Mobile', 'darkify'), | |
| 439 | 499 | 'title_help' => |
| 440 | 500 | '<div class="darkify-info-label">' . |
| 441 | - __('Choose the screen position where the floating switch should be displayed.', 'darkify') . | |
| 501 | + __('Hide the dark mode floating switch when users are browsing on mobile devices.', 'darkify') . | |
| 442 | 502 | '</div>' . |
| 443 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 444 | - __('Live Demo', 'darkify') . | |
| 445 | - '</a>' . | |
| 446 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 447 | - __('Open Docs', 'darkify') . | |
| 448 | - '</a>', | |
| 449 | - 'options' => array( | |
| 450 | - 'bottom_right' => esc_html__('Bottom Right', 'darkify'), | |
| 451 | - 'bottom_left' => esc_html__('Bottom Left', 'darkify'), | |
| 452 | - 'top_right' => esc_html__('Top Right', 'darkify'), | |
| 453 | - 'top_left' => esc_html__('Top Left', 'darkify'), | |
| 454 | - ), | |
| 455 | - 'default' => 'bottom_right', | |
| 503 | + '' . | |
| 504 | + '', | |
| 505 | + | |
| 506 | + 'text_on' => esc_html__('Yes', 'darkify'), | |
| 507 | + 'text_off' => esc_html__('No', 'darkify'), | |
| 508 | + | |
| 456 | 509 | ), |
| 457 | 510 | array( |
| 458 | - 'id' => 'switch_position_top_right', | |
| 459 | - 'type' => 'spacing', | |
| 460 | - 'title' => esc_html__('Margin From Top Right', 'darkify'), | |
| 511 | + 'id' => 'type_of_hide_by', | |
| 512 | + 'type' => 'button_set', | |
| 513 | + 'title' => esc_html__('Hide Detection Method', 'darkify'), | |
| 461 | 514 | |
| 462 | 515 | 'title_help' => |
| 463 | 516 | '<div class="darkify-info-label">' . |
| 464 | - __('Customize default margin from the top right of the Floating Switch.', 'darkify') . | |
| 517 | + __('Choose how mobile devices are detected: by User Agent, by Screen Size, or use Both for maximum accuracy.', 'darkify') . | |
| 465 | 518 | '</div>' . |
| 466 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 467 | - __('Live Demo', 'darkify') . | |
| 468 | - '</a>' . | |
| 469 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 470 | - __('Open Docs', 'darkify') . | |
| 471 | - '</a>', | |
| 519 | + '' . | |
| 520 | + '', | |
| 472 | 521 | |
| 473 | - 'left' => false, | |
| 474 | - 'bottom' => false, | |
| 475 | - 'units' => ['px'], | |
| 476 | - 'default' => array( | |
| 477 | - 'top' => '40', | |
| 478 | - 'right' => '40', | |
| 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'), | |
| 479 | 526 | ), |
| 480 | - 'dependency' => array('dark_mode_switch_position', '==', 'top_right'), | |
| 527 | + | |
| 528 | + 'default' => 'both', | |
| 529 | + 'dependency' => array('hide_dark_mode_on_mobile', '==', 'true'), | |
| 481 | 530 | ), |
| 482 | - array( | |
| 483 | - 'id' => 'switch_position_top_left', | |
| 484 | - 'type' => 'spacing', | |
| 485 | - 'title' => esc_html__('Margin from Top Left', 'darkify'), | |
| 486 | - 'title_help' => | |
| 487 | - '<div class="darkify-info-label">' . | |
| 488 | - __('Customize the default margin from the top-left position of the floating switch.', 'darkify') . | |
| 489 | - '</div>' . | |
| 490 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 491 | - __('Live Demo', 'darkify') . | |
| 492 | - '</a>' . | |
| 493 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 494 | - __('Open Docs', 'darkify') . | |
| 495 | - '</a>', | |
| 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 | + ), | |
| 496 | 563 | |
| 497 | - 'right' => false, | |
| 498 | - 'bottom' => false, | |
| 499 | - 'units' => ['px'], | |
| 500 | - 'default' => array( | |
| 501 | - 'top' => '40', | |
| 502 | - 'left' => '40', | |
| 503 | - ), | |
| 504 | - 'dependency' => array('dark_mode_switch_position', '==', 'top_left'), | |
| 564 | + 'classic' => array( | |
| 565 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/classic.svg', | |
| 566 | + 'text' => esc_html__('Classic', 'darkify'), | |
| 567 | + 'option_demo_url' => '', | |
| 505 | 568 | ), |
| 506 | - array( | |
| 507 | - 'id' => 'switch_position_bottom_right', | |
| 508 | - 'type' => 'spacing', | |
| 509 | - 'title' => esc_html__('Margin From Bottom Right', 'darkify'), | |
| 510 | 569 | |
| 511 | - 'title_help' => | |
| 512 | - '<div class="darkify-info-label">' . | |
| 513 | - __('Customize the default margin from the bottom-right position of the floating switch.', 'darkify') . | |
| 514 | - '</div>' . | |
| 515 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 516 | - __('Live Demo', 'darkify') . | |
| 517 | - '</a>' . | |
| 518 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 519 | - __('Open Docs', 'darkify') . | |
| 520 | - '</a>', | |
| 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 | + ), | |
| 521 | 575 | |
| 522 | - 'left' => false, | |
| 523 | - 'top' => false, | |
| 524 | - 'units' => ['px'], | |
| 525 | - 'default' => array( | |
| 526 | - 'bottom' => '40', | |
| 527 | - 'right' => '40', | |
| 528 | - ), | |
| 529 | - 'dependency' => array('dark_mode_switch_position', '==', 'bottom_right'), | |
| 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' => '', | |
| 530 | 580 | ), |
| 531 | - array( | |
| 532 | - 'id' => 'switch_position_bottom_left', | |
| 533 | - 'type' => 'spacing', | |
| 534 | - 'title' => esc_html__('Margin from Bottom Left', 'darkify'), | |
| 535 | - 'title_help' => | |
| 536 | - '<div class="darkify-info-label">' . | |
| 537 | - __('Customize the default margin from the bottom-left position of the floating switch.', 'darkify') . | |
| 538 | - '</div>' . | |
| 539 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 540 | - __('Live Demo', 'darkify') . | |
| 541 | - '</a>' . | |
| 542 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 543 | - __('Open Docs', 'darkify') . | |
| 544 | - '</a>', | |
| 545 | 581 | |
| 546 | - 'right' => false, | |
| 547 | - 'top' => false, | |
| 548 | - 'units' => ['px'], | |
| 549 | - 'default' => array( | |
| 550 | - 'bottom' => '40', | |
| 551 | - 'left' => '40', | |
| 552 | - ), | |
| 553 | - 'dependency' => array('dark_mode_switch_position', '==', 'bottom_left'), | |
| 582 | + 'within' => array( | |
| 583 | + 'image' => DARKIFY_DIR_URL . 'src/Admin/assets/images/within.svg', | |
| 584 | + 'text' => esc_html__('Within', 'darkify'), | |
| 585 | + 'option_demo_url' => '', | |
| 554 | 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 | + ), | |
| 555 | 661 | ), |
| 662 | + 'default' => 'orbit', | |
| 663 | + 'dependency' => array('dark_switcher_switch_in_mobile', '==', 'true'), | |
| 556 | 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>', | |
| 557 | 716 | |
| 558 | - // Different Switch Position in Mobile | |
| 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 | + ), | |
| 559 | 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( | |
| 560 | 781 | 'id' => 'different_switch_in_mobile', |
| 561 | 782 | 'type' => 'fieldset', |
| 562 | 783 | 'fields' => array( |
| 563 | 784 | array( |
| @@ -562,18 +783,10 @@ | ||
| 562 | 783 | 'fields' => array( |
| 563 | 784 | array( |
| 564 | 785 | 'id' => 'switch_position_different_in_mobile', |
| 565 | 786 | 'type' => 'switcher', |
| 566 | - 'title' => esc_html__('Different Switch Position on Mobile', 'darkify'), | |
| 567 | - 'title_help' => | |
| 568 | - '<div class="darkify-info-label">' . | |
| 569 | - __('Choose whether the floating switch should be displayed in a different position on mobile devices.', 'darkify') . | |
| 570 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 571 | - __('Live Demo', 'darkify') . | |
| 572 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 573 | - __('Open Docs', 'darkify') . | |
| 574 | - '</a>', | |
| 575 | - | |
| 787 | + '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>', | |
| 576 | 789 | 'text_on' => esc_html__('Yes', 'darkify'), |
| 577 | 790 | 'text_off' => esc_html__('No', 'darkify'), |
| 578 | 791 | |
| 579 | 792 | ), |
| @@ -578,22 +791,11 @@ | ||
| 578 | 791 | |
| 579 | 792 | ), |
| 580 | 793 | array( |
| 581 | 794 | 'id' => 'switch_position_in_mobile', |
| 582 | - 'type' => 'button_set', | |
| 583 | - 'title' => esc_html__('Switch Position on Mobile', 'darkify'), | |
| 584 | - | |
| 585 | - 'title_help' => | |
| 586 | - '<div class="darkify-info-label">' . | |
| 587 | - __('Choose the screen position where the floating switch should be displayed on mobile devices.', 'darkify') . | |
| 588 | - '</div>' . | |
| 589 | - '<a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 590 | - __('Live Demo', 'darkify') . | |
| 591 | - '</a>' . | |
| 592 | - '<a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 593 | - __('Open Docs', 'darkify') . | |
| 594 | - '</a>', | |
| 595 | - | |
| 795 | + 'type' => 'position_select', | |
| 796 | + '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>', | |
| 596 | 798 | 'options' => array( |
| 597 | 799 | 'bottom_right' => esc_html__('Bottom Right', 'darkify'), |
| 598 | 800 | 'bottom_left' => esc_html__('Bottom Left', 'darkify'), |
| 599 | 801 | 'top_right' => esc_html__('Top Right', 'darkify'), |
| @@ -605,19 +807,10 @@ | ||
| 605 | 807 | ), |
| 606 | 808 | array( |
| 607 | 809 | 'id' => 'switch_position_top_right_in_mobile', |
| 608 | 810 | 'type' => 'spacing', |
| 609 | - 'title' => esc_html__('Margin from Top Right on Mobile', 'darkify'), | |
| 610 | - 'title_help' => | |
| 611 | - '<div class="darkify-info-label">' . | |
| 612 | - __('Adjust the default margin from the top-right position of the floating switch on mobile devices.', 'darkify') . | |
| 613 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 614 | - __('Live Demo', 'darkify') . | |
| 615 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 616 | - __('Open Docs', 'darkify') . | |
| 617 | - '</a>', | |
| 618 | - | |
| 619 | - | |
| 811 | + '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>', | |
| 620 | 813 | 'left' => false, |
| 621 | 814 | 'bottom' => false, |
| 622 | 815 | 'units' => ['px'], |
| 623 | 816 | 'default' => array( |
| @@ -628,18 +821,10 @@ | ||
| 628 | 821 | ), |
| 629 | 822 | array( |
| 630 | 823 | 'id' => 'switch_position_top_left_in_mobile', |
| 631 | 824 | 'type' => 'spacing', |
| 632 | - 'title' => esc_html__('Margin from Top Left on Mobile', 'darkify'), | |
| 633 | - 'title_help' => | |
| 634 | - '<div class="darkify-info-label">' . | |
| 635 | - __('Adjust the default margin from the top-left position of the floating switch on mobile devices.', 'darkify') . | |
| 636 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 637 | - __('Live Demo', 'darkify') . | |
| 638 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 639 | - __('Open Docs', 'darkify') . | |
| 640 | - '</a>', | |
| 641 | - | |
| 825 | + '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>', | |
| 642 | 827 | 'right' => false, |
| 643 | 828 | 'bottom' => false, |
| 644 | 829 | 'units' => ['px'], |
| 645 | 830 | 'default' => array( |
| @@ -650,18 +835,10 @@ | ||
| 650 | 835 | ), |
| 651 | 836 | array( |
| 652 | 837 | 'id' => 'switch_position_bottom_right_in_mobile', |
| 653 | 838 | 'type' => 'spacing', |
| 654 | - 'title' => esc_html__('Margin from Bottom Right on Mobile', 'darkify'), | |
| 655 | - 'title_help' => | |
| 656 | - '<div class="darkify-info-label">' . | |
| 657 | - __('Adjust the default margin from the bottom-right position of the floating switch on mobile devices.', 'darkify') . | |
| 658 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 659 | - __('Live Demo', 'darkify') . | |
| 660 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 661 | - __('Open Docs', 'darkify') . | |
| 662 | - '</a>', | |
| 663 | - | |
| 839 | + '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>', | |
| 664 | 841 | 'left' => false, |
| 665 | 842 | 'top' => false, |
| 666 | 843 | 'units' => ['px'], |
| 667 | 844 | 'default' => array( |
| @@ -672,18 +849,10 @@ | ||
| 672 | 849 | ), |
| 673 | 850 | array( |
| 674 | 851 | 'id' => 'switch_position_bottom_left_in_mobile', |
| 675 | 852 | 'type' => 'spacing', |
| 676 | - 'title' => esc_html__('Margin from Bottom Left on Mobile', 'darkify'), | |
| 677 | - 'title_help' => | |
| 678 | - '<div class="darkify-info-label">' . | |
| 679 | - __('Adjust the default margin from the bottom-left position of the floating switch on mobile devices.', 'darkify') . | |
| 680 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 681 | - __('Live Demo', 'darkify') . | |
| 682 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 683 | - __('Open Docs', 'darkify') . | |
| 684 | - '</a>', | |
| 685 | - | |
| 853 | + '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>', | |
| 686 | 855 | 'right' => false, |
| 687 | 856 | 'top' => false, |
| 688 | 857 | 'units' => ['px'], |
| 689 | 858 | 'default' => array( |
| @@ -693,44 +862,398 @@ | ||
| 693 | 862 | 'dependency' => array('switch_position_different_in_mobile|switch_position_in_mobile', '==|==', 'true|bottom_left'), |
| 694 | 863 | ), |
| 695 | 864 | ), |
| 696 | 865 | ), |
| 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. | |
| 697 | 874 | array( |
| 698 | - 'id' => 'enable_absolute_position', | |
| 699 | - 'type' => 'switcher', | |
| 700 | - 'title' => esc_html__('Absolute Switch Position', 'darkify'), | |
| 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'), | |
| 877 | + ), | |
| 878 | + 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'), | |
| 701 | 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'), | |
| 702 | 1007 | 'title_help' => |
| 703 | 1008 | '<div class="darkify-info-label">' . |
| 704 | - __('Enable this option to allow the floating switch to scroll along with the page.', 'darkify') . | |
| 705 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 706 | - __('Live Demo', 'darkify') . | |
| 707 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 708 | - __('Open Docs', 'darkify') . | |
| 709 | - '</a>', | |
| 710 | - 'text_on' => esc_html__('Enabled', 'darkify'), | |
| 711 | - 'text_off' => esc_html__('Disabled', 'darkify'), | |
| 712 | - 'text_width' => '100', | |
| 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, | |
| 713 | 1015 | ), |
| 714 | - | |
| 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. | |
| 715 | 1022 | array( |
| 716 | - 'id' => 'enable_switch_dragging', | |
| 717 | - 'type' => 'switcher', | |
| 718 | - 'title' => esc_html__('Draggable Position Change', 'darkify'), | |
| 1023 | + 'id' => 'shortcode_custom_switch_settings', | |
| 1024 | + 'type' => 'fieldset', | |
| 1025 | + 'title' => esc_html__('Custom Switch Style', 'darkify'), | |
| 719 | 1026 | 'title_help' => |
| 720 | 1027 | '<div class="darkify-info-label">' . |
| 721 | - __('Enable this option to allow users to change the floating switch position by dragging it.', 'darkify') . | |
| 722 | - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'switches/#switcher-positioning" target="_blank">' . | |
| 723 | - __('Live Demo', 'darkify') . | |
| 724 | - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'switcher/#switcher-positioning" target="_blank">' . | |
| 725 | - __('Open Docs', 'darkify') . | |
| 726 | - '</a>', | |
| 727 | - | |
| 728 | - 'text_on' => esc_html__('Enabled', 'darkify'), | |
| 729 | - 'text_off' => esc_html__('Disabled', 'darkify'), | |
| 730 | - 'text_width' => '100', | |
| 731 | - | |
| 732 | - 'class' => 'switcher_pro_only', | |
| 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', | |
| 733 | 1256 | ), |
| 734 | 1257 | ) |
| 735 | 1258 | ), |
| 736 | 1259 | ) |
