| 1 |
<?php |
| 2 |
|
| 3 |
use ThemeAtelier\Darkify\Includes\Darkify; |
| 4 |
|
| 5 |
if (!defined('ABSPATH')) { |
| 6 |
die; |
| 7 |
} // Cannot access directly. |
| 8 |
|
| 9 |
$hide_on_mobile = isset($options["hide_on_mobile"]) ? $options["hide_on_mobile"] : ''; |
| 10 |
$hide_dark_mode_on_mobile = isset($hide_on_mobile['hide_dark_mode_on_mobile']) ? $hide_on_mobile['hide_dark_mode_on_mobile'] : ''; |
| 11 |
$tooltip_on_floating_switch = isset($options["tooltip_on_floating_switch"]) ? $options["tooltip_on_floating_switch"] : ''; |
| 12 |
$tooltip_color = isset($tooltip_on_floating_switch['tooltip_color']) ? $tooltip_on_floating_switch['tooltip_color'] : ''; |
| 13 |
$switcher_button_position = isset($options["switcher_button_position"]) ? $options["switcher_button_position"] : ''; |
| 14 |
$dark_mode_switch_position = isset($switcher_button_position["dark_mode_switch_position"]) ? $switcher_button_position["dark_mode_switch_position"] : ""; |
| 15 |
$switch_position_top_right = isset($switcher_button_position["switch_position_top_right"]) ? $switcher_button_position["switch_position_top_right"] : ""; |
| 16 |
$switch_position_top_right_top = isset($switch_position_top_right["top"]) ? $switch_position_top_right["top"] : "40"; |
| 17 |
$switch_position_top_right_right = isset($switch_position_top_right["right"]) ? $switch_position_top_right["right"] : "40"; |
| 18 |
$switch_position_top_left = isset($switcher_button_position["switch_position_top_left"]) ? $switcher_button_position["switch_position_top_left"] : ""; |
| 19 |
$switch_position_top_left_top = isset($switch_position_top_left["top"]) ? $switch_position_top_left["top"] : "40"; |
| 20 |
$switch_position_top_left_left = isset($switch_position_top_left["left"]) ? $switch_position_top_left["left"] : "40"; |
| 21 |
$switch_position_bottom_right = isset($switcher_button_position["switch_position_bottom_right"]) ? $switcher_button_position["switch_position_bottom_right"] : ""; |
| 22 |
$switch_position_bottom_right_bottom = isset($switch_position_bottom_right["bottom"]) ? $switch_position_bottom_right["bottom"] : "40"; |
| 23 |
$switch_position_bottom_right_right = isset($switch_position_bottom_right["right"]) ? $switch_position_bottom_right["right"] : "40"; |
| 24 |
$switch_position_bottom_left = isset($switcher_button_position["switch_position_bottom_left"]) ? $switcher_button_position["switch_position_bottom_left"] : ""; |
| 25 |
$switch_position_bottom_left_bottom = isset($switch_position_bottom_left["bottom"]) ? $switch_position_bottom_left["bottom"] : "40"; |
| 26 |
$switch_position_bottom_left_left = isset($switch_position_bottom_left["left"]) ? $switch_position_bottom_left["left"] : "40"; |
| 27 |
$different_switch_in_mobile = isset($options["different_switch_in_mobile"]) ? $options["different_switch_in_mobile"] : ''; |
| 28 |
$switch_position_different_in_mobile = isset($different_switch_in_mobile["switch_position_different_in_mobile"]) ? $different_switch_in_mobile["switch_position_different_in_mobile"] : ""; |
| 29 |
$switch_position_top_right_in_mobile = isset($different_switch_in_mobile["switch_position_top_right_in_mobile"]) ? $different_switch_in_mobile["switch_position_top_right_in_mobile"] : ""; |
| 30 |
$switch_position_top_right_top_in_mobile = isset($switch_position_top_right_in_mobile["top"]) ? $switch_position_top_right_in_mobile["top"] : "40"; |
| 31 |
$switch_position_top_right_right_in_mobile = isset($switch_position_top_right_in_mobile["right"]) ? $switch_position_top_right_in_mobile["right"] : "40"; |
| 32 |
$switch_position_top_left_in_mobile = isset($different_switch_in_mobile["switch_position_top_left_in_mobile"]) ? $different_switch_in_mobile["switch_position_top_left_in_mobile"] : ""; |
| 33 |
$switch_position_top_left_top_in_mobile = isset($switch_position_top_left_in_mobile["top"]) ? $switch_position_top_left_in_mobile["top"] : "40"; |
| 34 |
$switch_position_top_left_left_in_mobile = isset($switch_position_top_left_in_mobile["left"]) ? $switch_position_top_left_in_mobile["left"] : "40"; |
| 35 |
$switch_position_bottom_right_in_mobile = isset($different_switch_in_mobile["switch_position_bottom_right_in_mobile"]) ? $different_switch_in_mobile["switch_position_bottom_right_in_mobile"] : ""; |
| 36 |
$switch_position_bottom_right_bottom_in_mobile = isset($switch_position_bottom_right_in_mobile["bottom"]) ? $switch_position_bottom_right_in_mobile["bottom"] : "40"; |
| 37 |
$switch_position_bottom_right_right_in_mobile = isset($switch_position_bottom_right_in_mobile["right"]) ? $switch_position_bottom_right_in_mobile["right"] : "40"; |
| 38 |
$switch_position_bottom_left_in_mobile = isset($different_switch_in_mobile["switch_position_bottom_left_in_mobile"]) ? $different_switch_in_mobile["switch_position_bottom_left_in_mobile"] : ""; |
| 39 |
$switch_position_bottom_left_bottom_in_mobile = isset($switch_position_bottom_left_in_mobile["bottom"]) ? $switch_position_bottom_left_in_mobile["bottom"] : "40"; |
| 40 |
$switch_position_bottom_left_left_in_mobile = isset($switch_position_bottom_left_in_mobile["left"]) ? $switch_position_bottom_left_in_mobile["left"] : "40"; |
| 41 |
$floating_switch_width = isset($tooltip_on_floating_switch["floating_switch_width"]) ? $tooltip_on_floating_switch["floating_switch_width"] : ""; |
| 42 |
|
| 43 |
// Different Switch in Mobile — a completely separate floating switch configuration |
| 44 |
// (toggler, size, colors, border, attention) that overrides the default switch only |
| 45 |
// on mobile screens (<= 600px). When enabled, a second switch element is rendered and |
| 46 |
// the desktop/mobile elements are swapped via the same 600px breakpoint used by the |
| 47 |
// mobile-position feature, keeping it cache-safe (no server-side device detection). |
| 48 |
$dark_switcher_switch_in_mobile = isset($options["dark_switcher_switch_in_mobile"]) ? $options["dark_switcher_switch_in_mobile"] : ''; |
| 49 |
$darkify_mobile_unique_id = $this->unique_id . '_m'; |
| 50 |
?> |
| 51 |
<style type="text/css" class="darkify_inline_css"> |
| 52 |
#darkify_switch_<?php echo esc_attr($this->unique_id); ?> { |
| 53 |
<?php foreach ($this->utils->generateSwitchStyles($options) as $key => $value) { ?><?php echo esc_attr($key); ?>: <?php echo esc_attr($value); ?>; |
| 54 |
<?php } ?> |
| 55 |
} |
| 56 |
<?php if ($dark_switcher_switch_in_mobile) { |
| 57 |
// Map the *_in_mobile appearance fields onto the keys generateSwitchStyles() expects, |
| 58 |
// so the mobile switch reuses the exact same CSS-variable pipeline as the default one. |
| 59 |
$mobile_style_options = array( |
| 60 |
'switch_background' => isset($options["switch_background_in_mobile"]) ? $options["switch_background_in_mobile"] : [], |
| 61 |
'switch_icon_color' => isset($options["switch_icon_color_in_mobile"]) ? $options["switch_icon_color_in_mobile"] : [], |
| 62 |
'switch_border' => isset($options["switch_border_in_mobile"]) ? $options["switch_border_in_mobile"] : [], |
| 63 |
); |
| 64 |
?>#darkify_switch_<?php echo esc_attr($darkify_mobile_unique_id); ?> { |
| 65 |
<?php foreach ($this->utils->generateSwitchStyles($mobile_style_options) as $key => $value) { ?><?php echo esc_attr($key); ?>: <?php echo esc_attr($value); ?>; |
| 66 |
<?php } ?> |
| 67 |
} |
| 68 |
<?php } ?> |
| 69 |
|
| 70 |
#darkify_switch_<?php echo esc_attr($this->unique_id); ?><?php if ($dark_switcher_switch_in_mobile) { ?>, |
| 71 |
#darkify_switch_<?php echo esc_attr($darkify_mobile_unique_id); ?><?php } ?> { |
| 72 |
--darkify_switch_position_from_top_right_top: <?php echo esc_attr($switch_position_top_right_top); ?>px; |
| 73 |
--darkify_switch_position_from_top_right_right: <?php echo esc_attr($switch_position_top_right_right); ?>px; |
| 74 |
--darkify_switch_position_from_bottom_right_bottom: <?php echo esc_attr($switch_position_bottom_right_bottom); ?>px; |
| 75 |
--darkify_switch_position_from_bottom_right_right: <?php echo esc_attr($switch_position_bottom_right_right); ?>px; |
| 76 |
--darkify_switch_position_from_top_left_top: <?php echo esc_attr($switch_position_top_left_top); ?>px; |
| 77 |
--darkify_switch_position_from_top_left_left: <?php echo esc_attr($switch_position_top_left_left); ?>px; |
| 78 |
--darkify_switch_position_from_bottom_left_bottom: <?php echo esc_attr($switch_position_bottom_left_bottom); ?>px; |
| 79 |
--darkify_switch_position_from_bottom_left_left: <?php echo esc_attr($switch_position_bottom_left_left); ?>px; |
| 80 |
<?php if ($switch_position_different_in_mobile) { ?> |
| 81 |
--darkify_switch_position_from_top_right_top_in_mobile: <?php echo esc_attr($switch_position_top_right_right_in_mobile); ?>px; |
| 82 |
--darkify_switch_position_from_top_right_right_in_mobile: <?php echo esc_attr($switch_position_top_right_right_in_mobile); ?>px; |
| 83 |
--darkify_switch_position_from_bottom_right_bottom_in_mobile: <?php echo esc_attr($switch_position_bottom_right_bottom_in_mobile); ?>px; |
| 84 |
--darkify_switch_position_from_bottom_right_right_in_mobile: <?php echo esc_attr($switch_position_bottom_right_right_in_mobile); ?>px; |
| 85 |
--darkify_switch_position_from_top_left_top_in_mobile: <?php echo esc_attr($switch_position_top_left_top_in_mobile); ?>px; |
| 86 |
--darkify_switch_position_from_top_left_left_in_mobile: <?php echo esc_attr($switch_position_top_left_top_in_mobile); ?>px; |
| 87 |
--darkify_switch_position_from_bottom_left_bottom_in_mobile: <?php echo esc_attr($switch_position_bottom_left_bottom_in_mobile); ?>px; |
| 88 |
--darkify_switch_position_from_bottom_left_left_in_mobile: <?php echo esc_attr($switch_position_bottom_left_left_in_mobile); ?>px; |
| 89 |
<?php } if ($floating_switch_width) { ?>--darkify_switch_tooltip_bg_color: <?php echo esc_attr($tooltip_color["tooltip_background_color"]); ?>; |
| 90 |
--darkify_switch_tooltip_text_color: <?php echo esc_attr($tooltip_color["tooltip_text_color"]); ?>; |
| 91 |
<?php } ?> |
| 92 |
} |
| 93 |
</style> |
| 94 |
|
| 95 |
<?php |
| 96 |
$hide_dark_mode_on_mobile_screen = ""; |
| 97 |
|
| 98 |
if ($hide_dark_mode_on_mobile) { |
| 99 |
if ($hide_on_mobile["type_of_hide_by"] == "screen_size" || $hide_on_mobile["type_of_hide_by"] == "both") { |
| 100 |
$hide_dark_mode_on_mobile_screen = "darkify_hide_on_mobile"; |
| 101 |
} |
| 102 |
} |
| 103 |
|
| 104 |
if ($dark_mode_switch_position == "") { |
| 105 |
$floating_switch_position = "darkify_bottom_right"; |
| 106 |
} else { |
| 107 |
$floating_switch_position = "darkify_" . $dark_mode_switch_position; |
| 108 |
} |
| 109 |
if ($switch_position_different_in_mobile) { |
| 110 |
$floating_switch_position .= " darkify_" . $different_switch_in_mobile["switch_position_in_mobile"] . "_in_mobile"; |
| 111 |
} |
| 112 |
|
| 113 |
$tooltip_classes = ""; |
| 114 |
if ($floating_switch_width) { |
| 115 |
$tooltip_classes = "darkify_tooltip darkify_tooltip_" . $tooltip_on_floating_switch["tooltip_position"]; |
| 116 |
} |
| 117 |
|
| 118 |
$darkify_absolute_position = isset($options["enable_absolute_position"]) ? $options["enable_absolute_position"] : ''; |
| 119 |
$position_class = ''; |
| 120 |
if ($darkify_absolute_position) { |
| 121 |
$position_class = ' darkify_absolute_position'; |
| 122 |
} |
| 123 |
$enable_dark_switcher = isset($options["enable_dark_switcher"]) ? $options["enable_dark_switcher"] : 'classic'; |
| 124 |
$switch_size = isset($options["switch_size"]) ? $options["switch_size"] : '1'; |
| 125 |
$switch_size_custom = isset($options["switch_size_custom"]) ? $options["switch_size_custom"] : '100'; |
| 126 |
if ($switch_size === 'custom') { |
| 127 |
$switch_size = $switch_size_custom / 100; |
| 128 |
} |
| 129 |
|
| 130 |
$tooltip_text = isset($tooltip_on_floating_switch['tooltip_text']) ? $tooltip_on_floating_switch['tooltip_text'] : esc_html__('Toggle Dark Mode', 'darkify'); |
| 131 |
|
| 132 |
// Only swap in a separate mobile switch when the feature is on AND the switch is not |
| 133 |
// already hidden on mobile by the "hide on mobile" (screen size) option. |
| 134 |
$render_mobile_switch = $dark_switcher_switch_in_mobile && !$hide_dark_mode_on_mobile_screen; |
| 135 |
|
| 136 |
// switcher_wrapper() returns markup with every dynamic value escaped via |
| 137 |
// esc_attr() at assembly, so the returned string is safe to print as-is. |
| 138 |
echo Darkify::switcher_wrapper('switcher', $this->unique_id, $enable_dark_switcher, $switch_size, $position_class, $floating_switch_position, $tooltip_classes, $hide_dark_mode_on_mobile_screen, $floating_switch_width, $tooltip_text); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 139 |
|
| 140 |
if ($render_mobile_switch) { |
| 141 |
$enable_dark_switcher_in_mobile = isset($options["enable_dark_switcher_in_mobile"]) ? $options["enable_dark_switcher_in_mobile"] : 'classic'; |
| 142 |
$switch_size_in_mobile = isset($options["switch_size_in_mobile"]) ? $options["switch_size_in_mobile"] : '1'; |
| 143 |
$switch_size_custom_in_mobile = isset($options["switch_size_custom_in_mobile"]) ? $options["switch_size_custom_in_mobile"] : '100'; |
| 144 |
if ($switch_size_in_mobile === 'custom') { |
| 145 |
$switch_size_in_mobile = $switch_size_custom_in_mobile / 100; |
| 146 |
} |
| 147 |
|
| 148 |
// Attention effect for the mobile switch is applied as a class on render (the default |
| 149 |
// switch receives its class from JS via darkify_init_attention_effect()). |
| 150 |
$enable_switch_attention_in_mobile = isset($options["enable_switch_attention_in_mobile"]) ? $options["enable_switch_attention_in_mobile"] : ''; |
| 151 |
$switch_attention_effect_in_mobile = isset($options["switch_attention_effect_in_mobile"]) ? $options["switch_attention_effect_in_mobile"] : 'pulse'; |
| 152 |
$mobile_extra_class = $position_class; |
| 153 |
if ($enable_switch_attention_in_mobile && $switch_attention_effect_in_mobile && $switch_attention_effect_in_mobile !== 'none') { |
| 154 |
$mobile_extra_class = trim($mobile_extra_class . ' darkify_attention_' . $switch_attention_effect_in_mobile); |
| 155 |
} |
| 156 |
|
| 157 |
// See the note above: switcher_wrapper() escapes each value internally. |
| 158 |
echo Darkify::switcher_wrapper('switcher', $darkify_mobile_unique_id, $enable_dark_switcher_in_mobile, $switch_size_in_mobile, $mobile_extra_class, $floating_switch_position, $tooltip_classes, '', $floating_switch_width, $tooltip_text); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 159 |
?> |
| 160 |
<style type="text/css" class="darkify_inline_css"> |
| 161 |
/* Swap the default switch (desktop) and the mobile switch (<= 600px) by only ever |
| 162 |
toggling `display: none` — never forcing a display value on the visible element, |
| 163 |
so each switch keeps the flex centering defined by .darkify_switch_style (and any |
| 164 |
per-variant display such as inline-block) intact. */ |
| 165 |
@media only screen and (min-width: 601px) { |
| 166 |
#darkify_switch_<?php echo esc_attr($darkify_mobile_unique_id); ?> { |
| 167 |
display: none !important; |
| 168 |
} |
| 169 |
} |
| 170 |
@media only screen and (max-width: 600px) { |
| 171 |
#darkify_switch_<?php echo esc_attr($this->unique_id); ?> { |
| 172 |
display: none !important; |
| 173 |
} |
| 174 |
} |
| 175 |
</style> |
| 176 |
<?php } |
