| @@ -1,13 +1,24 @@ | ||
| 1 | 1 | /* global console */ |
| 2 | 2 | /* global visualizer */ |
| 3 | 3 | /* global jQuery */ |
| 4 | - | |
| 4 | +var vizClipboard1=null; | |
| 5 | 5 | (function($, visualizer){ |
| 6 | 6 | |
| 7 | 7 | function initActionsButtons(v) { |
| 8 | + if($('a.visualizer-chart-shortcode').length > 0 && vizClipboard1 === null) { | |
| 9 | + vizClipboard1 = new ClipboardJS('a.visualizer-chart-shortcode'); // jshint ignore:line | |
| 10 | + vizClipboard1.on('success', function(e) { | |
| 11 | + window.alert(v.i10n['copied']); | |
| 12 | + | |
| 13 | + }); | |
| 14 | + } | |
| 15 | + | |
| 8 | 16 | 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 | |
| 17 | + $('a.visualizer-action[data-visualizer-type=copy]').on('click', function(e) { | |
| 18 | + e.preventDefault(); | |
| 19 | + }); | |
| 20 | + var clipboard = new ClipboardJS('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line | |
| 10 | 21 | clipboard.on('success', function(e) { |
| 11 | 22 | window.alert(v.i10n['copied']); |
| 12 | 23 | }); |
| 13 | 24 | } |
| @@ -15,38 +26,52 @@ | ||
| 15 | 26 | var type = $(this).attr( 'data-visualizer-type' ); |
| 16 | 27 | var chart = $(this).attr( 'data-visualizer-chart-id' ); |
| 17 | 28 | var container = $(this).attr( 'data-visualizer-container-id' ); |
| 18 | 29 | var lock = $('.visualizer-front.visualizer-front-' + chart); |
| 30 | + var mime = $(this).attr( 'data-visualizer-mime' ); | |
| 19 | 31 | lock.lock(); |
| 20 | 32 | e.preventDefault(); |
| 21 | 33 | $.ajax({ |
| 22 | 34 | url : v.rest_url.replace('#id#', chart).replace('#type#', type), |
| 35 | + beforeSend: function ( xhr ) { | |
| 36 | + xhr.setRequestHeader( 'X-WP-Nonce', v.wp_nonce ); | |
| 37 | + }, | |
| 23 | 38 | success: function(data) { |
| 24 | 39 | if (data && data.data) { |
| 25 | 40 | switch(type){ |
| 26 | 41 | case 'csv': |
| 27 | - var a = document.createElement("a"); | |
| 28 | - document.body.appendChild(a); | |
| 29 | - a.style = "display: none"; | |
| 30 | - var blob = new Blob([data.data.csv], {type: $(this).attr( 'data-visualizer-mime' ) }), | |
| 31 | - url = window.URL.createObjectURL(blob); | |
| 32 | - a.href = url; | |
| 33 | - a.download = data.data.name; | |
| 34 | - a.click(); | |
| 35 | - setTimeout(function () { | |
| 36 | - window.URL.revokeObjectURL(url); | |
| 37 | - }, 100); | |
| 42 | + var blob = new Blob([data.data.csv], {type: mime }); | |
| 43 | + if(window.navigator.msSaveOrOpenBlob){ | |
| 44 | + window.navigator.msSaveOrOpenBlob(blob, data.data.name); | |
| 45 | + } else { | |
| 46 | + var url = window.URL.createObjectURL(blob); | |
| 47 | + var $a = $("<a>"); | |
| 48 | + $a.attr("href", url); | |
| 49 | + $("body").append($a); | |
| 50 | + $a.attr("download", data.data.name); | |
| 51 | + $a[0].click(); | |
| 52 | + setTimeout(function () { | |
| 53 | + window.URL.revokeObjectURL(url); | |
| 54 | + $a.remove(); | |
| 55 | + }, 100); | |
| 56 | + } | |
| 38 | 57 | break; |
| 39 | 58 | case 'xls': |
| 40 | - var $a = $("<a>"); | |
| 41 | - $a.attr("href",data.data.csv); | |
| 42 | - $("body").append($a); | |
| 43 | - $a.attr("download",data.data.name); | |
| 44 | - $a[0].click(); | |
| 45 | - $a.remove(); | |
| 59 | + if(window.navigator.msSaveOrOpenBlob){ | |
| 60 | + blob = new Blob([s2ab(atob(data.data.raw))], {type: '' }); | |
| 61 | + window.navigator.msSaveOrOpenBlob(blob, data.data.name); | |
| 62 | + } else { | |
| 63 | + var $a = $("<a>"); // jshint ignore:line | |
| 64 | + $a.attr("href", data.data.csv); | |
| 65 | + $("body").append($a); | |
| 66 | + $a.attr("download", data.data.name); | |
| 67 | + $a[0].click(); | |
| 68 | + $a.remove(); | |
| 69 | + } | |
| 46 | 70 | break; |
| 47 | 71 | case 'print': |
| 48 | - $('body').trigger('visualizer:action:specificchart', {action: 'print', id: container, data: data.data.csv}); | |
| 72 | + case 'image': | |
| 73 | + $('body').trigger('visualizer:action:specificchart', {action: type, id: container, data: data.data.csv, dataObj: data.data}); | |
| 49 | 74 | break; |
| 50 | 75 | default: |
| 51 | 76 | if(window.visualizer_perform_action) { |
| 52 | 77 | window.visualizer_perform_action(type, chart, data.data); |
| @@ -59,14 +84,98 @@ | ||
| 59 | 84 | }); |
| 60 | 85 | }); |
| 61 | 86 | } |
| 62 | 87 | |
| 88 | + function s2ab(s) { | |
| 89 | + var buf = new ArrayBuffer(s.length); | |
| 90 | + var view = new Uint8Array(buf); | |
| 91 | + for (var i=0; i !== s.length; ++i) { | |
| 92 | + view[i] = s.charCodeAt(i) & 0xFF; | |
| 93 | + } | |
| 94 | + return buf; | |
| 95 | + } | |
| 96 | + | |
| 63 | 97 | $(document).ready(function(){ |
| 64 | - $('body').trigger('visualizer:render:chart:start', visualizer); | |
| 98 | + | |
| 99 | + // for updating the currently displayed chart (preview mode) | |
| 100 | + window.vizUpdateChartPreview = function(){ | |
| 101 | + var event = new CustomEvent('visualizer:render:currentchart:update', {detail: {visualizer: visualizer}}); | |
| 102 | + document.body.dispatchEvent(event); | |
| 103 | + }; | |
| 104 | + | |
| 105 | + initChartDisplay(); | |
| 65 | 106 | initActionsButtons(visualizer); |
| 66 | 107 | registerDefaultActions(); |
| 67 | 108 | }); |
| 68 | 109 | |
| 110 | + // Refresh charts if chart not generated. | |
| 111 | + function refreshEachCharts() { | |
| 112 | + setTimeout( function() { | |
| 113 | + displayChartsOnFrontEnd(); | |
| 114 | + }, 100 ); | |
| 115 | + } | |
| 116 | + | |
| 117 | + function initChartDisplay() { | |
| 118 | + if(visualizer.is_front == true){ // jshint ignore:line | |
| 119 | + displayChartsOnFrontEnd(); | |
| 120 | + }else{ | |
| 121 | + showChart(); | |
| 122 | + } | |
| 123 | + } | |
| 124 | + | |
| 125 | + /** | |
| 126 | + * If an `id` is provided, that particular chart will load. | |
| 127 | + */ | |
| 128 | + function showChart(id) { | |
| 129 | + // clone the visualizer object so that the original object is not affected. | |
| 130 | + var viz = Object.assign(visualizer, window.visualizer || {}); | |
| 131 | + if(id){ | |
| 132 | + viz.id = id; | |
| 133 | + } | |
| 134 | + $('body').trigger('visualizer:render:chart:start', viz); | |
| 135 | + } | |
| 136 | + | |
| 137 | + function displayChartsOnFrontEnd() { | |
| 138 | + // display all charts that are NOT to be lazy-loaded. | |
| 139 | + $( 'div.viz-facade-loaded:not(.visualizer-lazy):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'); | |
| 143 | + showChart(id); | |
| 144 | + } | |
| 145 | + refreshEachCharts(); | |
| 146 | + }); | |
| 147 | + | |
| 148 | + // interate through all charts that are to be lazy-loaded and observe each one. | |
| 149 | + $('div.visualizer-front.visualizer-lazy').each(function(index, element){ | |
| 150 | + var id = $(element).attr('id'); | |
| 151 | + var limit = $(element).attr('data-lazy-limit'); | |
| 152 | + if(!limit){ | |
| 153 | + limit = 300; | |
| 154 | + } | |
| 155 | + var target = document.querySelector('#' + id); | |
| 156 | + | |
| 157 | + // configure the intersection observer instance | |
| 158 | + var intersectionObserverOptions = { | |
| 159 | + root: null, | |
| 160 | + rootMargin: limit + 'px', | |
| 161 | + threshold: 0 | |
| 162 | + }; | |
| 163 | + | |
| 164 | + var observer = new IntersectionObserver(function(entries) { | |
| 165 | + entries.forEach(function(entry) { | |
| 166 | + if (entry.isIntersecting) { | |
| 167 | + observer.unobserve(target); | |
| 168 | + showChart($(entry.target).attr('id')); | |
| 169 | + } | |
| 170 | + }); | |
| 171 | + }, intersectionObserverOptions); | |
| 172 | + | |
| 173 | + // start observing. | |
| 174 | + observer.observe(target); | |
| 175 | + }); | |
| 176 | + } | |
| 177 | + | |
| 69 | 178 | function registerDefaultActions(){ |
| 70 | 179 | $('body').off('visualizer:action:specificchart:defaultprint').on('visualizer:action:specificchart:defaultprint', function(event, v){ |
| 71 | 180 | var iframe = $('<iframe>').attr("name", "print-visualization").attr("id", "print-visualization").css("position", "absolute"); |
| 72 | 181 | iframe.appendTo($('body')); |
| @@ -129,5 +238,5 @@ | ||
| 129 | 238 | }); |
| 130 | 239 | |
| 131 | 240 | return $(this); |
| 132 | 241 | }; |
| 133 | -})(jQuery); | |
| 242 | +})(jQuery); | |