PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.2.3
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.2.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 / spa-app.js

spa-app.js in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.2.3, at assets/js/spa-app.js

1,591 lines 45.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!
2 weForms - v1.2.1
3 Generated: 2017-11-16 (1510818342671)
4 */
5
6 ;(function($) {
7 /* ./assets/spa/components/component-table/index.js */
8 Vue.component( 'wpuf-table', {
9 template: '#tmpl-wpuf-component-table',
10 mixins: [weForms.mixins.Loading, weForms.mixins.Paginate, weForms.mixins.BulkAction],
11 props: {
12 has_export: String,
13 action: String,
14 delete: String,
15 id: [String, Number],
16 status: [String],
17 },
18
19 data: function() {
20 return {
21 loading: false,
22 columns: [],
23 items: [],
24 ajaxAction: this.action,
25 nonce: weForms.nonce,
26 index: 'id',
27 bulkDeleteAction: this.delete ? this.delete : 'weforms_form_entry_trash_bulk'
28 };
29 },
30
31 created: function() {
32 this.fetchData();
33 },
34
35 computed: {
36 columnLength: function() {
37 return Object.keys(this.columns).length;
38 },
39 },
40 methods: {
41
42 fetchData: function() {
43 var self = this;
44
45 this.loading = true;
46
47 wp.ajax.send( self.action, {
48 data: {
49 id: self.id,
50 page: self.currentPage,
51 status: self.status,
52 _wpnonce: weForms.nonce
53 },
54 success: function(response) {
55 self.loading = false;
56 self.columns = response.columns;
57 self.items = response.entries;
58 self.form_title = response.form_title;
59 self.totalItems = response.pagination.total;
60 self.totalPage = response.pagination.pages;
61
62 self.$emit('ajaxsuccess', response);
63 },
64 error: function(error) {
65 self.loading = false;
66 alert(error);
67 }
68 });
69 },
70
71 handleBulkAction: function() {
72 if ( '-1' === this.bulkAction ) {
73 alert( 'Please chose a bulk action to perform' );
74 return;
75 }
76
77 if ( 'delete' === this.bulkAction ) {
78 if ( ! this.checkedItems.length ) {
79 alert( 'Please select atleast one entry to delete.' );
80 return;
81 }
82
83 if ( confirm( 'Are you sure to delete the entries?' ) ) {
84 this.deleteBulk();
85 }
86 }
87
88 if ( 'restore' === this.bulkAction ) {
89 if ( ! this.checkedItems.length ) {
90 alert( 'Please select atleast one entry to restore.' );
91 return;
92 }
93
94 this.restoreBulk();
95 }
96 },
97 restore: function(entry_id){
98 var self = this;
99 self.loading = true;
100
101 wp.ajax.send( 'weforms_form_entry_restore', {
102 data: {
103 entry_id: entry_id,
104 _wpnonce: weForms.nonce
105 },
106 success: function(response) {
107 self.loading = false;
108 self.fetchData();
109 },
110 error: function(error) {
111 self.loading = false;
112 alert(error);
113 }
114 });
115 },
116 deletePermanently: function(entry_id){
117
118 if ( confirm( 'Are you sure to delete this entry?' ) ) {
119
120 var self = this;
121 self.loading = true;
122
123 wp.ajax.send( 'weforms_form_entry_delete', {
124 data: {
125 entry_id: entry_id,
126 _wpnonce: weForms.nonce
127 },
128 success: function(response) {
129 self.loading = false;
130 self.fetchData();
131 },
132 error: function(error) {
133 self.loading = false;
134 alert(error);
135 }
136 });
137 }
138 }
139 },
140
141 watch: {
142 id: function(){
143 this.fetchData();
144 },
145 status: function(){
146 this.currentPage = 1;
147 this.bulkAction = -1;
148 this.fetchData();
149 },
150 }
151 } );
152
153 /* ./assets/spa/components/entries/index.js */
154 weForms.routeComponents.Entries = {
155 template: '#tmpl-wpuf-entries',
156 data: function() {
157 return {
158 selected: 0,
159 forms: {},
160 form_title: 'Loading...',
161 status: 'publish',
162 total: 0,
163 totalTrash: 0,
164 };
165 },
166
167 created: function(){
168 this.get_forms();
169 },
170
171 methods: {
172 get_forms: function(){
173 var self = this;
174
175 wp.ajax.send( 'weforms_form_list', {
176 data: {
177 _wpnonce: weForms.nonce,
178 page: self.currentPage,
179 posts_per_page: -1,
180 filter: 'entries',
181 },
182 success: function(response) {
183 if ( Object.keys( response.forms ).length ) {
184 self.forms = response.forms;
185 self.selected = self.forms[Object.keys(self.forms)[0]].id;
186 } else {
187 self.form_title = 'No entry found';
188 }
189 },
190 error: function(error) {
191 alert(error);
192 }
193 });
194 },
195 },
196 };
197
198 /* ./assets/spa/components/form-builder/index.js */
199 weForms.routeComponents.FormEditComponent = {
200 template: '#tmpl-wpuf-form-builder',
201 mixins: wpuf_form_builder_mixins(wpuf_mixins.root),
202 data: function() {
203 return {
204 is_form_saving: false,
205 is_form_saved: false,
206 is_form_switcher: false,
207 post_title_editing: false,
208 loading: false,
209 activeTab: 'editor',
210 activeSettingsTab: 'form',
211 activePaymentTab: 'paypal',
212 };
213 },
214
215 watch: {
216 loading: function(value) {
217 if ( value ) {
218 NProgress.configure({ parent: '#wpadminbar' });
219 NProgress.start();
220 } else {
221 NProgress.done();
222 }
223 },
224 form_fields: {
225 handler: function() {
226 window.weFormsBuilderisDirty = true;
227 },
228 deep: true
229 },
230 notifications: {
231 handler: function() {
232 window.weFormsBuilderisDirty = true;
233 },
234 deep: true
235 },
236 integrations: {
237 handler: function() {
238 window.weFormsBuilderisDirty = true;
239 },
240 deep: true
241 },
242 settings: {
243 handler: function() {
244 window.weFormsBuilderisDirty = true;
245 },
246 deep: true
247 },
248 payment: {
249 handler: function() {
250 window.weFormsBuilderisDirty = true;
251 },
252 deep: true
253 },
254 },
255
256 created: function() {
257 this.set_current_panel('form-fields');
258 this.fetchForm();
259
260 this.$store.commit('panel_add_show_prop');
261
262 /**
263 * This is the event hub we'll use in every
264 * component to communicate between them
265 */
266 wpuf_form_builder.event_hub = new Vue();
267 },
268
269 computed: {
270 current_panel: function () {
271 return this.$store.state.current_panel;
272 },
273
274 post: function () {
275 return this.$store.state.post;
276 },
277
278 form_fields_count: function () {
279 return this.$store.state.form_fields.length;
280 },
281
282 form_fields: function () {
283 return this.$store.state.form_fields;
284 },
285
286 notifications: function() {
287 return this.$store.state.notifications;
288 },
289
290 integrations: function() {
291 return this.$store.state.integrations;
292 },
293
294 settings: function() {
295 return this.$store.state.settings;
296 },
297
298 payment: function() {
299 return this.$store.state.payment;
300 }
301 },
302
303 mounted: function () {
304
305 var clipboard = new window.Clipboard('.form-id');
306 $(".form-id").tooltip();
307
308 var self = this;
309
310 this.started = true;
311
312 clipboard.on('success', function(e) {
313 // Show copied tooltip
314 $(e.trigger)
315 .attr('data-original-title', 'Copied!')
316 .tooltip('show');
317
318 // Reset the copied tooltip
319 setTimeout(function() {
320 $(e.trigger).tooltip('hide')
321 .attr('data-original-title', self.i18n.copy_shortcode);
322 }, 1000);
323
324 e.clearSelection();
325 });
326
327 this.initSharingClipBoard();
328
329 setTimeout(function(){
330 window.weFormsBuilderisDirty = false;
331 },500);
332
333 window.onbeforeunload = function () {
334 if ( window.weFormsBuilderisDirty ) {
335 return self.i18n.unsaved_changes;
336 }
337 };
338 },
339
340 methods: {
341
342 makeActive: function(val) {
343 this.activeTab = val;
344 },
345
346 isActiveTab: function(val) {
347 return this.activeTab === val;
348 },
349
350 isActiveSettingsTab: function(val) {
351 return this.activeSettingsTab === val;
352 },
353
354 makeActiveSettingsTab: function(val) {
355 this.activeSettingsTab = val;
356 },
357
358 isActivePaymentTab: function(val) {
359 return this.activePaymentTab === val;
360 },
361
362 makeActivePaymentTab: function(val) {
363 this.activePaymentTab = val;
364 },
365
366 fetchForm: function() {
367 var self = this;
368
369 self.loading = true;
370
371 wp.ajax.send( 'weforms_get_form', {
372 data: {
373 form_id: this.$route.params.id,
374 _wpnonce: weForms.nonce
375 },
376 success: function(response) {
377
378 self.$store.commit('set_form_post', response.post);
379 self.$store.commit('set_form_fields', response.form_fields);
380 self.$store.commit('set_form_notification', response.notifications);
381 self.$store.commit('set_form_settings', response.settings);
382
383 // if nothing saved in the form, it provides an empty array
384 // but we expect to be an object
385 if ( response.integrations.length !== undefined ) {
386 self.$store.commit('set_form_integrations', {});
387 } else {
388 self.$store.commit('set_form_integrations', response.integrations);
389 }
390 },
391 error: function(error) {
392 alert(error);
393 },
394
395 complete: function() {
396 self.loading = false;
397 }
398 });
399 },
400
401 // set current sidebar panel
402 set_current_panel: function (panel) {
403 this.$store.commit('set_current_panel', panel);
404 },
405
406 // save form builder data
407 save_form_builder: function () {
408 var self = this;
409
410 if (_.isFunction(this.validate_form_before_submit) && !this.validate_form_before_submit()) {
411
412 this.warn({
413 text: this.validation_error_msg
414 });
415
416 return;
417 }
418
419 self.is_form_saving = true;
420 self.set_current_panel('form-fields');
421
422 wp.ajax.send('wpuf_form_builder_save_form', {
423 data: {
424 form_data: $('#wpuf-form-builder').serialize(),
425 form_fields: JSON.stringify(self.form_fields),
426 notifications: JSON.stringify(self.notifications),
427 settings: JSON.stringify(self.settings),
428 payment: JSON.stringify(self.payment),
429 integrations: JSON.stringify(self.integrations),
430 },
431
432 success: function (response) {
433 if (response.form_fields) {
434 self.$store.commit('set_form_fields', response.form_fields);
435 }
436
437 self.is_form_saving = false;
438 self.is_form_saved = true;
439
440 setTimeout(function(){
441 window.weFormsBuilderisDirty = false;
442 },500);
443
444 toastr.success(self.i18n.saved_form_data);
445 },
446
447 error: function () {
448 self.is_form_saving = false;
449 }
450 });
451 },
452
453
454 save_settings: function () {
455 toastr.options.preventDuplicates = true;
456 this.save_form_builder();
457 },
458
459 shareForm: function( site_url, post ) {
460
461 var self = this;
462
463 if( self.settings.sharing_on === 'on'){
464
465 var post_link = site_url + '?weforms=' + btoa( self.getSharingHash() + '_' + Math.floor(Date.now() / 1000) + '_' + post.ID);
466
467 swal({
468 title: self.i18n.shareYourForm,
469 html: '<p>'+self.i18n.shareYourFormText+'</p> <p><input onClick="this.setSelectionRange(0, this.value.length)" type="text" class="regular-text" value="' + post_link + '"/> <button class="anonymous-share-btn button button-primary" title="Copy URL" data-clipboard-text="' + post_link + '"><i class="fa fa-clipboard" aria-hidden="true"></i></button></p>',
470 showCloseButton: true,
471 showCancelButton: true,
472 confirmButtonClass: 'btn btn-success',
473 cancelButtonClass: 'btn btn-danger',
474 confirmButtonColor: '#d54e21',
475 confirmButtonText: self.i18n.disableSharing,
476 cancelButtonText: self.i18n.close,
477 focusCancel: true,
478
479 }).then(function () {
480 swal({
481 title: self.i18n.areYouSure,
482 html: "<p>"+self.i18n.areYouSureDesc+"</p>",
483 type: 'info',
484 confirmButtonColor: '#d54e21',
485 showCancelButton: true,
486 confirmButtonText: self.i18n.disable,
487 cancelButtonText: self.i18n.cancel,
488 }).then(function () {
489 self.disableSharing();
490 });
491 });
492
493 } else {
494
495 swal({
496 title: self.i18n.shareYourForm,
497 html: self.i18n.shareYourFormDesc,
498 type: 'info',
499 showCancelButton: true,
500 confirmButtonText: 'Enable',
501 cancelButtonText: 'Cancel',
502 }).then(function () {
503 self.enableSharing(site_url, post);
504 });
505
506 }
507 },
508
509 enableSharing: function(site_url, post){
510
511 this.settings.sharing_on = 'on';
512 this.save_settings();
513 this.shareForm(site_url, post);
514 },
515
516 disableSharing: function(){
517 this.settings.sharing_on = false;
518 this.save_settings();
519 },
520 getSharingHash: function(){
521
522 if( ! this.settings.sharing_hash ) {
523 this.settings.sharing_hash = this.makeRandomString(8);
524 this.save_settings();
525 }
526
527 return this.settings.sharing_hash;
528 },
529
530 makeRandomString: function(limit) {
531 limit = limit || 8;
532 var text = "";
533 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
534
535 for (var i = 0; i < limit; i++){
536
537 text += possible.charAt(Math.floor(Math.random() * possible.length));
538 }
539
540 return text;
541 },
542
543 initSharingClipBoard: function(val) {
544 var clipboard2 = new window.Clipboard('.anonymous-share-btn');
545
546 $(".anonymous-share-btn").tooltip();
547
548 clipboard2.on('success', function(e) {
549 // Show copied tooltip
550 $(e.trigger)
551 .attr('data-original-title', 'Copied!')
552 .tooltip('show');
553
554 // Reset the copied tooltip
555 setTimeout(function() {
556 $(e.trigger).tooltip('hide')
557 .attr('data-original-title', 'Copy URL');
558 }, 1000);
559
560 e.clearSelection();
561 });
562 },
563
564 }
565 };
566
567 /* ./assets/spa/components/form-entries/index.js */
568 weForms.routeComponents.FormEntries = {
569 props: {
570 id: [String, Number]
571 },
572 template: '#tmpl-wpuf-form-entries',
573 data: function() {
574 return {
575 selected: 0,
576 form_title: 'Loading...',
577 status: 'publish',
578 total: 0,
579 totalTrash: 0,
580 };
581 }
582 };
583
584 /* ./assets/spa/components/form-entry-single/index.js */
585 weForms.routeComponents.FormEntriesSingle = {
586 template: '#tmpl-wpuf-form-entry-single',
587 mixins: [weForms.mixins.Loading,weForms.mixins.Cookie],
588 data: function() {
589 return {
590 loading: false,
591 hideEmpty: true,
592 hasEmpty: false,
593 show_payment_data: false,
594 entry: {
595 form_fields: {},
596 meta_data: {},
597 payment_data: {},
598 }
599 };
600 },
601 created: function() {
602 this.hideEmpty = this.hideEmptyStatus();
603 this.fetchData();
604 },
605 computed: {
606 hasFormFields: function() {
607 return Object.keys(this.entry.form_fields).length;
608 },
609 },
610 methods: {
611 fetchData: function() {
612 var self = this;
613
614 this.loading = true;
615
616 wp.ajax.send( 'weforms_form_entry_details', {
617 data: {
618 entry_id: self.$route.params.entryid,
619 form_id: self.$route.params.id,
620 _wpnonce: weForms.nonce
621 },
622 success: function(response) {
623 self.loading = false;
624 self.entry = response;
625 self.hasEmpty = response.has_empty;
626 },
627 error: function(error) {
628 self.loading = false;
629 alert(error);
630 }
631 });
632 },
633
634 trashEntry: function() {
635 var self = this;
636
637 if ( !confirm( weForms.confirm ) ) {
638 return;
639 }
640
641 wp.ajax.send( 'weforms_form_entry_trash', {
642 data: {
643 entry_id: self.$route.params.entryid,
644 _wpnonce: weForms.nonce
645 },
646
647 success: function() {
648 self.loading = false;
649
650 self.$router.push({ name: 'formEntries', params: { id: self.$route.params.id }});
651 },
652 error: function(error) {
653 self.loading = false;
654 alert(error);
655 }
656 });
657 },
658 hideEmptyStatus: function(){
659 return this.getCookie('weFormsEntryHideEmpty') === 'false' ? false : true;
660 },
661 },
662 watch: {
663 hideEmpty: function(value){
664 this.setCookie('weFormsEntryHideEmpty',value,356);
665 }
666 }
667 };
668
669 /* ./assets/spa/components/form-list-table/index.js */
670 Vue.component('form-list-table', {
671 template: '#tmpl-wpuf-form-list-table',
672 mixins: [weForms.mixins.Loading, weForms.mixins.Paginate, weForms.mixins.BulkAction],
673 data: function() {
674 return {
675 loading: false,
676 index: 'ID',
677 items: [],
678 bulkDeleteAction: 'weforms_form_delete_bulk',
679 };
680 },
681 created: function() {
682 this.fetchData();
683 },
684 computed: {
685 is_pro: function() {
686 return 'true' === weForms.is_pro;
687 },
688 has_payment: function() {
689 return 'true' === weForms.has_payment;
690 },
691 },
692
693 methods: {
694 fetchData: function() {
695 var self = this;
696
697 this.loading = true;
698
699 wp.ajax.send( 'weforms_form_list', {
700 data: {
701 _wpnonce: weForms.nonce,
702 page: self.currentPage,
703 },
704 success: function(response) {
705 self.loading = false;
706 self.items = response.forms;
707 self.totalItems = response.meta.total;
708 self.totalPage = response.meta.pages;
709 },
710 error: function(error) {
711 self.loading = false;
712 alert(error);
713 }
714 });
715 },
716
717 deleteForm: function(index) {
718 var self = this;
719
720 if (confirm('Are you sure?')) {
721 self.loading = true;
722
723 wp.ajax.send( 'weforms_form_delete', {
724 data: {
725 form_id: this.items[index].id,
726 _wpnonce: weForms.nonce
727 },
728 success: function(response) {
729 self.items.splice(index, 1);
730 self.loading = false;
731 },
732 error: function(error) {
733 alert(error);
734 self.loading = false;
735 }
736 });
737 }
738 },
739
740 duplicate: function(form_id, index) {
741 var self = this;
742
743 this.loading = true;
744
745 wp.ajax.send( 'weforms_form_duplicate', {
746 data: {
747 form_id: form_id,
748 _wpnonce: weForms.nonce
749 },
750 success: function(response) {
751 self.items.splice(0, 0, response);
752 self.loading = false;
753 },
754 error: function(error) {
755 alert(error);
756 self.loading = false;
757 }
758 });
759 },
760
761 handleBulkAction: function() {
762 if ( '-1' === this.bulkAction ) {
763 alert( 'Please chose a bulk action to perform' );
764 return;
765 }
766
767 if ( 'delete' === this.bulkAction ) {
768 if ( ! this.checkedItems.length ) {
769 alert( 'Please select atleast one form to delete.' );
770 return;
771 }
772
773 if ( confirm( 'Are you sure to delete the forms?' ) ) {
774 this.deleteBulk();
775 }
776 }
777 },
778 }
779 });
780 /* ./assets/spa/components/form-payments/index.js */
781 weForms.routeComponents.FormPayments = {
782 props: {
783 id: [String, Number]
784 },
785 template: '#tmpl-wpuf-form-payments',
786 data: function() {
787 return {
788 form_title: 'Loading...'
789 };
790 }
791 };
792
793 /* ./assets/spa/components/home-page/index.js */
794 weForms.routeComponents.Home = {
795 template: '#tmpl-wpuf-home-page',
796
797 data: function() {
798 return {
799 showTemplateModal: false
800 };
801 },
802
803 methods: {
804 displayModal: function() {
805 this.showTemplateModal = true;
806 },
807
808 closeModal: function() {
809 this.showTemplateModal = false;
810 },
811 }
812 };
813
814 /* ./assets/spa/components/tools/index.js */
815 weForms.routeComponents.Tools = {
816 template: '#tmpl-wpuf-tools',
817 mixins: [weForms.mixins.Tabs, weForms.mixins.Loading],
818 data: function() {
819 return {
820 activeTab: 'export',
821 exportType: 'all',
822 loading: false,
823 forms: [],
824 importButton: 'Import',
825 currentStatus: 0,
826 responseMessage: '',
827 logs: [],
828 ximport: {
829 current: '',
830 title: '',
831 action: '',
832 message: '',
833 type: 'updated',
834 refs: {}
835 }
836 };
837 },
838
839 computed: {
840
841 isInitial: function() {
842 return this.currentStatus === 0;
843 },
844
845 isSaving: function() {
846 return this.currentStatus === 1;
847 },
848
849 isSuccess: function() {
850 return this.currentStatus === 2;
851 },
852
853 isFailed: function() {
854 return this.currentStatus === 3;
855 },
856
857 hasRefs: function() {
858 return Object.keys(this.ximport.refs).length;
859 },
860 hasLogs: function() {
861 return Object.keys(this.logs).length;
862 }
863 },
864
865 created: function() {
866 this.fetchData();
867 this.fetchLogs();
868 },
869
870 methods: {
871 fetchLogs: function(target) {
872 var self = this;
873
874 self.startLoading(target);
875
876 wp.ajax.send( 'weforms_read_logs', {
877 data: {
878 _wpnonce: weForms.nonce
879 },
880 success: function(response) {
881 self.stopLoading(target);
882 self.logs = response;
883 },error: function(){
884 self.stopLoading(target);
885 self.logs = [];
886 }
887 });
888 },
889 deleteLogs: function(target) {
890 var self = this;
891
892 if ( confirm('Are you sure to clear the log file?') ) {
893
894 self.startLoading(target);
895
896 wp.ajax.send( 'weforms_delete_logs', {
897 data: {
898 _wpnonce: weForms.nonce
899 },
900 success: function(response) {
901 self.logs = [];
902 self.stopLoading(target);
903 self.fetchLogs();
904 },
905 error: function(response) {
906 self.logs = [];
907 self.stopLoading(target);
908 self.fetchLogs();
909 }
910 });
911 }
912 },
913 stopLoading: function(target){
914 target = $(target);
915
916 if (target.is('button')) {
917 target.removeClass('updating-message').find('span').show();
918 }else if(target.is('span')){
919 target.show().parent().removeClass('updating-message');
920 }
921 },
922 startLoading: function(target){
923
924 target = $(target);
925
926 if (target.is('button')) {
927 target.addClass('updating-message').find('span').hide();
928 }else if(target.is('span')){
929 target.hide().parent().addClass('updating-message');
930 }
931 },
932 fetchData: function() {
933 var self = this;
934
935 this.loading = true;
936
937 wp.ajax.send( 'weforms_form_names', {
938 data: {
939 _wpnonce: weForms.nonce
940 },
941 success: function(response) {
942 // console.log(response);
943 self.loading = false;
944 self.forms = response;
945 },
946 error: function(error) {
947 self.loading = false;
948 alert(error);
949 }
950 });
951 },
952
953 importForm: function( fieldName, fileList, event ) {
954 if ( !fileList.length ) {
955 return;
956 }
957
958 var formData = new FormData();
959 var self = this;
960
961 formData.append( fieldName, fileList[0], fileList[0].name);
962 formData.append( 'action', 'weforms_import_form' );
963 formData.append( '_wpnonce', weForms.nonce );
964
965 self.currentStatus = 1;
966
967 $.ajax({
968 type: "POST",
969 url: window.ajaxurl,
970 data: formData,
971 processData: false,
972 contentType: false,
973 success: function(response) {
974 self.responseMessage = response.data;
975
976 if ( response.success ) {
977 self.currentStatus = 2;
978 } else {
979 self.currentStatus = 3;
980 }
981
982 // reset the value
983 $(event.target).val('');
984 },
985
986 error: function(errResponse) {
987 console.log(errResponse);
988 self.currentStatus = 3;
989 },
990
991 complete: function() {
992 $(event.target).val('');
993 }
994 });
995 },
996
997 importx: function(target, plugin) {
998 var button = $(target);
999 var self = this;
1000
1001 self.ximport.current = plugin;
1002 button.addClass('updating-message').text( button.data('importing') );
1003
1004 wp.ajax.send( 'weforms_import_xforms_' + plugin, {
1005 data: {
1006 _wpnonce: weForms.nonce
1007 },
1008
1009 success: function(response) {
1010 self.ximport.title = response.title;
1011 self.ximport.message = response.message;
1012 self.ximport.action = response.action;
1013 self.ximport.refs = response.refs;
1014 },
1015
1016 error: function(error) {
1017 alert(error.message);
1018 },
1019
1020 complete: function() {
1021 button.removeClass('updating-message').text( button.data('original') );
1022 }
1023 });
1024 },
1025
1026 replaceX: function(target, type) {
1027 var button = $(target);
1028 var self = this;
1029
1030 button.addClass('updating-message');
1031
1032 wp.ajax.send( 'weforms_import_xreplace_' + self.ximport.current, {
1033 data: {
1034 type: type,
1035 _wpnonce: weForms.nonce
1036 },
1037
1038 success: function(response) {
1039 if ( 'replace' === button.data('type') ) {
1040 alert( response );
1041 }
1042 },
1043
1044 error: function(error) {
1045 alert( error );
1046 },
1047
1048 complete: function() {
1049 self.ximport.current = '';
1050 self.ximport.title = '';
1051 }
1052 });
1053 }
1054 }
1055 };
1056
1057 /* ./assets/spa/components/transactions/index.js */
1058 weForms.routeComponents.Transactions = {
1059 template: '#tmpl-wpuf-transactions',
1060 data: function() {
1061 return {
1062 selected: 0,
1063 no_transactions: false,
1064 forms: {},
1065 form_title: 'Loading...',
1066 };
1067 },
1068
1069 created: function(){
1070 this.get_forms();
1071 },
1072
1073 methods: {
1074 get_forms: function(){
1075 var self = this;
1076
1077 wp.ajax.send( 'weforms_form_list', {
1078 data: {
1079 _wpnonce: weForms.nonce,
1080 page: self.currentPage,
1081 filter: 'transactions',
1082 },
1083 success: function(response) {
1084
1085 if ( Object.keys(response.forms).length ) {
1086 self.forms = response.forms;
1087 self.selected = self.forms[Object.keys(self.forms)[0]].id;
1088 } else {
1089 self.form_title = 'No transaction found';
1090 self.no_transactions = true;
1091 }
1092 },
1093 error: function(error) {
1094 alert(error);
1095 }
1096 });
1097 },
1098 },
1099 };
1100
1101 /* ./assets/spa/components/weforms-page-help/index.js */
1102 weForms.routeComponents.Help = {
1103 template: '#tmpl-wpuf-weforms-page-help'
1104 };
1105 /* ./assets/spa/components/weforms-premium/index.js */
1106 weForms.routeComponents.Premium = {
1107 template: '#tmpl-wpuf-weforms-premium'
1108 };
1109 /* ./assets/spa/components/weforms-settings/index.js */
1110 weForms.routeComponents.Settings = {
1111 template: '#tmpl-wpuf-weforms-settings',
1112 mixins: [weForms.mixins.Loading, weForms.mixins.Cookie],
1113 data: function() {
1114 return {
1115 loading: false,
1116 settings: {
1117 email_gateway: 'wordpress',
1118 credit: false,
1119 permission: 'manage_options',
1120 gateways: {
1121 sendgrid: '',
1122 mailgun: '',
1123 sparkpost: ''
1124 },
1125 recaptcha: {
1126 type: 'v2',
1127 key: '',
1128 secret: ''
1129 }
1130 },
1131
1132 activeTab: 'general',
1133 };
1134 },
1135
1136 computed: {
1137
1138 is_pro: function() {
1139 return 'true' === weForms.is_pro;
1140 }
1141 },
1142
1143 created: function() {
1144 this.fetchSettings();
1145
1146 if ( this.getCookie('weforms_settings_active_tab') ) {
1147 this.activeTab = this.getCookie('weforms_settings_active_tab');
1148 }
1149 },
1150
1151 methods: {
1152
1153 makeActive: function(val) {
1154 this.activeTab = val;
1155 },
1156
1157 isActiveTab: function(val) {
1158 return this.activeTab === val;
1159 },
1160
1161 fetchSettings: function() {
1162 var self = this;
1163
1164 self.loading = true;
1165
1166 wp.ajax.send('weforms_get_settings', {
1167 data: {
1168 _wpnonce: weForms.nonce
1169 },
1170
1171 success: function(response) {
1172
1173 if ( response === undefined ){
1174 return;
1175 }
1176
1177 // set defaults if undefined
1178 $.each( self.settings, function( key, value ) {
1179 if( response[key] === undefined ) {
1180 response[key] = value;
1181 }
1182 });
1183
1184 self.settings = response;
1185 },
1186
1187 complete: function() {
1188 self.loading = false;
1189 }
1190 });
1191 },
1192
1193 saveSettings: function(target) {
1194 var self = this;
1195
1196 $(target).addClass('updating-message');
1197
1198 wp.ajax.send('weforms_save_settings', {
1199 data: {
1200 settings: JSON.stringify(self.settings),
1201 _wpnonce: weForms.nonce
1202 },
1203
1204 success: function(response) {
1205 toastr.options.timeOut = 1000;
1206 toastr.success( 'Settings has been updated' );
1207 },
1208
1209 error: function(error) {
1210 console.log(error);
1211 },
1212
1213 complete: function() {
1214 $(target).removeClass('updating-message');
1215 }
1216 });
1217
1218 },
1219
1220 post: function( action, data , success ){
1221 data = data || {};
1222 success = success || function(){ };
1223 data._wpnonce = weForms.nonce;
1224
1225 wp.ajax.send(action, {
1226 data: data,
1227
1228 success: function(response) {
1229 success(response);
1230 },
1231
1232 error: function(error) {
1233 console.log(error);
1234 },
1235
1236 complete: function() {
1237
1238 }
1239 });
1240 },
1241 },
1242
1243 watch: {
1244 activeTab: function(value){
1245 this.setCookie('weforms_settings_active_tab', value, '365');
1246 }
1247 }
1248 };
1249 /* ./assets/spa/app.js */
1250 if (!Array.prototype.hasOwnProperty('swap')) {
1251 Array.prototype.swap = function (from, to) {
1252 this.splice(to, 0, this.splice(from, 1)[0]);
1253 };
1254 }
1255
1256 Vue.component('datepicker', {
1257 template: '<input type="text" v-bind:value="value" />',
1258 props: ['value'],
1259 mounted: function() {
1260 var self = this;
1261
1262 $(this.$el).datetimepicker({
1263 dateFormat: 'yy-mm-dd',
1264 timeFormat: "HH:mm:ss",
1265 onClose: this.onClose
1266 });
1267 },
1268
1269 methods: {
1270 onClose: function(date) {
1271 this.$emit('input', date);
1272 }
1273 },
1274 });
1275
1276 Vue.component('weforms-colorpicker', {
1277 template: '<input type="text" v-bind:value="value" />',
1278 props: ['value'],
1279 mounted: function() {
1280 var self = this;
1281
1282 $(this.$el).wpColorPicker({
1283 change: this.onChange
1284 });
1285 },
1286
1287 methods: {
1288 onChange: function(event, ui) {
1289 this.$emit('input', ui.color.toString());
1290 }
1291 },
1292 });
1293
1294 // check if an element is visible in browser viewport
1295 function is_element_in_viewport (el) {
1296 if (typeof jQuery === "function" && el instanceof jQuery) {
1297 el = el[0];
1298 }
1299
1300 var rect = el.getBoundingClientRect();
1301
1302 return (
1303 rect.top >= 0 &&
1304 rect.left >= 0 &&
1305 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
1306 rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
1307 );
1308 }
1309
1310 /**
1311 * Vuex Store data
1312 */
1313 var wpuf_form_builder_store = new Vuex.Store({
1314 state: {
1315 post: {},
1316 form_fields: [],
1317 panel_sections: wpuf_form_builder.panel_sections,
1318 field_settings: wpuf_form_builder.field_settings,
1319 notifications: [],
1320 settings: {},
1321 integrations: {},
1322 current_panel: 'form-fields',
1323 editing_field_id: 0, // editing form field id
1324 },
1325
1326 mutations: {
1327 set_form_fields: function (state, form_fields) {
1328 Vue.set(state, 'form_fields', form_fields);
1329 },
1330
1331 set_form_post: function (state, post) {
1332 Vue.set(state, 'post', post);
1333 },
1334
1335 set_form_notification: function (state, value) {
1336 Vue.set(state, 'notifications', value);
1337 },
1338
1339 set_form_integrations: function (state, value) {
1340 Vue.set(state, 'integrations', value);
1341 },
1342
1343 set_form_settings: function (state, value) {
1344 Vue.set(state, 'settings', value);
1345 },
1346
1347 // set the current panel
1348 set_current_panel: function (state, panel) {
1349 if ('field-options' !== state.current_panel &&
1350 'field-options' === panel &&
1351 state.form_fields.length
1352 ) {
1353 state.editing_field_id = state.form_fields[0].id;
1354 }
1355
1356 state.current_panel = panel;
1357
1358 // reset editing field id
1359 if ('form-fields' === panel) {
1360 state.editing_field_id = 0;
1361 }
1362 },
1363
1364 // add show property to every panel section
1365 panel_add_show_prop: function (state) {
1366 state.panel_sections.map(function (section, index) {
1367 if (!section.hasOwnProperty('show')) {
1368 Vue.set(state.panel_sections[index], 'show', true);
1369 }
1370 });
1371 },
1372
1373 // toggle panel sections
1374 panel_toggle: function (state, index) {
1375 state.panel_sections[index].show = !state.panel_sections[index].show;
1376 },
1377
1378 // open field settings panel
1379 open_field_settings: function (state, field_id) {
1380 var field = state.form_fields.filter(function(item) {
1381 return parseInt(field_id) === parseInt(item.id);
1382 });
1383
1384 if ('field-options' === state.current_panel && field[0].id === state.editing_field_id) {
1385 return;
1386 }
1387
1388 if (field.length) {
1389 state.editing_field_id = 0;
1390 state.current_panel = 'field-options';
1391
1392 setTimeout(function () {
1393 state.editing_field_id = field[0].id;
1394 }, 400);
1395 }
1396 },
1397
1398 update_editing_form_field: function (state, payload) {
1399 var editing_field = _.find(state.form_fields, function (item) {
1400 return parseInt(item.id) === parseInt(payload.editing_field_id);
1401 });
1402
1403 editing_field[payload.field_name] = payload.value;
1404 },
1405
1406 // add new form field element
1407 add_form_field_element: function (state, payload) {
1408 state.form_fields.splice(payload.toIndex, 0, payload.field);
1409
1410 // bring newly added element into viewport
1411 Vue.nextTick(function () {
1412 var el = $('#form-preview-stage .wpuf-form .field-items').eq(payload.toIndex);
1413
1414 if (el && !is_element_in_viewport(el.get(0))) {
1415 $('#builder-stage section').scrollTo(el, 800, {offset: -50});
1416 }
1417 });
1418 },
1419
1420 // sorting inside stage
1421 swap_form_field_elements: function (state, payload) {
1422 state.form_fields.swap(payload.fromIndex, payload.toIndex);
1423 },
1424
1425 clone_form_field_element: function (state, payload) {
1426 var field = _.find(state.form_fields, function (item) {
1427 return parseInt(item.id) === parseInt(payload.field_id);
1428 });
1429
1430 var clone = $.extend(true, {}, field),
1431 index = parseInt(payload.index) + 1;
1432
1433 clone.id = payload.new_id;
1434 clone.name = clone.name + '_copy';
1435 clone.is_new = true;
1436
1437 state.form_fields.splice(index, 0, clone);
1438 },
1439
1440 // delete a field
1441 delete_form_field_element: function (state, index) {
1442 state.current_panel = 'form-fields';
1443 state.form_fields.splice(index, 1);
1444 },
1445
1446 // set fields for a panel section
1447 set_panel_section_fields: function (state, payload) {
1448 var section = _.find(state.panel_sections, function (item) {
1449 return item.id === payload.id;
1450 });
1451
1452 section.fields = payload.fields;
1453 },
1454
1455 // notifications
1456 addNotification: function(state, payload) {
1457 state.notifications.push(_.clone(payload));
1458 },
1459
1460 deleteNotification: function(state, index) {
1461 state.notifications.splice(index, 1);
1462 },
1463
1464 cloneNotification: function(state, index) {
1465 var clone = $.extend(true, {}, state.notifications[index]);
1466
1467 index = parseInt(index) + 1;
1468 state.notifications.splice(index, 0, clone);
1469 },
1470
1471 // update by it's property
1472 updateNotificationProperty: function(state, payload) {
1473 state.notifications[payload.index][payload.property] = payload.value;
1474 },
1475
1476 updateNotification: function(state, payload) {
1477 state.notifications[payload.index] = payload.value;
1478 },
1479
1480 updateIntegration: function(state, payload) {
1481 // console.log(payload);
1482 // console.log(state.integrations[payload.index]);
1483 // state.integrations[payload.index] = payload.value;
1484 Vue.set(state.integrations, payload.index, payload.value)
1485
1486 // state.integrations.splice(payload.index, 0, payload.value);
1487 }
1488 }
1489 });
1490
1491 // 1. Define route components.
1492 weForms.routeComponents.FormHome = { template: '<div><router-view class="child"></router-view></div>' };
1493 weForms.routeComponents.SingleForm = { template: '#tmpl-wpuf-form-editor' };
1494 weForms.routeComponents.FormEntriesHome = {
1495 template: '<div><router-view class="grand-child"></router-view></div>',
1496 };
1497
1498 /**
1499 * Parse the route array and bind required components
1500 *
1501 * This changes the weForms.routes array and changes the components
1502 * so we can use weForms.routeComponents.{compontent} component.
1503 *
1504 * @param {array} routes
1505 *
1506 * @return {void}
1507 */
1508 function parseRouteComponent(routes) {
1509
1510 for (var i = 0; i < routes.length; i++) {
1511 if ( typeof routes[i].children === 'object' ) {
1512
1513 parseRouteComponent( routes[i].children );
1514
1515 if ( typeof routes[i].component !== 'undefined' ) {
1516 routes[i].component = weForms.routeComponents[ routes[i].component ];
1517 }
1518
1519 } else {
1520 routes[i].component = weForms.routeComponents[ routes[i].component ];
1521 }
1522 }
1523 }
1524
1525 // mutate the localized array
1526 parseRouteComponent(weForms.routes);
1527
1528 // 3. Create the router instance and pass the `routes` option
1529 var router = new VueRouter({
1530 routes: weForms.routes,
1531 scrollBehavior: function (to, from, savedPosition) {
1532 if (savedPosition) {
1533 return savedPosition
1534 } else {
1535 return { x: 0, y: 0 }
1536 }
1537 }
1538 });
1539
1540 window.weFormsBuilderisDirty = false;
1541
1542 router.beforeEach((to, from, next) => {
1543 // show warning if builder has unsaved changes
1544 if ( window.weFormsBuilderisDirty ) {
1545 if ( confirm( wpuf_form_builder.i18n.unsaved_changes + ' ' +wpuf_form_builder.i18n.areYouSureToLeave ) ) {
1546 window.weFormsBuilderisDirty = false;
1547 } else {
1548 next(from.path);
1549 return false;
1550 }
1551 }
1552
1553 next();
1554 });
1555
1556
1557 var app = new Vue({
1558 router: router,
1559 store: wpuf_form_builder_store
1560 }).$mount('#wpuf-contact-form-app')
1561
1562 // Admin menu hack
1563 var menuRoot = $('#toplevel_page_weforms');
1564
1565 menuRoot.on('click', 'a', function() {
1566 var self = $(this);
1567
1568 $('ul.wp-submenu li', menuRoot).removeClass('current');
1569
1570 if ( self.hasClass('wp-has-submenu') ) {
1571 $('li.wp-first-item', menuRoot).addClass('current');
1572 } else {
1573 self.parents('li').addClass('current');
1574 }
1575 });
1576
1577 $(function() {
1578
1579 // select the current sub menu on page load
1580 var current_url = window.location.href;
1581 var current_path = current_url.substr( current_url.indexOf('admin.php') );
1582
1583 $('ul.wp-submenu a', menuRoot).each(function(index, el) {
1584 if ( $(el).attr( 'href' ) === current_path ) {
1585 $(el).parent().addClass('current');
1586 return;
1587 }
1588 });
1589 });
1590
1591 })(jQuery);