Multiplle TimeLines

TimeLines With VirtualTimeLines

by Diya_Khan

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<script src="https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<script type="text/html" id="eventTemplate">
    <div  data-bind="if: $index() === 0,css: { dvEventsOdd: ($parentContext.$index() % 2 == 1), dvEventsEven: ($parentContext.$index() % 2 == 0) }" >        
        
        <span class="event" data-bind="text: $data.eventName,style:{ backgroundColor: $data.color }">
        </span>      
       <input type="button" value="X" data-bind="click:$parents[2].removeEvent.bind($parents[2],$data)" class="deleteIcon"/>        
        <span class="line">&nbsp;</span>                   
    </div>
</script>

<script type="text/html" id="slotTemplate">
    <div data-bind="foreach:$data" class="dvTimeLineContainer">
        <div class="dvTimeLineSlot">            
          <div class="dvEvents" data-bind="sortable:{template:'eventTemplate',data: $data.events, afterMove: $root.timeLines()[$parentContext.$index()].eventDropCallBack }">               
            </div>            
            <div  class="dvExpand" >
                <div data-bind="visible: $data.events().length > 1,click:$root.timeLines()[$parentContext.$index()].expandTimeSlotEvents" class="expandIcon" >                                                          
                    <a href="#" >+</a>
                    <br/>
                </div>
            </div>                
            <div class="dvTimeSlotBar">    
                <div class="dvTimeSlotBlocks">
                    <span data-bind="text: slotName"></span>                   
                </div>            
            </div>
        </div>
    </div>
</script>
<div class="mainpage" data-role="page">    
   <div...

CSS

.mainpage
{
    padding-left:10px;
}
.timelineFrame
{
    width:765px;        
    border: 2px solid #309261;    
    
}
.dvTimeLine {
    width:450px;
    height: 305px;         
    display:inline-block;
    white-space:nowrap;
    border-radius: 5px;
}
.dvTimeLineContainer
{
    width:100%;   
    height: 320px;    
}
.timelineTitle
{
    font-family: "Comic Sans MS", cursive;
    font-size:22px;
    text-decoration: underline;
   padding-left:5px;
}
.dvTimeLineSlot
{
    width:150px;    
    height: 300px;
    display:inline-block;
}
.dvEvents {    
    height: 250px;      
    float:left;
    width:150px;    
}
.dvEventsOdd
{
    top:30%;
    position:relative;
}
.dvEventsEven
{
    top:3%;
    position:relative;
}

.dvTimeSlotBar {
    background-color: #5A4F51;
    width: 100%;
    height: 25px;
    background: -moz-linear-gradient(top, black, #444);
    background: -webkit-gradient(linear, left top, left bottom, from(black), to(#444));
    color: #CCCCCC;
    cursor:all-scroll;
    float:left;
    
}
.dvTimeSlotBlocks {
    
    height: 22px;
    line-height: 22px;
    color: #CCCCCC;
    border-left: 1px solid #CCC;
    padding-left: 5px;
    font-size: 10px;
    font-weight: bold;
    float: left;
    
}
.dvEventsOdd .event
{
    word-wrap:break-word;    
    left:20px;
    top:40px;      
font-family: "Comic Sans MS", cursive;
    display: inline-block;
    color: #fff;
   /* background-color:#008000;
    background: -moz-linear-gradient(bottom, black, #008000);
    background: -webkit-gradient(linear, left bottom,left top, from(black), to(#008000));*/
    border: 2px solid #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    position: relative;
    cursor:pointer;    
}
.dvEventsEven .event
{
    word-wrap:break-word;    
    left:20px;
    top:40px;      
    font-family: "Comic Sans MS", cursive;
    display: inline-block;
    color: #fff;
   /* background-color:#461B7E;
    background:...

JavaScript

ko.bindingHandlers.popUp = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value)
            $(element).show();
        else
            $(element).hide();
        
    },
    //handle the model value changing
    update: function(element, valueAccessor, allBindingsAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());      
        if(value)
            $(element).show();
        else
            $(element).hide();
    }
};

ko.bindingHandlers.fadeIn = {    
     init: function(element, valueAccessor, allBindingsAccessor) {                
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value)
            $(element).fadeIn();
        else
            $(element).fadeOut();
        
    },
    //handle the model value changing
    update: function(element, valueAccessor, allBindingsAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());      
      if(value)
        $(element).fadeIn();
      else
        $(element).fadeOut();
    }
};

ko.bindingHandlers.jqSlider = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize the control
        var options = allBindingsAccessor().jqOptions || {};
        $(element).slider(options);

        //handle the value changing in the UI
        ko.utils.registerEventHandler(element, "slidechange", function() {
            var observable = valueAccessor();
            observable($(element).slider("value"));
        });

        ko.utils.registerEventHandler(element, "slide", function() {
            var observable = valueAccessor();
            observable($(element).slider("value"));
        });
    },
    //handle the model value changing
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var options = allBindingsAccessor().jqOptions || {};
...