← All changes | js/preview.js +4 -207 4.0.5 → 1.4 View file →

		@@ -1,230 +1,27 @@
1		-/* global visualizer */
2		-/* global console */
3		-/* global vizSettingsHaveChanged */
4		-/* global vizHaveSettingsChanged */
5		-/* global wp */
6		-
7	1	(function($, v) {
8	2	var timeout;
9	3
10	4	$(document).ready(function() {
11		- // when data is impported using csv/url, update the hidden data and the advanced settings sidebar.
12		- // editor and sidebar are both JSON objects
13		- window.vizUpdateHTML = function( editor, sidebar ) {
14		- $('.viz-simple-editor').remove();
15		- $('#content').append(editor.html);
16		- $('#settings-form .viz-group').remove();
17		- $('#settings-form').append(sidebar.html);
18		-
19		- $('#settings-form .control-text').change(updateChart).keyup(updateChart);
20		- $('#settings-form .control-select, #settings-form .control-checkbox, #settings-form .control-check').change(updateChart);
21		- $('#settings-form .color-picker-hex').wpColorPicker({
22		- change: updateChart,
23		- clear: updateChart
24		- });
25		- $('#settings-form textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
26		- initManualConfigEditor();
27		- vizSettingsHaveChanged(false);
28		- };
29		-
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		-
144		- $('#settings-form').submit();
145		- });
146		-
147		- // this portion captures if the settings have changed so that tabs can handle that information.
148		- var viz_settings_have_changed = false;
149		-
150		- window.vizHaveSettingsChanged = function(){
151		- return viz_settings_have_changed;
152		- };
153		-
154		- window.vizSettingsHaveChanged = function(value){
155		- viz_settings_have_changed = value;
156		- };
157		- // this portion captures if the settings have changed so that tabs can handle that information.
158		-
159	5	function updateChart() {
160		- vizUpdateFilterControl();
161	6	clearTimeout(timeout);
162	7	timeout = setTimeout(function() {
163	8	var settings = $('#settings-form').serializeObject();
164		- settings = JSON.stringify( settings ).replace( /<\/?[^>]+(>|$)/g, '' );
165		- settings = JSON.parse( settings );
	9	+
166	10	delete settings['width'];
167	11	delete settings['height'];
168	12
169	13	v.charts.canvas.settings = settings;
170		- $('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
171		- vizSettingsHaveChanged(true);
172		- }, 1500);
	14	+ v.render();
	15	+ }, 1000);
173	16	}
174	17
175		- function validateJSON() {
176		- $('#visualizer-error-manual').remove();
177		- try{
178		- JSON.parse($(this).val());
179		- }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);
182		- }
183		- }
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		-
214	18	$('.control-text').change(updateChart).keyup(updateChart);
215		- $('.control-select, .control-checkbox, .control-check').change(updateChart);
	19	+ $('.control-select, .control-checkbox').change(updateChart);
216	20	$('.color-picker-hex').wpColorPicker({
217	21	change: updateChart,
218	22	clear: updateChart
219	23	});
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		- });
226		-
227	24	});
228	25	})(jQuery, visualizer);
229	26
230	27	(function($) {