html-admin-header-skeleton.php — Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI 3.5.2

everest-forms / includes / admin / views / html-admin-header-skeleton.php

everest-forms / includes / admin / views Last commit date

html-admin-header-skeleton.php

159 lines

1	<?php
2	/**
3	* Admin View: Header Skeleton
4	*
5	* Renders a pixel-perfect PHP skeleton of the React header.
6	* Prevents layout shift and flash-of-unstyled-content on page load.
7	*
8	* Included from html-admin-settings.php inside #evf-react-header-root.
9	*
10	* @package EverestForms\Admin\Views
11	* @since 3.4.3
12	*/
13
14	defined( 'ABSPATH' ) \|\| exit;
15
16
17	$evf_current_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification
18
19	$evf_active_nav = 'settings';
20	if ( 'everest-forms' === $evf_current_page ) {
21	$evf_active_nav = 'forms';
22	} elseif ( 'evf-builder' === $evf_current_page ) {
23	$evf_active_nav = 'forms';
24	} elseif ( 'evf-entries' === $evf_current_page ) {
25	$evf_active_nav = 'entries';
26	} elseif ( 'evf-addons' === $evf_current_page ) {
27	$evf_active_nav = 'addons';
28	} elseif ( 'evf-analytics' === $evf_current_page ) {
29	$evf_active_nav = 'analytics';
30	}
31
32	$evf_is_pro = defined( 'EFP_VERSION' ) \|\| defined( 'EVF_PRO_VERSION' );
33	$evf_version = defined( 'EVF_VERSION' ) ? EVF_VERSION : '';
34
35	$evf_left_nav = array(
36	'forms' => array(
37	'label' => __( 'All Forms', 'everest-forms' ),
38	'url' => admin_url( 'admin.php?page=everest-forms' ),
39	),
40	'entries' => array(
41	'label' => __( 'Entries', 'everest-forms' ),
42	'url' => admin_url( 'admin.php?page=evf-entries' ),
43	),
44	'settings' => array(
45	'label' => __( 'Settings', 'everest-forms' ),
46	'url' => admin_url( 'admin.php?page=evf-settings' ),
47	),
48	'addons' => array(
49	'label' => __( 'Addons', 'everest-forms' ),
50	'url' => admin_url( 'admin.php?page=evf-addons' ),
51	),
52	);
53	?>
54
55	<div id="evf-react-header-root">
56	<div class="evf-skeleton" id="evf-header-skeleton" role="banner">
57
58	<div class="evf-skeleton__left">
59	<a
60	href="<?php echo esc_url( admin_url( 'admin.php?page=everest-forms' ) ); ?>"
61	class="evf-skeleton__logo"
62	aria-label="<?php esc_attr_e( 'Everest Forms', 'everest-forms' ); ?>"
63	>
64	<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
65	<rect width="40" height="40" rx="8" fill="#7C3AED" fill-opacity="0.08"/>
66	<path d="M20 8L32 30H8L20 8Z" fill="#7C3AED" fill-opacity="0.15"/>
67	<path d="M20 11L30 29H10L20 11Z" fill="none" stroke="#7C3AED" stroke-width="2.2" stroke-linejoin="round"/>
68	<line x1="14.5" y1="23.5" x2="25.5" y2="23.5" stroke="#7C3AED" stroke-width="2" stroke-linecap="round"/>
69	<line x1="16.5" y1="27" x2="23.5" y2="27" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round"/>
70	</svg>
71	</a>
72
73	<ul class="evf-skeleton__nav" role="navigation" aria-label="<?php esc_attr_e( 'Main navigation', 'everest-forms' ); ?>">
74	<?php foreach ( $evf_left_nav as $evf_key => $evf_item ) : ?>
75	<li class="evf-skeleton__nav-item<?php echo ( $evf_active_nav === $evf_key ) ? ' evf-skeleton__nav-item--active' : ''; ?>">
76	<a
77	href="<?php echo esc_url( $evf_item['url'] ); ?>"
78	class="evf-skeleton__nav-link"
79	<?php echo ( $evf_active_nav === $evf_key ) ? 'aria-current="page"' : ''; ?>
80	>
81	<?php echo esc_html( $evf_item['label'] ); ?>
82	</a>
83	</li>
84	<?php endforeach; ?>
85	</ul>
86	</div>
87
88	<div class="evf-skeleton__right">
89
90	<!-- Right nav: Help -->
91	<nav class="evf-skeleton__right-nav" aria-label="<?php esc_attr_e( 'Secondary navigation', 'everest-forms' ); ?>">
92	<a href="<?php echo esc_url( admin_url( 'admin.php?page=evf-settings&tab=general' ) ); ?>" class="evf-skeleton__right-link">
93	<?php esc_html_e( 'Help', 'everest-forms' ); ?>
94	</a>
95	</nav>
96
97	<!-- Divider -->
98	<div class="evf-skeleton__divider" role="separator" aria-hidden="true"></div>
99
100	<?php if ( ! $evf_is_pro ) : ?>
101	<!-- Upgrade to Pro — free users only, mirrors React's !isPro block -->
102	<a
103	href="https://everestforms.net/free-vs-pro/?utm_medium=evf-dashboard&utm_source=evf-free&utm_campaign=header-upgrade-btn&utm_content=Upgrade+to+Pro"
104	target="_blank"
105	rel="noopener noreferrer"
106	class="evf-skeleton__upgrade"
107	>
108	<?php esc_html_e( 'Upgrade To Pro', 'everest-forms' ); ?>
109	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
110	<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
111	<polyline points="15 3 21 3 21 9"/>
112	<line x1="10" y1="14" x2="21" y2="3"/>
113	</svg>
114	</a>
115	<?php endif; ?>
116
117	<?php if ( ! empty( $evf_version ) ) : ?>
118	<span class="evf-skeleton__version" aria-label="<?php echo esc_attr( sprintf( __( 'Version %s', 'everest-forms' ), $evf_version ) ); ?>">
119	v<?php echo esc_html( $evf_version ); ?>
120	</span>
121	<?php endif; ?>
122
123	<div class="evf-skeleton__bell" aria-hidden="true">
124	<div class="evf-skeleton__bell-inner"></div>
125	</div>
126
127	</div>
128	</div>
129	</div>
130
131	<script>
132	/* global document */
133	( function () {
134	'use strict';
135
136	document.body.classList.add( 'evf-js-loaded' );
137
138	window.evfHeaderReady = function () {
139	var skeleton = document.getElementById( 'evf-header-skeleton' );
140	if ( ! skeleton ) {
141	return;
142	}
143
144	skeleton.classList.add( 'evf-skeleton--hidden' );
145
146	setTimeout( function () {
147	if ( skeleton.parentNode ) {
148	skeleton.parentNode.removeChild( skeleton );
149	}
150
151	var styles = document.getElementById( 'evf-header-skeleton-styles' );
152	if ( styles && styles.parentNode ) {
153	styles.parentNode.removeChild( styles );
154	}
155	}, 200 );
156	};
157	}() );
158	</script>
159