Template:BGIC-Union/timeline-javascript

/*

Timeline 1.0

Date organised content slider.

Copyright (c) 2012 br0 (shindiristudio.com)

Project site: http://codecanyon.net/ Project demo: http://shindiristudio.com/timeline

  • /
(function($){var t_methods={init:function(options){var settings=$.extend({'itemClass':'.item','itemOpenClass':'.item_open','openTriggerClass':'.item','closeText':'Close','itemMargin':10,'scrollSpeed':500,'startItem':'last','easing':'easeOutSine','categories':['January','February','March','April','May','June','July','August','September','October','November','December'],'nuberOfSegments':[31,29,31,30,31,30,31,31,30,31,30,31],'yearsOn':true},options);var $this=this,$body=$('body'),$items=$this.find(settings.itemClass),$itemsOpen=$this.find(settings.itemOpenClass),itemWidth=$items.first().width(),itemOpenWidth=$itemsOpen.first().width();$this.trigger('init.Timeline');var startIndex=$items.length-1;if(settings.startItem=='first'){startIndex=0}else if(settings.startItem=='last'){startIndex=$items.length-1}else{$items.each(function(index){if(settings.startItem==$(this).attr('data-id')){startIndex=index;return true}})}$this.append('
');$this.css({width:'100%','overflow':'hidden',marginLeft:'auto',marginRight:'auto','text-align':'center',height:0});$this.wrapInner('<div class="timeline_items" />');$this.find('.timeline_items').css('text-align','left');$this.append('
');$this.wrapInner('<div class="timeline_items_holder" />');$this.find('.timeline_items_holder').css({width:'300px',marginLeft:'auto',marginRight:'auto'});$items.css({paddingLeft:0,paddingRight:0,marginLeft:settings.itemMargin/2,marginRight:settings.itemMargin/2,float:'left',position:'relative'});$itemsOpen.each(function(){$(this).prepend('
'+settings.closeText+'
');$(this).wrapInner('<div class="'+settings.itemOpenClass.substr(1)+'_cwrapper" />').find('div:first').css({position:'relative'});$(this).css({width:0,padding:0,margin:0,float:'left',display:'none',position:'relative',overflow:'hidden'})});var $iholder=$this.find('.timeline_items:first'),$line=$this.find('.t_line_wrapper:first'),margin=300/2-(itemWidth+settings.itemMargin)*(1/2+startIndex),width=(itemWidth+settings.itemMargin)*$items.length+(itemOpenWidth+settings.itemMargin)+660,data=$this.data('timeline');$iholder.css({width:width,marginLeft:margin});if(!data){$this.data('timeline',{currentIndex:startIndex,itemCount:$items.length,margin:margin,itemWidth:itemWidth,itemOpenWidth:itemOpenWidth,lineMargin:0,lineViewCount:0,options:settings,items:$items,iholder:$iholder,open:false,noAnimation:false,marginResponse:false})}$this.timeline('createElements');$(document).keydown(function(e){if(e.keyCode==37){$this.timeline('left');return false}if(e.keyCode==39){$this.timeline('right');return false}});$(window).resize(function(){var id=$this.find('.active:first').attr('href').substr(1);data=$this.data('timeline');itemWidth=$items.first().width(),itemOpenWidth=$itemsOpen.first().find('div:first').width();data.margin+=data.itemCount*(data.itemWidth-itemWidth);data.itemWidth=itemWidth;if(data.open)data.margin+=(data.itemOpenWidth-itemOpenWidth)/2;data.itemOpenWidth=itemOpenWidth;if($this.find('.t_line_view:first').width()>$this.find('.timeline_line').width()&&data.open&&!data.marginResponse){data.margin-=(itemWidth+settings.itemMargin)/2;data.marginResponse=true}else if($this.find('.t_line_view:first').width()<=$this.find('.timeline_line').width()&&data.marginResponse&&data.open){data.margin+=(itemWidth+settings.itemMargin)/2;data.marginResponse=false}data.noAnimation=true;$this.timeline('goTo',id)});$this.find('.t_left').click(function(){$this.timeline('left')});$this.find('.t_right').click(function(){$this.timeline('right')});$this.find(settings.openTriggerClass).click(function(){$this.timeline('goTo',$(this).attr('data-id'),true)});$this.find('.t_close').click(function(){$this.timeline('close',$(this).attr('data-id'))});$this.css({height:'auto'}).show();$this.find('.t_line_node').each(function(){if($(this).width()<10)$(this).width(12);$(this).css({marginLeft:-$(this).width()/2})});return $this},destroy:function(){var $this=this,data=$this.data('timeline');data.currentIndex.remove();data.itemCount.remove();data.margin.remove();data.lineMargin.remove();data.lineViewCount.remove();data.options.remove();data.items.remove();data.iholder.remove();data.open.remove();$this.removeData('timeline')},open:function(id){var $this=this,data=$this.data('timeline'),$items=$this.find(data.options.itemOpenClass),speed=data.options.scrollSpeed,width=data.itemOpenWidth,easing=data.options.easin,itemMargin=data.options.itemMargin;$items.each(function(){if($(this).attr('data-id')==id){$this.trigger('itemOpen.Timeline');$(this).stop(true).show().animate({width:width,marginLeft:itemMargin/2,marginRight:itemMargin/2,},speed,easing);if($this.find('.t_line_view:first').width()>$this.find('.timeline_line').width()){data.margin-=(data.itemWidth+data.options.itemMargin)/2;data.marginResponse=true}else{data.marginResponse=false}data.margin-=(width+data.options.itemMargin+data.itemWidth)/2-data.itemWidth/2;data.iholder.stop(true).animate({marginLeft:data.margin},speed,easing);data.open=id}});return $this},close:function(id,idOpen){var $this=this,data=$this.data('timeline'),$items=$this.find(data.options.itemOpenClass),speed=data.options.scrollSpeed,width=data.itemOpenWidth,easing=data.options.easing;$items.each(function(){if($(this).attr('data-id')==id){$this.trigger('itemClose.Timeline');$(this).stop(true).animate({width:0,margin:0},speed,easing,function(){$(this).hide()});if(data.marginResponse){data.margin+=(data.itemWidth+data.options.itemMargin)/2}data.margin+=(width+data.options.itemMargin)/2;data.iholder.stop(true).animate({marginLeft:data.margin},speed,easing);data.open=false}});if(idOpen){$this.timeline('open',idOpen)}return $this},right:function(){var $this=this,data=$this.data('timeline'),speed=data.options.scrollSpeed,easing=data.options.easing;if(data.currentIndex<data.itemCount-1){var dataId=data.items.eq(data.currentIndex+1).attr('data-id');$this.timeline('goTo',dataId)}else{data.iholder.stop(true).animate({marginLeft:data.margin-50},speed/2,easing).animate({marginLeft:data.margin},speed/2,easing)}return $this},left:function(){var $this=this,data=$this.data('timeline'),speed=data.options.scrollSpeed,easing=data.options.easing;if(data.currentIndex>0){var dataId=data.items.eq(data.currentIndex-1).attr('data-id');$this.timeline('goTo',dataId)}else{data.iholder.stop(true).animate({marginLeft:data.margin+50},speed/2,easing).animate({marginLeft:data.margin},speed/2,easing)}return $this},goTo:function(id,openElement){var $this=this,data=$this.data('timeline'),speed=data.options.scrollSpeed,easing=data.options.easing,$items=data.items,timelineWidth=$this.find('.timeline_line').width(),count=-1,found=false;$items.each(function(index){if(id==$(this).attr('data-id')){found=true;count=index;return true}});if(found){var $nodes=$this.find('.t_line_node');$nodes.removeClass('active');var $goToNode=$nodes.parent().parent().find('[href="#'+id+'"]').addClass('active');data.lineMargin=-parseInt($goToNode.parent().parent().attr('data-id'),10)*100;if($this.find('.t_line_view:first').width()>$this.find('.timeline_line').width()){data.lineMargin*=2;if($goToNode.parent().hasClass('right'))data.lineMargin-=100}if(data.noAnimation){data.noAnimation=false;$this.find('.t_line_wrapper').stop(true).css({marginLeft:data.lineMargin+'%'})}else{$this.find('.t_line_wrapper').stop(true).animate({marginLeft:data.lineMargin+'%'},speed,easing)}if(data.open){$this.timeline('close',data.open,id)}else if(openElement){$this.timeline('open',id)}$this.trigger('scrollStart.Timeline');var multiply=data.currentIndex-count;data.currentIndex=count;data.margin+=(data.itemWidth+data.options.itemMargin)*multiply;data.iholder.stop(true).animate({marginLeft:data.margin},speed+(speed/5)*(Math.abs(multiply)-1),easing,function(){$this.trigger('scrollStop.Timeline')})}return $this},lineLeft:function(){var $this=this,data=$this.data('timeline'),speed=data.options.scrollSpeed,easing=data.options.easing;if(data.lineMargin!=0){data.lineMargin+=100;$this.find('.t_line_wrapper').stop(true).animate({marginLeft:data.lineMargin+'%'},speed,easing)}},lineRight:function(){var $this=this,data=$this.data('timeline'),speed=data.options.scrollSpeed,easing=data.options.easing;if($this.find('.t_line_view:first').width()>$this.find('.timeline_line').width())var viewCount=data.lineViewCount*2;else var viewCount=data.lineViewCount;if(data.lineMargin!=-(viewCount-1)*100){data.lineMargin-=100;$this.find('.t_line_wrapper').stop(true).animate({marginLeft:data.lineMargin+'%'},speed,easing)}},createElements:function(){var $this=this,data=$this.data('timeline'),$items=data.items;var html='\n'+'
\n'+'
\n';$this.prepend(html);var timelineWidth=$this.find('.timeline_line').width(),cnt=0,nodes=new Array(),months=[].concat(data.options.categories);monthsDays=[0].concat(data.options.nuberOfSegments),minM=months.length,minY=99999,maxM=0,maxY=0;if(!data.options.yearsOn)maxY=99999;$items.each(function(){var dataId=$(this).attr('data-id'),dataDesc=$(this).attr('data-description'),dataArray=dataId.split('/'),d=parseInt(dataArray[0],10),m=(months.indexOf(dataArray[1])!=-1)?months.indexOf(dataArray[1]):parseInt(dataArray[1],10),y=parseInt(dataArray[2],10);maxY=Math.max(maxY,y);maxM=Math.max(maxM,m);minY=Math.min(minY,y);minM=Math.min(minM,m);nodes[dataId]='<a href="#'+dataId+'" class="t_line_node'+(cnt==data.currentIndex?' active':)+'" style="left: '+(100/monthsDays[m])*d+'%; position:absolute; text-align:center;">'+d;if(typeof dataDesc!='undefined')nodes[dataId]+=''+dataDesc+'';nodes[dataId]+='</a>\n';cnt++});html='\n'+'
\n'+'
\n'+'
\n';cnt=0;if(maxM>0){if(minM%2==0)minM--;if(maxM%2==0){if(maxM==12){maxM=1;maxY++}else maxM++}else{maxM+=2}while(minY!=maxY||minM!=maxM){html+='
\n'+(data.options.yearsOn?'

'+minY+'

\n':)+'
\n'+'

'+months[minM]+(data.options.yearsOn?' '+minY+'':)+'

\n';for(var x in nodes){var dataArray=x.split('/');m=(months.indexOf(dataArray[1])!=-1)?months.indexOf(dataArray[1]):parseInt(dataArray[1],10);if(!data.options.yearsOn)y=minY;else y=parseInt(dataArray[2],10);if(m==minM&&y==minY){html+=nodes[x];nodes.splice(x,1)}}minM++;html+='
\n'+'
\n'+'

'+months[minM]+(data.options.yearsOn?' '+minY+'':)+'

\n';for(var x in nodes){dataArray=x.split('/');m=(months.indexOf(dataArray[1])!=-1)?months.indexOf(dataArray[1]):parseInt(dataArray[1],10);if(!data.options.yearsOn)y=minY;else y=parseInt(dataArray[2],10);if(m==minM&&y==minY){html+=nodes[x];nodes.splice(x,1)}}html+='
\n'+'
\n'+'
';if(minM==months.length-1){minM=1;minY++}else{minM++}cnt++}}html+='\n'+'
\n'+'
\n'+'
\n';data.lineViewCount=cnt;$this.find('.timeline_line').html(html);$this.find('.t_line_node').each(function(){$(this).find('span').hide();$(this).hover(function(){$(this).find('span').show()},function(){$(this).find('span').hide()});if($(this).hasClass('active')){data.lineMargin=-parseInt($(this).parent().parent('.t_line_view').attr('data-id'),10)*100;$this.find('.t_line_wrapper').css('margin-left',data.lineMargin+'%')}$(this).click(function(e){e.preventDefault();$this.find('.t_line_node').removeClass('active');$(this).addClass('active');$this.timeline('goTo',$(this).attr('href').substr(1))})});$this.find('#t_line_left').click(function(){$this.timeline('lineLeft')});$this.find('#t_line_right').click(function(){$this.timeline('lineRight')})}};$.fn.timeline=function(method){if(t_methods[method]){return t_methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==='object'||!method){return t_methods.init.apply(this,arguments)}else{$.error('Method '+method+' does not exist on jQuery.timeline')}}})(jQuery);if(!Array.prototype.indexOf){Array.prototype.indexOf=function(obj,start){for(var i=(start||0),j=this.length;i<j;i++){if(this[i]===obj){return i}}return-1}}