first commit
This commit is contained in:
115
assets/js/calendar.js
Normal file
115
assets/js/calendar.js
Normal file
@@ -0,0 +1,115 @@
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth();
|
||||
|
||||
const day = document.querySelector(".calendar-dates");
|
||||
|
||||
const currdate = document
|
||||
.querySelector(".calendar-current-date");
|
||||
|
||||
const prenexIcons = document
|
||||
.querySelectorAll(".calendar-navigation span");
|
||||
|
||||
// Array of month names
|
||||
const months = [
|
||||
"Janvier",
|
||||
"Février",
|
||||
"Mars",
|
||||
"Avril",
|
||||
"Mai",
|
||||
"Juin",
|
||||
"Juillet",
|
||||
"Août",
|
||||
"Septembre",
|
||||
"Octobre",
|
||||
"Novembre",
|
||||
"Décembre"
|
||||
];
|
||||
|
||||
// Function to generate the calendar
|
||||
const manipulate = () => {
|
||||
|
||||
// Get the first day of the month
|
||||
let dayone = new Date(year, month, 1).getDay();
|
||||
|
||||
// Get the last date of the month
|
||||
let lastdate = new Date(year, month + 1, 0).getDate();
|
||||
|
||||
// Get the day of the last date of the month
|
||||
let dayend = new Date(year, month, lastdate).getDay();
|
||||
|
||||
// Get the last date of the previous month
|
||||
let monthlastdate = new Date(year, month, 0).getDate();
|
||||
|
||||
// Variable to store the generated calendar HTML
|
||||
let lit = "";
|
||||
|
||||
// Loop to add the last dates of the previous month
|
||||
for (let i = dayone; i > 0; i--) {
|
||||
lit +=
|
||||
`<li class="inactive">${monthlastdate - i + 1}</li>`;
|
||||
}
|
||||
|
||||
// Loop to add the dates of the current month
|
||||
for (let i = 1; i <= lastdate; i++) {
|
||||
|
||||
// Check if the current date is today
|
||||
let isToday = i === date.getDate()
|
||||
&& month === new Date().getMonth()
|
||||
&& year === new Date().getFullYear()
|
||||
? "active"
|
||||
: "";
|
||||
lit += `<li class="${isToday}">${i}</li>`;
|
||||
}
|
||||
|
||||
// Loop to add the first dates of the next month
|
||||
for (let i = dayend; i < 6; i++) {
|
||||
lit += `<li class="inactive">${i - dayend + 1}</li>`
|
||||
}
|
||||
|
||||
// Update the text of the current date element
|
||||
// with the formatted current month and year
|
||||
currdate.innerText = `${months[month]} ${year}`;
|
||||
|
||||
// update the HTML of the dates element
|
||||
// with the generated calendar
|
||||
day.innerHTML = lit;
|
||||
}
|
||||
|
||||
manipulate();
|
||||
|
||||
// Attach a click event listener to each icon
|
||||
prenexIcons.forEach(icon => {
|
||||
|
||||
// When an icon is clicked
|
||||
icon.addEventListener("click", () => {
|
||||
|
||||
// Check if the icon is "calendar-prev"
|
||||
// or "calendar-next"
|
||||
month = icon.id === "calendar-prev" ? month - 1 : month + 1;
|
||||
|
||||
// Check if the month is out of range
|
||||
if (month < 0 || month > 11) {
|
||||
|
||||
// Set the date to the first day of the
|
||||
// month with the new year
|
||||
date = new Date(year, month, new Date().getDate());
|
||||
|
||||
// Set the year to the new year
|
||||
year = date.getFullYear();
|
||||
|
||||
// Set the month to the new month
|
||||
month = date.getMonth();
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
// Set the date to the current date
|
||||
date = new Date();
|
||||
}
|
||||
|
||||
// Call the manipulate function to
|
||||
// update the calendar display
|
||||
manipulate();
|
||||
});
|
||||
});
|
||||
40
assets/js/formhandler.js
Normal file
40
assets/js/formhandler.js
Normal file
@@ -0,0 +1,40 @@
|
||||
window.addEventListener("DOMContentLoaded", function() {
|
||||
var form = document.getElementById("contact-form");
|
||||
var button = document.getElementById("contact-form-button");
|
||||
var status = document.getElementById("contact-form-status");
|
||||
|
||||
function success() {
|
||||
form.reset();
|
||||
button.style = "display: none ";
|
||||
status.innerHTML = "Thanks! Contact form is submitted successfully.";
|
||||
}
|
||||
|
||||
function error() {
|
||||
status.innerHTML = "Oops! There was a problem.";
|
||||
}
|
||||
|
||||
// handle the form submission event
|
||||
|
||||
form.addEventListener("submit", function(ev) {
|
||||
ev.preventDefault();
|
||||
var data = new FormData(form);
|
||||
ajax(form.method, form.action, data, success, error);
|
||||
});
|
||||
});
|
||||
|
||||
// helper function for sending an AJAX request
|
||||
|
||||
function ajax(method, url, data, success, error) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open(method, url);
|
||||
xhr.setRequestHeader("Accept", "application/json");
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState !== XMLHttpRequest.DONE) return;
|
||||
if (xhr.status === 200) {
|
||||
success(xhr.response, xhr.responseType);
|
||||
} else {
|
||||
error(xhr.status, xhr.response, xhr.responseType);
|
||||
}
|
||||
};
|
||||
xhr.send(data);
|
||||
}
|
||||
364
assets/js/script.js
Normal file
364
assets/js/script.js
Normal file
@@ -0,0 +1,364 @@
|
||||
$(document).ready(function () {
|
||||
"use strict";
|
||||
//Copyright Date
|
||||
// var newYear = document.getElementById("newYear");
|
||||
// newYear.innerHTML = new Date().getFullYear();
|
||||
|
||||
// Scroll to top
|
||||
$("a[href='#top']").click(function () {
|
||||
$("html, body").animate(
|
||||
{
|
||||
scrollTop: 0,
|
||||
},
|
||||
"slow"
|
||||
);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Smooth scroll
|
||||
$("a.scroll-to").on("click", function (event) {
|
||||
$("html, body")
|
||||
.stop()
|
||||
.animate(
|
||||
{
|
||||
scrollTop: $(this.hash).offset().top - 50,
|
||||
},
|
||||
1000
|
||||
);
|
||||
event.preventDefault();
|
||||
if (screen.width < 992) {
|
||||
$(".navbar-toggler").click();
|
||||
}
|
||||
});
|
||||
|
||||
// AOS initialize
|
||||
AOS.init({
|
||||
disable: "mobile",
|
||||
});
|
||||
|
||||
// Service Item Match Height
|
||||
$(".service-item").matchHeight({
|
||||
byRow: 0,
|
||||
});
|
||||
|
||||
// .blog-content Match Height
|
||||
$(".blog-content").matchHeight({
|
||||
byRow: 0,
|
||||
});
|
||||
$(".story-slider").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
$(".quotes-slider").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
$(".clients-slider").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
|
||||
disableOn: 700,
|
||||
type: "iframe",
|
||||
mainClass: "mfp-fade",
|
||||
removalDelay: 160,
|
||||
preloader: false,
|
||||
fixedContentPos: false,
|
||||
});
|
||||
// Magnific Gallery
|
||||
$(".gallery").magnificPopup({
|
||||
delegate: "a",
|
||||
type: "image",
|
||||
closeOnContentClick: false,
|
||||
closeBtnInside: false,
|
||||
mainClass: "mfp-with-zoom mfp-img-mobile",
|
||||
image: {
|
||||
verticalFit: true,
|
||||
titleSrc: function (item) {
|
||||
return (
|
||||
item.el.attr("title") +
|
||||
' · <a class="image-source-link" href="' +
|
||||
item.el.attr("data-source") +
|
||||
'" target="_blank">image source</a>'
|
||||
);
|
||||
},
|
||||
},
|
||||
gallery: {
|
||||
enabled: true,
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300, // don't foget to change the duration also in CSS
|
||||
opener: function (element) {
|
||||
return element.find("img");
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Add nav bg
|
||||
$(window).on("scroll", function () {
|
||||
if ($(window).scrollTop()) {
|
||||
$(".main-nav").addClass("nav-bg");
|
||||
} else {
|
||||
$(".main-nav").removeClass("nav-bg");
|
||||
}
|
||||
});
|
||||
// G-Map
|
||||
/**
|
||||
* Created by Kausar on 06/10/2016.
|
||||
*/
|
||||
window.marker = null;
|
||||
|
||||
function initialize() {
|
||||
var map;
|
||||
var lat = $("#map").data("lat");
|
||||
var long = $("#map").data("long");
|
||||
console.log(lat, long);
|
||||
var mapCenter = new google.maps.LatLng(lat, long);
|
||||
var style = [
|
||||
{
|
||||
"featureType": "all",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"color": "#202c3e"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "all",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [
|
||||
{
|
||||
"gamma": 0.01
|
||||
},
|
||||
{
|
||||
"lightness": 20
|
||||
},
|
||||
{
|
||||
"weight": "1.39"
|
||||
},
|
||||
{
|
||||
"color": "#ffffff"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "all",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [
|
||||
{
|
||||
"weight": "0.96"
|
||||
},
|
||||
{
|
||||
"saturation": "9"
|
||||
},
|
||||
{
|
||||
"visibility": "on"
|
||||
},
|
||||
{
|
||||
"color": "#000000"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "all",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"lightness": 30
|
||||
},
|
||||
{
|
||||
"saturation": "9"
|
||||
},
|
||||
{
|
||||
"color": "#29446b"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"saturation": 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi.park",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"lightness": 20
|
||||
},
|
||||
{
|
||||
"saturation": -20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"lightness": 10
|
||||
},
|
||||
{
|
||||
"saturation": -30
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [
|
||||
{
|
||||
"color": "#193a55"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [
|
||||
{
|
||||
"saturation": 25
|
||||
},
|
||||
{
|
||||
"lightness": 25
|
||||
},
|
||||
{
|
||||
"weight": "0.01"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"lightness": -20
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
var mapOptions = {
|
||||
// SET THE CENTER
|
||||
center: mapCenter,
|
||||
// SET THE MAP STYLE & ZOOM LEVEL
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
// REMOVE ALL THE CONTROLS EXCEPT ZOOM
|
||||
zoom: 12,
|
||||
panControl: false,
|
||||
scrollwheel: false,
|
||||
zoomControl: true,
|
||||
mapTypeControl: false,
|
||||
scaleControl: false,
|
||||
streetViewControl: false,
|
||||
overviewMapControl: false,
|
||||
zoomControlOptions: {
|
||||
style: google.maps.ZoomControlStyle.LARGE,
|
||||
},
|
||||
};
|
||||
|
||||
map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
||||
// SET THE MAP TYPE
|
||||
var mapType = new google.maps.StyledMapType(style, {
|
||||
name: "Grayscale",
|
||||
});
|
||||
map.mapTypes.set("grey", mapType);
|
||||
map.setMapTypeId("grey");
|
||||
//CREATE A CUSTOM PIN ICON
|
||||
var marker_image = $("#map").data("pin");
|
||||
var pinIcon = new google.maps.MarkerImage(
|
||||
marker_image,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
marker = new google.maps.Marker({
|
||||
position: mapCenter,
|
||||
map: map,
|
||||
icon: pinIcon,
|
||||
title: "CoHub",
|
||||
});
|
||||
}
|
||||
|
||||
if ($("#map").length > 0) {
|
||||
google.maps.event.addDomListener(window, "load", initialize);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user