Skip to content

Commit 1327909

Browse files
contactashish13contactashish13
committed
lazy load in shortcode
1 parent 5cf6d21 commit 1327909

File tree

5 files changed

+127
-24
lines changed

5 files changed

+127
-24
lines changed

‎classes/Visualizer/Module/Frontend.php

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -201,11 +201,14 @@ public function renderChart( $atts ) {
201201
global $wp_version;
202202
$atts = shortcode_atts(
203203
array(
204-
'id' => false, // chart id
205-
'class' => false, // chart class
206-
'series' => false, // series filter hook
207-
'data' => false, // data filter hook
208-
'settings' => false, // data filter hook
204+
// chart id
205+
'id' => false,
206+
// chart class
207+
'class' => false,
208+
// for lazy load
209+
// set 'yes' to use the default intersection limit (300px)
210+
// OR set a number (e.g. 700) to use 700px as the intersection limit
211+
'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
209212
),
210213
$atts
211214
);
@@ -215,6 +218,7 @@ public function renderChart( $atts ) {
215218
return '';
216219
}
217220

221+
// do not show the chart?
218222
if ( ! apply_filters( 'visualizer_pro_show_chart', true, $atts['id'] ) ) {
219223
return '';
220224
}
@@ -228,8 +232,18 @@ public function renderChart( $atts ) {
228232
$id = 'visualizer-' . $atts['id'];
229233
$defaultClass = 'visualizer-front';
230234
$class = apply_filters( Visualizer_Plugin::FILTER_CHART_WRAPPER_CLASS, $atts['class'], $atts['id'] );
231-
$class = $defaultClass . ' ' . $class . ' ' . 'visualizer-front-' . $atts['id'];
232-
$class = ! empty( $class ) ? ' class="' . trim( $class ) . '"' : '';
235+
236+
$lazyClass = $atts['lazy'] === 'yes' || ctype_digit( $atts['lazy'] ) ? 'visualizer-lazy' : '';
237+
238+
$class = sprintf( '%s %s %s %s', $defaultClass, $class, 'visualizer-front-' . $atts['id'], $lazyClass );
239+
$attributes = array();
240+
if ( ! empty( $class ) ) {
241+
$attributes['class'] = trim( $class );
242+
}
243+
244+
if ( ctype_digit( $atts['lazy'] ) ) {
245+
$attributes['data-lazy-limit'] = $atts['lazy'];
246+
}
233247

234248
$type = get_post_meta( $chart->ID, Visualizer_Plugin::CF_CHART_TYPE, true );
235249

@@ -243,20 +257,12 @@ public function renderChart( $atts ) {
243257

244258
// handle series filter hooks
245259
$series = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SERIES, get_post_meta( $chart->ID, Visualizer_Plugin::CF_SERIES, true ), $chart->ID, $type );
246-
if ( ! empty( $atts['series'] ) ) {
247-
$series = apply_filters( $atts['series'], $series, $chart->ID, $type );
248-
}
260+
249261
// handle settings filter hooks
250262
$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
251-
if ( ! empty( $atts['settings'] ) ) {
252-
$settings = apply_filters( $atts['settings'], $settings, $chart->ID, $type );
253-
}
254263

255264
// handle data filter hooks
256265
$data = self::get_chart_data( $chart, $type );
257-
if ( ! empty( $atts['data'] ) ) {
258-
$data = apply_filters( $atts['data'], $data, $chart->ID, $type );
259-
}
260266

261267
$css = '';
262268
$arguments = $this->get_inline_custom_css( $id, $settings );
@@ -271,7 +277,7 @@ public function renderChart( $atts ) {
271277

272278
$amp = Visualizer_Plugin::instance()->getModule( Visualizer_Module_AMP::NAME );
273279
if ( $amp && $amp->is_amp() ) {
274-
return '<div id="' . $id . '"' . $class . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
280+
return '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
275281
}
276282

277283
// add chart to the array
@@ -314,8 +320,8 @@ public function renderChart( $atts ) {
314320

315321
$actions_div .= $css;
316322

317-
foreach ( $this->_charts as $id => $attributes ) {
318-
$library = $attributes['library'];
323+
foreach ( $this->_charts as $id => $array ) {
324+
$library = $array['library'];
319325
wp_register_script(
320326
"visualizer-render-$library",
321327
VISUALIZER_ABSURL . 'js/render-facade.js',
@@ -344,7 +350,26 @@ public function renderChart( $atts ) {
344350
}
345351

346352
// return placeholder div
347-
return $actions_div . '<div id="' . $id . '"' . $class . '></div>' . $this->addSchema( $chart->ID );
353+
return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
354+
}
355+
356+
/**
357+
* Converts the array of attributes to a string of HTML attributes.
358+
*
359+
* @since ?
360+
*
361+
* @access private
362+
*/
363+
private function getHtmlAttributes( $attributes ) {
364+
$string = '';
365+
if ( ! $attributes ) {
366+
return $string;
367+
}
368+
369+
foreach ( $attributes as $name => $value ) {
370+
$string .= sprintf( '%s="%s"', esc_attr( $name ), esc_attr( $value ) );
371+
}
372+
return $string;
348373
}
349374

350375
/**

‎js/render-chartjs.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,12 @@
387387

388388
$('body').on('visualizer:render:chart:start', function(event, v){
389389
all_charts = v.charts;
390-
render(v);
390+
391+
if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
392+
renderChart(v.id, v);
393+
} else {
394+
render(v);
395+
}
391396

392397
// for some reason this needs to be introduced here for dynamic preview updates to work.
393398
v.update = function(){

‎js/render-datatables.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,12 @@
290290

291291
$('body').on('visualizer:render:chart:start', function(event, v){
292292
all_charts = v.charts;
293-
render(v);
293+
294+
if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
295+
renderChart(v.id, v);
296+
} else {
297+
render(v);
298+
}
294299
});
295300

296301
$('body').on('visualizer:render:specificchart:start', function(event, v){

‎js/render-facade.js

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
(function($, visualizer){
66

77
function initActionsButtons(v) {
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+
window.alert(v.i10n['copied']);
12+
});
13+
}
14+
815
if($('a.visualizer-action[data-visualizer-type=copy]').length > 0) {
916
var clipboard = new Clipboard('a.visualizer-action[data-visualizer-type=copy]'); // jshint ignore:line
1017
clipboard.on('success', function(e) {
@@ -106,11 +113,68 @@
106113
localStorage.removeItem( 'viz-facade-loaded' );
107114
}, 2000);
108115
}
109-
$('body').trigger('visualizer:render:chart:start', visualizer);
116+
117+
initChartDisplay();
110118
initActionsButtons(visualizer);
111119
registerDefaultActions();
112120
});
113121

122+
function initChartDisplay() {
123+
if(visualizer.is_front == true){ // jshint ignore:line
124+
displayChartsOnFrontEnd();
125+
}else{
126+
showChart();
127+
}
128+
}
129+
130+
/**
131+
* If an `id` is provided, that particular chart will load.
132+
*/
133+
function showChart(id) {
134+
var viz = visualizer;
135+
if(id){
136+
viz.id = id;
137+
}
138+
$('body').trigger('visualizer:render:chart:start', viz);
139+
}
140+
141+
function displayChartsOnFrontEnd() {
142+
// display all charts that are NOT to be lazy-loaded.
143+
$('div.visualizer-front:not(.visualizer-lazy)').each(function(index, element){
144+
var id = $(element).attr('id');
145+
showChart(id);
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+
114178
function registerDefaultActions(){
115179
$('body').off('visualizer:action:specificchart:defaultprint').on('visualizer:action:specificchart:defaultprint', function(event, v){
116180
var iframe = $('<iframe>').attr("name", "print-visualization").attr("id", "print-visualization").css("position", "absolute");

‎js/render-google.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,11 @@ var __visualizer_chart_images = [];
417417
google.charts.setOnLoadCallback(function() {
418418
gv = google.visualization;
419419
all_charts = v.charts;
420-
render();
420+
if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
421+
renderChart(v.id);
422+
} else {
423+
render();
424+
}
421425
});
422426
});
423427

0 commit comments

Comments
 (0)