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 / spa-app.js

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

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