https://www.nestlehealthscience.com.hk/themes/custom/nhsc_com/js/custom.js?v=11.3.17

1/**
2 * @file
3 * Global utilities.
4 *
5 */
6(function ($, Drupal) {
7  ("use strict");
8
9  Drupal.behaviors.nhsc_com = {
10    attach: function (context, settings) {
11      // #Full page image | Autoplay trigger
12      if ($(".paragraph--type--nhsc-full-page-video").length) {
13        $("button.video-embed-field-lazy-play").click(function () {
14          $("button.ytp-play-button.ytp-button").click();
15        });
16      }
17
18      $(".search-toggle")
19        .off("click")
20        .on("click", function () {
21          $("body").toggleClass("search-open");
22          $('.region-search').find('[id*=edit-search]').focus().select();
23        });
24
25      $(document).ready(function () {
26        //#region BANNER VIDEO
27
28        // new version
29        if (jQuery(".banner-video-section").length) {
30          // play video
31          jQuery(".js-play-video").on("click", function () {
32            let banner_video = jQuery(this).closest(".banner-video-section");
33            if (banner_video.hasClass("paused")) {
34              banner_video.removeClass("paused");
35              banner_video.find("video")[0].play();
36            }
37          });
38
39          // pause video
40          jQuery(".js-pause-video").on("click", function () {
41            let banner_video = jQuery(this).closest(".banner-video-section");
42            banner_video.addClass("paused");
43            banner_video.find("video")[0].pause();
44          });
45
46          // mute video
47          jQuery(".js-mute-video").on("click", function () {
48            let banner_video = jQuery(this).closest(".banner-video-section");
49            console.log("banner v", banner_video);
50            banner_video.addClass("muted");
51            banner_video.find("video")[0].muted = true;
52          });
53
54          // unmute video
55          jQuery(".js-unmute-video").on("click", function () {
56            let banner_video = jQuery(this).closest(".banner-video-section");
57            console.log("banner v", banner_video);
58            banner_video.removeClass("muted");
59            banner_video.find("video")[0].muted = false;
60          });
61
62          // fullscreen toggle
63          function openFullscreen(elem) {
64            if (elem.requestFullscreen) {
65              elem.requestFullscreen();
66            } else if (elem.webkitRequestFullscreen) {
67              /* Safari */
68              elem.webkitRequestFullscreen();
69            } else if (elem.msRequestFullscreen) {
70              /* IE11 */
71              elem.msRequestFullscreen();
72            }
73          }
74          jQuery(".js-toggle-fullscreen").on("click", function () {
75            let banner_video = jQuery(this).closest(".banner-video-section");
76            openFullscreen(banner_video.find("video")[0]);
77          });
78          //end new version
79
80          // language selector dropdown
81          $(".js-language-dropdown, .active-language").on("click", function () {
82            $(".language-link").toggleClass("show");
83          });
84        }
85
86        /*
87        if ($('.banner-video-section').length) {
88
89          if ($(".video-item").paused) {
90            $(this).siblings().find('.video-play-pause').addClass('paused')
91          }
92
93          if ($(".video-item").muted) {
94            $(this).siblings().find('.video-mute').addClass('muted')
95          }
96
97          $('.video-play-pause').off("click").on("click", function () {
98            var video = $(this).closest('.banner-video-section').find(".video-item")[0];
99            if (video.paused || video.ended) {
100              // Change the button to a pause button
101              $(this).closest('.banner-video-section').removeClass('paused');
102              video.play();
103            } else {
104              // Change the button to a play button
105              $(this).closest('.banner-video-section').addClass('paused');
106              video.pause();
107            }
108          });
109
110          $('.video-mute').off("click").on("click", function () {
111            var video = $(this).closest('.banner-video-section').find(".video-item")[0];
112            if (video.muted) {
113              // Change the button to a mute button
114              $(this).closest('.banner-video-section').removeClass('muted');
115              video.muted = false;

116            } else {
117              // Change the button to an unmute button
118              $(this).closest('.banner-video-section').addClass('muted');
119              video.muted = true;
120            }
121          });
122
123          //fullscreen toggle start
124
125
126          //fullscreen toggle end
127
128        }
129        */
130      });
131
132      //#endregion
133
134      //#region SEARCH
135      // Search page AJAX fix
136      if (Drupal.AjaxCommands) {
137        Drupal.AjaxCommands.prototype.viewsScrollTop = null;
138      }
139
140      Drupal.behaviors.customAjax = {
141        attach: function (context, settings) {
142          $(document).ajaxComplete(function (event, xhr, settings) {
143            if (xhr.status == 200) {
144              $(".ajax-progress-fullscreen").remove();
145            }
146          });
147        },
148      };
149
150      //#endregion
151
152      //#ajax update search url
153
154      var stringPathName = window.location.pathname;
155
156      if (stringPathName == "/search") {
157        var search_input = document.getElementById("edit-search--5").value;
158
159        if (search_input) {
160          window.history.pushState(
161            stringPathName,
162            "Title",
163            "/search?search=" + search_input
164          );
165        }
166      }
167
168      //#end ajax search url
169
170      //#region CAROUSEL
171
172      if ($(".banner-video").length) {
173        $(".banner-video").each(function (index, el) {
174          if (index !== 0) {
175            $(this).find("video")[0].pause();
176          }
177        });
178      }
179
180      $(".carousel").on("slide.bs.carousel", function (ev) {
181        let slides = $(this).find(".carousel-item");
182        let pvid = slides[ev.from].querySelectorAll("video")[0];
183        let vid = slides[ev.to].querySelectorAll("video")[0];
184        if (vid) {
185          // let isPlaying = vid.currentTime > 0 && vid.readyState > 2;
186          vid.play();
187        }
188        if (pvid) {
189          pvid.pause();
190        }
191      });
192
193      $("video").on("play", function (e) {
194        $(".carousel").carousel("pause");
195      });
196      $("video").on("stop pause ended", function (e) {
197        $(".carousel").carousel();
198      });
199      //#endregion
200
201      //#region DUALITY SLIDER must be wrapped to run only on desktop and not on mobile
202      $("body")
203        .find(".twentytwenty-container")
204        .on("mouseleave touchstart", function () {
205          $(this).twentytwenty({
206            default_offset_pct: 0.5,
207            orientation: "horizontal",
208            no_overlay: true,
209            move_slider_on_hover: true,
210            move_with_handle_only: true,
211            click_to_move: false,
212            passive: false,
213          });
214        });
215
216      let mobile = window.matchMedia(
217        "only screen and (max-width: 760px)"
218      ).matches;
219      if (mobile) {
220        $(window).on("load", function () {
221          $("body")
222            .find(".twentytwenty-container")
223            .on("mouseleave touchstart", function () {
224              $(this).twentytwenty({
225                default_offset_pct: 0.5,
226                orientation: "horizontal",
227                no_overlay: true,
228                move_slider_on_hover: true,
229                move_with_handle_only: true,
230                click_to_move: false,
231                passive: false,
232              });
233            });
234        });
235      }
236
237      //#endregion
238
239      // #region COUNTRY SWITCHER
240      $(".country-switcher .country-switcher-toggle")
241        .off("click")
242        .on("click", function () {
243          $("body").toggleClass("country-switcher-open");
244        });
245
246      $(".country-switcher .region h3")
247        .off("click")
248        .on("click", function () {
249          if ($(this).parent(".region").hasClass("open")) {
250            $(this).parent(".region").removeClass("open");
251          } else {
252            $(".country-switcher .region").removeClass("open");
253            $(this).parent(".region").addClass("open");
254          }
255        });
256      //#endregion
257
258      // #region Scroll to and open Accordion
259      $(once("nhsc_com", "body.node--type-landing-page", context)).each(
260        function () {
261          $(window).on("load", function (e) {
262            if (window.location.hash) {
263              e.preventDefault();
264              e.stopPropagation();
265              scrollToAndOpenAccordion();
266            }
267          });
268
269          window.addEventListener("hashchange", function () {
270            scrollToAndOpenAccordion();
271          });
272
273          function scrollToAndOpenAccordion() {
274            var hashName = Drupal.checkPlain(window.location.hash);
275            var hashID = hashName.replace("#", "");
276
277            var jQuerytarget = $("body").find('[data-anchor="' + hashID + '"]'); // get the hash name object
278
279            if (jQuerytarget.hasClass("card-header")) {
280              var jQuerytargetAccordion = "#collapse-" + hashID;
281
282              jQuery
283                .when($(jQuerytargetAccordion).collapse("show"))
284                .done(function () {
285                  setTimeout(function () {
286                    $("html, body").animate(
287                      {
288                        scrollTop: jQuerytarget.offset().top - 100,
289                      },
290                      "slow"
291                    );
292                  }, 500);
293                });
294            }
295          }
296        }
297      );
298      //#endregion
299      //remove empty div in submenu
300      $(document).ready(function () {
301        $(".we-mega-menu-col.span12").remove();
302      });
303
304      //#full-screen video toggle
305      //page with multiple videos
306      // $(".video-fullscreen-toggle").on("click", function () {
307      //   let makeFullscreenElem = jQuery(this).parents('.banner-video-section').find('video');
308
309      //   openFullscreen(makeFullscreenElem[0]);
310      //   //$(".banner-video-section").removeClass('fullscreen');
311      //   $(this).parent().parent().parent().toggleClass('fullscreenn');
312      //   $(this).toggleClass('actives');
313
314      // });
315
316      //page with one video
317      // $(".video-fullscreen-toggle").on("click", function () {
318      //   $(".banner-video-section").toggleClass('fullscreen');
319      //   $(this).toggleClass('actived');
320
321      // });
322    },
323  };
324
325  //#region CONTACT US RADIO ACTIVE CLASS
326  Drupal.behaviors.contact_us_behavior = {
327    attach: function (context, settings) {
328    let item_contact_topic = 0;
329
330    $(context)
331      .find(".form-item-contact-topic label")
332      .on("click", function () {
333        $(context).find(".form-item-contact-topic label").removeClass("active");
334        $(this).addClass("active");
335
336        item_contact_topic = $(this)
337          .closest(".form-item-contact-topic")
338          .index();
339
340        localStorage.setItem('contact_topic_index', item_contact_topic);
341      });
342
343      $(once("nhsc_contact_us", ".nhsc_contact_us", context)).each(function () {
344        let headerHeight = 0;
345
346        if ($(window).width() <= 1200) {
347          headerHeight = 70;
348        } else {
349          headerHeight = 106;
350        }
351
352        if ($(context).find(".js-form-item").hasClass("has-error")) {
353          const contact_topic_index = localStorage.getItem(
354            "contact_topic_index"
355          );
356
357          if ($(context).find(".form-item-contact-topic").length) {
358            let item = $(context).find(
359              ".nhsc_contact_us .form-item-contact-topic"
360            )[contact_topic_index];
361            $(item).find("label").addClass("active");
362          }
363
364          setTimeout(function() {
365            $("html, body").animate(
366              { scrollTop: $(context).find(".has-error").first().offset().top - headerHeight},
367              500
368            );
369          }, 500);
370        } else {
371          localStorage.removeItem("contact_topic_index");
372        }
373      });
374    },
375  };
376  //#endregion
377})(jQuery, Drupal);