← All changes | js/render-facade.js +46 -20 3.10.0 → 4.0.8 View file →

		@@ -1,10 +1,11 @@
1	1	/* global console */
2	2	/* global visualizer */
3	3	/* global jQuery */
4		-var vizClipboard1=null;
	4	+window['vizClipboard1'] = window['vizClipboard1'] || null;
	5	+window['vizClipboard2'] = window['vizClipboard2'] || null;
5	6	(function($, visualizer){
6		-
	7	+
7	8	function initActionsButtons(v) {
8	9	if($('a.visualizer-chart-shortcode').length > 0 && vizClipboard1 === null) {
9	10	vizClipboard1 = new ClipboardJS('a.visualizer-chart-shortcode'); // jshint ignore:line
10	11	vizClipboard1.on('success', function(e) {
		@@ -12,14 +13,14 @@
12	13
13	14	});
14	15	}
15	16
16		- if($('a.visualizer-action[data-visualizer-type=copy]').length > 0) {
	17	+ if($('a.visualizer-action[data-visualizer-type=copy]').length > 0 && vizClipboard2 === null) {
17	18	$('a.visualizer-action[data-visualizer-type=copy]').on('click', function(e) {
18	19	e.preventDefault();
19	20	});
20		- var clipboard = new ClipboardJS('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line
21		- clipboard.on('success', function(e) {
	21	+ vizClipboard2 = new ClipboardJS('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line
	22	+ vizClipboard2.on('success', function(e) {
22	23	window.alert(v.i10n['copied']);
23	24	});
24	25	}
25	26	$('a.visualizer-action[data-visualizer-type!=copy]').off('click').on('click', function(e) {
		@@ -106,19 +107,12 @@
106	107	initActionsButtons(visualizer);
107	108	registerDefaultActions();
108	109	});
109	110
110		- // Refresh charts if chart not generated.
111		- function refreshEachCharts() {
112		- setTimeout( function() {
113		- displayChartsOnFrontEnd();
114		- }, 100 );
115		- }
116		-
117	111	function initChartDisplay() {
118	112	if(visualizer.is_front == true){ // jshint ignore:line
119	113	displayChartsOnFrontEnd();
120		- }else{
	114	+ } else {
121	115	showChart();
122	116	}
123	117	}
124	118
		@@ -134,16 +128,48 @@
134	128	$('body').trigger('visualizer:render:chart:start', viz);
135	129	}
136	130
137	131	function displayChartsOnFrontEnd() {
138		- // display all charts that are NOT to be lazy-loaded.
139		- $( 'div.viz-facade-loaded:not(.visualizer-lazy):not(.visualizer-cw-error):empty' ).removeClass( 'viz-facade-loaded' );
140		- $('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){
141		- if ( $(element).is(':visible') ) {
142		- var id = $(element).addClass('viz-facade-loaded').attr('id');
	132	+ function renderVisibleLazyCharts() {
	133	+ $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){
	134	+ // Do not render charts that are intentionally hidden.
	135	+ const style = window.getComputedStyle(element);
	136	+ if (style.display === 'none' || style.visibility === 'hidden') {
	137	+ return;
	138	+ }
	139	+
	140	+ // Only render charts that are currently within the viewport.
	141	+ const rect = element.getBoundingClientRect();
	142	+ const inViewport = rect.bottom >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight);
	143	+ if (!inViewport) {
	144	+ return;
	145	+ }
	146	+
	147	+ const id = $(element).addClass('viz-facade-loaded').attr('id');
	148	+ setTimeout(function(){
	149	+ // Add a short delay between each chart to avoid overloading the browser event loop.
	150	+ showChart(id);
	151	+ }, ( index + 1 ) * 100);
	152	+ });
	153	+ }
	154	+
	155	+ $(window).on('scroll', renderVisibleLazyCharts);
	156	+
	157	+ // Run once on page load to render any lazy charts already in the viewport.
	158	+ renderVisibleLazyCharts();
	159	+
	160	+ $('div.visualizer-front-container:not(.visualizer-lazy-render)').each(function(index, element){
	161	+ // Do not render charts that are intentionally hidden.
	162	+ const style = window.getComputedStyle($(element).find('.visualizer-front')[0]);
	163	+ if (style.display === 'none' || style.visibility === 'hidden') {
	164	+ return;
	165	+ }
	166	+
	167	+ const id = $(element).find('.visualizer-front').addClass('viz-facade-loaded').attr('id');
	168	+ setTimeout(function(){
	169	+ // Add a short delay between each chart to avoid overloading the browser event loop.
143	170	showChart(id);
144		- }
145		- refreshEachCharts();
	171	+ }, ( index + 1 ) * 100);
146	172	});
147	173
148	174	// interate through all charts that are to be lazy-loaded and observe each one.
149	175	$('div.visualizer-front.visualizer-lazy').each(function(index, element){