← All changes | classes/Visualizer/Module/Frontend.php +79 -8 3.7.1 → 3.7.2 View file →

		@@ -41,8 +41,16 @@
41	41	*/
42	42	private $_charts = array();
43	43
44	44	/**
	45	+ * Lazy render script.
	46	+ *
	47	+ * @access private
	48	+ * @var bool
	49	+ */
	50	+ private $lazy_render_script = false;
	51	+
	52	+ /**
45	53	* Constructor.
46	54	*
47	55	* @since 1.0.0
48	56	* @uses add_filter() To add "do_shortcode" hook for "widget_text" and "term_description" filters.
		@@ -52,8 +60,9 @@
52	60	*/
53	61	public function __construct( Visualizer_Plugin $plugin ) {
54	62	parent::__construct( $plugin );
55	63
	64	+ $this->_addAction( 'wp_print_footer_scripts', 'printFooterScripts' );
56	65	$this->_addAction( 'wp_enqueue_scripts', 'enqueueScripts' );
57	66	$this->_addAction( 'load-index.php', 'enqueueScripts' );
58	67	$this->_addAction( 'visualizer_enqueue_scripts', 'enqueueScripts' );
59	68	$this->_addFilter( 'visualizer_get_language', 'getLanguage' );
		@@ -80,16 +89,34 @@
80	89	function script_loader_tag( $tag, $handle, $src ) {
81	90	if ( is_admin() ) {
82	91	return $tag;
83	92	}
	93	+ // Async scripts.
	94	+ $async_scripts = array( 'google-jsapi', 'chartjs', 'visualizer-datatables' );
	95	+ foreach ( $async_scripts as $async ) {
	96	+ if ( $async === $handle ) {
	97	+ $tag = str_replace( ' src', ' async src', $tag );
	98	+ break;
	99	+ }
	100	+ };
84	101
85		- $scripts = array( 'google-jsapi', 'visualizer-render-google-lib', 'visualizer-render-google' );
86		-
87		- foreach ( $scripts as $async ) {
88		- if ( $async === $handle ) {
89		- $tag = str_replace( ' src', ' defer="defer" src', $tag );
	102	+ // Async scripts.
	103	+ $scripts = array( 'dom-to-image' );
	104	+ foreach ( array( 'async', 'defer' ) as $attr ) {
	105	+ if ( wp_scripts()->get_data( $handle, $attr ) ) {
90	106	break;
91	107	}
	108	+ if ( in_array( $handle, $async_scripts, true ) || false === strpos( $handle, 'visualizer-' ) ) {
	109	+ break;
	110	+ }
	111	+ if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
	112	+ $tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
	113	+ if ( $this->lazy_render_script ) {
	114	+ $tag = str_replace( ' src', ' data-visualizer-script', $tag );
	115	+ }
	116	+ }
	117	+ // Only allow async or defer, not both.
	118	+ break;
92	119	}
93	120	return $tag;
94	121	}
95	122
		@@ -243,9 +270,8 @@
243	270	* @access public
244	271	*/
245	272	public function enqueueScripts() {
246	273	wp_register_script( 'visualizer-customization', $this->get_user_customization_js(), array(), null, true );
247		- wp_register_style( 'visualizer-front', VISUALIZER_ABSURL . 'css/front.css', array(), Visualizer_Plugin::VERSION );
248	274	do_action( 'visualizer_pro_frontend_load_resources' );
249	275	}
250	276
251	277	/**
		@@ -328,8 +354,16 @@
328	354
329	355	// handle settings filter hooks
330	356	$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
331	357
	358	+ $lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
	359	+ $lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
	360	+ $container_class = 'visualizer-front-container';
	361	+ if ( $lazy_load ) {
	362	+ $this->lazy_render_script = true;
	363	+ $container_class .= ' visualizer-lazy-render';
	364	+ }
	365	+
332	366	// handle data filter hooks
333	367	$data = self::get_chart_data( $chart, $type );
334	368
335	369	$css = '';
		@@ -434,12 +468,11 @@
434	468	'is_front' => true,
435	469	)
436	470	);
437	471	}
438		- wp_enqueue_style( 'visualizer-front' );
439	472
440	473	// return placeholder div
441		- return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
	474	+ return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . '</div>';
442	475	}
443	476
444	477	/**
445	478	* Converts the array of attributes to a string of HTML attributes.
		@@ -606,6 +639,44 @@
606	639	return $chart_data;
607	640	}
608	641
609	642	return false;
	643	+ }
	644	+
	645	+ /**
	646	+ * Print footer script.
	647	+ */
	648	+ public function printFooterScripts() {
	649	+ if ( $this->lazy_render_script ) {
	650	+ ?>
	651	+ <script type="text/javascript">
	652	+ var visualizerUserInteractionEvents = [
	653	+ "mouseover",
	654	+ "keydown",
	655	+ "touchmove",
	656	+ "touchstart"
	657	+ ];
	658	+
	659	+ visualizerUserInteractionEvents.forEach(function(event) {
	660	+ window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true });
	661	+ });
	662	+
	663	+ function visualizerTriggerScriptLoader() {
	664	+ visualizerLoadScripts();
	665	+ visualizerUserInteractionEvents.forEach(function(event) {
	666	+ window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
	667	+ });
	668	+ }
	669	+
	670	+ function visualizerLoadScripts() {
	671	+ document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
	672	+ jQuery.getScript( elem.getAttribute("data-visualizer-script"), function() {
	673	+ elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
	674	+ elem.removeAttribute("data-visualizer-script");
	675	+ } );
	676	+ });
	677	+ }
	678	+ </script>
	679	+ <?php
	680	+ }
610	681	}
611	682	}