← All changes | js/preview.js +5 -157 4.0.5 → 3.7.9 View file →

		@@ -1,9 +1,8 @@
1	1	/* global visualizer */
2	2	/* global console */
3	3	/* global vizSettingsHaveChanged */
4	4	/* global vizHaveSettingsChanged */
5		-/* global wp */
6	5
7	6	(function($, v) {
8	7	var timeout;
9	8
		@@ -22,126 +21,12 @@
22	21	change: updateChart,
23	22	clear: updateChart
24	23	});
25	24	$('#settings-form textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
26		- initManualConfigEditor();
27	25	vizSettingsHaveChanged(false);
28	26	};
29	27
30		- // Update google chart filter control.
31		- window.vizUpdateFilterControl = function() {
32		- $( '#control_wrapper_canvas' ).removeClass( 'no-filter' );
33		- var controlsOpt = $( '.vz-controls-opt' ).map(
34		- function() {
35		- var val = $(this).val();
36		- return '' !== val && 'false' !== val ? val : false ;
37		- }
38		- ).get();
39		- controlsOpt = controlsOpt.filter( function(el) { return el; } );
40		- if ( controlsOpt.length === 0 ) {
41		- $( '#control_wrapper_canvas' ).addClass( 'no-filter' ).html('');
42		- }
43		- }
44		-
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		-
	28	+ $('#settings-button').click(function() {
144	29	$('#settings-form').submit();
145	30	});
146	31
147	32	// this portion captures if the settings have changed so that tabs can handle that information.
		@@ -156,14 +41,12 @@
156	41	};
157	42	// this portion captures if the settings have changed so that tabs can handle that information.
158	43
159	44	function updateChart() {
160		- vizUpdateFilterControl();
161	45	clearTimeout(timeout);
162	46	timeout = setTimeout(function() {
163	47	var settings = $('#settings-form').serializeObject();
164		- settings = JSON.stringify( settings ).replace( /<\/?[^>]+(>|$)/g, '' );
165		- settings = JSON.parse( settings );
	48	+
166	49	delete settings['width'];
167	50	delete settings['height'];
168	51
169	52	v.charts.canvas.settings = settings;
		@@ -168,50 +51,20 @@
168	51
169	52	v.charts.canvas.settings = settings;
170	53	$('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
171	54	vizSettingsHaveChanged(true);
172		- }, 1500);
	55	+ }, 1000);
173	56	}
174	57
175	58	function validateJSON() {
176	59	$('#visualizer-error-manual').remove();
177	60	try{
178		- JSON.parse($(this).val());
	61	+ var options = JSON.parse($(this).val());
179	62	}catch(error){
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);
	63	+ $('<div class="visualizer-error" id="visualizer-error-manual">Invalid JSON: ' + error + '</div>').insertAfter($(this));
182	64	}
183	65	}
184	66
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		-
214	67	$('.control-text').change(updateChart).keyup(updateChart);
215	68	$('.control-select, .control-checkbox, .control-check').change(updateChart);
216	69	$('.color-picker-hex').wpColorPicker({
217	70	change: updateChart,
		@@ -217,13 +70,8 @@
217	70	change: updateChart,
218	71	clear: updateChart
219	72	});
220	73	$('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		- });
226	74
227	75	});
228	76	})(jQuery, visualizer);
229	77