Team:SYSU-Software/notebook.js

From 2013.igem.org

Revision as of 14:59, 26 September 2013

$(document).ready(function() {

   var data = [{
       time: "10th Mar.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Recruitment of Team Member', 'Promulgation and Seminar', 'Interview with Applicants ', 'Kick-off Meeting']
   }, {
       time: "1st Apr.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Project Start-up', 'Literature Review of Synthetic Biology', 'Model Preparation', 'Logo Design', 'Wiki Page Initialization', 'Wiki Headers, Footers and Links', 'Wiki Content', 'Wiki Content and Framework', 'Software Programming Framework Construction']
   }, {
       time: "1st May.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Topic Selection', 'Paticipation in the iGEM seminar held by Beijing Genomics Institute', 'Document of Regulated Promoter', 'Selection of Topic']
   }, {
       time: "1st Jun.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['School Final Examination Month', 'Programing', 'Document for Plasmid assembling Experiment', 'Game Document']
   }, {
       time: "1st July.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Front end', 'Interaction Document', 'Programming', 'Game', 'Design of Wiki Page', 'Core Part of Modeling', 'Biotic Experiment']
   }, {
       time: "1st Aug.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Back end and Interface', 'Database Development', 'Computation of Experssion Rate', 'Front end Document Version 2.0', 'Back end Document', 'Front end UI Design', 'Back end Demo,12 days', 'Full Version of Modeling', 'Front end Graphical Interface Update', 'Data Collection']
   }, {
       time: "5th Aug.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Human Practice', 'Team T-shirt Initial Design', 'Full Version of Game Demo', 'Team T-shirt Final Design', 'Final Version of the Game', 'Toys', 'Counter Promotion', 'Promulgation and Seminar', 'Inviting Other Teams to Use', 'Wiki Documents and Materials', 'Team Photo Taking']
   }, {
       time: "1st Sep.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Debug and Modify', 'Model Demostration', 'Experimental Verification', 'Software Debugging']
   }, {
       time: "21st Sep.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png',
       content: ['Preparation for the Competition', 'Powerpoint', 'Poster', 'Logistics', 'Software Final Debugging']
   }];

   renderTimeLine(data);

   $("li > a").click(function(e) {
       e.preventDefault();

       var id = $(this).attr('href').slice(1, $(this).attr('href').size);

       var scrollTop = $('#' + id).offset().top;
       var curPos = $(window).scrollTop();

       var step = Math.abs(scrollTop - curPos) / 200 ;
       var tid = setInterval(function() {
           if (curPos < scrollTop - 14) {
               curPos += step;
               window.scrollTo(0, curPos);
           } else if (curPos > scrollTop + 14) {
               curPos -= step;
               window.scrollTo(0, curPos);
           } else if (curPos < scrollTop + 14 || curPos > scrollTop - 14){
               window.scrollTo(0, scrollTop);
               clearInterval(tid);
           } 
       }, 0.01);
   });

   $("#detail > #detail-block > li").css('height', $(window).height() + 'px');

   $(window).scroll(function() {
       var scrollTop = $(window).scrollTop();

       if (scrollTop <= 900) {
           $("#notebook").css({
               'position': 'fixed',
               'top': '150px'
           });
           $("#detail-timeline").css({
               'position': 'relative'
           });
       } else if (scrollTop > 900 && scrollTop <= 1140) {
           $("#notebook").css({
               'position': 'relative'
           });
           $("#detail-timeline").css({
               'position': 'relative'
           });
       } else if (scrollTop > 1140) {
           $("#notebook").css({
               'position': 'relative'
           });

           $("#detail-timeline").css({
               'position': 'fixed',
               'top': '50%',
               'margin-top': '-301px'
           });
       }

       var idx = (scrollTop - 1336) / $(window).height();
       $("#detail-timeline li.right a").css('color', 'white');
       $("#detail-timeline li.right a").eq(idx).css('color', 'red');
   });

});

function renderTimeLine(data) {

   for (var i = 0; i < data.length; i++) {
       createBlock(data[i], i);
   }

   function createBlock(itemData, idx) {

       var img = $("<img src=\"" + itemData.picurl + "\">"),

           span = $("");

       for (var i = 0; i < itemData.content.length; i++) {
           span.append(itemData.content[i] + "
");
       }

       left.append(img);
       right.append(title);
       right.append(span);
       block.append(left);
       block.append(right);

       $("#detail-block").append(block);
   }