pixel-gallery / modules / plex / widgets / plex.php

plex.php in Pixel Gallery Addons for Elementor – Easy Grid, Creative Gallery, Drag and Drop Grid, Custom Grid Layout, Portfolio Gallery trunk, at modules/plex/widgets/plex.php

623 lines 16.6 KB

Raw Download Zip

1	<?php
2
3	namespace PixelGallery\Modules\Plex\Widgets;
4
5	use PixelGallery\Base\Module_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Background;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Image_Size;
12	use Elementor\Group_Control_Text_Shadow;
13	use Elementor\Icons_Manager;
14	use Elementor\Group_Control_Css_Filter;
15	use Elementor\Group_Control_Text_Stroke;
16	use Elementor\Repeater;
17	use PixelGallery\Utils;
18	use PixelGallery\Traits\Global_Widget_Controls;
19
20	if (!defined('ABSPATH')) exit; // Exit if accessed directly
21
22	class Plex extends Module_Base
23	{
24
25	use Global_Widget_Controls;
26
27	public function get_name()
28	{
29	return 'pg-plex';
30	}
31
32	public function get_title()
33	{
34	return BDTPG . esc_html__('Plex', 'pixel-gallery');
35	}
36
37	public function get_icon()
38	{
39	return 'pg-icon-plex';
40	}
41
42	public function get_categories()
43	{
44	return ['pixel-gallery'];
45	}
46
47	public function get_keywords()
48	{
49	return ['plex', 'grid', 'gallery'];
50	}
51
52	public function get_style_depends()
53	{
54	return ['pg-plex'];
55	}
56
57	public function get_script_depends()
58	{
59	if ( true === _is_pg_pro_activated() ) {
60	return ['justified-gallery'];
61	} else {
62	return [];
63	}
64	}
65
66	public function get_custom_help_url() {
67	return 'https://youtu.be/RIiCTpHo0W0';
68	}
69
70	public function has_widget_inner_wrapper(): bool {
71	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
72	}
73	protected function is_dynamic_content(): bool {
74	return false;
75	}
76
77	protected function register_controls() {
78
79	$this->start_controls_section(
80	'section_layout',
81	[
82	'label' => __('Layout', 'pixel-gallery'),
83	'tab' => Controls_Manager::TAB_CONTENT,
84	]
85	);
86
87	//Global
88	$this->register_grid_controls('plex');
89	$this->register_global_height_controls('plex');
90
91	/**
92	* Justified Gallery Controls
93	*/
94	$this->register_justified_gallery_controls();
95
96	$this->register_title_tag_controls();
97	$this->register_show_meta_controls();
98	$this->register_alignment_controls('plex');
99	$this->register_thumbnail_size_controls();
100
101	//Global Lightbox Controls
102	$this->register_lightbox_controls();
103	$this->register_link_target_controls();
104	$this->end_controls_section();
105
106	//Repeater
107	$this->start_controls_section(
108	'section_item_content',
109	[
110	'label' => __('Items', 'pixel-gallery'),
111	'tab' => Controls_Manager::TAB_CONTENT,
112	]
113	);
114	$repeater = new Repeater();
115	$repeater->start_controls_tabs('tabs_item_content');
116	$repeater->start_controls_tab(
117	'tab_item_content',
118	[
119	'label' => esc_html__('Content', 'pixel-gallery'),
120	]
121	);
122	$this->register_repeater_media_controls($repeater);
123	$this->register_repeater_title_controls($repeater);
124	$this->register_repeater_meta_controls($repeater);
125	$this->register_repeater_custom_url_controls($repeater);
126	$this->register_repeater_hidden_item_controls($repeater);
127
128	$repeater->end_controls_tab();
129	$repeater->start_controls_tab(
130	'tab_item_grid',
131	[
132	'label' => esc_html__('Grid', 'pixel-gallery'),
133	]
134	);
135	$this->register_repeater_grid_controls($repeater, 'plex');
136	$this->register_repeater_item_height_controls($repeater, 'plex');
137	$repeater->end_controls_tab();
138	$repeater->end_controls_tabs();
139	$this->register_repeater_items_controls($repeater);
140	$this->end_controls_section();
141
142	//Style
143	$this->start_controls_section(
144	'pg_section_style',
145	[
146	'label' => esc_html__('Items', 'pixel-gallery'),
147	'tab' => Controls_Manager::TAB_STYLE,
148	]
149	);
150
151	$this->start_controls_tabs('tabs_item_style');
152
153	$this->start_controls_tab(
154	'tab_item_normal',
155	[
156	'label' => esc_html__('Normal', 'pixel-gallery'),
157	]
158	);
159
160	$this->add_group_control(
161	Group_Control_Background::get_type(),
162	[
163	'name' => 'item_background',
164	'label' => esc_html__('Background', 'pixel-gallery'),
165	'types' => ['classic', 'gradient'],
166	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
167	'exclude' => ['image'],
168	'selector' => '{{WRAPPER}} .pg-plex-item',
169	]
170	);
171
172	$this->add_group_control(
173	Group_Control_Border::get_type(),
174	[
175	'name' => 'item_border',
176	'selector' => '{{WRAPPER}} .pg-plex-item',
177	'separator' => 'before',
178	]
179	);
180
181	$this->add_responsive_control(
182	'item_border_radius',
183	[
184	'label' => esc_html__('Border Radius', 'pixel-gallery'),
185	'type' => Controls_Manager::DIMENSIONS,
186	'size_units' => ['px', 'em', '%'],
187	'selectors' => [
188	'{{WRAPPER}} .pg-plex-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
189	],
190	]
191	);
192
193	$this->add_responsive_control(
194	'item_padding',
195	[
196	'label' => esc_html__('Padding', 'pixel-gallery'),
197	'type' => Controls_Manager::DIMENSIONS,
198	'size_units' => ['px', 'em', '%'],
199	'selectors' => [
200	'{{WRAPPER}} .pg-plex-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
201	],
202	]
203	);
204
205
206	$this->add_responsive_control(
207	'item_margin',
208	[
209	'label' => esc_html__('Margin', 'pixel-gallery'),
210	'type' => Controls_Manager::DIMENSIONS,
211	'size_units' => ['px', 'em', '%'],
212	'selectors' => [
213	'{{WRAPPER}} .pg-plex-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
214	],
215	]
216	);
217
218	$this->add_group_control(
219	Group_Control_Box_Shadow::get_type(),
220	[
221	'name' => 'item_box_shadow',
222	'selector' => '{{WRAPPER}} .pg-plex-item',
223	]
224	);
225
226	$this->end_controls_tab();
227
228	$this->start_controls_tab(
229	'tab_item_hover',
230	[
231	'label' => esc_html__('Hover', 'pixel-gallery'),
232	]
233	);
234
235	$this->add_control(
236	'item_hover_border_color',
237	[
238	'label' => esc_html__('Border Color', 'pixel-gallery'),
239	'type' => Controls_Manager::COLOR,
240	'condition' => [
241	'item_border_border!' => '',
242	],
243	'selectors' => [
244	'{{WRAPPER}} .pg-plex-item:hover' => 'border-color: {{VALUE}};',
245	],
246	]
247	);
248
249	$this->add_group_control(
250	Group_Control_Box_Shadow::get_type(),
251	[
252	'name' => 'item_hover_box_shadow',
253	'selector' => '{{WRAPPER}} .pg-plex-item:hover',
254	]
255	);
256
257	$this->end_controls_tab();
258
259	$this->end_controls_tabs();
260
261	$this->end_controls_section();
262
263	$this->start_controls_section(
264	'section_style_content',
265	[
266	'label' => esc_html__('Content', 'pixel-gallery'),
267	'tab' => Controls_Manager::TAB_STYLE,
268	]
269	);
270
271	$this->add_group_control(
272	Group_Control_Background::get_type(),
273	[
274	'name' => 'content_background',
275	'label' => esc_html__('Background', 'pixel-gallery'),
276	'types' => ['classic', 'gradient'],
277	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
278	'exclude' => ['image'],
279	'selector' => '{{WRAPPER}} .pg-plex-image-wrap:before',
280	'fields_options' => [
281	'background' => [
282	'label' => esc_html__('Overlay Color', 'pixel-gallery'),
283	'default' => 'gradient',
284	],
285	'color' => [
286	'default' => 'rgba(13, 59, 84, 0.8)',
287	],
288	'color_b' => [
289	'default' => '#00000000',
290	],
291	'gradient_type' => [
292	'default' => 'linear',
293	],
294	'gradient_angle' => [
295	'default' => [
296	'unit' => 'deg',
297	'size' => 5,
298	],
299	],
300	],
301	]
302	);
303
304	$this->add_responsive_control(
305	'content_padding',
306	[
307	'label' => esc_html__('Padding', 'pixel-gallery'),
308	'type' => Controls_Manager::DIMENSIONS,
309	'size_units' => ['px', 'em', '%'],
310	'selectors' => [
311	'{{WRAPPER}} .pg-plex-content, {{WRAPPER}} .pg-plex-meta-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
312	],
313	]
314	);
315
316	$this->add_responsive_control(
317	'content_margin',
318	[
319	'label' => esc_html__('Margin', 'pixel-gallery'),
320	'type' => Controls_Manager::DIMENSIONS,
321	'size_units' => ['px', 'em', '%'],
322	'selectors' => [
323	'{{WRAPPER}} .pg-plex-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
324	],
325	]
326	);
327
328	$this->end_controls_section();
329
330	//Global Title Controls
331	$this->register_title_controls('plex');
332
333	$this->start_controls_section(
334	'section_style_meta',
335	[
336	'label' => esc_html__('Meta', 'pixel-gallery'),
337	'tab' => Controls_Manager::TAB_STYLE,
338	'condition' => [
339	'show_meta' => 'yes',
340	],
341	]
342	);
343
344	$this->start_controls_tabs('tabs_meta_style');
345
346	$this->start_controls_tab(
347	'tab_meta_normal',
348	[
349	'label' => esc_html__('Normal', 'pixel-gallery'),
350	]
351	);
352
353	$this->add_control(
354	'meta_color',
355	[
356	'label' => esc_html__('Color', 'pixel-gallery'),
357	'type' => Controls_Manager::COLOR,
358	'selectors' => [
359	'{{WRAPPER}} .pg-plex-meta' => 'color: {{VALUE}};',
360	],
361	]
362	);
363
364	$this->add_group_control(
365	Group_Control_Background::get_type(),
366	[
367	'name' => 'meta_background',
368	'selector' => '{{WRAPPER}} .pg-plex-meta',
369	]
370	);
371
372	$this->add_group_control(
373	Group_Control_Border::get_type(),
374	[
375	'name' => 'meta_border',
376	'label' => esc_html__('Border', 'pixel-gallery'),
377	'placeholder' => '1px',
378	'default' => '1px',
379	'selector' => '{{WRAPPER}} .pg-plex-meta',
380	'separator' => 'before',
381	]
382	);
383
384	$this->add_responsive_control(
385	'meta_radius',
386	[
387	'label' => esc_html__('Border Radius', 'pixel-gallery'),
388	'type' => Controls_Manager::DIMENSIONS,
389	'size_units' => ['px', '%'],
390	'selectors' => [
391	'{{WRAPPER}} .pg-plex-meta' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
392	],
393	]
394	);
395
396
397	$this->add_responsive_control(
398	'meta_padding',
399	[
400	'label' => esc_html__('Padding', 'pixel-gallery'),
401	'type' => Controls_Manager::DIMENSIONS,
402	'size_units' => ['px', 'em', '%'],
403	'selectors' => [
404	'{{WRAPPER}} .pg-plex-meta' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
405	],
406	]
407	);
408
409	$this->add_responsive_control(
410	'meta_margin',
411	[
412	'label' => esc_html__('Margin', 'pixel-gallery'),
413	'type' => Controls_Manager::DIMENSIONS,
414	'size_units' => ['px', 'em', '%'],
415	'selectors' => [
416	'{{WRAPPER}} .pg-plex-meta' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
417	],
418	]
419	);
420
421	$this->add_group_control(
422	Group_Control_Typography::get_type(),
423	[
424	'name' => 'meta_typography',
425	'selector' => '{{WRAPPER}} .pg-plex-meta',
426	]
427	);
428
429	$this->add_group_control(
430	Group_Control_Box_Shadow::get_type(),
431	[
432	'name' => 'meta_box_shadow',
433	'selector' => '{{WRAPPER}} .pg-plex-meta',
434	]
435	);
436
437	$this->end_controls_tab();
438
439	$this->start_controls_tab(
440	'tab_meta_hover',
441	[
442	'label' => esc_html__('Hover', 'pixel-gallery'),
443	]
444	);
445
446	$this->add_control(
447	'meta_hover_color',
448	[
449	'label' => esc_html__('Color', 'pixel-gallery'),
450	'type' => Controls_Manager::COLOR,
451	'selectors' => [
452	'{{WRAPPER}} .pg-plex-meta:hover' => 'color: {{VALUE}};'
453	],
454	]
455	);
456
457	$this->add_group_control(
458	Group_Control_Background::get_type(),
459	[
460	'name' => 'meta_hover_background',
461	'selector' => '{{WRAPPER}} .pg-plex-meta:hover',
462	]
463	);
464
465	$this->add_control(
466	'meta_hover_border_color',
467	[
468	'label' => esc_html__('Border Color', 'pixel-gallery'),
469	'type' => Controls_Manager::COLOR,
470	'condition' => [
471	'meta_border_border!' => '',
472	],
473	'selectors' => [
474	'{{WRAPPER}} .pg-plex-meta:hover' => 'border-color: {{VALUE}};',
475	],
476	]
477	);
478
479	$this->end_controls_tab();
480
481	$this->end_controls_tabs();
482
483	$this->end_controls_section();
484
485	//Global Readmore Controls
486	$this->register_readmore_controls('plex');
487
488	//Clip Path Controls
489	$this->register_clip_path_controls('plex');
490	}
491
492	public function render_items()
493	{
494	$settings = $this->get_settings_for_display();
495	$id = 'pg-plex-' . $this->get_id();
496	$slide_index = 1;
497	foreach ($settings['items'] as $index => $item) :
498
499	$attr_name = 'grid-item' . $index;
500	$this->add_render_attribute($attr_name, 'class', 'pg-plex-item pg-item elementor-repeater-item-' . esc_attr($item['_id']), true);
501
502	/**
503	* Render Video Inject Here
504	* Video Would be work on Media File & Lightbox
505	* @since 1.0.0
506	*/
507	if ($item['media_type'] == 'video') {
508	$this->render_video_frame($item, $attr_name, $id);
509	}
510
511	?>
512
513	<div <?php $this->print_render_attribute_string($attr_name); ?>>
514	<?php if ($item['item_hidden'] !== 'yes') : ?>
515	<?php $this->render_image_wrap($item, 'plex'); ?>
516	<div class="pg-plex-meta-wrap">
517	<?php $this->render_meta($item, 'plex'); ?>
518	</div>
519	<div class="pg-plex-content">
520	<?php $this->render_title($item, 'plex'); ?>
521	<?php if ('none' !== $settings['link_to'] && $settings['link_target'] == 'only_button') : ?>
522	<?php $this->render_readmore_icon($item, $index, $id, 'plex'); ?>
523	<?php endif; ?>
524	</div>
525	<?php if ('none' !== $settings['link_to'] && $settings['link_target'] == 'whole_item') : ?>
526	<?php $this->render_lightbox_link_url($item, $index, $id); ?>
527	<?php endif; ?>
528	<?php endif; ?>
529	</div>
530	<?php
531	$slide_index++;
532	endforeach;
533	}
534
535	public function render()
536	{
537	$settings = $this->get_settings_for_display();
538	$this->add_render_attribute('grid', 'class', 'pg-plex-grid pg-grid');
539
540	/**
541	* Render Justified Gallery Attributes
542	*/
543	$this->render_justified_gallery_attributes('grid');
544
545	if (isset($settings['pg_in_animation_show']) && ($settings['pg_in_animation_show'] == 'yes')) {
546	$this->add_render_attribute( 'grid', 'class', 'pg-in-animation' );
547	if (isset($settings['pg_in_animation_delay']['size'])) {
548	$this->add_render_attribute( 'grid', 'data-in-animation-delay', $settings['pg_in_animation_delay']['size'] );
549	}
550	}
551
552	?>
553	<div <?php $this->print_render_attribute_string('grid'); ?>>
554	<?php $this->render_items(); ?>
555	</div>
556	<?php
557	}
558	/**
559	* Elementor editor Backbone template.
560	*/
561	protected function content_template() {
562	?>
563	<#
564	var items = settings.items \|\| [];
565	var animDelay = ( settings.pg_in_animation_delay && settings.pg_in_animation_delay.size ) ? settings.pg_in_animation_delay.size : '';
566	var gridClass = 'pg-plex-grid pg-grid';
567	if ( settings.pg_in_animation_show === 'yes' ) { gridClass += ' pg-in-animation'; }
568	#>
569	<div class="{{{ gridClass }}}"
570	<# if ( settings.pg_in_animation_show === 'yes' && animDelay !== '' ) { #> data-in-animation-delay="{{ animDelay }}"<# } #>
571	>
572	<# _.each( items, function( item, index ) {
573	var itemClass = 'pg-plex-item pg-item elementor-repeater-item-' + item._id;
574	#>
575	<div class="{{{ itemClass }}}">
576	<# if ( item.item_hidden !== 'yes' ) { #>
577	<div class="pg-plex-image-wrap bdt-pg-img-mask">
578	<# if ( item.media_type === 'video' ) { #>
579	<# if ( item.poster && item.poster.url ) { #>
580	<img src="{{ item.poster.url }}" alt="{{ item.title }}" class="pg-plex-img">
581	<# } #>
582	<# } else if ( item.image && item.image.url ) { #>
583	<img src="{{ item.image.url }}" alt="{{ item.title }}" class="pg-plex-img">
584	<# } #>
585	<# if ( settings.link_to === 'file' && item.media_type === 'video' ) { #>
586	<span class="pg-video-icon-wrap">
587	<i class="pg-icon-play-circle pg-eicon-play"></i>
588	</span>
589	<# } #>
590	</div>
591	<div class="pg-plex-meta-wrap">
592	<# if ( settings.show_meta === 'yes' && item.meta ) { #>
593	<div class="pg-plex-meta">{{{ item.meta }}}</div>
594	<# } #>
595	</div>
596	<div class="pg-plex-content">
597	<# if ( settings.show_title === 'yes' && item.title ) { #>
598	<# var ttag = settings.title_tag \|\| 'h3'; #>
599	<{{{ ttag }}} class="pg-plex-title">{{{ item.title }}}</{{{ ttag }}}>
600	<# } #>
601	<# if ( settings.link_to !== 'none' && ( settings.link_target \|\| 'whole_item' ) === 'only_button' ) { #>
602	<div class="pg-plex-readmore">
603	<?php $this->print_content_template_item_link_prepare( 'plex' ); ?>
604	<?php $this->print_content_template_item_link_wrap_open(); ?>
605	<?php $this->print_content_template_item_link_a_open(); ?>
606	<i class="pg-icon-arrow-right" aria-hidden="true"></i>
607	<?php $this->print_content_template_item_link_a_close(); ?>
608	<?php $this->print_content_template_item_link_wrap_close(); ?>
609	</div>
610	<# } #>
611	</div>
612	<# if ( settings.link_to !== 'none' && ( settings.link_target \|\| 'whole_item' ) === 'whole_item' ) { #>
613	<?php $this->print_content_template_lightbox_overlay( 'plex' ); ?>
614	<# } #>
615	<# } #>
616	</div>
617	<# } ); #>
618	</div>
619	<?php
620	}
621
622	}
623