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

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

761 lines 33.2 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"> Allow field to be populated dynamically</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	<template v-if="notifications[editingIndex].type == 'email' ">
333	<div class="notification-row">
334	<div class="row-one-half notification-field first">
335	<label for="notification-title"><?php _e( 'From Name', 'weforms' ); ?></label>
336	<input type="text" v-model="notifications[editingIndex].fromName">
337	<wpuf-merge-tags v-on:insert="insertValue" field="fromName"></wpuf-merge-tags>
338	</div>
339
340	<div class="row-one-half notification-field">
341	<label for="notification-title"><?php _e( 'From Address', 'weforms' ); ?></label>
342	<input type="email" name="" v-model="notifications[editingIndex].fromAddress">
343	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="fromAddress"></wpuf-merge-tags>
344	</div>
345	</div>
346
347	<div class="notification-row">
348	<div class="row-one-half notification-field first">
349	<label for="notification-title"><?php _e( 'CC', 'weforms' ); ?></label>
350	<input type="email" name="" v-model="notifications[editingIndex].cc">
351	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="cc"></wpuf-merge-tags>
352	</div>
353
354	<div class="row-one-half notification-field">
355	<label for="notification-title"><?php _e( 'BCC', 'weforms' ); ?></label>
356	<input type="email" name="" v-model="notifications[editingIndex].bcc">
357	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="bcc"></wpuf-merge-tags>
358	</div>
359	</div>
360	</template>
361
362	<div class="notification-row notification-field">
363	<template v-if="is_pro">
364
365	<notification-conditional-logics
366	:notification="notifications[editingIndex]"
367	>
368	</notification-conditional-logics>
369
370	</template>
371	<template v-else>
372	<label class="wpuf-pro-text-alert">
373	<a :href="pro_link" target="_blank"><?php _e( 'Conditional Logics available in Pro Version', 'wpuf' ); ?></a>
374	</label>
375	</template>
376	</div>
377	</div>
378	</section><!-- .advanced-fields -->
379	</div>
380
381	<div class="submit-area">
382	<a href="#" v-on:click.prevent="deleteItem(editingIndex)" title="<?php esc_attr_e( 'Delete', 'weforms' ); ?>"><span class="dashicons dashicons-trash"></span></a>
383	<button class="button button-secondary" v-on:click.prevent="editDone()"><?php _e( 'Done', 'weforms' ); ?></button>
384	</div>
385	</div><!-- .notification-edit-area -->
386
387	</div><!-- .notification-wrap -->
388	</div>
389	</script>
390
391	<script type="text/x-template" id="tmpl-wpuf-integration">
392	<div class="wpuf-integrations-wrap">
393
394	<template v-if="hasIntegrations">
395	<div :class="['wpuf-integration', isAvailable(integration.id) ? '' : 'collapsed']" v-for="integration in integrations">
396	<div class="wpuf-integration-header">
397	<div class="wpuf-integration-header-toggle">
398	<span :class="['wpuf-toggle-switch', 'big', isActive(integration.id) ? 'checked' : '']" v-on:click="toggleState(integration.id, $event.target)"></span>
399	</div>
400	<div class="wpuf-integration-header-label">
401	<img class="icon" :src="integration.icon" :alt="integration.title">
402	{{ integration.title }} <span class="label-premium" v-if="!isAvailable(integration.id)"><?php _e( 'Premium Feature', 'best-contact-form' ); ?></span>
403	</div>
404
405	<div class="wpuf-integration-header-actions">
406	<button type="button" class="toggle-area" v-on:click="showHide($event.target)">
407	<span class="screen-reader-text"><?php _e( 'Toggle panel', 'best-contact-form' ); ?></span>
408	<span class="toggle-indicator"></span>
409	</button>
410	</div>
411	</div>
412
413	<div class="wpuf-integration-settings">
414
415	<div v-if="isAvailable(integration.id)">
416	<component :is="'wpuf-integration-' + integration.id" :id="integration.id"></component>
417	</div>
418	<div v-else>
419	<?php _e( 'This feature is available on the premium version only.', 'best-contact-form' ); ?>
420	<a class="button" :href="pro_link" target="_blank"><?php _e( 'Upgrade to Pro', 'best-contact-form' ); ?></a>
421	</div>
422
423	</div>
424	</div>
425	</template>
426
427	<div v-else>
428	<?php _e( 'No integration found.', 'best-contact-form' ); ?>
429	</div>
430	</div></script>
431
432	<script type="text/x-template" id="tmpl-wpuf-integration-erp">
433	<div>
434
435	<?php if ( !function_exists( 'erp_crm_get_contact_groups' ) ) : ?>
436
437	<p>
438	<?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/' ); ?>
439	</p>
440
441	<?php else : ?>
442	<?php
443	$erp_contact_groups = erp_crm_get_contact_groups( array(
444	'number' => -1,
445	'orderby' => 'name',
446	'order' => 'ASC',
447	) );
448	?>
449
450	<div class="wpuf-int-form-row">
451	<div class="wpuf-int-field-label">
452	<label for="erp-group-id"><?php _e( 'Contact Group', 'weforms' ); ?></label>
453	</div>
454	<div class="wpuf-int-field">
455	<ul style="margin: 0;">
456	<?php foreach ( $erp_contact_groups as $group ): ?>
457	<li>
458	<label>
459	<input type="checkbox" v-model="settings.group" class="checkbox" value="<?php echo $group->id; ?>">
460	<?php echo $group->name; ?>
461	</label>
462	</li>
463	<?php endforeach; ?>
464	</ul>
465	</div>
466	</div>
467
468	<div class="wpuf-int-form-row">
469	<div class="wpuf-int-field-label">
470	<label for="erp-group-id"><?php _e( 'Life Stage', 'weforms' ); ?></label>
471	</div>
472	<div class="wpuf-int-field">
473	<select v-model="settings.stage">
474	<?php echo erp_crm_get_life_stages_dropdown(); ?>
475	</select>
476	</div>
477	</div>
478
479	<fieldset>
480	<legend><?php _e( 'Mapping Fields', 'weforms' ); ?></legend>
481
482	<p class="description" style="padding: 0 0 10px 0;">
483	<?php _e( 'Please map the form input fields with ERP required fields', 'weforms' ); ?>
484	</p>
485
486	<div class="wpuf-int-form-row mapping-fields">
487	<div class="wpuf-int-field-label">
488	<label><?php _e( 'Email Address', 'default' ); ?> <span class="required">*</span></label>
489	</div>
490	<div class="wpuf-int-field">
491	<div class="wpuf-int-field-small">
492	<input type="email" class="regular-text" v-model="settings.fields.email">
493	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="email"></wpuf-merge-tags>
494	</div>
495	</div>
496	</div>
497
498	<div class="wpuf-int-form-row">
499	<div class="wpuf-int-field-label">
500	<label><?php _e( 'First Name', 'default' ); ?></label>
501	</div>
502	<div class="wpuf-int-field">
503	<div class="wpuf-int-field-small">
504	<input type="text" class="regular-text" v-model="settings.fields.first_name">
505	<wpuf-merge-tags v-on:insert="insertValue" field="first_name"></wpuf-merge-tags>
506	</div>
507	</div>
508	</div>
509
510	<div class="wpuf-int-form-row">
511	<div class="wpuf-int-field-label">
512	<label><?php _e( 'Last Name', 'default' ); ?></label>
513	</div>
514	<div class="wpuf-int-field">
515	<div class="wpuf-int-field-small">
516	<input type="text" class="regular-text" v-model="settings.fields.last_name">
517	<wpuf-merge-tags v-on:insert="insertValue" field="last_name"></wpuf-merge-tags>
518	</div>
519	</div>
520	</div>
521	</fieldset>
522
523	<?php endif; ?>
524	</div></script>
525
526	<script type="text/x-template" id="tmpl-wpuf-integration-slack">
527	<div>
528	<div class="wpuf-int-form-row">
529	<div class="wpuf-int-field-label">
530	<label for="mailchimp-list-id"><?php _e( 'Slack Webhook URL', 'weforms' ); ?></label>
531	</div>
532	<div class="wpuf-int-field">
533	<input type="url" class="regular-text" v-model="settings.url" placeholder="https://hooks.slack.com/services/...">
534	<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>
535	</div>
536	</div>
537	</div></script>
538
539	<script type="text/x-template" id="tmpl-wpuf-merge-tags">
540	<div class="wpuf-merge-tag-wrap">
541	<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>
542
543	<!-- <pre>{{ form_fields.length }}</pre> -->
544
545	<div class="wpuf-merge-tags">
546	<div class="merge-tag-section" v-if="!filter \|\| filter !== 'no_fields' ">
547	<div class="merge-tag-head"><?php _e( 'Form Fields', 'wpuf' ); ?></div>
548
549	<ul>
550	<template v-if="form_fields.length">
551	<li v-for="field in form_fields">
552
553	<template v-if="field.template === 'name_field'">
554	<a href="#" v-on:click.prevent="insertField('name-full', field.name);">{{ field.label }}</a>
555	(
556	<a href="#" v-on:click.prevent="insertField('name-first', field.name);"><?php _e( 'first', 'wpuf' ); ?></a> \|
557	<a href="#" v-on:click.prevent="insertField('name-middle', field.name);"><?php _e( 'middle', 'wpuf' ); ?></a> \|
558	<a href="#" v-on:click.prevent="insertField('name-last', field.name);"><?php _e( 'last', 'wpuf' ); ?></a>
559	)
560	</template>
561
562	<template v-else-if="field.template === 'image_upload'">
563	<a href="#" v-on:click.prevent="insertField('image', field.name);">{{ field.label }}</a>
564	</template>
565
566	<template v-else-if="field.template === 'file_upload'">
567	<a href="#" v-on:click.prevent="insertField('file', field.name);">{{ field.label }}</a>
568	</template>
569
570	<a v-else href="#" v-on:click.prevent="insertField('field', field.name);">{{ field.label }} </a>
571
572	</li>
573	</template>
574	<li v-else>
575	<?php _e( 'No fields available', 'wpuf' ); ?>
576	</li>
577	</ul>
578	</div><!-- .merge-tag-section -->
579
580	<?php
581	if ( function_exists( 'weforms_get_merge_tags' ) ) {
582
583	$merge_tags = weforms_get_merge_tags();
584
585	foreach ($merge_tags as $section_key => $section) {
586	?>
587
588	<div class="merge-tag-section">
589	<div class="merge-tag-head"><?php echo $section['title'] ?></div>
590
591	<ul>
592	<?php foreach ($section['tags'] as $key => $value) { ?>
593	<li>
594	<a href="#" v-on:click.prevent="insertField('<?php echo $key; ?>');"><?php echo $value; ?></a>
595	</li>
596	<?php } ?>
597	</ul>
598	</div><!-- .merge-tag-section -->
599
600	<?php
601	}
602	}
603	?>
604	</div><!-- .merge-tags -->
605	</div>
606	</script>
607
608	<script type="text/x-template" id="tmpl-wpuf-modal">
609	<div>
610	<div :class="['wpuf-form-template-modal', show ? 'show' : 'hide' ]">
611
612	<span class="screen-reader-text"><?php _e( 'Modal window. Press escape to close.', 'wpuf' ); ?></span>
613	<a href="#" class="close" v-on:click.prevent="closeModal()">× <span class="screen-reader-text"><?php _e( 'Close modal window', 'wpuf' ); ?></span></a>
614
615	<header class="modal-header">
616	<slot name="header"></slot>
617	</header>
618
619	<div :class="['content-container', this.$slots.footer ? 'modal-footer' : 'no-footer']">
620	<div class="content">
621	<slot name="body"></slot>
622	</div>
623	</div>
624
625	<footer v-if="this.$slots.footer">
626	<slot name="footer"></slot>
627	</footer>
628	</div>
629	<div :class="['wpuf-form-template-modal-backdrop', show ? 'show' : 'hide' ]"></div>
630	</div>
631	</script>
632
633	<script type="text/x-template" id="tmpl-wpuf-template-modal">
634	<div class="wefroms-form-templates">
635	<wpuf-modal :show.sync="show" :onClose="onClose">
636	<h2 slot="header">
637	<?php _e( 'Select a Template', 'weforms' ); ?>
638	<small><?php printf( __( 'Select from a pre-defined template or from a <a href="#" %s>blank form</a>', 'weforms' ), '@click.prevent="blankForm()"' ); ?></small>
639
640	<span class="choose-form-categroy">
641	<?php _e( 'Select Category', 'weforms' ); ?>
642	<select v-model="category">
643	<option value="all">All</option>
644	<?php
645	$registry = weforms()->templates->get_templates();
646	$categories = weforms_get_form_template_categories();
647	$colors = weforms_get_flat_ui_colors();
648
649	foreach ( $categories as $key => $category ) {
650	printf( '<option value="%s">%s</option>', $key, $category['name'] );
651	}
652	?>
653	</select>
654	</span>
655	</h2>
656
657	<div slot="body">
658
659	<?php
660
661	// remove the blank form from index as it's handled separately
662	if ( array_key_exists( 'blank', $registry ) ) {
663	unset( $registry['blank'] );
664	}
665
666	foreach ($categories as $category_id => $category) {
667
668	?>
669	<div class="clearfix" v-if="category=='<?php echo $category_id; ?>' \|\| category=='all'">
670
671	<?php
672
673	printf( '<h2><i class="%s" style="color: %s"></i>   %s</h2> <ul class="clearfix">',$category['icon'], $colors[array_rand($colors)], $category['name'] );
674
675	if ( $category_id == 'default' ) {
676
677	?>
678
679	<li class="blank-form">
680	<h3><?php _e( 'Blank Form', 'weforms' ); ?></h3>
681
682	<div class="blank-form-text">
683	<span class="dashicons dashicons-plus"></span>
684	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
685	</div>
686
687	<div class="form-create-overlay">
688
689	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
690	<br>
691	<button class="button button-primary" @click.prevent="blankForm($event.target)" title="<?php echo esc_attr('Blank Form'); ?>">
692	<?php _e('Create Form', 'weforms' ); ?>
693	</button>
694	</div>
695	</li>
696
697	<?php
698	}
699
700	foreach ( $registry as $key => $template ) {
701
702	if ( $category_id !== $template->category ) {
703	continue;
704	}
705
706	$is_available = true;
707	$class = 'template-active';
708	$title = $template->title;
709	$image = $template->image ? $template->image : '';
710
711	if ( ! $template->is_enabled() ) {
712
713	$title = __( 'This integration is not installed.', 'weforms' );
714	$class = 'template-inactive';
715	$is_available = false;
716	}
717
718
719	?>
720
721	<li class="<?php echo $class; ?>">
722	<h3><?php _e( $title, 'weforms' ); ?></h3>
723
724	<?php if ( $image ) { printf( '<img src="%s" alt="%s">', $image, $title ); } ?>
725
726	<div class="form-create-overlay">
727
728	<div class="title"><?php echo $template->get_title(); ?></div>
729	<div class="description"><?php echo $template->get_description(); ?></div>
730	<br>
731
732	<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"'; ?>>
733	<?php if ( $is_available ) : ?>
734	<?php _e('Create Form', 'weforms' ); ?>
735	<?php else : ?>
736	<?php _e('Require Pro Upgrade', 'weforms' ); ?>
737	<?php endif; ?>
738	</button>
739	</div>
740	</li>
741	<?php
742	}
743
744
745	?>
746
747	</ul></div>
748
749	<?php
750	}
751	?>
752	</div>
753	</wpuf-modal>
754	</div></script>
755
756	<script type="text/x-template" id="tmpl-wpuf-weforms-text-editor">
757	<div>
758	<textarea :value="value" :id="'wefroms-tinymce-' + editorId" rows="5"></textarea>
759	</div>
760	</script>
761