Skip to content

Commit e3abf26

Browse files
Dan0szDan0sz
authored
Merge pull request #258 from plausible/advanced_options_section
Added: grouped Custom events, hash based routing and IE compatibility under Advanced Options section.
2 parents 62bf311 + 8ab3807 commit e3abf26

File tree

6 files changed

+82
-44
lines changed

6 files changed

+82
-44
lines changed

‎assets/src/css/admin/main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
div[id$="_content"] .toggle-container {
6+
@apply mt-6;
7+
}

‎assets/src/css/admin/main.min.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@tailwind base;@tailwind components;

‎assets/src/js/admin/main.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,19 @@ document.addEventListener('DOMContentLoaded', () => {
7979
this.showMessages();
8080
},
8181

82+
toggleSection: function (target) {
83+
let section = document.getElementById(target + '_content');
84+
let chevron = document.getElementById(target + '_chevron');
85+
86+
if (section.className.indexOf('hidden') !== -1) {
87+
section.className = 'block';
88+
chevron.classList.add('rotate-180');
89+
} else {
90+
section.className = 'hidden';
91+
chevron.classList.remove('rotate-180');
92+
}
93+
},
94+
8295
/**
8396
* Toggle Option and store in DB.
8497
*
@@ -563,5 +576,7 @@ document.addEventListener('DOMContentLoaded', () => {
563576
}
564577
}
565578

579+
plausibleToggleSection = plausible.toggleSection;
580+
566581
plausible.init();
567582
});

‎assets/src/js/admin/main.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Admin/Settings/API.php‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,12 @@ public function settings_page() {
139139
<nav class="flex items-center justify-between py-8" aria-label="Global">
140140
<div class="flex items-center gap-x-12">
141141
<a href="#" class="-m-1.5 p-1.5">
142-
<img alt="Plausible logo" class="w-44 -mt-2 dark:hidden"
142+
<img alt="Plausible logo" class="w-44 -mt-2"
143143
src="<?php echo PLAUSIBLE_ANALYTICS_PLUGIN_URL . 'assets/dist/images/icon.svg'; ?>">
144144
</a>
145145
<?php $this->render_navigation(); ?>
146146
</div>
147-
<div class="flex item-center gap-x-6 md:flex hidden">
147+
<div class="hidden item-center gap-x-6 md:flex">
148148
<?php echo $this->render_quick_actions(); ?>
149149
</div>
150150
</nav>
@@ -153,6 +153,7 @@ public function settings_page() {
153153
<?php foreach ( $this->fields[ $current_tab ] as $tab => $field ): ?>
154154
<div class="plausible-analytics-section shadow sm:rounded-md sm:overflow-hidden">
155155
<?php
156+
/** @var string $type checkbox|group|toggle_group|button|text */
156157
$type = $field[ 'type' ] ?? '';
157158

158159
if ( $type ) {
@@ -184,7 +185,7 @@ private function show_wizard() {
184185
<div class="flex flex-col h-full">
185186
<!-- logo -->
186187
<div class="w-full my-8 text-center">
187-
<img alt="Plausible logo" class="w-44 -mt-2 dark:hidden"
188+
<img alt="Plausible logo" class="w-44 -mt-2"
188189
src="<?php echo PLAUSIBLE_ANALYTICS_PLUGIN_URL . 'assets/dist/images/icon.svg'; ?>">
189190
</div>
190191
<?php $this->render_notices_field(); ?>
@@ -542,6 +543,31 @@ private function get_quick_actions() {
542543
];
543544
}
544545

546+
/**
547+
* Render Toggle Group Field.
548+
*
549+
* @since 2.4.0
550+
* @return string
551+
*/
552+
public function render_toggle_group_field( array $group, $hide_header = false ) {
553+
ob_start();
554+
?>
555+
<div id="<?php echo $group[ 'slug' ]; ?>_toggle" onclick="plausibleToggleSection('<?php echo $group[ 'slug' ]; ?>')" class="flex items-center mt-4 space-x-3 hover:cursor-pointer">
556+
<span class="dark:text-gray-100 text-lg">
557+
<?php echo $group[ 'label' ]; ?>
558+
</span>
559+
<!-- Chevron -->
560+
<svg xmlns="http://www.w3.org/2000/svg" id="<?php echo $group[ 'slug' ]; ?>_chevron" class="h-6 w-6 ml-2 text-gray-400 dark:text-gray-500 transition-transform duration-250" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
561+
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
562+
</svg>
563+
</div>
564+
<div class="hidden" id="<?php echo $group[ 'slug' ]; ?>_content">
565+
<?php echo $this->render_group_field( $group, true ); ?>
566+
</div>
567+
<?php
568+
return ob_get_clean();
569+
}
570+
545571
/**
546572
* Render Group Field.
547573
*
@@ -550,24 +576,16 @@ private function get_quick_actions() {
550576
* @return string
551577
*/
552578
public function render_group_field( array $group, $hide_header = false ) {
553-
$toggle = $group[ 'toggle' ] ?? [];
554579
$fields = $group[ 'fields' ];
555580
ob_start();
556581
?>
557-
<div
558-
class="<?php echo $hide_header ? '' : 'plausible-analytics-group py-6 px-4 space-y-6 sm:p-6'; ?> bg-white dark:bg-gray-800">
582+
<div class="bg-white dark:bg-gray-800<?php echo $hide_header ? '' : ' plausible-analytics-group py-6 px-4 space-y-6 sm:p-6'; ?>">
559583
<?php if ( ! $hide_header ) : ?>
560584
<header class="relative">
561-
<h3 class="text-lg mt-0 leading-6 font-medium text-gray-900 dark:text-gray-100"
562-
id="<?php echo $group[ 'slug' ]; ?>"><?php echo $group[ 'label' ]; ?></h3>
585+
<h3 class="text-lg mt-0 leading-6 font-medium text-gray-900 dark:text-gray-100" id="<?php echo $group[ 'slug' ]; ?>"><?php echo $group[ 'label' ]; ?></h3>
563586
<div class="mt-1 text-sm leading-5 !text-gray-500 !dark:text-gray-200">
564587
<?php echo wp_kses_post( $group[ 'desc' ] ); ?>
565588
</div>
566-
<?php if ( ! empty( $toggle ) && is_array( $toggle ) ) : ?>
567-
<a target="_blank" class="plausible-analytics-link" href="<?php echo $toggle[ 'anchor' ]; ?>">
568-
<?php echo $toggle[ 'label' ]; ?>
569-
</a>
570-
<?php endif; ?>
571589
</header>
572590
<?php endif; ?>
573591
<?php if ( ! empty( $fields ) ): ?>

‎src/Admin/Settings/Page.php‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -207,29 +207,36 @@ public function __construct() {
207207
'value' => 'search',
208208
'caps' => [ self::CAP_GOALS ],
209209
],
210-
'tagged-events' => [
211-
'label' => esc_html__( 'Custom events', 'plausible-analytics' ),
212-
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-setup-custom-events-to-track-goal-conversions',
213-
'slug' => 'enhanced_measurements',
214-
'type' => 'checkbox',
215-
'value' => 'tagged-events',
216-
'caps' => [ self::CAP_GOALS ],
217-
],
218-
'hash' => [
219-
'label' => esc_html__( 'Hash-based routing', 'plausible-analytics' ),
220-
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-enable-hash-based-url-tracking',
221-
'slug' => 'enhanced_measurements',
222-
'type' => 'checkbox',
223-
'value' => 'hash',
224-
'caps' => [],
225-
],
226-
'compat' => [
227-
'label' => esc_html__( 'IE compatibility', 'plausible-analytics' ),
228-
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-track-visitors-who-use-internet-explorer',
229-
'slug' => 'enhanced_measurements',
230-
'type' => 'checkbox',
231-
'value' => 'compat',
232-
'caps' => [],
210+
'advanced-options' => [
211+
'label' => esc_html__( 'Advanced options', 'plausible-analytics' ),
212+
'slug' => 'advanced_options',
213+
'type' => 'toggle_group',
214+
'fields' => [
215+
'tagged-events' => [
216+
'label' => esc_html__( 'Custom events', 'plausible-analytics' ),
217+
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-setup-custom-events-to-track-goal-conversions',
218+
'slug' => 'enhanced_measurements',
219+
'type' => 'checkbox',
220+
'value' => 'tagged-events',
221+
'caps' => [ self::CAP_GOALS ],
222+
],
223+
'hash' => [
224+
'label' => esc_html__( 'Hash-based routing', 'plausible-analytics' ),
225+
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-enable-hash-based-url-tracking',
226+
'slug' => 'enhanced_measurements',
227+
'type' => 'checkbox',
228+
'value' => 'hash',
229+
'caps' => [],
230+
],
231+
'compat' => [
232+
'label' => esc_html__( 'IE compatibility', 'plausible-analytics' ),
233+
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-track-visitors-who-use-internet-explorer',
234+
'slug' => 'enhanced_measurements',
235+
'type' => 'checkbox',
236+
'value' => 'compat',
237+
'caps' => [],
238+
],
239+
],
233240
],
234241
],
235242
],
@@ -257,7 +264,6 @@ public function __construct() {
257264
),
258265
'https://plausible.io/wordpress-analytics-plugin#how-to-enable-a-proxy-to-get-more-accurate-stats'
259266
),
260-
'toggle' => '',
261267
'fields' => [
262268
[
263269
'label' => esc_html__( 'Enable proxy', 'plausible-analytics' ),
@@ -276,7 +282,6 @@ public function __construct() {
276282
'View your site statistics within your WordPress Dashboard.',
277283
'plausible-analytics'
278284
),
279-
'toggle' => '',
280285
'fields' => [
281286
[
282287
'label' => esc_html__( 'View stats in WordPress', 'plausible-analytics' ),
@@ -302,7 +307,6 @@ public function __construct() {
302307
),
303308
esc_html__( 'See syntax &raquo;', 'plausible-analytics' )
304309
),
305-
'toggle' => '',
306310
'fields' => [
307311
[
308312
'label' => esc_html__( 'Excluded pages', 'plausible-analytics' ),
@@ -329,7 +333,6 @@ public function __construct() {
329333
'By default, visits from logged in users aren\'t tracked. If you want to track visits for certain user roles then please specify them below.',
330334
'plausible-analytics'
331335
),
332-
'toggle' => false,
333336
'fields' => $this->build_user_roles_array( 'tracked_user_roles' ),
334337
],
335338
[
@@ -340,7 +343,6 @@ public function __construct() {
340343
'By default, the stats dashboard is only available to logged in administrators. If you want the dashboard to be available for other logged in users, then please specify them below.',
341344
'plausible-analytics'
342345
),
343-
'toggle' => false,
344346
'fields' => $this->build_user_roles_array( 'expand_dashboard_access', [ 'administrator' => true ] ),
345347
],
346348
[
@@ -351,7 +353,6 @@ public function __construct() {
351353
'Check this option if you don\'t want the Plausible Analytics menu item to be added to the toolbar at the top of the screen.',
352354
'plausible-analytics'
353355
),
354-
'toggle' => false,
355356
'add_sub_array' => false,
356357
'fields' => [
357358
'disable_toolbar_menu' => [
@@ -380,7 +381,6 @@ public function __construct() {
380381
esc_url( 'https://plausible.io/self-hosted-web-analytics/' ),
381382
esc_html__( 'Learn more about Plausible Community Edition.', 'plausible-analytics' )
382383
),
383-
'toggle' => '',
384384
'fields' => [
385385
[
386386
'label' => esc_html__( 'Domain name', 'plausible-analytics' ),

0 commit comments

Comments
 (0)