elementor / modules / lazyload / module.php

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

139 lines 4.8 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	if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
68	foreach ( $control['selectors'] as $selector => $css_property ) {
69	if ( 0 === strpos( $css_property, 'background-image' ) ) {
70	if ( ! empty( $value['url'] ) ) {
71	$css_property = str_replace( 'url("{{URL}}")', 'var(--e-bg-lazyload-loaded)', $css_property );
72	$control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
73	$control = $this->apply_dominant_color_background( $control, $value, $selector );
74	}
75	}
76	}
77	}
78	return $control;
79	}
80
81	private function apply_dominant_color_background( $control, $value, $selector ) {
82	$metadata = wp_get_attachment_metadata( $value['id'] );
83	$dominant_color = Utils::get_array_value_by_keys( $metadata, [ 'dominant_color' ] );
84	if ( $dominant_color ) {
85	$control['selectors'][ $selector ] .= "background-color: #{$dominant_color};";
86	}
87	return $control;
88	}
89
90	public function __construct() {
91	parent::__construct();
92
93	add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
94	$this->update_element_attributes( $element );
95	} );
96
97	add_filter('elementor/files/css/selectors', function( $control, $value ) {
98	return $this->append_lazyload_selector( $control, $value );
99	}, 10, 2 );
100
101	add_filter( 'body_class', function( $classes ) {
102	$classes[] = 'e-lazyload';
103	return $classes;
104	} );
105
106	add_action( 'wp_enqueue_scripts', function() {
107	$this->enqueue_styles();
108	} );
109
110	add_action( 'wp_footer', function() {
111	?>
112	<script type='text/javascript' defer>
113	document.addEventListener( 'DOMContentLoaded', function() {
114	const dataAttribute = 'data-e-bg-lazyload';
115	const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
116	const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
117	entries.forEach( ( entry ) => {
118	if ( entry.isIntersecting ) {
119	let lazyloadBackground = entry.target;
120	const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
121	if ( lazyloadSelector ) {
122	lazyloadBackground = entry.target.querySelector( lazyloadSelector );
123	}
124	lazyloadBackground.classList.add( 'lazyloaded' );
125	lazyloadBackgroundObserver.unobserve( entry.target );
126	}
127	});
128	}, { rootMargin: '100px 0px 100px 0px' } );
129	lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
130	lazyloadBackgroundObserver.observe( lazyloadBackground );
131	} );
132	} );
133	</script>
134	<?php
135	} );
136
137	}
138	}
139