app/assets/javascripts/chronoline/chronoline.js
// chronoline.js v0.1.1
// by Kevin Leung for Zanbato, https://zanbato.com
// MIT license at https://github.com/StoicLoofah/chronoline.js/blob/master/LICENSE.md
if (!Date.now) {
Date.now = function now() {
return +(new Date);
};
}
DAY_IN_MILLISECONDS = 86400000;
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( callback, element){
return window.setTimeout(function(){callback(+new Date());}, 1000 / 60);
};
function addElemClass(paperType, node, newClass){
if(paperType == 'SVG'){
node.setAttribute('class', newClass);
} else {
node.className += ' ' + newClass
}
}
// http://javascript.about.com/library/bldst.htm
Date.prototype.stdTimezoneOffset = function() {
var jan = new Date(this.getFullYear(), 0, 1);
var jul = new Date(this.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
Date.prototype.dstHourAdjustment = function() {
return (this.stdTimezoneOffset() - this.getTimezoneOffset()) / 60;
}
CL_HOUR = 12;
Date.prototype.stripTime = function(){
// this is a mutator, so be careful with it
// when you get dates from external sources, copy the date first and then apply this fn
this.setHours(CL_HOUR + this.dstHourAdjustment())
this.setMinutes(0);
this.setSeconds(0);
this.setMilliseconds(0);
}
Date.MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Date.DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
Date.prototype.formatDate = function(formatString){
/*
* done in the style of c's strftime
* http://www.cplusplus.com/reference/ctime/strftime/
* TODO slowly adding in new parts to this
* note that this also doesn't escape things properly. sorry
* if you need more power here - https://github.com/samsonjs/strftime
*/
var ret = formatString;
if(formatString.indexOf('%d') != -1){
var dateNum = this.getDate().toString();
if(dateNum.length < 2)
dateNum = '0' + dateNum;
ret = ret.replace('%d', dateNum);
}
if(formatString.indexOf('%b') != -1){
var month = Date.MONTH_NAMES[this.getMonth()].substring(0, 3);
ret = ret.replace('%b', month);
}
if(formatString.indexOf('%Y') != -1){
ret = ret.replace('%Y', this.getFullYear());
}
if(formatString.indexOf('%a') != -1){
var day = Date.DAY_NAMES[this.getDay()].substring(0, 3);
ret = ret.replace('%a', day);
}
return ret;
}
function strftime(formatString, date) {
// for convenience
return date.formatDate(formatString);
}
function getLeft(elem){
// parseInt automatically tosses the "px" off the end
return parseInt(elem.style.left);
}
function getEndDate(dateArray){
return dateArray[dateArray.length - 1];
}
function isFifthDay(date){
var day = date.getDate();
return (day == 1 || day % 5 == 0) && day != 30;
}
function isHalfMonth(date){
var day = date.getDate();
return day == 1 || day == 15;
}
function prevMonth(date){
// returns the beginning of the current month if in the middle of the month
var newDate = new Date(date.getTime() - DAY_IN_MILLISECONDS);
return new Date(newDate.getFullYear(), newDate.getMonth(), 1);
}
function nextMonth(date){
return new Date(date.getFullYear(), date.getMonth() + 1, 1);
}
function prevQuarter(date){
// returns the beginning of the quarter if in the middle of a quarter
var newDate = new Date(date.getTime() - DAY_IN_MILLISECONDS);
var month = newDate.getMonth();
return new Date(newDate.getFullYear(), month - month % 3, 1);
}
function nextQuarter(date){
var month = date.getMonth();
return new Date(date.getFullYear(), month - month % 3 + 3, 1);
}
function backWeek(date){
return new Date(date.getTime() - DAY_IN_MILLISECONDS * 7);
}
function forwardWeek(date){
return new Date(date.getTime() + DAY_IN_MILLISECONDS * 7);
}
function Chronoline(domElement, events, options) {
this.VERSION = "0.1.1";
var defaults = {
defaultStartDate: null, // the date furthest to the left on load. Defaults to today
startDate: null, // start of the timeline. Defaults to first event date
endDate: null, // end of the timeline. Defauls to the last event date
visibleSpan: 2592000000, // in milliseconds,
timelinePadding: 0, // in ms. Adds this much time to the front and back to get some space
fitVisibleSpan: false, // condense the entire span to be visible without scrolling
topMargin: 40, // overhead space on the canvas. useful for additional content
eventHeight: 5, // how tall event events are
eventMargin: 4, // how far apart the events are
dateLabelHeight: 50, // how tall the bottom margin for the dates is
hashLength: 4, // length of the hash marks for the days
minEventsHeight: 40,
maxEventsHeight: 1000,
hashColor: '#b8b8b8',
eventAttrs: { // attrs for the bars and circles of the events
fill: '#0055e1',
stroke: '#0055e1',
"stroke-width": 2
},
// predefined fns include: null (for daily), isFifthDay, isHalfMonth
hashInterval: null, // fn: date -> boolean, if a hash should appear
labelInterval: null, // fn: date -> boolean, if a hash should appear
labelFormat: '%d', // based on strftime
subLabel: 'month', // TODO generalize this code
subLabelMargin: 2,
subLabelAttrs: {'font-weight': 'bold'},
floatingSubLabels: true, // whether sublabels should float into view
subSubLabel: 'year', // TODO generalize this code
subSubLabelMargin: 2,
subSubLabelAttrs: {'font-weight': 'bold'},
floatingSubSubLabels: true, // whether subSublabels should float into view
fontAttrs: {
'font-size': 10,
fill: '#000000'
},
scrollable: true,
// predefined fns include: prevMonth, nextMonth, prevQuarter, nextQuarter, backWeek, forwardWeek
scrollLeft: backWeek,
scrollRight: forwardWeek,
animated: false, // whether scrolling is animated or just jumps, requires jQuery
tooltips: false, // activates qtip tooltips. Otherwise, you just get title tooltips
markToday: 'line', // 'line', 'labelBox', false
todayAttrs: {'stroke': '#484848'},
sections: null,
floatingSectionLabels: true,
sectionLabelAttrs: {},
sectionLabelsOnHover: true,
draggable: false, // requires jQuery, allows mouse dragging
continuousScroll: true, // requires that scrollable be true, click-and-hold arrows
continuousScrollSpeed: 1, // I believe this is px/s of scroll. There is no easing in it
}
var t = this;
// FILL DEFAULTS
for(var attrname in defaults){ t[attrname] = defaults[attrname];}
for(var attrname in options){ t[attrname] = options[attrname];}
// options shouldn't be on if there aren't any sections
t.floatingSectionLabels &= t.sections != null;
t.sectionLabelsOnHover &= t.sections != null;
// HTML elements to put everything in
t.domElement = domElement;
t.wrapper = document.createElement('div');
t.wrapper.className = 'chronoline-wrapper';
t.domElement.appendChild(t.wrapper);
// SORT EVENTS
t.sortEvents = function(a, b){
a = a.dates;
b = b.dates;
var aEnd = a[a.length - 1].getTime();
var bEnd = b[b.length - 1].getTime();
if(aEnd != bEnd){
return aEnd - bEnd;
}
return a[0].getTime() - b[0].getTime();
};
// need to toss the time variance bits
for(var i = 0; i < events.length; i++){
for(var j = 0; j < events[i].dates.length; j++){
events[i].dates[j] = new Date(events[i].dates[j].getTime());
events[i].dates[j].stripTime();
}
}
t.events = events;
t.events.sort(t.sortEvents);
// same thing for sections
if(t.sections != null){
for(var i = 0; i < t.sections.length; i++){
for(var j = 0; j < t.sections[i].dates.length; j++){
t.sections[i].dates[j] = new Date(t.sections[i].dates[j].getTime());
t.sections[i].dates[j].stripTime();
}
}
t.sections.sort(t.sortEvents);
}
// CALCULATING MORE THINGS
// generating relevant dates
t.today = new Date(Date.now());
t.today.stripTime();
if(t.defaultStartDate == null){
t.defaultStartDate = t.today;
}
if(t.startDate == null){
if(t.events.length > 0){
t.startDate = t.events[0].dates[0];
for(var i = 1; i < t.events.length; i++)
if(t.events[i].dates[0] < t.startDate)
t.startDate = t.events[i].dates[0];
} else if(t.sections.length > 0) {
t.startDate = t.sections[0].dates[0];
for(var i = 0; i < t.sections.length; i++){
if(t.sections[i].dates[0] < t.startDate)
t.startDate = t.sections[i].dates[0];
}
} else {
return;
}
}
t.startDate.stripTime();
if(t.startDate > t.defaultStartDate)
t.startDate = t.defaultStartDate;
t.startDate = new Date(t.startDate.getTime() - t.timelinePadding);
t.startTime = t.startDate.getTime();
if(t.endDate == null){
if(t.events.length > 0){
t.endDate = getEndDate(t.events[0].dates);
for(var i = 1; i < t.events.length; i++)
if(getEndDate(t.events[i].dates) > t.endDate)
t.endDate = getEndDate(t.events[i].dates);
} else if(t.sections.length > 0) {
t.endDate = t.sections[0].dates[1];
for(var i = 0; i < t.sections.length; i++){
if(t.sections[i].dates[1] > t.endDate)
t.endDate = t.sections[i].dates[1];
}
} else {
return;
}
}
if(t.endDate < t.defaultStartDate)
t.endDate = t.defaultStartDate;
t.endDate = new Date(Math.max(t.endDate.getTime(), t.startDate.getTime() + t.visibleSpan) + t.timelinePadding);
t.endDate.stripTime();
// this ratio converts a time into a px position
t.visibleWidth = t.domElement.clientWidth;
if(t.fitVisibleSpan) {
t.startDate = new Date(t.startDate.getTime() - DAY_IN_MILLISECONDS);
t.endDate = new Date(t.endDate.getTime() + DAY_IN_MILLISECONDS);
t.pxRatio = t.visibleWidth / (t.endDate - t.startDate);
} else {
t.pxRatio = t.visibleWidth / t.visibleSpan;
}
t.totalWidth = t.pxRatio * (t.endDate.getTime() - t.startDate.getTime());
t.maxLeftPx = t.totalWidth - t.visibleWidth;
// 2 handy utility functions
t.pxToMs = function(px){
return t.startTime + px / t.pxRatio;
}
t.msToPx = function(ms){
return (ms - t.startTime) * t.pxRatio;
}
// SPLIT THE DATES INTO THE ROW THAT THEY BELONG TO
// TODO
// this is a greedy algo that definitely isn't optimal
// it at least needs to find the latest row that still fits
// this, however, may cause very strange behavior (everything being on the 2nd line),
// so I'm going to prefer this in the short term
// calculated here so it can be used in splitting dates
t.circleRadius = t.eventHeight / 2;
t.eventRows = [[]];
t.rowLastPxs = [0];
for(var i = 0; i < t.events.length; i++){
var found = false;
var startPx = t.msToPx(t.events[i].dates[0].getTime()) - t.circleRadius;
for(var j = 0; j < t.eventRows.length; j++){
if(t.rowLastPxs[j] < startPx){
t.eventRows[j].push(t.events[i]);
t.rowLastPxs[j] = t.msToPx(getEndDate(t.events[i].dates).getTime()) + t.circleRadius;
found = true;
break;
}
}
if(!found){
t.eventRows.push([t.events[i]]);
t.rowLastPxs.push(t.msToPx(getEndDate(t.events[i].dates).getTime()) + t.circleRadius);
}
}
// a few more calculations and creation
t.eventsHeight = Math.max(Math.min(t.eventRows.length * (t.eventMargin + t.eventHeight), t.maxEventsHeight), t.minEventsHeight);
t.totalHeight = t.dateLabelHeight + t.eventsHeight + t.topMargin;
// creating canvas pieces
t.myCanvas = document.createElement('div');
t.myCanvas.className = 'chronoline-canvas';
t.wrapper.appendChild(t.myCanvas);
t.paper = Raphael(t.myCanvas, t.totalWidth, t.totalHeight);
t.paperType = t.paper.raphael.type;
t.paperElem = t.myCanvas.childNodes[0];
// DRAWING
t.floatingSet = t.paper.set();
t.sectionLabelSet = t.paper.set();
// drawing sections
if(t.sections != null){
for(var i = 0; i < t.sections.length; i++){
var section = t.sections[i];
var startX = (section.dates[0].getTime() - t.startTime) * t.pxRatio;
var width = (section.dates[1] - section.dates[0]) * t.pxRatio;
var elem = t.paper.rect(startX, 0, width, t.totalHeight);
elem.attr('stroke-width', 0);
elem.attr('stroke', '#ffffff');
if(typeof section.attrs != "undefined"){
elem.attr(section.attrs);
}
var sectionLabel = t.paper.text(startX + 10, 10, section.title);
sectionLabel.attr('text-anchor', 'start');
sectionLabel.attr(t.sectionLabelAttrs);
if(t.floatingSectionLabels){
// bounds determine how far things can float
sectionLabel.data('left-bound', startX + 10);
sectionLabel.data('right-bound', startX + width - sectionLabel.attr('width'));
t.floatingSet.push(sectionLabel);
t.sectionLabelSet.push(sectionLabel);
}
elem.data('label', sectionLabel);
if(t.sectionLabelsOnHover){
elem.hover(function(){this.data('label').animate({opacity: 1}, 200);},
function(){this.data('label').animate({opacity: 0}, 200);});
sectionLabel.hover(function(){this.animate({opacity: 1}, 200);},
function(){this.animate({opacity: 0}, 200);});
sectionLabel.attr('opacity', 0);
}
}
}
// put all of these in front of the sections
t.sectionLabelSet.forEach(function(label){
label.toFront();
});
// drawing events
for(var row = 0; row < t.eventRows.length; row++){
var upperY = t.totalHeight - t.dateLabelHeight - (row + 1) * (t.eventMargin + t.eventHeight);
for(var col = 0; col < t.eventRows[row].length; col++){
var myEvent = t.eventRows[row][col];
var startX = (myEvent.dates[0].getTime() - t.startTime) * t.pxRatio;
var elem = null;
if(myEvent.dates.length == 1){ // it's a single point
elem = t.paper.circle(startX, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
} else { // it's a range
var width = (getEndDate(myEvent.dates) - myEvent.dates[0]) * t.pxRatio;
// left rounded corner
var leftCircle = t.paper.circle(startX, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
if(typeof myEvent.attrs != "undefined"){
leftCircle.attr(myEvent.attrs);
}
addElemClass(t.paperType, leftCircle.node, 'chronoline-event');
// right rounded corner
var rightCircle = t.paper.circle(startX + width, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
if(typeof myEvent.attrs != "undefined"){
rightCircle.attr(myEvent.attrs);
}
addElemClass(t.paperType, rightCircle.node, 'chronoline-event');
elem = t.paper.rect(startX, upperY, width, t.eventHeight).attr(t.eventAttrs);
}
if(typeof myEvent.link != 'undefined') {
elem.data('link', myEvent.link);
elem.click(function(){
window.location.href = this.data('link');
});
}
if(typeof myEvent.attrs != "undefined"){
elem.attr(myEvent.attrs);
}
addElemClass(t.paperType, elem.node, 'chronoline-event');
elem.attr('title', myEvent.title);
if(t.tooltips){
var description = myEvent.description;
var title = myEvent.title;
if(typeof description == "undefined" || description == ''){
description = title;
title = '';
}
var $node = jQuery(elem.node);
if(Raphael.type == 'SVG')
$node = $node.parent();
$node.qtip({
content: {
title: title,
text: description
},
position: {
my: 'top left',
target: 'mouse',
viewport: jQuery(window), // Keep it on-screen at all times if possible
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
},
style: {
classes: 'qtip-shadow qtip-dark qtip-rounded'
}
});
}
if(t.sections != null && t.sectionLabelsOnHover){
// some magic here to tie the event back to the section label element
var originalIndex = myEvent.section;
if(typeof originalIndex != "undefined"){
var newIndex = 0;
for(var i = 0; i < t.sections.length; i++){
if(t.sections[i].section == originalIndex){
elem.data('sectionLabel', t.sectionLabelSet[i]);
break;
}
}
elem.hover(function(){this.data('sectionLabel').animate({opacity: 1}, 200);},
function(){this.data('sectionLabel').animate({opacity: 0}, 200);});
}
}
}
}
// calculated ahead of time
var dateLineY = t.totalHeight - t.dateLabelHeight;
var baseline = t.paper.path('M0,' + dateLineY + 'L' + t.totalWidth + ',' + dateLineY);
baseline.attr('stroke', t.hashColor);
t.bottomHashY = dateLineY + t.hashLength;
t.labelY = t.bottomHashY + t.fontAttrs['font-size'];
t.subLabelY = t.bottomHashY + t.fontAttrs['font-size'] * 2 + t.subLabelMargin;
t.subSubLabelY = t.subLabelY + t.fontAttrs['font-size'] + t.subSubLabelMargin;
// DATE LABELS
// only a helper b/c it works within a specific range
// subSublabels. These can float
if(t.subSubLabel == 'year'){
var endYear = t.endDate.getFullYear();
for(var year = t.startDate.getFullYear(); year <= endYear; year++){
var curDate = new Date(year, 0, 1);
curDate.stripTime();
var x = t.msToPx(curDate.getTime());
var subSubLabel = t.paper.text(x, t.subSubLabelY, curDate.formatDate('%Y').toUpperCase());
subSubLabel.attr(t.fontAttrs);
subSubLabel.attr(t.subSubLabelAttrs);
if(t.floatingSubSubLabels){
// bounds determine how far things can float
subSubLabel.data('left-bound', x);
var endOfYear = new Date(year, 11, 31);
endOfYear.stripTime();
subSubLabel.data('right-bound',
Math.min((endOfYear.getTime() - t.startTime) * t.pxRatio - 5,
t.totalWidth));
t.floatingSet.push(subSubLabel);
}
}
}
t.drawLabelsHelper = function(startMs, endMs){
for(var curMs = startMs; curMs < endMs; curMs += DAY_IN_MILLISECONDS){
var curDate = new Date(curMs);
var day = curDate.getDate();
var x = t.msToPx(curMs);
// the little hashes
if(t.hashInterval == null || t.hashInterval(curDate)){
var hash = t.paper.path('M' + x + ',' + dateLineY + 'L' + x + ',' + t.bottomHashY);
hash.attr('stroke', t.hashColor);
}
// the labels directly below the hashes
if(t.labelInterval == null || t.labelInterval(curDate)){
var label = t.paper.text(x, t.labelY, curDate.formatDate(t.labelFormat));
label.attr(t.fontAttrs);
}
// special markers for today
if(t.markToday && curMs == t.today.getTime()){
if(t.markToday == 'labelBox'){
label.attr({'text': label.attr('text') + '\n' + curDate.formatDate('%b').toUpperCase(),
'font-size': t.fontAttrs['font-size'] + 2,
'y': t.bottomHashY + t.fontAttrs['font-size'] + 5});
var bbox = label.getBBox();
var labelBox = t.paper.rect(bbox.x - 2, bbox.y - 2, bbox.width + 4, bbox.height + 4);
labelBox.attr('fill', '90-#f4f4f4-#e8e8e8');
labelBox.insertBefore(label);
}else if(t.markToday == 'line'){
var line = t.paper.path('M' + x + ',0L' + x + ',' + dateLineY);
line.attr(t.todayAttrs);
}
}
// sublabels. These can float
if(day == 1 && t.subLabel == 'month'){
var subLabel = t.paper.text(x, t.subLabelY, curDate.formatDate('%b').toUpperCase());
subLabel.attr(t.fontAttrs);
subLabel.attr(t.subLabelAttrs);
if(t.floatingSubLabels){
// bounds determine how far things can float
subLabel.data('left-bound', x);
var endOfMonth = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0, CL_HOUR);
subLabel.data('right-bound',
Math.min((endOfMonth.getTime() - t.startTime) * t.pxRatio - 5,
t.totalWidth));
t.floatingSet.push(subLabel);
}
}
}
}
t.drawnStartMs = null;
t.drawnEndMs = null;
// this actually draws labels. It calculates the set of labels to draw in-between
// what it currently has and needs to add
t.drawLabels = function(leftPxPos){
var newStartPx = Math.max(0, leftPxPos - t.visibleWidth);
var newEndPx = Math.min(t.totalWidth, leftPxPos + 2 * t.visibleWidth);
var newStartDate = new Date(t.pxToMs(newStartPx));
newStartDate = new Date(newStartDate.getFullYear(), newStartDate.getMonth(), 1, CL_HOUR);
var newStartMs = newStartDate.getTime();
var newEndDate = new Date(t.pxToMs(Math.min(t.totalWidth, leftPxPos + 2 * t.visibleWidth)));
newEndDate.stripTime();
var newEndMs = newEndDate.getTime();
if(t.drawnStartMs == null){ // first time
t.drawnStartMs = newStartMs;
t.drawnEndMs = newEndMs;
t.drawLabelsHelper(newStartMs, newEndMs);
}else if(newStartMs > t.drawnEndMs){ // new labels are to the right
t.drawLabelsHelper(t.drawnEndMs, newEndMs);
t.drawnEndMs = newEndMs;
}else if(newEndMs < t.drawnStartMs){ // to the left
t.drawLabelsHelper(newStartMs, t.drawnStartMs);
t.drawnStartMs = newStartMs;
}else { // overlap
if(newStartMs < t.drawnStartMs){
t.drawLabelsHelper(newStartMs, t.drawnStartMs);
t.drawnStartMs = newStartMs;
}
if(newEndMs > t.drawnEndMs){
t.drawLabelsHelper(t.drawnEndMs, newEndMs);
t.drawnEndMs = newEndMs;
}
}
}
t.isMoving = false;
t.goToPx = function(finalLeft, isAnimated, isLabelsDrawn) {
/*
finalLeft is negative
I tried several implementations here, including:
- moving the left of the canvas within a wrapper (current strategy)
- animating setViewbox using getAnimationFrame
- animating each individual element using getAnimation frame
- animating floating content using getAnimation (current strategy)
- animating floating content using raphael.animate
This solution is by far the smoothest and doesn't have any asynchrony problems. There's some twitching going on with floating content, but it's not THAT bad
*/
if(t.isMoving) return false;
isAnimated = typeof isAnimated !== 'undefined' ? isAnimated : t.animated;
isLabelsDrawn = typeof isLabelsDrawn !== 'undefined' ? isLabelsDrawn : true;
finalLeft = Math.max(Math.min(finalLeft, 0), -t.maxLeftPx);
if(isLabelsDrawn)
t.drawLabels(-finalLeft);
var left = getLeft(t.paperElem);
// hide scroll buttons if you're at the end
if(t.scrollable){
if(finalLeft == 0){
t.leftControl.style.display = 'none';
t.isScrolling = false;
} else {
t.leftControl.style.display = '';
}
if(finalLeft == t.visibleWidth - t.totalWidth){
t.rightControl.style.display = 'none';
t.isScrolling = false;
} else {
t.rightControl.style.display = '';
}
}
var movingLabels = [];
var floatedLeft = -finalLeft + 5;
t.floatingSet.forEach(function(label){
// pin the to the left side
if(label.data('left-bound') < floatedLeft && label.data('right-bound') > floatedLeft) {
movingLabels.push([label, label.attr('x'),
floatedLeft - label.attr('x') + 10]);
} else if(label.attr('x') != label.data('left-bound')) { // push it to where it should be
movingLabels.push([label, label.attr('x'),
label.data('left-bound') - label.attr('x')]);
}
});
if(isAnimated){
t.isMoving = true;
var start = null;
var elem = t.paperElem;
function step(timestamp) {
if(start == null)
start = timestamp;
var progress = (timestamp - start) / 200;
var pos = (finalLeft - left) * progress + left;
elem.style.left = pos + "px";
// move the labels
for(var i = 0; i < movingLabels.length; i++){
movingLabels[i][0].attr('x', movingLabels[i][2] * progress + movingLabels[i][1]);
}
if (progress < 1) { // keep going
requestAnimationFrame(step);
}else{ // put it in its final position
t.paperElem.style.left = finalLeft + "px";
for(var i = 0; i < movingLabels.length; i++){
movingLabels[i][0].attr('x', movingLabels[i][2] + movingLabels[i][1]);
}
t.isMoving = false;
}
}
requestAnimationFrame(step);
}else{ // no animation is just a shift
t.paperElem.style.left = finalLeft + 'px';
for(var i = 0; i < movingLabels.length; i++){
movingLabels[i][0].attr('x', movingLabels[i][2] + movingLabels[i][1]);
}
}
return finalLeft != 0 && finalLeft != -t.maxLeftPx;
}
t.goToDate = function(date, position){
// position is negative for left, 0 for middle, positive for right
date = new Date(date.getTime());
date.stripTime();
if(position < 0){
t.goToPx(-t.msToPx(date.getTime()));
} else if(position > 0){
t.goToPx(-t.msToPx(date.getTime()) + t.visibleWidth);
} else {
t.goToPx(-t.msToPx(date.getTime()) + t.visibleWidth / 2);
}
}
// CREATING THE NAVIGATION
// this is boring
if(t.scrollable){
t.leftControl = document.createElement('div');
t.leftControl.className = 'chronoline-left';
t.leftControl.style.marginTop = t.topMargin + 'px';
var leftIcon = document.createElement('div');
leftIcon.className = 'chronoline-left-icon';
t.leftControl.appendChild(leftIcon);
t.wrapper.appendChild(t.leftControl);
var controlHeight = Math.max(t.eventsHeight,
t.leftControl.clientHeight);
t.leftControl.style.height = controlHeight + 'px';
leftIcon.style.marginTop = (controlHeight - 15) / 2 + 'px';
t.rightControl = document.createElement('div');
t.rightControl.className = 'chronoline-right';
t.rightControl.style.marginTop = t.topMargin + 'px';
var rightIcon = document.createElement('div');
rightIcon.className = 'chronoline-right-icon';
t.rightControl.appendChild(rightIcon);
t.wrapper.appendChild(t.rightControl);
t.rightControl.style.height = t.leftControl.style.height;
rightIcon.style.marginTop = leftIcon.style.marginTop;
t.scrollLeftDiscrete = function(e){
t.goToDate(t.scrollLeft(new Date(t.pxToMs(-getLeft(t.paperElem)))), -1);
return false;
};
t.scrollRightDiscrete = function(e){
t.goToDate(t.scrollRight(new Date(t.pxToMs(-getLeft(t.paperElem)))), -1);
return false;
};
// continuous scroll
// left and right are pretty much the same but need to be flipped
if(t.continuousScroll){
t.isScrolling = false;
t.timeoutId = -1;
t.scrollLeftContinuous = function(timestamp){
if(t.scrollStart == null)
t.scrollStart = timestamp;
if(t.isScrolling){
requestAnimationFrame(t.scrollLeftContinuous);
}
var finalLeft = t.continuousScrollSpeed * (timestamp - t.scrollStart) + t.scrollPaperStart;
t.goToPx(finalLeft, false, finalLeft > - t.msToPx(t.drawnStartMs));
};
t.endScrollLeft = function(e){
clearTimeout(t.scrollTimeoutId);
if(t.toScrollDiscrete){
t.toScrollDiscrete = false;
t.scrollLeftDiscrete();
}
t.isScrolling = false;
};
t.leftControl.onmousedown = function(e){
t.toScrollDiscrete = true;
t.scrollPaperStart = getLeft(t.paperElem);
t.scrollTimeoutId = setTimeout(function(){
t.toScrollDiscrete = false; // switched is flipped
t.scrollStart = null;
t.isScrolling = true; // whether it's currently moving
requestAnimationFrame(t.scrollLeftContinuous);
}, 200);
};
t.leftControl.onmouseup = t.endScrollLeft;
t.leftControl.onmouseleave = t.endScrollLeft;
t.scrollRightContinuous = function(timestamp){
if(t.scrollStart == null)
t.scrollStart = timestamp;
if(t.isScrolling){
requestAnimationFrame(t.scrollRightContinuous);
}
var finalLeft = t.continuousScrollSpeed * (t.scrollStart - timestamp) + t.scrollPaperStart;
t.goToPx(finalLeft, false, finalLeft - t.visibleWidth < - t.msToPx(t.drawnEndMs));
};
t.endScrollRight = function(e){
clearTimeout(t.scrollTimeoutId);
if(t.toScrollDiscrete){
t.toScrollDiscrete = false;
t.scrollRightDiscrete();
}
t.isScrolling = false;
};
t.rightControl.onmousedown = function(e){
t.toScrollDiscrete = true;
t.scrollPaperStart = getLeft(t.paperElem);
t.scrollTimeoutId = setTimeout(function(){
t.toScrollDiscrete = false; // switched is flipped
t.scrollStart = null;
t.isScrolling = true; // whether it's currently moving
requestAnimationFrame(t.scrollRightContinuous);
}, 500);
};
t.rightControl.onmouseup = t.endScrollRight;
t.rightControl.onmouseleave = t.endScrollRight;
} else { // just hook up discrete scrolling
t.leftControl.onclick = t.scrollLeftDiscrete;
t.rightControl.onclick = t.scrollLeftDiscrete;
}
}
// ENABLING DRAGGING
// i'm not using raphael.js built-in dragging since this is for the entire canvas
// also, i didn't see that function before I wrote this
// using jQuery to get mouseleave to work cross-browser
if(t.draggable){
t.stopDragging = function(e){
jQuery(t.wrapper).removeClass('dragging')
.unbind('mousemove', t.mouseMoved)
.unbind('mouseleave', t.stopDragging)
.unbind('mouseup', t.stopDragging);
t.drawLabels(-getLeft(t.paperElem));
}
t.mouseMoved = function(e){
t.goToPx(t.dragPaperStart - (t.dragMouseStart - e.pageX), false, false);
}
t.wrapper.className += ' chronoline-draggable';
jQuery(t.paperElem).mousedown(function(e){
e.preventDefault();
t.dragMouseStart = e.pageX;
t.dragPaperStart = getLeft(t.paperElem);
jQuery(t.wrapper).addClass('dragging')
.bind('mousemove', t.mouseMoved)
.bind('mouseleave', t.stopDragging)
.bind('mouseup', t.stopDragging);
});
}
t.goToToday = function(){
// scrolls to put today in the middle
t.goToDate(t.today, 0);
};
t.getLeftTime = function(){
// gets the time (ms) of the left edge of the visible area
return Math.floor(t.startTime - getLeft(t.paperElem) / t.pxRatio);
};
t.getRightTime = function(){
// gets the time (ms) of the right edge of the visible area
return Math.floor(t.startTime - (getLeft(t.paperElem) - t.visibleWidth) / t.pxRatio);
};
// set the default position
t.paperElem.style.left = - (t.defaultStartDate - t.startDate) * t.pxRatio + 20 + 'px';
t.goToPx(getLeft(t.paperElem));
t.myCanvas.style.height = t.totalHeight + 'px';
}