← All changes | js/frame.js +136 -0 3.0.9 → 3.1.2 View file →

		@@ -1,7 +1,9 @@
1	1	/* global prompt */
2	2	/* global visualizer */
3	3	/* global alert */
	4	+/* global ajaxurl */
	5	+/* global CodeMirror */
4	6
5	7	(function ($) {
6	8	$(window).load(function(){
7	9	// scroll to the selected chart type.
		@@ -10,10 +12,33 @@
10	12	}
11	13	});
12	14
13	15	$(document).ready(function () {
	16	+ // open the correct source tab.
	17	+ var source = $('#visualizer-chart-id').attr('data-chart-source');
	18	+ $('li.viz-group.' + source).addClass('open');
	19	+
14	20	init_permissions();
15	21
	22	+ if(typeof visualizer !== 'undefined' && visualizer.is_pro) {
	23	+ init_db_import();
	24	+ }
	25	+
	26	+ // update the manual configuation link to point to the correct chart type.
	27	+ var type = $('#visualizer-chart-id').attr('data-chart-type');
	28	+ var chart_type_in_api_link = type + 'chart';
	29	+ switch (type) {
	30	+ case "gauge":
	31	+ case "table":
	32	+ case "timeline":
	33	+ chart_type_in_api_link = type;
	34	+ break;
	35	+ }
	36	+
	37	+ if($('span.viz-gvlink').length > 0) {
	38	+ $('span.viz-gvlink').html($('span.viz-gvlink').html().replace('?', chart_type_in_api_link));
	39	+ }
	40	+
16	41	$('.type-radio').change(function () {
17	42	$('.type-label-selected').removeClass('type-label-selected');
18	43	$(this).parent().addClass('type-label-selected');
19	44	});
		@@ -159,8 +184,119 @@
159	184	}
160	185	});
161	186	});
162	187	}
	188	+
	189	+ // https://codemirror.net/
	190	+ function init_db_import_component(){
	191	+ var table_columns = visualizer.db_query.tables;
	192	+ var code_mirror = wp.CodeMirror || CodeMirror;
	193	+ var cm = code_mirror.fromTextArea($('.visualizer-db-query').get(0), {
	194	+ value: $('.visualizer-db-query').val(),
	195	+ autofocus: true,
	196	+ mode: 'text/x-mysql',
	197	+ lineWrapping: true,
	198	+ dragDrop: false,
	199	+ matchBrackets: true,
	200	+ autoCloseBrackets: true,
	201	+ extraKeys: {"Ctrl-Space": "autocomplete"},
	202	+ hintOptions: { tables: table_columns }
	203	+ });
	204	+
	205	+ // force refresh so that the query shows on first time load. Otherwise you have to click on the editor for it to show.
	206	+ $('body').on('visualizer:db:query:focus', function(event, data){
	207	+ cm.refresh();
	208	+ });
	209	+
	210	+ cm.focus();
	211	+
	212	+ // update text area.
	213	+ cm.on('inputRead', function(x, y){
	214	+ cm.save();
	215	+ });
	216	+
	217	+ // backspace and delete do not register so the text box does not get empty if the entire query is deleted
	218	+ // from the editor. Let's force this.
	219	+ $('body').on('visualizer:db:query:update', function(event, data){
	220	+ cm.save();
	221	+ });
	222	+ }
	223	+
	224	+ function init_db_import(){
	225	+ $( '#visualizer-db-query' ).css("z-index", "-1").hide();
	226	+
	227	+ init_db_import_component();
	228	+
	229	+ $('#visualizer-query-fetch').on('click', function(e){
	230	+
	231	+ $('body').trigger('visualizer:db:query:update', {});
	232	+ if($('.visualizer-db-query').val() === ''){
	233	+ return;
	234	+ }
	235	+
	236	+ start_ajax($('#visualizer-db-query'));
	237	+ $('.db-wizard-results').empty();
	238	+ $('.db-wizard-error').empty();
	239	+ $.ajax({
	240	+ url : ajaxurl,
	241	+ method : 'post',
	242	+ data : {
	243	+ 'action' : visualizer.ajax['actions']['db_get_data'],
	244	+ 'security' : visualizer.ajax['nonces']['db_get_data'],
	245	+ 'params' : $('#db-query-form').serialize()
	246	+ },
	247	+ success : function(data){
	248	+ if(data.success){
	249	+ $('.db-wizard-results').html(data.data.table);
	250	+ $('#results').DataTable({
	251	+ "paging": false
	252	+ });
	253	+ }else{
	254	+ $('.db-wizard-error').html(data.data.msg);
	255	+ }
	256	+ },
	257	+ complete: function(){
	258	+ end_ajax($('#visualizer-db-query'));
	259	+ }
	260	+ });
	261	+ });
	262	+
	263	+ $( '#db-chart-button' ).on( 'click', function(){
	264	+ $('#content').css('width', 'calc(100% - 300px)');
	265	+ if( $(this).attr( 'data-current' ) === 'chart'){
	266	+ $(this).val( $(this).attr( 'data-t-filter' ) );
	267	+ $(this).html( $(this).attr( 'data-t-filter' ) );
	268	+ $(this).attr( 'data-current', 'filter' );
	269	+ $( '.visualizer-editor-lhs' ).hide();
	270	+ $( '#visualizer-db-query' ).css("z-index", "9999").show();
	271	+ $('body').trigger('visualizer:db:query:focus', {});
	272	+ $( '#canvas' ).hide();
	273	+ }else{
	274	+ var filter_button = $(this);
	275	+ $( '#visualizer-db-query' ).css("z-index", "-1").hide();
	276	+ $('#canvas').lock();
	277	+ filter_button.val( filter_button.attr( 'data-t-chart' ) );
	278	+ filter_button.html( filter_button.attr( 'data-t-chart' ) );
	279	+ filter_button.attr( 'data-current', 'chart' );
	280	+ $( '#canvas' ).css("z-index", "1").show();
	281	+ $( '#db-chart-save-button' ).trigger('click');
	282	+ }
	283	+ } );
	284	+
	285	+ $( '#db-chart-save-button' ).on( 'click', function(){
	286	+ $('#viz-db-wizard-params').val($('#db-query-form').serialize());
	287	+ $('#vz-db-wizard').submit();
	288	+ });
	289	+ }
	290	+
	291	+ function start_ajax(element){
	292	+ element.lock();
	293	+ }
	294	+
	295	+ function end_ajax(element){
	296	+ element.unlock();
	297	+ }
	298	+
163	299	})(jQuery);
164	300
165	301	(function ($) {
166	302	$.fn.lock = function () {