← All changes | js/render-facade.js +35 -8 3.10.10 → 4.0.8 View file →

		@@ -1,8 +1,9 @@
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) {
		@@ -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) {
		@@ -127,18 +128,44 @@
127	128	$('body').trigger('visualizer:render:chart:start', viz);
128	129	}
129	130
130	131	function displayChartsOnFrontEnd() {
	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	+ }
131	139
132		- $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){
	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	+ }
133	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){
134	161	// Do not render charts that are intentionally hidden.
135		- var style = window.getComputedStyle(element);
	162	+ const style = window.getComputedStyle($(element).find('.visualizer-front')[0]);
136	163	if (style.display === 'none' || style.visibility === 'hidden') {
137	164	return;
138	165	}
139		-
140		- var id = $(element).addClass('viz-facade-loaded').attr('id');
	166	+
	167	+ const id = $(element).find('.visualizer-front').addClass('viz-facade-loaded').attr('id');
141	168	setTimeout(function(){
142	169	// Add a short delay between each chart to avoid overloading the browser event loop.
143	170	showChart(id);
144	171	}, ( index + 1 ) * 100);