Skip to content

Commit 68b9974

Browse files
rodica-andronacherodica-andronache
authored
Merge pull request #712 from contactashish13/issue-709
Add ability to lazy load charts
2 parents 3fb9ff4 + 89df65b commit 68b9974

File tree

15 files changed

+256
-42
lines changed

15 files changed

+256
-42
lines changed

‎classes/Visualizer/Gutenberg/Block.php

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,9 @@ public function register_block_type() {
139139
'id' => array(
140140
'type' => 'number',
141141
),
142+
'lazy' => array(
143+
'type' => 'string',
144+
),
142145
),
143146
)
144147
);
@@ -147,14 +150,44 @@ public function register_block_type() {
147150
/**
148151
* Gutenberg Block Callback Function
149152
*/
150-
public function gutenberg_block_callback( $attr ) {
151-
if ( isset( $attr['id'] ) ) {
152-
$id = $attr['id'];
153-
if ( empty( $id ) || $id === 'none' ) {
154-
return ''; // no id = no fun
155-
}
156-
return '[visualizer id="' . $id . '"]';
153+
public function gutenberg_block_callback( $atts ) {
154+
// no id, no fun.
155+
if ( ! isset( $atts['id'] ) ) {
156+
return '';
157+
}
158+
159+
$atts = shortcode_atts(
160+
array(
161+
'id' => false,
162+
'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
163+
// we are deliberating excluding the class attribute from here
164+
// as this will be handled by the custom class in Gutenberg
165+
),
166+
$atts
167+
);
168+
169+
// no id, no fun.
170+
if ( ! $atts['id'] ) {
171+
return '';
157172
}
173+
174+
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
175+
if ( $atts['lazy'] == -1 || $atts['lazy'] == false ) {
176+
$atts['lazy'] = 'no';
177+
}
178+
179+
// we don't want the chart in the editor lazy-loading.
180+
if ( is_admin() ) {
181+
unset( $atts['lazy'] );
182+
}
183+
184+
$shortcode = '[visualizer';
185+
foreach ( $atts as $name => $value ) {
186+
$shortcode .= sprintf( ' %s="%s"', $name, $value );
187+
}
188+
$shortcode .= ']';
189+
190+
return $shortcode;
158191
}
159192

160193
/**

‎classes/Visualizer/Gutenberg/build/block.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ class ChartSelect extends Component {
138138
/>
139139

140140
{ 'showAdvanced' === this.state.route &&
141-
<Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
141+
<Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
142142
}
143143

144144
{ 'showPermissions' === this.state.route &&

‎classes/Visualizer/Gutenberg/src/Components/Sidebar.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import GeneralSettings from './Sidebar/GeneralSettings.js';
5+
import InstanceSettings from './Sidebar/InstanceSettings.js';
56
import HorizontalAxisSettings from './Sidebar/HorizontalAxisSettings.js';
67
import VerticalAxisSettings from './Sidebar/VerticalAxisSettings.js';
78
import PieSettings from './Sidebar/PieSettings.js';
@@ -47,6 +48,8 @@ class Sidebar extends Component {
4748
return (
4849
<Fragment>
4950

51+
<InstanceSettings chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.edit } />
52+
5053
<GeneralSettings chart={ this.props.chart } edit={ this.props.edit } />
5154

5255
{ ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (

‎classes/Visualizer/Gutenberg/src/Components/Sidebar/InstanceSettings.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { __ } = wp.i18n;
5+
6+
const { Component } = wp.element;
7+
8+
const {
9+
PanelBody,
10+
Notice,
11+
TextControl
12+
} = wp.components;
13+
14+
class InstanceSettings extends Component {
15+
constructor() {
16+
super( ...arguments );
17+
}
18+
19+
render() {
20+
21+
const settings = this.props.chart['visualizer-settings'];
22+
23+
return (
24+
<PanelBody
25+
title={ __( 'Instance Settings' ) }
26+
initialOpen={ true }
27+
className="visualizer-instance-panel"
28+
>
29+
30+
<Notice status="info" isDismissible={ false } >
31+
<p>
32+
{ __( 'These settings are valid only for this instance of the chart.' ) }
33+
</p>
34+
<p>
35+
{ __( 'This means that if you insert this chart again elsewhere, these values will not persist.' ) }
36+
</p>
37+
</Notice>
38+
39+
<TextControl
40+
label={ __( 'Should this instance lazy Load?' ) }
41+
help={ __( '-1: do not lazy load. Any number greater than -1 will lazy load the chart once the viewport is that many pixels away from the chart' ) }
42+
value={ this.props.attributes.lazy ? Number( this.props.attributes.lazy ) : -1 }
43+
type="number"
44+
min="-1"
45+
max="1000"
46+
step="1"
47+
onChange={ e => {
48+
this.props.attributes.lazy = e;
49+
this.props.edit( settings );
50+
} }
51+
/>
52+
53+
</PanelBody>
54+
);
55+
}
56+
}
57+
58+
export default InstanceSettings;

‎classes/Visualizer/Gutenberg/src/Editor.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@ class Editor extends Component {
111111

112112
this.props.setAttributes({
113113
id,
114-
route: 'chartSelect'
114+
route: 'chartSelect',
115+
lazy: -1
115116
});
116117
}
117118

@@ -520,6 +521,7 @@ class Editor extends Component {
520521
{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
521522
<ChartSelect
522523
id={ this.props.attributes.id }
524+
attributes={ this.props.attributes }
523525
chart={ this.state.chart }
524526
editSettings={ this.editSettings }
525527
editPermissions={ this.editPermissions }

‎classes/Visualizer/Gutenberg/src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ export default registerBlockType( 'visualizer/chart', {
3939
id: {
4040
type: 'number'
4141
},
42+
lazy: {
43+
default: '-1',
44+
type: 'string'
45+
},
4246
route: {
4347
type: 'string'
4448
}

‎classes/Visualizer/Module/Admin.php

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@ public function renderTemplates() {
598598
*/
599599
public function enqueueLibraryScripts( $suffix ) {
600600
if ( $suffix === $this->_libraryPage ) {
601+
wp_register_script( 'visualizer-clipboardjs', VISUALIZER_ABSURL . 'js/lib/clipboardjs/clipboard.min.js', array( 'jquery' ), Visualizer_Plugin::VERSION, true );
601602
wp_enqueue_style( 'visualizer-library', VISUALIZER_ABSURL . 'css/library.css', array(), Visualizer_Plugin::VERSION );
602603
$this->_addFilter( 'media_upload_tabs', 'setupVisualizerTab' );
603604
wp_enqueue_media();
@@ -607,6 +608,7 @@ public function enqueueLibraryScripts( $suffix ) {
607608
array(
608609
'jquery',
609610
'media-views',
611+
'visualizer-clipboardjs',
610612
),
611613
Visualizer_Plugin::VERSION,
612614
true
@@ -953,7 +955,8 @@ public function renderLibraryPage() {
953955
),
954956
'page_type' => 'library',
955957
'is_front' => false,
956-
'i10n' => array(
958+
'i10n' => array(
959+
'copied' => __( 'The shortcode has been copied to your clipboard. Hit Ctrl-V/Cmd-V to paste it.', 'visualizer' ),
957960
'conflict' => __( 'We have detected a potential conflict with another component that prevents Visualizer from functioning properly. Please disable any of the following components if they are activated on your instance: Modern Events Calendar plugin, Acronix plugin. In case the aforementioned components are not activated or you continue to see this error message, please disable all other plugins and enable them one by one to find out the component that is causing the conflict.', 'visualizer' ),
958961
),
959962
)

‎classes/Visualizer/Module/Frontend.php

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -241,11 +241,14 @@ public function renderChart( $atts ) {
241241
global $wp_version;
242242
$atts = shortcode_atts(
243243
array(
244-
'id' => false, // chart id
245-
'class' => false, // chart class
246-
'series' => false, // series filter hook
247-
'data' => false, // data filter hook
248-
'settings' => false, // data filter hook
244+
// chart id
245+
'id' => false,
246+
// chart class
247+
'class' => false,
248+
// for lazy load
249+
// set 'yes' to use the default intersection limit (300px)
250+
// OR set a number (e.g. 700) to use 700px as the intersection limit
251+
'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
249252
),
250253
$atts
251254
);
@@ -255,6 +258,7 @@ public function renderChart( $atts ) {
255258
return '';
256259
}
257260

261+
// do not show the chart?
258262
if ( ! apply_filters( 'visualizer_pro_show_chart', true, $atts['id'] ) ) {
259263
return '';
260264
}
@@ -268,8 +272,18 @@ public function renderChart( $atts ) {
268272
$id = 'visualizer-' . $atts['id'];
269273
$defaultClass = 'visualizer-front';
270274
$class = apply_filters( Visualizer_Plugin::FILTER_CHART_WRAPPER_CLASS, $atts['class'], $atts['id'] );
271-
$class = $defaultClass . ' ' . $class . ' ' . 'visualizer-front-' . $atts['id'];
272-
$class = ! empty( $class ) ? ' class="' . trim( $class ) . '"' : '';
275+
276+
$lazyClass = $atts['lazy'] === 'yes' || ctype_digit( $atts['lazy'] ) ? 'visualizer-lazy' : '';
277+
278+
$class = sprintf( '%s %s %s %s', $defaultClass, $class, 'visualizer-front-' . $atts['id'], $lazyClass );
279+
$attributes = array();
280+
if ( ! empty( $class ) ) {
281+
$attributes['class'] = trim( $class );
282+
}
283+
284+
if ( ctype_digit( $atts['lazy'] ) ) {
285+
$attributes['data-lazy-limit'] = $atts['lazy'];
286+
}
273287

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

@@ -283,20 +297,12 @@ public function renderChart( $atts ) {
283297

284298
// handle series filter hooks
285299
$series = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SERIES, get_post_meta( $chart->ID, Visualizer_Plugin::CF_SERIES, true ), $chart->ID, $type );
286-
if ( ! empty( $atts['series'] ) ) {
287-
$series = apply_filters( $atts['series'], $series, $chart->ID, $type );
288-
}
300+
289301
// handle settings filter hooks
290302
$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
291-
if ( ! empty( $atts['settings'] ) ) {
292-
$settings = apply_filters( $atts['settings'], $settings, $chart->ID, $type );
293-
}
294303

295304
// handle data filter hooks
296305
$data = self::get_chart_data( $chart, $type );
297-
if ( ! empty( $atts['data'] ) ) {
298-
$data = apply_filters( $atts['data'], $data, $chart->ID, $type );
299-
}
300306

301307
$css = '';
302308
$arguments = $this->get_inline_custom_css( $id, $settings );
@@ -311,7 +317,7 @@ public function renderChart( $atts ) {
311317

312318
$amp = Visualizer_Plugin::instance()->getModule( Visualizer_Module_AMP::NAME );
313319
if ( $amp && $amp->is_amp() ) {
314-
return '<div id="' . $id . '"' . $class . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
320+
return '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
315321
}
316322

317323
// add chart to the array
@@ -355,8 +361,8 @@ public function renderChart( $atts ) {
355361

356362
$actions_div .= $css;
357363

358-
foreach ( $this->_charts as $id => $attributes ) {
359-
$library = $attributes['library'];
364+
foreach ( $this->_charts as $id => $array ) {
365+
$library = $array['library'];
360366
wp_register_script(
361367
"visualizer-render-$library",
362368
VISUALIZER_ABSURL . 'js/render-facade.js',
@@ -385,7 +391,26 @@ public function renderChart( $atts ) {
385391
}
386392

387393
// return placeholder div
388-
return $actions_div . '<div id="' . $id . '"' . $class . '></div>' . $this->addSchema( $chart->ID );
394+
return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
395+
}
396+
397+
/**
398+
* Converts the array of attributes to a string of HTML attributes.
399+
*
400+
* @since ?
401+
*
402+
* @access private
403+
*/
404+
private function getHtmlAttributes( $attributes ) {
405+
$string = '';
406+
if ( ! $attributes ) {
407+
return $string;
408+
}
409+
410+
foreach ( $attributes as $name => $value ) {
411+
$string .= sprintf( '%s="%s"', esc_attr( $name ), esc_attr( $value ) );
412+
}
413+
return $string;
389414
}
390415

391416
/**

‎classes/Visualizer/Render/Library.php

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -252,9 +252,7 @@ private function _renderLibrary() {
252252
echo '<span class="visualizer-chart-action visualizer-nochart-clone"></span>';
253253
echo '<span class="visualizer-chart-action visualizer-nochart-edit"></span>';
254254
echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>';
255-
echo '<span class="visualizer-chart-shortcode">';
256-
echo '&nbsp;[visualizer]&nbsp;';
257-
echo '</span>';
255+
echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>';
258256
echo '</div>';
259257
echo '</div>';
260258
$this->_renderSidebar();
@@ -327,6 +325,7 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
327325
$chart_status['title'] = __( 'Click to view the error', 'visualizer' );
328326
}
329327

328+
$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
330329
echo '<div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
331330
echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
332331
echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
@@ -339,9 +338,8 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
339338
if ( $this->can_chart_have_action( 'image', $chart_id ) ) {
340339
echo '<a class="visualizer-chart-action visualizer-chart-image" href="javascript:;" title="', esc_attr__( 'Download as image', 'visualizer' ), '" data-chart="visualizer-', $chart_id, '" data-chart-title="', $title, '"></a>';
341340
}
342-
echo '<span class="visualizer-chart-shortcode" title="', esc_attr__( 'Click to select', 'visualizer' ), '">';
343-
echo '&nbsp;[visualizer id=&quot;', $chart_id, '&quot;]&nbsp;';
344-
echo '</span>';
341+
echo '<a class="visualizer-chart-action visualizer-chart-shortcode" href="javascript:;" title="', esc_attr__( 'Click to copy shortcode', 'visualizer' ), '" data-clipboard-text="', esc_attr( $shortcode ), '"></a>';
342+
echo '<span>&nbsp;</span>';
345343
echo '<hr><div class="visualizer-chart-status"><span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
346344
echo '</div>';
347345
echo '</div>';

0 commit comments

Comments
 (0)