PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.2.0
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.2.0
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
← All changes | js/frame.js +80 -552 4.0.73.2.0 View file →
@@ -1,45 +1,19 @@
1 1 /* global prompt */
2 2 /* global visualizer */
3 3 /* global alert */
4 -/* global confirm */
5 4 /* global ajaxurl */
6 5 /* global CodeMirror */
7 -/* global vizHaveSettingsChanged */
8 6
9 7 (function ($) {
10 8 $(window).on('load', function(){
11 - let chart_select = $('#chart-select');
12 - if(chart_select.length > 0){
13 - // scroll to the selected chart type.
14 - $('#chart-select')[0].scrollIntoView();
9 + // scroll to the selected chart type.
10 + if($('label.type-label.type-label-selected').length > 0) {
11 + $('label.type-label.type-label-selected')[0].scrollIntoView();
15 12 }
16 13 });
17 14
18 15 $(document).ready(function () {
19 - onReady();
20 - });
21 -
22 - function initTabs(){
23 - $( "#sidebar" ).lock();
24 - $( "#viz-tabs" ).tabs({
25 - create: function( event, ui ) {
26 - $(this).addClass('done');
27 - $( "#sidebar" ).unlock();
28 - },
29 - beforeActivate: function( event, ui ) {
30 - // if settings have changed in tab #2 and tab #1 is being activated, warn the user.
31 - if(vizHaveSettingsChanged() && ui.newTab.find( 'a' ).attr( 'id' ).includes('viz-tab-basic')){
32 - return confirm(visualizer.l10n.save_settings);
33 - }
34 - }
35 - });
36 - }
37 -
38 - function onReady() {
39 - initAccessibility();
40 - initTabs();
41 -
42 16 // open the correct source tab/sub-tab.
43 17 var source = $('#visualizer-chart-id').attr('data-chart-source');
44 18 $('li.viz-group.' + source).addClass('open');
45 19 $('li.viz-group.' + source + ' span.viz-section-title.' + source).addClass('open');
@@ -73,13 +47,24 @@
73 47
74 48 $('.type-radio').change(function () {
75 49 $('.type-label-selected').removeClass('type-label-selected');
76 50 $(this).parent().addClass('type-label-selected');
77 - updateTypeAriaChecked();
78 51 });
79 52
80 - // collapse other open sections of this group
81 - $(document).on('click', '.viz-group-title', function () {
53 + $('#vz-chart-settings h2').click(function () {
54 + $("#vz-chart-source").hide();
55 + $("#vz-chart-permissions").removeClass('open').addClass('bottom-fixed');
56 + $(this).parent().removeClass('bottom-fixed').addClass('open');
57 + $("#vz-chart-permissions .viz-group-header").hide();
58 + return false;
59 + });
60 + $('#vz-chart-settings .customize-section-back').click(function () {
61 + $("#vz-chart-source").show();
62 + $(this).parent().parent().removeClass('open').addClass('bottom-fixed');
63 +
64 + return false;
65 + });
66 + $('.viz-group-title').click(function () {
82 67 var parent = $(this).parent();
83 68
84 69 if (parent.hasClass('open')) {
85 70 parent.removeClass('open');
@@ -86,35 +71,14 @@
86 71 } else {
87 72 parent.parent().find('.viz-group.open').removeClass('open');
88 73 parent.addClass('open');
89 74 }
90 -
91 - /*
92 - * if the user wants to perform an action and click that tab to change the source
93 - * and the chart is no longer showing because that particular LHS screen is showing
94 - * e.g. create parameters, import json, db query box etc.
95 - * we need to make sure we cancel the current process WITHOUT saving
96 - * and then show the chart as it was
97 - * let's close the LHS window and show the chart that is hidden
98 - */
99 - $('body').trigger('visualizer:change:action');
100 - updateGroupAriaState($(this));
101 75 });
102 -
103 - // collapse other open subsections of this section
104 - $(document).on('click', '.viz-section-title', function () {
105 - var grandparent = $(this).parent().parent();
106 - grandparent.find('.viz-section-title.open').not(this).each(function () {
107 - $(this).removeClass('open').siblings('.viz-section-items').hide();
108 - });
109 - updateSectionAriaState($(this));
110 - });
111 -
112 76 $('#view-remote-file').click(function () {
113 - var url = $(this).parent().find('#vz-schedule-url').val();
77 + var url = $(this).parent().find('#remote-data').val();
114 78
115 79 if (url !== '') {
116 - if (url.indexOf('localhost') !== -1 || /^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)) {
80 + if (/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)) {
117 81 if (url.substr(url.length - 8) === '/pubhtml') {
118 82 url = url.substring(0, url.length - 8) + '/export?format=csv';
119 83 }
120 84
@@ -133,17 +97,17 @@
133 97 $(this).parent().submit();
134 98 }
135 99 });
136 100
137 - $( window ).on( 'load', function() {
101 + $('#thehole').load(function () {
138 102 $('#canvas').unlock();
139 - } );
103 + });
140 104
141 - $(document).on('click', '.viz-section-title', function () {
105 + $('.viz-section-title').click(function () {
142 106 $(this).toggleClass('open').parent().find('.viz-section-items').toggle();
143 107 });
144 108
145 - $(document).on('click', '.more-info', function () {
109 + $('.more-info').click(function () {
146 110 $(this).parent().find('.viz-section-description:first').toggle();
147 111 return false;
148 112 });
149 113
@@ -150,235 +114,45 @@
150 114 $('#cancel-button').click(function () {
151 115 $('#cancel-form').submit();
152 116 });
153 117
154 - init_available_chart_list();
118 + });
155 119
156 - $('.viz-abort').on('click', function(e){
157 - e.preventDefault();
158 - window.parent.postMessage('visualizer:mediaframe:close', '*');
159 - });
120 + function init_permissions(){
121 + $('#vz-chart-permissions h2').click(function () {
122 + $("#vz-chart-source").hide();
123 + $("#vz-chart-permissions .viz-group-header").show();
124 + $("#vz-chart-settings").removeClass('open').addClass('bottom-fixed');
160 125
161 - }
126 + $('#settings-button').click(function(e) {
127 + e.preventDefault();
128 + $('#permissions-form').submit();
129 + $('#settings-form').submit();
130 + });
162 131
163 - function initAccessibility(){
164 - // Chart type picker: treat tiles as radios with keyboard support.
165 - var $typePicker = $('#type-picker');
166 - if($typePicker.length){
167 - $typePicker.attr('role', 'radiogroup');
168 - $('.type-label').each(function(){
169 - var $label = $(this);
170 - var $input = $label.find('input[type="radio"]');
171 - $label.attr('tabindex', '0').attr('role', 'radio');
172 - if($input.length){
173 - $label.attr('aria-checked', $input.is(':checked') ? 'true' : 'false');
174 - }else{
175 - $label.attr('aria-disabled', 'true');
176 - }
177 - });
178 - $(document).on('keydown', '.type-label', function(e){
179 - if(e.key === 'Enter' || e.key === ' '){
180 - e.preventDefault();
181 - var $label = $(this);
182 - var $input = $label.find('input[type="radio"]');
183 - if($input.length){
184 - $input.prop('checked', true).trigger('change');
185 - }
186 - }
187 - });
188 - }
132 + $(this).parent().removeClass('bottom-fixed').addClass('open');
189 133
190 - // Collapsible groups: add button roles + keyboard activation.
191 - $('.viz-group-title').each(function(index){
192 - var $title = $(this);
193 - $title.attr('role', 'button').attr('tabindex', '0');
194 - var $content = $title.siblings('.viz-group-content');
195 - if($content.length){
196 - if(!$content.attr('id')){
197 - $content.attr('id', 'viz-group-content-' + index);
198 - }
199 - $title.attr('aria-controls', $content.attr('id'));
200 - updateGroupAriaState($title);
201 - }
134 + return false;
202 135 });
203 - $(document).on('keydown', '.viz-group-title', function(e){
204 - if(e.key === 'Enter' || e.key === ' '){
205 - e.preventDefault();
206 - $(this).trigger('click');
207 - }
208 - });
136 + $('#vz-chart-permissions .customize-section-back').click(function () {
137 + $("#vz-chart-source").show();
209 138
210 - // Subsections in source panel.
211 - $('.viz-section-title').each(function(index){
212 - var $title = $(this);
213 - $title.attr('role', 'button').attr('tabindex', '0');
214 - var $items = $title.siblings('.viz-section-items');
215 - if($items.length){
216 - if(!$items.attr('id')){
217 - $items.attr('id', 'viz-section-items-' + index);
218 - }
219 - $title.attr('aria-controls', $items.attr('id'));
220 - updateSectionAriaState($title);
221 - }
222 - });
223 - $(document).on('keydown', '.viz-section-title', function(e){
224 - if(e.key === 'Enter' || e.key === ' '){
139 + $("#vz-chart-permissions .viz-group-header").hide();
140 + $('#settings-button').click(function(e) {
225 141 e.preventDefault();
226 - $(this).trigger('click');
227 - }
228 - });
229 - }
230 -
231 - function updateTypeAriaChecked(){
232 - $('.type-label').each(function(){
233 - var $label = $(this);
234 - var $input = $label.find('input[type="radio"]');
235 - if($input.length){
236 - $label.attr('aria-checked', $input.is(':checked') ? 'true' : 'false');
237 - }
238 - });
239 - }
240 -
241 - function updateGroupAriaState($title){
242 - if(!$title || $title.length === 0){
243 - return;
244 - }
245 - var isOpen = $title.parent().hasClass('open');
246 - $title.attr('aria-expanded', isOpen ? 'true' : 'false');
247 - }
248 -
249 - function updateSectionAriaState($title){
250 - if(!$title || $title.length === 0){
251 - return;
252 - }
253 - var isOpen = $title.hasClass('open');
254 - $title.attr('aria-expanded', isOpen ? 'true' : 'false');
255 - }
256 -
257 - /**
258 - * Initialize/Update the available chart list based on their supported renderer libraries.
259 - *
260 - * @returns {void}
261 - */
262 - function init_available_chart_list() {
263 - const rendererSelect = document.querySelector('select.viz-select-library');
264 - if ( ! rendererSelect ) {
265 - return;
266 - }
267 -
268 - const rendererTypesMappingData = rendererSelect?.getAttribute('data-type-vs-library');
269 - if( ! rendererTypesMappingData ) {
270 - return;
271 - }
272 -
273 - /** @type {Record<string, ('GoogleCharts' | 'ChartJS' | 'DataTable')[]>} */
274 - const rendererTypesMapping = JSON.parse( rendererTypesMappingData );
275 -
276 - document.querySelectorAll('input.type-radio').forEach( chartTypeRadio => {
277 -
278 - // Init the lib based on the default selected chart type.
279 - if ( chartTypeRadio.checked ) {
280 - const chartType = chartTypeRadio.value;
281 - if ( ! chartType ) {
282 - return;
283 - }
284 -
285 - const selectedRenderer = rendererSelect.value;
286 - if ( ! rendererTypesMapping[chartType]?.includes( selectedRenderer ) ) {
287 - disable_renderer_select_placeholder();
288 - rendererSelect.value = rendererTypesMapping[chartType][0]
289 - }
290 - }
291 -
292 - chartTypeRadio.addEventListener('click', (event) => {
293 - // Check if the chart type is supported by the selected renderer. If not, select the first supported renderer.
294 - const chartType = event.target.value;
295 - if ( ! chartType ) {
296 - return;
297 - }
298 -
299 - const selectedRenderer = rendererSelect.value;
300 - if ( ! rendererTypesMapping[chartType]?.includes( selectedRenderer ) ) {
301 - disable_renderer_select_placeholder();
302 - rendererSelect.value = rendererTypesMapping[chartType][0]
303 - }
142 + $('#settings-form').submit();
304 143 });
305 - });
306 144
307 - // Update the chart list on user interaction.
308 - rendererSelect.addEventListener('change', (event) => {
309 - disable_renderer_select_placeholder();
310 - toggle_renderer_type( event.target.value );
311 - toggle_chart_types_by_render( event.target.value );
312 - });
145 + $(this).parent().parent().removeClass('open').addClass('bottom-fixed');
313 146
314 - }
315 -
316 - /**
317 - * Disable the placeholder option in the renderer select.
318 - */
319 - function disable_renderer_select_placeholder() {
320 - const placeholderOption = document.querySelector('#library-select-placeholder');
321 - if ( placeholderOption && placeholderOption.disabled === false ) {
322 - placeholderOption.disabled = true;
323 - }
324 - }
325 -
326 - /**
327 - * Toggle the renderer type class based on the given renderer type.
328 - *
329 - * The class is used to style the chart type picker based on the given renderer library.
330 - *
331 - * @param {('GoogleCharts' | 'ChartJS' | 'DataTable')} rendererType The renderer type to toggle the class.
332 - */
333 - function toggle_renderer_type( rendererType ) {
334 - const typePicker = document.querySelector('#type-picker');
335 - if ( ! typePicker ) {
336 - return;
337 - }
338 -
339 - typePicker.classList.remove('lib-GoogleCharts', 'lib-ChartJS', 'lib-DataTable');
340 - typePicker.classList.add(`lib-${rendererType}`);
341 - }
342 -
343 - /**
344 - * Toggle chart types based on the given renderer type.
345 - *
346 - * @param {('GoogleCharts' | 'ChartJS' | 'DataTable')} rendererType The renderer type to filter the chart types.
347 - */
348 - function toggle_chart_types_by_render( rendererType ) {
349 - document.querySelectorAll('.type-box').forEach( typeBox => {
350 - const hasLib = typeBox.classList.contains(`type-lib-${rendererType}`);
351 - typeBox.classList.toggle('viz-hidden', ! hasLib );
352 -
353 - // Reset unavailable chart type selection.
354 - const chartOption = typeBox.querySelector('input[type="radio"]');
355 - if ( ! hasLib && chartOption?.checked ) {
356 - chartOption.checked = false;
357 - }
147 + return false;
358 148 });
359 149
360 - enable_libraries_for($('input.type-radio:checked').val(), $typeVsLibrary);
361 - }
362 -
363 - function enable_libraries_for($type, $typeVsLibrary) {
364 - $('select.viz-select-library option').addClass('disabled').attr('disabled', 'disabled');
365 - $('select.viz-select-library option .premium-label').remove();
366 - $('select.viz-select-library option').append('<span class="premium-label"> (PREMIUM)</span>');
367 - var $libs = $typeVsLibrary[$type];
368 - $.each($libs, function( i, $lib ) {
369 - $('select.viz-select-library option[value="' + $lib + '"]').removeClass('disabled').removeAttr('disabled');
370 - $('select.viz-select-library option[value="' + $lib + '"] .premium-label').remove();
371 - });
372 - $('select.viz-select-library').val( $('select.viz-select-library option:not(.disabled)').val() );
373 - }
374 -
375 - function init_permissions(){
376 150 $('.visualizer-permission').chosen({
377 151 width : '50%',
378 152 search_contains : true
379 153 });
380 -
154 +
381 155 $('.visualizer-permission-type').each(function(x, y){
382 156 var type = $(y).attr('data-visualizer-permission-type');
383 157 var child = $('.visualizer-permission-' + type + '-specific');
384 158 if($(y).val() === 'all'){
@@ -385,9 +159,9 @@
385 159 child.next('div.chosen-container').hide();
386 160 return;
387 161 }
388 162 });
389 -
163 +
390 164 $('.visualizer-permission-type').on('change', function(evt, params) {
391 165 var type = $(this).attr('data-visualizer-permission-type');
392 166 var child = $('.visualizer-permission-' + type + '-specific');
393 167 child.empty();
@@ -430,9 +204,9 @@
430 204 lineWrapping: true,
431 205 dragDrop: false,
432 206 matchBrackets: true,
433 207 autoCloseBrackets: true,
434 - extraKeys: {"Shift-Space": "autocomplete"},
208 + extraKeys: {"Ctrl-Space": "autocomplete"},
435 209 hintOptions: { tables: table_columns }
436 210 });
437 211
438 212 // force refresh so that the query shows on first time load. Otherwise you have to click on the editor for it to show.
@@ -440,9 +214,9 @@
440 214 cm.refresh();
441 215 });
442 216
443 217 cm.focus();
444 -
218 +
445 219 // update text area.
446 220 cm.on('inputRead', function(x, y){
447 221 cm.save();
448 222 });
@@ -451,27 +225,13 @@
451 225 // from the editor. Let's force this.
452 226 $('body').on('visualizer:db:query:update', function(event, data){
453 227 cm.save();
454 228 });
455 -
456 - // clear the editor.
457 - $('body').on('visualizer:db:query:setvalue', function(event, data){
458 - cm.setValue(data.value);
459 - cm.clearHistory();
460 - cm.refresh();
461 - });
462 -
463 - // set an option at runtime?
464 - $('body').on('visualizer:db:query:changeoption', function(event, data){
465 - cm.setOption(data.name, data.value);
466 - });
467 229 }
468 230
469 231 function init_filter_import() {
470 232 $( '#db-filter-save-button' ).on( 'click', function(){
471 233 $('#vz-filter-wizard').submit();
472 - $( '#vz-wp-sync-options' ).hide();
473 - $( '#vz-wp-sync-btn' ).attr( 'aria-expanded', false );
474 234 });
475 235 }
476 236
477 237 function init_db_import(){
@@ -478,36 +238,8 @@
478 238 $( '#visualizer-db-query' ).css("z-index", "-1").hide();
479 239
480 240 init_db_import_component();
481 241
482 - var settings_button = document.querySelector( '#settings-button' );
483 - if ( settings_button ) {
484 - settings_button.addEventListener( 'click', function( event ){
485 - $('body').trigger('visualizer:db:query:update', {});
486 - if( $( '#db-chart-button' ).attr( 'data-current' ) !== 'filter' || $( '.visualizer-db-query' ).val().length === 0 ){
487 - return;
488 - }
489 -
490 - event.preventDefault();
491 - event.stopImmediatePropagation();
492 -
493 - var query_saved = false;
494 - var resume_save = function(){
495 - query_saved = true;
496 - settings_button.click();
497 - };
498 -
499 - $('body').one( 'visualizer:render:currentchart:update', resume_save );
500 - $( '#thehole' ).one( 'load', function(){
501 - $('body').off( 'visualizer:render:currentchart:update', resume_save );
502 - if ( ! query_saved ) {
503 - $( '#db-chart-button' ).trigger( 'click' );
504 - }
505 - } );
506 - $( '#db-chart-button' ).trigger( 'click' );
507 - }, true );
508 - }
509 -
510 242 $('#visualizer-query-fetch').on('click', function(e){
511 243
512 244 $('body').trigger('visualizer:db:query:update', {});
513 245 if($('.visualizer-db-query').val() === ''){
@@ -512,9 +244,9 @@
512 244 $('body').trigger('visualizer:db:query:update', {});
513 245 if($('.visualizer-db-query').val() === ''){
514 246 return;
515 247 }
516 -
248 +
517 249 start_ajax($('#visualizer-db-query'));
518 250 $('.db-wizard-results').empty();
519 251 $('.db-wizard-error').empty();
520 252 $.ajax({
@@ -541,19 +273,9 @@
541 273 });
542 274 });
543 275
544 276 $( '#db-chart-button' ).on( 'click', function(){
545 -
546 - $('body').off('visualizer:change:action').on('visualizer:change:action', function(e){
547 - var filter_button = $( '#db-chart-button' );
548 - $( '#visualizer-db-query' ).css("z-index", "-1").hide();
549 - filter_button.val( filter_button.attr( 'data-t-chart' ) );
550 - filter_button.html( filter_button.attr( 'data-t-chart' ) );
551 - filter_button.attr( 'data-current', 'chart' );
552 - $( '#canvas' ).css("z-index", "1").show();
553 - });
554 -
555 - $('#content').css('width', 'calc(100% - 350px)');
277 + $('#content').css('width', 'calc(100% - 300px)');
556 278 if( $(this).attr( 'data-current' ) === 'chart'){
557 279 $(this).val( $(this).attr( 'data-t-filter' ) );
558 280 $(this).html( $(this).attr( 'data-t-filter' ) );
559 281 $(this).attr( 'data-current', 'filter' );
@@ -572,40 +294,15 @@
572 294 $( '#db-chart-save-button' ).trigger('click');
573 295 }
574 296 } );
575 297
576 - $( document ).on( 'click', '#vz-db-sync-btn', function(){
577 - var $options = $( '#vz-db-sync-options' );
578 - var isOpen = $options.is( ':visible' );
579 - $options.toggle();
580 - $( this ).attr( 'aria-expanded', ! isOpen );
581 - } );
582 -
583 - $( document ).on( 'click', '#vz-wp-sync-btn', function(){
584 - var $options = $( '#vz-wp-sync-options' );
585 - var isOpen = $options.is( ':visible' );
586 - $options.toggle();
587 - $( this ).attr( 'aria-expanded', ! isOpen );
588 - } );
589 -
590 298 $( '#db-chart-save-button' ).on( 'click', function(){
591 - // submit only if a query has been provided.
592 - if($('#db-query-form .visualizer-db-query').val().length > 0){
593 - $('#viz-db-wizard-params').val($('#db-query-form').serialize());
594 - $('#vz-db-wizard').submit();
595 - $( '#vz-db-sync-options' ).hide();
596 - $( '#vz-db-sync-btn' ).attr( 'aria-expanded', false );
597 - }else{
598 - $('#canvas').unlock();
599 - }
299 + $('#viz-db-wizard-params').val($('#db-query-form').serialize());
300 + $('#vz-db-wizard').submit();
600 301 });
601 302 }
602 303
603 304 function init_json_import(){
604 - if(typeof visualizer === 'undefined'){
605 - return;
606 - }
607 -
608 305 var regex = new RegExp(visualizer.json_tag_separator, 'g');
609 306
610 307 $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
611 308 $('.visualizer-json-form').accordion({
@@ -611,73 +308,31 @@
611 308 $('.visualizer-json-form').accordion({
612 309 heightStyle: 'content',
613 310 active: 0
614 311 });
615 - $('.visualizer-json-subform').accordion({
616 - heightStyle: 'content',
617 - active: false,
618 - collapsible: true
619 - });
620 312
621 - // open the accordions by default if they are indicated with the 'open' class.
622 - $('.visualizer-json-subform .viz-substep.open').each(function(i, e){
623 - $('.visualizer-json-subform').accordion( "option", "active", i );
624 - });
625 -
626 313 // toggle between chart and create/modify parameters
627 - $( '#json-chart-button, #woo-chart-button' ).on( 'click', function(){
628 -
629 - $('body').off('visualizer:change:action').on('visualizer:change:action', function(e){
630 - var filter_button = $( '#json-chart-button, #woo-chart-button' );
631 - $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
632 - filter_button.val( filter_button.attr( 'data-t-chart' ) );
633 - filter_button.html( filter_button.attr( 'data-t-chart' ) );
634 - filter_button.attr( 'data-current', 'chart' );
635 - $( '#canvas' ).css("z-index", "1").show();
636 - $( '#vz-import-woo-report' ).find( 'select, input' ).removeAttr( 'disabled' );
637 - });
638 -
639 - if ( 'json-chart-button' === $( this ).attr( 'id' ) ) {
640 - $( '#vz-import-woo-report' ).find( 'select, input' ).attr( 'disabled', true );
641 - } else {
642 - $( '#vz-import-woo-report' ).find( 'select, input' ).removeAttr( 'disabled' );
643 - }
644 - $('#content').css('width', 'calc(100% - 100px)');
314 + $( '#json-chart-button' ).on( 'click', function(){
315 + $('#content').css('width', 'calc(100% - 300px)');
645 316 if( $(this).attr( 'data-current' ) === 'chart'){
646 - // toggle from chart to LHS form
647 317 $(this).val( $(this).attr( 'data-t-filter' ) );
648 318 $(this).html( $(this).attr( 'data-t-filter' ) );
649 319 $(this).attr( 'data-current', 'filter' );
650 320 $( '.visualizer-editor-lhs' ).hide();
651 321 $( '#visualizer-json-screen' ).css("z-index", "9999").show();
652 - if ( 'woo-chart-button' === $( this ).attr( 'id' ) && '' !== $( '#vz-woo-source:visible' ).val() ) {
653 - $( '#vz-import-json-url' ).val( visualizer.rest_base + $( '#vz-woo-source' ).val() ).attr( 'readonly', true );
654 - } else {
655 - if ( 'undefined' !== $( '#vz-import-json-url' ).attr( 'readonly' ) ) {
656 - $( '#vz-import-json-url' ).val( '' ).removeAttr( 'readonly' ).removeAttr( 'value' );
657 - $('#json-endpoint-form')[0].reset();
658 - $('.visualizer-json-form h3.viz-step:not(.step1)').addClass('ui-state-disabled');
659 - }
660 - }
661 322 $( '#canvas' ).hide();
662 323 }else{
663 - // toggle from LHS form to chart
664 - $( '#json-conclude-form' ).trigger('submit');
324 + var filter_button = $(this);
325 + $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
326 + $('#canvas').lock();
327 + filter_button.val( filter_button.attr( 'data-t-chart' ) );
328 + filter_button.html( filter_button.attr( 'data-t-chart' ) );
329 + filter_button.attr( 'data-current', 'chart' );
330 + $( '#canvas' ).css("z-index", "1").show();
331 + $('#canvas').unlock();
665 332 }
666 333 } );
667 334
668 - $('body').on('visualizer:json:form:submit', function() {
669 - var filter_button = $( '#json-chart-button, #woo-chart-button' );
670 - $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
671 - $('#canvas').lock();
672 - filter_button.val( filter_button.attr( 'data-t-chart' ) );
673 - filter_button.html( filter_button.attr( 'data-t-chart' ) );
674 - filter_button.attr( 'data-current', 'chart' );
675 - end_ajax( $( '#visualizer-json-screen' ) );
676 - $( '#canvas' ).removeClass('visualizer-chart-loaded').css("z-index", "1").show();
677 - });
678 -
679 -
680 335 // fetch the roots for the provided endpoint
681 336 $( '#visualizer-json-fetch' ).on( 'click', function(e){
682 337 e.preventDefault();
683 338 $('.visualizer-json-form').accordion( 'option', 'active', 0 );
@@ -693,8 +348,9 @@
693 348 'params' : $('#json-endpoint-form').serialize()
694 349 },
695 350 success : function(data){
696 351 if(data.success){
352 + $('#json-root-form [name="url"]').val(data.data.url);
697 353 $('#vz-import-json-root').empty();
698 354 $.each(data.data.roots, function(i, name){
699 355 $('#vz-import-json-root').append('<option value="' + name + '">' + name.replace(regex, visualizer.json_tag_separator_view) + '</option>');
700 356 });
@@ -700,9 +356,9 @@
700 356 });
701 357 $('#json-root-form').fadeIn('medium');
702 358 json_accordion_activate(1, true);
703 359 }else{
704 - alert(data.data.msg);
360 + alert(visualizer.l10n.json_error);
705 361 }
706 362 },
707 363 complete: function(){
708 364 end_ajax($('#visualizer-json-screen'));
@@ -721,9 +377,9 @@
721 377 method : 'post',
722 378 data : {
723 379 'action' : visualizer.ajax['actions']['json_get_data'],
724 380 'security' : visualizer.ajax['nonces']['json_get_data'],
725 - 'params' : $('#json-root-form, #json-endpoint-form').serialize()
381 + 'params' : $('#json-root-form').serialize()
726 382 },
727 383 success : function(data){
728 384 if(data.success){
729 385 $('#vz-import-json-paging option:not(.static)').remove();
@@ -735,8 +391,10 @@
735 391 $('#vz-import-json-paging').append('<option value="' + name + '">' + display + '</option>');
736 392 });
737 393 $('.json-pagination').show();
738 394 }
395 + $('#json-conclude-form [name="url"]').val(data.data.url);
396 + $('#json-conclude-form [name="root"]').val(data.data.root);
739 397 $('#json-conclude-form .json-table').html(data.data.table);
740 398
741 399 var $table = create_editor_table( '#json-conclude-form' );
742 400
@@ -743,9 +401,9 @@
743 401 json_accordion_activate(3, true);
744 402 json_accordion_activate(2, false);
745 403 $table.columns.adjust().draw();
746 404 }else{
747 - alert(data.data.msg);
405 + alert(visualizer.l10n.json_error);
748 406 }
749 407 },
750 408 complete: function(){
751 409 end_ajax($('#visualizer-json-screen'));
@@ -754,33 +412,20 @@
754 412 });
755 413
756 414 // when the data is set and the chart is updated, toggle the screen so that the chart is shown
757 415 $('#json-conclude-form').on( 'submit', function(e){
758 - // at least one column has to be selected as non-excluded.
759 - var count_selected = 0;
760 - $('select.viz-select-data-type').each(function(i, element){
761 - if($(element).prop('selectedIndex') > 0){
762 - count_selected++;
763 - }
764 - });
765 - if(count_selected === 0){
766 - alert(visualizer.l10n.select_columns);
767 - return false;
768 - }
769 -
770 - // populate the form elements that are in the other tabs.
771 - $('#json-conclude-form-helper .json-form-element, #json-endpoint-form .json-form-element, #json-root-form .json-form-element, #vz-import-json .json-form-element, #vz-import-woo-report .json-form-element:not(:disabled)').each(function(x, y){
416 + // populate the form elements that are in the misc tab.
417 + $('#json-conclude-form-helper .json-form-element').each(function(x, y){
772 418 $('#json-conclude-form').append('<input type="hidden" name="' + y.name + '" value="' + y.value + '">');
773 419 });
774 -
775 - $('body').trigger('visualizer:json:form:submit');
420 + $( '#json-chart-button' ).trigger('click');
421 + $('#canvas').lock();
776 422 });
777 423
778 424 // update the schedule
779 - $('#json-chart-save-button, #woo-chart-save-button').on('click', function(e){
425 + $('#json-chart-save-button').on('click', function(e){
780 426 e.preventDefault();
781 427 $('#canvas').lock();
782 - var btnID = jQuery( this ).attr( 'id' );
783 428 $.ajax({
784 429 url : ajaxurl,
785 430 method : 'post',
786 431 data : {
@@ -785,11 +430,10 @@
785 430 method : 'post',
786 431 data : {
787 432 'action' : visualizer.ajax['actions']['json_set_schedule'],
788 433 'security' : visualizer.ajax['nonces']['json_set_schedule'],
789 - 'chart' : $('#vz-json-time, #vz-woo-time').attr('data-chart'),
790 - 'time' : $('#vz-json-time, #vz-woo-time').val(),
791 - 'is_woocommerce_report': 'woo-chart-save-button' === btnID,
434 + 'chart' : $('#vz-json-time').attr('data-chart'),
435 + 'time' : $('#vz-json-time').val()
792 436 },
793 437 success : function(data){
794 438 // do nothing.
795 439 },
@@ -798,25 +442,13 @@
798 442 }
799 443 });
800 444 });
801 445
802 - // Select WooCommerce report endpoint.
803 - $( '#vz-woo-source' ).on( 'click', function( e ) {
804 - // Trigger change action.
805 - $( 'body' ).trigger( 'visualizer:change:action' );
806 -
807 - if ( '' !== $( this ).val() ) {
808 - $( '#woo-chart-button, #woo-chart-save-button' ).removeAttr( 'disabled' );
809 - } else {
810 - $( '#woo-chart-button, #woo-chart-save-button' ).attr( 'disabled', true );
811 - }
812 - } );
813 -
814 446 }
815 447
816 448 function init_editor_table() {
817 449 $('body').on('visualizer:db:editor:table:init', function(event, data){
818 - var $table = create_editor_table('.viz-table-editor', data.config);
450 + var $table = create_editor_table('.viz-table-editor');
819 451 $('body').on('visualizer:db:editor:table:redraw', function(event, data){
820 452 $table.draw();
821 453 });
822 454 });
@@ -821,9 +453,9 @@
821 453 });
822 454 });
823 455 }
824 456
825 - function create_editor_table(element, config) {
457 + function create_editor_table(element) {
826 458 var settings = {
827 459 paging: false,
828 460 searching: false,
829 461 ordering: false,
@@ -837,9 +469,9 @@
837 469 };
838 470
839 471 // show column visibility button only when more than 6 columns are found (including the Label column)
840 472 if($(element + ' table.viz-editor-table thead tr th').length > 6){
841 - $.extend( settings, {
473 + $.extend( settings, {
842 474 dom: 'Bt',
843 475 buttons: [
844 476 {
845 477 extend: 'colvis',
@@ -848,13 +480,11 @@
848 480 }
849 481 ]
850 482 } );
851 483 }
852 - if(config){
853 - $.extend( settings, config );
854 - }
855 484
856 - var $table = $(element + ' .viz-editor-table').DataTable(settings);
485 + $.extend( $.fn.dataTable.defaults, settings );
486 + var $table = $(element + ' .viz-editor-table').DataTable();
857 487 return $table;
858 488 }
859 489
860 490 function json_accordion_activate($step, $activate){
@@ -920,107 +550,5 @@
920 550 });
921 551
922 552 return $(this);
923 553 };
924 -
925 - // Telemetry
926 - function getChartID() {
927 - const urlParams = new URLSearchParams(window.location.search);
928 - return urlParams.get('chart') ?? '';
929 - }
930 -
931 - const groupId = getChartID();
932 -
933 - const chartTypes = document.querySelector('#viz-types-form')
934 - if( chartTypes ) {
935 - document.querySelector('.push-right[type=submit]')?.addEventListener('click', async function (event) {
936 - if ( typeof window.tiTrk !== 'undefined' ) {
937 - event.preventDefault();
938 - try {
939 - const formData = new FormData(document.querySelector('#viz-types-form'));
940 - const savedData = Object.fromEntries(formData);
941 -
942 - tiTrk?.with('visualizer')?.add({
943 - feature: 'chart-create',
944 - featureComponent: 'saved-data',
945 - featureData: {
946 - type: savedData?.['type'],
947 - library: savedData?.['chart-library']
948 - },
949 - groupId
950 - });
951 -
952 - // Do not make the user to wait too long for the event to be uploaded.
953 - const timer = new Promise((resolve) => setTimeout(resolve, 500));
954 - await Promise.race([timer, tiTrk?.uploadEvents()]);
955 - } catch (e) {
956 - console.warn(e);
957 - }
958 - $('#viz-types-form').submit();
959 - }
960 - });
961 - }
962 -
963 - [
964 - {
965 - selector: '#editor-button',
966 - featureComponent: 'source-manual-data'
967 - },
968 - {
969 - selector: '#vz-import-file',
970 - featureComponent: 'source-import-csv-file'
971 - },
972 - {
973 - selector: '#vz-save-schedule',
974 - featureComponent: 'source-import-csv-remote'
975 - },
976 - {
977 - selector: '#visualizer-json-fetch',
978 - featureComponent: 'source-import-json-remote'
979 - },
980 - {
981 - selector: '#existing-chart',
982 - featureComponent: 'source-import-chart'
983 - },
984 - {
985 - selector: '#filter-chart-button',
986 - featureComponent: 'source-import-wordpress',
987 - },
988 - {
989 - selector: '#woo-chart-button',
990 - featureComponent: 'source-import-woocommerce'
991 - },
992 - {
993 - selector: '#db-chart-button',
994 - featureComponent: 'source-import-database'
995 - }
996 - ].forEach(({ selector, featureComponent }) => {
997 - document.querySelector(selector)?.addEventListener('click', function () {
998 - window?.tiTrk?.with('visualizer')?.set('used-source',{
999 - feature: 'chart-edit-used-source',
1000 - featureComponent,
1001 - groupId
1002 - });
1003 - });
1004 - });
1005 -})(jQuery);
1006 -
1007 -
1008 -document.querySelector('#viz-copy-shortcode')?.addEventListener('click', function() {
1009 - var copyText = document.querySelector('#viz-shortcode')?.value;
1010 - if ( !copyText ) {
1011 - return;
1012 - }
1013 -
1014 - navigator.clipboard.writeText(copyText);
1015 - alert(visualizer.l10n.copied);
1016 -});
1017 -
1018 -// Connect Chart Backend Title Info Panel with the field from the settings form.
1019 -const interactiveBackendTitleField = document.querySelector( '#viz-backend-name' );
1020 -const backendTitleSave = document.querySelector( '#settings-form input[name="backend-title"]' );
1021 -
1022 -if ( interactiveBackendTitleField && backendTitleSave ) {
1023 - interactiveBackendTitleField.addEventListener('input', function() {
1024 - backendTitleSave.value = this.value;
1025 - });
1026 -}
554 +})(jQuery);