wpdirectorykit / elementor-elements / classes / wdk-field-images.php

wdk-field-images.php in WP Directory Kit 1.5.5, at elementor-elements/classes/wdk-field-images.php

503 lines 17.0 KB

Raw Download Zip

1	<?php
2
3	namespace Wdk\Elementor\Widgets;
4
5	use Wdk\Elementor\Widgets\WdkElementorBase;
6	use Elementor\Widget_Base;
7	use Elementor\Controls_Manager;
8	use Elementor\Utils;
9	use Elementor\Typography;
10	use Elementor\Editor;
11	use Elementor\Plugin;
12	use Elementor\Repeater;
13	use Elementor\Core\Schemes;
14	use Elementor\Icons_Manager;
15	use Elementor\Group_Control_Typography;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Box_Shadow;
18
19	if (!defined('ABSPATH'))
20	exit; // Exit if accessed directly
21
22	/**
23	* @since 1.1.0
24	*/
25	class WdkFieldImages extends WdkElementorBase {
26
27	public function __construct($data = array(), $args = null) {
28
29	\Elementor\Controls_Manager::add_tab(
30	'tab_conf',
31	esc_html__('Settings', 'wpdirectorykit')
32	);
33
34	\Elementor\Controls_Manager::add_tab(
35	'tab_layout',
36	esc_html__('Layout', 'wpdirectorykit')
37	);
38
39	\Elementor\Controls_Manager::add_tab(
40	'tab_content',
41	esc_html__('Main', 'wpdirectorykit')
42	);
43
44	if ($this->is_edit_mode_load()) {
45	$this->enqueue_styles_scripts();
46	}
47
48	parent::__construct($data, $args);
49
50	}
51
52	/**
53	* Retrieve the list of categories the widget belongs to.
54	*
55	* Used to determine where to display the widget in the editor.
56	*
57	* Note that currently Elementor supports only one category.
58	* When multiple categories passed, Elementor uses the first one.
59	*
60	* @since 1.1.0
61	*
62	* @access public
63	*
64	* @return array Widget categories.
65	*/
66	public function get_categories() {
67	return [ 'wdk-elementor-listing-preview' ];
68	}
69
70	/**
71	* Retrieve the widget name.
72	*
73	* @since 1.1.0
74	*
75	* @access public
76	*
77	* @return string Widget name.
78	*/
79	public function get_name() {
80	return 'wdk-field-images';
81	}
82
83	/**
84	* Retrieve the widget title.
85	*
86	* @since 1.1.0
87	*
88	* @access public
89	*
90	* @return string Widget title.
91	*/
92	public function get_title() {
93	return esc_html__('Wdk Listing Gallery', 'wpdirectorykit');
94	}
95
96	/**
97	* Retrieve the widget icon.
98	*
99	* @since 1.1.0
100	*
101	* @access public
102	*
103	* @return string Widget icon.
104	*/
105	public function get_icon() {
106	return 'eicon-image';
107	}
108
109	/**
110	* Register the widget controls.
111	*
112	* Adds different input fields to allow the user to change and customize the widget settings.
113	*
114	* @since 1.1.0
115	*
116	* @access protected
117	*/
118	protected function register_controls() {
119	$this->generate_controls_conf();
120	$this->generate_controls_layout();
121	$this->generate_controls_styles();
122	$this->generate_controls_content();
123
124	$this->insert_pro_message('1');
125	parent::register_controls();
126	}
127
128	/**
129	* Render the widget output on the frontend.
130	*
131	* Written in PHP and used to generate the final HTML.
132	*
133	* @since 1.1.0
134	*
135	* @access protected
136	*/
137	protected function render() {
138	parent::render();
139	global $wdk_listing_id;
140	/* test data */
141	$this->data['id_element'] = $this->get_id();
142	$this->data['settings'] = $this->get_settings();
143
144	$this->data['images'] = array();
145
146	if(!Plugin::$instance->editor->is_edit_mode()) {
147	$this->data['images'] = wdk_listing_images (array('listing_images'=>wdk_field_value ('listing_images', $wdk_listing_id)), 'full');
148	$this->data['images'] = array_slice($this->data['images'], ($this->data['settings']['offset_images']-1), $this->data['settings']['limit_images']);
149	} else {
150	$this->data['images'] = array_fill(0, $this->data['settings']['limit_images'], wdk_placeholder_image_src());
151	}
152
153	$this->data['is_edit_mode']= false;
154	if(Plugin::$instance->editor->is_edit_mode()) {
155	$this->data['is_edit_mode']= true;
156	} else {
157	/* return false if no content */
158	}
159
160	echo $this->view('wdk-field-images', $this->data);
161	}
162
163
164	private function generate_controls_conf() {
165	$this->start_controls_section(
166	'tab_conf_main_section',
167	[
168	'label' => esc_html__('Main', 'wpdirectorykit'),
169	'tab' => '1',
170	]
171	);
172
173	$this->add_control(
174	'limit_images',
175	[
176	'label' => __( 'Limit Images', 'wpdirectorykit' ),
177	'type' => \Elementor\Controls_Manager::NUMBER,
178	'min' => 1,
179	'max' => 100,
180	'step' => 1,
181	'default' => 10,
182	]
183	);
184
185	$this->add_control(
186	'offset_images',
187	[
188	'label' => __( 'Offset Images', 'wpdirectorykit' ),
189	'type' => \Elementor\Controls_Manager::NUMBER,
190	'min' => 1,
191	'max' => 100,
192	'step' => 1,
193	'default' => 1,
194	]
195	);
196
197	$this->add_control(
198	'enable_js_gallery',
199	[
200	'label' => __( 'Enable Gallery Popup', 'wpdirectorykit' ),
201	'type' => \Elementor\Controls_Manager::SWITCHER,
202	'label_on' => __( 'True', 'wpdirectorykit' ),
203	'label_off' => __( 'False', 'wpdirectorykit' ),
204	'return_value' => 'yes',
205	'default' => 'yes',
206	]
207	);
208
209	$this->add_control(
210	'wdk_listing_video_disabled',
211	[
212	'label' => __( 'Disable Video', 'wpdirectorykit' ),
213	'type' => \Elementor\Controls_Manager::SWITCHER,
214	'label_on' => __( 'True', 'wpdirectorykit' ),
215	'label_off' => __( 'False', 'wpdirectorykit' ),
216	'return_value' => '1',
217	'default' => '',
218	]
219	);
220
221	$this->end_controls_section();
222
223	}
224
225	private function generate_controls_layout() {
226	}
227
228	private function generate_controls_styles() {
229	$this->start_controls_section(
230	'styles_thmbn_section',
231	[
232	'label' => esc_html__('Main', 'wpdirectorykit'),
233	'tab' => Controls_Manager::TAB_STYLE,
234	]
235	);
236
237	$this->add_responsive_control(
238	'row_gap_col',
239	[
240	'label' => __( 'Columns', 'wpdirectorykit' ),
241	'type' => Controls_Manager::SELECT,
242	'options' => [
243	'' => esc_html__('Default', 'wpdirectorykit'),
244	'auto' => esc_html__('Auto', 'wpdirectorykit'),
245	'100%' => '1',
246	'50%' => '2',
247	'calc(100% / 3)' => '3',
248	'25%' => '4',
249	'20%' => '5',
250	'auto_flexible' => 'auto flexible',
251	],
252	'selectors_dictionary' => [
253	'auto' => 'width:auto;-webkit-flex:0 0 auto;flex:0 0 auto',
254	'100%' => 'width:100%;-webkit-flex:0 0 100%;flex:0 0 100%',
255	'50%' => 'width:50%;-webkit-flex:0 0 50%;flex:0 0 50%',
256	'calc(100% / 3)' => 'width:calc(100% / 3);-webkit-flex:0 0 calc(100% / 3);flex:0 0 calc(100% / 3)',
257	'25%' => 'width:25%;-webkit-flex:0 0 25%;flex:0 0 25%',
258	'20%' => 'width:20%;-webkit-flex:0 0 20%;flex:0 0 20%',
259	'auto' => 'width:auto;-webkit-flex:0 0 auto;flex:0 0 auto',
260	'auto_flexible' => 'width:auto;-webkit-flex:1 2 auto;flex:1 2 auto',
261	],
262	'selectors' => [
263	'{{WRAPPER}} .wdk-row .wdk-col' => '{{UNIT}}',
264	],
265	'default' => '25%',
266	'separator' => 'before',
267	]
268	);
269
270	$this->add_responsive_control(
271	'column_gap',
272	[
273	'label' => esc_html__('Columns Gap', 'wpdirectorykit'),
274	'type' => Controls_Manager::SLIDER,
275	'default' => [
276	'size' => 10,
277	],
278	'range' => [
279	'px' => [
280	'min' => 0,
281	'max' => 60,
282	],
283	],
284	'selectors' => [
285	'{{WRAPPER}} .wdk-row .wdk-col' => 'padding-left: {{SIZE}}{{UNIT}};padding-right: {{SIZE}}{{UNIT}};;',
286	'{{WRAPPER}} .wdk-row' => 'margin-left: -{{SIZE}}{{UNIT}};margin-right: -{{SIZE}}{{UNIT}};',
287	],
288	]
289	);
290
291	$this->add_responsive_control(
292	'row_gap',
293	[
294	'label' => esc_html__('Rows Gap', 'wpdirectorykit'),
295	'type' => Controls_Manager::SLIDER,
296	'default' => [
297	'size' => 10,
298	],
299	'range' => [
300	'px' => [
301	'min' => 0,
302	'max' => 60,
303	],
304	],
305	'selectors' => [
306	'{{WRAPPER}} .wdk-row .wdk-col' => 'margin-bottom: {{SIZE}}{{UNIT}};',
307	'{{WRAPPER}} .wdk-row' => 'margin-bottom: -{{SIZE}}{{UNIT}};',
308	],
309	]
310	);
311
312	$this->end_controls_section();
313
314	$this->start_controls_section(
315	'styles_thmbn_type',
316	[
317	'label' => esc_html__('Thumbnail', 'wpdirectorykit'),
318	'tab' => Controls_Manager::TAB_STYLE,
319	]
320	);
321
322	$this->add_control(
323	'layout_image_design',
324	[
325	'label' => __( 'Size style thumbnail', 'wpdirectorykit' ),
326	'type' => \Elementor\Controls_Manager::SELECT,
327	'default' => 'cover',
328	'options' => [
329	'none' => __( 'None', 'wpdirectorykit' ),
330	'contain' => __( 'Contain', 'wpdirectorykit' ),
331	'cover' => __( 'Cover', 'wpdirectorykit' ),
332	],
333	'selectors' => [
334	'{{WRAPPER}} .wdk-field-images .wdk-listing-image' => 'object-fit: {{VALUE}}',
335	],
336	]
337	);
338
339	$selectors = array(
340	'normal' => '{{WRAPPER}} .wdk-field-images .wdk-listing-image',
341	'hover' => '{{WRAPPER}} .wdk-field-images:hover .wdk-listing-image, {{WRAPPER}} .complete_link:hover .wdk-field-images .wdk-listing-image, .wdk-listings-results .hover_link:hover {{WRAPPER}} .wdk-listing-image',
342	);
343	$this->generate_renders_tabs($selectors, 'layout_image_dynamic', ['background','border','border_radius','padding','shadow','transition', 'css_filters'],);
344
345	$this->add_control(
346	'enable_fixed_height',
347	[
348	'label' => __( 'Fixed Height', 'wpdirectorykit' ),
349	'type' => \Elementor\Controls_Manager::SWITCHER,
350	'label_on' => __( 'True', 'wpdirectorykit' ),
351	'label_off' => __( 'False', 'wpdirectorykit' ),
352	'return_value' => 'yes',
353	'default' => 'yes',
354	]
355	);
356
357	$this->add_responsive_control (
358	'styles_thmbn_des_height',
359	[
360	'label' => esc_html__('Height', 'wpdirectorykit'),
361	'type' => Controls_Manager::SLIDER,
362	'range' => [
363	'px' => [
364	'min' => 100,
365	'max' => 1500,
366	],
367	'vw' => [
368	'min' => 0,
369	'max' => 100,
370	],
371	],
372	'size_units' => [ 'px','em', 'vw', '%', 'custom' ],
373	'selectors' => [
374	'{{WRAPPER}} .wdk-field-images .wdk-listing-image' => 'height: {{SIZE}}{{UNIT}}',
375	],
376	'separator' => 'after',
377	'conditions' => [
378	'terms' => [
379	[
380	'name' => 'enable_fixed_height',
381	'operator' => '==',
382	'value' => 'yes',
383	]
384	],
385	],
386	]
387	);
388
389	$this->end_controls_section();
390
391	$items = [
392	[
393	'key'=>'card',
394	'label'=> esc_html__('Card', 'wpdirectorykit'),
395	'selector'=>'.wdk-field-images .wdk-listing-image-card',
396	'selector_hover'=>'{{WRAPPER}} .wdk-field-images .wdk-listing-image-card%1$s, .wdk-listings-results .hover_link:hover {{WRAPPER}} .wdk-listing-image',
397	'options'=>'block',
398	],
399	];
400
401	foreach ($items as $item) {
402	$this->start_controls_section(
403	$item['key'].'_section',
404	[
405	'label' => $item['label'],
406	'tab' => Controls_Manager::TAB_STYLE,
407	]
408	);
409
410	if($item['key'] == 'card') {
411	// Card Mask Option
412	$this->add_control(
413	'card_mask_header',
414	[
415	'label' => esc_html__('Card Mask', 'wpdirectorykit'),
416	'type' => \Elementor\Controls_Manager::HEADING,
417	'separator' => 'before',
418	]
419	);
420	$this->add_group_control(
421	\Elementor\Group_Control_Background::get_type(),
422	[
423	'name' => 'card_mask',
424	'description' => esc_html__( 'Set mask for thumbnail color', 'wpdirectorykit' ),
425	'label' => esc_html__( 'Set mask for thumbnail color', 'wpdirectorykit' ),
426	'types' => [ 'classic', 'gradient', 'video' ],
427	'selector' => '{{WRAPPER}} .wdk-field-images .wdk-listing-image-card:after',
428	]
429	);
430
431	// Card Mask Hover Option
432	$this->add_control(
433	'card_mask_hover_header',
434	[
435	'label' => esc_html__('Card Mask Hover', 'wpdirectorykit'),
436	'type' => \Elementor\Controls_Manager::HEADING,
437	'separator' => 'before',
438	]
439	);
440	$this->add_group_control(
441	\Elementor\Group_Control_Background::get_type(),
442	[
443	'name' => 'card_mask_hover',
444	'label' => esc_html__( 'Mask Hover', 'wpdirectorykit' ),
445	'types' => [ 'classic', 'gradient', 'video' ],
446	'selector' => '{{WRAPPER}} .wdk-field-images .wdk-listing-image-card:hover .mask, .wdk-listings-results .hover_link:hover {{WRAPPER}} .wdk-locations-card-cover .mask',
447	'description' => esc_html__( 'Set mask for thumbnail color', 'wpdirectorykit' ),
448	]
449	);
450
451	// Card Mask Transition Option
452	$this->add_control(
453	'card_mask_transition',
454	[
455	'label' => esc_html__('Card Mask Transition', 'wpdirectorykit'),
456	'type' => \Elementor\Controls_Manager::SLIDER,
457	'size_units' => [ 's', 'ms' ],
458	'range' => [
459	's' => [
460	'min' => 0,
461	'max' => 2,
462	'step' => 0.05,
463	],
464	'ms' => [
465	'min' => 0,
466	'max' => 2000,
467	'step' => 10,
468	],
469	],
470	'default' => [
471	'size' => 0.3,
472	'unit' => 's',
473	],
474	'selectors' => [
475	'{{WRAPPER}} .wdk-field-images .wdk-listing-image-card .mask' => 'transition: all {{SIZE}}{{UNIT}};',
476	],
477	'separator' => 'none',
478	]
479	);
480	}
481
482	$selectors = array(
483	'normal' => '{{WRAPPER}} '.$item['selector'],
484	'hover'=>$item['selector_hover'],
485	);
486	$this->generate_renders_tabs($selectors, $item['key'].'_dynamic', $item['options']);
487
488	$this->end_controls_section();
489	}
490	}
491
492	private function generate_controls_content() {
493
494	}
495
496	public function enqueue_styles_scripts() {
497	wp_enqueue_style('wdk-field-images');
498	wp_enqueue_style('blueimp-gallery');
499	wp_enqueue_script('blueimp-gallery');
500	wp_enqueue_script('wdk-blueimp-gallery');
501	}
502	}
503