| @@ -1,16 +1,15 @@ | ||
| 1 | 1 | /* global console */ |
| 2 | 2 | /* global visualizer */ |
| 3 | 3 | /* global jQuery */ |
| 4 | -var vizClipboard1=null; | |
| 4 | + | |
| 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) { | |
| 8 | + if($('a.visualizer-chart-shortcode').length > 0) { | |
| 9 | + var clipboard1 = new Clipboard('a.visualizer-chart-shortcode'); // jshint ignore:line | |
| 10 | + clipboard1.on('success', function(e) { | |
| 11 | 11 | window.alert(v.i10n['copied']); |
| 12 | - | |
| 13 | 12 | }); |
| 14 | 13 | } |
| 15 | 14 | |
| 16 | 15 | if($('a.visualizer-action[data-visualizer-type=copy]').length > 0) { |
| @@ -16,9 +15,9 @@ | ||
| 16 | 15 | if($('a.visualizer-action[data-visualizer-type=copy]').length > 0) { |
| 17 | 16 | $('a.visualizer-action[data-visualizer-type=copy]').on('click', function(e) { |
| 18 | 17 | e.preventDefault(); |
| 19 | 18 | }); |
| 20 | - var clipboard = new ClipboardJS('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line | |
| 19 | + var clipboard = new Clipboard('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line | |
| 21 | 20 | clipboard.on('success', function(e) { |
| 22 | 21 | window.alert(v.i10n['copied']); |
| 23 | 22 | }); |
| 24 | 23 | } |
| @@ -31,11 +30,8 @@ | ||
| 31 | 30 | lock.lock(); |
| 32 | 31 | e.preventDefault(); |
| 33 | 32 | $.ajax({ |
| 34 | 33 | url : v.rest_url.replace('#id#', chart).replace('#type#', type), |
| 35 | - beforeSend: function ( xhr ) { | |
| 36 | - xhr.setRequestHeader( 'X-WP-Nonce', v.wp_nonce ); | |
| 37 | - }, | |
| 38 | 34 | success: function(data) { |
| 39 | 35 | if (data && data.data) { |
| 40 | 36 | switch(type){ |
| 41 | 37 | case 'csv': |
| @@ -101,8 +97,25 @@ | ||
| 101 | 97 | var event = new CustomEvent('visualizer:render:currentchart:update', {detail: {visualizer: visualizer}}); |
| 102 | 98 | document.body.dispatchEvent(event); |
| 103 | 99 | }; |
| 104 | 100 | |
| 101 | + // facade loads N times in the library and front end (where N = the number of different chart libraries supported) | |
| 102 | + // so all charts are also loaded N times | |
| 103 | + // this will ensure that no matter how many times facade is loaded, it initializes all charts only once. | |
| 104 | + // fixed as part of the issue to add annotations. | |
| 105 | + if(localStorage.getItem( 'viz-facade-loaded' ) === '1'){ | |
| 106 | + // prevent library from hanging. | |
| 107 | + setTimeout( function(){ | |
| 108 | + localStorage.removeItem( 'viz-facade-loaded' ); | |
| 109 | + }, 2000); | |
| 110 | + return; | |
| 111 | + } | |
| 112 | + localStorage.setItem( 'viz-facade-loaded', '1'); | |
| 113 | + // remove the flag so that repeated loading of the library does not cause problems. | |
| 114 | + setTimeout( function(){ | |
| 115 | + localStorage.removeItem( 'viz-facade-loaded' ); | |
| 116 | + }, 2000); | |
| 117 | + | |
| 105 | 118 | initChartDisplay(); |
| 106 | 119 | initActionsButtons(visualizer); |
| 107 | 120 | registerDefaultActions(); |
| 108 | 121 | }); |
| @@ -109,9 +122,9 @@ | ||
| 109 | 122 | |
| 110 | 123 | function initChartDisplay() { |
| 111 | 124 | if(visualizer.is_front == true){ // jshint ignore:line |
| 112 | 125 | displayChartsOnFrontEnd(); |
| 113 | - } else { | |
| 126 | + }else{ | |
| 114 | 127 | showChart(); |
| 115 | 128 | } |
| 116 | 129 | } |
| 117 | 130 | |
| @@ -119,9 +132,9 @@ | ||
| 119 | 132 | * If an `id` is provided, that particular chart will load. |
| 120 | 133 | */ |
| 121 | 134 | function showChart(id) { |
| 122 | 135 | // clone the visualizer object so that the original object is not affected. |
| 123 | - var viz = Object.assign(visualizer, window.visualizer || {}); | |
| 136 | + var viz = Object.assign({}, visualizer); | |
| 124 | 137 | if(id){ |
| 125 | 138 | viz.id = id; |
| 126 | 139 | } |
| 127 | 140 | $('body').trigger('visualizer:render:chart:start', viz); |
| @@ -127,22 +140,12 @@ | ||
| 127 | 140 | $('body').trigger('visualizer:render:chart:start', viz); |
| 128 | 141 | } |
| 129 | 142 | |
| 130 | 143 | function displayChartsOnFrontEnd() { |
| 131 | - | |
| 132 | - $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){ | |
| 133 | - | |
| 134 | - // Do not render charts that are intentionally hidden. | |
| 135 | - var style = window.getComputedStyle(element); | |
| 136 | - if (style.display === 'none' || style.visibility === 'hidden') { | |
| 137 | - return; | |
| 138 | - } | |
| 139 | - | |
| 140 | - var id = $(element).addClass('viz-facade-loaded').attr('id'); | |
| 141 | - setTimeout(function(){ | |
| 142 | - // Add a short delay between each chart to avoid overloading the browser event loop. | |
| 143 | - showChart(id); | |
| 144 | - }, ( index + 1 ) * 100); | |
| 144 | + // display all charts that are NOT to be lazy-loaded. | |
| 145 | + $('div.visualizer-front:not(.visualizer-lazy)').each(function(index, element){ | |
| 146 | + var id = $(element).attr('id'); | |
| 147 | + showChart(id); | |
| 145 | 148 | }); |
| 146 | 149 | |
| 147 | 150 | // interate through all charts that are to be lazy-loaded and observe each one. |
| 148 | 151 | $('div.visualizer-front.visualizer-lazy').each(function(index, element){ |