simpleanalytics / src / UI / PageLayoutComponent.php

PageLayoutComponent.php in Simple Analytics 1.74, at src/UI/PageLayoutComponent.php

144 lines 5.5 KB

Raw Download Zip

1	<?php
2
3	namespace SimpleAnalytics\UI;
4
5	use SimpleAnalytics\Settings\{Page, Tab};
6	use function SimpleAnalytics\get_icon;
7	use const SimpleAnalytics\PLUGIN_URL;
8
9	class PageLayoutComponent
10	{
11	/**
12	* @readonly
13	* @var \SimpleAnalytics\Settings\Page
14	*/
15	private $page;
16	public function __construct(Page $page)
17	{
18	$this->page = $page;
19	}
20
21	public function __invoke(): void
22	{
23	$currentTab = $this->getCurrentTab($this->page->getTabs());
24	?>
25	<style>
26	#wpwrap {
27	background: white;
28	}
29
30	#wpcontent {
31	padding-left: 0;
32	}
33	</style>
34	<template shadowrootmode="open">
35	<link rel="preconnect" href="https://fonts.bunny.net">
36	<link rel="stylesheet" href="<?php echo PLUGIN_URL ?>build/css/settings.css">
37	<form method="post" action="options.php">
38	<!-- Hidden fields -->
39	<?php settings_fields($this->page->getOptionGroup($currentTab)); ?>
40
41	<!-- Header / Nav -->
42	<header class="pt-5 bg-primaryBg">
43	<div class="mx-auto max-w-3xl flex-col justify-between gap-5 sm:flex sm:items-baseline">
44	<div class="flex items-center">
45	<!-- Logo -->
46	<a
47	href="https://dashboard.simpleanalytics.com/websites"
48	target="_blank"
49	class="text-base font-semibold leading-6 text-gray-900"
50	>
51	<img
52	alt="SimpleAnalytics logo"
53	src="<?php echo PLUGIN_URL ?>logo.svg"
54	class="mr-2 inline-block h-10 w-auto text-primary"
55	>
56	</a>
57	<!-- "Open Dashboard" link -->
58	<a
59	href="https://dashboard.simpleanalytics.com/websites"
60	target="_blank"
61	class="inline-flex items-center rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
62	>
63	<?php echo get_icon('external')->class('w-3.5 h-3.5 mr-0.5'); ?>
64	Open Dashboard
65	</a>
66	</div>
67
68	<!-- Tabs -->
69	<div class="mt-4 sm:mt-0">
70	<?php (new TabListComponent($this->page->getSlug(), $currentTab, $this->page->getTabs()))(); ?>
71	</div>
72	</div>
73	</header>
74
75	<!-- Fields / Layout -->
76	<div class="mx-auto max-w-3xl bg-white px-4 py-6 sm:px-4 lg:px-0">
77	<div class="border-b border-gray-900/10 pb-7">
78	<?php $currentTab->render(); ?>
79	</div>
80
81	<div class="mt-6 flex items-center justify-start gap-x-6">
82	<button
83	type="submit"
84	class="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm bg-primary hover:bg-red-500 focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
85	>
86	Save Changes
87	</button>
88	</div>
89	</div>
90	</form>
91	<script>
92	/**
93	* Add value as a new line to textarea
94	*
95	* @param textarea HTMLTextAreaElement
96	* @param value string
97	*/
98	function sa_textarea_add_value(textarea, value) {
99	if (textarea.value.includes(value)) {
100	return;
101	}
102
103	if (textarea.value.trim() === "") {
104	textarea.value = value;
105	} else {
106	textarea.value += `\n${value}`;
107	}
108	}
109	</script>
110	</template>
111	<script>
112	// Polyfill in case the browser has no support for shadowRootMode
113	// 1. https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
114	// 2. https://caniuse.com/mdn-html_elements_template_shadowrootmode
115	(function attachShadowRoots(root) {
116	root.querySelectorAll("template[shadowrootmode]").forEach(template => {
117	const mode = template.getAttribute("shadowrootmode");
118	const shadowRoot = template.parentNode.attachShadow({ mode });
119	shadowRoot.appendChild(template.content);
120	template.remove();
121	attachShadowRoots(shadowRoot);
122	});
123	})(document);
124	</script>
125	<?php
126	}
127
128	protected function getCurrentTab(array $tabs): Tab
129	{
130	$currentTabSlug = $_GET['tab'] ?? $tabs[0]->getSlug();
131
132	return $this->findTabBySlug($tabs, $currentTabSlug) ?? $tabs[0];
133	}
134
135	protected function findTabBySlug(array $tabs, string $slug): ?Tab
136	{
137	foreach ($tabs as $tab) {
138	if ($tab->getSlug() === $slug) return $tab;
139	}
140
141	return null;
142	}
143	}
144