elementor / modules / lazyload / module.php

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

132 lines 4.1 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_BETA,
28	'default' => Experiments_Manager::STATE_INACTIVE,
29	];
30	}
31
32	private function enqueue_scripts() {
33	wp_enqueue_script(
34	'elementor-lazyload',
35	$this->get_js_assets_url( 'lazyload' ),
36	[ 'elementor-frontend' ],
37	ELEMENTOR_VERSION,
38	true
39	);
40	}
41
42	private function enqueue_styles() {
43	wp_enqueue_style(
44	'elementor-lazyload',
45	$this->get_css_assets_url( 'modules/lazyload/frontend' ),
46	[],
47	ELEMENTOR_VERSION
48	);
49	}
50
51	private function update_element_attributes( Element_Base $element ) {
52	$settings = $element->get_settings_for_display();
53	$controls = $element->get_controls();
54	$keys = null;
55
56	$controls_with_background_image = array_filter( $controls, function( $control ) {
57	return Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
58	} );
59
60	foreach ( $controls_with_background_image as $control_name => $control_data ) {
61	$keys = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'keys' ] );
62	break;
63	}
64
65	if ( $keys ) {
66	$background_image_url = Utils::get_array_value_by_keys( $settings, $keys );
67	if ( $background_image_url ) {
68	$bg_selector = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'selector' ] ) ?? '';
69	$element->add_render_attribute( '_wrapper', [
70	'data-e-bg-lazyload' => $bg_selector,
71	] );
72	}
73	}
74	}
75
76	private function reduce_background_image_size( $value, $css_property, $matches, $control ) {
77	$is_lazyload_active = Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
78	if ( $is_lazyload_active ) {
79	if ( 0 === strpos( $css_property, 'background-image' ) && '{{URL}}' === $matches[0] ) {
80	$thumbnail_image_src = wp_get_attachment_image_src( $value['id'], 'thumbnail' );
81	if ( $thumbnail_image_src ) {
82	$value['url'] = $thumbnail_image_src[0];
83	}
84	}
85	}
86	return $value;
87	}
88
89	private function append_lazyload_selector( $control, $value ) {
90	if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
91	foreach ( $control['selectors'] as $selector => $css_property ) {
92	if ( 0 === strpos( $css_property, 'background-image' ) ) {
93	if ( ! empty( $value['url'] ) ) {
94	$control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
95	}
96	}
97	}
98	}
99	return $control;
100	}
101
102	public function __construct() {
103	parent::__construct();
104
105	add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
106	$this->update_element_attributes( $element );
107	} );
108
109	add_filter('elementor/files/css/property', function( $value, $css_property, $matches, $control ) {
110	return $this->reduce_background_image_size( $value, $css_property, $matches, $control );
111	}, 10, 4 );
112
113	add_filter('elementor/files/css/selectors', function( $control, $value ) {
114	return $this->append_lazyload_selector( $control, $value );
115	}, 10, 2 );
116
117	add_filter( 'body_class', function( $classes ) {
118	$classes[] = 'e-lazyload';
119	return $classes;
120	} );
121
122	add_action( 'wp_enqueue_scripts', function() {
123	$this->enqueue_styles();
124	} );
125
126	add_action( 'wp_footer', function() {
127	$this->enqueue_scripts();
128	} );
129
130	}
131	}
132