← All changes | js/render-facade.js +36 -179 4.0.8 → 3.1.2 View file →

		@@ -1,78 +1,61 @@
1	1	/* global console */
2	2	/* global visualizer */
3	3	/* global jQuery */
4		-window['vizClipboard1'] = window['vizClipboard1'] || null;
5		-window['vizClipboard2'] = window['vizClipboard2'] || null;
	4	+
6	5	(function($, visualizer){
7		-
	6	+
8	7	function initActionsButtons(v) {
9		- if($('a.visualizer-chart-shortcode').length > 0 && vizClipboard1 === null) {
10		- vizClipboard1 = new ClipboardJS('a.visualizer-chart-shortcode'); // jshint ignore:line
11		- vizClipboard1.on('success', function(e) {
	8	+ if($('a.visualizer-action[data-visualizer-type=copy]').length > 0) {
	9	+ var clipboard = new Clipboard('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line
	10	+ clipboard.on('success', function(e) {
12	11	window.alert(v.i10n['copied']);
13		-
14	12	});
15	13	}
16		-
17		- if($('a.visualizer-action[data-visualizer-type=copy]').length > 0 && vizClipboard2 === null) {
18		- $('a.visualizer-action[data-visualizer-type=copy]').on('click', function(e) {
19		- e.preventDefault();
20		- });
21		- vizClipboard2 = new ClipboardJS('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line
22		- vizClipboard2.on('success', function(e) {
23		- window.alert(v.i10n['copied']);
24		- });
25		- }
26		- $('a.visualizer-action[data-visualizer-type!=copy]').off('click').on('click', function(e) {
	14	+ $('a.visualizer-action[data-visualizer-type!=copy]').on('click', function(e) {
27	15	var type = $(this).attr( 'data-visualizer-type' );
28	16	var chart = $(this).attr( 'data-visualizer-chart-id' );
29		- var container = $(this).attr( 'data-visualizer-container-id' );
30	17	var lock = $('.visualizer-front.visualizer-front-' + chart);
31		- var mime = $(this).attr( 'data-visualizer-mime' );
32	18	lock.lock();
33	19	e.preventDefault();
34	20	$.ajax({
35	21	url : v.rest_url.replace('#id#', chart).replace('#type#', type),
36		- beforeSend: function ( xhr ) {
37		- xhr.setRequestHeader( 'X-WP-Nonce', v.wp_nonce );
38		- },
39	22	success: function(data) {
40	23	if (data && data.data) {
41	24	switch(type){
42	25	case 'csv':
43		- var blob = new Blob([data.data.csv], {type: mime });
44		- if(window.navigator.msSaveOrOpenBlob){
45		- window.navigator.msSaveOrOpenBlob(blob, data.data.name);
46		- } else {
47		- var url = window.URL.createObjectURL(blob);
48		- var $a = $("<a>");
49		- $a.attr("href", url);
50		- $("body").append($a);
51		- $a.attr("download", data.data.name);
52		- $a[0].click();
53		- setTimeout(function () {
54		- window.URL.revokeObjectURL(url);
55		- $a.remove();
56		- }, 100);
57		- }
	26	+ var a = document.createElement("a");
	27	+ document.body.appendChild(a);
	28	+ a.style = "display: none";
	29	+ var blob = new Blob([data.data.csv], {type: $(this).attr( 'data-visualizer-mime' ) }),
	30	+ url = window.URL.createObjectURL(blob);
	31	+ a.href = url;
	32	+ a.download = data.data.name;
	33	+ a.click();
	34	+ setTimeout(function () {
	35	+ window.URL.revokeObjectURL(url);
	36	+ }, 100);
58	37	break;
59	38	case 'xls':
60		- if(window.navigator.msSaveOrOpenBlob){
61		- blob = new Blob([s2ab(atob(data.data.raw))], {type: '' });
62		- window.navigator.msSaveOrOpenBlob(blob, data.data.name);
63		- } else {
64		- var $a = $("<a>"); // jshint ignore:line
65		- $a.attr("href", data.data.csv);
66		- $("body").append($a);
67		- $a.attr("download", data.data.name);
68		- $a[0].click();
69		- $a.remove();
70		- }
	39	+ var $a = $("<a>");
	40	+ $a.attr("href",data.data.csv);
	41	+ $("body").append($a);
	42	+ $a.attr("download",data.data.name);
	43	+ $a[0].click();
	44	+ $a.remove();
71	45	break;
72	46	case 'print':
73		- case 'image':
74		- $('body').trigger('visualizer:action:specificchart', {action: type, id: container, data: data.data.csv, dataObj: data.data});
	47	+ var iframe = $('<iframe>').attr("name", "print-visualization").attr("id", "print-visualization").css("position", "absolute");
	48	+ iframe.appendTo($('body'));
	49	+ var iframe_doc = iframe.get(0).contentWindow || iframe.get(0).contentDocument.document || iframe.get(0).contentDocument;
	50	+ iframe_doc.document.open();
	51	+ iframe_doc.document.write(data.data.csv);
	52	+ iframe_doc.document.close();
	53	+ setTimeout(function(){
	54	+ window.frames['print-visualization'].focus();
	55	+ window.frames['print-visualization'].print();
	56	+ iframe.remove();
	57	+ }, 500);
75	58	break;
76	59	default:
77	60	if(window.visualizer_perform_action) {
78	61	window.visualizer_perform_action(type, chart, data.data);
		@@ -85,138 +68,12 @@
85	68	});
86	69	});
87	70	}
88	71
89		- function s2ab(s) {
90		- var buf = new ArrayBuffer(s.length);
91		- var view = new Uint8Array(buf);
92		- for (var i=0; i !== s.length; ++i) {
93		- view[i] = s.charCodeAt(i) & 0xFF;
94		- }
95		- return buf;
96		- }
97		-
98	72	$(document).ready(function(){
99		-
100		- // for updating the currently displayed chart (preview mode)
101		- window.vizUpdateChartPreview = function(){
102		- var event = new CustomEvent('visualizer:render:currentchart:update', {detail: {visualizer: visualizer}});
103		- document.body.dispatchEvent(event);
104		- };
105		-
106		- initChartDisplay();
	73	+ $('body').trigger('visualizer:render:chart:start', visualizer);
107	74	initActionsButtons(visualizer);
108		- registerDefaultActions();
109	75	});
110		-
111		- function initChartDisplay() {
112		- if(visualizer.is_front == true){ // jshint ignore:line
113		- displayChartsOnFrontEnd();
114		- } else {
115		- showChart();
116		- }
117		- }
118		-
119		- /**
120		- * If an `id` is provided, that particular chart will load.
121		- */
122		- function showChart(id) {
123		- // clone the visualizer object so that the original object is not affected.
124		- var viz = Object.assign(visualizer, window.visualizer || {});
125		- if(id){
126		- viz.id = id;
127		- }
128		- $('body').trigger('visualizer:render:chart:start', viz);
129		- }
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		- }
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.
170		- showChart(id);
171		- }, ( index + 1 ) * 100);
172		- });
173		-
174		- // interate through all charts that are to be lazy-loaded and observe each one.
175		- $('div.visualizer-front.visualizer-lazy').each(function(index, element){
176		- var id = $(element).attr('id');
177		- var limit = $(element).attr('data-lazy-limit');
178		- if(!limit){
179		- limit = 300;
180		- }
181		- var target = document.querySelector('#' + id);
182		-
183		- // configure the intersection observer instance
184		- var intersectionObserverOptions = {
185		- root: null,
186		- rootMargin: limit + 'px',
187		- threshold: 0
188		- };
189		-
190		- var observer = new IntersectionObserver(function(entries) {
191		- entries.forEach(function(entry) {
192		- if (entry.isIntersecting) {
193		- observer.unobserve(target);
194		- showChart($(entry.target).attr('id'));
195		- }
196		- });
197		- }, intersectionObserverOptions);
198		-
199		- // start observing.
200		- observer.observe(target);
201		- });
202		- }
203		-
204		- function registerDefaultActions(){
205		- $('body').off('visualizer:action:specificchart:defaultprint').on('visualizer:action:specificchart:defaultprint', function(event, v){
206		- var iframe = $('<iframe>').attr("name", "print-visualization").attr("id", "print-visualization").css("position", "absolute");
207		- iframe.appendTo($('body'));
208		- var iframe_doc = iframe.get(0).contentWindow || iframe.get(0).contentDocument.document || iframe.get(0).contentDocument;
209		- iframe_doc.document.open();
210		- iframe_doc.document.write(v.data);
211		- iframe_doc.document.close();
212		- setTimeout(function(){
213		- window.frames['print-visualization'].focus();
214		- window.frames['print-visualization'].print();
215		- iframe.remove();
216		- }, 500);
217		- });
218		- }
219	76	})(jQuery, visualizer);
220	77
221	78	(function ($) {
222	79	$.fn.lock = function () {
		@@ -264,5 +121,5 @@
264	121	});
265	122
266	123	return $(this);
267	124	};
268		-})(jQuery);
	125	+})(jQuery);