CasperSecurity
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('.doctor-card');
this.eventSlotHeight = this.eventsGroup.eq(0).children('.schedule-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('.schedule-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 = '<div class="doctor-time">'+$(this).data('start')+' - '+$(this).data('end')+'</div>';
$(this).children('a').append($(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.mq = function(){
//get MQ value ('desktop' or 'mobile')
var self = this;
return window.getComputedStyle(this.element.get(0), '::before').getPropertyValue('content').replace(/["']/g, '');
};
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
});
}
});