Timeline

by sm1215

HTML

<h1>Timeline</h1>
<div id="time"></div>
<div id="task"></div>
<div id="pins"></div>

<!-- need to look at storing pins differently, right now it's possible for them to overlap each other if they don't start on the same day -->

<!-- idea: store a taskCounter var for each day. as tasks are added to various date ranges, increase the task counter for each day and offset the vertical position of the pin based on the number of tasks. this should help prevent pin overlap. -->

<!-- taskCounter stored on each day works but isn't good enough, has bugs -->

CSS

#time { display:block; height:300px; }
#time .month { display:block; height:500px; float:left; }
#time .month h3 { display:block; clear:both; }
#time .year { display:block; height:600px; float:left; }
#time .year h2 { display:block; clear:both; }
#time .col { display:block; position:relative; width:40px; height:300px; float:left; border-right:1px solid #ccc; text-align:center; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#time .col:hover    { background-color:#efefef; } 
#time .col.on   { background-color:#dedede; } 

#task	{ display:none; position:absolute; width:200px; height:180px; padding:10px 15px; background:#fff; border:1px solid #ccc; }
#task label { display:block; width:100%; margin:4px 0px 2px 0px; }
#task input { display:block; width:100%; margin:2px 0px 4px 0px; }
#task .submit	{ display:block; width:50px; position:absolute; bottom:15px; left:15px; text-align:center; background:#ccc; cursor:pointer; padding:2px 5px; }
#task .close	{ display:block; width:50px; position:absolute; bottom:15px; right:15px; text-align:center; background:#ccc; cursor:pointer; padding:2px 5px; }

.pin    { display:block; height:20px; width:30px; margin:2px auto; background:#f00; color:#fff; padding:2px; text-align: left; position:absolute; z-index:1; box-sizing:border-box; border:1px solid white; }
.pin:hover  { z-index:1000; }

JavaScript

$(document).ready(function(){
    //alert('hi');
    // var myDataRef = new Firebase('https://dazzling-torch-4294.firebaseio.com/#-K1GP8XgtGAAmNn3OLTo|aaf2bc595c42eb93b535200730ed0244');
    timeline.start = new Date(2010, 5, 14, 7, 34, 0, 0);
    timeline.run();
})
.on('click', '.col', function(){
    date = $(this).attr('id');
    timeline.task.startDate = date;
    timeline.task.endDate = date;
    timeline.task.init();
})
.on('click', '.submit', function(){
    timeline.task.populate();
})
.on('click', '.close', function(){
    timeline.task.destroy();
})

//trying to come up with selecting multiple days by dragging
//this will probably require a different solution for touch devices
.on('mousedown', '.col', function(){
    $this = $(this);
    $this.addClass('on');
    timeline.task.startDate = $this.attr('id');

    $(document).on('mousemove', '.col', function(){
        $(this).addClass('on');
    });
})
.on('mouseup', '.col', function(){
    timeline.task.endDate = $(this).attr('id');
    $(document).off('mousemove', '.col');

    start = new Date(timeline.task.startDate).getTime();
    end = new Date(timeline.task.endDate).getTime();

    if(start <= end){
        timeline.task.init();
    } else {
        $('.col').removeClass('on');
    }
})
;

var timeline = {
    start:'',
    steps:0,
    year:0,
    month:'',
    width:41,
    monthNames:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    tasks:[],
    run:function(){
        var start = new Date("06/14/2010");
        var end = new Date();        
        
        var push = [];
        push.push('<div style="display:none">');
        push.push('<div style="display:none">');
        
        while(start < end){
            //The month is the current month + 1
            var month = start.getMonth() + 1;
            var year = start.getFullYear();
            
            
            if(year != this.year){
               ...