https://williamcharlesconstruction.com/commonScript/script_common.js

1(function () {
2  const sliderWrappers = document.querySelectorAll('.slider-wrapper');
3  const accordion = document.querySelectorAll('.accordian-Custom-design');
4   const slider_image_swiper = document.querySelectorAll('.image-gallery-section');
5  
6   if(sliderWrappers) {
7    sliderWrappers.forEach(wrapper => {
8      const slider = wrapper.querySelector('.slider-container');
9      const slides = slider.querySelectorAll('.slide');
10      const prevBtn = wrapper.querySelector('.slider-prev');
11      const nextBtn = wrapper.querySelector('.slider-next');
12 
13      const attr = slider.getAttribute('data-custom-attr');
14      const match = attr ? attr.match(/previewSlides_(\d+)/) : null;
15      let slidesPerView = match ? parseInt(match[1]) : 3;
16      const gapRem = 1.5;
17      let isMobileView = false;
18 
19      function updateSlideWidths() {
20        const totalGap = gapRem * (slidesPerView - 1);
21        const width = window.innerWidth;
22        const sliderNavs = document.querySelectorAll('.slider-nav');
23       
24        if (width < 576) {
25          isMobileView = true;

26          slides.forEach(slide => {
27            slide.style.flex = `0 0 calc(60% + 0rem)`;
28          });
29          if (sliderNavs) {
30            const newWidth = Math.max(0, width - 25);
31            sliderNavs.forEach(sliderNav => {
32              sliderNav.setAttribute('style', `width: ${newWidth}px;`);
33            })
34          }
35        }
36        else {
37          isMobileView = false;
38          slides.forEach(slide => {
39            slide.style.flex = `0 0 calc((100% - ${totalGap}rem) / ${slidesPerView})`;
40          });
41          if (sliderNavs) {
42            sliderNavs.forEach(sliderNav => {
43              sliderNav.setAttribute('style', `width: 100%;`);
44            })
45          }
46        }
47      }
48 
49      function slideLeft() {
50        if (isMobileView) {
51          // For mobile, scroll by one slide's width plus gap
52          const slideWidth = slider.querySelector('.slide').offsetWidth;
53          slider.scrollLeft -= slideWidth + (gapRem * parseFloat(getComputedStyle(document.documentElement).fontSize));
54        } else {
55          slider.scrollLeft -= slider.offsetWidth / slidesPerView;
56        }
57      }
58 
59      function slideRight() {
60        if (isMobileView) {
61          // For mobile, scroll by one slide's width plus gap
62          const slideWidth = slider.querySelector('.slide').offsetWidth;
63          slider.scrollLeft += slideWidth + (gapRem * parseFloat(getComputedStyle(document.documentElement).fontSize));
64        } else {
65          slider.scrollLeft += slider.offsetWidth / slidesPerView;
66        }
67      }
68 
69      if (prevBtn) prevBtn.addEventListener('click', slideLeft);
70      if (nextBtn) nextBtn.addEventListener('click', slideRight);
71 
72      updateSlideWidths();
73      window.addEventListener('resize', updateSlideWidths);
74    });
75  }
76  
77  
78   if(accordion){
79     
80  var acc = document.getElementsByClassName("accordion");
81  var i;
82 
83  for (i = 0; i < acc.length; i++) {
84    acc[i].addEventListener("click", function() {
85      this.classList.toggle("active");
86      var panel = this.nextElementSibling;
87      if (panel.style.display === "block") {
88        panel.style.display = "none";
89      } else {
90        panel.style.display = "block";
91      }
92    });
93  }
94 
95   }
96  
97  // images swiper slider
98 
99  if(slider_image_swiper){
100      const mainImage = document.getElementById("mainImage");
101      const thumbnails = document.querySelectorAll(".thumbnail");
102 
103      if (thumbnails.length > 0) {
104        mainImage.src = thumbnails[0].src;
105        thumbnails[0].classList.add("active-thumbnail");
106      }
107 
108      thumbnails.forEach(thumbnail => {
109        thumbnail.addEventListener("click", function () {
110          mainImage.src = this.src;

111          setActiveThumbnail(this);
112        });
113      });
114 
115      // Set active thumbnail style
116      function setActiveThumbnail(activeThumb) {
117        const thumbnails = document.querySelectorAll(".thumbnail");
118      thumbnails.forEach(element => {
119        element.classList.remove("active-thumbnail");
120      });
121        activeThumb.classList.add("active-thumbnail");
122      }
123    }
124
125    
126window.addEventListener('load', function () {
127  function updateMetaIfExists(selector, attrName, attrValue, content) {
128    if (!content) return; // Do nothing if no content
129
130    // Remove all existing matching tags
131    document.head.querySelectorAll(selector).forEach(tag => tag.remove());
132
133    // Create a new meta tag with existing content
134    const tag = document.createElement('meta');
135    tag.setAttribute(attrName, attrValue);
136    tag.setAttribute('content', content);
137    document.head.appendChild(tag);
138  } 
139
140  // Get existing meta content (do nothing if not present)
141  const titleMeta = document.querySelector('meta[name="page-title-document"]')?.content;
142  const descriptionMeta = document.querySelector('meta[name="page-description-document"]')?.content;
143  const keywordsMeta = document.querySelector('meta[name="page-keywords-document"]')?.content;
144  const ogTitleMeta = document.querySelector('meta[property="og:title"]')?.content;
145  const ogDescriptionMeta = document.querySelector('meta[property="og:description"]')?.content;
146  const ogImageMeta = document.querySelector('meta[property="og:image"]')?.content;
147  const ogUrlMeta = document.querySelector('meta[property="og:url"]')?.content;
148  const ogTypeMeta = document.querySelector('meta[property="og:type"]')?.content;
149
150  // Update page title only if exists
151  if (titleMeta) document.title = titleMeta;
152
153  // Standard Meta
154  updateMetaIfExists('meta[name="page-title-document"]', 'name', 'page-title-document', titleMeta);
155  updateMetaIfExists('meta[name="page-description-document"]', 'name', 'page-description-document', descriptionMeta);
156  updateMetaIfExists('meta[name="page-keywords-document"]', 'name', 'page-keywords-document', keywordsMeta);
157
158  // Open Graph
159  updateMetaIfExists('meta[property="og:title"]', 'property', 'og:title', ogTitleMeta);
160  updateMetaIfExists('meta[property="og:description"]', 'property', 'og:description', ogDescriptionMeta);
161  updateMetaIfExists('meta[property="og:image"]', 'property', 'og:image', ogImageMeta);
162  updateMetaIfExists('meta[property="og:url"]', 'property', 'og:url', ogUrlMeta);
163  updateMetaIfExists('meta[property="og:type"]', 'property', 'og:type', ogTypeMeta);
164});
165
166})();