714 lines
26 KiB
JavaScript
714 lines
26 KiB
JavaScript
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
|
"use strict";
|
|
|
|
// document is loaded and DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
// Email replace
|
|
function setAttributes(elem, attrs) {
|
|
for(var key in attrs) {
|
|
elem.setAttribute(key, attrs[key]);
|
|
}
|
|
}
|
|
|
|
const tech_emails = document.querySelectorAll('.email-replace-tech');
|
|
tech_emails.forEach(entry => {
|
|
setAttributes(entry, {"href": "mailto:tech" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
entry.innerHTML = "tech" + "@" + "gilroyhacks.com";
|
|
});
|
|
|
|
var aadhavan = document.getElementById("email-replace-aadhavan");
|
|
setAttributes(aadhavan, {"href": "mailto:aadhavan.magesh" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
aadhavan.innerHTML = "aadhavan.magesh" + "@" + "gmail.com";
|
|
|
|
var isaac = document.getElementById("email-replace-isaac");
|
|
setAttributes(isaac, {"href": "mailto:ihwang" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
isaac.innerHTML = "ihwang" + "@" + "gilroyhacks.com";
|
|
|
|
var steven = document.getElementById("email-replace-steven");
|
|
setAttributes(steven, {"href": "mailto:stevendinh987" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
steven.innerHTML = "stevendinh987" + "@" + "gmail.com";
|
|
|
|
var vijay = document.getElementById("email-replace-vijay");
|
|
setAttributes(vijay, {"href": "mailto:vijay" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
vijay.innerHTML = "vijay" + "@" + "gilroyhacks.com";
|
|
|
|
var jonathan = document.getElementById("email-replace-jonathan");
|
|
setAttributes(jonathan, {"href": "mailto:jonathantessmann" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
jonathan.innerHTML = "jonathantessmann" + "@" + "gmail.com";
|
|
|
|
var james = document.getElementById("email-replace-james");
|
|
setAttributes(james, {"href": "mailto:james" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
james.innerHTML = "james" + "@" + "gilroyhacks.com";
|
|
|
|
var ezra = document.getElementById("email-replace-ezra");
|
|
setAttributes(ezra, {"href": "mailto:ezrabridger27" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
ezra.innerHTML = "ezrabridger27" + "@" + "gmail.com";
|
|
|
|
var mark = document.getElementById("email-replace-mark");
|
|
setAttributes(mark, {"href": "mailto:markshen00" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
mark.innerHTML = "markshen00" + "@" + "gmail.com";
|
|
|
|
var bryce = document.getElementById("email-replace-bryce");
|
|
setAttributes(bryce, {"href": "mailto:brycemankovsky" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"});
|
|
bryce.innerHTML = "brycemankovsky" + "@" + "gmail.com";
|
|
|
|
// Scroll Element
|
|
// Creating an observer when the user views that element
|
|
const observer = new IntersectionObserver(entries => {
|
|
// Loop over the entries
|
|
entries.forEach(entry => {
|
|
// If the element is visible
|
|
if (entry.isIntersecting) {
|
|
// Add the animation class
|
|
entry.target.classList.add('slide-animation');
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer_prize_2 = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('slide-animation-prize-2');
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer_prize_1 = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('slide-animation-prize-1');
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer_prize_3 = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('slide-animation-prize-3');
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer_team_img = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('slide-animation-card-img');
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer_team_desc = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('slide-animation-card-desc');
|
|
}
|
|
});
|
|
});
|
|
|
|
const workshop_entry = document.querySelectorAll('.workshop-entry');
|
|
workshop_entry.forEach(entry => {
|
|
observer.observe(entry);
|
|
});
|
|
|
|
const rules_obj = document.querySelectorAll('.rules-box');
|
|
rules_obj.forEach(entry => {
|
|
observer.observe(entry);
|
|
});
|
|
|
|
const entries = document.querySelectorAll('.team-picture');
|
|
entries.forEach(entry => {
|
|
observer_team_img.observe(entry);
|
|
});
|
|
|
|
const entries_desc = document.querySelectorAll('.team-description');
|
|
entries_desc.forEach(entry => {
|
|
observer_team_desc.observe(entry);
|
|
});
|
|
|
|
const prize_entries = document.querySelectorAll('.prize-column');
|
|
prize_entries.forEach(entry => {
|
|
observer.observe(entry);
|
|
});
|
|
|
|
const prize_entries_edge = document.querySelectorAll('.podium-edge');
|
|
prize_entries_edge.forEach(entry => {
|
|
observer.observe(entry);
|
|
});
|
|
|
|
// Adding the class animations to these elements
|
|
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#workshops-description', '#second-podium', '#first-podium', '#third-podium', '#chart', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
|
|
elements_id.forEach(entry => {
|
|
var thing = document.querySelector(entry)
|
|
observer.observe(document.querySelector(entry));
|
|
});
|
|
|
|
observer_prize_2.observe(document.querySelector('#second-place'));
|
|
observer_prize_1.observe(document.querySelector('#first-place'));
|
|
observer_prize_3.observe(document.querySelector('#third-place'));
|
|
|
|
// Scroll Nav
|
|
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
|
|
|
// Toggle the .pa-fixed-header class when the user
|
|
// scroll 100px
|
|
|
|
window.onscroll = () => {scrollNavbar()};
|
|
|
|
var scrollNavbar = () => {
|
|
// Target elements
|
|
const navBar = document.getElementById("navBar");
|
|
const links = document.querySelectorAll("#navBar a");
|
|
|
|
if (document.documentElement.scrollTop > 20) {
|
|
navBar.classList.add("pa-fixed-header");
|
|
|
|
// Change the color of links on scroll
|
|
for (let i = 0; i < links.length; i++) {
|
|
const element = links[i];
|
|
element.classList.add('text-black');
|
|
}
|
|
|
|
} else {
|
|
navBar.classList.remove("pa-fixed-header");
|
|
|
|
// Change the color of links back to default
|
|
for (let i = 0; i < links.length; i++) {
|
|
const element = links[i];
|
|
element.classList.remove('text-black');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Timer
|
|
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
|
// Set the date we're counting down to
|
|
var countDownDate = new Date("Apr 15, 2023 12:00:00").getTime();
|
|
|
|
// Update the count down every 1 second
|
|
var x = setInterval(function() {
|
|
|
|
// Get today's date and time
|
|
var now = new Date().getTime();
|
|
|
|
// Find the distance between now and the count down date
|
|
var distance = countDownDate - now;
|
|
|
|
// Time calculations for days, hours, minutes and seconds
|
|
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
// var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
// If the count down is finished, write some text
|
|
if (distance < 0) {
|
|
clearInterval(x);
|
|
document.getElementById("timer").innerHTML = "---";
|
|
}
|
|
// Display the result in the element with id="timer"
|
|
else if (days != 0) {
|
|
document.getElementById("timer").innerHTML = days + "d " + hours + "h";
|
|
}
|
|
else if (hours != 0) {
|
|
document.getElementById("timer").innerHTML = hours + "h " + minutes + "m";
|
|
}
|
|
else {
|
|
document.getElementById("timer").innerHTML = minutes + "m";
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// page is fully loaded, including all frames, objects and images
|
|
window.addEventListener("load", function() {
|
|
|
|
});
|
|
|
|
// General functions
|
|
// Checkbox Local Storage
|
|
var i;
|
|
var checkboxes = document.querySelectorAll('#signup-checklist input[type=checkbox]');
|
|
var verify = true;
|
|
function save() {
|
|
for (i = 0; i < checkboxes.length; i++) {
|
|
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
|
|
}
|
|
}
|
|
window.onload = function() {
|
|
load();
|
|
};
|
|
function load() {
|
|
for (i = 0; i < checkboxes.length; i++) {
|
|
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
|
|
}
|
|
}
|
|
function check(id) {
|
|
document.getElementById(id).checked = true;
|
|
}
|
|
function uncheck(id) {
|
|
document.getElementById(id).checked = false;
|
|
}
|
|
function notification(id) {
|
|
if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
|
|
if (verify) { document.getElementById('notification').style.visibility = visible; }
|
|
}
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'Idea',
|
|
data: [7, 9, 6, 10, 14],
|
|
}, {
|
|
name: 'Implementation',
|
|
data: [11, 6, 11, 3, 9]
|
|
}, {
|
|
name: 'Presentation',
|
|
data: [12, 7, 12, 11, 8]
|
|
}, {
|
|
name: 'Overall',
|
|
data: [10, 6, 9, 7, 11],
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
background: '#0d1117'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: ['#fff']
|
|
},
|
|
title: {
|
|
text: 'Team Scores - Summer 2022',
|
|
style: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Team 2', 'Team 3', 'Team 4', 'Team 6', 'Team 7'],
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + ""
|
|
},
|
|
style: {
|
|
colors: '#fff'
|
|
}
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: undefined
|
|
},
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + ""
|
|
}
|
|
},
|
|
theme: 'dark'
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 40,
|
|
labels: {
|
|
colors: '#fff',
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
chart.render();
|
|
|
|
jQuery(document).ready(function($){
|
|
var transitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
|
|
var transitionsSupported = ( $('.csstransitions').length > 0 );
|
|
//if browser does not support transitions - use a different event to trigger them
|
|
if( !transitionsSupported ) transitionEnd = 'noTransition';
|
|
|
|
//should add a loding while the events are organized
|
|
|
|
function SchedulePlan( element ) {
|
|
this.element = element;
|
|
this.timeline = this.element.find('.timeline');
|
|
this.timelineItems = this.timeline.find('li');
|
|
this.timelineItemsNumber = this.timelineItems.length;
|
|
this.timelineStart = getScheduleTimestamp(this.timelineItems.eq(0).text());
|
|
//need to store delta (in our case half hour) timestamp
|
|
this.timelineUnitDuration = getScheduleTimestamp(this.timelineItems.eq(1).text()) - getScheduleTimestamp(this.timelineItems.eq(0).text());
|
|
|
|
this.eventsWrapper = this.element.find('.events');
|
|
this.eventsGroup = this.eventsWrapper.find('.events-group');
|
|
this.singleEvents = this.eventsGroup.find('.single-event');
|
|
this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();
|
|
|
|
this.modal = this.element.find('.event-modal');
|
|
this.modalHeader = this.modal.find('.header');
|
|
this.modalHeaderBg = this.modal.find('.header-bg');
|
|
this.modalBody = this.modal.find('.body');
|
|
this.modalBodyBg = this.modal.find('.body-bg');
|
|
this.modalMaxWidth = 800;
|
|
this.modalMaxHeight = 480;
|
|
|
|
this.animating = false;
|
|
|
|
this.initSchedule();
|
|
}
|
|
|
|
SchedulePlan.prototype.initSchedule = function() {
|
|
this.scheduleReset();
|
|
this.initEvents();
|
|
};
|
|
|
|
SchedulePlan.prototype.scheduleReset = function() {
|
|
var mq = this.mq();
|
|
if( mq == 'desktop' && !this.element.hasClass('js-full') ) {
|
|
//in this case you are on a desktop version (first load or resize from mobile)
|
|
this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();
|
|
this.element.addClass('js-full');
|
|
this.placeEvents();
|
|
this.element.hasClass('modal-is-open') && this.checkEventModal();
|
|
} else if( mq == 'mobile' && this.element.hasClass('js-full') ) {
|
|
//in this case you are on a mobile version (first load or resize from desktop)
|
|
this.element.removeClass('js-full loading');
|
|
this.eventsGroup.children('ul').add(this.singleEvents).removeAttr('style');
|
|
this.eventsWrapper.children('.grid-line').remove();
|
|
this.element.hasClass('modal-is-open') && this.checkEventModal();
|
|
} else if( mq == 'desktop' && this.element.hasClass('modal-is-open')){
|
|
//on a mobile version with modal open - need to resize/move modal window
|
|
this.checkEventModal('desktop');
|
|
this.element.removeClass('loading');
|
|
} else {
|
|
this.element.removeClass('loading');
|
|
}
|
|
};
|
|
|
|
SchedulePlan.prototype.initEvents = function() {
|
|
var self = this;
|
|
|
|
this.singleEvents.each(function(){
|
|
//create the .event-date element for each event
|
|
var durationLabel = '<span class="event-date">'+$(this).data('start')+' - '+$(this).data('end')+'</span>';
|
|
$(this).children('a').prepend($(durationLabel));
|
|
|
|
//detect click on the event and open the modal
|
|
$(this).on('click', 'a', function(event){
|
|
event.preventDefault();
|
|
if( !self.animating ) self.openModal($(this));
|
|
});
|
|
});
|
|
|
|
//close modal window
|
|
this.modal.on('click', '.close', function(event){
|
|
event.preventDefault();
|
|
if( !self.animating ) self.closeModal(self.eventsGroup.find('.selected-event'));
|
|
});
|
|
this.element.on('click', '.cover-layer', function(event){
|
|
if( !self.animating && self.element.hasClass('modal-is-open') ) self.closeModal(self.eventsGroup.find('.selected-event'));
|
|
});
|
|
};
|
|
|
|
SchedulePlan.prototype.placeEvents = function() {
|
|
var self = this;
|
|
this.singleEvents.each(function(){
|
|
//place each event in the grid -> need to set top position and height
|
|
var start = getScheduleTimestamp($(this).attr('data-start')),
|
|
duration = getScheduleTimestamp($(this).attr('data-end')) - start;
|
|
|
|
var eventTop = self.eventSlotHeight*(start - self.timelineStart)/self.timelineUnitDuration,
|
|
eventHeight = self.eventSlotHeight*duration/self.timelineUnitDuration;
|
|
|
|
$(this).css({
|
|
top: (eventTop -1) +'px',
|
|
height: (eventHeight+1)+'px'
|
|
});
|
|
});
|
|
|
|
this.element.removeClass('loading');
|
|
};
|
|
|
|
SchedulePlan.prototype.openModal = function(event) {
|
|
var self = this;
|
|
var mq = self.mq();
|
|
this.animating = true;
|
|
|
|
//update event name and time
|
|
this.modalHeader.find('.event-name').text(event.find('.event-name').text());
|
|
this.modalHeader.find('.event-date').text(event.find('.event-date').text());
|
|
this.modal.attr('data-event', event.parent().attr('data-event'));
|
|
|
|
//update event content
|
|
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
|
|
//once the event content has been loaded
|
|
self.element.addClass('content-loaded');
|
|
});
|
|
|
|
this.element.addClass('modal-is-open');
|
|
|
|
setTimeout(function(){
|
|
//fixes a flash when an event is selected - desktop version only
|
|
event.parent('li').addClass('selected-event');
|
|
}, 10);
|
|
|
|
if( mq == 'mobile' ) {
|
|
self.modal.one(transitionEnd, function(){
|
|
self.modal.off(transitionEnd);
|
|
self.animating = false;
|
|
});
|
|
} else {
|
|
var eventTop = event.offset().top - $(window).scrollTop(),
|
|
eventLeft = event.offset().left,
|
|
eventHeight = event.innerHeight(),
|
|
eventWidth = event.innerWidth();
|
|
|
|
var windowWidth = $(window).width(),
|
|
windowHeight = $(window).height();
|
|
|
|
var modalWidth = ( windowWidth*.8 > self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8,
|
|
modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8;
|
|
|
|
var modalTranslateX = parseInt((windowWidth - modalWidth)/2 - eventLeft),
|
|
modalTranslateY = parseInt((windowHeight - modalHeight)/2 - eventTop);
|
|
|
|
var HeaderBgScaleY = modalHeight/eventHeight,
|
|
BodyBgScaleX = (modalWidth - eventWidth);
|
|
|
|
//change modal height/width and translate it
|
|
self.modal.css({
|
|
top: eventTop+'px',
|
|
left: eventLeft+'px',
|
|
height: modalHeight+'px',
|
|
width: modalWidth+'px',
|
|
});
|
|
transformElement(self.modal, 'translateY('+modalTranslateY+'px) translateX('+modalTranslateX+'px)');
|
|
|
|
//set modalHeader width
|
|
self.modalHeader.css({
|
|
width: eventWidth+'px',
|
|
});
|
|
//set modalBody left margin
|
|
self.modalBody.css({
|
|
marginLeft: eventWidth+'px',
|
|
});
|
|
|
|
//change modalBodyBg height/width ans scale it
|
|
self.modalBodyBg.css({
|
|
height: eventHeight+'px',
|
|
width: '1px',
|
|
});
|
|
transformElement(self.modalBodyBg, 'scaleY('+HeaderBgScaleY+') scaleX('+BodyBgScaleX+')');
|
|
|
|
//change modal modalHeaderBg height/width and scale it
|
|
self.modalHeaderBg.css({
|
|
height: eventHeight+'px',
|
|
width: eventWidth+'px',
|
|
});
|
|
transformElement(self.modalHeaderBg, 'scaleY('+HeaderBgScaleY+')');
|
|
|
|
self.modalHeaderBg.one(transitionEnd, function(){
|
|
//wait for the end of the modalHeaderBg transformation and show the modal content
|
|
self.modalHeaderBg.off(transitionEnd);
|
|
self.animating = false;
|
|
self.element.addClass('animation-completed');
|
|
});
|
|
}
|
|
|
|
//if browser do not support transitions -> no need to wait for the end of it
|
|
if( !transitionsSupported ) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
|
|
};
|
|
|
|
SchedulePlan.prototype.closeModal = function(event) {
|
|
var self = this;
|
|
var mq = self.mq();
|
|
|
|
this.animating = true;
|
|
|
|
if( mq == 'mobile' ) {
|
|
this.element.removeClass('modal-is-open');
|
|
this.modal.one(transitionEnd, function(){
|
|
self.modal.off(transitionEnd);
|
|
self.animating = false;
|
|
self.element.removeClass('content-loaded');
|
|
event.removeClass('selected-event');
|
|
});
|
|
} else {
|
|
var eventTop = event.offset().top - $(window).scrollTop(),
|
|
eventLeft = event.offset().left,
|
|
eventHeight = event.innerHeight(),
|
|
eventWidth = event.innerWidth();
|
|
|
|
var modalTop = Number(self.modal.css('top').replace('px', '')),
|
|
modalLeft = Number(self.modal.css('left').replace('px', ''));
|
|
|
|
var modalTranslateX = eventLeft - modalLeft,
|
|
modalTranslateY = eventTop - modalTop;
|
|
|
|
self.element.removeClass('animation-completed modal-is-open');
|
|
|
|
//change modal width/height and translate it
|
|
this.modal.css({
|
|
width: eventWidth+'px',
|
|
height: eventHeight+'px'
|
|
});
|
|
transformElement(self.modal, 'translateX('+modalTranslateX+'px) translateY('+modalTranslateY+'px)');
|
|
|
|
//scale down modalBodyBg element
|
|
transformElement(self.modalBodyBg, 'scaleX(0) scaleY(1)');
|
|
//scale down modalHeaderBg element
|
|
transformElement(self.modalHeaderBg, 'scaleY(1)');
|
|
|
|
this.modalHeaderBg.one(transitionEnd, function(){
|
|
//wait for the end of the modalHeaderBg transformation and reset modal style
|
|
self.modalHeaderBg.off(transitionEnd);
|
|
self.modal.addClass('no-transition');
|
|
setTimeout(function(){
|
|
self.modal.add(self.modalHeader).add(self.modalBody).add(self.modalHeaderBg).add(self.modalBodyBg).attr('style', '');
|
|
}, 10);
|
|
setTimeout(function(){
|
|
self.modal.removeClass('no-transition');
|
|
}, 20);
|
|
|
|
self.animating = false;
|
|
self.element.removeClass('content-loaded');
|
|
event.removeClass('selected-event');
|
|
});
|
|
}
|
|
|
|
//browser do not support transitions -> no need to wait for the end of it
|
|
if( !transitionsSupported ) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
|
|
}
|
|
|
|
SchedulePlan.prototype.mq = function(){
|
|
//get MQ value ('desktop' or 'mobile')
|
|
var self = this;
|
|
return window.getComputedStyle(this.element.get(0), '::before').getPropertyValue('content').replace(/["']/g, '');
|
|
};
|
|
|
|
SchedulePlan.prototype.checkEventModal = function(device) {
|
|
this.animating = true;
|
|
var self = this;
|
|
var mq = this.mq();
|
|
|
|
if( mq == 'mobile' ) {
|
|
//reset modal style on mobile
|
|
self.modal.add(self.modalHeader).add(self.modalHeaderBg).add(self.modalBody).add(self.modalBodyBg).attr('style', '');
|
|
self.modal.removeClass('no-transition');
|
|
self.animating = false;
|
|
} else if( mq == 'desktop' && self.element.hasClass('modal-is-open') ) {
|
|
self.modal.addClass('no-transition');
|
|
self.element.addClass('animation-completed');
|
|
var event = self.eventsGroup.find('.selected-event');
|
|
|
|
var eventTop = event.offset().top - $(window).scrollTop(),
|
|
eventLeft = event.offset().left,
|
|
eventHeight = event.innerHeight(),
|
|
eventWidth = event.innerWidth();
|
|
|
|
var windowWidth = $(window).width(),
|
|
windowHeight = $(window).height();
|
|
|
|
var modalWidth = ( windowWidth*.8 > self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8,
|
|
modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8;
|
|
|
|
var HeaderBgScaleY = modalHeight/eventHeight,
|
|
BodyBgScaleX = (modalWidth - eventWidth);
|
|
|
|
setTimeout(function(){
|
|
self.modal.css({
|
|
width: modalWidth+'px',
|
|
height: modalHeight+'px',
|
|
top: (windowHeight/2 - modalHeight/2)+'px',
|
|
left: (windowWidth/2 - modalWidth/2)+'px',
|
|
});
|
|
transformElement(self.modal, 'translateY(0) translateX(0)');
|
|
//change modal modalBodyBg height/width
|
|
self.modalBodyBg.css({
|
|
height: modalHeight+'px',
|
|
width: '1px',
|
|
});
|
|
transformElement(self.modalBodyBg, 'scaleX('+BodyBgScaleX+')');
|
|
//set modalHeader width
|
|
self.modalHeader.css({
|
|
width: eventWidth+'px',
|
|
});
|
|
//set modalBody left margin
|
|
self.modalBody.css({
|
|
marginLeft: eventWidth+'px',
|
|
});
|
|
//change modal modalHeaderBg height/width and scale it
|
|
self.modalHeaderBg.css({
|
|
height: eventHeight+'px',
|
|
width: eventWidth+'px',
|
|
});
|
|
transformElement(self.modalHeaderBg, 'scaleY('+HeaderBgScaleY+')');
|
|
}, 10);
|
|
|
|
setTimeout(function(){
|
|
self.modal.removeClass('no-transition');
|
|
self.animating = false;
|
|
}, 20);
|
|
}
|
|
};
|
|
|
|
var schedules = $('.cd-schedule');
|
|
var objSchedulesPlan = [],
|
|
windowResize = false;
|
|
|
|
if( schedules.length > 0 ) {
|
|
schedules.each(function(){
|
|
//create SchedulePlan objects
|
|
objSchedulesPlan.push(new SchedulePlan($(this)));
|
|
});
|
|
}
|
|
|
|
$(window).on('resize', function(){
|
|
if( !windowResize ) {
|
|
windowResize = true;
|
|
(!window.requestAnimationFrame) ? setTimeout(checkResize) : window.requestAnimationFrame(checkResize);
|
|
}
|
|
});
|
|
|
|
$(window).keyup(function(event) {
|
|
if (event.keyCode == 27) {
|
|
objSchedulesPlan.forEach(function(element){
|
|
element.closeModal(element.eventsGroup.find('.selected-event'));
|
|
});
|
|
}
|
|
});
|
|
|
|
function checkResize(){
|
|
objSchedulesPlan.forEach(function(element){
|
|
element.scheduleReset();
|
|
});
|
|
windowResize = false;
|
|
}
|
|
|
|
function getScheduleTimestamp(time) {
|
|
//accepts hh:mm format - convert hh:mm to timestamp
|
|
time = time.replace(/ /g,'');
|
|
var timeArray = time.split(':');
|
|
var timeStamp = parseInt(timeArray[0])*60 + parseInt(timeArray[1]);
|
|
return timeStamp;
|
|
}
|
|
|
|
function transformElement(element, value) {
|
|
element.css({
|
|
'-moz-transform': value,
|
|
'-webkit-transform': value,
|
|
'-ms-transform': value,
|
|
'-o-transform': value,
|
|
'transform': value
|
|
});
|
|
}
|
|
}); |