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

		@@ -1,61 +1,78 @@
1	1	/* global console */
2	2	/* global visualizer */
3	3	/* global jQuery */
	4	+window['vizClipboard1'] = window['vizClipboard1'] || null;
	5	+window['vizClipboard2'] = window['vizClipboard2'] || null;
	6	+(function($, visualizer){
	7	+
	8	+ 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) {
	12	+ window.alert(v.i10n['copied']);
4	13
5		-(function($, visualizer){
	14	+ });
	15	+ }
6	16
7		- function initActionsButtons(v) {
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) {
	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) {
11	23	window.alert(v.i10n['copied']);
12	24	});
13	25	}
14		- $('a.visualizer-action[data-visualizer-type!=copy]').on('click', function(e) {
	26	+ $('a.visualizer-action[data-visualizer-type!=copy]').off('click').on('click', function(e) {
15	27	var type = $(this).attr( 'data-visualizer-type' );
16	28	var chart = $(this).attr( 'data-visualizer-chart-id' );
	29	+ var container = $(this).attr( 'data-visualizer-container-id' );
17	30	var lock = $('.visualizer-front.visualizer-front-' + chart);
	31	+ var mime = $(this).attr( 'data-visualizer-mime' );
18	32	lock.lock();
19	33	e.preventDefault();
20	34	$.ajax({
21	35	url : v.rest_url.replace('#id#', chart).replace('#type#', type),
	36	+ beforeSend: function ( xhr ) {
	37	+ xhr.setRequestHeader( 'X-WP-Nonce', v.wp_nonce );
	38	+ },
22	39	success: function(data) {
23	40	if (data && data.data) {
24	41	switch(type){
25	42	case 'csv':
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);
	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	+ }
37	58	break;
38	59	case 'xls':
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();
	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	+ }
45	71	break;
46	72	case 'print':
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);
	73	+ case 'image':
	74	+ $('body').trigger('visualizer:action:specificchart', {action: type, id: container, data: data.data.csv, dataObj: data.data});
58	75	break;
59	76	default:
60	77	if(window.visualizer_perform_action) {
61	78	window.visualizer_perform_action(type, chart, data.data);
		@@ -68,12 +85,138 @@
68	85	});
69	86	});
70	87	}
71	88
	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	+
72	98	$(document).ready(function(){
73		- $('body').trigger('visualizer:render:chart:start', visualizer);
	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();
74	107	initActionsButtons(visualizer);
	108	+ registerDefaultActions();
75	109	});
	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	+ }
76	219	})(jQuery, visualizer);
77	220
78	221	(function ($) {
79	222	$.fn.lock = function () {
		@@ -121,5 +264,5 @@
121	264	});
122	265
123	266	return $(this);
124	267	};
125		-})(jQuery);
	268	+})(jQuery);