Team:Gothenburg/Calendar

From 2014.igem.org

(Difference between revisions)
(More testing)
Line 5: Line 5:
     <head>
     <head>
         <link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Newcastle/CSS/calendar?action=raw&ctype=text/css" />
         <link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Newcastle/CSS/calendar?action=raw&ctype=text/css" />
-
        <script src="https://2013.igem.org/Team:Newcastle/script/calendar.js?action=raw&ctype=text/javascript" type="text/javascript"> </script>
+
 +
<script>
 +
 +
$(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('<h2>' + titleText + '</h2>' + description);
 +
       
 +
        if($('.pop_up_controls').length == 0)
 +
        {
 +
            $('<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');
 +
        }
 +
       
 +
        $('#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('<h2>' + titleText + '</h2>' + description);
 +
           
 +
            if($('.pop_up_controls').length == 0)
 +
            {
 +
                $('<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');
 +
            }
 +
           
 +
            $('#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 = '<div class="titles"><a href="#' + dateDisp + '" alt="' + dateDisp + '">' + tempTitles + '</a><div class="details">' + tempDetails + '</div></div>';
 +
var dateHTML = '<div class="titles" alt="' + dateDisp + '">' + tempTitles + '<div class="details">' + tempDetails + '</div></div>';
 +
$('#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('<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;
 +
}
 +
 +
</script>
<style>
<style>

Revision as of 11:08, 31 July 2014

TemplateUp

June

Mon Tue Wed Thu Fri Sat Sun
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
 
 
 
 

July

Sun Mon Tue Wed Thu Fri Sat
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 

August

Sun Mon Tue Wed Thu Fri Sat
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

September

Sun Mon Tue Wed Thu Fri Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
 
 
 

Retrieved from "http://2014.igem.org/Team:Gothenburg/Calendar"