← All changes | js/frame.js +200 -1 3.1.3 → 3.2.1 View file →

		@@ -12,11 +12,13 @@
12	12	}
13	13	});
14	14
15	15	$(document).ready(function () {
16		- // open the correct source tab.
	16	+ // open the correct source tab/sub-tab.
17	17	var source = $('#visualizer-chart-id').attr('data-chart-source');
18	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();
19	21
20	22	init_permissions();
21	23
22	24	if(typeof visualizer !== 'undefined' && visualizer.is_pro) {
		@@ -23,8 +25,12 @@
23	25	init_db_import();
24	26	init_filter_import();
25	27	}
26	28
	29	+ init_json_import();
	30	+
	31	+ init_editor_table();
	32	+
27	33	// update the manual configuation link to point to the correct chart type.
28	34	var type = $('#visualizer-chart-id').attr('data-chart-type');
29	35	var chart_type_in_api_link = type + 'chart';
30	36	switch (type) {
		@@ -292,8 +298,201 @@
292	298	$( '#db-chart-save-button' ).on( 'click', function(){
293	299	$('#viz-db-wizard-params').val($('#db-query-form').serialize());
294	300	$('#vz-db-wizard').submit();
295	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	+ }
296	495	}
297	496
298	497	function start_ajax(element){
299	498	element.lock();