← All changes | js/preview.js +138 -3 3.10.13 → 4.0.8 View file →

		@@ -1,8 +1,9 @@
1	1	/* global visualizer */
2	2	/* global console */
3	3	/* global vizSettingsHaveChanged */
4	4	/* global vizHaveSettingsChanged */
	5	+/* global wp */
5	6
6	7	(function($, v) {
7	8	var timeout;
8	9
		@@ -21,8 +22,9 @@
21	22	change: updateChart,
22	23	clear: updateChart
23	24	});
24	25	$('#settings-form textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
	26	+ initManualConfigEditor();
25	27	vizSettingsHaveChanged(false);
26	28	};
27	29
28	30	// Update google chart filter control.
		@@ -39,9 +41,107 @@
39	41	$( '#control_wrapper_canvas' ).addClass( 'no-filter' ).html('');
40	42	}
41	43	}
42	44
43		- $('#settings-button').click(function() {
	45	+ /**
	46	+ * Capture the relevant form data.
	47	+ *
	48	+ * @returns {Object} The captured form data.
	49	+ */
	50	+ function captureFormData() {
	51	+ const formData = new FormData(document.querySelector('#settings-form'));
	52	+ const featureData = {};
	53	+
	54	+ formData.forEach((value, optionKey) => {
	55	+ if (
	56	+ ! value ||
	57	+ ( ! ['permissions', 'controls', 'manual', 'lazy'].some( key => optionKey.startsWith(key) ) )
	58	+ ) {
	59	+ return;
	60	+ }
	61	+
	62	+ if ( optionKey.endsWith('[]') ) {
	63	+ if( !featureData[optionKey] ) {
	64	+ featureData[optionKey] = [];
	65	+ }
	66	+ featureData[optionKey].push(value);
	67	+ } else {
	68	+ featureData[optionKey] = value;
	69	+ }
	70	+ });
	71	+
	72	+ for (const key in featureData) {
	73	+ if (Array.isArray(featureData[key])) {
	74	+ featureData[key] = featureData[key].join(','); // We can not send arrays in the tracking data.
	75	+ }
	76	+ }
	77	+
	78	+ return featureData;
	79	+ }
	80	+
	81	+ const initialCaptureData = captureFormData();
	82	+
	83	+ /**
	84	+ * Capture feature usage.
	85	+ */
	86	+ async function trackSavedData() {
	87	+ const savedData = captureFormData();
	88	+
	89	+ // Remove default values.
	90	+ for (const key in savedData) {
	91	+
	92	+ if ( key === 'lazy_load_chart' ) {
	93	+ continue;
	94	+ }
	95	+
	96	+ if ( savedData[key] === initialCaptureData[key] ) {
	97	+ delete savedData[key];
	98	+ }
	99	+ }
	100	+
	101	+ const hasPermission = Object.keys(savedData).some(key => key.startsWith('permissions')).length > 0;
	102	+ const hasControls = Object.keys(savedData).some(key => key.startsWith('controls')).length > 0;
	103	+
	104	+ const featureData = {
	105	+ lazy: savedData.lazy_load_chart,
	106	+ permissions: hasPermission ? 'used' : 'ignored',
	107	+ controls: hasControls ? 'used' : 'ignored',
	108	+ };
	109	+
	110	+ if (savedData.manual) {
	111	+ featureData['manualConfig'] = savedData.manual;
	112	+ }
	113	+
	114	+ const urlParams = new URLSearchParams(window.location.search);
	115	+
	116	+ window?.tiTrk?.with('visualizer')?.add({
	117	+ feature: 'chart-edit',
	118	+ featureComponent: 'saved-data',
	119	+ featureData,
	120	+ groupId: urlParams.get('chart') ?? ''
	121	+ });
	122	+
	123	+ // Do not make the user to wait too long for the event to be uploaded.
	124	+ const timer = new Promise((resolve) => setTimeout(resolve, 500));
	125	+ await Promise.race([timer, window?.tiTrk?.uploadEvents()]);
	126	+ }
	127	+
	128	+ document.querySelector('#settings-button')?.addEventListener('click', async function() {
	129	+ if( typeof window.tiTrk !== 'undefined' ) {
	130	+ try {
	131	+ await trackSavedData();
	132	+ } catch (e) {
	133	+ console.warn(e);
	134	+ }
	135	+ }
	136	+
	137	+ // Get and send the chart ID (used by Visualizer Block).
	138	+ var urlParams = new URLSearchParams(window.location.search);
	139	+ var chartID = urlParams.get('chart');
	140	+ if ( chartID ) {
	141	+ window.parent.postMessage({ chartID: chartID}, '*');
	142	+ }
	143	+
44	144	$('#settings-form').submit();
45	145	});
46	146
47	147	// this portion captures if the settings have changed so that tabs can handle that information.
		@@ -74,14 +174,44 @@
74	174
75	175	function validateJSON() {
76	176	$('#visualizer-error-manual').remove();
77	177	try{
78		- var options = JSON.parse($(this).val());
	178	+ JSON.parse($(this).val());
79	179	}catch(error){
80		- $('<div class="visualizer-error" id="visualizer-error-manual">Invalid JSON: ' + error + '</div>').insertAfter($(this));
	180	+ var $after = $(this).next('.CodeMirror').length ? $(this).next('.CodeMirror') : $(this);
	181	+ $('<div class="visualizer-error" id="visualizer-error-manual">Invalid JSON: ' + error + '</div>').insertAfter($after);
81	182	}
82	183	}
83	184
	185	+ function initManualConfigEditor() {
	186	+ var $textarea = $('textarea[name="manual"]');
	187	+ if (!$textarea.length || $textarea.data('cm-initialized')) return;
	188	+
	189	+ var CodeMirrorLib = (typeof wp !== 'undefined' && wp.CodeMirror) ? wp.CodeMirror : null;
	190	+ if (!CodeMirrorLib) return;
	191	+
	192	+ $textarea.data('cm-initialized', true);
	193	+
	194	+ var cm = CodeMirrorLib.fromTextArea($textarea.get(0), {
	195	+ mode: 'application/json',
	196	+ lineNumbers: true,
	197	+ lineWrapping: true,
	198	+ matchBrackets: true,
	199	+ autoCloseBrackets: true
	200	+ });
	201	+
	202	+ // Refresh when any sidebar group is expanded so line numbers render correctly
	203	+ // (CodeMirror can't measure gutter width while the container is hidden).
	204	+ $(document).on('click.vizManualConfig', '.viz-group-title', function() {
	205	+ setTimeout(function() { cm.refresh(); }, 50);
	206	+ });
	207	+
	208	+ cm.on('change', function() {
	209	+ cm.save();
	210	+ $textarea.trigger('change');
	211	+ });
	212	+ }
	213	+
84	214	$('.control-text').change(updateChart).keyup(updateChart);
85	215	$('.control-select, .control-checkbox, .control-check').change(updateChart);
86	216	$('.color-picker-hex').wpColorPicker({
87	217	change: updateChart,
		@@ -87,8 +217,13 @@
87	217	change: updateChart,
88	218	clear: updateChart
89	219	});
90	220	$('textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
	221	+ initManualConfigEditor();
	222	+
	223	+ $(document).on('change', 'input[name="paging_bool"], input[name="pagination"]', function() {
	224	+ $('.viz-pagination-options').toggle($(this).is(':checked'));
	225	+ });
91	226
92	227	});
93	228	})(jQuery, visualizer);
94	229