https://sagecao1125.github.io/js/main.js

1/************* Main Js File ************************
2    Template Name: Boyuan - Website
3    Author: cosmos-themes
4    Version: 2.0
5    Copyright 2021
6****************************************/
7
8/*==================================
9
10        Table of Content
11
12        1. Window Load Function
13            a. Preloader Setup
14            b. Portfolio Isotope Setup
15            c. Load order
16        2. Document Ready Function
17            a. ScrollIt Setup
18            b. Navbar Scrolling Background
19            c. Stats Counter Setup
20            d. Navbar Close On Click Mobile Responsive
21            e. Stellar Setup
22            f. Magnific Popup Setup
23            g. Blog OwlCarousel Setup
24            h. Testimonial OwlCarousel Setup
25            i. Contact Form Setup
26
27==================================*/
28
29function revealPageSections() {
30  var navBar = document.getElementById("navbar");
31  if (navBar) {
32    navBar.style.display = "";
33  }
34  var bannerSection = document.getElementById("home");
35  if (bannerSection) {
36    bannerSection.style.display = "block";
37  }
38  ["about", "featured-writing", "research", "portfolio", "blogs"].forEach(function (id) {
39    var section = document.getElementById(id);
40    if (section) {
41      section.style.display = "";
42    }
43  });
44  var footer = document.getElementById("footer");
45  if (footer) {
46    footer.style.display = "";
47  }
48}
49
50window.revealPageSections = revealPageSections;
51
52var windowLoadTasksDone = false;
53
54function onWindowLoadTasks() {
55  if (windowLoadTasksDone) {
56    return;
57  }
58  windowLoadTasksDone = true;
59  /*========Preloader Setup========*/
60  setTimeout(function () {
61    $(".preloader").addClass("loaded");
62  }, 0); // since we disabled preloader for now, we can set this to 0
63
64  revealPageSections();
65}
66
67/*========Window Load Function========*/
68$(window).on("load", onWindowLoadTasks);
69if (document.readyState === "complete") {
70  onWindowLoadTasks();
71}
72
73/*========Document Ready Function========*/
74$(function () {
75  "use strict";
76  var wind = $(window);
77
78  //Home Section Height
79  function homeHeight() {
80    var homeSection = $("#home");
81
82    homeSection.css({
83      height: $(window).height() + "px",
84    });
85  }
86  homeHeight();
87  wind.resize(homeHeight);
88
89  $(window).scroll(function () {
90    var navItem = $("nav .navbar-nav .nav-item").last().find(".nav-link");
91    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
92      if (!navItem.hasClass("active")) {
93        $("nav .navbar-nav .nav-item .nav-link").removeClass("active");
94        navItem.addClass("last-active");
95      }
96    }
97    if (navItem.hasClass("last-active")) {
98      if ($("nav .navbar-nav .nav-item .nav-link").hasClass("active")) {
99        navItem.removeClass("last-active");
100      }
101    }
102  });
103
104  /*========Navbar Scrolling Background========*/
105  wind.on("scroll", function () {
106    var bodyScroll = wind.scrollTop(),
107      navbar = $(".navbar");
108    if (bodyScroll > 300) {
109      navbar.addClass("fixed-top");
110    } else {
111      navbar.removeClass("fixed-top");
112    }
113  });
114
115  /*========Stats Counter Setup========*/
116  (function () {
117    if ($("section.stats").length > 0) {
118      var a = 0;
119      $(window).on("scroll", function () {
120        var oTop = $("section.stats").offset().top - window.innerHeight;
121        if (a == 0 && $(window).scrollTop() > oTop) {
122          $("section.stats .single-stat .counter").each(function () {
123            var $this = $(this),
124              countTo = $this.attr("data-count");
125            $({
126              countNum: $this.text(),
127            }).animate(
128              {
129                countNum: countTo,
130              },
131              {
132                duration: 2000,
133                easing: "swing",
134                step: function () {
135                  $this.text(Math.floor(this.countNum));
136                },
137                complete: function () {
138                  $this.text(this.countNum);
139                },
140              }
141            );
142          });
143          a = 1;
144        }
145      });
146    }
147  })();
148
149  /*========Navbar Close On Click Mobile Responsive========*/
150  $(".nav-item .nav-link").on("click", function () {
151    $(".navbar-collapse").removeClass("show");
152  });
153
154  /*========Stellar Setup========*/
155  wind.stellar({
156    horizontalScrolling: false,
157  });
158
159  /*========Magnific Popup Setup========*/
160  $(".portfolio .link").magnificPopup({
161    delegate: "a",
162    type: "image",
163    gallery: {
164      enabled: true,
165    },
166  });
167
168  /*========Testimonial Owl Carousel Setup========*/
169  $(".testimonials .owl-carousel").owlCarousel({
170    items: 1,
171    loop: true,
172    autoplay: true,
173    smartSpeed: 500,
174  });
175
176  /*========Blog OwlCarousel Setup========*/
177  $(".blogs .owl-carousel").owlCarousel({
178    loop: true,
179    margin: 30,
180    autoplay: true,
181    smartSpeed: 500,
182    responsiveClass: true,
183    dots: false,
184    responsive: {
185      0: {
186        items: 1,
187      },
188      700: {
189        items: 2,
190      },
191      1000: {
192        items: 3,
193      },
194    },
195  });
196
197  /*========Contact Form Setup========*/
198  $("#contact-form").on("submit", function (e) {
199    e.preventDefault();
200    var uri = $(this).attr("action");
201    $("#form-submit").val("Wait...");
202    var name = $("#contact-name").val(),
203      email = $("#contact-email").val(),
204      message = $("#contact-message").val();
205    var required = 0;
206    $(".con-validate", this).each(function () {
207      if ($(this).val() == "") {
208        $(this).addClass("con-error");
209        required += 1;
210      } else {
211        if ($(this).hasClass("con-error")) {
212          $(this).removeClass("con-error");
213          if (required > 0) {
214            required -= 1;
215          }
216        }
217      }
218    });
219    if (required === 0) {
220      $.ajax({
221        type: "POST",
222        url: "mail.php",
223        data: {
224          con_name: name,
225          con_email: email,
226          con_message: message,
227        },
228        success: function (data) {
229          $("#contact-form input, #contact-form textarea").val("");
230          $("#contact-submit.primary-button span").html("Done!");
231          $("#contact-submit.primary-button").addClass("ok");
232          showAlertBox("success", "Thank You! Your message has been sent.");
233        },
234        error: function (jqXHR, e) {
235          $("#contact-submit.primary-button span").html("Failed!");
236          showAlertBox(
237            "error",
238            "There was a problem with your submission, please try again."
239          );
240        },
241      });
242    } else {
243      console.log("Validation Error");
244    }
245  });
246  $(".con-validate").keyup(function () {
247    $(this).removeClass("con-error");
248  });
249
250  /********** Adding Alert Box **********/
251  $("#contact-submit").before('<div class="alert-container"></div>');
252
253  /********** Function Show Alert Box **********/
254  function showAlertBox(response, message) {
255    var $alertBox = $('<div class="alert"></div>'),
256      $alContainer = $("#contact-form .alert-container");
257    if (response == "success") {
258      $alertBox.addClass("alert-success").html(message);
259      $alContainer.html($alertBox);
260    } else {
261      $alertBox.addClass("alert-danger").html(message);
262      $alContainer.html($alertBox);
263    }
264    $alContainer.fadeIn(300).delay(2000).fadeOut(400);
265  }
266});