https://krebs.com.pl/wp-content/plugins/divi-soical-feed/assets/js/dsf-pn-custom.js?ver=1.0.0

1/**
2 * Pinterest Feed Slider and Popup Functionality
3 * 
4 * Handles:
5 * - Responsive slider/carousel initialization
6 * - Popup modal for post details
7 * - Masonry grid layout
8 * - Media type handling (images, videos, carousels)
9 * 
10 * @since 1.0.0
11 * @package DiviSocialFeed
12 */
13
14// Initialize Pinterest sliders with responsive settings
15jQuery(document).ready(function($) {
16    $('.dsf_pn_slider_wrapper').each(function() {
17        let $this = $(this);
18        
19        /**
20         * Get spacing values from data attributes
21         * Default to 20px if not specified or invalid
22         */
23        let spacingDesktop = parseInt($this.data('spacing-desktop')) || 20;
24        let spacingTablet = parseInt($this.data('spacing-tablet')) || 20;
25        let spacingMobile = parseInt($this.data('spacing-mobile')) || 20;
26
27        /**
28         * Get column count settings from data attributes
29         * These will be used in the responsive configuration
30         */
31        let columnDesktop = $this.data('desktop-column');
32        let columnTablet = $this.data('tablet-column');
33        let columnPhone = $this.data('phone-column');
34
35        /**
36         * Initialize Owl Carousel with responsive settings
37         */
38        $this.find('.owl-carousel.dsf_pn_slider').owlCarousel({
39            items: 1, // Default number of items
40            loop: true, // Infinite looping
41            nav: true, // Show navigation arrows
42            dots: true, // Show pagination dots
43            autoplay: false, // Disable auto-play by default
44            autoplayTimeout: 3000, // Auto-play interval if enabled
45            navText: ['<span class="prev-arrow">‹</span>', '<span class="next-arrow">›</span>'], // Custom arrow icons
46            
47            /**
48             * Responsive breakpoint configuration
49             */
50            responsive: {
51                // Phone viewport
52                0: {
53                    items: columnPhone || 1, // Default to 1 item on phone
54                    margin: spacingMobile // Use mobile spacing
55                },
56                // Tablet viewport
57                768: {
58                    items: columnTablet || 2, // Default to 2 items on tablet
59                    margin: spacingTablet // Use tablet spacing
60                },
61                // Desktop viewport
62                981: {
63                    items: columnDesktop || 3, // Default to 3 items on desktop
64                    margin: spacingDesktop // Use desktop spacing
65                }
66            }
67        });
68    });
69});
70
71// Store the next page cursor per container
72// let nextCursor = {};
73
74/**
75 * Pinterest Popup Modal Functionality
76 * 
77 * Handles:
78 * - Post click events
79 * - Media type detection and rendering
80 * - Popup content population
81 * - Popup show/hide functionality
82 */
83jQuery(document).ready(function ($) {
84    /**
85     * Event delegation for post clicks (works with dynamically added posts)
86     */
87    $(document).on("click", ".dsf_pn_feed_item", function () {
88        // Get post identification data
89        let postId = $(this).data("id");
90        let postObject = $(this).data("object");
91
92        // Validate post data object exists
93        if (typeof window[postObject] === "undefined") {
94            console.error("Pinterest data object not found:", postObject);
95            return;
96        }
97
98        // Find the specific post data
99        let postData = window[postObject].media.find(post => String(post.id) === String(postId));
100
101        if (!postData) {
102            console.error("Post data not found for ID:", postId);
103            return;
104        }
105
106        /**
107         * Cache DOM elements for popup
108         */
109        let popupContainer = $(".dsf_pn_popup_container");
110        let popupLeft = $(".dsf_pn_popup_left");
111        let popupRight = $(".dsf_pn_popup_right");
112 
113        /**
114         * Update post details in the popup
115         */
116            // Set right side image with fallback resolutions
117            let rightImage = popupLeft.find("img.dsf_pn_popup_image");
118            if (rightImage.length) {
119                let media_url = '';
120
121                if (postData.media?.images?.['1200x']?.url) {
122                    media_url = postData.media.images['1200x'].url;
123                } else if (postData.media?.images?.['600x']?.url) {
124                    media_url = postData.media.images['600x'].url;
125                } else if (postData.media?.images?.['400x300']?.url) {
126                    media_url = postData.media.images['400x300'].url;
127                } else if (postData.media?.images?.['150x150']?.url) {
128                    media_url = postData.media.images['150x150'].url;
129                }
130
131                if (media_url) {
132                    rightImage.attr("src", media_url).show();
133                } else {
134                    rightImage.hide(); // fallback to hiding if no image found
135                }
136            }
137
138        popupRight.find(".dsf_pn_popup_data").text(postData.created_at || "");

139        popupRight.find(".dsf_pn_popup_title").text(postData.title || "");
140
141        let caption = postData.description || "";
142            caption = caption.replace(/\n/g, "<br>");
143        popupRight.find(".dsf_pn_popup_caption").html(caption);
144
145        // Show the popup
146        $(".dsf_pn_popup").fadeIn(function () {
147            $("body").addClass("dsf-popup-open"); //Add class when popup opens
148        });
149    });
150
151    /**
152     * Popup close handlers
153     */
154    
155    // Close button click
156    $(document).on("click", ".dsf_pn_popup_close", function () {
157        $(".dsf_pn_popup").fadeOut();
158    });
159
160    // Close when clicking outside popup content
161    $(document).on("click", function (e) {
162        if ($(e.target).hasClass("dsf_pn_popup")) {
163            $(".dsf_pn_popup").fadeOut();
164        }
165    });
166    
167});
168
169
170
171 jQuery(document).ready(function ($) {
172    $(".dsf_pn_post_caption").each(function () {
173        let text = $(this).text();  
174        // Replace the literal <br /> (or <br>) text with actual line breaks
175        text = text.replace(/&lt;br\s*\/?&gt;/gi, "<br>");
176        $(this).html(text); 
177    });
178});
179
180/**
181 * Masonry Grid Layout Initialization
182 * 
183 * Sets up the masonry layout for grid displays
184 */
185
186jQuery(document).ready(function ($) {
187    var $grid = $('.dsf_pn_grid_masonry');
188
189    // wait until images are loaded
190    $grid.imagesLoaded(function () {
191        $grid.masonry({
192            itemSelector: '.dsf_pn_feed_item',
193            columnWidth: '.grid-sizer',
194            gutter: '.gutter-sizer',
195            percentPosition: true
196        });
197    });
198});