← All changes | src/Frontend/DarkifyShortcode.php +117 -30 trunk → 1.4.6 View file →

		@@ -1,10 +1,8 @@
1	1	<?php
2	2
3	3	namespace ThemeAtelier\Darkify\Frontend;
4	4
5		-use ThemeAtelier\Darkify\Includes\Darkify;
6		-
7	5	// If this file is called directly, abort.
8	6	if (!defined('WPINC')) {
9	7	die;
10	8	}
		@@ -23,19 +21,8 @@
23	21	}
24	22
25	23	public function darkify_shortcode_parser($atts, $content = null)
26	24	{
27		- // With Frontend Dark Mode off, client_main.css/.js are never
28		- // enqueued on the front end, so rendering the switch markup anyway
29		- // leaves an unstyled toggle behind that does nothing when clicked.
30		- // Gate every switch entry point here: the Gutenberg block and the
31		- // Elementor widget both render through this shortcode. The floating
32		- // switch, menu switch and inline scripts are already gated in
33		- // Frontend.php.
34		- if (! $this->base_client->darkify_is_dark_mode_allowed()) {
35		- return '';
36		- }
37		-
38	25	$options = get_option('darkify');
39	26
40	27	// Background
41	28	$switch_background = isset($options['switch_background']) ? $options['switch_background'] : [];
		@@ -53,13 +40,21 @@
53	40	$switch_icon_color = isset($options['switch_icon_color']) ? $options['switch_icon_color'] : [];
54	41	$switch_light_mode_color = !empty($switch_icon_color) ? $switch_icon_color['switch_light_mode_color'] : '#ffffff';
55	42	$switch_dark_mode_color = !empty($switch_icon_color) ? $switch_icon_color['switch_dark_mode_color'] : '#121116';
56	43
	44	+ $switch_icon_size = isset($options["switch_icon_size"]) ? $options["switch_icon_size"] : [];
	45	+ $switch_icon_size_width = !empty($switch_icon_size['width']) ? $switch_icon_size['width'] . "px" : '40px';
	46	+
	47	+ $switch_width_height = isset($options['switch_width_height']) ? $options['switch_width_height'] : [];
	48	+ $switch_width = !empty($switch_width_height['width']) ? $switch_width_height['width'] . "px" : '60px';
	49	+ $switch_height = !empty($switch_width_height['height']) ? $switch_width_height['height'] . "px" : '60px';
	50	+
57	51	$atts = shortcode_atts(array(
58	52	'switch' => '1',
59		- 'switch_size' => '100',
60	53	'light_mode_bg' => $switch_light_mode_bg,
61	54	'dark_mode_bg' => $switch_dark_mode_bg,
	55	+ 'width' => $switch_width,
	56	+ 'height' => $switch_height,
62	57	'border' => $switch_border_all,
63	58	'border_light_color' => $switch_border_light_color,
64	59	'border_dark_color' => $switch_border_dark_color,
65	60	'border_radius' => $switch_border_radius,
		@@ -64,8 +59,9 @@
64	59	'border_dark_color' => $switch_border_dark_color,
65	60	'border_radius' => $switch_border_radius,
66	61	'light_mode_color' => $switch_light_mode_color,
67	62	'dark_mode_color' => $switch_dark_mode_color,
	63	+ 'icon_size' => $switch_icon_size_width,
68	64	), $atts);
69	65
70	66	return $this->darkify_client_view_maker($atts);
71	67	}
		@@ -83,28 +79,119 @@
83	79	<?php foreach ($switch_styles as $key => $value) { ?><?php echo esc_attr($key); ?>: <?php echo esc_attr($value); ?>;
84	80	<?php } ?>
85	81	}
86	82	</style>
87		-<?php }
	83	+ <?php }
88	84
89	85	$switcher_number = $atts['switch'];
90	86
91		- $switcher_number = $atts['switch'];
92		- if ($switcher_number === '1') {
93		- $switcher_number = 'classic';
94		- } elseif ($switcher_number === '2') {
95		- $switcher_number = 'expand';
96		- } elseif ($switcher_number === '3') {
97		- $switcher_number = 'inner-moon';
98		- } elseif ($switcher_number === '4') {
99		- $switcher_number = 'within';
100		- } elseif ($switcher_number === '5') {
101		- $switcher_number = 'orbit';
	87	+ switch ($switcher_number) {
	88	+ case '1':
	89	+ wp_enqueue_style('theme-classic');
	90	+ ?>
	91	+ <div id="darkify_switch_<?php echo esc_attr($unique_id); ?>" onclick="darkify_switch_trigger()" class="darkify_switch darkify_switch_style" style="position: relative;">
	92	+ <div class="theme-toggle">
	93	+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" stroke-linecap="round" class="theme-toggle__classic" viewBox="0 0 32 32">
	94	+ <clipPath id="theme-toggle__classic__cutout">
	95	+ <path d="M0-5h30a1 1 0 0 0 9 13v24H0Z" />
	96	+ </clipPath>
	97	+ <g clip-path="url(#theme-toggle__classic__cutout)">
	98	+ <circle cx="16" cy="16" r="9.34" />
	99	+ <g stroke="currentColor" stroke-width="1.5">
	100	+ <path d="M16 5.5v-4" />
	101	+ <path d="M16 30.5v-4" />
	102	+ <path d="M1.5 16h4" />
	103	+ <path d="M26.5 16h4" />
	104	+ <path d="m23.4 8.6 2.8-2.8" />
	105	+ <path d="m5.7 26.3 2.9-2.9" />
	106	+ <path d="m5.8 5.8 2.8 2.8" />
	107	+ <path d="m23.4 23.4 2.9 2.9" />
	108	+ </g>
	109	+ </g>
	110	+ </svg>
	111	+ </div>
	112	+ </div>
	113	+ <?php
	114	+ break;
	115	+ case '2':
	116	+ wp_enqueue_style('theme-expand');
	117	+ ?>
	118	+ <div id="darkify_switch_<?php echo esc_attr($unique_id); ?>" onclick="darkify_switch_trigger()" class="darkify_switch darkify_switch_style">
	119	+ <div class="theme-toggle">
	120	+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="0px" height="0px" fill="currentColor" class="theme-toggle__expand" viewBox="0 0 32 32">
	121	+ <clipPath id="theme-toggle__expand__cutout">
	122	+ <path d="M0-11h25a1 1 0 0017 13v30H0Z" />
	123	+ </clipPath>
	124	+ <g clip-path="url(#theme-toggle__expand__cutout)">
	125	+ <circle cx="16" cy="16" r="8.4" />
	126	+ <path d="M18.3 3.2c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3S14.7.9 16 .9s2.3 1 2.3 2.3zm-4.6 25.6c0-1.3 1-2.3 2.3-2.3s2.3 1 2.3 2.3-1 2.3-2.3 2.3-2.3-1-2.3-2.3zm15.1-10.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zM3.2 13.7c1.3 0 2.3 1 2.3 2.3s-1 2.3-2.3 2.3S.9 17.3.9 16s1-2.3 2.3-2.3zm5.8-7C9 7.9 7.9 9 6.7 9S4.4 8 4.4 6.7s1-2.3 2.3-2.3S9 5.4 9 6.7zm16.3 21c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zm2.4-21c0 1.3-1 2.3-2.3 2.3S23 7.9 23 6.7s1-2.3 2.3-2.3 2.4 1 2.4 2.3zM6.7 23C8 23 9 24 9 25.3s-1 2.3-2.3 2.3-2.3-1-2.3-2.3 1-2.3 2.3-2.3z" />
	127	+ </g>
	128	+ </svg>
	129	+ </div>
	130	+ </div>
	131	+
	132	+
	133	+ <?php break;
	134	+ case '3':
	135	+ wp_enqueue_style('theme-inner-moon');
	136	+ ?>
	137	+ <div id="darkify_switch_<?php echo esc_attr($unique_id); ?>" onclick="darkify_switch_trigger()" class="darkify_switch darkify_switch_style">
	138	+ <div class="theme-toggle">
	139	+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="0px" height="0px" fill="currentColor" class="theme-toggle__inner-moon" viewBox="0 0 32 32">
	140	+ <path d="M27.5 11.5v-7h-7L16 0l-4.5 4.5h-7v7L0 16l4.5 4.5v7h7L16 32l4.5-4.5h7v-7L32 16l-4.5-4.5zM16 25.4a9.39 9.39 0 1 1 0-18.8 9.39 9.39 0 1 1 0 18.8z" />
	141	+ <circle cx="16" cy="16" r="8.1" />
	142	+ </svg>
	143	+ </div>
	144	+
	145	+ </div>
	146	+ <?php
	147	+ break;
	148	+ case '4':
	149	+ wp_enqueue_style('theme-within');
	150	+ ?>
	151	+ <div id="darkify_switch_<?php echo esc_attr($unique_id); ?>" onclick="darkify_switch_trigger()" class="darkify_switch darkify_switch_style">
	152	+ <div class="theme-toggle">
	153	+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="theme-toggle__within" height="1em" width="1em" viewBox="0 0 32 32" fill="currentColor">
	154	+ <clipPath id="theme-toggle__within__clip">
	155	+ <path d="M0 0h32v32h-32ZM6 16A1 1 0 0026 16 1 1 0 006 16" />
	156	+ </clipPath>
	157	+ <g clip-path="url(#theme-toggle__within__clip)">
	158	+ <path d="M30.7 21.3 27.1 16l3.7-5.3c.4-.5.1-1.3-.6-1.4l-6.3-1.1-1.1-6.3c-.1-.6-.8-.9-1.4-.6L16 5l-5.4-3.7c-.5-.4-1.3-.1-1.4.6l-1 6.3-6.4 1.1c-.6.1-.9.9-.6 1.3L4.9 16l-3.7 5.3c-.4.5-.1 1.3.6 1.4l6.3 1.1 1.1 6.3c.1.6.8.9 1.4.6l5.3-3.7 5.3 3.7c.5.4 1.3.1 1.4-.6l1.1-6.3 6.3-1.1c.8-.1 1.1-.8.7-1.4zM16 25.1c-5.1 0-9.1-4.1-9.1-9.1 0-5.1 4.1-9.1 9.1-9.1s9.1 4.1 9.1 9.1c0 5.1-4 9.1-9.1 9.1z" />
	159	+ </g>
	160	+ <path class="theme-toggle__within__circle" d="M16 7.7c-4.6 0-8.2 3.7-8.2 8.2s3.6 8.4 8.2 8.4 8.2-3.7 8.2-8.2-3.6-8.4-8.2-8.4zm0 14.4c-3.4 0-6.1-2.9-6.1-6.2s2.7-6.1 6.1-6.1c3.4 0 6.1 2.9 6.1 6.2s-2.7 6.1-6.1 6.1z" />
	161	+ <path class="theme-toggle__within__inner" d="M16 9.5c-3.6 0-6.4 2.9-6.4 6.4s2.8 6.5 6.4 6.5 6.4-2.9 6.4-6.4-2.8-6.5-6.4-6.5z" />
	162	+ </svg>
	163	+ </div>
	164	+
	165	+ </div>
	166	+ <?php break;
	167	+ default:
	168	+ wp_enqueue_style('theme-classic');
	169	+ ?>
	170	+ <div id="darkify_switch_<?php echo esc_attr($unique_id); ?>" onclick="darkify_switch_trigger()" class="darkify_switch darkify_switch_style" style="position: relative;">
	171	+ <div class="theme-toggle">
	172	+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="0px" height="0px" fill="currentColor" stroke-linecap="round" class="theme-toggle__classic" viewBox="0 0 32 32">
	173	+ <clipPath id="theme-toggle__classic__cutout">
	174	+ <path d="M0-5h30a1 1 0 0 0 9 13v24H0Z" />
	175	+ </clipPath>
	176	+ <g clip-path="url(#theme-toggle__classic__cutout)">
	177	+ <circle cx="16" cy="16" r="9.34" />
	178	+ <g stroke="currentColor" stroke-width="1.5">
	179	+ <path d="M16 5.5v-4" />
	180	+ <path d="M16 30.5v-4" />
	181	+ <path d="M1.5 16h4" />
	182	+ <path d="M26.5 16h4" />
	183	+ <path d="m23.4 8.6 2.8-2.8" />
	184	+ <path d="m5.7 26.3 2.9-2.9" />
	185	+ <path d="m5.8 5.8 2.8 2.8" />
	186	+ <path d="m23.4 23.4 2.9 2.9" />
	187	+ </g>
	188	+ </g>
	189	+ </svg>
	190	+ </div>
	191	+ </div>
	192	+<?php
102	193	}
103		- $switch_size = $atts['switch_size'] / 100;
104		- // switcher_wrapper() escapes each dynamic value internally, so its
105		- // returned markup is safe to print as-is.
106		- echo Darkify::switcher_wrapper('shortcode', $unique_id, $switcher_number, $switch_size); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
107	194	return ob_get_clean();
108	195	}
109	196	}
110	197	}