html-admin-page-builder.php — Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI 2.0.3

everest-forms / includes / admin / views / html-admin-page-builder.php

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

html-admin-page-builder.php

110 lines

1	<?php
2	/**
3	* Admin View: Builder
4	*
5	* @package EverestForms/Admin/Builder
6	*/
7
8	defined( 'ABSPATH' ) \|\| exit;
9
10	$form_data['form_field_id'] = isset( $form_data['form_field_id'] ) ? $form_data['form_field_id'] : 0;
11	$form_data['form_enabled'] = isset( $form_data['form_enabled'] ) ? $form_data['form_enabled'] : 1;
12
13	// Get tabs for the builder panel.
14	$tabs = apply_filters( 'everest_forms_builder_tabs_array', array() ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride
15
16	// Get preview link.
17	$preview_link = add_query_arg(
18	array(
19	'form_id' => absint( $form_data['id'] ),
20	'evf_preview' => 'true',
21	),
22	home_url()
23	);
24
25	?>
26	<div id="everest-forms-builder" class="everest-forms">
27	<div class="everest-forms-overlay">
28	<div class="everest-forms-overlay-content">
29	<svg xmlns="http://www.w3.org/2000/svg" id="Bk5ao7MMX" viewBox="0 0 301 154"><style>@-webkit-keyframes r1U56i7MzQ_Animation{0%,to{opacity:.5}50%{opacity:1}}@keyframes r1U56i7MzQ_Animation{0%,to{opacity:.5}50%{opacity:1}}@-webkit-keyframes HkVqTomfGX_Animation{0%,83.33%,to{opacity:.5}33.33%{opacity:1}}@keyframes HkVqTomfGX_Animation{0%,83.33%,to{opacity:.5}33.33%{opacity:1}}@-webkit-keyframes H1G56i7GGm_Animation{0%,66.67%,to{opacity:.5}16.67%{opacity:1}}@keyframes H1G56i7GGm_Animation{0%,66.67%,to{opacity:.5}16.67%{opacity:1}}#Bk5ao7MMX *{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:cubic-bezier(0,0,1,1);animation-timing-function:cubic-bezier(0,0,1,1)}#H1G56i7GGm_HyOMAQfzm{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transform-box:fill-box}</style><g id="H1e9TjXff7" data-name="Layer 2"><g id="S1Wc6j7zMQ" data-name="Layer 1"><path fill="#5891ff" style="-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transform-box:fill-box;-webkit-animation-name:H1G56i7GGm_Animation;animation-name:H1G56i7GGm_Animation" d="M160.12 154H12.66A12.65 12.65 0 0 1 2.4 134l74-101.9a12.64 12.64 0 0 1 20.54 0l14.79 19.82L170.4 134a12.64 12.64 0 0 1-10.28 20z"/><path d="M158.79 153.56H50.46A13.1 13.1 0 0 1 43.59 133l65.12-85.06 60.72 84.95a13.08 13.08 0 0 1-10.64 20.67z" opacity=".1"/><path fill="#50abe8" style="-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transform-box:fill-box;-webkit-animation-name:HkVqTomfGX_Animation;animation-name:HkVqTomfGX_Animation" d="M261.06 154H63.29a12.65 12.65 0 0 1-10-20.33L152.49 5a12.64 12.64 0 0 1 20.1 0l45.63 59.13 52.9 69.6A12.64 12.64 0 0 1 261.06 154z"/><path d="M258.38 154.45h-81.64c-8-2.25-12.17-12.22-8.05-19.92L215.47 61l53 72.35c6.32 8.65.38 21.1-10.09 21.1z" opacity=".1"/><path fill="#65eaff" style="-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transform-box:fill-box;-webkit-animation-name:r1U56i7MzQ_Animation;animation-name:r1U56i7MzQ_Animation" d="M186.49 154h102.74a12.65 12.65 0 0 0 10.57-19.58l-51.19-77.13a12.64 12.64 0 0 0-21.11 0L176 134.4a12.64 12.64 0 0 0 10.49 19.6z"/></g></g></svg>
30	<span class="loading"><?php esc_html_e( 'Loading…', 'everest-forms' ); ?></span>
31	</div>
32	</div>
33	<form id="everest-forms-builder-form" name="everest-forms-builder" method="post" data-id="<?php echo absint( $form_id ); ?>">
34	<input type="hidden" name="id" value="<?php echo absint( $form_id ); ?>">
35	<input type="hidden" name="form_enabled" value="<?php echo absint( $form_data['form_enabled'] ); ?>">
36	<input type="hidden" value="<?php echo absint( $form_data['form_field_id'] ); ?>" name="form_field_id" id="everest-forms-field-id">
37
38	<div class="everest-forms-nav-wrapper clearfix">
39	<nav class="nav-tab-wrapper evf-nav-tab-wrapper">
40	<?php
41	foreach ( $tabs as $slug => $tab ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride
42	echo '<a href="#" class="evf-panel-' . esc_attr( $slug ) . '-button nav-tab ' . ( $current_tab === $slug ? 'nav-tab-active' : '' ) . '" data-panel="' . esc_attr( $slug ) . '"><span class="evf-nav-icon ' . esc_attr( $slug ) . '"></span>' . esc_html( $tab['label'] ) . '</a>';
43	}
44
45	do_action( 'everest_forms_builder_tabs' );
46	?>
47	</nav>
48	<div class="evf-forms-nav-right">
49	<div class="evf-shortcode-field">
50	<input type="text" class="large-text code" onfocus="this.select();" value="<?php printf( esc_html( '[everest_form id="%s"]' ), isset( $_GET['form_id'] ) ? absint( sanitize_text_field( wp_unslash( $_GET['form_id'] ) ) ) : 0 ); // phpcs:ignore WordPress.Security.NonceVerification ?>" id="evf-form-shortcode" readonly="readonly" />
51	<button id="copy-shortcode" class="everest-forms-btn help_tip dashicons copy-shortcode" href="#" data-tip="<?php esc_attr_e( 'Copy Shortcode!', 'everest-forms' ); ?>" data-copied="<?php esc_attr_e( 'Copied!', 'everest-forms' ); ?>">
52	<span class="screen-reader-text"><?php esc_html_e( 'Copy shortcode', 'everest-forms' ); ?></span>
53	</button>
54	</div>
55	<a class="everest-forms-btn everest-forms-preview-button" href="<?php echo esc_url( $preview_link ); ?>" rel="bookmark" target="_blank"><?php esc_html_e( 'Preview', 'everest-forms' ); ?></a>
56	<button name="save_form" class="everest-forms-btn everest-forms-save-button" type="button" value="<?php esc_attr_e( 'Save', 'everest-forms' ); ?>"><?php esc_html_e( 'Save', 'everest-forms' ); ?></button>
57	</div>
58	</div>
59	<div class="evf-tab-content">
60	<?php foreach ( $tabs as $slug => $tab ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride ?>
61	<div id="everest-forms-panel-<?php echo esc_attr( $slug ); ?>" class="everest-forms-panel<?php echo $current_tab === $slug ? ' active' : ''; ?>">
62	<div class="everest-forms-panel-<?php echo $tab['sidebar'] ? 'sidebar-content' : 'full-content'; ?>">
63	<?php if ( $tab['sidebar'] ) : ?>
64	<div class="everest-forms-panel-sidebar">
65	<?php do_action( 'everest_forms_builder_sidebar_' . $slug ); ?>
66	</div>
67	<?php endif; ?>
68	<div class="panel-wrap everest-forms-panel-content-wrap">
69	<div class="everest-forms-panel-content">
70	<?php do_action( 'everest_forms_builder_content_' . $slug ); ?>
71	</div>
72	<?php do_action( 'everest_forms_builder_after_content_' . $slug ); ?>
73	</div>
74	</div>
75	</div>
76	<?php endforeach; ?>
77	<?php do_action( 'everest_forms_builder_output' ); ?>
78	</div>
79	</form>
80	</div>
81	<script type="text/html" id="tmpl-everest-forms-field-preview-choices">
82	<# if ( data.settings.choices_images ) { #>
83	<ul class="widefat primary-input everest-forms-image-choices">
84	<# _.each( data.order, function( choiceID, key ) { #>
85	<li class="everest-forms-image-choices-item<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' everest-forms-selected' ); } #>">
86	<label>
87	<span class="everest-forms-image-choices-image">
88	<# if ( ! _.isEmpty( data.settings.choices[choiceID].image ) ) { #>
89	<img src="{{ data.settings.choices[choiceID].image }}" alt="{{ data.settings.choices[choiceID].label }}"<# if ( data.settings.choices[choiceID].label ) { #> title="{{ data.settings.choices[choiceID].label }}"<# } #>>
90	<# } else { #>
91	<img src="<?php echo esc_url( evf()->plugin_url() . '/assets/images/everest-forms-placeholder.png' ); ?>" alt="{{ data.settings.choices[choiceID].label }}"<# if ( data.settings.choices[choiceID].label ) { #> title="{{ data.settings.choices[choiceID].label }}"<# } #>>
92	<# } #>
93	</span>
94	<input type="{{ data.type }}" disabled<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' checked' ); } #>>
95	<span class="everest-forms-image-choices-label">{{{ data.settings.choices[choiceID].label }}} <# if(( 'payment-checkbox' === data.settings.type ) \|\| ( 'payment-multiple' === data.settings.type )) { print ( ' - ' + data.amountFilter( evf_data, data.settings.choices[choiceID].value )) }#></span>
96	</label>
97	</li>
98	<# }) #>
99	</ul>
100	<# } else { #>
101	<ul class="widefat primary-input">
102	<# _.each( data.order, function( choiceID, key ) { #>
103	<li>
104	<input type="{{ data.type }}" disabled<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' checked' ); } #>>{{{ data.settings.choices[choiceID].label }}} <# if(( 'payment-checkbox' === data.settings.type ) \|\| ( 'payment-multiple' === data.settings.type )) { print ( ' - ' + data.amountFilter( evf_data, data.settings.choices[choiceID].value )) }#>
105	</li>
106	<# }) #>
107	</ul>
108	<# } #>
109	</script>
110