PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.2.0
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.2.0
1.6.7 1.6.8 1.6.9 1.6.12 1.6.13 1.6.14 1.6.15 1.6.16 1.6.17 1.6.18 1.6.19 1.6.2 1.6.20 1.6.21 1.6.22 1.6.23 1.6.24 1.6.25 1.6.26 1.6.27 1.6.28 1.6.3 1.6.4 1.6.5 1.6.6 All 74 releases
weforms / assets / js / form-builder-components.js

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

425 lines 10.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* assets/js/utils/jquery-siaf-start.js */
2 ;(function($) {
3 'use strict';
4
5 /* ./assets/components/dynamic-field/index.js */
6 Vue.component('field-dynamic-field', {
7 mixins: [wpuf_mixins.option_field_mixin],
8 template: '#tmpl-wpuf-dynamic-field',
9 data: function(){
10 return {
11 dynamic: {
12 status: false,
13 param_name: '',
14 }
15 }
16 },
17 computed: {
18 dynamic: function(){
19 return this.editing_form_field.dynamic;
20 }
21 },
22
23 created: function () {
24 this.dynamic = $.extend(false, this.dynamic, this.editing_form_field.dynamic);
25 },
26
27 methods: {
28
29 },
30
31 watch: {
32 dynamic: function(){
33 this.update_value('dynamic', this.dynamic);
34 }
35 },
36 });
37 /* ./assets/components/field-name/index.js */
38 Vue.component('field-name', {
39 template: '#tmpl-wpuf-field-name',
40
41 mixins: [
42 wpuf_mixins.option_field_mixin
43 ],
44
45 computed: {
46 value: {
47 get: function () {
48 return this.editing_form_field[this.option_field.name];
49 },
50
51 set: function (value) {
52 this.update_value(this.option_field.name, value);
53 }
54 }
55 },
56
57 methods: {
58 on_focusout: function (e) {
59 wpuf_form_builder.event_hub.$emit('field-text-focusout', e, this);
60 },
61 on_keyup: function (e) {
62 wpuf_form_builder.event_hub.$emit('field-text-keyup', e, this);
63 }
64 }
65 });
66
67 /* ./assets/components/form-date_field/index.js */
68 /**
69 * Field template: Date
70 */
71 Vue.component('form-date_field', {
72 template: '#tmpl-wpuf-form-date_field',
73
74 mixins: [
75 wpuf_mixins.form_field_mixin
76 ]
77 });
78
79 /* ./assets/components/form-name_field/index.js */
80 /**
81 * Field template: First Name
82 */
83 Vue.component('form-name_field', {
84 template: '#tmpl-wpuf-form-name_field',
85
86 mixins: [
87 wpuf_mixins.form_field_mixin
88 ]
89 });
90
91 /* ./assets/components/form-notification/index.js */
92 Vue.component('wpuf-cf-form-notification', {
93 template: '#tmpl-wpuf-form-notification',
94 mixins: [weForms.mixins.Loading],
95 data: function() {
96 return {
97 editing: false,
98 editingIndex: 0,
99 };
100 },
101
102 computed: {
103 is_pro: function() {
104 return 'true' === weForms.is_pro;
105 },
106 pro_link: function() {
107 return wpuf_form_builder.pro_link;
108 },
109 notifications: function() {
110 return this.$store.state.notifications;
111 },
112
113 hasNotifications: function() {
114 return Object.keys( this.$store.state.notifications ).length;
115 }
116 },
117
118 methods: {
119 addNew: function() {
120 this.$store.commit('addNotification', wpuf_form_builder.defaultNotification);
121 },
122
123 editItem: function(index) {
124 this.editing = true;
125 this.editingIndex = index;
126 },
127
128 editDone: function() {
129 this.editing = false;
130
131 this.$store.commit('updateNotification', {
132 index: this.editingIndex,
133 value: this.notifications[this.editingIndex]
134 });
135
136 jQuery('.advanced-field-wrap').slideUp('fast');
137 },
138
139 deleteItem: function(index) {
140 if ( confirm( 'Are you sure' ) ) {
141 this.editing = false;
142 this.$store.commit( 'deleteNotification', index);
143 }
144 },
145
146 toggelNotification: function(index) {
147 this.$store.commit('updateNotificationProperty', {
148 index: index,
149 property: 'active',
150 value: !this.notifications[index].active
151 });
152 },
153
154 duplicate: function(index) {
155 this.$store.commit('cloneNotification', index);
156 },
157
158 toggleAdvanced: function() {
159 jQuery('.advanced-field-wrap').slideToggle('fast');
160 },
161
162 insertValue: function(type, field, property) {
163 var notification = this.notifications[this.editingIndex],
164 value = ( field !== undefined ) ? '{' + type + ':' + field + '}' : '{' + type + '}';
165
166 notification[property] = notification[property] + value;
167 }
168 }
169 });
170
171 /* ./assets/components/integration/index.js */
172 Vue.component('wpuf-integration', {
173 template: '#tmpl-wpuf-integration',
174
175 computed: {
176
177 integrations: function() {
178 return wpuf_form_builder.integrations;
179 },
180
181 hasIntegrations: function() {
182 return Object.keys(this.integrations).length;
183 },
184
185 store: function() {
186 return this.$store.state.integrations;
187 },
188
189 pro_link: function() {
190 return wpuf_form_builder.pro_link;
191 }
192 },
193
194 methods: {
195
196 getIntegration: function(id) {
197 return this.integrations[id];
198 },
199
200 getIntegrationSettings: function(id) {
201 // find settings in store, otherwise take from default integration settings
202 return this.store[id] || this.getIntegration(id).settings;
203 },
204
205 isActive: function(id) {
206 if ( !this.isAvailable(id) ) {
207 return false;
208 }
209
210 return this.getIntegrationSettings(id).enabled === true;
211 },
212
213 isAvailable: function(id) {
214 return ( this.integrations[id] && this.integrations[id].pro ) ? false : true;
215 },
216
217 toggleState: function(id, target) {
218 if ( ! this.isAvailable(id) ) {
219 this.alert_pro_feature( id );
220 return;
221 }
222
223 // toggle the enabled state
224 var settings = this.getIntegrationSettings(id);
225
226 settings.enabled = !this.isActive(id);
227
228 this.$store.commit('updateIntegration', {
229 index: id,
230 value: settings
231 });
232
233 $(target).toggleClass('checked');
234 },
235
236 alert_pro_feature: function (id) {
237 var title = this.getIntegration(id).title;
238
239 swal({
240 title: '<i class="fa fa-lock"></i> ' + title + ' <br>' + this.i18n.is_a_pro_feature,
241 text: this.i18n.pro_feature_msg,
242 type: '',
243 showCancelButton: true,
244 cancelButtonText: this.i18n.close,
245 confirmButtonColor: '#46b450',
246 confirmButtonText: this.i18n.upgrade_to_pro
247 }).then(function (is_confirm) {
248 if (is_confirm) {
249 window.open(wpuf_form_builder.pro_link, '_blank');
250 }
251
252 }, function() {});
253 },
254
255 showHide: function(target) {
256 $(target).closest('.wpuf-integration').toggleClass('collapsed');
257 },
258 }
259 });
260
261 /* ./assets/components/integration-erp/index.js */
262 Vue.component('wpuf-integration-erp', {
263 template: '#tmpl-wpuf-integration-erp',
264 mixins: [wpuf_mixins.integration_mixin],
265
266 methods: {
267 insertValue: function(type, field, property) {
268 var value = ( field !== undefined ) ? '{' + type + ':' + field + '}' : '{' + type + '}';
269
270 this.settings.fields[property] = value;
271 }
272 }
273 });
274 /* ./assets/components/integration-slack/index.js */
275 Vue.component('wpuf-integration-slack', {
276 template: '#tmpl-wpuf-integration-slack',
277 mixins: [wpuf_mixins.integration_mixin]
278 });
279 /* ./assets/components/merge-tags/index.js */
280 Vue.component('wpuf-merge-tags', {
281 template: '#tmpl-wpuf-merge-tags',
282 props: {
283 field: String,
284 filter: {
285 type: String,
286 default: null
287 }
288 },
289
290 data: function() {
291 return {
292 type: null,
293 };
294 },
295
296 mounted: function() {
297
298 // hide if clicked outside
299 $('body').on('click', function(event) {
300 if ( !$(event.target).closest('.wpuf-merge-tag-wrap').length) {
301 $(".wpuf-merge-tags").hide();
302 }
303 });
304 },
305
306 computed: {
307 form_fields: function () {
308 var template = this.filter,
309 fields = this.$store.state.form_fields;
310
311 if (template !== null) {
312 return fields.filter(function(item) {
313 return item.template === template;
314 });
315 }
316
317 // remove the action/hidden fields
318 return fields.filter(function(item) {
319 return !_.contains( [ 'action_hook', 'custom_hidden_field'], item.template );
320 });
321 },
322 },
323
324 methods: {
325 toggleFields: function(event) {
326 $(event.target).parent().siblings('.wpuf-merge-tags').toggle('fast');
327 },
328
329 insertField: function(type, field) {
330 this.$emit('insert', type, field, this.field);
331 }
332 }
333 });
334 /* ./assets/components/modal/index.js */
335 Vue.component('wpuf-modal', {
336 template: '#tmpl-wpuf-modal',
337 props: {
338 show: Boolean,
339 onClose: Function
340 },
341
342 mounted: function () {
343 var self = this;
344
345 $('body').on( 'keydown', function(e) {
346 if (self.show && e.keyCode === 27) {
347 self.closeModal();
348 }
349 });
350 },
351
352 methods: {
353 closeModal: function() {
354 if ( typeof this.onClose !== 'undefined' ) {
355 this.onClose();
356 } else {
357 this.$emit('hideModal');
358 }
359 }
360 }
361 });
362 /* ./assets/components/template-modal/index.js */
363 Vue.component('wpuf-template-modal', {
364 template: '#tmpl-wpuf-template-modal',
365
366 props: {
367 show: Boolean,
368 onClose: Function,
369 },
370
371 data: function() {
372 return {
373 loading: false,
374 category: 'all',
375 };
376 },
377
378 methods: {
379
380 blankForm: function(target) {
381 this.createForm( 'blank', target );
382 },
383
384 createForm: function(form, target) {
385 var self = this;
386
387 // already on a request?
388 if ( self.loading ) {
389 return;
390 }
391
392 self.loading = true;
393
394 $(target).addClass('updating-message');
395
396 wp.ajax.send( 'weforms_contact_form_template', {
397 data: {
398 template: form,
399 _wpnonce: weForms.nonce
400 },
401
402 success: function(response) {
403 self.$router.push({
404 name: 'edit',
405 params: { id: response.id }
406 });
407 },
408
409 error: function(error) {
410
411 },
412
413 complete: function() {
414 self.loading = false;
415
416 $(target).removeClass('updating-message');
417 }
418 });
419 }
420 }
421 });
422
423 /* assets/js/utils/jquery-siaf-end.js */
424 })(jQuery);
425