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

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