PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.2.0
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.2.0
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.0, at assets/js/spa-app.js

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