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

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