before-after.php — Shortcodes and extra features for Phlox theme 2.5.8

auxin-elements / includes / elementor / widgets / before-after.php

auxin-elements / includes / elementor / widgets Last commit date

before-after.php

320 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Image_Size;
8
9
10	if ( ! defined( 'ABSPATH' ) ) {
11	exit; // Exit if accessed directly.
12	}
13
14	/**
15	* Elementor 'BeforeAfter' widget.
16	*
17	* Elementor widget that displays an 'BeforeAfter' with lightbox.
18	*
19	* @since 1.0.0
20	*/
21	class BeforeAfter extends Widget_Base {
22
23	/**
24	* Get widget name.
25	*
26	* Retrieve 'BeforeAfter' widget name.
27	*
28	* @since 1.0.0
29	* @access public
30	*
31	* @return string Widget name.
32	*/
33	public function get_name() {
34	return 'aux-before-after';
35	}
36
37	/**
38	* Get widget title.
39	*
40	* Retrieve 'BeforeAfter' widget title.
41	*
42	* @since 1.0.0
43	* @access public
44	*
45	* @return string Widget title.
46	*/
47	public function get_title() {
48	return __( 'Before After Slider', 'auxin-elements' );
49	}
50
51	/**
52	* Get widget icon.
53	*
54	* Retrieve 'BeforeAfter' widget icon.
55	*
56	* @since 1.0.0
57	* @access public
58	*
59	* @return string Widget icon.
60	*/
61	public function get_icon() {
62	return 'eicon-image-before-after auxin-badge';
63	}
64
65	/**
66	* Get widget categories.
67	*
68	* Retrieve 'BeforeAfter' widget icon.
69	*
70	* @since 1.0.0
71	* @access public
72	*
73	* @return string Widget icon.
74	*/
75	public function get_categories() {
76	return array( 'auxin-core' );
77	}
78
79	/**
80	* Register 'BeforeAfter' widget controls.
81	*
82	* Adds different input fields to allow the user to change and customize the widget settings.
83	*
84	* @since 1.0.0
85	* @access protected
86	*/
87	protected function _register_controls() {
88
89	/-----------------------------------------------------------------------------------/
90	/* images_section
91	/-----------------------------------------------------------------------------------/
92
93	$this->start_controls_section(
94	'images_section',
95	array(
96	'label' => __( 'Images', 'auxin-elements' ),
97	)
98	);
99
100	$this->add_control(
101	'before_image',
102	array(
103	'label' => __('Before image','auxin-elements' ),
104	'type' => Controls_Manager::MEDIA,
105	'show_label' => false
106	)
107	);
108
109	$this->add_group_control(
110	Group_Control_Image_Size::get_type(),
111	array(
112	'name' => 'before', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
113	'exclude' => array( 'custom' ),
114	'separator' => 'none',
115	'default' => 'large',
116	)
117	);
118
119	$this->add_control(
120	'after_image',
121	array(
122	'label' => __('After image','auxin-elements' ),
123	'type' => Controls_Manager::MEDIA,
124	'show_label' => false
125	)
126	);
127
128	$this->add_group_control(
129	Group_Control_Image_Size::get_type(),
130	array(
131	'name' => 'after', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
132	'exclude' => array( 'custom' ),
133	'separator' => 'none',
134	'default' => 'large',
135	)
136	);
137
138	$this->end_controls_section();
139
140	/-----------------------------------------------------------------------------------/
141	/* style_section
142	/-----------------------------------------------------------------------------------/
143
144	$this->start_controls_section(
145	'style_section',
146	array(
147	'label' => __( 'Style', 'auxin-elements' ),
148	'tab' => Controls_Manager::TAB_STYLE
149	)
150	);
151
152	$this->add_control(
153	'default_offset',
154	array(
155	'label' => __( 'Start offset','auxin-elements' ),
156	'description' => __( 'How much of the before image is visible when the page loads.', 'auxin-elements' ),
157	'type' => Controls_Manager::SLIDER,
158	'size_units' => array('px'),
159	'default' => array(
160	'size' => 50
161	),
162	'range' => array(
163	'px' => array(
164	'min' => 1,
165	'max' => 100,
166	'step' => 1
167	)
168	)
169	)
170	);
171
172	$this->add_control(
173	'width',
174	array(
175	'label' => __('Width','auxin-elements' ),
176	'type' => Controls_Manager::SLIDER,
177	'size_units' => array('px'),
178	'range' => array(
179	'px' => array(
180	'min' => 1,
181	'max' => 1400,
182	'step' => 1,
183	)
184	),
185	'selectors' => array(
186	'{{WRAPPER}} .aux-before-after' => 'max-width: {{SIZE}}{{UNIT}};',
187	),
188	)
189	);
190
191	$this->add_control(
192	'height',
193	array(
194	'label' => __('Height','auxin-elements' ),
195	'type' => Controls_Manager::SLIDER,
196	'size_units' => array('px'),
197	'range' => array(
198	'px' => array(
199	'min' => 1,
200	'max' => 1400,
201	'step' => 1,
202	)
203	),
204	'selectors' => array(
205	'{{WRAPPER}} .aux-before-after' => 'max-height: {{SIZE}}{{UNIT}};',
206	),
207	)
208	);
209
210	$this->end_controls_section();
211	}
212
213	/**
214	* Render image box widget output on the frontend.
215	*
216	* Written in PHP and used to generate the final HTML.
217	*
218	* @since 1.0.0
219	* @access protected
220	*/
221	protected function render() {
222
223	$settings = $this->get_settings_for_display();
224	$before_image = '';
225	$after_image = '';
226
227	if( ! empty( $settings['before_image'] ) ) {
228	$before_image = Group_Control_Image_Size::get_attachment_image_html( $settings, 'before', 'before_image' );
229	}
230
231	if( ! empty( $settings['after_image'] ) ) {
232	$after_image = Group_Control_Image_Size::get_attachment_image_html( $settings, 'after', 'after_image' );
233	}
234
235	$this->add_render_attribute(
236	'wrapper',
237	[
238	'class' => [ 'aux-before-after' ],
239	'data-offset' => ( (int) $settings['default_offset']['size'] ) / 100
240	]
241	);
242
243	if ( Plugin::$instance->editor->is_edit_mode() ) {
244	$this->add_render_attribute( 'wrapper', [
245	'class' => 'elementor-clickable',
246	] );
247	}
248
249	if( ! empty( $settings['after_image'] ) ) {
250	echo sprintf( '<div class="widget-container aux-widget-before-after"><div %s >%s %s</div></div>',
251	$this->get_render_attribute_string( 'wrapper' ),
252	$before_image,
253	$after_image
254	) ;
255	} else {
256	echo sprintf( '<div class="widget-container aux-widget-before-after"><div %s >%s</div></div>',
257	$this->get_render_attribute_string( 'wrapper' ),
258	$before_image
259	);
260	}
261
262	}
263
264	/**
265	* Render image box widget output in the editor.
266	*
267	* Written as a Backbone JavaScript template and used to generate the live preview.
268	*
269	* @since 1.0.0
270	* @access protected
271	*/
272	protected function _content_template() {
273	?>
274	<#
275
276	var images = '';
277
278	if ( settings.before_image ) {
279	var before_image = {
280	id: settings.before_image.id,
281	url: settings.before_image.url,
282	size: settings.before_size,
283	dimension: settings.before_custom_dimension,
284	model: view.getEditModel()
285	};
286	var before_image_url = elementor.imagesManager.getImageUrl( before_image );
287	images += '<img src="' + before_image_url + '" />';
288	}
289
290	if ( settings.after_image ) {
291	var after_image = {
292	id: settings.after_image.id,
293	url: settings.after_image.url,
294	size: settings.after_size,
295	dimension: settings.after_custom_dimension,
296	model: view.getEditModel()
297	};
298	var after_image_url = elementor.imagesManager.getImageUrl( after_image );
299	images += '<img src="' + after_image_url + '" />';
300	}
301
302	view.addRenderAttribute(
303	'wrapper',
304	{
305	'class' : [ 'aux-before-after' ],
306	'data-offset': Number( settings.default_offset.size )/100
307	}
308	);
309
310	#>
311	<div class="widget-container aux-widget-before-after">
312	<div {{{ view.getRenderAttributeString( 'wrapper' ) }}}>
313	{{{ images }}}
314	<div>
315	</div>
316	<?php
317	}
318
319	}
320