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
visualizer / js / frame.js

frame.js in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.2.0, at js/frame.js

554 lines 22.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* global prompt */
2 /* global visualizer */
3 /* global alert */
4 /* global ajaxurl */
5 /* global CodeMirror */
6
7 (function ($) {
8 $(window).on('load', function(){
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();
12 }
13 });
14
15 $(document).ready(function () {
16 // open the correct source tab/sub-tab.
17 var source = $('#visualizer-chart-id').attr('data-chart-source');
18 $('li.viz-group.' + source).addClass('open');
19 $('li.viz-group.' + source + ' span.viz-section-title.' + source).addClass('open');
20 $('li.viz-group.' + source + ' span.viz-section-title.' + source + '.open').parent().find('div.viz-section-items').show();
21
22 init_permissions();
23
24 if(typeof visualizer !== 'undefined' && visualizer.is_pro) {
25 init_db_import();
26 init_filter_import();
27 }
28
29 init_json_import();
30
31 init_editor_table();
32
33 // update the manual configuation link to point to the correct chart type.
34 var type = $('#visualizer-chart-id').attr('data-chart-type');
35 var chart_type_in_api_link = type + 'chart';
36 switch (type) {
37 case "gauge":
38 case "table":
39 case "timeline":
40 chart_type_in_api_link = type;
41 break;
42 }
43
44 if($('span.viz-gvlink').length > 0) {
45 $('span.viz-gvlink').html($('span.viz-gvlink').html().replace('?', chart_type_in_api_link));
46 }
47
48 $('.type-radio').change(function () {
49 $('.type-label-selected').removeClass('type-label-selected');
50 $(this).parent().addClass('type-label-selected');
51 });
52
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 () {
67 var parent = $(this).parent();
68
69 if (parent.hasClass('open')) {
70 parent.removeClass('open');
71 } else {
72 parent.parent().find('.viz-group.open').removeClass('open');
73 parent.addClass('open');
74 }
75 });
76 $('#view-remote-file').click(function () {
77 var url = $(this).parent().find('#remote-data').val();
78
79 if (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)) {
81 if (url.substr(url.length - 8) === '/pubhtml') {
82 url = url.substring(0, url.length - 8) + '/export?format=csv';
83 }
84
85 $('#canvas').lock();
86 $(this).parent().submit();
87 } else {
88 alert(visualizer.l10n.invalid_source);
89 }
90 }
91 });
92
93 $('#vz-import-file').click(function (e) {
94 e.preventDefault();
95 if ($.trim($(this).parent().find("#csv-file").val()) !== '') {
96 $('#canvas').lock();
97 $(this).parent().submit();
98 }
99 });
100
101 $('#thehole').load(function () {
102 $('#canvas').unlock();
103 });
104
105 $('.viz-section-title').click(function () {
106 $(this).toggleClass('open').parent().find('.viz-section-items').toggle();
107 });
108
109 $('.more-info').click(function () {
110 $(this).parent().find('.viz-section-description:first').toggle();
111 return false;
112 });
113
114 $('#cancel-button').click(function () {
115 $('#cancel-form').submit();
116 });
117
118 });
119
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');
125
126 $('#settings-button').click(function(e) {
127 e.preventDefault();
128 $('#permissions-form').submit();
129 $('#settings-form').submit();
130 });
131
132 $(this).parent().removeClass('bottom-fixed').addClass('open');
133
134 return false;
135 });
136 $('#vz-chart-permissions .customize-section-back').click(function () {
137 $("#vz-chart-source").show();
138
139 $("#vz-chart-permissions .viz-group-header").hide();
140 $('#settings-button').click(function(e) {
141 e.preventDefault();
142 $('#settings-form').submit();
143 });
144
145 $(this).parent().parent().removeClass('open').addClass('bottom-fixed');
146
147 return false;
148 });
149
150 $('.visualizer-permission').chosen({
151 width : '50%',
152 search_contains : true
153 });
154
155 $('.visualizer-permission-type').each(function(x, y){
156 var type = $(y).attr('data-visualizer-permission-type');
157 var child = $('.visualizer-permission-' + type + '-specific');
158 if($(y).val() === 'all'){
159 child.next('div.chosen-container').hide();
160 return;
161 }
162 });
163
164 $('.visualizer-permission-type').on('change', function(evt, params) {
165 var type = $(this).attr('data-visualizer-permission-type');
166 var child = $('.visualizer-permission-' + type + '-specific');
167 child.empty();
168 if(params.selected === 'all'){
169 child.next('div.chosen-container').hide();
170 return;
171 } else {
172 child.next('div.chosen-container').show();
173 }
174 child.append('<option value="">' + visualizer.l10n['loading'] + '</option>').trigger('chosen:updated');
175 $.ajax({
176 url : visualizer.ajax['url'],
177 method : 'post',
178 data : {
179 'action' : visualizer.ajax['actions']['permissions'],
180 'nonce' : visualizer.ajax['nonces']['permissions'],
181 'type' : params.selected
182 },
183 success : function(d, textStatus, XMLHttpRequest){
184 if(d.success) {
185 child.empty();
186 $.each(d.data, function(k, v){
187 child.append('<option value="' + k + '">' + v + '</option>');
188 });
189 child.trigger('chosen:updated');
190 }
191 }
192 });
193 });
194 }
195
196 // https://codemirror.net/
197 function init_db_import_component(){
198 var table_columns = visualizer.db_query.tables;
199 var code_mirror = wp.CodeMirror || CodeMirror;
200 var cm = code_mirror.fromTextArea($('.visualizer-db-query').get(0), {
201 value: $('.visualizer-db-query').val(),
202 autofocus: true,
203 mode: 'text/x-mysql',
204 lineWrapping: true,
205 dragDrop: false,
206 matchBrackets: true,
207 autoCloseBrackets: true,
208 extraKeys: {"Ctrl-Space": "autocomplete"},
209 hintOptions: { tables: table_columns }
210 });
211
212 // force refresh so that the query shows on first time load. Otherwise you have to click on the editor for it to show.
213 $('body').on('visualizer:db:query:focus', function(event, data){
214 cm.refresh();
215 });
216
217 cm.focus();
218
219 // update text area.
220 cm.on('inputRead', function(x, y){
221 cm.save();
222 });
223
224 // backspace and delete do not register so the text box does not get empty if the entire query is deleted
225 // from the editor. Let's force this.
226 $('body').on('visualizer:db:query:update', function(event, data){
227 cm.save();
228 });
229 }
230
231 function init_filter_import() {
232 $( '#db-filter-save-button' ).on( 'click', function(){
233 $('#vz-filter-wizard').submit();
234 });
235 }
236
237 function init_db_import(){
238 $( '#visualizer-db-query' ).css("z-index", "-1").hide();
239
240 init_db_import_component();
241
242 $('#visualizer-query-fetch').on('click', function(e){
243
244 $('body').trigger('visualizer:db:query:update', {});
245 if($('.visualizer-db-query').val() === ''){
246 return;
247 }
248
249 start_ajax($('#visualizer-db-query'));
250 $('.db-wizard-results').empty();
251 $('.db-wizard-error').empty();
252 $.ajax({
253 url : ajaxurl,
254 method : 'post',
255 data : {
256 'action' : visualizer.ajax['actions']['db_get_data'],
257 'security' : visualizer.ajax['nonces']['db_get_data'],
258 'params' : $('#db-query-form').serialize()
259 },
260 success : function(data){
261 if(data.success){
262 $('.db-wizard-results').html(data.data.table);
263 $('#results').DataTable({
264 "paging": false
265 });
266 }else{
267 $('.db-wizard-error').html(data.data.msg);
268 }
269 },
270 complete: function(){
271 end_ajax($('#visualizer-db-query'));
272 }
273 });
274 });
275
276 $( '#db-chart-button' ).on( 'click', function(){
277 $('#content').css('width', 'calc(100% - 300px)');
278 if( $(this).attr( 'data-current' ) === 'chart'){
279 $(this).val( $(this).attr( 'data-t-filter' ) );
280 $(this).html( $(this).attr( 'data-t-filter' ) );
281 $(this).attr( 'data-current', 'filter' );
282 $( '.visualizer-editor-lhs' ).hide();
283 $( '#visualizer-db-query' ).css("z-index", "9999").show();
284 $('body').trigger('visualizer:db:query:focus', {});
285 $( '#canvas' ).hide();
286 }else{
287 var filter_button = $(this);
288 $( '#visualizer-db-query' ).css("z-index", "-1").hide();
289 $('#canvas').lock();
290 filter_button.val( filter_button.attr( 'data-t-chart' ) );
291 filter_button.html( filter_button.attr( 'data-t-chart' ) );
292 filter_button.attr( 'data-current', 'chart' );
293 $( '#canvas' ).css("z-index", "1").show();
294 $( '#db-chart-save-button' ).trigger('click');
295 }
296 } );
297
298 $( '#db-chart-save-button' ).on( 'click', function(){
299 $('#viz-db-wizard-params').val($('#db-query-form').serialize());
300 $('#vz-db-wizard').submit();
301 });
302 }
303
304 function init_json_import(){
305 var regex = new RegExp(visualizer.json_tag_separator, 'g');
306
307 $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
308 $('.visualizer-json-form').accordion({
309 heightStyle: 'content',
310 active: 0
311 });
312
313 // toggle between chart and create/modify parameters
314 $( '#json-chart-button' ).on( 'click', function(){
315 $('#content').css('width', 'calc(100% - 300px)');
316 if( $(this).attr( 'data-current' ) === 'chart'){
317 $(this).val( $(this).attr( 'data-t-filter' ) );
318 $(this).html( $(this).attr( 'data-t-filter' ) );
319 $(this).attr( 'data-current', 'filter' );
320 $( '.visualizer-editor-lhs' ).hide();
321 $( '#visualizer-json-screen' ).css("z-index", "9999").show();
322 $( '#canvas' ).hide();
323 }else{
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();
332 }
333 } );
334
335 // fetch the roots for the provided endpoint
336 $( '#visualizer-json-fetch' ).on( 'click', function(e){
337 e.preventDefault();
338 $('.visualizer-json-form').accordion( 'option', 'active', 0 );
339 $('.visualizer-json-form h3.viz-step:not(.step1)').addClass('ui-state-disabled');
340 $('.json-table').html('');
341 start_ajax( $( '#visualizer-json-screen' ) );
342 $.ajax({
343 url : ajaxurl,
344 method : 'post',
345 data : {
346 'action' : visualizer.ajax['actions']['json_get_roots'],
347 'security' : visualizer.ajax['nonces']['json_get_roots'],
348 'params' : $('#json-endpoint-form').serialize()
349 },
350 success : function(data){
351 if(data.success){
352 $('#json-root-form [name="url"]').val(data.data.url);
353 $('#vz-import-json-root').empty();
354 $.each(data.data.roots, function(i, name){
355 $('#vz-import-json-root').append('<option value="' + name + '">' + name.replace(regex, visualizer.json_tag_separator_view) + '</option>');
356 });
357 $('#json-root-form').fadeIn('medium');
358 json_accordion_activate(1, true);
359 }else{
360 alert(visualizer.l10n.json_error);
361 }
362 },
363 complete: function(){
364 end_ajax($('#visualizer-json-screen'));
365 }
366 });
367 });
368
369 // fetch the data for the chosen root
370 $( '#visualizer-json-parse' ).on( 'click', function(e){
371 e.preventDefault();
372 $('.visualizer-json-form h3.viz-step:not(.step1):not(.step2)').addClass('ui-state-disabled');
373 $('.json-table').html('');
374 start_ajax( $( '#visualizer-json-screen' ) );
375 $.ajax({
376 url : ajaxurl,
377 method : 'post',
378 data : {
379 'action' : visualizer.ajax['actions']['json_get_data'],
380 'security' : visualizer.ajax['nonces']['json_get_data'],
381 'params' : $('#json-root-form').serialize()
382 },
383 success : function(data){
384 if(data.success){
385 $('#vz-import-json-paging option:not(.static)').remove();
386 if(data.data.paging.length > 0){
387 var $template = $('#vz-import-json-paging').attr('data-template');
388 $.each(data.data.paging, function(i, name){
389 var display = name.replace(regex, visualizer.json_tag_separator_view);
390 display = $template.replace('?', display);
391 $('#vz-import-json-paging').append('<option value="' + name + '">' + display + '</option>');
392 });
393 $('.json-pagination').show();
394 }
395 $('#json-conclude-form [name="url"]').val(data.data.url);
396 $('#json-conclude-form [name="root"]').val(data.data.root);
397 $('#json-conclude-form .json-table').html(data.data.table);
398
399 var $table = create_editor_table( '#json-conclude-form' );
400
401 json_accordion_activate(3, true);
402 json_accordion_activate(2, false);
403 $table.columns.adjust().draw();
404 }else{
405 alert(visualizer.l10n.json_error);
406 }
407 },
408 complete: function(){
409 end_ajax($('#visualizer-json-screen'));
410 }
411 });
412 });
413
414 // when the data is set and the chart is updated, toggle the screen so that the chart is shown
415 $('#json-conclude-form').on( 'submit', function(e){
416 // populate the form elements that are in the misc tab.
417 $('#json-conclude-form-helper .json-form-element').each(function(x, y){
418 $('#json-conclude-form').append('<input type="hidden" name="' + y.name + '" value="' + y.value + '">');
419 });
420 $( '#json-chart-button' ).trigger('click');
421 $('#canvas').lock();
422 });
423
424 // update the schedule
425 $('#json-chart-save-button').on('click', function(e){
426 e.preventDefault();
427 $('#canvas').lock();
428 $.ajax({
429 url : ajaxurl,
430 method : 'post',
431 data : {
432 'action' : visualizer.ajax['actions']['json_set_schedule'],
433 'security' : visualizer.ajax['nonces']['json_set_schedule'],
434 'chart' : $('#vz-json-time').attr('data-chart'),
435 'time' : $('#vz-json-time').val()
436 },
437 success : function(data){
438 // do nothing.
439 },
440 complete: function(){
441 $('#canvas').unlock();
442 }
443 });
444 });
445
446 }
447
448 function init_editor_table() {
449 $('body').on('visualizer:db:editor:table:init', function(event, data){
450 var $table = create_editor_table('.viz-table-editor');
451 $('body').on('visualizer:db:editor:table:redraw', function(event, data){
452 $table.draw();
453 });
454 });
455 }
456
457 function create_editor_table(element) {
458 var settings = {
459 paging: false,
460 searching: false,
461 ordering: false,
462 select: false,
463 scrollX: "100%",
464 scrollY: "400px",
465 info: false,
466 colReorder: {
467 fixedColumnsLeft: 1
468 }
469 };
470
471 // show column visibility button only when more than 6 columns are found (including the Label column)
472 if($(element + ' table.viz-editor-table thead tr th').length > 6){
473 $.extend( settings, {
474 dom: 'Bt',
475 buttons: [
476 {
477 extend: 'colvis',
478 columns: ':gt(0)',
479 collectionLayout: 'four-column'
480 }
481 ]
482 } );
483 }
484
485 $.extend( $.fn.dataTable.defaults, settings );
486 var $table = $(element + ' .viz-editor-table').DataTable();
487 return $table;
488 }
489
490 function json_accordion_activate($step, $activate){
491 $('.visualizer-json-form h3.viz-step.step' + ( $step + 1 )).removeClass('ui-state-disabled');
492 if($activate){
493 $('.visualizer-json-form').accordion( 'option', 'active', $step );
494 }
495 }
496
497 function start_ajax(element){
498 element.lock();
499 }
500
501 function end_ajax(element){
502 element.unlock();
503 }
504
505 })(jQuery);
506
507 (function ($) {
508 $.fn.lock = function () {
509 $(this).each(function () {
510 var $this = $(this);
511 var position = $this.css('position');
512
513 if (!position) {
514 position = 'static';
515 }
516
517 switch (position) {
518 case 'absolute':
519 case 'relative':
520 break;
521 default:
522 $this.css('position', 'relative');
523 break;
524 }
525 $this.data('position', position);
526
527 var width = $this.width(),
528 height = $this.height();
529
530 var locker = $('<div class="locker"></div>');
531 locker.width(width).height(height);
532
533 var loader = $('<div class="locker-loader"></div>');
534 loader.width(width).height(height);
535
536 locker.append(loader);
537 $this.append(locker);
538 $(window).resize(function () {
539 $this.find('.locker,.locker-loader').width($this.width()).height($this.height());
540 });
541 });
542
543 return $(this);
544 };
545
546 $.fn.unlock = function () {
547 $(this).each(function () {
548 $(this).find('.locker').remove();
549 $(this).css('position', $(this).data('position'));
550 });
551
552 return $(this);
553 };
554 })(jQuery);