Updated team imgs
This commit is contained in:
James Dinh
parent
fcb4b55cc4
commit
d6e3f1894f
1
assets/css/style.css
Normal file
1
assets/css/style.css
Normal file
File diff suppressed because one or more lines are too long
371
assets/js/main.js
Normal file
371
assets/js/main.js
Normal file
@ -0,0 +1,371 @@
|
||||
(function() {
|
||||
// Schedule Template - by CodyHouse.co
|
||||
function ScheduleTemplate( element ) {
|
||||
this.element = element;
|
||||
this.timelineItems = this.element.getElementsByClassName('cd-schedule__timeline')[0].getElementsByTagName('li');
|
||||
this.timelineStart = getScheduleTimestamp(this.timelineItems[0].textContent);
|
||||
this.timelineUnitDuration = getScheduleTimestamp(this.timelineItems[1].textContent) - getScheduleTimestamp(this.timelineItems[0].textContent);
|
||||
|
||||
this.topInfoElement = this.element.getElementsByClassName('cd-schedule__top-info')[0];
|
||||
this.singleEvents = this.element.getElementsByClassName('cd-schedule__event');
|
||||
|
||||
this.modal = this.element.getElementsByClassName('cd-schedule-modal')[0];
|
||||
this.modalHeader = this.element.getElementsByClassName('cd-schedule-modal__header')[0];
|
||||
this.modalHeaderBg = this.element.getElementsByClassName('cd-schedule-modal__header-bg')[0];
|
||||
this.modalBody = this.element.getElementsByClassName('cd-schedule-modal__body')[0];
|
||||
this.modalBodyBg = this.element.getElementsByClassName('cd-schedule-modal__body-bg')[0];
|
||||
this.modalClose = this.modal.getElementsByClassName('cd-schedule-modal__close')[0];
|
||||
this.modalDate = this.modal.getElementsByClassName('cd-schedule-modal__date')[0];
|
||||
this.modalEventName = this.modal.getElementsByClassName('cd-schedule-modal__name')[0];
|
||||
this.coverLayer = this.element.getElementsByClassName('cd-schedule__cover-layer')[0];
|
||||
|
||||
this.modalMaxWidth = 800;
|
||||
this.modalMaxHeight = 480;
|
||||
|
||||
this.animating = false;
|
||||
this.supportAnimation = Util.cssSupports('transition');
|
||||
|
||||
this.initSchedule();
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.initSchedule = function() {
|
||||
this.scheduleReset();
|
||||
this.initEvents();
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.scheduleReset = function() {
|
||||
// according to the mq value, init the style of the template
|
||||
var mq = this.mq(),
|
||||
loaded = Util.hasClass(this.element, 'js-schedule-loaded'),
|
||||
modalOpen = Util.hasClass(this.modal, 'cd-schedule-modal--open');
|
||||
if( mq == 'desktop' && !loaded ) {
|
||||
Util.addClass(this.element, 'js-schedule-loaded');
|
||||
this.placeEvents();
|
||||
modalOpen && this.checkEventModal(modalOpen);
|
||||
} else if( mq == 'mobile' && loaded) {
|
||||
//in this case you are on a mobile version (first load or resize from desktop)
|
||||
Util.removeClass(this.element, 'cd-schedule--loading js-schedule-loaded');
|
||||
this.resetEventsStyle();
|
||||
modalOpen && this.checkEventModal();
|
||||
} else if( mq == 'desktop' && modalOpen ) {
|
||||
//on a mobile version with modal open - need to resize/move modal window
|
||||
this.checkEventModal(modalOpen);
|
||||
Util.removeClass(this.element, 'cd-schedule--loading');
|
||||
} else {
|
||||
Util.removeClass(this.element, 'cd-schedule--loading');
|
||||
}
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.resetEventsStyle = function() {
|
||||
// remove js style applied to the single events
|
||||
for(var i = 0; i < this.singleEvents.length; i++) {
|
||||
this.singleEvents[i].removeAttribute('style');
|
||||
}
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.placeEvents = function() {
|
||||
// on big devices - place events in the template according to their time/day
|
||||
var self = this,
|
||||
slotHeight = this.topInfoElement.offsetHeight;
|
||||
for(var i = 0; i < this.singleEvents.length; i++) {
|
||||
var anchor = this.singleEvents[i].getElementsByTagName('a')[0];
|
||||
var start = getScheduleTimestamp(anchor.getAttribute('data-start')),
|
||||
duration = getScheduleTimestamp(anchor.getAttribute('data-end')) - start;
|
||||
|
||||
var eventTop = slotHeight*(start - self.timelineStart)/self.timelineUnitDuration,
|
||||
eventHeight = slotHeight*duration/self.timelineUnitDuration;
|
||||
|
||||
this.singleEvents[i].setAttribute('style', 'top: '+(eventTop-1)+'px; height: '+(eventHeight +1)+'px');
|
||||
}
|
||||
|
||||
Util.removeClass(this.element, 'cd-schedule--loading');
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.initEvents = function() {
|
||||
var self = this;
|
||||
for(var i = 0; i < this.singleEvents.length; i++) {
|
||||
// open modal when user selects an event
|
||||
this.singleEvents[i].addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
if(!self.animating) self.openModal(this.getElementsByTagName('a')[0]);
|
||||
});
|
||||
}
|
||||
//close modal window
|
||||
this.modalClose.addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
if( !self.animating ) self.closeModal();
|
||||
});
|
||||
this.coverLayer.addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
if( !self.animating ) self.closeModal();
|
||||
});
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.openModal = function(target) {
|
||||
var self = this;
|
||||
var mq = self.mq();
|
||||
this.animating = true;
|
||||
|
||||
//update event name and time
|
||||
this.modalEventName.textContent = target.getElementsByTagName('em')[0].textContent;
|
||||
this.modalDate.textContent = target.getAttribute('data-start')+' - '+target.getAttribute('data-end');
|
||||
this.modal.setAttribute('data-event', target.getAttribute('data-event'));
|
||||
|
||||
//update event content
|
||||
this.loadEventContent(target.getAttribute('data-content'));
|
||||
|
||||
Util.addClass(this.modal, 'cd-schedule-modal--open');
|
||||
|
||||
setTimeout(function(){
|
||||
//fixes a flash when an event is selected - desktop version only
|
||||
Util.addClass(target.closest('li'), 'cd-schedule__event--selected');
|
||||
}, 10);
|
||||
|
||||
if( mq == 'mobile' ) {
|
||||
self.modal.addEventListener('transitionend', function cb(){
|
||||
self.animating = false;
|
||||
self.modal.removeEventListener('transitionend', cb);
|
||||
});
|
||||
} else {
|
||||
var eventPosition = target.getBoundingClientRect(),
|
||||
eventTop = eventPosition.top,
|
||||
eventLeft = eventPosition.left,
|
||||
eventHeight = target.offsetHeight,
|
||||
eventWidth = target.offsetWidth;
|
||||
|
||||
var windowWidth = window.innerWidth,
|
||||
windowHeight = window.innerHeight;
|
||||
|
||||
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.setAttribute('style', 'top:'+eventTop+'px;left:'+eventLeft+'px;height:'+modalHeight+'px;width:'+modalWidth+'px;transform: translateY('+modalTranslateY+'px) translateX('+modalTranslateX+'px)');
|
||||
//set modalHeader width
|
||||
self.modalHeader.setAttribute('style', 'width:'+eventWidth+'px');
|
||||
//set modalBody left margin
|
||||
self.modalBody.setAttribute('style', 'margin-left:'+eventWidth+'px');
|
||||
//change modalBodyBg height/width ans scale it
|
||||
self.modalBodyBg.setAttribute('style', 'height:'+eventHeight+'px; width: 1px; transform: scaleY('+HeaderBgScaleY+') scaleX('+BodyBgScaleX+')');
|
||||
//change modal modalHeaderBg height/width and scale it
|
||||
self.modalHeaderBg.setAttribute('style', 'height: '+eventHeight+'px; width: '+eventWidth+'px; transform: scaleY('+HeaderBgScaleY+')');
|
||||
|
||||
self.modalHeaderBg.addEventListener('transitionend', function cb(){
|
||||
//wait for the end of the modalHeaderBg transformation and show the modal content
|
||||
self.animating = false;
|
||||
Util.addClass(self.modal, 'cd-schedule-modal--animation-completed');
|
||||
self.modalHeaderBg.removeEventListener('transitionend', cb);
|
||||
});
|
||||
}
|
||||
|
||||
//if browser do not support transitions -> no need to wait for the end of it
|
||||
this.animationFallback();
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.closeModal = function() {
|
||||
var self = this;
|
||||
var mq = self.mq();
|
||||
|
||||
var item = self.element.getElementsByClassName('cd-schedule__event--selected')[0],
|
||||
target = item.getElementsByTagName('a')[0];
|
||||
|
||||
this.animating = true;
|
||||
|
||||
if( mq == 'mobile' ) {
|
||||
Util.removeClass(this.modal, 'cd-schedule-modal--open');
|
||||
self.modal.addEventListener('transitionend', function cb(){
|
||||
Util.removeClass(self.modal, 'cd-schedule-modal--content-loaded');
|
||||
Util.removeClass(item, 'cd-schedule__event--selected');
|
||||
self.animating = false;
|
||||
self.modal.removeEventListener('transitionend', cb);
|
||||
});
|
||||
} else {
|
||||
var eventPosition = target.getBoundingClientRect(),
|
||||
eventTop = eventPosition.top,
|
||||
eventLeft = eventPosition.left,
|
||||
eventHeight = target.offsetHeight,
|
||||
eventWidth = target.offsetWidth;
|
||||
|
||||
var modalStyle = window.getComputedStyle(self.modal),
|
||||
modalTop = Number(modalStyle.getPropertyValue('top').replace('px', '')),
|
||||
modalLeft = Number(modalStyle.getPropertyValue('left').replace('px', ''));
|
||||
|
||||
var modalTranslateX = eventLeft - modalLeft,
|
||||
modalTranslateY = eventTop - modalTop;
|
||||
|
||||
Util.removeClass(this.modal, 'cd-schedule-modal--open cd-schedule-modal--animation-completed');
|
||||
|
||||
//change modal width/height and translate it
|
||||
self.modal.style.width = eventWidth+'px';self.modal.style.height = eventHeight+'px';self.modal.style.transform = 'translateX('+modalTranslateX+'px) translateY('+modalTranslateY+'px)';
|
||||
//scale down modalBodyBg element
|
||||
self.modalBodyBg.style.transform = 'scaleX(0) scaleY(1)';
|
||||
//scale down modalHeaderBg element
|
||||
// self.modalHeaderBg.setAttribute('style', 'transform: scaleY(1)');
|
||||
self.modalHeaderBg.style.transform = 'scaleY(1)';
|
||||
|
||||
self.modalHeaderBg.addEventListener('transitionend', function cb(){
|
||||
//wait for the end of the modalHeaderBg transformation and reset modal style
|
||||
Util.addClass(self.modal, 'cd-schedule-modal--no-transition');
|
||||
setTimeout(function(){
|
||||
self.modal.removeAttribute('style');
|
||||
self.modalBody.removeAttribute('style');
|
||||
self.modalHeader.removeAttribute('style');
|
||||
self.modalHeaderBg.removeAttribute('style');
|
||||
self.modalBodyBg.removeAttribute('style');
|
||||
}, 10);
|
||||
setTimeout(function(){
|
||||
Util.removeClass(self.modal, 'cd-schedule-modal--no-transition');
|
||||
}, 20);
|
||||
self.animating = false;
|
||||
Util.removeClass(self.modal, 'cd-schedule-modal--content-loaded');
|
||||
Util.removeClass(item, 'cd-schedule__event--selected');
|
||||
self.modalHeaderBg.removeEventListener('transitionend', cb);
|
||||
});
|
||||
}
|
||||
|
||||
//if browser do not support transitions -> no need to wait for the end of it
|
||||
this.animationFallback();
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.checkEventModal = function(modalOpen) {
|
||||
// this function is used on resize to reset events/modal style
|
||||
this.animating = true;
|
||||
var self = this;
|
||||
var mq = this.mq();
|
||||
if( mq == 'mobile' ) {
|
||||
//reset modal style on mobile
|
||||
self.modal.removeAttribute('style');
|
||||
self.modalBody.removeAttribute('style');
|
||||
self.modalHeader.removeAttribute('style');
|
||||
self.modalHeaderBg.removeAttribute('style');
|
||||
self.modalBodyBg.removeAttribute('style');
|
||||
Util.removeClass(self.modal, 'cd-schedule-modal--no-transition');
|
||||
self.animating = false;
|
||||
} else if( mq == 'desktop' && modalOpen) {
|
||||
Util.addClass(self.modal, 'cd-schedule-modal--no-transition cd-schedule-modal--animation-completed');
|
||||
var item = self.element.getElementsByClassName('cd-schedule__event--selected')[0],
|
||||
target = item.getElementsByTagName('a')[0];
|
||||
|
||||
var eventPosition = target.getBoundingClientRect(),
|
||||
eventTop = eventPosition.top,
|
||||
eventLeft = eventPosition.left,
|
||||
eventHeight = target.offsetHeight,
|
||||
eventWidth = target.offsetWidth;
|
||||
|
||||
var windowWidth = window.innerWidth,
|
||||
windowHeight = window.innerHeight;
|
||||
|
||||
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.setAttribute('style', 'top:'+(windowHeight/2 - modalHeight/2)+'px;left:'+(windowWidth/2 - modalWidth/2)+'px;height:'+modalHeight+'px;width:'+modalWidth+'px;transform: translateY(0) translateX(0)');
|
||||
//change modal modalBodyBg height/width
|
||||
self.modalBodyBg.style.height = modalHeight+'px';self.modalBodyBg.style.transform = 'scaleY(1) scaleX('+BodyBgScaleX+')';self.modalBodyBg.style.width = '1px';
|
||||
//set modalHeader width
|
||||
self.modalHeader.setAttribute('style', 'width:'+eventWidth+'px');
|
||||
//set modalBody left margin
|
||||
self.modalBody.setAttribute('style', 'margin-left:'+eventWidth+'px');
|
||||
//change modal modalHeaderBg height/width and scale it
|
||||
self.modalHeaderBg.setAttribute('style', 'height: '+eventHeight+'px;width:'+eventWidth+'px; transform:scaleY('+HeaderBgScaleY+');');
|
||||
}, 10);
|
||||
|
||||
setTimeout(function(){
|
||||
Util.removeClass(self.modal, 'cd-schedule-modal--no-transition');
|
||||
self.animating = false;
|
||||
}, 20);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.loadEventContent = function(content) {
|
||||
// load the content of an event when user selects it
|
||||
var self = this;
|
||||
|
||||
httpRequest = new XMLHttpRequest();
|
||||
httpRequest.onreadystatechange = function() {
|
||||
if (httpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
if (httpRequest.status === 200) {
|
||||
self.modal.getElementsByClassName('cd-schedule-modal__event-info')[0].innerHTML = self.getEventContent(httpRequest.responseText);
|
||||
Util.addClass(self.modal, 'cd-schedule-modal--content-loaded');
|
||||
}
|
||||
}
|
||||
};
|
||||
httpRequest.open('GET', content+'.html');
|
||||
httpRequest.send();
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.getEventContent = function(string) {
|
||||
// reset the loaded event content so that it can be inserted in the modal
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = string.trim();
|
||||
return div.getElementsByClassName('cd-schedule-modal__event-info')[0].innerHTML;
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.animationFallback = function() {
|
||||
if( !this.supportAnimation ) { // fallback for browsers not supporting transitions
|
||||
var event = new CustomEvent('transitionend');
|
||||
self.modal.dispatchEvent(event);
|
||||
self.modalHeaderBg.dispatchEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
ScheduleTemplate.prototype.mq = function(){
|
||||
//get MQ value ('desktop' or 'mobile')
|
||||
var self = this;
|
||||
return window.getComputedStyle(this.element, '::before').getPropertyValue('content').replace(/'|"/g, "");
|
||||
};
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
var scheduleTemplate = document.getElementsByClassName('js-cd-schedule'),
|
||||
scheduleTemplateArray = [],
|
||||
resizing = false;
|
||||
if( scheduleTemplate.length > 0 ) { // init ScheduleTemplate objects
|
||||
for( var i = 0; i < scheduleTemplate.length; i++) {
|
||||
(function(i){
|
||||
scheduleTemplateArray.push(new ScheduleTemplate(scheduleTemplate[i]));
|
||||
})(i);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
// on resize - update events position and modal position (if open)
|
||||
if( !resizing ) {
|
||||
resizing = true;
|
||||
(!window.requestAnimationFrame) ? setTimeout(checkResize, 250) : window.requestAnimationFrame(checkResize);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', function(event){
|
||||
// close event modal when pressing escape key
|
||||
if( event.keyCode && event.keyCode == 27 || event.key && event.key.toLowerCase() == 'escape' ) {
|
||||
for(var i = 0; i < scheduleTemplateArray.length; i++) {
|
||||
scheduleTemplateArray[i].closeModal();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function checkResize(){
|
||||
for(var i = 0; i < scheduleTemplateArray.length; i++) {
|
||||
scheduleTemplateArray[i].scheduleReset();
|
||||
}
|
||||
resizing = false;
|
||||
};
|
||||
}
|
||||
}());
|
||||
174
assets/js/util.js
Normal file
174
assets/js/util.js
Normal file
@ -0,0 +1,174 @@
|
||||
// Utility function
|
||||
function Util () {};
|
||||
|
||||
/*
|
||||
class manipulation functions
|
||||
*/
|
||||
Util.hasClass = function(el, className) {
|
||||
if (el.classList) return el.classList.contains(className);
|
||||
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
|
||||
};
|
||||
|
||||
Util.addClass = function(el, className) {
|
||||
var classList = className.split(' ');
|
||||
if (el.classList) el.classList.add(classList[0]);
|
||||
else if (!Util.hasClass(el, classList[0])) el.className += " " + classList[0];
|
||||
if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' '));
|
||||
};
|
||||
|
||||
Util.removeClass = function(el, className) {
|
||||
var classList = className.split(' ');
|
||||
if (el.classList) el.classList.remove(classList[0]);
|
||||
else if(Util.hasClass(el, classList[0])) {
|
||||
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
|
||||
el.className=el.className.replace(reg, ' ');
|
||||
}
|
||||
if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' '));
|
||||
};
|
||||
|
||||
Util.toggleClass = function(el, className, bool) {
|
||||
if(bool) Util.addClass(el, className);
|
||||
else Util.removeClass(el, className);
|
||||
};
|
||||
|
||||
Util.setAttributes = function(el, attrs) {
|
||||
for(var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
DOM manipulation
|
||||
*/
|
||||
Util.getChildrenByClassName = function(el, className) {
|
||||
var children = el.children,
|
||||
childrenByClass = [];
|
||||
for (var i = 0; i < el.children.length; i++) {
|
||||
if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]);
|
||||
}
|
||||
return childrenByClass;
|
||||
};
|
||||
|
||||
/*
|
||||
Animate height of an element
|
||||
*/
|
||||
Util.setHeight = function(start, to, element, duration, cb) {
|
||||
var change = to - start,
|
||||
currentTime = null;
|
||||
|
||||
var animateHeight = function(timestamp){
|
||||
if (!currentTime) currentTime = timestamp;
|
||||
var progress = timestamp - currentTime;
|
||||
var val = parseInt((progress/duration)*change + start);
|
||||
element.setAttribute("style", "height:"+val+"px;");
|
||||
if(progress < duration) {
|
||||
window.requestAnimationFrame(animateHeight);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
};
|
||||
|
||||
//set the height of the element before starting animation -> fix bug on Safari
|
||||
element.setAttribute("style", "height:"+start+"px;");
|
||||
window.requestAnimationFrame(animateHeight);
|
||||
};
|
||||
|
||||
/*
|
||||
Smooth Scroll
|
||||
*/
|
||||
|
||||
Util.scrollTo = function(final, duration, cb) {
|
||||
var start = window.scrollY || document.documentElement.scrollTop,
|
||||
currentTime = null;
|
||||
|
||||
var animateScroll = function(timestamp){
|
||||
if (!currentTime) currentTime = timestamp;
|
||||
var progress = timestamp - currentTime;
|
||||
if(progress > duration) progress = duration;
|
||||
var val = Math.easeInOutQuad(progress, start, final-start, duration);
|
||||
window.scrollTo(0, val);
|
||||
if(progress < duration) {
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
} else {
|
||||
cb && cb();
|
||||
}
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
};
|
||||
|
||||
/*
|
||||
Focus utility classes
|
||||
*/
|
||||
|
||||
//Move focus to an element
|
||||
Util.moveFocus = function (element) {
|
||||
if( !element ) element = document.getElementsByTagName("body")[0];
|
||||
element.focus();
|
||||
if (document.activeElement !== element) {
|
||||
element.setAttribute('tabindex','-1');
|
||||
element.focus();
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Misc
|
||||
*/
|
||||
|
||||
Util.getIndexInArray = function(array, el) {
|
||||
return Array.prototype.indexOf.call(array, el);
|
||||
};
|
||||
|
||||
Util.cssSupports = function(property, value) {
|
||||
if('CSS' in window) {
|
||||
return CSS.supports(property, value);
|
||||
} else {
|
||||
var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();});
|
||||
return jsProperty in document.body.style;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Polyfills
|
||||
*/
|
||||
//Closest() method
|
||||
if (!Element.prototype.matches) {
|
||||
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
if (!Element.prototype.closest) {
|
||||
Element.prototype.closest = function(s) {
|
||||
var el = this;
|
||||
if (!document.documentElement.contains(el)) return null;
|
||||
do {
|
||||
if (el.matches(s)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
//Custom Event() constructor
|
||||
if ( typeof window.CustomEvent !== "function" ) {
|
||||
|
||||
function CustomEvent ( event, params ) {
|
||||
params = params || { bubbles: false, cancelable: false, detail: undefined };
|
||||
var evt = document.createEvent( 'CustomEvent' );
|
||||
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
|
||||
return evt;
|
||||
}
|
||||
|
||||
CustomEvent.prototype = window.Event.prototype;
|
||||
|
||||
window.CustomEvent = CustomEvent;
|
||||
}
|
||||
|
||||
/*
|
||||
Animation curves
|
||||
*/
|
||||
Math.easeInOutQuad = function (t, b, c, d) {
|
||||
t /= d/2;
|
||||
if (t < 1) return c/2*t*t + b;
|
||||
t--;
|
||||
return -c/2 * (t*(t-2) - 1) + b;
|
||||
};
|
||||
BIN
css/.DS_Store
vendored
BIN
css/.DS_Store
vendored
Binary file not shown.
639
css/general.css
639
css/general.css
@ -474,14 +474,14 @@ nav ul li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 0%;
|
||||
|
||||
animation: waviy 1s;
|
||||
animation-delay: calc(var(--i));
|
||||
animation-fill-mode:both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.waviy span:hover {
|
||||
padding-left: -20px;
|
||||
|
||||
}
|
||||
|
||||
#top-logo-text {
|
||||
@ -1589,6 +1589,641 @@ section {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.scheduleContainer {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Schedule */
|
||||
.codyhouse {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
/* reset css */
|
||||
/* https://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* style css */
|
||||
/* --------------------------------
|
||||
|
||||
Primary style
|
||||
|
||||
-------------------------------- */
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.codyhouse {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
.single-event a {
|
||||
color: #A2B9B2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Main Components
|
||||
|
||||
-------------------------------- */
|
||||
.cd-schedule {
|
||||
position: relative;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.cd-schedule::before {
|
||||
/* never visible - this is used in js to check the current MQ */
|
||||
content: 'mobile';
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule {
|
||||
width: 90%;
|
||||
max-width: 1400px;
|
||||
margin: 2em auto;
|
||||
}
|
||||
.cd-schedule::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.cd-schedule::before {
|
||||
content: 'desktop';
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule .timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule .timeline {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.cd-schedule .timeline li {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
.cd-schedule .timeline li::after {
|
||||
/* this is used to create the table horizontal lines */
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #EAEAEA;
|
||||
}
|
||||
.cd-schedule .timeline li:last-of-type::after {
|
||||
display: none;
|
||||
}
|
||||
.cd-schedule .timeline li span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.cd-schedule .timeline li::after {
|
||||
width: calc(100% - 60px);
|
||||
left: 60px;
|
||||
}
|
||||
.cd-schedule .timeline li span {
|
||||
display: inline-block;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.cd-schedule .timeline li:nth-of-type(2n) span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule .events {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cd-schedule .events .events-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cd-schedule .events .top-info {
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
.cd-schedule .events .top-info > span {
|
||||
display: inline-block;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cd-schedule .events .events-group > ul {
|
||||
position: relative;
|
||||
padding: 0 5%;
|
||||
/* force its children to stay on one line */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.cd-schedule .events .events-group > ul::after {
|
||||
/* never visible - used to add a right padding to .events-group > ul */
|
||||
display: inline-block;
|
||||
content: '-';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.cd-schedule .events .single-event {
|
||||
/* force them to stay on one line */
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
float: left;
|
||||
height: 150px;
|
||||
width: 70%;
|
||||
max-width: 300px;
|
||||
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
||||
margin-right: 20px;
|
||||
-webkit-transition: opacity .2s, background .2s;
|
||||
transition: opacity .2s, background .2s;
|
||||
}
|
||||
|
||||
.cd-schedule .events .single-event:last-of-type {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.cd-schedule .events .single-event a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: .8em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 550px) {
|
||||
.cd-schedule .events .single-event {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule .events {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.cd-schedule .events .events-group {
|
||||
width: 14%;
|
||||
float: left;
|
||||
border: 1px solid #EAEAEA;
|
||||
/* reset style */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cd-schedule .events .events-group:not(:first-of-type) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
.cd-schedule .events .top-info {
|
||||
/* vertically center its content */
|
||||
display: table;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
/* reset style */
|
||||
padding: 0;
|
||||
}
|
||||
.cd-schedule .events .top-info > span {
|
||||
/* vertically center inside its parent */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 0 .5em;
|
||||
text-align: center;
|
||||
/* reset style */
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cd-schedule .events .events-group > ul {
|
||||
height: 950px;
|
||||
/* reset style */
|
||||
display: block;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
.cd-schedule .events .events-group > ul::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.cd-schedule .events .events-group > ul::after {
|
||||
/* reset style */
|
||||
display: none;
|
||||
}
|
||||
.cd-schedule .events .single-event {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
/* top position and height will be set using js */
|
||||
width: calc(100% + 2px);
|
||||
left: -1px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
||||
/* reset style */
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1;
|
||||
height: auto;
|
||||
max-width: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
.cd-schedule .events .single-event a {
|
||||
padding: 1.2em;
|
||||
}
|
||||
.cd-schedule .events .single-event:last-of-type {
|
||||
/* reset style */
|
||||
margin-right: 0;
|
||||
}
|
||||
.cd-schedule .events .single-event.selected-event {
|
||||
/* the .selected-event class is added when an user select the event */
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.cd-schedule .events {
|
||||
/* 60px is the .timeline element width */
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule.loading .events .single-event {
|
||||
/* the class .loading is added by default to the .cd-schedule element
|
||||
it is removed as soon as the single events are placed in the schedule plan (using javascript) */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cd-schedule .event-name,
|
||||
.cd-schedule .event-date {
|
||||
display: block;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cd-schedule .event-name {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule .event-name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule .event-date {
|
||||
/* they are not included in the the HTML but added using JavScript */
|
||||
font-size: 1.4rem;
|
||||
opacity: .7;
|
||||
line-height: 1.2;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-1"],
|
||||
.cd-schedule [data-event="event-1"] .header-bg {
|
||||
/* this is used to set a background color for the event and the modal window */
|
||||
background: #577F92;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-1"]:hover {
|
||||
background: #618da1;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-2"],
|
||||
.cd-schedule [data-event="event-2"] .header-bg {
|
||||
background: #443453;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-2"]:hover {
|
||||
background: #513e63;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-3"],
|
||||
.cd-schedule [data-event="event-3"] .header-bg {
|
||||
background: #A2B9B2;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-3"]:hover {
|
||||
background: #b1c4be;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-4"],
|
||||
.cd-schedule [data-event="event-4"] .header-bg {
|
||||
background: #f6b067;
|
||||
}
|
||||
|
||||
.cd-schedule .single-event[data-event="event-4"]:hover {
|
||||
background: #f7bd7f;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
/* Force Hardware acceleration */
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: visibility .4s, -webkit-transform .4s;
|
||||
transition: visibility .4s, -webkit-transform .4s;
|
||||
transition: transform .4s, visibility .4s;
|
||||
transition: transform .4s, visibility .4s, -webkit-transform .4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .header {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
/* vertically center its content */
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .header .content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
/* vertically center inside its parent */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: .6em 5%;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/* 70px is the .header height */
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .event-info {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
line-height: 1.4;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .event-info > div {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
padding: 1.4em 5%;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
|
||||
/* these are the morphing backgrounds - visible on desktop only */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .body-bg {
|
||||
z-index: 1;
|
||||
background: white;
|
||||
-webkit-transform-origin: top left;
|
||||
-ms-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .header-bg {
|
||||
z-index: 2;
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .close {
|
||||
/* this is the 'X' icon */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
/* replace text with icon */
|
||||
color: transparent;
|
||||
white-space: nowrap;
|
||||
text-indent: 100%;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
|
||||
/* these are the two lines of the 'X' icon */
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 22px;
|
||||
background: white;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .close::before {
|
||||
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .close::after {
|
||||
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
||||
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal .event-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal.no-transition {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule .event-modal {
|
||||
/* reset style */
|
||||
right: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
will-change: transform, width, height;
|
||||
-webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
|
||||
transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
|
||||
transition: height .4s, width .4s, transform .4s, visibility .4s;
|
||||
transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
}
|
||||
.cd-schedule .event-modal .header {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.cd-schedule .event-modal .header .content {
|
||||
/* reset style */
|
||||
display: block;
|
||||
padding: .8em;
|
||||
}
|
||||
.cd-schedule .event-modal .event-info > div {
|
||||
padding: 2em 3em 2em 2em;
|
||||
}
|
||||
.cd-schedule .event-modal .body {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
|
||||
/* Force Hardware acceleration */
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.cd-schedule .event-modal .header-bg {
|
||||
-webkit-transition: -webkit-transform .4s;
|
||||
transition: -webkit-transform .4s;
|
||||
transition: transform .4s;
|
||||
transition: transform .4s, -webkit-transform .4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
}
|
||||
.cd-schedule .event-modal .body-bg {
|
||||
opacity: 0;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.cd-schedule .event-modal .event-date {
|
||||
display: block;
|
||||
}
|
||||
.cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
|
||||
opacity: 0;
|
||||
}
|
||||
.cd-schedule .event-modal .close {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
}
|
||||
.cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
|
||||
background: #222222;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.cd-schedule .event-modal .header .content {
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule.modal-is-open .event-modal {
|
||||
/* .modal-is-open class is added as soon as an event is selected */
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.cd-schedule.modal-is-open .event-modal .event-info > div {
|
||||
/* smooth scroll on iOS touch devices */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.cd-schedule.animation-completed .event-modal .close,
|
||||
.cd-schedule.content-loaded.animation-completed .event-modal .event-info {
|
||||
/* the .animation-completed class is added when the modal animation is completed
|
||||
the .content-loaded class is added when the modal content has been loaded (using ajax) */
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .2s;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.cd-schedule.modal-is-open .body-bg {
|
||||
opacity: 1;
|
||||
-webkit-transition: -webkit-transform .4s;
|
||||
transition: -webkit-transform .4s;
|
||||
transition: transform .4s;
|
||||
transition: transform .4s, -webkit-transform .4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-schedule .cover-layer {
|
||||
/* layer between the content and the modal window */
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity .4s, visibility .4s;
|
||||
transition: opacity .4s, visibility .4s;
|
||||
}
|
||||
|
||||
.cd-schedule.modal-is-open .cover-layer {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#map-article {
|
||||
margin: 20px auto 0;
|
||||
width: 90%;
|
||||
|
||||
BIN
img/.DS_Store
vendored
BIN
img/.DS_Store
vendored
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 102 KiB |
107
index.html
107
index.html
@ -30,6 +30,8 @@
|
||||
<script defer src="js/map.js"></script>
|
||||
<script defer src="js/general.js"></script>
|
||||
<script src="js/apexcharts.js"></script>
|
||||
<script src="js/jquery-3.6.0.min.js"></script>
|
||||
<script>document.getElementsByTagName("html")[0].className += " js";</script>
|
||||
<script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/script.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
@ -121,7 +123,7 @@
|
||||
</div>
|
||||
<hr id="line-header">
|
||||
<!-- <a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220812T230000Z%2F20220814T233000Z&details=Participate%20in%20a%20weekend-long%20hackathon%20to%20strengthen%20your%20coding%20skills%20and%20earn%20some%20cool%20prizes%21&location=Gilroy%20Library&text=Gilroy%20Hacks%20Hackathon"><h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 12 - 14</h2></a> -->
|
||||
<h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Spring 2023</h2>
|
||||
<h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Apr 15 - 16</h2>
|
||||
<a class="tooltip header-link" id="spots-tooltip"><div id="spots-container">
|
||||
<div class="blob gold" aria-hidden="true"></div>
|
||||
<h2 id="header-subtitle-spots">Signups not yet open</h2>
|
||||
@ -158,7 +160,7 @@
|
||||
<h3 class="desc-title">Details</h3>
|
||||
<ul class="desc-list">
|
||||
<ul>
|
||||
<li><u>In-Person model</u> - All events will be available in person</li>
|
||||
<li><u>In-Person</u> - All events will be available in person</li>
|
||||
<li>Signups are limited to <u>TBA</u></li>
|
||||
<li>Workshops are <u>fully open to the public</u></li>
|
||||
</ul>
|
||||
@ -391,7 +393,104 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div id="map-article">
|
||||
<!-- <div class="schedule-container">
|
||||
<br/>
|
||||
<div class="cd-schedule loading">
|
||||
<div class="timeline">
|
||||
<ul>
|
||||
<li><span>09:00</span></li>
|
||||
<li><span>09:30</span></li>
|
||||
<li><span>10:00</span></li>
|
||||
<li><span>10:30</span></li>
|
||||
<li><span>11:00</span></li>
|
||||
<li><span>11:30</span></li>
|
||||
<li><span>12:00</span></li>
|
||||
<li><span>12:30</span></li>
|
||||
<li><span>1:00</span></li>
|
||||
<li><span>1:30</span></li>
|
||||
<li><span>2:00</span></li>
|
||||
<li><span>2:30</span></li>
|
||||
<li><span>3:00</span></li>
|
||||
<li><span>3:30</span></li>
|
||||
<li><span>4:00</span></li>
|
||||
<li><span>4:30</span></li>
|
||||
<li><span>5:00</span></li>
|
||||
<li><span>5:30</span></li>
|
||||
<li><span>6:00</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="events">
|
||||
<ul class="wrap">
|
||||
<li class="events-group">
|
||||
<div class="top-info"><span>Saturday</span></div>
|
||||
<ul>
|
||||
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 1</em>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="single-event" data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 2</em>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="single-event" data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 3</em>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="events-group">
|
||||
<div class="top-info"><span>Sunday</span></div>
|
||||
<ul>
|
||||
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 1</em>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="single-event" data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 2</em>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="single-event" data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3">
|
||||
<a href="#0">
|
||||
<em class="event-name">Event 3</em>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="event-modal">
|
||||
<header class="header">
|
||||
<div class="content">
|
||||
<span class="event-date"></span>
|
||||
<h3 class="event-name"></h3>
|
||||
</div>
|
||||
|
||||
<div class="header-bg"></div>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<div class="event-info"></div>
|
||||
<div class="body-bg"></div>
|
||||
</div>
|
||||
|
||||
<a href="#0" class="close">Close</a>
|
||||
</div>
|
||||
<div class="cover-layer"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div id="map-article">
|
||||
<div id="cal-parent">
|
||||
<article id="cal-container">
|
||||
<h2 class="map-title">Calendar</h2>
|
||||
@ -503,7 +602,7 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
<section id="workshops">
|
||||
<h2 class="topic">Workshops</h2>
|
||||
|
||||
BIN
js/.DS_Store
vendored
BIN
js/.DS_Store
vendored
Binary file not shown.
386
js/general.js
386
js/general.js
@ -136,7 +136,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
||||
});
|
||||
|
||||
// Adding the class animations to these elements
|
||||
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#workshops-description', '#second-podium', '#first-podium', '#third-podium', '#chart', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
|
||||
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));
|
||||
@ -329,4 +329,386 @@ var options = {
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user