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

701 lines 23.5 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 openModal: function openModal(target) {
304 $(target).parents('.wpuf-integration').find('.wf-modal').addClass('wf-modal-open');
305 },
306
307 hideModal: function hideModal(target) {
308 $(target).parents('.wf-modal').removeClass('wf-modal-open');
309 },
310
311 save_form_builder: function save_form_builder(target) {
312 $('.weforms-save-form-builder').trigger('click');
313 this.hideModal(target);
314 }
315
316 }
317 });
318
319 /* ./assets/components/integration-erp/index.js */
320 Vue.component('wpuf-integration-erp', {
321 template: '#tmpl-wpuf-integration-erp',
322 mixins: [wpuf_mixins.integration_mixin],
323
324 methods: {
325 insertValue: function insertValue(type, field, property) {
326 var value = field !== undefined ? '{' + type + ':' + field + '}' : '{' + type + '}';
327
328 this.settings.fields[property] = value;
329 }
330 }
331 });
332 /* ./assets/components/integration-slack/index.js */
333 Vue.component('wpuf-integration-slack', {
334 template: '#tmpl-wpuf-integration-slack',
335 mixins: [wpuf_mixins.integration_mixin]
336 });
337 /* ./assets/components/merge-tags/index.js */
338 Vue.component('wpuf-merge-tags', {
339 template: '#tmpl-wpuf-merge-tags',
340 props: {
341 field: [String, Number, Object],
342 filter: {
343 type: String,
344 default: null
345 },
346 fieldsonly: {
347 type: Boolean,
348 default: false
349 }
350 },
351
352 data: function data() {
353 return {
354 type: null
355 };
356 },
357
358 mounted: function mounted() {
359
360 // hide if clicked outside
361 $('body').on('click', function (event) {
362 if (!$(event.target).closest('.wpuf-merge-tag-wrap').length) {
363 $(".wpuf-merge-tags").hide();
364 }
365 });
366 },
367
368 computed: {
369 form_fields: function form_fields() {
370 var template = this.filter,
371 fields = this.$store.state.form_fields;
372
373 if (template !== null) {
374 return fields.filter(function (item) {
375 return item.template === template;
376 });
377 }
378
379 // remove the action/hidden fields
380 return fields.filter(function (item) {
381 return !_.contains(['action_hook', 'custom_hidden_field'], item.template);
382 });
383 }
384
385 },
386
387 methods: {
388 toggleFields: function toggleFields(event) {
389 $(event.target).parent().siblings('.wpuf-merge-tags').toggle('fast');
390 },
391
392 insertField: function insertField(type, field) {
393 this.$emit('insert', type, field, this.field);
394 }
395 }
396 });
397
398 /* ./assets/components/modal/index.js */
399 Vue.component('wpuf-modal', {
400 template: '#tmpl-wpuf-modal',
401 props: {
402 show: Boolean,
403 onClose: Function
404 },
405
406 mounted: function mounted() {
407 var self = this;
408
409 $('body').on('keydown', function (e) {
410 if (self.show && e.keyCode === 27) {
411 self.closeModal();
412 }
413 });
414 },
415
416 methods: {
417 closeModal: function closeModal() {
418 if (typeof this.onClose !== 'undefined') {
419 this.onClose();
420 } else {
421 this.$emit('hideModal');
422 }
423 }
424 }
425 });
426 /* ./assets/components/template-modal/index.js */
427 Vue.component('wpuf-template-modal', {
428 template: '#tmpl-wpuf-template-modal',
429
430 props: {
431 show: Boolean,
432 onClose: Function
433 },
434
435 data: function data() {
436 return {
437 loading: false,
438 category: 'all'
439 };
440 },
441
442 methods: {
443
444 blankForm: function blankForm(target) {
445 this.createForm('blank', target);
446 },
447
448 createForm: function createForm(form, target) {
449 var self = this;
450
451 // already on a request?
452 if (self.loading) {
453 return;
454 }
455
456 self.loading = true;
457
458 $(target).addClass('updating-message');
459
460 wp.ajax.send('weforms_contact_form_template', {
461 data: {
462 template: form,
463 _wpnonce: weForms.nonce
464 },
465
466 success: function success(response) {
467 self.$router.push({
468 name: 'edit',
469 params: { id: response.id }
470 });
471 },
472
473 error: function error(_error) {},
474
475 complete: function complete() {
476 self.loading = false;
477
478 $(target).removeClass('updating-message');
479 }
480 });
481 }
482 }
483 });
484
485 /* ./assets/components/weforms-text-editor/index.js */
486 Vue.component('weforms-text-editor', {
487 template: '#tmpl-wpuf-weforms-text-editor',
488
489 props: {
490 value: {
491 type: String,
492 required: true
493 },
494
495 i18n: {
496 type: Object,
497 required: true
498 },
499
500 editingIndex: {
501 type: Number,
502 required: true
503 }
504 },
505
506 data: function data() {
507 return {
508 editorId: _.clone(Date.now()),
509 fileFrame: null,
510 shortcodes: weForms.shortcodes
511 };
512 },
513 mounted: function mounted() {
514 var vm = this;
515 this.setupEditor();
516
517 this.$parent.$on('deleteNotification', function () {
518 setTimeout(function () {
519 if (vm.editor) {
520 vm.editor.setContent(vm.value);
521 }
522 }, 500);
523 });
524 },
525 beforeDestroy: function beforeDestroy() {
526 this.$parent.$off('insertValueEditor');
527 this.$parent.$off('deleteNotification');
528 },
529
530 methods: {
531 setupEditor: function setupEditor() {
532 var vm = this;
533 window.tinymce.init({
534 selector: '#wefroms-tinymce-' + this.editorId,
535 branding: false,
536 height: 150,
537 menubar: false,
538 convert_urls: false,
539 theme: 'modern',
540 skin: 'lightgray',
541 content_css: weForms.assetsURL + '/css/customizer.css',
542 fontsize_formats: '10px 11px 13px 14px 16px 18px 22px 25px 30px 36px 40px 45px 50px 60px 65px 70px 75px 80px',
543 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;',
544 plugins: 'textcolor colorpicker wplink wordpress code hr wpeditimage',
545 toolbar: ['shortcodes bold italic underline bullist numlist alignleft aligncenter alignjustify alignright link image', 'formatselect forecolor backcolor blockquote hr code', 'fontselect fontsizeselect removeformat undo redo'],
546 setup: function setup(editor) {
547
548 vm.editor = editor;
549
550 var shortcodeMenuItems = [];
551
552 _.forEach(vm.shortcodes, function (shortcodeObj, shortcodeType) {
553 shortcodeMenuItems.push({
554 text: shortcodeObj.title,
555 classes: 'menu-section-title'
556 });
557
558 _.forEach(shortcodeObj.codes, function (codeObj, shortcode) {
559 shortcodeMenuItems.push({
560 text: codeObj.title,
561 onclick: function onclick() {
562 var code = '[' + shortcodeType + ':' + shortcode + ']';
563
564 if (codeObj.default) {
565 code = '[' + shortcodeType + ':' + shortcode + ' default="' + codeObj.default + '"]';
566 }
567
568 if (codeObj.text) {
569 code = '[' + shortcodeType + ':' + shortcode + ' text="' + codeObj.text + '"]';
570 }
571
572 if (codeObj.plainText) {
573 code = codeObj.text;
574 }
575
576 editor.insertContent(code);
577 }
578 });
579 });
580 });
581
582 // editor.addButton('shortcodes', {
583 // type: 'menubutton',
584 // icon: 'shortcode dashicons dashicons-editor-code',
585 // tooltip: 'Shortcodes',
586 // menu: shortcodeMenuItems
587 // });
588
589 // editor.addButton('image', {
590 // icon: 'image',
591 // onclick() {
592 // vm.browseImage(editor);
593 // }
594 // });
595
596 // editor change triggers
597 editor.on('change keyup NodeChange', function () {
598 vm.$emit('input', editor.getContent());
599 });
600
601 vm.$parent.$on('insertValueEditor', function (value) {
602 editor.insertContent(value);
603 });
604 }
605 });
606 },
607 browseImage: function browseImage(editor) {
608 var vm = this;
609 var selectedFile = {
610 id: 0,
611 url: '',
612 type: ''
613 };
614
615 if (vm.fileFrame) {
616 vm.fileFrame.open();
617 return;
618 }
619
620 var fileStates = [new wp.media.controller.Library({
621 library: wp.media.query(),
622 multiple: false,
623 title: vm.i18n.selectAnImage,
624 priority: 20,
625 filterable: 'uploaded'
626 })];
627
628 vm.fileFrame = wp.media({
629 title: vm.i18n.selectAnImage,
630 library: {
631 type: ''
632 },
633 button: {
634 text: vm.i18n.selectAnImage
635 },
636 multiple: false,
637 states: fileStates
638 });
639
640 vm.fileFrame.on('select', function () {
641 var selection = vm.fileFrame.state().get('selection');
642
643 selection.map(function (image) {
644 image = image.toJSON();
645
646 if (image.id) {
647 selectedFile.id = image.id;
648 }
649
650 if (image.url) {
651 selectedFile.url = image.url;
652 }
653
654 if (image.type) {
655 selectedFile.type = image.type;
656 }
657
658 vm.insertImage(editor, selectedFile);
659
660 return null;
661 });
662 });
663
664 vm.fileFrame.on('ready', function () {
665 vm.fileFrame.uploader.options.uploader.params = {
666 type: 'wefroms-image-uploader'
667 };
668 });
669
670 vm.fileFrame.open();
671 },
672 insertImage: function insertImage(editor, image) {
673 if (!image.id || image.type !== 'image') {
674 this.alert({
675 type: 'error',
676 text: this.i18n.pleaseSelectAnImage
677 });
678
679 return;
680 }
681
682 var img = '<img src="' + image.url + '" alt="' + image.alt + '" title="' + image.title + '" style="max-width: 100%; height: auto;">';
683
684 editor.insertContent(img);
685 }
686 },
687
688 watch: {
689 editingIndex: function editingIndex(new_val, old_val) {
690 if (!this.editor) {
691 this.setupEditor();
692 } else {
693 this.editor.setContent(this.value);
694 }
695 }
696 }
697 });
698
699 /* assets/js/utils/jquery-siaf-end.js */
700 })(jQuery);
701