https://morganrealestate.co.uk/wp-content/themes/morgan/js/main.js?ver=1.0.0

1
2jQuery(document).ready(function($) {
3
4    let scaleFactor = window.devicePixelRatio;
5
6    if (scaleFactor > 1) {
7        document.body.classList.add('display-scaled');
8    }
9
10    //var slideshow = $('.slideshow');
11    var totalWidth = 0;
12    var firstrun = true;
13    var animationTime = 0;
14
15    $( ".auto-slides .slide" ).each(function() {
16        if(!$(this).hasClass("slide-back")){
17            totalWidth += $( this ).width();
18            animationTime += 10000;
19        }
20    });
21
22
23    function animateSlides() {
24
25        $('.slideshow').animate({left: -totalWidth}, animationTime, "linear", function() {
26            $('.slideshow').css('left', 0);
27        });
28        if(firstrun){
29            firstrun = false;
30            setInterval(animateSlides, animationTime);
31        }
32    }
33    animateSlides();
34
35    $('.slide-down').click(function() {
36        $('html, body').animate({
37            scrollTop: $(window).height()
38        }, 500); // 1000 milliseconds (1 second) scroll duration
39    });
40
41    // scroll position detection
42    $(window).on('scroll', function() {
43        AdjustMenuColor();
44    });
45
46    function AdjustMenuColor(){
47        if ($(window).scrollTop() > ($(window).height()-200)) {
48            $('body').addClass('scrolled');
49        } else {
50            $('body').removeClass('scrolled');
51        }
52
53        //console.log($(window).scrollTop() > $('#contact-panel').height()/4);
54
55        if ($(window).scrollTop() > ($('#contact-panel').height()/4)+200) {
56            $('body').addClass('scrolled-half');
57        } else {
58            $('body').removeClass('scrolled-half');
59        }
60    }
61    AdjustMenuColor();
62
63    function CheckOverlap() {
64        var masthead = $('#masthead');
65        var mastheadOffset = masthead.offset();
66        var mastheadWidth = masthead.outerWidth();
67        var mastheadHeight = masthead.outerHeight();
68
69        var hasOverlap = false;
70
71        $('.full-width-image').each(function() {
72            var imageOffset = $(this).offset();
73            var imageWidth = $(this).outerWidth();
74            var imageHeight = $(this).outerHeight();
75
76            // Check for overlap condition
77            if (
78                mastheadOffset.left < imageOffset.left + imageWidth &&
79                mastheadOffset.left + mastheadWidth > imageOffset.left &&
80                mastheadOffset.top < imageOffset.top + imageHeight &&
81                mastheadOffset.top + mastheadHeight > imageOffset.top
82            ) {
83                hasOverlap = true;
84                return false; // Exit the .each loop early if an overlap is found
85            }
86        });
87
88        if (hasOverlap) {
89            masthead.addClass('full-image-overlap');
90        } else {
91            masthead.removeClass('full-image-overlap');
92        }
93    }
94
95    // Run the check on page load and on window scroll or resize
96    $(window).on('load scroll resize', function() {
97        CheckOverlap();
98    });
99
100    // Function to check if the element is in the viewport
101    function isInViewport(element) {
102        if(element.length>0){
103            var elementTop = $(element).offset().top;
104            var elementBottom = elementTop + $(element).outerHeight();
105            var viewportTop = $(window).scrollTop();
106            var viewportBottom = viewportTop + $(window).height();
107            return elementBottom > viewportTop && elementTop < viewportBottom;
108        } 
109    }
110
111    // Check on scroll and on page load
112    $(window).on('scroll resize', function() {
113        if (isInViewport($('.counter'))) {
114            if(!$('.counter').hasClass('visible')){
115                $('.counter').addClass('visible'); // Add the class when visible
116
117                // stats counter
118                $('.counter.visible').each(function() {
119                    animateCounter($(this));
120                });
121            }
122            
123        } else {
124            //$('.counter').removeClass('visible'); // Remove the class when not visible
125        }
126    });
127
128    // Initial check in case the element is already visible
129    $(window).trigger('scroll');
130
131    //hidden content
132    $( ".hidden-content" ).each(function() {
133        $( ".hidden-content" ).prepend( "<a href='#' class='hidden-content-toggle'>&nbsp;</a>" );
134    });

135
136    $( ".hidden-content" ).on('click', '.hidden-content-toggle', function(e) {
137        e.preventDefault();
138        $(this).parent().toggleClass('open');
139    });
140
141    function animateCounter(_this){
142        var $this = _this,
143            startValue = parseFloat($this.data('start')),
144            targetValue = parseFloat($this.data('target')),
145            decimals = parseInt($this.data('decimals')),
146            duration = 2500; // Duration of the animation in milliseconds
147
148        $({ count: startValue }).animate({ count: targetValue }, {
149            duration: duration,
150            easing: 'swing',
151            step: function() {
152                var value = this.count.toFixed(decimals);
153                $this.text(formatNumberWithCommas(value));
154            },
155            complete: function() {
156                var value = targetValue.toFixed(decimals);
157                $this.text(formatNumberWithCommas(value));
158            }
159        });
160    }
161
162    function formatNumberWithCommas(number) {
163        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
164    }
165
166    $('.filter-dropdown').click(function() {
167        $(this).parent().parent().toggleClass('open');
168    });
169
170    // accordion
171    $('.accordion-header').click(function() {
172        var content = $(this).next('.accordion-content');
173        var icon = $(this).find('.accordion-icon');
174        var item = $(this).closest('.accordion-item');
175
176        // Find the closest parent accordion-block and then find the corresponding tab content
177        var tabContent = $(this).closest('.accordion-block').find('.accordion-tab-content');
178        //tabContent.removeClass('open');
179
180        // Toggle the content and icon
181        if (item.hasClass('active')) {
182            item.removeClass('active');
183            tabContent.removeClass('open');
184            setTimeout(function() {
185                tabContent.empty(); // Clear the tab content if closing
186            }, 500);
187        } else {
188            if(!tabContent.hasClass('open')){
189                tabContent.html(content.html());
190                tabContent.addClass('open');
191            }else{
192                tabContent.removeClass('open');
193                setTimeout(function() {
194                    tabContent.addClass('open');
195                    tabContent.html(content.html());
196                }, 500);
197            }
198            
199            $('.accordion-item').not(this).removeClass('active');
200            item.toggleClass('active');
201        }
202
203        
204
205    });
206
207    // teams
208    $('.team-card').click(function() {
209        var content = $(this).next('.team-info-content');
210        var icon = $(this).find('.icon-button');
211
212        if ($(this).hasClass('active')) {
213            // Remove 'active' class from the clicked card
214            $(this).removeClass('active');
215            $('.team-card').removeClass('inactive');
216        } else {
217            // Remove 'active' class from all .team-card elements
218            $('.team-card').removeClass('active');
219            $('.team-card').addClass('inactive');
220            // Add 'active' class to the clicked card
221            $(this).removeClass('inactive');
222            $(this).addClass('active');
223        }
224    });
225
226     // Handle filter link clicks
227     $('.filter-link').click(function(e) {
228        e.preventDefault(); // Prevent the default link behavior
229        
230        // Get the data-term-id from the clicked link
231        var termId = $(this).data('term-id');
232
233        if(termId == "0"){
234            $('.filtered-card').removeClass('filter-in');
235            $('.filtered-card').removeClass('filter-out');
236            $('.filter-link').parent().removeClass('current-filter');
237            $(this).parent().addClass('current-filter');
238            return false;
239        }
240        
241        // Add 'filter-out' class to all team cards
242        $('.filtered-card').removeClass('filter-in').addClass('filter-out');
243        
244        // Add 'filter-in' class to the team cards that match the filter
245        $('.filtered-card.filter-' + termId).removeClass('filter-out').addClass('filter-in');
246
247        // Remove 'current-filter' class from all filter links
248        $('.filter-link').parent().removeClass('current-filter');
249
250        // Add 'current-filter' class to the clicked filter link
251        $(this).parent().addClass('current-filter');
252
253    });

254
255
256    //lightbox
257    $('.property-image, .property-image-link').on('click', function(e) {
258        e.preventDefault();
259        
260        var postId = $(this).data('post-id');
261        
262        // AJAX request to load the content
263        $.ajax({
264            url: ajax_object.ajax_url, // WordPress AJAX URL
265            type: 'POST',
266            data: {
267                action: 'load_property_content',
268                post_id: postId
269            },
270            success: function(response) {
271                $('#lightbox-property-content').html(response);
272                $('.lightbox-overlay').fadeIn();
273                // Initially display the first slide
274                lb_currentIndex = 0;
275                lb_showSlide(lb_currentIndex);
276                $('.property-info .counter').each(function() {
277                    animateCounter($(this));
278                });
279                $('body').addClass('lightbox-open');
280            },
281            error: function(xhr, ajaxOptions) {
282                console.log(xhr.responseText);
283                alert('There was an error loading the content.');
284            }
285        });
286    });
287    
288    // Close lightbox
289    $('.lightbox-overlay').on('click', '.lightbox-close', function() {
290       $('.lightbox-overlay').fadeOut();
291       $('body').removeClass('lightbox-open');
292    });
293    
294    // Prevent lightbox content click from closing
295    //$('.lightbox-content').on('click', function(e) {
296     //   e.stopPropagation();
297    //});
298
299    
300    //lightbox slideshow ----------------------------------------------------------------------------------------
301
302    let lb_currentIndex = 0;
303
304    $('.lightbox-overlay').on('click', '.lb-slideshow-navigation .next', function() {
305        if (!$(this).hasClass('disabled')) {
306            lb_showSlide(lb_currentIndex + 1);
307        }
308    });
309
310    $('.lightbox-overlay').on('click', '.lb-slideshow-navigation .prev', function() {
311        if (!$(this).hasClass('disabled')) {
312            lb_showSlide(lb_currentIndex - 1);
313        }
314    });
315
316    function lb_showSlide(index) {
317        lb_currentIndex = (index + $('.lb-slide').length) % $('.lb-slide').length;
318        const slideWidth = $('.lb-slideshow').width();

319        var slidePos = lb_currentIndex * slideWidth;
320        $('.lb-slides-container').css('transform', `translateX(-${slidePos}px)`);
321        //updateCaptionAndLink(currentIndex);
322        lb_updateIndex(lb_currentIndex);
323        lb_updateNavigation(lb_currentIndex);
324    }
325
326    function lb_updateNavigation(index) {
327        if (index === 0) {
328            $('.lb-slideshow-navigation .prev').addClass('disabled');
329        } else {
330            $('.lb-slideshow-navigation .prev').removeClass('disabled');
331        }
332
333        if (index === $('.lb-slide').length - 1) {
334            $('.lb-slideshow-navigation .next').addClass('disabled');
335        } else {
336            $('.lb-slideshow-navigation .next').removeClass('disabled');
337        }
338    }
339
340    function lb_updateIndex(index) {
341        $('.lb-slideshow-index .current-index').text(index + 1);
342        $('.lb-slideshow-index .total-index').text($('.lb-slide').length);
343    }
344
345
346    const observer = new IntersectionObserver(function(entries) {
347        entries.forEach(function(entry) {
348          if (entry.isIntersecting) {
349            $(entry.target).addClass('play-animation');
350          } //else {
351           // $(entry.target).removeClass('play-animation');
352         // }
353        });
354      });
355    
356      $('.animated-element').each(function() {
357        observer.observe(this);
358      });
359
360});