simpleanalytics / src / UI / PageLayoutComponent.php

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

196 lines 8.1 KB

Raw Download Zip

1	<?php
2
3	namespace SimpleAnalytics\UI;
4
5	use SimpleAnalytics\Settings\{AdminPage, Tab};
6	use function SimpleAnalytics\get_icon;
7	use const SimpleAnalytics\PLUGIN_URL;
8
9	class PageLayoutComponent
10	{
11	private const DASHBOARD_URL = 'https://dashboard.simpleanalytics.com/?utm_source=wordpress&utm_medium=plugin&utm_content=go_to_dashboard_button';
12	private const SIGNUP_URL = 'https://www.simpleanalytics.com/signup?utm_source=wordpress&utm_medium=plugin&utm_content=signup_link';
13
14	/**
15	* @readonly
16	* @var \SimpleAnalytics\Settings\AdminPage
17	*/
18	private $page;
19	public function __construct(AdminPage $page)
20	{
21	$this->page = $page;
22	}
23
24	public function __invoke(): void
25	{
26	$currentTab = $this->getCurrentTab($this->page->getTabs());
27	?>
28	<style>
29	#wpwrap {
30	background: white;
31	}
32
33	#wpcontent {
34	padding-left: 0;
35	}
36	</style>
37	<template shadowrootmode="open">
38	<link rel="preconnect" href="https://fonts.bunny.net">
39	<link rel="stylesheet" href="<?php echo PLUGIN_URL ?>build/css/settings.css">
40	<form method="post" action="options.php">
41	<!-- Hidden fields -->
42	<?php settings_fields($this->page->getOptionGroup($currentTab)); ?>
43
44	<!-- Header / Nav -->
45	<header class="pt-5 bg-primaryBg">
46	<div class="mx-auto max-w-3xl flex-col justify-between gap-5 sm:flex sm:items-baseline">
47	<div class="flex items-center">
48	<!-- Logo -->
49	<a
50	href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
51	target="_blank"
52	class="text-base font-semibold leading-6 text-gray-900"
53	>
54	<img
55	alt="SimpleAnalytics logo"
56	src="<?php echo PLUGIN_URL ?>logo.svg"
57	class="mr-2 inline-block h-10 w-auto text-primary"
58	>
59	</a>
60	<!-- "Open Dashboard" link -->
61	<a
62	href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
63	target="_blank"
64	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"
65	>
66	<?php echo get_icon('external')->class('w-3.5 h-3.5 mr-0.5'); ?>
67	Open Dashboard
68	</a>
69	</div>
70
71	<!-- Tabs -->
72	<div class="mt-4 sm:mt-0">
73	<?php (new TabListComponent($this->page->getSlug(), $currentTab, $this->page->getTabs()))(); ?>
74	</div>
75	</div>
76	</header>
77
78	<!-- Fields / Layout -->
79	<div class="mx-auto max-w-3xl bg-white px-4 py-6 sm:px-4 lg:px-0">
80	<div class="border-b border-gray-900/10 pb-7">
81	<?php if ($currentTab->getSlug() === 'general'): ?>
82	<?php $this->renderGeneralTabIntro(); ?>
83	<?php endif; ?>
84	<?php $currentTab->render(); ?>
85	</div>
86
87	<?php if ($currentTab->getSlug() !== 'general'): ?>
88	<div class="mt-6 flex items-center justify-start gap-x-6">
89	<button
90	type="submit"
91	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"
92	>
93	Save Changes
94	</button>
95	</div>
96	<?php endif; ?>
97	</div>
98	</form>
99	<script>
100	/**
101	* Add value as a new line to textarea
102	*
103	* @param textarea HTMLTextAreaElement
104	* @param value string
105	*/
106	function sa_textarea_add_value(textarea, value) {
107	if (textarea.value.includes(value)) {
108	return;
109	}
110
111	if (textarea.value.trim() === "") {
112	textarea.value = value;
113	} else {
114	textarea.value += `\n${value}`;
115	}
116	}
117	</script>
118	</template>
119	<script>
120	// Polyfill in case the browser has no support for shadowRootMode
121	// 1. https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
122	// 2. https://caniuse.com/mdn-html_elements_template_shadowrootmode
123	(function attachShadowRoots(root) {
124	root.querySelectorAll("template[shadowrootmode]").forEach(template => {
125	const mode = template.getAttribute("shadowrootmode");
126	const shadowRoot = template.parentNode.attachShadow({ mode });
127	shadowRoot.appendChild(template.content);
128	template.remove();
129	attachShadowRoots(shadowRoot);
130	});
131	})(document);
132	</script>
133	<?php
134	}
135
136	protected function getCurrentTab(array $tabs): Tab
137	{
138	$currentTabSlug = $_GET['tab'] ?? $tabs[0]->getSlug();
139
140	return $this->findTabBySlug($tabs, $currentTabSlug) ?? $tabs[0];
141	}
142
143	protected function findTabBySlug(array $tabs, string $slug): ?Tab
144	{
145	foreach ($tabs as $tab) {
146	if ($tab->getSlug() === $slug) return $tab;
147	}
148
149	return null;
150	}
151
152	protected function renderGeneralTabIntro(): void
153	{
154	?>
155	<div class="mb-7" style="max-width: 64ch;">
156	<p class="text-sm text-gray-700">
157	Simple Analytics is now added to your WordPress site.
158	</p>
159	<p class="mt-4 text-sm text-gray-700">
160	The plugin collects pageviews in a privacy-first way, without cookies or personal data.
161	</p>
162	<p class="mt-4 text-sm text-gray-700">
163	Your stats will appear in
164	<a class="text-primary hover:underline" target="_blank" href="<?php echo esc_url(self::DASHBOARD_URL); ?>">
165	the Simple Analytics dashboard
166	</a>
167	within a few minutes.
168	</p>
169	<p class="mt-4 text-sm text-gray-700">
170	To avoid tracking your own visits, go to the "Ignore Rules" tab and ignore visits from logged-in admins.
171	You can also add your own IP address there.
172	</p>
173	<p class="mt-4 text-sm text-gray-700">
174	To automatically track downloads, outbound links, and email clicks, go to the "Events" tab and enable "Collect automated events".
175	</p>
176	<p class="mt-4 text-sm text-gray-700">
177	No account yet? Create one at
178	<a class="text-primary hover:underline" target="_blank" href="<?php echo esc_url(self::SIGNUP_URL); ?>">
179	simpleanalytics.com.
180	</a>
181	You can start with a free trial and choose a free or paid plan later.
182	</p>
183	<p class="mt-6">
184	<a
185	href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
186	target="_blank"
187	class="inline-flex items-center rounded bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500"
188	>
189	Open dashboard
190	</a>
191	</p>
192	</div>
193	<?php
194	}
195	}
196