← All changes | js/preview.js +154 -5 3.0.6 → 3.11.10 View file →

		@@ -1,25 +1,174 @@
1	1	/* global visualizer */
2	2	/* global console */
	3	+/* global vizSettingsHaveChanged */
	4	+/* global vizHaveSettingsChanged */
	5	+
3	6	(function($, v) {
4	7	var timeout;
5	8
6	9	$(document).ready(function() {
7		- $('#settings-button').click(function() {
	10	+ // when data is impported using csv/url, update the hidden data and the advanced settings sidebar.
	11	+ // editor and sidebar are both JSON objects
	12	+ window.vizUpdateHTML = function( editor, sidebar ) {
	13	+ $('.viz-simple-editor').remove();
	14	+ $('#content').append(editor.html);
	15	+ $('#settings-form .viz-group').remove();
	16	+ $('#settings-form').append(sidebar.html);
	17	+
	18	+ $('#settings-form .control-text').change(updateChart).keyup(updateChart);
	19	+ $('#settings-form .control-select, #settings-form .control-checkbox, #settings-form .control-check').change(updateChart);
	20	+ $('#settings-form .color-picker-hex').wpColorPicker({
	21	+ change: updateChart,
	22	+ clear: updateChart
	23	+ });
	24	+ $('#settings-form textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
	25	+ vizSettingsHaveChanged(false);
	26	+ };
	27	+
	28	+ // Update google chart filter control.
	29	+ window.vizUpdateFilterControl = function() {
	30	+ $( '#control_wrapper_canvas' ).removeClass( 'no-filter' );
	31	+ var controlsOpt = $( '.vz-controls-opt' ).map(
	32	+ function() {
	33	+ var val = $(this).val();
	34	+ return '' !== val && 'false' !== val ? val : false ;
	35	+ }
	36	+ ).get();
	37	+ controlsOpt = controlsOpt.filter( function(el) { return el; } );
	38	+ if ( controlsOpt.length === 0 ) {
	39	+ $( '#control_wrapper_canvas' ).addClass( 'no-filter' ).html('');
	40	+ }
	41	+ }
	42	+
	43	+ /**
	44	+ * Capture the relevant form data.
	45	+ *
	46	+ * @returns {Object} The captured form data.
	47	+ */
	48	+ function captureFormData() {
	49	+ const formData = new FormData(document.querySelector('#settings-form'));
	50	+ const featureData = {};
	51	+
	52	+ formData.forEach((value, optionKey) => {
	53	+ if (
	54	+ ! value ||
	55	+ ( ! ['permissions', 'controls', 'manual', 'lazy'].some( key => optionKey.startsWith(key) ) )
	56	+ ) {
	57	+ return;
	58	+ }
	59	+
	60	+ if ( optionKey.endsWith('[]') ) {
	61	+ if( !featureData[optionKey] ) {
	62	+ featureData[optionKey] = [];
	63	+ }
	64	+ featureData[optionKey].push(value);
	65	+ } else {
	66	+ featureData[optionKey] = value;
	67	+ }
	68	+ });
	69	+
	70	+ for (const key in featureData) {
	71	+ if (Array.isArray(featureData[key])) {
	72	+ featureData[key] = featureData[key].join(','); // We can not send arrays in the tracking data.
	73	+ }
	74	+ }
	75	+
	76	+ return featureData;
	77	+ }
	78	+
	79	+ const initialCaptureData = captureFormData();
	80	+
	81	+ /**
	82	+ * Capture feature usage.
	83	+ */
	84	+ async function trackSavedData() {
	85	+ const savedData = captureFormData();
	86	+
	87	+ // Remove default values.
	88	+ for (const key in savedData) {
	89	+
	90	+ if ( key === 'lazy_load_chart' ) {
	91	+ continue;
	92	+ }
	93	+
	94	+ if ( savedData[key] === initialCaptureData[key] ) {
	95	+ delete savedData[key];
	96	+ }
	97	+ }
	98	+
	99	+ const hasPermission = Object.keys(savedData).some(key => key.startsWith('permissions')).length > 0;
	100	+ const hasControls = Object.keys(savedData).some(key => key.startsWith('controls')).length > 0;
	101	+
	102	+ const featureData = {
	103	+ lazy: savedData.lazy_load_chart,
	104	+ permissions: hasPermission ? 'used' : 'ignored',
	105	+ controls: hasControls ? 'used' : 'ignored',
	106	+ };
	107	+
	108	+ if (savedData.manual) {
	109	+ featureData['manualConfig'] = savedData.manual;
	110	+ }
	111	+
	112	+ const urlParams = new URLSearchParams(window.location.search);
	113	+
	114	+ window?.tiTrk?.with('visualizer')?.add({
	115	+ feature: 'chart-edit',
	116	+ featureComponent: 'saved-data',
	117	+ featureData,
	118	+ groupId: urlParams.get('chart') ?? ''
	119	+ });
	120	+
	121	+ // Do not make the user to wait too long for the event to be uploaded.
	122	+ const timer = new Promise((resolve) => setTimeout(resolve, 500));
	123	+ await Promise.race([timer, window?.tiTrk?.uploadEvents()]);
	124	+ }
	125	+
	126	+ document.querySelector('#settings-button')?.addEventListener('click', async function() {
	127	+ if( typeof window.tiTrk !== 'undefined' ) {
	128	+ try {
	129	+ await trackSavedData();
	130	+ } catch (e) {
	131	+ console.warn(e);
	132	+ }
	133	+ }
	134	+
	135	+ // Get and send the chart ID (used by Visualizer Block).
	136	+ var urlParams = new URLSearchParams(window.location.search);
	137	+ var chartID = urlParams.get('chart');
	138	+ if ( chartID ) {
	139	+ window.parent.postMessage({ chartID: chartID}, '*');
	140	+ }
	141	+
8	142	$('#settings-form').submit();
9	143	});
10	144
	145	+ // this portion captures if the settings have changed so that tabs can handle that information.
	146	+ var viz_settings_have_changed = false;
	147	+
	148	+ window.vizHaveSettingsChanged = function(){
	149	+ return viz_settings_have_changed;
	150	+ };
	151	+
	152	+ window.vizSettingsHaveChanged = function(value){
	153	+ viz_settings_have_changed = value;
	154	+ };
	155	+ // this portion captures if the settings have changed so that tabs can handle that information.
	156	+
11	157	function updateChart() {
	158	+ vizUpdateFilterControl();
12	159	clearTimeout(timeout);
13	160	timeout = setTimeout(function() {
14	161	var settings = $('#settings-form').serializeObject();
15		-
	162	+ settings = JSON.stringify( settings ).replace( /<\/?[^>]+(>|$)/g, '' );
	163	+ settings = JSON.parse( settings );
16	164	delete settings['width'];
17	165	delete settings['height'];
18	166
19	167	v.charts.canvas.settings = settings;
20		- v.render();
21		- }, 1000);
	168	+ $('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
	169	+ vizSettingsHaveChanged(true);
	170	+ }, 1500);
22	171	}
23	172
24	173	function validateJSON() {
25	174	$('#visualizer-error-manual').remove();
		@@ -30,9 +179,9 @@
30	179	}
31	180	}
32	181
33	182	$('.control-text').change(updateChart).keyup(updateChart);
34		- $('.control-select, .control-checkbox').change(updateChart);
	183	+ $('.control-select, .control-checkbox, .control-check').change(updateChart);
35	184	$('.color-picker-hex').wpColorPicker({
36	185	change: updateChart,
37	186	clear: updateChart
38	187	});