← All changes | js/frame.js +271 -5 3.1.1 → 3.3.4 View file →

		@@ -4,9 +4,9 @@
4	4	/* global ajaxurl */
5	5	/* global CodeMirror */
6	6
7	7	(function ($) {
8		- $(window).load(function(){
	8	+ $(window).on('load', function(){
9	9	// scroll to the selected chart type.
10	10	if($('label.type-label.type-label-selected').length > 0) {
11	11	$('label.type-label.type-label-selected')[0].scrollIntoView();
12	12	}
		@@ -12,18 +12,29 @@
12	12	}
13	13	});
14	14
15	15	$(document).ready(function () {
16		- // open the correct source tab.
	16	+ onReady();
	17	+ });
	18	+
	19	+ function onReady() {
	20	+ // open the correct source tab/sub-tab.
17	21	var source = $('#visualizer-chart-id').attr('data-chart-source');
18	22	$('li.viz-group.' + source).addClass('open');
	23	+ $('li.viz-group.' + source + ' span.viz-section-title.' + source).addClass('open');
	24	+ $('li.viz-group.' + source + ' span.viz-section-title.' + source + '.open').parent().find('div.viz-section-items').show();
19	25
20	26	init_permissions();
21	27
22	28	if(typeof visualizer !== 'undefined' && visualizer.is_pro) {
23	29	init_db_import();
	30	+ init_filter_import();
24	31	}
25	32
	33	+ init_json_import();
	34	+
	35	+ init_editor_table();
	36	+
26	37	// update the manual configuation link to point to the correct chart type.
27	38	var type = $('#visualizer-chart-id').attr('data-chart-type');
28	39	var chart_type_in_api_link = type + 'chart';
29	40	switch (type) {
		@@ -55,8 +66,10 @@
55	66	$(this).parent().parent().removeClass('open').addClass('bottom-fixed');
56	67
57	68	return false;
58	69	});
	70	+
	71	+ // collapse other open sections of this group
59	72	$('.viz-group-title').click(function () {
60	73	var parent = $(this).parent();
61	74
62	75	if (parent.hasClass('open')) {
		@@ -64,9 +77,25 @@
64	77	} else {
65	78	parent.parent().find('.viz-group.open').removeClass('open');
66	79	parent.addClass('open');
67	80	}
	81	+
	82	+ // if the user wanted to perform an action
	83	+ // and the chart is no longer showing because that particular screen is showing
	84	+ // e.g. create parameters
	85	+ // and then the user decided to click on another action
	86	+ // let's invoke the show chart of the previous action so that the chart shows
	87	+ // and the user does not get confused
	88	+ $('input[type="button"][data-current!="chart"].show-chart-toggle').trigger('click');
68	89	});
	90	+
	91	+ // collapse other open subsections of this section
	92	+ $('.viz-section-title').click(function () {
	93	+ var grandparent = $(this).parent().parent();
	94	+ grandparent.find('.viz-section-title.open ~ .viz-section-items').hide();
	95	+ grandparent.find('.viz-section-title.open').removeClass('open');
	96	+ });
	97	+
69	98	$('#view-remote-file').click(function () {
70	99	var url = $(this).parent().find('#remote-data').val();
71	100
72	101	if (url !== '') {
		@@ -107,10 +136,40 @@
107	136	$('#cancel-button').click(function () {
108	137	$('#cancel-form').submit();
109	138	});
110	139
111		- });
	140	+ init_type_vs_library();
112	141
	142	+ $('.viz-abort').on('click', function(e){
	143	+ e.preventDefault();
	144	+ window.parent.postMessage('visualizer:mediaframe:close', '*');
	145	+ });
	146	+
	147	+ }
	148	+
	149	+ function init_type_vs_library() {
	150	+ var $data = $('select.viz-select-library').attr('data-type-vs-library');
	151	+ if(typeof $data === 'undefined' || $data.length === 0){
	152	+ return;
	153	+ }
	154	+ var $typeVsLibrary = JSON.parse( $('select.viz-select-library').attr('data-type-vs-library') );
	155	+ // disable all unsupported libraries for the chart type.
	156	+ $('input.type-radio').on('click', function(){
	157	+ enable_libraries_for($(this).val(), $typeVsLibrary);
	158	+ });
	159	+
	160	+ enable_libraries_for($('input.type-radio:checked').val(), $typeVsLibrary);
	161	+ }
	162	+
	163	+ function enable_libraries_for($type, $typeVsLibrary) {
	164	+ $('select.viz-select-library option').addClass('disabled').attr('disabled', 'disabled');
	165	+ var $libs = $typeVsLibrary[$type];
	166	+ $.each($libs, function( i, $lib ) {
	167	+ $('select.viz-select-library option[value="' + $lib + '"]').removeClass('disabled').removeAttr('disabled');
	168	+ });
	169	+ $('select.viz-select-library').val( $('select.viz-select-library option:not(.disabled)').val() );
	170	+ }
	171	+
113	172	function init_permissions(){
114	173	$('#vz-chart-permissions h2').click(function () {
115	174	$("#vz-chart-source").hide();
116	175	$("#vz-chart-permissions .viz-group-header").show();
		@@ -220,8 +279,14 @@
220	279	cm.save();
221	280	});
222	281	}
223	282
	283	+ function init_filter_import() {
	284	+ $( '#db-filter-save-button' ).on( 'click', function(){
	285	+ $('#vz-filter-wizard').submit();
	286	+ });
	287	+ }
	288	+
224	289	function init_db_import(){
225	290	$( '#visualizer-db-query' ).css("z-index", "-1").hide();
226	291
227	292	init_db_import_component();
		@@ -282,11 +347,212 @@
282	347	}
283	348	} );
284	349
285	350	$( '#db-chart-save-button' ).on( 'click', function(){
286		- $('#viz-db-wizard-params').val($('#db-query-form').serialize());
287		- $('#vz-db-wizard').submit();
	351	+ // submit only if a query has been provided.
	352	+ if($('#db-query-form .visualizer-db-query').val().length > 0){
	353	+ $('#viz-db-wizard-params').val($('#db-query-form').serialize());
	354	+ $('#vz-db-wizard').submit();
	355	+ }else{
	356	+ $('#canvas').unlock();
	357	+ }
288	358	});
	359	+ }
	360	+
	361	+ function init_json_import(){
	362	+ if(typeof visualizer === 'undefined'){
	363	+ return;
	364	+ }
	365	+
	366	+ var regex = new RegExp(visualizer.json_tag_separator, 'g');
	367	+
	368	+ $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
	369	+ $('.visualizer-json-form').accordion({
	370	+ heightStyle: 'content',
	371	+ active: 0
	372	+ });
	373	+
	374	+ // toggle between chart and create/modify parameters
	375	+ $( '#json-chart-button' ).on( 'click', function(){
	376	+ $('#content').css('width', 'calc(100% - 300px)');
	377	+ if( $(this).attr( 'data-current' ) === 'chart'){
	378	+ $(this).val( $(this).attr( 'data-t-filter' ) );
	379	+ $(this).html( $(this).attr( 'data-t-filter' ) );
	380	+ $(this).attr( 'data-current', 'filter' );
	381	+ $( '.visualizer-editor-lhs' ).hide();
	382	+ $( '#visualizer-json-screen' ).css("z-index", "9999").show();
	383	+ $( '#canvas' ).hide();
	384	+ }else{
	385	+ var filter_button = $(this);
	386	+ $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
	387	+ $('#canvas').lock();
	388	+ filter_button.val( filter_button.attr( 'data-t-chart' ) );
	389	+ filter_button.html( filter_button.attr( 'data-t-chart' ) );
	390	+ filter_button.attr( 'data-current', 'chart' );
	391	+ $( '#canvas' ).css("z-index", "1").show();
	392	+ $('#canvas').unlock();
	393	+ }
	394	+ } );
	395	+
	396	+ // fetch the roots for the provided endpoint
	397	+ $( '#visualizer-json-fetch' ).on( 'click', function(e){
	398	+ e.preventDefault();
	399	+ $('.visualizer-json-form').accordion( 'option', 'active', 0 );
	400	+ $('.visualizer-json-form h3.viz-step:not(.step1)').addClass('ui-state-disabled');
	401	+ $('.json-table').html('');
	402	+ start_ajax( $( '#visualizer-json-screen' ) );
	403	+ $.ajax({
	404	+ url : ajaxurl,
	405	+ method : 'post',
	406	+ data : {
	407	+ 'action' : visualizer.ajax['actions']['json_get_roots'],
	408	+ 'security' : visualizer.ajax['nonces']['json_get_roots'],
	409	+ 'params' : $('#json-endpoint-form').serialize()
	410	+ },
	411	+ success : function(data){
	412	+ if(data.success){
	413	+ $('#json-root-form [name="url"]').val(data.data.url);
	414	+ $('#vz-import-json-root').empty();
	415	+ $.each(data.data.roots, function(i, name){
	416	+ $('#vz-import-json-root').append('<option value="' + name + '">' + name.replace(regex, visualizer.json_tag_separator_view) + '</option>');
	417	+ });
	418	+ $('#json-root-form').fadeIn('medium');
	419	+ json_accordion_activate(1, true);
	420	+ }else{
	421	+ alert(data.data.msg);
	422	+ }
	423	+ },
	424	+ complete: function(){
	425	+ end_ajax($('#visualizer-json-screen'));
	426	+ }
	427	+ });
	428	+ });
	429	+
	430	+ // fetch the data for the chosen root
	431	+ $( '#visualizer-json-parse' ).on( 'click', function(e){
	432	+ e.preventDefault();
	433	+ $('.visualizer-json-form h3.viz-step:not(.step1):not(.step2)').addClass('ui-state-disabled');
	434	+ $('.json-table').html('');
	435	+ start_ajax( $( '#visualizer-json-screen' ) );
	436	+ $.ajax({
	437	+ url : ajaxurl,
	438	+ method : 'post',
	439	+ data : {
	440	+ 'action' : visualizer.ajax['actions']['json_get_data'],
	441	+ 'security' : visualizer.ajax['nonces']['json_get_data'],
	442	+ 'params' : $('#json-root-form').serialize()
	443	+ },
	444	+ success : function(data){
	445	+ if(data.success){
	446	+ $('#vz-import-json-paging option:not(.static)').remove();
	447	+ if(data.data.paging.length > 0){
	448	+ var $template = $('#vz-import-json-paging').attr('data-template');
	449	+ $.each(data.data.paging, function(i, name){
	450	+ var display = name.replace(regex, visualizer.json_tag_separator_view);
	451	+ display = $template.replace('?', display);
	452	+ $('#vz-import-json-paging').append('<option value="' + name + '">' + display + '</option>');
	453	+ });
	454	+ $('.json-pagination').show();
	455	+ }
	456	+ $('#json-conclude-form [name="url"]').val(data.data.url);
	457	+ $('#json-conclude-form [name="root"]').val(data.data.root);
	458	+ $('#json-conclude-form .json-table').html(data.data.table);
	459	+
	460	+ var $table = create_editor_table( '#json-conclude-form' );
	461	+
	462	+ json_accordion_activate(3, true);
	463	+ json_accordion_activate(2, false);
	464	+ $table.columns.adjust().draw();
	465	+ }else{
	466	+ alert(data.data.msg);
	467	+ }
	468	+ },
	469	+ complete: function(){
	470	+ end_ajax($('#visualizer-json-screen'));
	471	+ }
	472	+ });
	473	+ });
	474	+
	475	+ // when the data is set and the chart is updated, toggle the screen so that the chart is shown
	476	+ $('#json-conclude-form').on( 'submit', function(e){
	477	+ // populate the form elements that are in the misc tab.
	478	+ $('#json-conclude-form-helper .json-form-element').each(function(x, y){
	479	+ $('#json-conclude-form').append('<input type="hidden" name="' + y.name + '" value="' + y.value + '">');
	480	+ });
	481	+ $( '#json-chart-button' ).trigger('click');
	482	+ $('#canvas').lock();
	483	+ });
	484	+
	485	+ // update the schedule
	486	+ $('#json-chart-save-button').on('click', function(e){
	487	+ e.preventDefault();
	488	+ $('#canvas').lock();
	489	+ $.ajax({
	490	+ url : ajaxurl,
	491	+ method : 'post',
	492	+ data : {
	493	+ 'action' : visualizer.ajax['actions']['json_set_schedule'],
	494	+ 'security' : visualizer.ajax['nonces']['json_set_schedule'],
	495	+ 'chart' : $('#vz-json-time').attr('data-chart'),
	496	+ 'time' : $('#vz-json-time').val()
	497	+ },
	498	+ success : function(data){
	499	+ // do nothing.
	500	+ },
	501	+ complete: function(){
	502	+ $('#canvas').unlock();
	503	+ }
	504	+ });
	505	+ });
	506	+
	507	+ }
	508	+
	509	+ function init_editor_table() {
	510	+ $('body').on('visualizer:db:editor:table:init', function(event, data){
	511	+ var $table = create_editor_table('.viz-table-editor');
	512	+ $('body').on('visualizer:db:editor:table:redraw', function(event, data){
	513	+ $table.draw();
	514	+ });
	515	+ });
	516	+ }
	517	+
	518	+ function create_editor_table(element) {
	519	+ var settings = {
	520	+ paging: false,
	521	+ searching: false,
	522	+ ordering: false,
	523	+ select: false,
	524	+ scrollX: "100%",
	525	+ scrollY: "400px",
	526	+ info: false,
	527	+ colReorder: {
	528	+ fixedColumnsLeft: 1
	529	+ }
	530	+ };
	531	+
	532	+ // show column visibility button only when more than 6 columns are found (including the Label column)
	533	+ if($(element + ' table.viz-editor-table thead tr th').length > 6){
	534	+ $.extend( settings, {
	535	+ dom: 'Bt',
	536	+ buttons: [
	537	+ {
	538	+ extend: 'colvis',
	539	+ columns: ':gt(0)',
	540	+ collectionLayout: 'four-column'
	541	+ }
	542	+ ]
	543	+ } );
	544	+ }
	545	+
	546	+ var $table = $(element + ' .viz-editor-table').DataTable(settings);
	547	+ return $table;
	548	+ }
	549	+
	550	+ function json_accordion_activate($step, $activate){
	551	+ $('.visualizer-json-form h3.viz-step.step' + ( $step + 1 )).removeClass('ui-state-disabled');
	552	+ if($activate){
	553	+ $('.visualizer-json-form').accordion( 'option', 'active', $step );
	554	+ }
289	555	}
290	556
291	557	function start_ajax(element){
292	558	element.lock();