https://dropgym.io/js/page-membership.js

1gsap.registerPlugin(SplitText,ScrollTrigger,CustomEase);
2
3/* ---- */
4
5
6  // Create a simulate click event to trigger when you want
7  var simulateClick = function (elem) {
8    // Create our event (with options)
9    var evt = new MouseEvent('click', {
10      bubbles: true,
11      cancelable: true,
12      view: window
13    });
14    // If cancelled, don't dispatch our event
15    var canceled = !elem.dispatchEvent(evt);
16  };
17// Change Top NAVI Background color
18$(function() {
19  // ON HOMEPAGE - Nav have light color background
20  if(location.pathname == "/") {
21  	$(".navi-top").addClass("active-nav-home");
22  }
23  // ON SCROLL - For other pages
24  $(window).on("scroll", function() {
25    if(location.pathname !== "/"){
26      if($(window).scrollTop() > 50) {
27        $(".navi-top").addClass("active-nav");
28      } else {
29        //remove the background property so it comes transparent again (defined in your css)
30        $(".navi-top").removeClass("active-nav");
31      }
32    }
33  });
34});
35/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
36const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
37if(vw > 991) {
38  var prevScrollpos = window.pageYOffset;
39  window.onscroll = function() {
40    var currentScrollPos = window.pageYOffset;
41    if (prevScrollpos > currentScrollPos) {
42      document.getElementById("navi-top").style.top = "0";
43    } else {
44      document.getElementById("navi-top").style.top = "-100px";
45    }
46    prevScrollpos = currentScrollPos;
47    
48    // At the bottom of page -> Show nav menu
49    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
50      document.getElementById("navi-top").style.top = "0";
51    }
52  }
53}
54/* Function to disable & enable scroll */
55// left: 37, up: 38, right: 39, down: 40,
56// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
57var keys = {37: 1, 38: 1, 39: 1, 40: 1};
58function preventDefault(e) {
59  e.preventDefault();
60}
61
62function preventDefaultForScrollKeys(e) {
63  if (keys[e.keyCode]) {
64    preventDefault(e);
65    return false;
66  }
67}
68
69// modern Chrome requires { passive: false } when adding event
70var supportsPassive = false;
71try {
72  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
73    get: function () { supportsPassive = true; } 
74  }));
75} catch(e) {}
76
77var wheelOpt = supportsPassive ? { passive: false } : false;
78var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
79// call this to Disable
80function disableScroll() {
81  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
82  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
83  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
84  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
85}
86
87// call this to Enable
88function enableScroll() {
89  window.removeEventListener('DOMMouseScroll', preventDefault, false);
90  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
91  window.removeEventListener('touchmove', preventDefault, wheelOpt);
92  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
93}
94
95/* Click nearest location to the facilities page */
96$(".nearest-location").attr("href", document.querySelector(".nearest-location").getAttribute("href") + "#map-block");
97$(".nearest-location").on("click", (e) => {
98  if(vw > 991){
99    $([document.documentElement, document.body]).animate({
100      scrollTop: $("#map-section").offset().top - 75
101    }, 2000);
102  } else {
103    $([document.documentElement, document.body]).animate({
104      scrollTop: $("#map-section").offset().top - 150
105    }, 2000);
106  }
107})
108  
109
110
111/* Remove lighten class of Footer on homepage */
112if(location.pathname == "/") $(".footer").removeClass("lighten").addClass("homepage-lighten");
113  
114/* Working with 'Book a consultation' link */ 
115var BookConsultationLink = Array.from(document.querySelectorAll(".book-a-consultation"));
116console.log(BookConsultationLink);
117BookConsultationLink.forEach((link, i) => {
118	var currentURL = link.getAttribute("href");
119  	link.setAttribute("href", `${currentURL}/?pt=yes`)
120})
121
122/* Memberstack handle minor design */
123var openProfilePortal = document.getElementById("open-member-details-form");
124if(openProfilePortal) {
125  openProfilePortal.addEventListener("click", () => {
126    var msLinkMenu = Array.from(document.querySelectorAll(".ms-portal-navlink"));
127    var DOBField = $("#infoForm [name='Date of Birth']");
128    var GenderField = $("#infoForm [name='Gender']");
129    // Set DOB Field to date type
130    DOBField.attr("type", "date");
131    // Set new Gender Field option type
132    if($("#infoForm datalist").length <= 0){
133      GenderField.after(
134        `<datalist id="genderlist">
135            <option>

135Male</option>
136            <option>Female</option>
137            <option>Rather not say</option>
138        </datalist>`
139      );
140    }
141    // Set Gender field to have a list of options
142    GenderField.attr("list", "genderlist");
143    // Configure gender field when user click on the field to reset the field
144    /*
145    GenderField.on('click', function() {
146      $(this).attr('data-store-gender', $(this).val());
147      $(this).val('');
148    });
149    GenderField.on('mouseleave', function() {
150      if ($(this).val() == '') {
151        $(this).val($(this).attr('data-store-gender'));
152      }
153    });
154    */
155    // Set the link inside Memberstack form to be gold
156    msLinkMenu.forEach(link => {
157      // console.log(link);
158      link.addEventListener("click", (e) => {
159        console.log(e.currentTarget);
160        $(e.currentTarget).attr("style", "color: #bf984c !important;")
161      });
162      if($(link).attr("style")) {
163        if($(link).attr("style").includes("color: rgb(0, 0, 0);")) {
164          $(link).css("color", "#bf984c");
165        }
166      }
167    })
168  })
169}
170
171
172
173/* ---- */
174
175
176/* window.__dgParticles(@dom-id, @path-json, @callback (optional)); */
177// Initialise the particleJS function
178setTimeout(() => {
179 	window.__dgParticles('particles-bg', "/js/membership-bg.json", function(){});
180}, 2600)
181
182// Content Navi Section - Click on each link to switch out image
183function changeImage(imageURL){
184	$(".content-navi-bg").stop().animate({opacity: 0}, 500, function(){
185    $(this).css({'background-image': `linear-gradient(90deg, #050b16 25%, transparent), url("${imageURL}")`})
186    	.animate({opacity: 1},{duration: 500});
187 });
188}
189
190// Set Apply to join on different membership choice
191$("#annual-membership").attr("href", "/apply-to-join/?mb=annual");
192$("#monthly-membership").attr("href", "/apply-to-join/?mb=monthly");
193$("#payg-membership").attr("href", "/apply-to-join/?mb=payg");
194
195
196/* Force page to load at top of the page */
197$(window).on("load", function () {
198  // When click nearest location
199  if(location.hash == "#map-block"){
200    if(vw > 991){
201      setTimeout(() => {
202        $([document.documentElement, document.body]).animate({
203            scrollTop: $("#map-section").offset().top - 75
204        }, 10);
205      }, 2700)
206    } else {
207      $([document.documentElement, document.body]).animate({
208        scrollTop: $("#map-section").offset().top - 150
209      }, 10);
210    }
211  } else if(location.hash == "#faq") {
212   $([document.documentElement, document.body]).animate({
213        scrollTop: $("#faq").offset().top - 75
214      }, 10);
215  } else {
216  	window.scrollTo(0, 0);
217  }
218  // If on homepage, disable scroll until landing animation finished
219  if(vw > 991 && location.pathname == "/"){
220  	disableScroll();
221    setTimeout(() => enableScroll(), 2000)
222  }
223});
224
225/*
226var contentNaviLink = document.querySelectorAll(".content-navi-link");
227contentNaviLink.forEach((link, i) => {
228	link.addEventListener("mouseenter", (e) => {
229  	console.log(i, e.currentTarget);
230  	if(i === 0) {
231    	changeImage("/assets/6107abb7f7b2bb2933e187c2/61332e7ce16aa26f2953172c_content-navi-1.jpg");
232		} else if (i === 1){
233    	changeImage("/assets/6107abb7f7b2bb2933e187c2/6134431af63a2ee00ab90134_content-navi-2.jpg");
234    } else if (i === 2){
235    	changeImage("/assets/6107abb7f7b2bb2933e187c2/6134431ba5e812198620fdd6_content-navi-3.jpg");
236    } else if (i === 3){
237    	changeImage("/assets/6107abb7f7b2bb2933e187c2/6134431b65a9290680fb917d_content-navi-4.jpg");
238    }
239  })
240})
241*/