JAVASCRIPT   20

ringles

Guest on 29th June 2022 01:50:26 PM

  1. (function($){
  2.  
  3.         $.fn.jflatTimeline = function(options){
  4.  
  5.        
  6.  
  7.                 /**------------------ SETTING PARAMETERS ------------------**/
  8.  
  9.                
  10.  
  11.                 var timelinedates = new Array();
  12.  
  13.                 var date_sort_asc = function (date1, date2) {
  14.  
  15.                         // This is a comparison function that will result in dates being sorted in
  16.  
  17.                         // ASCENDING order. As you can see, JavaScript's native comparison operators
  18.  
  19.                         // can be used to compare dates. This was news to me.
  20.  
  21.                         if (date1 > date2) return -1;
  22.  
  23.                         if (date1 < date2) return 1;
  24.  
  25.                         return 0;
  26.  
  27.                 };
  28.  
  29.                
  30.  
  31.                 var current_year = 0;
  32.  
  33.                 var current_month = 0;
  34.  
  35.                 var scroll_count = 2;
  36.  
  37.                 var scrolled = 0;
  38.  
  39.                 var scroll_time = 500;
  40.  
  41.                
  42.  
  43.                 var month=new Array();
  44.  
  45.                 month[0]="January";
  46.  
  47.                 month[1]="February";
  48.  
  49.                 month[2]="March";
  50.  
  51.                 month[3]="April";
  52.  
  53.                 month[4]="May";
  54.  
  55.                 month[5]="June";
  56.  
  57.                 month[6]="July";
  58.  
  59.                 month[7]="August";
  60.  
  61.                 month[8]="September";
  62.  
  63.                 month[9]="October";
  64.  
  65.                 month[10]="November";
  66.  
  67.                 month[11]="December";
  68.                
  69.  
  70.                 var config = {};
  71.  
  72.                 if(options){
  73.  
  74.                         $.extend(config, options);
  75.  
  76.                 }
  77.  
  78.                
  79.  
  80.                
  81.  
  82.                 /**------------------ BEGIN FUNCTION BODY ------------------**/
  83.  
  84.                
  85.  
  86.                 return this.each(function(){
  87.  
  88.                         selector = $(this);
  89.  
  90.                        
  91.  
  92.                         if(config.scroll)
  93.  
  94.                                 scroll_count = parseInt(config.scroll);
  95.  
  96.                
  97.  
  98.                         if(config.width)
  99.  
  100.                                 selector.css('width', config.width)
  101.  
  102.  
  103.  
  104.                         if(config.scrollingTime)
  105.  
  106.                                 scroll_time = config.scrollingTime;
  107.  
  108.                                
  109.  
  110.                 /**------------------ INSERT  YEAR MONTH BAR------------------**/
  111.  
  112.                
  113.  
  114.                         //
  115.  
  116.                         if(!selector.children('.timeline-wrap').children('.event.selected').length)
  117.  
  118.                                 selector.children('.timeline-wrap').children('.event:first-child').addClass('selected')
  119.  
  120.                         //This store the selected year to 'current_year'
  121.  
  122.                        
  123.  
  124.                         current_year = (new Date(selector.children('.timeline-wrap').children('.event.selected').attr('data-date'))).getFullYear()
  125.  
  126.                         //This store the selected year to 'current_month'
  127.  
  128.                         current_month = (new Date(selector.children('.timeline-wrap').children('.event.selected').attr('data-date'))).getMonth()
  129.  
  130.                        
  131.  
  132.                         //This will generate the month-year bar if it doesn't exist + put the current year and month
  133.  
  134.                         if(!selector.children('.month-year-bar').length){
  135.  
  136.                                 selector.prepend('<div class = "month-year-bar"></div>')
  137.  
  138.                                
  139.  
  140.                                 var d = new Date(selector.children('.timeline-wrap').children('.event:first-child').attr('data-date'));
  141.  
  142.                                 function pad(s) { return (s < 10) ? '0' + s : s; }
  143.  
  144.                                
  145.  
  146.                                 selector.children('.month-year-bar').text('Selected Date: '+ [pad(d.getMonth()+1),pad(d.getDate()), d.getFullYear()].join('/') +"")
  147.  
  148.                         }
  149.  
  150.                        
  151.  
  152.                 /**------------------ STORING DATES INTO ARRAY------------------**/
  153.  
  154.  
  155.  
  156.                         var i = 0;
  157.  
  158.                         // Store the dates into timelinedates[]
  159.  
  160.                         selector.children('.timeline-wrap').children('.event').each(function(){
  161.  
  162.                                 timelinedates[i] = new Date($(this).attr('data-date'));
  163.  
  164.                                 i++;
  165.  
  166.                         })
  167.  
  168.                         //Sort the dates from small to large
  169.  
  170.                         timelinedates.sort(date_sort_asc)
  171.  
  172.                        
  173.  
  174.                 /**------------------ INSERT DATES BAR------------------**/
  175.  
  176.                        
  177.  
  178.                         //This will insert the month year bar
  179.  
  180.                                
  181.  
  182.                                
  183.  
  184.                         if(!selector.children(".dates-bar").length)
  185.  
  186.                                 selector.children(".month-year-bar").after('<div class = "dates-bar"><a class = "prev"><i class="fas fa-angle-double-left"></i></a><a class = "noevent">No event found</a><a class = "next"><i class="fas fa-angle-double-right"></i></a></div>')
  187.  
  188.                        
  189.  
  190.                         //This for loop will insert all the dates in the bar fetching from timelinedates[]
  191.  
  192.                         for(i=0; i < timelinedates.length; i++){
  193.  
  194.                                 dateString = String((timelinedates[i].getMonth() + 1) + "/" + timelinedates[i].getDate() + "/" + timelinedates[i].getFullYear())
  195.  
  196.                                 if(selector.children('.dates-bar').children('a[data-date = "'+ dateString +'"]').length)
  197.  
  198.                                         continue;
  199.  
  200.                                 selector.children('.dates-bar').children('a.prev').after('<a data-date = '+ dateString + '><span class = "date">' + String(timelinedates[i].getDate()) + '</span><span class = "month">' + String(month[timelinedates[i].getMonth()]) + '</span></a>')
  201.  
  202.                         }
  203.  
  204.                        
  205.  
  206.                         //This will convert the event data-date attribute from mm/dd/yyyy into m/d/yyyy
  207.  
  208.                         for(i = 0; i < selector.children('.timeline-wrap').children('.event').length; i++){
  209.  
  210.                                 var a = new Date(selector.children('.timeline-wrap').children('.event:nth-child(' + String(i+1)+ ')').attr('data-date'))
  211.  
  212.                                 dateString = String((a.getMonth() + 1) + "/" + a.getDate() + "/" + a.getFullYear())
  213.  
  214.                                 selector.children('.timeline-wrap').children('.event:nth-child(' + String(i+1)+ ')').attr('data-date', dateString)
  215.  
  216.                         }
  217.  
  218.                        
  219.  
  220.                        
  221.  
  222.                         //This will hide the noevent bar
  223.  
  224.                         selector.children('.dates-bar').children('a:not(.prev, .next, .noevent)').each(function(){
  225.  
  226.                                 //if((new Date($(this).attr('data-date'))).getFullYear() != current_year)
  227.  
  228.                                         //$(this).hide();
  229.  
  230.                         })
  231.  
  232.                        
  233.  
  234.                         //Prevent from calling twice
  235.  
  236.                         if(selector.hasClass('calledOnce'))
  237.  
  238.                                 return 0;
  239.  
  240.                         selector.addClass('calledOnce')
  241.  
  242.                        
  243.  
  244.                         //Add 'selected' class the date
  245.  
  246.                         selector.children('.dates-bar').children('a[data-date ="' + String(selector.children('.timeline-wrap').children('.event.selected').attr('data-date')) + '"]').addClass('selected')
  247.  
  248.                         //Adding Class s_screen
  249.  
  250.                         if(selector.width() < 500)
  251.  
  252.                                 selector.addClass('s_screen')
  253.  
  254.                                
  255.  
  256.                         $(window).resize(function(){
  257.  
  258.                                 if(selector.width() < 500)
  259.  
  260.                                         selector.addClass('s_screen')
  261.  
  262.                                 else
  263.  
  264.                                         selector.removeClass('s_screen')       
  265.  
  266.                         })
  267.  
  268.                 /**------------------ EVENTS HANDLING------------------**/
  269.  
  270.  
  271.  
  272.                 /**------------------ EVENTS FOR CLICKING ON THE DATES ------------------**/
  273.  
  274.                
  275.  
  276.                         selector.children('.dates-bar').children('a:not(.prev, .next, .noevent)').click(function(){
  277.  
  278.                                 a = String($(this).attr('data-date'));
  279.  
  280.  
  281.  
  282.                                 selector.children('.timeline-wrap').children('.event.selected').removeClass('selected');
  283.  
  284.  
  285.  
  286.                                 selector.children('.timeline-wrap').children('.event[data-date="' + a + '"]').addClass('selected');
  287.  
  288.                                
  289.  
  290.                                 selector.children('.dates-bar').children('a:not(.prev, .next, .noevent)').removeClass('selected');
  291.  
  292.  
  293.  
  294.                                 $(this).addClass('selected')
  295.  
  296.                                
  297.  
  298.                                 var d = new Date($(this).attr('data-date'));
  299.  
  300.                                 function pad(s) { return (s < 10) ? '0' + s : s; }
  301.  
  302.                                
  303.  
  304.                                 selector.children('.month-year-bar').text('Selected Date: '+ [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/') +"")
  305.  
  306.                        
  307.  
  308.                                 changeday(d.getFullYear()+""+pad(d.getMonth()+1)+""+pad(d.getDate()));
  309.  
  310.                        
  311.  
  312.  
  313.  
  314.                         })
  315.  
  316.                        
  317.  
  318.                 /**------------------ EVENTS FOR CLICKING TO THE NEXT DATE EVENT ------------------**/
  319.  
  320.                        
  321.  
  322.                         selector.children('.dates-bar').children('a.next').click(function(){
  323.  
  324.                                 var actual_scroll = scroll_count;
  325.  
  326.                                 var c = selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible()').length
  327.  
  328.                                 if(scrolled + scroll_count >= c)
  329.  
  330.                                         actual_scroll = (c - scrolled)-1
  331.  
  332.                                
  333.  
  334.                                 if(parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'))*actual_scroll > selector.children('.dates-bar').width())
  335.  
  336.                                         while(parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'))*actual_scroll > selector.children('.dates-bar').width() && actual_scroll > 1)
  337.  
  338.                                                 actual_scroll -= 1;
  339.  
  340.                                
  341.  
  342.                                 var a = (-1)*actual_scroll*parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'));
  343.  
  344.                                 selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').animate({marginLeft: '+=' + String(a)+ 'px'}, scroll_time)
  345.  
  346.                                 scrolled += actual_scroll;
  347.  
  348.                                
  349.  
  350.                                 current_month = new Date(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(' + String(scrolled) + ')').attr('data-date')).getMonth()
  351.  
  352.                                
  353.  
  354.                                 selector.children('.month-year-bar').children('.month').children('span').text(month[current_month])
  355.  
  356.                         })
  357.  
  358.                        
  359.  
  360.                        
  361.  
  362.                 /**------------------ EVENTS FOR CLICKING TO THE PREVIOUS DATE EVENT ------------------**/
  363.  
  364.                        
  365.  
  366.                        
  367.  
  368.                         selector.children('.dates-bar').children('a.prev').click(function(){
  369.  
  370.                        
  371.  
  372.                                 var actual_scroll = scroll_count;
  373.  
  374.                                 var c = selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible()').length
  375.  
  376.                                 if(scrolled <= scroll_count)
  377.  
  378.                                         actual_scroll = scrolled;
  379.  
  380.  
  381.  
  382.                                 if(parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'))*actual_scroll > selector.children('.dates-bar').width())
  383.  
  384.                                         while(parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'))*actual_scroll > selector.children('.dates-bar').width() && actual_scroll > 1)
  385.  
  386.                                                 actual_scroll -= 1;
  387.  
  388.  
  389.  
  390.                                        
  391.  
  392.                                 var a = actual_scroll*parseInt(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').css('width'));
  393.  
  394.                                 selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(0)').animate({marginLeft: '+=' + String(a)+ 'px'}, scroll_time)
  395.  
  396.                                 scrolled -= actual_scroll;
  397.  
  398.                                
  399.  
  400.                                 current_month = new Date(selector.children('.dates-bar').children('a:not(.prev, .next, .noevent):visible():eq(' + String(scrolled) + ')').attr('data-date')).getMonth()
  401.  
  402.                                
  403.  
  404.                                 selector.children('.month-year-bar').children('.month').children('span').text(month[current_month])
  405.  
  406.                         })
  407.  
  408.                        
  409.  
  410.                        
  411.  
  412.        
  413.  
  414.                        
  415.  
  416.        
  417.  
  418.                        
  419.  
  420.                        
  421.  
  422.                
  423.  
  424.                        
  425.  
  426.                 })
  427.  
  428.         }
  429.  
  430. })(jQuery)

Raw Paste

Login or Register to edit or fork this paste. It's free.