elementor / modules / lazyload / module.php

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

144 lines 5.0 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	// Disable lazyload in admin area (true if inside WordPress administration interface - Editor, Admin, etc.)
94	if ( is_admin() ) {
95	return;
96	}
97
98	add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
99	$this->update_element_attributes( $element );
100	} );
101
102	add_filter('elementor/files/css/selectors', function( $control, $value ) {
103	return $this->append_lazyload_selector( $control, $value );
104	}, 10, 2 );
105
106	add_filter( 'body_class', function( $classes ) {
107	$classes[] = 'e-lazyload';
108	return $classes;
109	} );
110
111	add_action( 'wp_enqueue_scripts', function() {
112	$this->enqueue_styles();
113	} );
114
115	add_action( 'wp_footer', function() {
116	?>
117	<script type='text/javascript' defer>
118	document.addEventListener( 'DOMContentLoaded', function() {
119	const dataAttribute = 'data-e-bg-lazyload';
120	const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
121	const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
122	entries.forEach( ( entry ) => {
123	if ( entry.isIntersecting ) {
124	let lazyloadBackground = entry.target;
125	const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
126	if ( lazyloadSelector ) {
127	lazyloadBackground = entry.target.querySelector( lazyloadSelector );
128	}
129	lazyloadBackground.classList.add( 'lazyloaded' );
130	lazyloadBackgroundObserver.unobserve( entry.target );
131	}
132	});
133	}, { rootMargin: '100px 0px 100px 0px' } );
134	lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
135	lazyloadBackgroundObserver.observe( lazyloadBackground );
136	} );
137	} );
138	</script>
139	<?php
140	} );
141
142	}
143	}
144