← All changes | includes/widgets/Image_Grid/Image_Grid.php +407 -0 51.1.2 → 51.1.83 View file →

		@@ -1,0 +1,407 @@
	1	+<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
	2	+
	3	+namespace King_Addons;
	4	+
	5	+use Elementor\Controls_Manager;
	6	+use Elementor\Group_Control_Border;
	7	+use Elementor\Group_Control_Box_Shadow;
	8	+use Elementor\Group_Control_Css_Filter;
	9	+use Elementor\Group_Control_Image_Size;
	10	+use Elementor\Repeater;
	11	+use Elementor\Utils;
	12	+use Elementor\Widget_Base;
	13	+
	14	+if (!defined('ABSPATH')) {
	15	+ exit; // Exit if accessed directly.
	16	+}
	17	+
	18	+
	19	+
	20	+class Image_Grid extends Widget_Base
	21	+{
	22	+
	23	+
	24	+ public function get_name(): string
	25	+ {
	26	+ return 'king-addons-image-grid';
	27	+ }
	28	+
	29	+ public function get_title(): string
	30	+ {
	31	+ return esc_html__('Image Grid', 'king-addons');
	32	+ }
	33	+
	34	+ public function get_icon(): string
	35	+ {
	36	+ return 'king-addons-icon king-addons-image-grid';
	37	+ }
	38	+
	39	+ public function get_script_depends(): array
	40	+ {
	41	+ return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-isotope-isotope', KING_ADDONS_ASSETS_UNIQUE_KEY . '-imagesloaded-imagesloaded'];
	42	+ }
	43	+
	44	+ public function get_style_depends(): array
	45	+ {
	46	+ return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-grid-style'];
	47	+ }
	48	+
	49	+ public function get_categories(): array
	50	+ {
	51	+ return ['king-addons'];
	52	+ }
	53	+
	54	+ public function get_keywords(): array
	55	+ {
	56	+ return ['media', 'image', 'video', 'gallery', 'grid', 'masonry', 'fit', 'fitRows', 'rows', 'images', 'even',
	57	+ 'card', 'carousel', 'slider', 'scroller', 'swiper', 'content', 'button', 'dot', 'dots', 'navigation',
	58	+ 'cards', 'wheel', 'touch', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link',
	59	+ 'left', 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'dragging', 'hover', 'over',
	60	+ 'hover over', 'picture', 'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons',
	61	+ 'mouseover', 'page', 'blog posts', 'kingaddons', 'king-addons', 'team', 'members', 'testimonial',
	62	+ 'king addons', 'testimonials', 'reviews', ' team memebers', 'drag', 'scroll', 'scrolling', 'tabs', 'tab'];
	63	+ }
	64	+
	65	+ public function get_custom_help_url()
	66	+ {
	67	+ return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
	68	+ }
	69	+
	70	+ protected function register_controls(): void
	71	+ {
	72	+ $this->start_controls_section(
	73	+ 'kng_image_grid_content_section_gallery_settings',
	74	+ [
	75	+ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Grid Settings', 'king-addons'),
	76	+ 'tab' => Controls_Manager::TAB_CONTENT,
	77	+ ]
	78	+ );
	79	+
	80	+ $this->add_control(
	81	+ 'kng_image_grid_grid_layout',
	82	+ array(
	83	+ 'label' => esc_html__('Grid Layout', 'king-addons'),
	84	+ 'type' => Controls_Manager::SELECT,
	85	+ 'options' => [
	86	+ 'fitRows' => esc_html__('Fit Rows', 'king-addons'),
	87	+ 'masonry' => esc_html__('Masonry', 'king-addons'),
	88	+ ],
	89	+ 'default' => 'masonry',
	90	+ )
	91	+ );
	92	+
	93	+ $this->add_responsive_control(
	94	+ 'kng_image_grid_fitrows_image_height',
	95	+ [
	96	+ 'label' => esc_html__('Image Height (px)', 'king-addons'),
	97	+ 'type' => Controls_Manager::NUMBER,
	98	+ 'step' => 1,
	99	+ 'min' => 0,
	100	+ 'default' => 200,
	101	+ 'render_type' => 'template',
	102	+ 'selectors' => [
	103	+ '{{WRAPPER}} .king-addons-image-grid-item' => 'height: {{SIZE}}px;',
	104	+ ],
	105	+ 'condition' => [
	106	+ 'kng_image_grid_grid_layout' => 'fitRows'
	107	+ ]
	108	+ ]
	109	+ );
	110	+
	111	+ $this->add_responsive_control(
	112	+ 'kng_image_grid_fitrows_image_fit',
	113	+ [
	114	+ 'label' => esc_html__('Image Fit', 'king-addons'),
	115	+ 'type' => Controls_Manager::SELECT,
	116	+ 'options' => [
	117	+ 'cover' => esc_html__('Cover', 'king-addons'),
	118	+ 'contain' => esc_html__('Contain', 'king-addons'),
	119	+ ],
	120	+ 'default' => 'cover',
	121	+ 'selectors' => [
	122	+ '{{WRAPPER}} .king-addons-image-grid-item img' => 'object-fit: {{VALUE}};',
	123	+ ],
	124	+ 'condition' => [
	125	+ 'kng_image_grid_grid_layout' => 'fitRows'
	126	+ ]
	127	+ ]
	128	+ );
	129	+
	130	+ $this->add_responsive_control(
	131	+ 'kng_image_grid_fitrows_image_fit_position',
	132	+ [
	133	+ 'label' => esc_html__('Image Fit Position', 'king-addons'),
	134	+ 'type' => Controls_Manager::SELECT,
	135	+ 'options' => [
	136	+ 'top' => esc_html__('Top', 'king-addons'),
	137	+ 'bottom' => esc_html__('Bottom', 'king-addons'),
	138	+ 'left' => esc_html__('Left', 'king-addons'),
	139	+ 'right' => esc_html__('Right', 'king-addons'),
	140	+ 'center' => esc_html__('Center', 'king-addons'),
	141	+ ],
	142	+ 'default' => 'center',
	143	+ 'selectors' => [
	144	+ '{{WRAPPER}} .king-addons-image-grid-item img' => 'object-position: {{VALUE}};',
	145	+ ],
	146	+ 'condition' => [
	147	+ 'kng_image_grid_grid_layout' => 'fitRows'
	148	+ ]
	149	+ ]
	150	+ );
	151	+
	152	+ $this->add_responsive_control(
	153	+ 'kng_image_grid_number_of_columns',
	154	+ [
	155	+ 'label' => esc_html__('Number of columns', 'king-addons'),
	156	+ 'type' => Controls_Manager::NUMBER,
	157	+ 'step' => 1,
	158	+ 'min' => 1,
	159	+ 'render_type' => 'template',
	160	+ 'desktop_default' => 4,
	161	+ 'tablet_default' => 3,
	162	+ 'mobile_default' => 2,
	163	+ 'selectors' => [
	164	+ '{{WRAPPER}} .king-addons-image-grid-item' => 'width: calc(100% / {{SIZE}});',
	165	+ ],
	166	+ ]
	167	+ );
	168	+
	169	+ $this->add_responsive_control(
	170	+ 'kng_image_grid_space_between',
	171	+ [
	172	+ 'label' => esc_html__('Space between (px)', 'king-addons'),
	173	+ 'type' => Controls_Manager::NUMBER,
	174	+ 'step' => 1,
	175	+ 'min' => 0,
	176	+ 'desktop_default' => 5,
	177	+ 'tablet_default' => 5,
	178	+ 'mobile_default' => 5,
	179	+ 'selectors' => [
	180	+ '{{WRAPPER}} .king-addons-image-grid-item' => 'padding: {{SIZE}}px;',
	181	+ ],
	182	+ ]
	183	+ );
	184	+
	185	+ $this->end_controls_section();
	186	+
	187	+ /** SECTION: Images ===================== */
	188	+ $this->start_controls_section(
	189	+ 'kng_image_grid_content_section_items',
	190	+ [
	191	+ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Items', 'king-addons'),
	192	+ 'tab' => Controls_Manager::TAB_CONTENT,
	193	+ ]
	194	+ );
	195	+
	196	+ $repeater = new Repeater();
	197	+
	198	+ $repeater->add_control(
	199	+ 'kng_image_grid_image',
	200	+ [
	201	+ 'label' => '<b>' . esc_html__('Image', 'king-addons') . '</b>',
	202	+ 'type' => Controls_Manager::MEDIA,
	203	+ 'default' => [
	204	+ 'url' => Utils::get_placeholder_image_src(),
	205	+ ]
	206	+ ]
	207	+ );
	208	+
	209	+ $repeater->add_group_control(
	210	+ Group_Control_Image_Size::get_type(),
	211	+ [
	212	+ 'name' => 'kng_image_grid_image_size',
	213	+ 'default' => 'full',
	214	+ ]
	215	+ );
	216	+
	217	+ $default_cards = [
	218	+ 'kng_image_grid_image' => Utils::get_placeholder_image_src(),
	219	+ ];
	220	+
	221	+ /** @noinspection HtmlUnknownTarget */
	222	+ $this->add_control(
	223	+ 'kng_image_grid_content_items',
	224	+ [
	225	+ 'type' => Controls_Manager::REPEATER,
	226	+ 'fields' => $repeater->get_controls(),
	227	+ 'default' => array_fill(0, 8, $default_cards),
	228	+ 'title_field' => '<img alt="" class="king-addons-repeater-list-img-icon" src="{{kng_image_grid_image.url}}"> ',
	229	+ ]
	230	+ );
	231	+
	232	+ $this->end_controls_section();
	233	+ /** END SECTION: Images ===================== */
	234	+
	235	+ /** STYLE SECTION: Images ===================== */
	236	+ $this->start_controls_section(
	237	+ 'kng_image_grid_style_section_image',
	238	+ [
	239	+ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
	240	+ 'tab' => Controls_Manager::TAB_STYLE,
	241	+ ]
	242	+ );
	243	+
	244	+ $this->add_control(
	245	+ 'kng_image_grid_image_scale_switcher',
	246	+ [
	247	+ 'label' => esc_html__('Scale image on hover', 'king-addons'),
	248	+ 'type' => Controls_Manager::SWITCHER,
	249	+ 'default' => 'yes',
	250	+ ]
	251	+ );
	252	+
	253	+ $this->add_responsive_control(
	254	+ 'kng_image_grid_image_scale_hover',
	255	+ [
	256	+ 'label' => esc_html__('Scale size', 'king-addons'),
	257	+ 'type' => Controls_Manager::NUMBER,
	258	+ 'min' => 0,
	259	+ 'step' => 0.01,
	260	+ 'default' => 1.1,
	261	+ 'selectors' => [
	262	+ '{{WRAPPER}} .king-addons-image-grid-item img:hover' => 'transform: scale({{SIZE}});'
	263	+ ],
	264	+ 'condition' => [
	265	+ 'kng_image_grid_image_scale_switcher' => 'yes',
	266	+ ]
	267	+ ]
	268	+ );
	269	+
	270	+ $this->add_responsive_control(
	271	+ 'kng_image_grid_image_transition',
	272	+ [
	273	+ 'label' => esc_html__('Transition duration on hover (ms)', 'king-addons'),
	274	+ 'type' => Controls_Manager::NUMBER,
	275	+ 'min' => 0,
	276	+ 'step' => 10,
	277	+ 'default' => 300,
	278	+ 'selectors' => [
	279	+ '{{WRAPPER}} .king-addons-image-grid-item img' => 'transition: all {{SIZE}}ms cubic-bezier(.25,.46,.45,.94);'
	280	+ ],
	281	+ ]
	282	+ );
	283	+
	284	+ $this->add_group_control(
	285	+ Group_Control_Css_Filter::get_type(),
	286	+ [
	287	+ 'label' => esc_html__('CSS Filter', 'king-addons'),
	288	+ 'name' => 'kng_image_grid_image_css_filters',
	289	+ 'selector' => '{{WRAPPER}} .king-addons-image-grid-item img',
	290	+ ]
	291	+ );
	292	+
	293	+ $this->add_group_control(
	294	+ Group_Control_Css_Filter::get_type(),
	295	+ [
	296	+ 'label' => esc_html__('CSS Filter for image on hover', 'king-addons'),
	297	+ 'name' => 'kng_image_grid_image_css_filters_hover',
	298	+ 'selector' => '{{WRAPPER}} .king-addons-image-grid-item img:hover',
	299	+ ]
	300	+ );
	301	+
	302	+ $this->add_group_control(
	303	+ Group_Control_Box_Shadow::get_type(),
	304	+ [
	305	+ 'name' => 'kng_image_grid_image_box_shadow',
	306	+ 'selector' => '{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner',
	307	+ ]
	308	+ );
	309	+
	310	+ $this->add_group_control(
	311	+ Group_Control_Border::get_type(),
	312	+ [
	313	+ 'name' => 'kng_image_grid_image_border',
	314	+ 'selector' => '{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner',
	315	+ 'fields_options' => [
	316	+ 'border' => [
	317	+ 'default' => 'none',
	318	+ ],
	319	+ ],
	320	+ ]
	321	+ );
	322	+
	323	+ $this->add_responsive_control(
	324	+ 'kng_image_grid_image_border_radius',
	325	+ [
	326	+ 'label' => esc_html__('Border Radius', 'king-addons'),
	327	+ 'type' => Controls_Manager::DIMENSIONS,
	328	+ 'size_units' => ['px', '%'],
	329	+ 'default' => [
	330	+ 'top' => 0,
	331	+ 'right' => 0,
	332	+ 'bottom' => 0,
	333	+ 'left' => 0,
	334	+ 'unit' => 'px',
	335	+ ],
	336	+ 'selectors' => [
	337	+ '{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	338	+ ]
	339	+ ]
	340	+ );
	341	+
	342	+ $this->end_controls_section();
	343	+ /** END SECTION: Images ===================== */
	344	+
	345	+ }
	346	+
	347	+ protected function render(): void
	348	+ {
	349	+ $settings = Core::displaySettings($this);
	350	+ $this_ID = $this->get_id();
	351	+
	352	+ // Define allowed tags and attributes
	353	+ $allowed_tags = wp_kses_allowed_html('post');
	354	+ $allowed_tags['img']['srcset'] = true;
	355	+ $allowed_tags['img']['sizes'] = true;
	356	+ $allowed_tags['img']['decoding'] = true;
	357	+ $allowed_tags['img']['loading'] = true;
	358	+
	359	+ echo '<div id="king-addons-image-grid-' . esc_attr($this_ID) . '" class="king-addons-image-grid">';
	360	+
	361	+ /** @noinspection PhpUnusedLocalVariableInspection */
	362	+ foreach ($settings['kng_image_grid_content_items'] as $key => $item) {
	363	+ echo '<div class="king-addons-image-grid-item king-addons-image-grid-item-' . esc_attr($this_ID) . '">';
	364	+ echo '<div class="king-addons-image-grid-item-inner">';
	365	+
	366	+ $image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_image_grid_image_size', 'kng_image_grid_image');
	367	+ echo wp_kses($image_html, $allowed_tags);
	368	+
	369	+ echo '</div>';
	370	+ echo '</div>';
	371	+ }
	372	+
	373	+ echo '</div>';
	374	+
	375	+ $js_grid = "
	376	+ (function ($) {
	377	+ if (document.readyState === 'complete') {
	378	+ let " . '$grid' . "
	379	+ = $('#king-addons-image-grid-" . esc_js($this_ID) . "').isotope({
	380	+ itemSelector: '.king-addons-image-grid-item-" . esc_js($this_ID) . "',
	381	+ layoutMode: '" . esc_js($settings['kng_image_grid_grid_layout']) . "',
	382	+ });
	383	+
	384	+ " . '$grid' . ".imagesLoaded().progress(function () {
	385	+ " . '$grid' . ".isotope('layout');
	386	+ });
	387	+
	388	+ } else {
	389	+ window.addEventListener('load', function () {
	390	+
	391	+ let " . '$grid' . "
	392	+ = $('#king-addons-image-grid-" . esc_js($this_ID) . "').isotope({
	393	+ itemSelector: '.king-addons-image-grid-item-" . esc_js($this_ID) . "',
	394	+ layoutMode: '" . esc_js($settings['kng_image_grid_grid_layout']) . "',
	395	+ });
	396	+
	397	+ " . '$grid' . ".imagesLoaded().progress(function () {
	398	+ " . '$grid' . ".isotope('layout');
	399	+ });
	400	+
	401	+ });
	402	+ }
	403	+ })(jQuery);
	404	+ ";
	405	+ wp_print_inline_script_tag($js_grid);
	406	+ }
	407	+}