Team:Newcastle/script/calendar.js

From 2013.igem.org

(Difference between revisions)
 
(50 intermediate revisions not shown)
Line 14: Line 14:
$('#pop_up_content').html('<h2>' + titleText + '</h2>' + description);
$('#pop_up_content').html('<h2>' + titleText + '</h2>' + description);
          
          
-
         if($('.pop_up_controls').length() == 0)
+
         if($('.pop_up_controls').length == 0)
         {
         {
-
             $('<div class="pop_up_controls"><div class="pop_up_left" style="float:left; width:150px;"><a href="#">Previous</a><div class="pop_up_right" style="float:right; width:150px;"><a href="#">Next</a></div></div>').insertAfter('#pop_up_content');
+
             $('<div class="pop_up_controls"><div class="pop_up_left"><a href="#" onclick="nextDate(-1); return false;">&lt;&lt;&nbsp;Previous</a></div><div class="pop_up_right"><a href="#" onclick="nextDate(1); return false;">Next&nbsp;&gt;&gt;</a></div></div>').insertAfter('#pop_up_content');
         }
         }
          
          
Line 32: Line 32:
$('#pop_up_content').html('<h2>' + titleText + '</h2>' + description);
$('#pop_up_content').html('<h2>' + titleText + '</h2>' + description);
              
              
-
             if($('.pop_up_controls').length() == 0)
+
             if($('.pop_up_controls').length == 0)
             {
             {
-
                 $('<div class="pop_up_controls"><div class="pop_up_left" style="float:left; width:150px;"><a href="#">Previous</a><div class="pop_up_right" style="float:right; width:150px;"><a href="#">Next</a></div></div>').insertAfter('#pop_up_content');
+
                 $('<div class="pop_up_controls"><div class="pop_up_left"><a href="#" onclick="nextDate(-1); return false;">&lt;&lt;&nbsp;Previous</a></div><div class="pop_up_right"><a href="#" onclick="nextDate(1); return false;">Next&nbsp;&gt;&gt;</a></div></div>').insertAfter('#pop_up_content');
             }
             }
              
              
Line 90: Line 90:
      
      
     $('body').find('#calendar-data').remove();
     $('body').find('#calendar-data').remove();
 +
}
 +
 +
function nextDate(i)
 +
{
 +
    var date = (location.hash).split("/");
 +
   
 +
    var day = new Number(date[0].replace("#", ""));
 +
    var month = new Number(date[1]);
 +
   
 +
    var oldDate = new Array(date);
 +
   
 +
    oldDate[0] = day;
 +
    oldDate[1] = month;
 +
   
 +
    var newDate = getDate(i, date);
 +
    var id = newDate[1] + "-" + newDate[0];
 +
   
 +
    if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
 +
    {
 +
        return;
 +
    } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
 +
    {
 +
        setDisplay(id);
 +
    } else
 +
    {
 +
        newDate = getDate(i * 2, date);
 +
        var id = newDate[1] + "-" + newDate[0];
 +
       
 +
        if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
 +
        {
 +
            return;
 +
        } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
 +
        {
 +
            setDisplay(id);
 +
        } else
 +
        {
 +
            newDate = getDate(i * 3, date);
 +
            var id = newDate[1] + "-" + newDate[0];
 +
           
 +
            if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
 +
            {
 +
                return;
 +
            } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
 +
            {
 +
                setDisplay(id);
 +
            } else
 +
            {
 +
                return;
 +
            }
 +
        }
 +
    }
 +
}
 +
 +
function setDisplay(id)
 +
{
 +
    var height = (($('#pop_up_display').height() / 100) * $(window).height()) - 40;
 +
    var description = $('#calendar').find('#' + id).parent().find('.details').html();
 +
    var titleText = $('#calendar').find('#' + id).parent().find('.titles').attr('alt');
 +
    window.location.hash = titleText;
 +
    $('#pop_up_content').html('<h2>' + titleText + '</h2>' + description);
 +
   
 +
    if($('.pop_up_controls').length == 0)
 +
    {
 +
        $('<div class="pop_up_controls"><div class="pop_up_left"><a href="#" onclick="prevDate(); return false;">&lt;&lt;&nbsp;Previous</a></div><div class="pop_up_right"><a href="#" onclick="nextDate(); return false;">Next&nbsp;&gt;&gt;</a></div></div>').insertAfter('#pop_up_content');
 +
    }
 +
}
 +
/*
 +
function nextDate()
 +
{
 +
    alert("Next Date");
 +
   
 +
    return false;
 +
}
 +
*/
 +
function getDate(i, date)
 +
{
 +
    var dateTemp = new Array();
 +
   
 +
    var day = new Number(date[0].replace("#", ""));
 +
    var month = new Number(date[1]);
 +
   
 +
    if((month == 6) && ((day + i) > 30))
 +
    {
 +
        month += i; day = 1;
 +
    } else if ((month == 6) && ((day + 1) < 1))
 +
    {
 +
        // do nothing
 +
    } else if((month == 7) && ((day + i) > 31))
 +
    {
 +
        month += i; day = 1;
 +
    } else if((month == 7) && ((day + i) < 1))
 +
    {
 +
        month += i; day = 30;
 +
    } else if((month == 8) && ((day + i) > 31))
 +
    {
 +
        month += i; day = 1;
 +
    } else if((month == 8) && ((day + i) < 1))
 +
    {
 +
        month += i; day = 31;
 +
    } else if((month == 9) && ((day + i) > 30))
 +
    {
 +
        // Do nothing
 +
    } else if((month == 9) && ((day + i) < 1))
 +
    {
 +
        month += i; day = 31;
 +
    } else
 +
    {
 +
        day += i;
 +
    }
 +
   
 +
    dateTemp[0] = day;
 +
    dateTemp[1] = month;
 +
   
 +
    return dateTemp;
}
}

Latest revision as of 21:23, 2 October 2013

$(function(){

initCalendar();

if(location.hash) { 

       var height = (($('#pop_up_display').height() / 100) * $(window).height()) - 40;

var date = (location.hash).split("/"); var id = date[1] + "-" + date[0].replace("#", "");

var description = $(this).find('#'+id).parent().find('.details').html(); var titleText = $(this).find('#'+id).parent().find('.titles').attr('alt');

$('#pop_up_content').html('

' + titleText + '

' + description); 
       if($('.pop_up_controls').length == 0)
       {
$('
<a href="#" onclick="nextDate(-1); return false;"><< Previous</a>
<a href="#" onclick="nextDate(1); return false;">Next >></a>
').insertAfter('#pop_up_content'); 
       }
       
       $('#pop_up_content').css('height', height);

$('#pop_up').fadeIn(); }

$('td').click(function(){ if($(this).find('.titles').length) { 

           var height = (($('#pop_up_display').height() / 100) * $(window).height()) - 40;

var description = $(this).find('.details').html(); var titleText = $(this).find('.titles').attr('alt'); window.location.hash = titleText;

$('#pop_up_content').html('

' + titleText + '

' + description); 
           if($('.pop_up_controls').length == 0)
           {
$('
<a href="#" onclick="nextDate(-1); return false;"><< Previous</a>
<a href="#" onclick="nextDate(1); return false;">Next >></a>
').insertAfter('#pop_up_content'); 
           }
           
           $('#pop_up_content').css('height', height);

$('#pop_up').fadeIn(); } }); });

function initCalendar() { $('#toc').remove(); var numMonths = parseInt($('#calendar-data').find('h2').length);

//alert(numMonths);

var daysChecked = 0; for(var i = 0; i < numMonths; i++) { //alert("Inside Months"); var currentH2 = $('h2')[i]; var nextH2= $('h2')[i + 1];

var currentMonth = parseInt($('#calendar-data').find('h2').eq(i).find('.mw-headline').text());

var numDays = parseInt($('#calendar-data').find('h2').eq(i).nextUntil('h2', 'h3').length); //alert(numDays); for(var j = 0; j < numDays; j++) { //alert("inside days"); var currentH3 = $('h3')[j + daysChecked]; var temp = $('h3'); var nextH3 = $('h3')[j + 1 + daysChecked];

var currentDay = parseInt($('#calendar-data').find(temp).eq(j + daysChecked).find('.mw-headline').text()); //alert(currentDay); var titlesH4 = $('h4')[((j + daysChecked) * 2)]; var detailsH4 = $('h4')[((j + daysChecked) * 2) + 1];

var tempTitles = $('#calendar-data').children('h4').eq(((j + daysChecked) * 2)).next('div').html(); var tempDetails = $('#calendar-data').children('h4').eq(((j + daysChecked) * 2) + 1).next('div').html();

//alert(tempTitles);

var dateID = $('#' + currentMonth + '-' + currentDay); 

           var dateDisp = currentDay + "/" + currentMonth + "/13";

//alert(details);

//var dateHTML = '
<a href="#' + dateDisp + '" alt="' + dateDisp + '">' + tempTitles + '</a>
' + tempDetails + '
'; var dateHTML = '
' + tempTitles + '
' + tempDetails + '
';

$('#calendar-container').find(dateID).parent().append(dateHTML); }

daysChecked += numDays; } 

   $('body').find('#calendar-data').remove();

}

function nextDate(i) { 

   var date = (location.hash).split("/");
   
   var day = new Number(date[0].replace("#", ""));
   var month = new Number(date[1]);
   
   var oldDate = new Array(date);
   
   oldDate[0] = day;
   oldDate[1] = month;
   
   var newDate = getDate(i, date);
   var id = newDate[1] + "-" + newDate[0];
   
   if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
   {
       return;
   } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
   {
       setDisplay(id);
   } else
   {
       newDate = getDate(i * 2, date);
       var id = newDate[1] + "-" + newDate[0];
       
       if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
       {
           return;
       } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
       {
           setDisplay(id);
       } else
       {
           newDate = getDate(i * 3, date);
           var id = newDate[1] + "-" + newDate[0];
           
           if(newDate[0] == oldDate[0] && newDate[1] == oldDate[1])
           {
               return;
           } else if ($('#calendar').find('#' + id).parent().find('.titles').length)
           {
               setDisplay(id);
           } else
           {
               return;
           }
       }
   }

}

function setDisplay(id) { 

   var height = (($('#pop_up_display').height() / 100) * $(window).height()) - 40;
   var description = $('#calendar').find('#' + id).parent().find('.details').html();
   var titleText = $('#calendar').find('#' + id).parent().find('.titles').attr('alt');
   window.location.hash = titleText;
$('#pop_up_content').html('

' + titleText + '

' + description); 
   if($('.pop_up_controls').length == 0)
   {
$('
<a href="#" onclick="prevDate(); return false;"><< Previous</a>
<a href="#" onclick="nextDate(); return false;">Next >></a>
').insertAfter('#pop_up_content'); 
   }

} /* function nextDate() { 

   alert("Next Date");
   
   return false;

}

  • /

function getDate(i, date) { 

   var dateTemp = new Array();
   
   var day = new Number(date[0].replace("#", ""));
   var month = new Number(date[1]);
   
   if((month == 6) && ((day + i) > 30))
   {
       month += i; day = 1;
   } else if ((month == 6) && ((day + 1) < 1))
   {
       // do nothing
   } else if((month == 7) && ((day + i) > 31))
   {
       month += i; day = 1;
   } else if((month == 7) && ((day + i) < 1))
   {
       month += i; day = 30;
   } else if((month == 8) && ((day + i) > 31))
   {
       month += i; day = 1;
   } else if((month == 8) && ((day + i) < 1))
   {
       month += i; day = 31;
   } else if((month == 9) && ((day + i) > 30))
   {
       // Do nothing
   } else if((month == 9) && ((day + i) < 1))
   {
       month += i; day = 31;
   } else 
   {
       day += i;
   }
   
   dateTemp[0] = day;
   dateTemp[1] = month;
   
   return dateTemp;

}

Retrieved from "http://2013.igem.org/Team:Newcastle/script/calendar.js"