hash-form / admin / forms / style / style.php

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

157 lines 9.3 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	$id = htmlspecialchars_decode(HashFormHelper::get_var('id', 'absint'));
11	$form = HashFormBuilder::get_form_vars($id);
12
13	if (!$form) {
14	echo '<h3>' . esc_html__('You are trying to edit a form that does not exist.', 'hash-form') . '</h3>';
15	return;
16	}
17
18	$styles = $form->styles ? $form->styles : array();
19	$form_style = isset($styles['form_style']) ? $styles['form_style'] : 'default-style';
20	$form_style_template = isset($styles['form_style_template']) ? $styles['form_style_template'] : '';
21	?>
22	<div id="hf-wrap" class="hf-content hf-form-style-template">
23	<?php
24	self::get_admin_header(
25	array(
26	'form' => $form,
27	'class' => 'hf-header-nav',
28	)
29	);
30	?>
31	<div class="hf-body">
32	<div class="hf-fields-sidebar">
33	<form class="ht-fields-panel" method="post" id="hf-style-form">
34	<input type="hidden" name="id" id="hf-form-id" value="<?php echo absint($id); ?>" />
35	<div class="hf-form-container">
36	<?php
37	/*
38	* The three modes are a visual choice, so they are shown as
39	* cards rather than hidden in a dropdown. The select below
40	* stays as the value that gets serialised on save and as
41	* the element the data-condition rules watch — the radios
42	* carry no name of their own, so nothing is posted twice.
43	*/
44	$style_modes = array(
45	'no-style' => array(
46	'label' => esc_html__('No Style', 'hash-form'),
47	'desc' => esc_html__('Let your theme style the form. The preview here will not match the front end.', 'hash-form'),
48	),
49	'default-style' => array(
50	'label' => esc_html__('Default Style', 'hash-form'),
51	'desc' => esc_html__('The plugin\'s own minimal styling.', 'hash-form'),
52	),
53	'custom-style' => array(
54	'label' => esc_html__('Custom Style', 'hash-form'),
55	'desc' => esc_html__('Apply a style template you have built.', 'hash-form'),
56	),
57	);
58	?>
59	<div class="hf-form-row hf-layout-section">
60	<fieldset class="hf-style-modes">
61	<?php // Same heading treatment as the builder's Columns and Fields sections. ?>
62	<legend class="hf-layout-heading hf-style-modes-legend"><?php esc_html_e('Form Style', 'hash-form'); ?></legend>
63	<p class="hf-layout-help"><?php esc_html_e('How much of the look comes from the plugin rather than your theme.', 'hash-form'); ?></p>
64
65	<?php foreach ($style_modes as $mode_value => $mode) { ?>
66	<label class="hf-style-mode<?php echo ($form_style === $mode_value) ? ' hf-selected' : ''; ?>">
67	<?php
68	/*
69	* Named so the three behave as one radio
70	* group, but pointed at a form id that does
71	* not exist so they are not part of
72	* #hf-style-form. update_style() serialises
73	* whatever the form posts without a
74	* whitelist, and this control's value is
75	* already carried by the select below.
76	*/
77	?>
78	<input type="radio" name="hf_style_mode" form="hf-style-mode-detached" class="hf-style-mode-input" value="<?php echo esc_attr($mode_value); ?>" <?php checked($form_style, $mode_value); ?> />
79	<span class="hf-style-mode-text">
80	<span class="hf-style-mode-name"><?php echo esc_html($mode['label']); ?></span>
81	<span class="hf-style-mode-desc"><?php echo esc_html($mode['desc']); ?></span>
82	</span>
83	</label>
84	<?php } ?>
85	</fieldset>
86
87	<select name="form_style" id="hf-form-style-select" data-condition="toggle" class="hf-style-mode-value" tabindex="-1" aria-hidden="true">
88	<?php foreach ($style_modes as $mode_value => $mode) { ?>
89	<option value="<?php echo esc_attr($mode_value); ?>" <?php selected($form_style, $mode_value); ?>><?php echo esc_html($mode['label']); ?></option>
90	<?php } ?>
91	</select>
92	</div>
93
94	<div class="hf-form-row hf-layout-section" data-condition-toggle="hf-form-style-select" data-condition-val="custom-style">
95	<h4 class="hf-layout-heading"><?php esc_html_e('Style Template', 'hash-form'); ?></h4>
96	<label class="hf-style-template-label"><?php esc_html_e('Choose Template Style', 'hash-form'); ?></label>
97	<select name="form_style_template" id="hf-form-style-template">
98	<option value=""><?php esc_html_e('--Select Style--', 'hash-form'); ?></option>
99	<?php
100	$args = array(
101	'post_type' => 'hashform-styles',
102	'posts_per_page' => -1,
103	'post_status' => 'publish'
104	);
105	$query = new WP_Query($args);
106	$posts = $query->posts;
107	foreach ($posts as $post) {
108	$hashform_styles = get_post_meta($post->ID, 'hashform_styles', true);
109
110	if (!$hashform_styles) {
111	$hashform_styles = HashFormStyles::default_styles();
112	} else {
113	$hashform_styles = HashFormHelper::recursive_parse_args($hashform_styles, HashFormStyles::default_styles());
114	}
115	ob_start();
116	echo '#hf-container-' . absint($id) . '{';
117	HashFormStyles::get_style_vars($hashform_styles, '');
118	echo '}';
119	$tmpl_css_style = ob_get_clean();
120	?>
121	<option value="<?php echo esc_attr($post->ID); ?>" data-style="<?php echo esc_attr($tmpl_css_style); ?>" <?php selected($post->ID, $form_style_template); ?>><?php echo esc_html($post->post_title); ?></option>
122	<?php
123	}
124	wp_reset_postdata();
125	?>
126	</select>
127	</div>
128
129	<?php // Was inline-styled with a hardcoded blue; on the tokens it follows the admin colour scheme. ?>
130	<div class="hf-form-row hf-style-template-cta" data-condition-toggle="hf-form-style-select" data-condition-val="custom-style">
131	<p class="hf-style-template-cta-text"><?php esc_html_e('Build fast with a style template — style your forms in seconds.', 'hash-form'); ?></p>
132	<a class="button" href="<?php echo esc_url(admin_url('edit.php?post_type=hashform-styles')); ?>" target="_blank"><?php esc_html_e('Create/Edit Style Template', 'hash-form'); ?></a>
133	</div>
134	</div>
135	</form>
136	</div>
137
138	<div id="hf-form-panel" class="hf-style-form-panel">
139	<div class="hf-form-wrap">
140	<?php
141	/*
142	* The same slim header the builder canvas carries, so the two
143	* screens read as one surface. Where the builder counts fields
144	* this names the style in force; backend.js keeps it in step
145	* when a different card is picked.
146	*/
147	?>
148	<div class="hf-canvas-header">
149	<span class="hf-canvas-title"><?php echo esc_html($form->name); ?></span>
150	<span class="hf-canvas-count" id="hf-style-mode-label"><?php echo esc_html(isset($style_modes[$form_style]) ? $style_modes[$form_style]['label'] : $style_modes['default-style']['label']); ?></span>
151	</div>
152
153	<div class="hf-form-preview" data-form="<?php echo esc_attr($id); ?>"></div>
154	</div>
155	</div>
156	</div>
157	</div>