PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.3.3
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.3.3
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.3.3, at assets/js/form-builder-components.js

687 lines 22.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 'use strict';
2
3 /* assets/js/utils/jquery-siaf-start.js */
4
5 ;(function ($) {
6 'use strict';
7
8 /* ./assets/components/dynamic-field/index.js */
9
10 Vue.component('field-dynamic-field', {
11 mixins: [wpuf_mixins.option_field_mixin],
12 template: '#tmpl-wpuf-dynamic-field',
13 data: function data() {
14 return {
15 dynamic: {
16 status: false,
17 param_name: ''
18 }
19 };
20 },
21 computed: {
22 dynamic: function dynamic() {
23 return this.editing_form_field.dynamic;
24 },
25 editing_field: function editing_field() {
26 return this.editing_form_field;
27 }
28 },
29
30 created: function created() {
31 this.dynamic = $.extend(false, this.dynamic, this.editing_form_field.dynamic);
32 },
33
34 methods: {},
35
36 watch: {
37 dynamic: function dynamic() {
38 this.update_value('dynamic', this.dynamic);
39 }
40 }
41 });
42
43 /* ./assets/components/field-name/index.js */
44 Vue.component('field-name', {
45 template: '#tmpl-wpuf-field-name',
46
47 mixins: [wpuf_mixins.option_field_mixin],
48
49 computed: {
50 value: {
51 get: function get() {
52 return this.editing_form_field[this.option_field.name];
53 },
54
55 set: function set(value) {
56 this.update_value(this.option_field.name, value);
57 }
58 }
59 },
60
61 methods: {
62 on_focusout: function on_focusout(e) {
63 wpuf_form_builder.event_hub.$emit('field-text-focusout', e, this);
64 },
65 on_keyup: function on_keyup(e) {
66 wpuf_form_builder.event_hub.$emit('field-text-keyup', e, this);
67 },
68 insertValue: function insertValue(type, field, property) {
69 var value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
70 this.editing_form_field[property.name][property.type] = value;
71 }
72 }
73 });
74
75 /* ./assets/components/field-text-with-tag/index.js */
76 Vue.component('field-text-with-tag', {
77 template: '#tmpl-wpuf-field-text-with-tag',
78
79 mixins: [wpuf_mixins.option_field_mixin],
80
81 computed: {
82 value: {
83 get: function get() {
84 return this.editing_form_field[this.option_field.name];
85 },
86
87 set: function set(value) {
88 this.update_value(this.option_field.name, value);
89 }
90 }
91 },
92
93 methods: {
94 on_focusout: function on_focusout(e) {
95 wpuf_form_builder.event_hub.$emit('field-text-focusout', e, this);
96 },
97 on_keyup: function on_keyup(e) {
98 wpuf_form_builder.event_hub.$emit('field-text-keyup', e, this);
99 },
100 insertValue: function insertValue(type, field, property) {
101 var value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
102 this.value = value;
103 }
104 }
105 });
106
107 /* ./assets/components/form-date_field/index.js */
108 /**
109 * Field template: Date
110 */
111 Vue.component('form-date_field', {
112 template: '#tmpl-wpuf-form-date_field',
113
114 mixins: [wpuf_mixins.form_field_mixin]
115 });
116
117 /* ./assets/components/form-name_field/index.js */
118 /**
119 * Field template: First Name
120 */
121 Vue.component('form-name_field', {
122 template: '#tmpl-wpuf-form-name_field',
123
124 mixins: [wpuf_mixins.form_field_mixin]
125 });
126
127 /* ./assets/components/form-notification/index.js */
128 Vue.component('wpuf-cf-form-notification', {
129 template: '#tmpl-wpuf-form-notification',
130 mixins: [weForms.mixins.Loading],
131 data: function data() {
132 return {
133 editing: false,
134 editingIndex: 0
135 };
136 },
137
138 computed: {
139 is_pro: function is_pro() {
140 return 'true' === weForms.is_pro;
141 },
142 has_sms: function has_sms() {
143 return 'true' === weForms.has_sms;
144 },
145 pro_link: function pro_link() {
146 return wpuf_form_builder.pro_link;
147 },
148 notifications: function notifications() {
149 return this.$store.state.notifications;
150 },
151
152 hasNotifications: function hasNotifications() {
153 return Object.keys(this.$store.state.notifications).length;
154 }
155 },
156
157 methods: {
158 addNew: function addNew() {
159 this.$store.commit('addNotification', wpuf_form_builder.defaultNotification);
160 },
161
162 editItem: function editItem(index) {
163 this.editing = true;
164 this.editingIndex = index;
165 },
166
167 editDone: function editDone() {
168 this.editing = false;
169
170 this.$store.commit('updateNotification', {
171 index: this.editingIndex,
172 value: this.notifications[this.editingIndex]
173 });
174
175 jQuery('.advanced-field-wrap').slideUp('fast');
176 },
177
178 deleteItem: function deleteItem(index) {
179 if (confirm('Are you sure')) {
180 this.editing = false;
181 this.$store.commit('deleteNotification', index);
182 this.$emit('deleteNotification', index);
183 }
184 },
185
186 toggelNotification: function toggelNotification(index) {
187 this.$store.commit('updateNotificationProperty', {
188 index: index,
189 property: 'active',
190 value: !this.notifications[index].active
191 });
192 },
193
194 duplicate: function duplicate(index) {
195 this.$store.commit('cloneNotification', index);
196 },
197
198 toggleAdvanced: function toggleAdvanced() {
199 jQuery('.advanced-field-wrap').slideToggle('fast');
200 },
201
202 insertValue: function insertValue(type, field, property) {
203 var notification = this.notifications[this.editingIndex],
204 value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
205
206 notification[property] = notification[property] + value;
207 },
208
209 insertValueEditor: function insertValueEditor(type, field, property) {
210 var value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
211 this.$emit('insertValueEditor', value);
212 }
213 }
214 });
215
216 /* ./assets/components/integration/index.js */
217 Vue.component('wpuf-integration', {
218 template: '#tmpl-wpuf-integration',
219
220 computed: {
221
222 integrations: function integrations() {
223 return wpuf_form_builder.integrations;
224 },
225
226 hasIntegrations: function hasIntegrations() {
227 return Object.keys(this.integrations).length;
228 },
229
230 store: function store() {
231 return this.$store.state.integrations;
232 },
233
234 pro_link: function pro_link() {
235 return wpuf_form_builder.pro_link;
236 }
237 },
238
239 methods: {
240
241 getIntegration: function getIntegration(id) {
242 return this.integrations[id];
243 },
244
245 getIntegrationSettings: function getIntegrationSettings(id) {
246 // find settings in store, otherwise take from default integration settings
247 return this.store[id] || this.getIntegration(id).settings;
248 },
249
250 isActive: function isActive(id) {
251 if (!this.isAvailable(id)) {
252 return false;
253 }
254
255 return this.getIntegrationSettings(id).enabled === true;
256 },
257
258 isAvailable: function isAvailable(id) {
259 return this.integrations[id] && this.integrations[id].pro ? false : true;
260 },
261
262 toggleState: function toggleState(id, target) {
263 if (!this.isAvailable(id)) {
264 this.alert_pro_feature(id);
265 return;
266 }
267
268 // toggle the enabled state
269 var settings = this.getIntegrationSettings(id);
270
271 settings.enabled = !this.isActive(id);
272
273 this.$store.commit('updateIntegration', {
274 index: id,
275 value: settings
276 });
277
278 $(target).toggleClass('checked');
279 },
280
281 alert_pro_feature: function alert_pro_feature(id) {
282 var title = this.getIntegration(id).title;
283
284 swal({
285 title: '<i class="fa fa-lock"></i> ' + title + ' <br>' + this.i18n.is_a_pro_feature,
286 text: this.i18n.pro_feature_msg,
287 type: '',
288 showCancelButton: true,
289 cancelButtonText: this.i18n.close,
290 confirmButtonColor: '#46b450',
291 confirmButtonText: this.i18n.upgrade_to_pro
292 }).then(function (is_confirm) {
293 if (is_confirm) {
294 window.open(wpuf_form_builder.pro_link, '_blank');
295 }
296 }, function () {});
297 },
298
299 showHide: function showHide(target) {
300 $(target).closest('.wpuf-integration').toggleClass('collapsed');
301 }
302 }
303 });
304
305 /* ./assets/components/integration-erp/index.js */
306 Vue.component('wpuf-integration-erp', {
307 template: '#tmpl-wpuf-integration-erp',
308 mixins: [wpuf_mixins.integration_mixin],
309
310 methods: {
311 insertValue: function insertValue(type, field, property) {
312 var value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
313
314 this.settings.fields[property] = value;
315 }
316 }
317 });
318 /* ./assets/components/integration-slack/index.js */
319 Vue.component('wpuf-integration-slack', {
320 template: '#tmpl-wpuf-integration-slack',
321 mixins: [wpuf_mixins.integration_mixin]
322 });
323 /* ./assets/components/merge-tags/index.js */
324 Vue.component('wpuf-merge-tags', {
325 template: '#tmpl-wpuf-merge-tags',
326 props: {
327 field: [String, Number, Object],
328 filter: {
329 type: String,
330 default: null
331 },
332 fieldsonly: {
333 type: Boolean,
334 default: false
335 }
336 },
337
338 data: function data() {
339 return {
340 type: null
341 };
342 },
343
344 mounted: function mounted() {
345
346 // hide if clicked outside
347 $('body').on('click', function (event) {
348 if (!$(event.target).closest('.wpuf-merge-tag-wrap').length) {
349 $(".wpuf-merge-tags").hide();
350 }
351 });
352 },
353
354 computed: {
355 form_fields: function form_fields() {
356 var template = this.filter,
357 fields = this.$store.state.form_fields;
358
359 if (template !== null) {
360 return fields.filter(function (item) {
361 return item.template === template;
362 });
363 }
364
365 // remove the action/hidden fields
366 return fields.filter(function (item) {
367 return !_.contains(['action_hook', 'custom_hidden_field'], item.template);
368 });
369 }
370
371 },
372
373 methods: {
374 toggleFields: function toggleFields(event) {
375 $(event.target).parent().siblings('.wpuf-merge-tags').toggle('fast');
376 },
377
378 insertField: function insertField(type, field) {
379 this.$emit('insert', type, field, this.field);
380 }
381 }
382 });
383
384 /* ./assets/components/modal/index.js */
385 Vue.component('wpuf-modal', {
386 template: '#tmpl-wpuf-modal',
387 props: {
388 show: Boolean,
389 onClose: Function
390 },
391
392 mounted: function mounted() {
393 var self = this;
394
395 $('body').on('keydown', function (e) {
396 if (self.show && e.keyCode === 27) {
397 self.closeModal();
398 }
399 });
400 },
401
402 methods: {
403 closeModal: function closeModal() {
404 if (typeof this.onClose !== 'undefined') {
405 this.onClose();
406 } else {
407 this.$emit('hideModal');
408 }
409 }
410 }
411 });
412 /* ./assets/components/template-modal/index.js */
413 Vue.component('wpuf-template-modal', {
414 template: '#tmpl-wpuf-template-modal',
415
416 props: {
417 show: Boolean,
418 onClose: Function
419 },
420
421 data: function data() {
422 return {
423 loading: false,
424 category: 'all'
425 };
426 },
427
428 methods: {
429
430 blankForm: function blankForm(target) {
431 this.createForm('blank', target);
432 },
433
434 createForm: function createForm(form, target) {
435 var self = this;
436
437 // already on a request?
438 if (self.loading) {
439 return;
440 }
441
442 self.loading = true;
443
444 $(target).addClass('updating-message');
445
446 wp.ajax.send('weforms_contact_form_template', {
447 data: {
448 template: form,
449 _wpnonce: weForms.nonce
450 },
451
452 success: function success(response) {
453 self.$router.push({
454 name: 'edit',
455 params: { id: response.id }
456 });
457 },
458
459 error: function error(_error) {},
460
461 complete: function complete() {
462 self.loading = false;
463
464 $(target).removeClass('updating-message');
465 }
466 });
467 }
468 }
469 });
470
471 /* ./assets/components/weforms-text-editor/index.js */
472 Vue.component('weforms-text-editor', {
473 template: '#tmpl-wpuf-weforms-text-editor',
474
475 props: {
476 value: {
477 type: String,
478 required: true
479 },
480
481 i18n: {
482 type: Object,
483 required: true
484 },
485
486 editingIndex: {
487 type: Number,
488 required: true
489 }
490 },
491
492 data: function data() {
493 return {
494 editorId: _.clone(Date.now()),
495 fileFrame: null,
496 shortcodes: weForms.shortcodes
497 };
498 },
499 mounted: function mounted() {
500 var vm = this;
501 this.setupEditor();
502
503 this.$parent.$on('deleteNotification', function () {
504 setTimeout(function () {
505 if (vm.editor) {
506 vm.editor.setContent(vm.value);
507 }
508 }, 500);
509 });
510 },
511 beforeDestroy: function beforeDestroy() {
512 this.$parent.$off('insertValueEditor');
513 this.$parent.$off('deleteNotification');
514 },
515
516 methods: {
517 setupEditor: function setupEditor() {
518 var vm = this;
519 window.tinymce.init({
520 selector: '#wefroms-tinymce-' + this.editorId,
521 branding: false,
522 height: 150,
523 menubar: false,
524 convert_urls: false,
525 theme: 'modern',
526 skin: 'lightgray',
527 content_css: weForms.assetsURL + '/css/customizer.css',
528 fontsize_formats: '10px 11px 13px 14px 16px 18px 22px 25px 30px 36px 40px 45px 50px 60px 65px 70px 75px 80px',
529 font_formats: 'Arial=arial,helvetica,sans-serif;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier;' + 'Georgia=georgia,palatino;' + 'Lucida=Lucida Sans Unicode, Lucida Grande, sans-serif;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Times New Roman=times new roman,times;' + 'Trebuchet MS=trebuchet ms,geneva;' + 'Verdana=verdana,geneva;',
530 plugins: 'textcolor colorpicker wplink wordpress code hr wpeditimage',
531 toolbar: ['shortcodes bold italic underline bullist numlist alignleft aligncenter alignjustify alignright link image', 'formatselect forecolor backcolor blockquote hr code', 'fontselect fontsizeselect removeformat undo redo'],
532 setup: function setup(editor) {
533
534 vm.editor = editor;
535
536 var shortcodeMenuItems = [];
537
538 _.forEach(vm.shortcodes, function (shortcodeObj, shortcodeType) {
539 shortcodeMenuItems.push({
540 text: shortcodeObj.title,
541 classes: 'menu-section-title'
542 });
543
544 _.forEach(shortcodeObj.codes, function (codeObj, shortcode) {
545 shortcodeMenuItems.push({
546 text: codeObj.title,
547 onclick: function onclick() {
548 var code = '[' + shortcodeType + ':' + shortcode + ']';
549
550 if (codeObj.default) {
551 code = '[' + shortcodeType + ':' + shortcode + ' default="' + codeObj.default + '"]';
552 }
553
554 if (codeObj.text) {
555 code = '[' + shortcodeType + ':' + shortcode + ' text="' + codeObj.text + '"]';
556 }
557
558 if (codeObj.plainText) {
559 code = codeObj.text;
560 }
561
562 editor.insertContent(code);
563 }
564 });
565 });
566 });
567
568 // editor.addButton('shortcodes', {
569 // type: 'menubutton',
570 // icon: 'shortcode dashicons dashicons-editor-code',
571 // tooltip: 'Shortcodes',
572 // menu: shortcodeMenuItems
573 // });
574
575 // editor.addButton('image', {
576 // icon: 'image',
577 // onclick() {
578 // vm.browseImage(editor);
579 // }
580 // });
581
582 // editor change triggers
583 editor.on('change keyup NodeChange', function () {
584 vm.$emit('input', editor.getContent());
585 });
586
587 vm.$parent.$on('insertValueEditor', function (value) {
588 editor.insertContent(value);
589 });
590 }
591 });
592 },
593 browseImage: function browseImage(editor) {
594 var vm = this;
595 var selectedFile = {
596 id: 0,
597 url: '',
598 type: ''
599 };
600
601 if (vm.fileFrame) {
602 vm.fileFrame.open();
603 return;
604 }
605
606 var fileStates = [new wp.media.controller.Library({
607 library: wp.media.query(),
608 multiple: false,
609 title: vm.i18n.selectAnImage,
610 priority: 20,
611 filterable: 'uploaded'
612 })];
613
614 vm.fileFrame = wp.media({
615 title: vm.i18n.selectAnImage,
616 library: {
617 type: ''
618 },
619 button: {
620 text: vm.i18n.selectAnImage
621 },
622 multiple: false,
623 states: fileStates
624 });
625
626 vm.fileFrame.on('select', function () {
627 var selection = vm.fileFrame.state().get('selection');
628
629 selection.map(function (image) {
630 image = image.toJSON();
631
632 if (image.id) {
633 selectedFile.id = image.id;
634 }
635
636 if (image.url) {
637 selectedFile.url = image.url;
638 }
639
640 if (image.type) {
641 selectedFile.type = image.type;
642 }
643
644 vm.insertImage(editor, selectedFile);
645
646 return null;
647 });
648 });
649
650 vm.fileFrame.on('ready', function () {
651 vm.fileFrame.uploader.options.uploader.params = {
652 type: 'wefroms-image-uploader'
653 };
654 });
655
656 vm.fileFrame.open();
657 },
658 insertImage: function insertImage(editor, image) {
659 if (!image.id || image.type !== 'image') {
660 this.alert({
661 type: 'error',
662 text: this.i18n.pleaseSelectAnImage
663 });
664
665 return;
666 }
667
668 var img = '<img src="' + image.url + '" alt="' + image.alt + '" title="' + image.title + '" style="max-width: 100%; height: auto;">';
669
670 editor.insertContent(img);
671 }
672 },
673
674 watch: {
675 editingIndex: function editingIndex(new_val, old_val) {
676 if (!this.editor) {
677 this.setupEditor();
678 } else {
679 this.editor.setContent(this.value);
680 }
681 }
682 }
683 });
684
685 /* assets/js/utils/jquery-siaf-end.js */
686 })(jQuery);
687