192 lines
11 KiB
JavaScript
192 lines
11 KiB
JavaScript
(function() {
|
|
var HorizontalTimeline = function(element) {
|
|
this.element = element;
|
|
this.datesContainer = this.element.getElementsByClassName('cd-h-timeline__dates')[0];
|
|
this.line = this.datesContainer.getElementsByClassName('cd-h-timeline__line')[0];
|
|
this.fillingLine = this.datesContainer.getElementsByClassName('cd-h-timeline__filling-line')[0];
|
|
this.date = this.line.getElementsByClassName('cd-h-timeline__date');
|
|
this.selectedDate = this.line.getElementsByClassName('cd-h-timeline__date--selected')[0];
|
|
this.dateValues = parseDate(this);
|
|
this.minLapse = calcMinLapse(this);
|
|
this.navigation = this.element.getElementsByClassName('cd-h-timeline__navigation');
|
|
this.contentWrapper = this.element.getElementsByClassName('cd-h-timeline__events')[0];
|
|
this.content = this.contentWrapper.getElementsByClassName('cd-h-timeline__event');
|
|
this.eventsMinDistance = 60;
|
|
this.eventsMaxDistance = 200;
|
|
this.translate = 0;
|
|
this.lineLength = 0;
|
|
this.oldDateIndex = Util.getIndexInArray(this.date, this.selectedDate);
|
|
this.newDateIndex = this.oldDateIndex;
|
|
initTimeline(this);
|
|
initEvents(this);
|
|
};
|
|
|
|
function initTimeline(timeline) {
|
|
var left = 0;
|
|
for (var i = 0; i < timeline.dateValues.length; i++) {
|
|
var j = (i == 0) ? 0 : i - 1;
|
|
var distance = daydiff(timeline.dateValues[j], timeline.dateValues[i]),
|
|
distanceNorm = (Math.round(distance / timeline.minLapse) + 2) * timeline.eventsMinDistance;
|
|
if (distanceNorm < timeline.eventsMinDistance) { distanceNorm = timeline.eventsMinDistance; } else if (distanceNorm > timeline.eventsMaxDistance) { distanceNorm = timeline.eventsMaxDistance; }
|
|
left = left + distanceNorm;
|
|
timeline.date[i].setAttribute('style', 'left:' + left + 'px');
|
|
}
|
|
timeline.line.style.width = (left + timeline.eventsMinDistance) + 'px';
|
|
timeline.lineLength = left + timeline.eventsMinDistance;
|
|
Util.addClass(timeline.element, 'cd-h-timeline--loaded');
|
|
selectNewDate(timeline, timeline.selectedDate);
|
|
resetTimelinePosition(timeline, 'next');
|
|
};
|
|
|
|
function initEvents(timeline) {
|
|
var self = timeline;
|
|
self.navigation[0].addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
translateTimeline(self, 'prev');
|
|
});
|
|
self.navigation[1].addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
translateTimeline(self, 'next');
|
|
});
|
|
new SwipeContent(self.datesContainer);
|
|
self.datesContainer.addEventListener('swipeLeft', function(event) { translateTimeline(self, 'next'); });
|
|
self.datesContainer.addEventListener('swipeRight', function(event) { translateTimeline(self, 'prev'); });
|
|
for (var i = 0; i < self.date.length; i++) {
|
|
(function(i) {
|
|
self.date[i].addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
selectNewDate(self, event.target);
|
|
});
|
|
self.content[i].addEventListener('animationend', function(event) { if (i == self.newDateIndex && self.newDateIndex != self.oldDateIndex) resetAnimation(self); });
|
|
})(i);
|
|
}
|
|
};
|
|
|
|
function updateFilling(timeline) {
|
|
var dateStyle = window.getComputedStyle(timeline.selectedDate, null),
|
|
left = dateStyle.getPropertyValue("left"),
|
|
width = dateStyle.getPropertyValue("width");
|
|
left = Number(left.replace('px', '')) + Number(width.replace('px', '')) / 2;
|
|
timeline.fillingLine.style.transform = 'scaleX(' + (left / timeline.lineLength) + ')';
|
|
};
|
|
|
|
function translateTimeline(timeline, direction) {
|
|
var containerWidth = timeline.datesContainer.offsetWidth;
|
|
if (direction) { timeline.translate = (direction == 'next') ? timeline.translate - containerWidth + timeline.eventsMinDistance : timeline.translate + containerWidth - timeline.eventsMinDistance; }
|
|
if (0 - timeline.translate > timeline.lineLength - containerWidth) timeline.translate = containerWidth - timeline.lineLength;
|
|
if (timeline.translate > 0) timeline.translate = 0;
|
|
timeline.line.style.transform = 'translateX(' + timeline.translate + 'px)';
|
|
(timeline.translate == 0) ? Util.addClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive'): Util.removeClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive');
|
|
(timeline.translate == containerWidth - timeline.lineLength) ? Util.addClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive'): Util.removeClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive');
|
|
};
|
|
|
|
function selectNewDate(timeline, target) {
|
|
timeline.newDateIndex = Util.getIndexInArray(timeline.date, target);
|
|
timeline.oldDateIndex = Util.getIndexInArray(timeline.date, timeline.selectedDate);
|
|
Util.removeClass(timeline.selectedDate, 'cd-h-timeline__date--selected');
|
|
Util.addClass(timeline.date[timeline.newDateIndex], 'cd-h-timeline__date--selected');
|
|
timeline.selectedDate = timeline.date[timeline.newDateIndex];
|
|
updateOlderEvents(timeline);
|
|
updateVisibleContent(timeline);
|
|
updateFilling(timeline);
|
|
};
|
|
|
|
function updateOlderEvents(timeline) {
|
|
for (var i = 0; i < timeline.date.length; i++) {
|
|
(i < timeline.newDateIndex) ? Util.addClass(timeline.date[i], 'cd-h-timeline__date--older-event'): Util.removeClass(timeline.date[i], 'cd-h-timeline__date--older-event');
|
|
}
|
|
};
|
|
|
|
function updateVisibleContent(timeline) {
|
|
if (timeline.newDateIndex > timeline.oldDateIndex) {
|
|
var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-right',
|
|
classLeaving = 'cd-h-timeline__event--leave-left';
|
|
} else if (timeline.newDateIndex < timeline.oldDateIndex) {
|
|
var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-left',
|
|
classLeaving = 'cd-h-timeline__event--leave-right';
|
|
} else {
|
|
var classEntering = 'cd-h-timeline__event--selected',
|
|
classLeaving = '';
|
|
}
|
|
Util.addClass(timeline.content[timeline.newDateIndex], classEntering);
|
|
if (timeline.newDateIndex != timeline.oldDateIndex) {
|
|
Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--selected');
|
|
Util.addClass(timeline.content[timeline.oldDateIndex], classLeaving);
|
|
timeline.contentWrapper.style.height = timeline.content[timeline.newDateIndex].offsetHeight + 'px';
|
|
}
|
|
};
|
|
|
|
function resetAnimation(timeline) {
|
|
timeline.contentWrapper.style.height = null;
|
|
Util.removeClass(timeline.content[timeline.newDateIndex], 'cd-h-timeline__event--enter-right cd-h-timeline__event--enter-left');
|
|
Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--leave-right cd-h-timeline__event--leave-left');
|
|
};
|
|
|
|
function keyNavigateTimeline(timeline, direction) {
|
|
var newIndex = (direction == 'next') ? timeline.newDateIndex + 1 : timeline.newDateIndex - 1;
|
|
if (newIndex < 0 || newIndex >= timeline.date.length) return;
|
|
selectNewDate(timeline, timeline.date[newIndex]);
|
|
resetTimelinePosition(timeline, direction);
|
|
};
|
|
|
|
function resetTimelinePosition(timeline, direction) {
|
|
var eventStyle = window.getComputedStyle(timeline.selectedDate, null),
|
|
eventLeft = Number(eventStyle.getPropertyValue('left').replace('px', '')),
|
|
timelineWidth = timeline.datesContainer.offsetWidth;
|
|
if ((direction == 'next' && eventLeft >= timelineWidth - timeline.translate) || (direction == 'prev' && eventLeft <= -timeline.translate)) {
|
|
timeline.translate = timelineWidth / 2 - eventLeft;
|
|
translateTimeline(timeline, false);
|
|
}
|
|
};
|
|
|
|
function parseDate(timeline) {
|
|
var dateArrays = [];
|
|
for (var i = 0; i < timeline.date.length; i++) {
|
|
var singleDate = timeline.date[i].getAttribute('data-date'),
|
|
dateComp = singleDate.split('T');
|
|
if (dateComp.length > 1) {
|
|
var dayComp = dateComp[0].split('/'),
|
|
timeComp = dateComp[1].split(':');
|
|
} else if (dateComp[0].indexOf(':') >= 0) {
|
|
var dayComp = ["2000", "0", "0"],
|
|
timeComp = dateComp[0].split(':');
|
|
} else {
|
|
var dayComp = dateComp[0].split('/'),
|
|
timeComp = ["0", "0"];
|
|
}
|
|
var newDate = new Date(dayComp[2], dayComp[1] - 1, dayComp[0], timeComp[0], timeComp[1]);
|
|
dateArrays.push(newDate);
|
|
}
|
|
return dateArrays;
|
|
};
|
|
|
|
function calcMinLapse(timeline) {
|
|
var dateDistances = [];
|
|
for (var i = 1; i < timeline.dateValues.length; i++) { var distance = daydiff(timeline.dateValues[i - 1], timeline.dateValues[i]); if (distance > 0) dateDistances.push(distance); }
|
|
return (dateDistances.length > 0) ? Math.min.apply(null, dateDistances) : 86400000;
|
|
};
|
|
|
|
function daydiff(first, second) { return Math.round((second - first)); };
|
|
window.HorizontalTimeline = HorizontalTimeline;
|
|
var horizontalTimeline = document.getElementsByClassName('js-cd-h-timeline'),
|
|
horizontalTimelineTimelineArray = [];
|
|
if (horizontalTimeline.length > 0) {
|
|
for (var i = 0; i < horizontalTimeline.length; i++) { horizontalTimelineTimelineArray.push(new HorizontalTimeline(horizontalTimeline[i])); }
|
|
document.addEventListener('keydown', function(event) { if ((event.keyCode && event.keyCode == 39) || (event.key && event.key.toLowerCase() == 'arrowright')) { updateHorizontalTimeline('next'); } else if ((event.keyCode && event.keyCode == 37) || (event.key && event.key.toLowerCase() == 'arrowleft')) { updateHorizontalTimeline('prev'); } });
|
|
};
|
|
|
|
function updateHorizontalTimeline(direction) { for (var i = 0; i < horizontalTimelineTimelineArray.length; i++) { if (elementInViewport(horizontalTimeline[i])) keyNavigateTimeline(horizontalTimelineTimelineArray[i], direction); } };
|
|
|
|
function elementInViewport(el) {
|
|
var top = el.offsetTop;
|
|
var left = el.offsetLeft;
|
|
var width = el.offsetWidth;
|
|
var height = el.offsetHeight;
|
|
while (el.offsetParent) {
|
|
el = el.offsetParent;
|
|
top += el.offsetTop;
|
|
left += el.offsetLeft;
|
|
}
|
|
return (top < (window.pageYOffset + window.innerHeight) && left < (window.pageXOffset + window.innerWidth) && (top + height) > window.pageYOffset && (left + width) > window.pageXOffset);
|
|
}
|
|
}()); |