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

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