surveyjs / views / editor.php

editor.php in SurveyJS: Drag & Drop Form Builder trunk, at views/editor.php

219 lines 12.1 KB

Raw Download Zip

1	<?php
2	if ( ! defined( 'ABSPATH' ) ) exit;
3	include_once( __DIR__ . "/../service_client.php");
4
5	class SurveyJS_Editor {
6
7	function __construct() {
8	}
9
10	public static function render() {
11	$surveyId = sanitize_key($_GET['id']);
12	global $wpdb;
13	$row = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}sjs_my_surveys WHERE id = %d", intval($surveyId) ) );
14	$json = isset($row->json) ? $row->json : '{}';
15	$themeJson = isset($row->theme) ? $row->theme : null;
16
17	$decodedJson = SurveyJS_Client::decode_survey_json( $json );
18	$surveyJsonText = empty( $decodedJson ) ? "{}" : wp_json_encode( $decodedJson );
19
20	$decodedTheme = SurveyJS_Client::decode_survey_json( $themeJson );
21	$themeJsonText = empty( $decodedTheme ) ? "" : wp_json_encode( $decodedTheme );
22
23	$saveSurveyUri = add_query_arg(array('action' => 'SurveyJS_SaveSurvey'), admin_url('admin-ajax.php'));
24	$renameSurveyUri = add_query_arg(array('action' => 'SurveyJS_RenameSurvey'), admin_url('admin-ajax.php'));
25	$uploadFileUri = add_query_arg(array('action' => 'SurveyJS_UploadFile'), admin_url('admin-ajax.php'));
26	$saveSurveyNonce = wp_create_nonce('surveyjs-save-survey');
27	$renameSurveyNonce = wp_create_nonce('surveyjs-rename-survey');
28	$uploadFileNonce = wp_create_nonce('surveyjs-upload-file');
29	$lk = SurveyJS_SettingsPage::get_license_key();
30	?>
31	<style>
32	/* #sjs-editor-container .svd_container .card {
33	max-width: none;
34	}
35	#sjs-editor-container .svd_container select {
36	height: 34px;
37	line-height: 20px;
38	padding: 6px 12px;
39	} */
40	</style>
41	<script>
42	var surveyName = "<?php echo esc_js( sanitize_text_field($_GET['name']) ); ?>";
43	function setSurveyName(name) {
44	var $titleTitle = jQuery("#sjs_editor_title_show");
45	$titleTitle.find("span").text(name);
46	}
47	function startEdit() {
48	var $titleEditor = jQuery("#sjs_editor_title_edit");
49	var $titleTitle = jQuery("#sjs_editor_title_show");
50	$titleTitle.hide();
51	$titleEditor.show();
52	$titleEditor.find("input")[0].value = surveyName;
53	$titleEditor.find("input").focus();
54	}
55	function cancelEdit() {
56	var $titleEditor = jQuery("#sjs_editor_title_edit");
57	var $titleTitle = jQuery("#sjs_editor_title_show");
58	$titleEditor.hide();
59	$titleTitle.show();
60	}
61	function postEdit() {
62	cancelEdit();
63	var oldName = surveyName;
64	var $titleEditor = jQuery("#sjs_editor_title_edit");
65	surveyName = $titleEditor.find("input")[0].value;
66
67	setSurveyName(surveyName);
68
69	jQuery.ajax({
70	url: "<?php echo esc_url($renameSurveyUri) ?>",
71	type: "POST",
72	data: { Id: '<?php echo intval($surveyId); ?>', Name: surveyName, _wpnonce: '<?php echo esc_js($renameSurveyNonce); ?>' },
73	success: function (data) {
74	// if(data.isSuccess) {
75	// }
76	}
77	});
78	}
79	</script>
80	<div class="wrap">
81	<div class="survey-page-header">
82	<div class="sv_main survey-page-header-content">
83	<button style="min-width: 80px;color: white;background-color: #1ab394;border: none;padding: 6px;border-radius: 5px;margin-top: 10px;" onclick="window.location = '/wp-admin/admin.php?page=surveyjs-main-menu'">&lt&nbspBack</button>
84	</div>
85	</div>
86	<h2 style="display:inline-block;"><?php esc_html_e( 'Survey: ', 'surveyjs' ); ?></h2>
87	<h3 style="display:inline-block; margin: 0;">
88	<span id="sjs_editor_title_edit" style="display: none;">
89	<input style="border-top: none; border-left: none; border-right: none; outline: none;"/>
90	<a class="btn btn-success" onclick="postEdit()" href="#" style="margin:5px; margin-top: -5px; background-color: #1ab394; border-color: #1ab394;">Update</a>
91	<a class="btn btn-warning" onclick="cancelEdit()" href="#" style="margin:5px; margin-top: -5px;">Cancel</a>
92	</span>
93	<span id="sjs_editor_title_show">
94	<span style="padding-top: 1px; height: 39px; display: inline-block;"></span>
95	<a href="#" class="edit-survey-name" onclick="startEdit()" title="Change Name">
96	<img class="edit-icon" src="<?php echo esc_url( plugins_url( '../images/Edit_12x12.svg', __FILE__ ) ); ?>" style="width:24px; height:24px; margin-top: -5px;" />
97	</a>
98	</span>
99	</h3>
100	<div id="sjs-editor-container" style="height: 77vh;"></div>
101	<script type="text/babel">
102	function SurveyCreatorRenderComponent() {
103	var lk = '<?php echo esc_js( $lk ); ?>';
104	Survey.slk(lk);
105	var editorOptions = { showThemeTab: true, showLogicTab: true, showTranslationTab: true, showEmbededSurveyTab: false, showOptions: true, generateValidJSON : false };
106	const editor = new SurveyCreator.SurveyCreator(editorOptions);
107	editor.showState = true;
108	editor.isAutoSave = true;
109	editor.saveSurveyFunc = function(saveNo, callback) {
110	var json = JSON.stringify(editor.getSurveyJSON());
111	var theme = JSON.stringify(editor.theme);
112	jQuery.ajax({
113	url: "<?php echo esc_url($saveSurveyUri) ?>",
114	type: "POST",
115	data: { Id: '<?php echo intval($surveyId); ?>', Json: json, Theme: theme, _wpnonce: '<?php echo esc_js($saveSurveyNonce); ?>' },
116	success: function (data) {
117	// if(data.isSuccess) {
118	// }
119	callback(saveNo, data.IsSuccess === 1);
120	}
121	});
122	};
123	editor.saveThemeFunc = function(saveNo, callback) {
124	var json = JSON.stringify(editor.getSurveyJSON());
125	var theme = JSON.stringify(editor.theme);
126	jQuery.ajax({
127	url: "<?php echo esc_url($saveSurveyUri) ?>",
128	type: "POST",
129	data: { Id: '<?php echo intval($surveyId); ?>', Json: json, Theme: theme, _wpnonce: '<?php echo esc_js($saveSurveyNonce); ?>' },
130	success: function (data) {
131	// if(data.isSuccess) {
132	// }
133	callback(saveNo, data.IsSuccess === 1);
134	}
135	});
136	};
137	editor.onUploadFile.add(function(editor, options) {
138	var formData = new FormData();
139	options.files.forEach(function(file) {
140	formData.append("file", file);
141	});
142	formData.append("_wpnonce", "<?php echo esc_js($uploadFileNonce); ?>");
143	jQuery.ajax({
144	url: "<?php echo esc_url($uploadFileUri) ?>",
145	type: "POST",
146	xhr: function () {
147	var myXhr = jQuery.ajaxSettings.xhr();
148	if (myXhr.upload) {
149	myXhr.upload.addEventListener('progress', function (event) {
150	var percent = 0;
151	var position = event.loaded \|\| event.position;
152	var total = event.total;
153	}, false);
154	}
155	return myXhr;
156	},
157	success: function (data) {
158	options.callback("success", data["url"]);
159	},
160	error: function (error) {
161	},
162	async: true,
163	data: formData,
164	cache: false,
165	contentType: false,
166	processData: false,
167	timeout: 60000
168	});
169	});
170	editor.onSurveyInstanceCreated.add(function(creatot, options) {
171	const reason = options.reason;
172	const survey = options.survey;
173	if (reason === "test" \|\| reason === "theme") {
174	survey.getAllQuestions().forEach((q)=>{q.storeDataAsText = true});
175	}
176	})
177	const creator = editor;
178	// wp_json_encode() safely escapes quotes
179	var json = <?php echo wp_json_encode( $surveyJsonText ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
180	creator.text = json;
181	//creator.JSON = surveyJSON;
182	<?php if ( "" !== $themeJsonText ): ?>
183	const themeJSON = <?php echo wp_json_encode( $themeJsonText ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
184	if (themeJSON) {
185	creator.theme = JSON.parse(themeJSON);
186	}
187	<?php endif; ?>
188	return (<SurveyCreator.SurveyCreatorComponent creator={creator} />);
189	}
190
191	const container = document.getElementById("sjs-editor-container");
192
193	const shadowRoot = container.attachShadow({ mode: 'open' });
194	const rootElement = document.createElement("div");
195	rootElement.classList.add("sjs-editor-shadow-root");
196	rootElement.style.height = "100%";
197	const style = document.createElement("style");
198	const surveyStyles = document.createElement('link');
199	surveyStyles.setAttribute('rel', 'stylesheet');
200	surveyStyles.setAttribute('href', <?php echo wp_json_encode( plugins_url('../libs/library/survey-core.min.css', __FILE__) ); ?>);
201	const creatorStyles = document.createElement('link');
202	creatorStyles.setAttribute('rel', 'stylesheet');
203	creatorStyles.setAttribute('href', <?php echo wp_json_encode( plugins_url('../libs/creator/survey-creator-core.min.css', __FILE__) ); ?>);
204	shadowRoot.appendChild(surveyStyles);
205	shadowRoot.appendChild(creatorStyles);
206	shadowRoot.appendChild(rootElement);
207
208	const root = ReactDOM.createRoot(rootElement);
209	root.render(<SurveyCreatorRenderComponent />);
210	</script>
211	</div>
212	<script>
213	setSurveyName(surveyName);
214	</script>
215	<?php
216	}
217	}
218
219	?>