← All changes | js/frame.js +313 -10 3.1.2 → 3.4.2 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,9 +66,11 @@
55	66	$(this).parent().parent().removeClass('open').addClass('bottom-fixed');
56	67
57	68	return false;
58	69	});
59		- $('.viz-group-title').click(function () {
	70	+
	71	+ // collapse other open sections of this group
	72	+ $(document).on('click', '.viz-group-title', function () {
60	73	var parent = $(this).parent();
61	74
62	75	if (parent.hasClass('open')) {
63	76	parent.removeClass('open');
		@@ -64,14 +77,30 @@
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	+ $(document).on('click', '.viz-section-title', 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		- var url = $(this).parent().find('#remote-data').val();
	99	+ var url = $(this).parent().find('#vz-schedule-url').val();
71	100
72	101	if (url !== '') {
73		- 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)) {
	102	+ 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)) {
74	103	if (url.substr(url.length - 8) === '/pubhtml') {
75	104	url = url.substring(0, url.length - 8) + '/export?format=csv';
76	105	}
77	106
		@@ -94,13 +123,13 @@
94	123	$('#thehole').load(function () {
95	124	$('#canvas').unlock();
96	125	});
97	126
98		- $('.viz-section-title').click(function () {
	127	+ $(document).on('click', '.viz-section-title', function () {
99	128	$(this).toggleClass('open').parent().find('.viz-section-items').toggle();
100	129	});
101	130
102		- $('.more-info').click(function () {
	131	+ $(document).on('click', '.more-info', function () {
103	132	$(this).parent().find('.viz-section-description:first').toggle();
104	133	return false;
105	134	});
106	135
		@@ -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();
		@@ -218,10 +277,28 @@
218	277	// from the editor. Let's force this.
219	278	$('body').on('visualizer:db:query:update', function(event, data){
220	279	cm.save();
221	280	});
	281	+
	282	+ // clear the editor.
	283	+ $('body').on('visualizer:db:query:setvalue', function(event, data){
	284	+ cm.setValue(data.value);
	285	+ cm.clearHistory();
	286	+ cm.refresh();
	287	+ });
	288	+
	289	+ // set an option at runtime?
	290	+ $('body').on('visualizer:db:query:changeoption', function(event, data){
	291	+ cm.setOption(data.name, data.value);
	292	+ });
222	293	}
223	294
	295	+ function init_filter_import() {
	296	+ $( '#db-filter-save-button' ).on( 'click', function(){
	297	+ $('#vz-filter-wizard').submit();
	298	+ });
	299	+ }
	300	+
224	301	function init_db_import(){
225	302	$( '#visualizer-db-query' ).css("z-index", "-1").hide();
226	303
227	304	init_db_import_component();
		@@ -282,11 +359,237 @@
282	359	}
283	360	} );
284	361
285	362	$( '#db-chart-save-button' ).on( 'click', function(){
286		- $('#viz-db-wizard-params').val($('#db-query-form').serialize());
287		- $('#vz-db-wizard').submit();
	363	+ // submit only if a query has been provided.
	364	+ if($('#db-query-form .visualizer-db-query').val().length > 0){
	365	+ $('#viz-db-wizard-params').val($('#db-query-form').serialize());
	366	+ $('#vz-db-wizard').submit();
	367	+ }else{
	368	+ $('#canvas').unlock();
	369	+ }
288	370	});
	371	+ }
	372	+
	373	+ function init_json_import(){
	374	+ if(typeof visualizer === 'undefined'){
	375	+ return;
	376	+ }
	377	+
	378	+ var regex = new RegExp(visualizer.json_tag_separator, 'g');
	379	+
	380	+ $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
	381	+ $('.visualizer-json-form').accordion({
	382	+ heightStyle: 'content',
	383	+ active: 0
	384	+ });
	385	+ $('.visualizer-json-subform').accordion({
	386	+ heightStyle: 'content',
	387	+ active: false,
	388	+ collapsible: true
	389	+ });
	390	+
	391	+ // toggle between chart and create/modify parameters
	392	+ $( '#json-chart-button' ).on( 'click', function(){
	393	+ var $bttn = $(this);
	394	+ $('#content').css('width', 'calc(100% - 100px)');
	395	+ if( $(this).attr( 'data-current' ) === 'chart'){
	396	+ // toggle from chart to LHS form
	397	+ $(this).val( $(this).attr( 'data-t-filter' ) );
	398	+ $(this).html( $(this).attr( 'data-t-filter' ) );
	399	+ $(this).attr( 'data-current', 'filter' );
	400	+ $( '.visualizer-editor-lhs' ).hide();
	401	+ $( '#visualizer-json-screen' ).css("z-index", "9999").show();
	402	+ $( '#canvas' ).hide();
	403	+ }else{
	404	+ // toggle from LHS form to chart
	405	+ $( '#json-conclude-form' ).trigger('submit');
	406	+ }
	407	+ } );
	408	+
	409	+ $('body').on('visualizer:json:form:submit', function() {
	410	+ var filter_button = $( '#json-chart-button' );
	411	+ $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
	412	+ $('#canvas').lock();
	413	+ filter_button.val( filter_button.attr( 'data-t-chart' ) );
	414	+ filter_button.html( filter_button.attr( 'data-t-chart' ) );
	415	+ filter_button.attr( 'data-current', 'chart' );
	416	+ end_ajax( $( '#visualizer-json-screen' ) );
	417	+ $( '#canvas' ).css("z-index", "1").show();
	418	+ });
	419	+
	420	+
	421	+ // fetch the roots for the provided endpoint
	422	+ $( '#visualizer-json-fetch' ).on( 'click', function(e){
	423	+ e.preventDefault();
	424	+ $('.visualizer-json-form').accordion( 'option', 'active', 0 );
	425	+ $('.visualizer-json-form h3.viz-step:not(.step1)').addClass('ui-state-disabled');
	426	+ $('.json-table').html('');
	427	+ start_ajax( $( '#visualizer-json-screen' ) );
	428	+ $.ajax({
	429	+ url : ajaxurl,
	430	+ method : 'post',
	431	+ data : {
	432	+ 'action' : visualizer.ajax['actions']['json_get_roots'],
	433	+ 'security' : visualizer.ajax['nonces']['json_get_roots'],
	434	+ 'params' : $('#json-endpoint-form').serialize()
	435	+ },
	436	+ success : function(data){
	437	+ if(data.success){
	438	+ $('#vz-import-json-root').empty();
	439	+ $.each(data.data.roots, function(i, name){
	440	+ $('#vz-import-json-root').append('<option value="' + name + '">' + name.replace(regex, visualizer.json_tag_separator_view) + '</option>');
	441	+ });
	442	+ $('#json-root-form').fadeIn('medium');
	443	+ json_accordion_activate(1, true);
	444	+ }else{
	445	+ alert(data.data.msg);
	446	+ }
	447	+ },
	448	+ complete: function(){
	449	+ end_ajax($('#visualizer-json-screen'));
	450	+ }
	451	+ });
	452	+ });
	453	+
	454	+ // fetch the data for the chosen root
	455	+ $( '#visualizer-json-parse' ).on( 'click', function(e){
	456	+ e.preventDefault();
	457	+ $('.visualizer-json-form h3.viz-step:not(.step1):not(.step2)').addClass('ui-state-disabled');
	458	+ $('.json-table').html('');
	459	+ start_ajax( $( '#visualizer-json-screen' ) );
	460	+ $.ajax({
	461	+ url : ajaxurl,
	462	+ method : 'post',
	463	+ data : {
	464	+ 'action' : visualizer.ajax['actions']['json_get_data'],
	465	+ 'security' : visualizer.ajax['nonces']['json_get_data'],
	466	+ 'params' : $('#json-root-form, #json-endpoint-form').serialize()
	467	+ },
	468	+ success : function(data){
	469	+ if(data.success){
	470	+ $('#vz-import-json-paging option:not(.static)').remove();
	471	+ if(data.data.paging.length > 0){
	472	+ var $template = $('#vz-import-json-paging').attr('data-template');
	473	+ $.each(data.data.paging, function(i, name){
	474	+ var display = name.replace(regex, visualizer.json_tag_separator_view);
	475	+ display = $template.replace('?', display);
	476	+ $('#vz-import-json-paging').append('<option value="' + name + '">' + display + '</option>');
	477	+ });
	478	+ $('.json-pagination').show();
	479	+ }
	480	+ $('#json-conclude-form .json-table').html(data.data.table);
	481	+
	482	+ var $table = create_editor_table( '#json-conclude-form' );
	483	+
	484	+ json_accordion_activate(3, true);
	485	+ json_accordion_activate(2, false);
	486	+ $table.columns.adjust().draw();
	487	+ }else{
	488	+ alert(data.data.msg);
	489	+ }
	490	+ },
	491	+ complete: function(){
	492	+ end_ajax($('#visualizer-json-screen'));
	493	+ }
	494	+ });
	495	+ });
	496	+
	497	+ // when the data is set and the chart is updated, toggle the screen so that the chart is shown
	498	+ $('#json-conclude-form').on( 'submit', function(e){
	499	+ // at least one column has to be selected as non-excluded.
	500	+ var count_selected = 0;
	501	+ $('select.viz-select-data-type').each(function(i, element){
	502	+ if($(element).prop('selectedIndex') > 0){
	503	+ count_selected++;
	504	+ }
	505	+ });
	506	+ if(count_selected === 0){
	507	+ alert(visualizer.l10n.select_columns);
	508	+ return false;
	509	+ }
	510	+
	511	+ // populate the form elements that are in the other tabs.
	512	+ $('#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').each(function(x, y){
	513	+ $('#json-conclude-form').append('<input type="hidden" name="' + y.name + '" value="' + y.value + '">');
	514	+ });
	515	+
	516	+ $('body').trigger('visualizer:json:form:submit');
	517	+ });
	518	+
	519	+ // update the schedule
	520	+ $('#json-chart-save-button').on('click', function(e){
	521	+ e.preventDefault();
	522	+ $('#canvas').lock();
	523	+ $.ajax({
	524	+ url : ajaxurl,
	525	+ method : 'post',
	526	+ data : {
	527	+ 'action' : visualizer.ajax['actions']['json_set_schedule'],
	528	+ 'security' : visualizer.ajax['nonces']['json_set_schedule'],
	529	+ 'chart' : $('#vz-json-time').attr('data-chart'),
	530	+ 'time' : $('#vz-json-time').val()
	531	+ },
	532	+ success : function(data){
	533	+ // do nothing.
	534	+ },
	535	+ complete: function(){
	536	+ $('#canvas').unlock();
	537	+ }
	538	+ });
	539	+ });
	540	+
	541	+ }
	542	+
	543	+ function init_editor_table() {
	544	+ $('body').on('visualizer:db:editor:table:init', function(event, data){
	545	+ var $table = create_editor_table('.viz-table-editor', data.config);
	546	+ $('body').on('visualizer:db:editor:table:redraw', function(event, data){
	547	+ $table.draw();
	548	+ });
	549	+ });
	550	+ }
	551	+
	552	+ function create_editor_table(element, config) {
	553	+ var settings = {
	554	+ paging: false,
	555	+ searching: false,
	556	+ ordering: false,
	557	+ select: false,
	558	+ scrollX: "100%",
	559	+ scrollY: "400px",
	560	+ info: false,
	561	+ colReorder: {
	562	+ fixedColumnsLeft: 1
	563	+ }
	564	+ };
	565	+
	566	+ // show column visibility button only when more than 6 columns are found (including the Label column)
	567	+ if($(element + ' table.viz-editor-table thead tr th').length > 6){
	568	+ $.extend( settings, {
	569	+ dom: 'Bt',
	570	+ buttons: [
	571	+ {
	572	+ extend: 'colvis',
	573	+ columns: ':gt(0)',
	574	+ collectionLayout: 'four-column'
	575	+ }
	576	+ ]
	577	+ } );
	578	+ }
	579	+ if(config){
	580	+ $.extend( settings, config );
	581	+ }
	582	+
	583	+ var $table = $(element + ' .viz-editor-table').DataTable(settings);
	584	+ return $table;
	585	+ }
	586	+
	587	+ function json_accordion_activate($step, $activate){
	588	+ $('.visualizer-json-form h3.viz-step.step' + ( $step + 1 )).removeClass('ui-state-disabled');
	589	+ if($activate){
	590	+ $('.visualizer-json-form').accordion( 'option', 'active', $step );
	591	+ }
289	592	}
290	593
291	594	function start_ajax(element){
292	595	element.lock();