← All changes | js/preview.js +193 -7 3.0.9 → 4.0.8 View file →

		@@ -1,43 +1,229 @@
1	1	/* global visualizer */
2	2	/* global console */
	3	+/* global vizSettingsHaveChanged */
	4	+/* global vizHaveSettingsChanged */
	5	+/* global wp */
	6	+
3	7	(function($, v) {
4	8	var timeout;
5	9
6	10	$(document).ready(function() {
7		- $('#settings-button').click(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	+
8	144	$('#settings-form').submit();
9	145	});
10	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	+
11	159	function updateChart() {
	160	+ vizUpdateFilterControl();
12	161	clearTimeout(timeout);
13	162	timeout = setTimeout(function() {
14	163	var settings = $('#settings-form').serializeObject();
15		-
	164	+ settings = JSON.stringify( settings ).replace( /<\/?[^>]+(>|$)/g, '' );
	165	+ settings = JSON.parse( settings );
16	166	delete settings['width'];
17	167	delete settings['height'];
18	168
19	169	v.charts.canvas.settings = settings;
20		- v.render();
21		- }, 1000);
	170	+ $('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
	171	+ vizSettingsHaveChanged(true);
	172	+ }, 1500);
22	173	}
23	174
24	175	function validateJSON() {
25	176	$('#visualizer-error-manual').remove();
26	177	try{
27		- var options = JSON.parse($(this).val());
	178	+ JSON.parse($(this).val());
28	179	}catch(error){
29		- $('<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);
30	182	}
31	183	}
32	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	+
33	214	$('.control-text').change(updateChart).keyup(updateChart);
34		- $('.control-select, .control-checkbox').change(updateChart);
	215	+ $('.control-select, .control-checkbox, .control-check').change(updateChart);
35	216	$('.color-picker-hex').wpColorPicker({
36	217	change: updateChart,
37	218	clear: updateChart
38	219	});
39	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	+ });
40	226
41	227	});
42	228	})(jQuery, visualizer);
43	229