elementor / modules / lazyload / module.php

module.php in Elementor Website Builder – more than just a page builder 3.16.3, at modules/lazyload/module.php

217 lines 6.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\LazyLoad;
3
4	use Elementor\Core\Base\Module as BaseModule;
5	use Elementor\Core\Experiments\Manager as Experiments_Manager;
6	use Elementor\Element_Base;
7	use Elementor\Utils;
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	exit; // Exit if accessed directly
11	}
12
13	class Module extends BaseModule {
14
15	const EXPERIMENT_NAME = 'e_lazyload';
16
17	public function get_name() {
18	return 'lazyload';
19	}
20
21	public static function get_experimental_data() {
22	return [
23	'name' => static::EXPERIMENT_NAME,
24	'title' => esc_html__( 'Lazy Load Background Images', 'elementor' ),
25	'tag' => esc_html__( 'Performance', 'elementor' ),
26	'description' => esc_html__( 'Lazy loading images that are not in the viewport improves initial page load performance and user experience. By activating this experiment all background images except the first one on your page will be lazy loaded to improve your LCP score', 'elementor' ),
27	'release_status' => Experiments_Manager::RELEASE_STATUS_ALPHA,
28	'default' => Experiments_Manager::STATE_INACTIVE,
29	];
30	}
31
32	private function enqueue_styles() {
33	wp_enqueue_style(
34	'elementor-lazyload',
35	$this->get_css_assets_url( 'modules/lazyload/frontend' ),
36	[],
37	ELEMENTOR_VERSION
38	);
39	}
40
41	private function update_element_attributes( Element_Base $element ) {
42	$settings = $element->get_settings_for_display();
43	$controls = $element->get_controls();
44	$lazyload_attribute_name = 'data-e-bg-lazyload';
45
46	$controls_with_background_image = array_filter( $controls, function( $control ) {
47	return Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
48	} );
49
50	foreach ( $controls_with_background_image as $control_name => $control_data ) {
51	$keys = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'keys' ] );
52	$background_image_url = Utils::get_array_value_by_keys( $settings, $keys );
53	if ( $background_image_url ) {
54
55	$has_attribute = $element->get_render_attributes( '_wrapper', $lazyload_attribute_name );
56	if ( ! $has_attribute ) {
57	$bg_selector = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'selector' ] ) ?? '';
58	$element->add_render_attribute( '_wrapper', [
59	$lazyload_attribute_name => $bg_selector,
60	] );
61	}
62	}
63	}
64	}
65
66	private function append_lazyload_selector( $control, $value ) {
67	$is_dominant_color_enabled = $this->is_dominant_color_enabled();
68
69	if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
70	foreach ( $control['selectors'] as $selector => $css_property ) {
71	if ( 0 === strpos( $css_property, 'background-image' ) ) {
72	if ( ! empty( $value['url'] ) ) {
73	$css_property = str_replace( 'url("{{URL}}")', 'var(--e-bg-lazyload-loaded)', $css_property );
74	$control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
75
76	if ( $is_dominant_color_enabled ) {
77	$dominant_color = $this->get_dominant_color( $value['id'] );
78	if ( $dominant_color ) {
79	$control['selectors'][ $selector ] .= "background-color: #{$dominant_color} ;";
80	}
81	}
82	}
83	}
84	}
85	}
86	return $control;
87	}
88
89	private function is_dominant_color_enabled() {
90	if ( ! function_exists( 'perflab_get_active_modules' ) ) {
91	return false;
92	}
93
94	$active_modules = perflab_get_active_modules();
95
96	return in_array( 'images/dominant-color', $active_modules, true );
97	}
98
99	private function get_dominant_color( $attachment_id ) {
100	$metadata = wp_get_attachment_metadata( $attachment_id );
101
102	// Performance Lab adds these metadata
103	$has_transparency = $metadata['has_transparency'] ?? false;
104	$dominant_color = esc_attr( $metadata['dominant_color'] ?? false );
105
106	if ( $dominant_color && ! $has_transparency ) {
107	return $dominant_color;
108	}
109
110	return false;
111	}
112
113	private function is_document_support_lazyload( $post_id ) {
114	if ( ! $post_id ) {
115	return false;
116	}
117
118	$document = \Elementor\Plugin::$instance->documents->get( $post_id );
119
120	if ( $document ) {
121	$support_lazyload = $document->get_property( 'support_lazyload' );
122	if ( false === $support_lazyload ) {
123	return false;
124	}
125	}
126
127	return true;
128	}
129
130	public function __construct() {
131	parent::__construct();
132
133	// Disable lazyload in admin area (true if inside WordPress administration interface - Editor, Admin, etc.)
134	if ( is_admin() ) {
135	return;
136	}
137
138	add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
139
140	$current_document = \Elementor\Plugin::$instance->documents->get_current();
141
142	if ( ! $current_document ) {
143	return;
144	}
145
146	$post_id = $current_document->get_main_id();
147
148	if ( ! $this->is_document_support_lazyload( $post_id ) ) {
149	return;
150	}
151
152	$this->update_element_attributes( $element );
153	} );
154
155	add_filter('elementor/files/css/selectors', function( $control, $value, $css_instance ) {
156
157	$post_id = method_exists( $css_instance, 'get_post_id' ) ? $css_instance->get_post_id() : false;
158
159	if ( ! $post_id ) {
160	return $control;
161	}
162
163	if ( ! $this->is_document_support_lazyload( $post_id ) ) {
164	return $control;
165	}
166
167	return $this->append_lazyload_selector( $control, $value );
168	}, 10, 3);
169
170	add_filter( 'body_class', function( $classes ) {
171	$classes[] = 'e-lazyload';
172	return $classes;
173	} );
174
175	add_action( 'wp_enqueue_scripts', function() {
176	$this->enqueue_styles();
177	} );
178
179	add_action( 'wp_footer', function() {
180	?>
181	<script type='text/javascript'>
182	const lazyloadRunObserver = () => {
183	const dataAttribute = 'data-e-bg-lazyload';
184	const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
185	const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
186	entries.forEach( ( entry ) => {
187	if ( entry.isIntersecting ) {
188	let lazyloadBackground = entry.target;
189	const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
190	if ( lazyloadSelector ) {
191	lazyloadBackground = entry.target.querySelector( lazyloadSelector );
192	}
193	if( lazyloadBackground ) {
194	lazyloadBackground.classList.add( 'lazyloaded' );
195	}
196	lazyloadBackgroundObserver.unobserve( entry.target );
197	}
198	});
199	}, { rootMargin: '100px 0px 100px 0px' } );
200	lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
201	lazyloadBackgroundObserver.observe( lazyloadBackground );
202	} );
203	};
204	const events = [
205	'DOMContentLoaded',
206	'elementor/lazyload/observe',
207	];
208	events.forEach( ( event ) => {
209	document.addEventListener( event, lazyloadRunObserver );
210	} );
211	</script>
212	<?php
213	} );
214
215	}
216	}
217