← All changes | js/render-datatables.js +103 -24 3.1.3 → 3.4.8 View file →

		@@ -5,10 +5,18 @@
5	5	var all_charts;
6	6	// so that we know which charts belong to our library.
7	7	var rendered_charts = [];
8	8
	9	+ // save the settings corresponding to cssClassNames so that when a table is being edited, they stripes etc. don't get reset
	10	+ var cssClassNames;
	11	+
9	12	function renderChart(id, v) {
10		- renderSpecificChart(id, all_charts[id], v);
	13	+ var chart = all_charts[id];
	14	+ if(chart.library !== 'datatables'){
	15	+ return;
	16	+ }
	17	+ cssClassNames = null;
	18	+ renderSpecificChart(id, chart, v);
11	19	}
12	20
13	21	function renderSpecificChart(id, chart, v) {
14	22	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter, type, rows, cols;
		@@ -28,9 +36,8 @@
28	36
29	37	if($('#' + id).find('table.visualizer-data-table').length > 0){
30	38	$('#' + id).empty();
31	39	}
32		- $('#' + id).append($('<table class="dataTable visualizer-data-table table table-striped"></table>'));
33	40
34	41	settings = {
35	42	destroy: true,
36	43	paging: false,
		@@ -47,25 +54,53 @@
47	54	},
48	55	dom: 'Bfrtip',
49	56	};
50	57
	58	+ var $classes = 'dataTable visualizer-data-table table table-striped';
	59	+
51	60	if(typeof v.page_type !== 'undefined'){
52	61	switch(v.page_type){
53	62	case 'post':
	63	+ // fall-through.
54	64	case 'library':
55		- $.extend( settings, {
	65	+ // for smaller screens...
	66	+ if(window.innerWidth < 1500){
	67	+ delete chart.settings['scrollX'];
	68	+ delete chart.settings['scrollY'];
	69	+ delete chart.settings['scrollY_int'];
	70	+ $.extend( settings, {
56	71	scrollX: 150,
	72	+ scrollY: (( chart.settings['responsive_bool'] === 'true' ? 0.8 : 0.5 ) * parseInt($(container).css('height').replace('px',''))),
	73	+ scrollCollapse: true
	74	+ } );
	75	+ }else{
	76	+ if(parseInt(chart.settings['scrollY_int']) > 180){
	77	+ chart.settings['scrollY_int'];
	78	+ }
	79	+ delete chart.settings['scrollX'];
	80	+ $.extend( settings, {
	81	+ scrollX: 150,
57	82	scrollY: 180,
58		- scrollCollapse: true
59		- } );
	83	+ } );
	84	+ }
60	85	break;
	86	+ case 'chart':
	87	+ delete chart.settings['scrollX']; // jshint ignore:line
	88	+ // fall-through.
61	89	case 'frontend':
62		- case 'chart':
63	90	// empty.
64	91	break;
65	92	}
66	93	}
67	94
	95	+ if(typeof chart.settings['scrollX'] !== 'undefined'){
	96	+ if(chart.settings['scrollX'] == 'true'){ // jshint ignore:line
	97	+ $classes = $classes + ' nowrap';
	98	+ }
	99	+ }
	100	+
	101	+ $('#' + id).append($('<table class="' + $classes + '"></table>'));
	102	+
68	103	var select = {
69	104	info: false
70	105	};
71	106	// we cannot use { select } below because https://github.com/Codeinwp/visualizer/issues/357
		@@ -72,10 +107,15 @@
72	107	$.extend( settings, { info: false } ); // jshint ignore:line
73	108
74	109	var stripe = ['', ''];
75	110
	111	+ if(cssClassNames !== null){
	112	+ chart.settings['cssClassNames'] = cssClassNames;
	113	+ }
	114	+
76	115	// in preview mode, cssClassNames will not exist when a color is changed.
77	116	if(typeof chart.settings['cssClassNames'] !== 'undefined'){
	117	+ cssClassNames = chart.settings['cssClassNames'];
78	118	if(typeof chart.settings['cssClassNames']['oddTableRow'] !== 'undefined'){
79	119	stripe[0] = chart.settings['cssClassNames']['oddTableRow'];
80	120	}
81	121
		@@ -89,8 +129,12 @@
89	129	} );
90	130	}
91	131	}
92	132
	133	+ // remove this so that the eval does not fail.
	134	+ delete chart.settings['internal_title'];
	135	+
	136	+ var additional = [];
93	137	for (i in chart.settings) {
94	138	var valoo = chart.settings[i];
95	139
96	140	// remove the type suffix to get the name of the setting.
		@@ -106,8 +150,11 @@
106	150	default:
107	151	if(parseInt(valoo) > 0){
108	152	valoo = parseInt(valoo);
109	153	}
	154	+ if(i === 'pageLength' && (valoo === '' || parseInt(valoo) < 0)){
	155	+ valoo = 1;
	156	+ }
110	157	}
111	158
112	159	// if the setting name has an '_' this means it is a sub-setting e.g. select_items means { select: { items: ... } }.
113	160	var array = i.split('_');
		@@ -113,14 +160,19 @@
113	160	var array = i.split('_');
114	161	if(array.length === 2){
115	162	i = eval( array[0] ); // jshint ignore:line
116	163	i[ array[1] ] = valoo;
	164	+ additional[ array[0] ] = i;
	165	+ if(array[0] === 'select' && array[1] === 'info' ){
	166	+ // enable main info or the selection info will not show.
	167	+ $.extend( settings, {info: true} );
	168	+ }
	169	+ } else {
	170	+ settings[i] = valoo;
117	171	}
118		- settings[i] = valoo;
119	172	}
	173	+ $.extend( settings, additional );
120	174
121		- $.extend( $.fn.dataTable.defaults, settings );
122		-
123	175	cols = [];
124	176	for (j = 0; j < series.length; j++) {
125	177	type = series[j].type;
126	178	switch(type){
		@@ -132,9 +184,8 @@
132	184	case 'timeofday':
133	185	type = 'date';
134	186	break;
135	187	}
136		-
137	188	render = addRenderer(series[j].type, settings.series, j);
138	189
139	190	var col = { title: series[j].label, data: series[j].label, type: type, render: render };
140	191	if(typeof chart.settings['cssClassNames'] !== 'undefined' && typeof chart.settings['cssClassNames']['tableCell'] !== 'undefined'){
		@@ -147,22 +198,36 @@
147	198	for (i = 0; i < data.length; i++) {
148	199	row = [];
149	200	for (j = 0; j < series.length; j++) {
150	201	var datum = data[i][j];
	202	+ // datum could be undefined for dynamic data (e.g. through json).
	203	+ if(typeof datum === 'undefined'){
	204	+ datum = data[i][series[j].label];
	205	+ }
151	206	row[ series[j].label ] = datum;
152	207	}
153	208	rows.push(row);
154	209	}
155	210
	211	+ $.extend( settings, {
	212	+ data: rows,
	213	+ columns: cols,
	214	+ stripeClasses: stripe,
	215	+ } );
	216	+
156	217	// allow user to extend the settings.
157	218	$('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
158	219
159	220	table = $('#' + id + ' table.visualizer-data-table');
160		- table.DataTable( {
161		- data: rows,
162		- columns: cols,
163		- stripeClasses: stripe,
164		- } );
	221	+ table.DataTable( settings );
	222	+
	223	+ // header row is handled here as the class is added dynamically to it (after the table is rendered).
	224	+ if(typeof chart.settings['cssClassNames'] !== 'undefined'){
	225	+ if(typeof chart.settings['cssClassNames']['headerRow'] !== 'undefined'){
	226	+ $('#' + id + ' table thead tr').addClass( chart.settings['cssClassNames']['headerRow'] );
	227	+ }
	228	+ }
	229	+
165	230	$('.loader').remove();
166	231	}
167	232
168	233	function addRenderer(type, series, index){
		@@ -182,9 +247,9 @@
182	247	}
183	248	if(typeof series.format.decimal !== ''){
184	249	parts[1] = series.format.decimal;
185	250	}
186		- if(typeof series.format.precision !== ''){
	251	+ if(typeof series.format.precision !== '' && parseInt(series.format.precision) > 0){
187	252	parts[2] = series.format.precision;
188	253	}
189	254	if(typeof series.format.prefix !== ''){
190	255	parts[3] = series.format.prefix;
		@@ -200,10 +265,21 @@
200	265	if(typeof series.format.to !== 'undefined' && typeof series.format.from !== 'undefined' && series.format.from != '' && series.format.to !== ''){
201	266	render = $.fn.dataTable.render.moment(series.format.from, series.format.to);
202	267	}
203	268	break;
	269	+ default:
	270	+ render = $.fn.dataTable.render.extra = function ( data, type, row ) {
	271	+ if((data === true || data === 'true') && typeof series.format !== 'undefined' && series.format.truthy !== ''){
	272	+ data = series.format.truthy.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
	273	+ }
	274	+ if((data === false || data === 'false') && typeof series.format !== 'undefined' && series.format.falsy !== ''){
	275	+ data = series.format.falsy.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
	276	+ }
	277	+ return data;
	278	+ }
204	279	}
205	280	/* jshint ignore:end */
	281	+
206	282	return render;
207	283	}
208	284
209	285	function render(v) {
		@@ -211,22 +287,25 @@
211	287	renderChart(id, v);
212	288	}
213	289	}
214	290
215		- if(typeof visualizer !== 'undefined'){
216		- // called while updating the chart.
217		- visualizer.update = function(){
218		- renderChart('canvas', visualizer);
219		- };
220		- }
221		-
222	291	$('body').on('visualizer:render:chart:start', function(event, v){
223	292	all_charts = v.charts;
224		- render(v);
	293	+
	294	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	295	+ renderChart(v.id, v);
	296	+ } else {
	297	+ render(v);
	298	+ }
225	299	});
226	300
227	301	$('body').on('visualizer:render:specificchart:start', function(event, v){
228	302	renderSpecificChart(v.id, v.chart, v.v);
	303	+ });
	304	+
	305	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	306	+ var data = v || event.detail;
	307	+ renderSpecificChart('canvas', all_charts['canvas'], data.visualizer);
229	308	});
230	309
231	310	// front end actions
232	311	$('body').on('visualizer:action:specificchart', function(event, v){