vf-site/template/js/scripts.js

/* Description: Custom JS file */

(function ($) {
  "use strict";

  /* Navbar Scripts */
  // jQuery for page scrolling feature - requires jQuery Easing plugin
  $(function () {
    $(document).on("click", "a.page-scroll", function (event) {
      var $anchor = $(this);
      $("html, body")
        .stop()
        .animate(
          {
            scrollTop: $($anchor.attr("href")).offset().top,
          },
          600,
          "easeInOutExpo",
        );
      event.preventDefault();
    });
  });

  // offcanvas script from Bootstrap + added element to close menu on click in small viewport
  $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
    "click",
    function () {
      $(".offcanvas-collapse").toggleClass("open");
    },
  );

  // hover in desktop mode
  function toggleDropdown(e) {
    const _d = $(e.target).closest(".dropdown"),
      _m = $(".dropdown-menu", _d);
    setTimeout(
      function () {
        const shouldOpen = e.type !== "click" && _d.is(":hover");
        _m.toggleClass("show", shouldOpen);
        _d.toggleClass("show", shouldOpen);
        $('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
      },
      e.type === "mouseleave" ? 300 : 0,
    );
  }
  $("body")
    .on("mouseenter mouseleave", ".dropdown", toggleDropdown)
    .on("click", ".dropdown-menu a", toggleDropdown);

  /* Header Slider - Swiper */
  var headerSlider = new Swiper(".header-slider", {
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    loop: true,
    effect: "fade",
    speed: 700,
  });

  /* Image Slider - Swiper */
  var imageSlider = new Swiper(".image-slider", {
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    loop: false,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    slidesPerView: 3,
    spaceBetween: 20,
    breakpoints: {
      // when window is <= 767px
      767: {
        slidesPerView: 1,
      },
      // when window is <= 991px
      991: {
        slidesPerView: 2,
        spaceBetween: 10,
      },
      // when window is <= 1199px
      1199: {
        slidesPerView: 3,
        spaceBetween: 20,
      },
    },
  });

  /* Image Slider Room - Swiper */
  var imageSlider = new Swiper(".image-slider-room", {
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    loop: false,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  /* Card Slider - Swiper */
  var cardSlider = new Swiper(".card-slider", {
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    slidesPerView: 3,
    spaceBetween: 30,
    breakpoints: {
      // when window is <= 767px
      767: {
        slidesPerView: 1,
      },
      // when window is <= 991px
      991: {
        slidesPerView: 2,
      },
    },
  });

  /* Image Lightbox - Magnific Popup */
  $(".popup-link").magnificPopup({
    removalDelay: 300,
    type: "image",
    callbacks: {
      beforeOpen: function () {
        this.st.image.markup = this.st.image.markup.replace(
          "mfp-figure",
          "mfp-figure " + this.st.el.attr("data-effect"),
        );
      },
      beforeClose: function () {
        $(".mfp-figure").addClass("fadeOut");
      },
    },
    gallery: {
      enabled: true, //enable gallery mode
    },
  });

  /* Details Lightbox - Magnific Popup */
  $(".popup-with-move-anim").magnificPopup({
    type: "inline",
    fixedContentPos: true,
    fixedBgPos: true,
    overflowY: "auto",
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: "my-mfp-slide-bottom",
  });

  /* Move Form Fields Label When User Types */
  // for input and textarea fields
  $("input, textarea").keyup(function () {
    if ($(this).val() != "") {
      $(this).addClass("notEmpty");
    } else {
      $(this).removeClass("notEmpty");
    }
  });

  /* Datepicker - Bootstrap Datepicker */
  $("#start").datepicker({
    todayHighlight: true,
    autoclose: true,
    format: "MM/dd/yyyy",
  });

  // detects change to selected date to keep the label above the value in the input field
  $("#start")
    .datepicker()
    .on("changeDate", function (e) {
      $("input[id=start]").addClass("notEmpty");
    });

  $("#end").datepicker({
    autoclose: true,
    format: "MM/dd/yyyy",
  });

  // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
  $("#end")
    .datepicker()
    .on("changeDate", function (e) {
      $("input[id=end]").addClass("notEmpty");
    });

  /* Back To Top Button */
  // create the back to top button
  $("body").prepend(
    '<a href="body" class="back-to-top page-scroll">Back to Top</a>',
  );
  var amountScrolled = 700;
  $(window).scroll(function () {
    if ($(window).scrollTop() > amountScrolled) {
      $("a.back-to-top").fadeIn("500");
    } else {
      $("a.back-to-top").fadeOut("500");
    }
  });

  /* Removes Long Focus On Buttons */
  $(".button, a, button").mouseup(function () {
    $(this).blur();
  });
})(jQuery);