hash-form / admin / forms / build / sidebar.php

sidebar.php in Hash Form – Drag & Drop Form Builder trunk, at admin/forms/build/sidebar.php

200 lines 11.5 KB

Raw Download Zip

1	<?php
2	defined('ABSPATH') \|\| die();
3	/*
4	* A template, included from inside a class method - never loaded on its own.
5	* The variables below are locals of the method that includes it, not globals,
6	* which is what the prefix sniff assumes about a file-scope assignment.
7	*/
8	// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- included from within a method, so these are function locals.
9	?>
10
11	<div class="hf-fields-sidebar">
12	<div class="hf-fields-container">
13	<ul id="hf-fields-tabs" class="hf-fields-tabs">
14	<li class="hf-active-tab"><a href="#hf-add-fields-panel" id="hf-add-fields-tab"><?php esc_html_e('Add Fields', 'hash-form'); ?></a></li>
15	<li><a href="#hf-options-panel" id="hf-options-tab"><?php esc_html_e('Field Options', 'hash-form'); ?></a></li>
16	<li><a href="#hf-meta-panel" id="hf-design-tab"><?php esc_html_e('Form Title', 'hash-form'); ?></a></li>
17	</ul>
18
19	<div class="hf-fields-panels">
20	<div id="hf-add-fields-panel" class="ht-fields-panel">
21	<?php
22	HashFormHelper::show_search_box(array(
23	'input_id' => 'field-list',
24	'placeholder' => esc_html__('Search Fields', 'hash-form'),
25	'tosearch' => 'hf-field-box',
26	));
27	?>
28
29	<div class="hf-layout-section">
30	<h4 class="hf-layout-heading"><?php esc_html_e('Columns', 'hash-form'); ?></h4>
31	<p class="hf-layout-help"><?php esc_html_e('Add a row, then drag fields into its columns.', 'hash-form'); ?></p>
32	<ul class="hf-columns-list">
33	<?php
34	// Only divisors of the 12 column grid, so every column
35	// comes out an equal width.
36	foreach (array(2, 3, 4, 6) as $columns) {
37	?>
38	<li class="hf-column-box">
39	<a href="#" class="hf-add-columns" data-columns="<?php echo absint($columns); ?>"
40	title="<?php
41	/* translators: 1: number of columns */
42	echo esc_attr(sprintf(_n('%s Column', '%s Columns', $columns, 'hash-form'), $columns));
43	?>">
44	<span class="hf-column-preview" aria-hidden="true">
45	<?php for ($i = 0; $i < $columns; $i++) { ?>
46	<span></span>
47	<?php } ?>
48	</span>
49	</a>
50	</li>
51	<?php
52	}
53	?>
54	</ul>
55	</div>
56
57	<div class="hf-layout-section hf-fields-section">
58	<h4 class="hf-layout-heading"><?php esc_html_e('Fields', 'hash-form'); ?></h4>
59	<p class="hf-layout-help hf-drag-hint" id="hf-drag-hint">
60	<?php esc_html_e('Drag a field into your form to add it.', 'hash-form'); ?>
61	</p>
62
63	<?php
64	/*
65	* Grouped rather than one flat list: there are around fifty
66	* field types, and finding one in a single run of tiles
67	* meant scrolling past everything else.
68	*
69	* grouped_field_selection() applies the palette filter, so
70	* a type whose module is switched off is already gone.
71	*/
72	$field_groups = HashFormFields::grouped_field_selection();
73	$first_group = true;
74
75	foreach ($field_groups as $group_key => $group) {
76	// The first group starts open, the rest closed, so the
77	// panel opens on the fields most forms begin with.
78	$open = $first_group;
79	$first_group = false;
80	?>
81	<div class="hf-field-group<?php echo $open ? ' hf-open' : ''; ?>" data-group="<?php echo esc_attr($group_key); ?>">
82	<button type="button" class="hf-field-group-toggle" aria-expanded="<?php echo $open ? 'true' : 'false'; ?>">
83	<span class="hf-field-group-name"><?php echo esc_html($group['name']); ?></span>
84	<span class="hf-field-group-count"><?php echo esc_html(number_format_i18n(count($group['fields']))); ?></span>
85	<span class="hf-field-group-chevron" aria-hidden="true"></span>
86	</button>
87
88	<ul class="hf-fields-list">
89	<?php
90	foreach ($group['fields'] as $field_key => $field_type) {
91	?>
92	<li class="hf-field-box hashform_<?php echo esc_attr($field_key); ?>" id="<?php echo esc_attr($field_key); ?>" data-field-name="<?php echo esc_attr(strtolower($field_type['name'])); ?>">
93	<a class="hf-drag-field" title="<?php
94	/* translators: 1: field name */
95	echo esc_attr(sprintf(__('Drag %s into your form', 'hash-form'), $field_type['name']));
96	?>">
97	<?php
98	// render() covers an unregistered type with a
99	// neutral mark, so there is no font branch left.
100	echo wp_kses(HashFormFieldIcons::render($field_key), HashFormFieldIcons::allowed_svg());
101	?>
102	<span><?php echo esc_html($field_type['name']); ?></span>
103	</a>
104	</li>
105	<?php
106	}
107	?>
108	</ul>
109	</div>
110	<?php
111	}
112	?>
113
114	<p class="hf-fields-empty" hidden><?php esc_html_e('No fields match your search.', 'hash-form'); ?></p>
115	</div>
116	</div>
117
118	<div id="hf-options-panel" class="ht-fields-panel">
119	<div class="hf-fields-settings">
120	<div class="hf-no-field-placeholder">
121	<div class="hf-no-field-msg"><?php esc_html_e('Select a field to see the options', 'hash-form'); ?></div>
122	</div>
123	</div>
124
125	<form method="post" id="hf-fields-form">
126	<input type="hidden" name="id" id="hf-form-id" value="<?php echo esc_attr($values['id']); ?>" />
127	<?php wp_nonce_field('hashform_save_form_nonce', 'hashform_save_form'); ?>
128	<input type="hidden" id="hf-end-form-marker" />
129	</form>
130	</div>
131
132	<div id="hf-meta-panel" class="ht-fields-panel">
133	<form method="post" id="hf-meta-form">
134	<div class="hf-form-container hf-grid-container">
135	<div class="hf-form-row">
136	<label><?php esc_html_e('Form Title', 'hash-form'); ?></label>
137	<input type="text" name="title" value="<?php echo esc_attr($values['name']); ?>">
138	</div>
139
140	<div class="hf-form-row">
141	<label>
142	<input type="checkbox" name="show_title" value="on" <?php isset($values['show_title']) ? checked($values['show_title'], 'on') : ''; ?> />
143	<?php esc_html_e('Show the form title', 'hash-form'); ?>
144	</label>
145	</div>
146
147	<div class="hf-form-row">
148	<label><?php esc_html_e('Form Description', 'hash-form'); ?></label>
149	<textarea name="description"><?php echo esc_textarea($values['description']); ?></textarea>
150	</div>
151
152	<div class="hf-form-row">
153	<label>
154	<input type="checkbox" name="show_description" value="on" <?php isset($values['show_description']) ? checked($values['show_description'], 'on') : ''; ?> />
155	<?php esc_html_e('Show the form description', 'hash-form'); ?>
156	</label>
157	</div>
158
159	<div class="hf-form-row">
160	<label><?php esc_html_e('Submit Button Text', 'hash-form'); ?></label>
161	<input type="text" name="submit_value" value="<?php echo isset($values['submit_value']) ? esc_attr($values['submit_value']) : ''; ?>" data-changeme="hf-editor-submit-button">
162	</div>
163
164	<div class="hf-form-row">
165	<label><?php esc_html_e('Form CSS Class', 'hash-form'); ?></label>
166	<input type="text" name="form_css_class" value="<?php echo isset($values['form_css_class']) ? esc_attr($values['form_css_class']) : ''; ?>">
167	</div>
168
169	<div class="hf-form-row">
170	<label><?php esc_html_e('Submit Button CSS Class', 'hash-form'); ?></label>
171	<input type="text" name="submit_btn_css_class" value="<?php echo isset($values['submit_btn_css_class']) ? esc_attr($values['submit_btn_css_class']) : ''; ?>">
172	</div>
173
174	<div class="hf-form-row">
175	<label><?php esc_html_e('Submit Button Alignment', 'hash-form'); ?></label>
176	<select name="submit_btn_alignment">
177	<option value="left" <?php isset($values['submit_btn_alignment']) ? selected($values['submit_btn_alignment'], 'left') : ''; ?>>
178	<?php esc_html_e('Left', 'hash-form'); ?>
179	</option>
180	<option value="right" <?php isset($values['submit_btn_alignment']) ? selected($values['submit_btn_alignment'], 'right') : ''; ?>>
181	<?php esc_html_e('Right', 'hash-form'); ?>
182	</option>
183	<option value="center" <?php isset($values['submit_btn_alignment']) ? selected($values['submit_btn_alignment'], 'center') : ''; ?>>
184	<?php esc_html_e('Center', 'hash-form'); ?>
185	</option>
186	<option value="stretch" <?php isset($values['submit_btn_alignment']) ? selected($values['submit_btn_alignment'], 'center') : ''; ?>>
187	<?php esc_html_e('Stretch', 'hash-form'); ?>
188	</option>
189	</select>
190	</div>
191	</div>
192	</form>
193
194	<div class="hf-hidden">
195	<?php wp_editor('', 'hf-init-tinymce'); ?>
196	</div>
197	</div>
198	</div>
199	</div>
200	</div>