# weforms/1.4.3/assets/spa/components/form-builder/index.js
weForms – Easy Drag & Drop Contact Form Builder For WordPress, version 1.4.3. 368 lines.
- Page: https://pluginprobe.com/plugins/weforms/1.4.3/code/assets/spa/components/form-builder/index.js
- Raw: https://pluginprobe.com/plugins/weforms/1.4.3/raw/assets/spa/components/form-builder/index.js
- Modified: 2019-11-18T04:29:52+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/weforms/1.4.3/code/assets/spa/components/form-builder/index.js#L10-L20`.
```javascript
weForms.routeComponents.FormEditComponent = {
template: '#tmpl-wpuf-form-builder',
mixins: wpuf_form_builder_mixins(wpuf_mixins.root),
data: function() {
return {
is_form_saving: false,
is_form_saved: false,
is_form_switcher: false,
post_title_editing: false,
loading: false,
activeTab: 'editor',
activeSettingsTab: 'form',
activePaymentTab: 'paypal',
};
},
watch: {
loading: function(value) {
if ( value ) {
NProgress.configure({ parent: '#wpadminbar' });
NProgress.start();
} else {
NProgress.done();
}
},
form_fields: {
handler: function() {
window.weFormsBuilderisDirty = true;
},
deep: true
},
notifications: {
handler: function() {
window.weFormsBuilderisDirty = true;
},
deep: true
},
integrations: {
handler: function() {
window.weFormsBuilderisDirty = true;
},
deep: true
},
settings: {
handler: function() {
window.weFormsBuilderisDirty = true;
},
deep: true
},
payment: {
handler: function() {
window.weFormsBuilderisDirty = true;
},
deep: true
},
},
created: function() {
this.set_current_panel('form-fields');
this.fetchForm();
this.$store.commit('panel_add_show_prop');
/**
* This is the event hub we'll use in every
* component to communicate between them
*/
wpuf_form_builder.event_hub = new Vue();
},
computed: {
current_panel: function () {
return this.$store.state.current_panel;
},
post: function () {
return this.$store.state.post;
},
form_fields_count: function () {
return this.$store.state.form_fields.length;
},
form_fields: function () {
return this.$store.state.form_fields;
},
notifications: function() {
return this.$store.state.notifications;
},
integrations: function() {
return this.$store.state.integrations;
},
settings: function() {
return this.$store.state.settings;
},
payment: function() {
return this.$store.state.payment;
}
},
mounted: function () {
var clipboard = new window.Clipboard('.form-id');
$(".form-id").tooltip();
var self = this;
this.started = true;
clipboard.on('success', function(e) {
// Show copied tooltip
$(e.trigger)
.attr('data-original-title', 'Copied!')
.tooltip('show');
// Reset the copied tooltip
setTimeout(function() {
$(e.trigger).tooltip('hide')
.attr('data-original-title', self.i18n.copy_shortcode);
}, 1000);
e.clearSelection();
});
this.initSharingClipBoard();
setTimeout(function(){
window.weFormsBuilderisDirty = false;
},500);
window.onbeforeunload = function () {
if ( window.weFormsBuilderisDirty ) {
return self.i18n.unsaved_changes;
}
};
},
methods: {
makeActive: function(val) {
this.activeTab = val;
},
isActiveTab: function(val) {
return this.activeTab === val;
},
isActiveSettingsTab: function(val) {
return this.activeSettingsTab === val;
},
makeActiveSettingsTab: function(val) {
this.activeSettingsTab = val;
},
isActivePaymentTab: function(val) {
return this.activePaymentTab === val;
},
makeActivePaymentTab: function(val) {
this.activePaymentTab = val;
},
fetchForm: function() {
var self = this;
self.loading = true;
wp.ajax.send( 'weforms_get_form', {
data: {
form_id: this.$route.params.id,
_wpnonce: weForms.nonce
},
success: function(response) {
self.$store.commit('set_form_post', response.post);
self.$store.commit('set_form_fields', response.form_fields);
self.$store.commit('set_form_notification', response.notifications);
self.$store.commit('set_form_settings', response.settings);
// if nothing saved in the form, it provides an empty array
// but we expect to be an object
if ( response.integrations.length !== undefined ) {
self.$store.commit('set_form_integrations', {});
} else {
self.$store.commit('set_form_integrations', response.integrations);
}
},
error: function(error) {
alert(error);
},
complete: function() {
self.loading = false;
}
});
},
// set current sidebar panel
set_current_panel: function (panel) {
this.$store.commit('set_current_panel', panel);
},
// save form builder data
save_form_builder: function () {
var self = this;
if (_.isFunction(this.validate_form_before_submit) && !this.validate_form_before_submit()) {
this.warn({
text: this.validation_error_msg
});
return;
}
self.is_form_saving = true;
self.set_current_panel('form-fields');
wp.ajax.send('wpuf_form_builder_save_form', {
data: {
form_data: $('#wpuf-form-builder').serialize(),
form_fields: JSON.stringify(self.form_fields),
notifications: JSON.stringify(self.notifications),
settings: JSON.stringify(self.settings),
payment: JSON.stringify(self.payment),
integrations: JSON.stringify(self.integrations),
},
success: function (response) {
if (response.form_fields) {
self.$store.commit('set_form_fields', response.form_fields);
}
self.is_form_saving = false;
self.is_form_saved = true;
setTimeout(function(){
window.weFormsBuilderisDirty = false;
},500);
toastr.success(self.i18n.saved_form_data);
},
error: function () {
self.is_form_saving = false;
}
});
},
save_settings: function () {
toastr.options.preventDuplicates = true;
this.save_form_builder();
},
shareForm: function( site_url, post ) {
var self = this;
if( self.settings.sharing_on === 'on'){
var post_link = site_url + '?weforms=' + btoa( self.getSharingHash() + '_' + Math.floor(Date.now() / 1000) + '_' + post.ID);
swal({
title: self.i18n.shareYourForm,
html: ''+self.i18n.shareYourFormText+'
',
showCloseButton: true,
showCancelButton: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
confirmButtonColor: '#d54e21',
confirmButtonText: self.i18n.disableSharing,
cancelButtonText: self.i18n.close,
focusCancel: true,
}).then(function () {
swal({
title: self.i18n.areYouSure,
html: ""+self.i18n.areYouSureDesc+"
",
type: 'info',
confirmButtonColor: '#d54e21',
showCancelButton: true,
confirmButtonText: self.i18n.disable,
cancelButtonText: self.i18n.cancel,
}).then(function () {
self.disableSharing();
});
});
} else {
swal({
title: self.i18n.shareYourForm,
html: self.i18n.shareYourFormDesc,
type: 'info',
showCancelButton: true,
confirmButtonText: 'Enable',
cancelButtonText: 'Cancel',
}).then(function () {
self.enableSharing(site_url, post);
});
}
},
enableSharing: function(site_url, post){
this.settings.sharing_on = 'on';
this.save_settings();
this.shareForm(site_url, post);
},
disableSharing: function(){
this.settings.sharing_on = false;
this.save_settings();
},
getSharingHash: function(){
if( ! this.settings.sharing_hash ) {
this.settings.sharing_hash = this.makeRandomString(8);
this.save_settings();
}
return this.settings.sharing_hash;
},
makeRandomString: function(limit) {
limit = limit || 8;
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < limit; i++){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
},
initSharingClipBoard: function(val) {
var clipboard2 = new window.Clipboard('.anonymous-share-btn');
$(".anonymous-share-btn").tooltip();
clipboard2.on('success', function(e) {
// Show copied tooltip
$(e.trigger)
.attr('data-original-title', 'Copied!')
.tooltip('show');
// Reset the copied tooltip
setTimeout(function() {
$(e.trigger).tooltip('hide')
.attr('data-original-title', 'Copy URL');
}, 1000);
e.clearSelection();
});
},
}
};
```