fluentform / resources / assets / admin / components / settings / FormCustomCssJs.vue

FormCustomCssJs.vue in Fluent Forms – Customizable Contact Forms, Survey, Quiz, & Conversational Form Builder 3.6.61, at resources/assets/admin/components/settings/FormCustomCssJs.vue

130 lines 5.4 KB

Raw Download Zip

1	<template>
2	<div class="custom_css_js">
3
4	<el-row class="setting_header">
5	<el-col :md="12">
6	<h2> {{ $t('Custom CSS and JS') }}</h2>
7	</el-col>
8	<el-col :md="12" class="action-buttons clearfix mb15 text-right">
9	<el-button v-loading="saving" @click="saveSettings()" class="payform_action" size="small"
10	type="primary">
11	{{ $t( 'Save CSS and JS' ) }}
12	</el-button>
13	</el-col>
14	</el-row>
15
16	<div v-loading="fetching" class="edit_form_warpper">
17	<div class="all_payforms_wrapper payform_section">
18	<div class="payform_section_body">
19	<div class="wpf_settings_section">
20	<div class="sub_section_header">
21	<h3>Custom CSS</h3>
22	<p>You can write your custom CSS here for this form. This css will be applied in this
23	current form only.</p>
24	</div>
25	<hr/>
26	<div v-if="!fetching" class="sub_section_body">
27	<p>You may add <code>.fluent_form_{{form_id}} </code> as your css selector prefix to
28	target this specific form. Alternatively, you can use <code>.fluent_form_FF_ID</code> where <b>FF_ID</b> will be replaced with your form id dynamically</p>
29	<ace-editor-css editor_id="wpf_custom_css" mode="css" v-model="custom_css"/>
30	<br/>
31	<span>Please don't include <code><style></style></code> tag</span>
32	</div>
33	</div>
34
35	<div class="wpf_settings_section">
36	<div class="sub_section_header">
37	<h3>Custom Javascript</h3>
38	<p>Your additional JS code will run after this form initialized. Please provide valid
39	javascript code. Invalid JS code may break the Form.</p>
40	</div>
41	<hr/>
42	<div v-if="!fetching" class="sub_section_body">
43	<div class="js_instruction">
44	The Following Javascript variables are available that you can use:<br />
45	<b>$form</b>: The Javascript (jQuery) DOM object of the Form
46	</div>
47	<br/>
48	<ace-editor-js editor_id="wpf_custom_js" mode="javascript" v-model="custom_js"/>
49	<br/>
50	<span>Please don't include <code><script></script></code> tag</span>
51	</div>
52	</div>
53	</div>
54	</div>
55	</div>
56	</div>
57	</template>
58
59	<script type="text/babel">
60	import AceEditorCss from '../../../common/_ace_editor_css';
61	import AceEditorJs from '../../../common/_ace_editor_js';
62
63	export default {
64	name: 'custom_css_js',
65	components: {
66	AceEditorCss,
67	AceEditorJs
68	},
69	props: ['form_id'],
70	data() {
71	return {
72	fetching: false,
73	saving: false,
74	custom_css: '',
75	custom_js: ''
76	}
77	},
78	methods: {
79	fetchSettings() {
80	this.fetching = true;
81	jQuery.get(window.ajaxurl, {
82	action: 'fluentform-get-form-custom_css_js',
83	form_id: this.form_id
84	})
85	.then(response => {
86	this.custom_css = response.data.custom_css;
87	this.custom_js = response.data.custom_js;
88	})
89	.fail(error => {
90	this.$showAjaxError(error);
91	})
92	.always(() => {
93	this.fetching = false;
94	});
95	},
96	saveSettings() {
97	this.saving = true;
98	jQuery.post(window.ajaxurl, {
99	action: 'fluentform-save-form-custom_css_js',
100	form_id: this.form_id,
101	custom_css: this.custom_css,
102	custom_js: this.custom_js
103	})
104	.then(response => {
105	this.$notify.success(response.data.message);
106	})
107	.fail(error => {
108	this.$showAjaxError(error);
109	})
110	.always(() => {
111	this.saving = false;
112	});
113	},
114	$showAjaxError(error) {
115	if (error.responseJSON && error.responseJSON.message) {
116	this.$notify.error(error.responseJSON.message);
117	} else if (error.responseText) {
118	this.$notify.error(error.responseText);
119	} else {
120	this.$notify.error('Something is wrong when doing ajax request! Please try again');
121	}
122	}
123	},
124	mounted() {
125	this.fetchSettings();
126	jQuery('head title').text('Custom CSS & JS - Fluent Forms');
127	}
128	}
129	</script>
130