weforms / assets / js-templates / form-components.php

form-components.php in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.3.4, at assets/js-templates/form-components.php

765 lines 33.5 KB

Raw Download Zip

1	<script type="text/x-template" id="tmpl-wpuf-dynamic-field">
2	<div>
3
4	<div class="panel-field-opt panel-field-opt-text">
5	<label>
6	<?php _e( 'Dynamic value population', 'weforms' ); ?>
7	<help-text text="<?php _e( "Field value or options can be populated dynamically through filter hook or query string", 'weforms' ) ?>"></help-text>
8	</label>
9
10	<ul>
11	<li>
12	<label><input type="checkbox" value="yes" v-model="dynamic.status"> <?php _e( 'Allow field to be populated dynamically', 'weforms' ); ?></label>
13	</li>
14	</ul>
15	</div>
16
17
18	<template v-if="dynamic.status">
19
20	<div class="panel-field-opt panel-field-opt-text"><label>
21	<?php _e( 'Parameter Name', 'weforms' ); ?>
22	<help-text text="<?php _e( "Enter a Parameter Name, using that the field value can be populated through filter hook or query string", 'weforms' ) ?>"></help-text>
23	<input type="text" v-model="dynamic.param_name">
24	</label>
25	</div>
26	</template>
27
28	</div>
29	</script>
30
31	<script type="text/x-template" id="tmpl-wpuf-field-name">
32	<div>
33	<div class="panel-field-opt panel-field-name clearfix">
34
35	<label>
36	<?php _e( 'First Name', 'weforms' ); ?>
37	</label>
38
39	<div class="name-field-placeholder">
40
41	<div class="name-merge-tag-holder">
42	<input type="text" v-model="editing_form_field.first_name.placeholder">
43	<wpuf-merge-tags
44	filter="no_fields"
45	v-on:insert="insertValue"
46	:field="{name: 'first_name', type: 'placeholder'}">
47	</wpuf-merge-tags>
48	</div>
49
50	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
51	</div>
52
53	<div class="name-field-value">
54	<div class="name-merge-tag-holder">
55	<input type="text" v-model="editing_form_field.first_name.default">
56	<wpuf-merge-tags
57	filter="no_fields"
58	v-on:insert="insertValue"
59	:field="{name: 'first_name', type: 'default'}">
60	</wpuf-merge-tags>
61	</div>
62
63	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
64	</div>
65	</div>
66
67	<div class="panel-field-opt panel-field-name clearfix" v-if="editing_form_field.format !== 'first-last'">
68
69	<label>
70	<?php _e( 'Middle Name', 'weforms' ); ?>
71	</label>
72
73	<div class="name-field-placeholder">
74	<div class="name-merge-tag-holder">
75	<input type="text" v-model="editing_form_field.middle_name.placeholder">
76	<wpuf-merge-tags
77	filter="no_fields"
78	v-on:insert="insertValue"
79	:field="{name: 'middle_name', type: 'placeholder'}">
80	</wpuf-merge-tags>
81	</div>
82
83	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
84	</div>
85
86	<div class="name-field-value">
87
88	<div class="name-merge-tag-holder">
89	<input type="text" v-model="editing_form_field.middle_name.default">
90	<wpuf-merge-tags
91	filter="no_fields"
92	v-on:insert="insertValue"
93	:field="{name: 'middle_name', type: 'default'}">
94	</wpuf-merge-tags>
95	</div>
96
97	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
98	</div>
99	</div>
100
101	<div class="panel-field-opt panel-field-name clearfix">
102
103	<label>
104	<?php _e( 'Last Name', 'weforms' ); ?>
105	</label>
106
107	<div class="name-field-placeholder">
108
109	<div class="name-merge-tag-holder">
110	<input type="text" v-model="editing_form_field.last_name.placeholder">
111	<wpuf-merge-tags
112	filter="no_fields"
113	v-on:insert="insertValue"
114	:field="{name: 'last_name', type: 'placeholder'}">
115	</wpuf-merge-tags>
116	</div>
117
118	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
119	</div>
120
121	<div class="name-field-value">
122	<div class="name-merge-tag-holder">
123	<input type="text" v-model="editing_form_field.last_name.default">
124	<wpuf-merge-tags
125	filter="no_fields"
126	v-on:insert="insertValue"
127	:field="{name: 'last_name', type: 'default'}">
128	</wpuf-merge-tags>
129	</div>
130	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
131	</div>
132	</div>
133	</div>
134	</script>
135
136	<script type="text/x-template" id="tmpl-wpuf-field-text-with-tag">
137	<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-text field-text-with-tag">
138	<label>
139	{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
140
141	<input
142	v-if="option_field.variation && 'number' === option_field.variation"
143	type="number"
144	v-model="value"
145	@focusout="on_focusout"
146	@keyup="on_keyup"
147	>
148
149	<input
150	v-if="!option_field.variation"
151	type="text"
152	v-model="value"
153	@focusout="on_focusout"
154	@keyup="on_keyup"
155	>
156
157	<wpuf-merge-tags :filter="option_field.tag_filter" v-on:insert="insertValue"></wpuf-merge-tags>
158	</label>
159	</div>
160	</script>
161
162	<script type="text/x-template" id="tmpl-wpuf-form-date_field">
163	<div class="wpuf-fields">
164	<input
165	type="text"
166	:class="class_names('datepicker')"
167	:placeholder="field.format"
168	:value="field.default"
169	:size="field.size"
170	>
171	<span v-if="field.help" class="wpuf-help">{{ field.help }}</span>
172	</div></script>
173
174	<script type="text/x-template" id="tmpl-wpuf-form-name_field">
175	<div class="wpuf-fields">
176
177	<div :class="['wpuf-name-field-wrap', 'format-' + field.format]">
178	<div class="wpuf-name-field-first-name">
179	<input
180	type="text"
181	:class="class_names('textfield')"
182	:placeholder="field.first_name.placeholder"
183	:value="field.first_name.default"
184	:size="field.size"
185	>
186	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.first_name.sub }}</label>
187	</div>
188
189	<div class="wpuf-name-field-middle-name">
190	<input
191	type="text"
192	:class="class_names('textfield')"
193	:placeholder="field.middle_name.placeholder"
194	:value="field.middle_name.default"
195	:size="field.size"
196	>
197	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.middle_name.sub }}</label>
198	</div>
199
200	<div class="wpuf-name-field-last-name">
201	<input
202	type="text"
203	:class="class_names('textfield')"
204	:placeholder="field.last_name.placeholder"
205	:value="field.last_name.default"
206	:size="field.size"
207	>
208	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.last_name.sub }}</label>
209	</div>
210	</div>
211
212	<span v-if="field.help" class="wpuf-help">{{ field.help }}</span>
213	</div>
214	</script>
215
216	<script type="text/x-template" id="tmpl-wpuf-form-notification">
217	<div>
218	<!-- <pre>{{ notifications.length }}</pre> -->
219	<a href="#" class="button button-secondary add-notification" v-on:click.prevent="addNew"><span class="dashicons dashicons-plus-alt"></span> <?php _e( 'Add Notification', 'weforms' ); ?></a>
220
221	<div :class="[editing ? 'editing' : '', 'notification-wrap']">
222	<!-- notification-wrap -->
223
224	<div class="notification-table-wrap">
225	<table class="wp-list-table widefat fixed striped posts wpuf-cf-notification-table">
226	<thead>
227	<tr>
228	<th class="col-toggle"> </th>
229	<th class="col-name"><?php _e( 'Name', 'weforms' ); ?></th>
230	<th class="col-subject"><?php _e( 'Subject', 'weforms' ); ?></th>
231	<th class="col-action"> </th>
232	</tr>
233	</thead>
234	<tbody>
235	<tr v-for="(notification, index) in notifications">
236	<td class="col-toggle">
237	<a href="#" v-on:click.prevent="toggelNotification(index)">
238	<img v-if="notification.active" src="<?php echo WPUF_ASSET_URI; ?>/images/active.png" width="24" alt="status">
239	<img v-else src="<?php echo WPUF_ASSET_URI; ?>/images/inactive.png" width="24" alt="status">
240	</a>
241	</td>
242	<td class="col-name"><a href="#" v-on:click.prevent="editItem(index)">{{ notification.name }}</a></td>
243	<td class="col-subject">{{ notification.type === 'email' ? notification.subject : notification.smsText }}</td>
244	<td class="col-action">
245	<a href="#" v-on:click.prevent="duplicate(index)" title="<?php esc_attr_e( 'Duplicate', 'weforms' ); ?>"><span class="dashicons dashicons-admin-page"></span></a>
246	<a href="#" v-on:click.prevent="editItem(index)" title="<?php esc_attr_e( 'Settings', 'weforms' ); ?>"><span class="dashicons dashicons-admin-generic"></span></a>
247	</td>
248	</tr>
249	<tr v-if="!notifications.length">
250	<td colspan="4"><?php _e( 'No notifications found', 'weforms' ); ?></td>
251	</tr>
252	</tbody>
253	</table>
254	</div><!-- .notification-table-wrap -->
255
256	<div class="notification-edit-area" v-if="notifications[editingIndex]">
257
258	<div class="notification-head">
259	<input type="text" name="" v-model="notifications[editingIndex].name" v-on:keyup.enter="editDone()" value="Admin Notification">
260	</div>
261
262	<div class="form-fields">
263
264	<div class="notification-row notification-field">
265	<label for="notification-title"><?php _e( 'Type', 'weforms' ); ?></label>
266	<select type="text" v-model="notifications[editingIndex].type">
267	<option value="email"><?php _e( 'Email Notification', 'weforms' ) ?></option>
268	<option value="sms"><?php _e( 'SMS Notification', 'weforms' ) ?></option>
269	</select>
270	</div>
271
272	<template v-if="notifications[editingIndex].type == 'email' ">
273	<div class="notification-row">
274	<div class="row-one-half notification-field first">
275	<label for="notification-title"><?php _e( 'To', 'weforms' ); ?></label>
276	<input type="text" v-model="notifications[editingIndex].to">
277	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="to"></wpuf-merge-tags>
278	</div>
279
280	<div class="row-one-half notification-field">
281	<label for="notification-title"><?php _e( 'Reply To', 'weforms' ); ?></label>
282	<input type="email" v-model="notifications[editingIndex].replyTo">
283	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="replyTo"></wpuf-merge-tags>
284	</div>
285	</div>
286
287	<div class="notification-row notification-field">
288	<label for="notification-title"><?php _e( 'Subject', 'weforms' ); ?></label>
289	<input type="text" v-model="notifications[editingIndex].subject">
290	<wpuf-merge-tags v-on:insert="insertValue" field="subject"></wpuf-merge-tags>
291	</div>
292
293	<div class="notification-row notification-field">
294	<label for="notification-title"><?php _e( 'Email Message', 'weforms' ); ?></label>
295
296	<weforms-text-editor
297	v-model="notifications[editingIndex].message"
298	:i18n="i18n"
299	:editingIndex="editingIndex"
300	>
301	</weforms-text-editor>
302
303	<wpuf-merge-tags v-on:insert="insertValueEditor" field="message"></wpuf-merge-tags>
304	</div>
305	</template>
306	<template v-else>
307	<template v-if="has_sms">
308	<div class="notification-row notification-field">
309	<label for="notification-title"><?php _e( 'To', 'weforms' ); ?></label>
310	<input type="text" v-model="notifications[editingIndex].smsTo">
311	<wpuf-merge-tags v-on:insert="insertValue" field="smsTo"></wpuf-merge-tags>
312	</div>
313	<div class="notification-row notification-field">
314	<label for="notification-title"><?php _e( 'SMS Text', 'weforms' ); ?></label>
315	<textarea name="" rows="6" v-model="notifications[editingIndex].smsText"></textarea>
316	<wpuf-merge-tags v-on:insert="insertValue" field="smsText"></wpuf-merge-tags>
317	</div>
318	</template>
319	<template v-else>
320	<p>
321	<label class="wpuf-pro-text-alert">
322	<a :href="pro_link" target="_blank"><?php _e( 'SMS notification moule not found', 'wpuf' ); ?></a>
323	</label>
324	</p>
325	</template>
326	</template>
327
328	<section class="advanced-fields">
329	<a href="#" class="field-toggle" v-on:click.prevent="toggleAdvanced()"><span class="dashicons dashicons-arrow-right"></span><?php _e( ' Advanced', 'weforms' ); ?></a>
330
331	<div class="advanced-field-wrap">
332	<p class="wpuf-pro-text-alert"><?php _e( 'Make sure that your mail server is configured properly for the following "From" fields', 'weforms' ); ?></p>
333	<template v-if="notifications[editingIndex].type == 'email' ">
334	<div class="notification-row">
335	<div class="row-one-half notification-field first">
336	<label for="notification-title"><?php _e( 'From Name', 'weforms' ); ?></label>
337	<input type="text" v-model="notifications[editingIndex].fromName">
338	<wpuf-merge-tags v-on:insert="insertValue" field="fromName"></wpuf-merge-tags>
339	</div>
340
341	<div class="row-one-half notification-field">
342	<label for="notification-title"><?php _e( 'From Address', 'weforms' ); ?></label>
343	<input type="email" name="" v-model="notifications[editingIndex].fromAddress">
344	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="fromAddress"></wpuf-merge-tags>
345	</div>
346	</div>
347
348	<div class="notification-row">
349	<div class="row-one-half notification-field first">
350	<label for="notification-title"><?php _e( 'CC', 'weforms' ); ?></label>
351	<input type="email" name="" v-model="notifications[editingIndex].cc">
352	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="cc"></wpuf-merge-tags>
353	</div>
354
355	<div class="row-one-half notification-field">
356	<label for="notification-title"><?php _e( 'BCC', 'weforms' ); ?></label>
357	<input type="email" name="" v-model="notifications[editingIndex].bcc">
358	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="bcc"></wpuf-merge-tags>
359	</div>
360	</div>
361	</template>
362
363	<div class="notification-row notification-field">
364	<template v-if="is_pro">
365
366	<notification-conditional-logics
367	:notification="notifications[editingIndex]"
368	>
369	</notification-conditional-logics>
370
371	</template>
372	<template v-else>
373	<label class="wpuf-pro-text-alert">
374	<a :href="pro_link" target="_blank"><?php _e( 'Conditional Logics available in Pro Version', 'wpuf' ); ?></a>
375	</label>
376	</template>
377	</div>
378	</div>
379	</section><!-- .advanced-fields -->
380	</div>
381
382	<div class="submit-area">
383	<a href="#" v-on:click.prevent="deleteItem(editingIndex)" title="<?php esc_attr_e( 'Delete', 'weforms' ); ?>"><span class="dashicons dashicons-trash"></span></a>
384	<button class="button button-secondary" v-on:click.prevent="editDone()"><?php _e( 'Done', 'weforms' ); ?></button>
385	</div>
386	</div><!-- .notification-edit-area -->
387
388	</div><!-- .notification-wrap -->
389	</div>
390	</script>
391
392	<script type="text/x-template" id="tmpl-wpuf-integration">
393	<div class="wpuf-integrations-wrap">
394
395	<template v-if="hasIntegrations">
396	<div :class="['wpuf-integration', isAvailable(integration.id) ? '' : 'collapsed']" v-for="integration in integrations">
397	<div class="wpuf-integration-header">
398	<div class="wpuf-integration-header-toggle">
399	<span :class="['wpuf-toggle-switch', 'big', isActive(integration.id) ? 'checked' : '']" v-on:click="toggleState(integration.id, $event.target)"></span>
400	</div>
401	<div class="wpuf-integration-header-label">
402	<img class="icon" :src="integration.icon" :alt="integration.title">
403	{{ integration.title }} <span class="label-premium" v-if="!isAvailable(integration.id)"><?php _e( 'Premium Feature', 'best-contact-form' ); ?></span>
404	</div>
405
406	<div class="wpuf-integration-header-actions">
407	<button type="button" class="toggle-area" v-on:click="showHide($event.target)">
408	<span class="screen-reader-text"><?php _e( 'Toggle panel', 'best-contact-form' ); ?></span>
409	<span class="toggle-indicator"></span>
410	</button>
411	</div>
412	</div>
413
414	<div class="wpuf-integration-settings">
415
416	<div v-if="isAvailable(integration.id)">
417	<component :is="'wpuf-integration-' + integration.id" :id="integration.id"></component>
418	</div>
419	<div v-else>
420	<?php _e( 'This feature is available on the premium version only.', 'best-contact-form' ); ?>
421	<a class="button" :href="pro_link" target="_blank"><?php _e( 'Upgrade to Pro', 'best-contact-form' ); ?></a>
422	</div>
423
424	</div>
425	</div>
426	</template>
427
428	<div v-else>
429	<?php _e( 'No integration found.', 'best-contact-form' ); ?>
430	</div>
431	</div></script>
432
433	<script type="text/x-template" id="tmpl-wpuf-integration-erp">
434	<div>
435
436	<?php if ( !function_exists( 'erp_crm_get_contact_groups' ) ) : ?>
437
438	<p>
439	<?php printf( __( '<a href="%s" target="_blank">WP ERP</a> plugin is not installed. Please install the plugin first.', 'weforms' ), 'https://wordpress.org/plugins/erp/' ); ?>
440	</p>
441
442	<?php else : ?>
443	<?php
444	$erp_contact_groups = erp_crm_get_contact_groups( array(
445	'number' => -1,
446	'orderby' => 'name',
447	'order' => 'ASC',
448	) );
449	?>
450
451	<div class="wpuf-int-form-row">
452	<div class="wpuf-int-field-label">
453	<label for="erp-group-id"><?php _e( 'Contact Group', 'weforms' ); ?></label>
454	</div>
455	<div class="wpuf-int-field">
456	<ul style="margin: 0;">
457	<?php foreach ( $erp_contact_groups as $group ): ?>
458	<li>
459	<label>
460	<input type="checkbox" v-model="settings.group" class="checkbox" value="<?php echo $group->id; ?>">
461	<?php echo $group->name; ?>
462	</label>
463	</li>
464	<?php endforeach; ?>
465	</ul>
466	</div>
467	</div>
468
469	<div class="wpuf-int-form-row">
470	<div class="wpuf-int-field-label">
471	<label for="erp-group-id"><?php _e( 'Life Stage', 'weforms' ); ?></label>
472	</div>
473	<div class="wpuf-int-field">
474	<select v-model="settings.stage">
475	<?php echo erp_crm_get_life_stages_dropdown(); ?>
476	</select>
477	</div>
478	</div>
479
480	<fieldset>
481	<legend><?php _e( 'Mapping Fields', 'weforms' ); ?></legend>
482
483	<p class="description" style="padding: 0 0 10px 0;">
484	<?php _e( 'Please map the form input fields with ERP required fields', 'weforms' ); ?>
485	</p>
486
487	<div class="wpuf-int-form-row mapping-fields">
488	<div class="wpuf-int-field-label">
489	<label><?php _e( 'Email Address', 'default' ); ?> <span class="required">*</span></label>
490	</div>
491	<div class="wpuf-int-field">
492	<div class="wpuf-int-field-small">
493	<input type="email" class="regular-text" v-model="settings.fields.email">
494	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="email"></wpuf-merge-tags>
495	</div>
496	</div>
497	</div>
498
499	<div class="wpuf-int-form-row">
500	<div class="wpuf-int-field-label">
501	<label><?php _e( 'First Name', 'default' ); ?></label>
502	</div>
503	<div class="wpuf-int-field">
504	<div class="wpuf-int-field-small">
505	<input type="text" class="regular-text" v-model="settings.fields.first_name">
506	<wpuf-merge-tags v-on:insert="insertValue" field="first_name"></wpuf-merge-tags>
507	</div>
508	</div>
509	</div>
510
511	<div class="wpuf-int-form-row">
512	<div class="wpuf-int-field-label">
513	<label><?php _e( 'Last Name', 'default' ); ?></label>
514	</div>
515	<div class="wpuf-int-field">
516	<div class="wpuf-int-field-small">
517	<input type="text" class="regular-text" v-model="settings.fields.last_name">
518	<wpuf-merge-tags v-on:insert="insertValue" field="last_name"></wpuf-merge-tags>
519	</div>
520	</div>
521	</div>
522	</fieldset>
523
524	<?php endif; ?>
525	</div></script>
526
527	<script type="text/x-template" id="tmpl-wpuf-integration-slack">
528	<div>
529	<div class="wpuf-int-form-row">
530	<div class="wpuf-int-field-label">
531	<label for="mailchimp-list-id"><?php _e( 'Slack Webhook URL', 'weforms' ); ?></label>
532	</div>
533	<div class="wpuf-int-field">
534	<input type="url" class="regular-text" v-model="settings.url" placeholder="https://hooks.slack.com/services/...">
535	<p class="help"><?php printf( __( '%sSlack webhook URL%s to send our JSON payloads (%sView documentation%s)', 'weforms' ), '<a href="https://api.slack.com/incoming-webhooks" target="_blank" >', '</a>', '<a href="https://wedevs.com/docs/weforms/integrations/slack/" target="_blank" >', '</a>' ); ?></p>
536	</div>
537	</div>
538	</div></script>
539
540	<script type="text/x-template" id="tmpl-wpuf-merge-tags">
541	<div class="wpuf-merge-tag-wrap">
542	<a href="#" v-on:click.prevent="toggleFields($event)" class="merge-tag-link" title="<?php echo esc_attr( 'Click to toggle merge tags', 'wpuf' ); ?>"><span class="dashicons dashicons-editor-code"></span></a>
543
544	<!-- <pre>{{ form_fields.length }}</pre> -->
545
546	<div class="wpuf-merge-tags">
547	<div class="merge-tag-section" v-if="!filter \|\| filter !== 'no_fields' ">
548	<div class="merge-tag-head"><?php _e( 'Form Fields', 'wpuf' ); ?></div>
549
550	<ul>
551	<template v-if="form_fields.length">
552	<li v-for="field in form_fields">
553
554	<template v-if="field.template === 'name_field'">
555	<a href="#" v-on:click.prevent="insertField('name-full', field.name);">{{ field.label }}</a>
556	(
557	<a href="#" v-on:click.prevent="insertField('name-first', field.name);"><?php _e( 'first', 'wpuf' ); ?></a> \|
558	<a href="#" v-on:click.prevent="insertField('name-middle', field.name);"><?php _e( 'middle', 'wpuf' ); ?></a> \|
559	<a href="#" v-on:click.prevent="insertField('name-last', field.name);"><?php _e( 'last', 'wpuf' ); ?></a>
560	)
561	</template>
562
563	<template v-else-if="field.template === 'image_upload'">
564	<a href="#" v-on:click.prevent="insertField('image', field.name);">{{ field.label }}</a>
565	</template>
566
567	<template v-else-if="field.template === 'file_upload'">
568	<a href="#" v-on:click.prevent="insertField('file', field.name);">{{ field.label }}</a>
569	</template>
570
571	<a v-else href="#" v-on:click.prevent="insertField('field', field.name);">{{ field.label }} </a>
572
573	</li>
574	</template>
575	<li v-else>
576	<?php _e( 'No fields available', 'wpuf' ); ?>
577	</li>
578	</ul>
579	</div><!-- .merge-tag-section -->
580
581	<template v-if="!fieldsonly">
582
583	<?php
584	if ( function_exists( 'weforms_get_merge_tags' ) ) {
585
586	$merge_tags = weforms_get_merge_tags();
587
588	foreach ($merge_tags as $section_key => $section) {
589	?>
590
591	<div class="merge-tag-section">
592	<div class="merge-tag-head"><?php echo $section['title'] ?></div>
593
594	<ul>
595	<?php foreach ($section['tags'] as $key => $value) { ?>
596	<li>
597	<a href="#" v-on:click.prevent="insertField('<?php echo $key; ?>');"><?php echo $value; ?></a>
598	</li>
599	<?php } ?>
600	</ul>
601	</div><!-- .merge-tag-section -->
602
603	<?php
604	}
605	}
606	?>
607	</template>
608	</div><!-- .merge-tags -->
609	</div>
610	</script>
611
612	<script type="text/x-template" id="tmpl-wpuf-modal">
613	<div>
614	<div :class="['wpuf-form-template-modal', show ? 'show' : 'hide' ]">
615
616	<span class="screen-reader-text"><?php _e( 'Modal window. Press escape to close.', 'wpuf' ); ?></span>
617	<a href="#" class="close" v-on:click.prevent="closeModal()">× <span class="screen-reader-text"><?php _e( 'Close modal window', 'wpuf' ); ?></span></a>
618
619	<header class="modal-header">
620	<slot name="header"></slot>
621	</header>
622
623	<div :class="['content-container', this.$slots.footer ? 'modal-footer' : 'no-footer']">
624	<div class="content">
625	<slot name="body"></slot>
626	</div>
627	</div>
628
629	<footer v-if="this.$slots.footer">
630	<slot name="footer"></slot>
631	</footer>
632	</div>
633	<div :class="['wpuf-form-template-modal-backdrop', show ? 'show' : 'hide' ]"></div>
634	</div>
635	</script>
636
637	<script type="text/x-template" id="tmpl-wpuf-template-modal">
638	<div class="wefroms-form-templates">
639	<wpuf-modal :show.sync="show" :onClose="onClose">
640	<h2 slot="header">
641	<?php _e( 'Select a Template', 'weforms' ); ?>
642	<small><?php printf( __( 'Select from a pre-defined template or from a <a href="#" %s>blank form</a>', 'weforms' ), '@click.prevent="blankForm()"' ); ?></small>
643
644	<span class="choose-form-categroy">
645	<?php _e( 'Select Category', 'weforms' ); ?>
646	<select v-model="category">
647	<option value="all">All</option>
648	<?php
649	$registry = weforms()->templates->get_templates();
650	$categories = weforms_get_form_template_categories();
651	$colors = weforms_get_flat_ui_colors();
652
653	foreach ( $categories as $key => $category ) {
654	printf( '<option value="%s">%s</option>', $key, $category['name'] );
655	}
656	?>
657	</select>
658	</span>
659	</h2>
660
661	<div slot="body">
662
663	<?php
664
665	// remove the blank form from index as it's handled separately
666	if ( array_key_exists( 'blank', $registry ) ) {
667	unset( $registry['blank'] );
668	}
669
670	foreach ($categories as $category_id => $category) {
671
672	?>
673	<div class="clearfix" v-if="category=='<?php echo $category_id; ?>' \|\| category=='all'">
674
675	<?php
676
677	printf( '<h2><i class="%s" style="color: %s"></i>   %s</h2> <ul class="clearfix">',$category['icon'], $colors[array_rand($colors)], $category['name'] );
678
679	if ( $category_id == 'default' ) {
680
681	?>
682
683	<li class="blank-form">
684	<h3><?php _e( 'Blank Form', 'weforms' ); ?></h3>
685
686	<div class="blank-form-text">
687	<span class="dashicons dashicons-plus"></span>
688	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
689	</div>
690
691	<div class="form-create-overlay">
692
693	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
694	<br>
695	<button class="button button-primary" @click.prevent="blankForm($event.target)" title="<?php echo esc_attr('Blank Form'); ?>">
696	<?php _e('Create Form', 'weforms' ); ?>
697	</button>
698	</div>
699	</li>
700
701	<?php
702	}
703
704	foreach ( $registry as $key => $template ) {
705
706	if ( $category_id !== $template->category ) {
707	continue;
708	}
709
710	$is_available = true;
711	$class = 'template-active';
712	$title = $template->title;
713	$image = $template->image ? $template->image : '';
714
715	if ( ! $template->is_enabled() ) {
716
717	$title = __( 'This integration is not installed.', 'weforms' );
718	$class = 'template-inactive';
719	$is_available = false;
720	}
721
722
723	?>
724
725	<li class="<?php echo $class; ?>">
726	<h3><?php _e( $title, 'weforms' ); ?></h3>
727
728	<?php if ( $image ) { printf( '<img src="%s" alt="%s">', $image, $title ); } ?>
729
730	<div class="form-create-overlay">
731
732	<div class="title"><?php echo $template->get_title(); ?></div>
733	<div class="description"><?php echo $template->get_description(); ?></div>
734	<br>
735
736	<button class="button button-primary" @click.prevent="createForm('<?php echo $key; ?>', $event.target)" title="<?php echo esc_attr( $title ); ?>" <?php echo $is_available ? '' : 'disabled="disabled"'; ?>>
737	<?php if ( $is_available ) : ?>
738	<?php _e('Create Form', 'weforms' ); ?>
739	<?php else : ?>
740	<?php _e('Require Pro Upgrade', 'weforms' ); ?>
741	<?php endif; ?>
742	</button>
743	</div>
744	</li>
745	<?php
746	}
747
748
749	?>
750
751	</ul></div>
752
753	<?php
754	}
755	?>
756	</div>
757	</wpuf-modal>
758	</div></script>
759
760	<script type="text/x-template" id="tmpl-wpuf-weforms-text-editor">
761	<div>
762	<textarea :value="value" :id="'wefroms-tinymce-' + editorId" rows="5"></textarea>
763	</div>
764	</script>
765