Team:SYSU-Software/notebook.js

From 2013.igem.org

Revision as of 03:17, 28 September 2013 by Rathinho (Talk | contribs)

$(document).ready(function() {

   var data = [{
       time: "10th Mar.",
       picurl: 'https://static.igem.org/mediawiki/2013/8/8c/Cast_TEDXPOSTER6_asdfsadfdsf.png',
       content: ['Recruitment of Team Member -- 10th,Mar. to 30th,Mar.', 'Promulgation and Seminar -- 10th,Mar. to 10th,Mar.', 'Interview with Applicants -- 18th,Mar. to 18th,Mar.', 'Kick-off Meeting -- 30th,Mar to 30th,Mar']
   }, {
       time: "1st Apr.",
       picurl: 'https://static.igem.org/mediawiki/2013/thumb/e/e5/Cast_modeling_manuscript_12151513o324.jpg/424px-Cast_modeling_manuscript_12151513o324.jpg',
       content: ['Project Start-up -- 1st,Apr. to 30th,Apr.', 'Literature Review of Synthetic Biology -- 1st,Apr. to 30th,Apr.', 'Model Preparation -- 1st,Apr. to 30th,Apr.', 'Logo Design -- 1st,Apr. to 15th,Apr.', 'Wiki Page Initialization -- 1st,Apr. to 15th,Apr.', 'Wiki Headers, Footers and Links -- 16th,Apr. to 21th,Apr.', 'Wiki Content -- 23th,Apr. to 23th,Apr.', 'Wiki Content and Framework -- 23th,Apr. to 29th,Apr.', 'Software Programming Framework Construction -- 1st,Apr. to 30th,Apr.']
   }, {
       time: "1st May.",
       picurl: 'https://static.igem.org/mediawiki/2013/c/cb/CAST_MG_598xxxx5.jpg',
       content: ['Topic Selection -- 1st,May. to 30th,May.', 'Paticipation in the iGEM seminar held by Beijing Genomics Institute -- 26th,May. to 26th,May.', 'Document of Regulated Promoter -- 7th,May. to 12th,May.', 'Selection of Topic -- 1st,May. to 30th,May.']
   }, {
       time: "1st Jun.",
       picurl: 'https://static.igem.org/mediawiki/2013/6/6c/Sysu_cast_adasdasdadadadLOGO.png',
       content: ['School Final Examination Month -- 1st,Jun. to 30th,Jun.', 'Programing -- 1st,Jun. to 15th,Jun.', 'Document for Plasmid assembling Experiment -- 25th,May. to 2nd,Jun.', 'Game Document -- 25th,Jun. to 27th,Jun.']
   }, {
       time: "1st July.",
       picurl: 'https://static.igem.org/mediawiki/2013/b/bd/Wiki_ad_cast12453151234.png',
       content: ['Front end -- 1st,July. to 31th,July.', 'Interaction Document -- 1st,July. to 8th,July.', 'Programming -- 9th,July. to 1st,Aug.', 'Game -- 8th,July. to 24th,July.', 'Design of Wiki Page -- 8th,July. to 23th,July.', 'Core Part of Modeling -- 1st,July. to 20th,July.', 'Biotic Experiment -- 25th,July. to 3rd,Aug.']
   }, {
       time: "1st Aug.",
       picurl: 'https://static.igem.org/mediawiki/2013/6/6c/Sysu_cast_adasdasdadadadLOGO.png',
       content: ['Back end and Interface -- 1st,Aug. to 31th,Aug.', 'Database Development -- 2nd,Aug. to 2nd,Aug.', 'Computation of Experssion Rate -- 3rd,Aug. to 3rd,Aug.', 'Front end Document Version 2.0 -- 6th,Aug. to 6th,Aug.', 'Back end Document -- 1st,Aug. to 7th,Aug.', 'Front end UI Design -- 3rd,Aug. to 10th,Aug.', 'Back end Demo,12 days -- 4th,Aug. to 15th,Aug.', 'Full Version of Modeling -- 4th,Aug. to 15th,Aug.', 'Front end Graphical Interface Update -- 6th,Aug. to 31th,Aug.', 'Data Collection -- 16th,Aug. to 31th,Aug.']
   }, {
       time: "5th Aug.",
       picurl: 'https://static.igem.org/mediawiki/2013/7/71/QQ%E5%9B%BE%E7%89%8720130928110810cast.jpg',
       content: ['Human Practice -- 5th,Aug. to 20th.Sep.', 'Team T-shirt Initial Design -- 5th,Aug. to 15th,Aug.', 'Full Version of Game Demo -- 5th,Aug. to 15th,Aug.', 'Team T-shirt Final Design -- 16th,Aug. to 25th,Aug.', 'Final Version of the Game -- 16th,Aug. to 25th,Aug.', 'Toys -- 10th,Aug. to 31th,Aug.', 'Counter Promotion -- 10th,Sep. to 20th,Sep.', 'Promulgation and Seminar -- 10th,Sep. to 20th,Sep.', 'Inviting Other Teams to Use -- 10th,Sep. to 20th,Sep.', 'Wiki Documents and Materials -- 1st,Sep. to 20th,Sep.', 'Team Photo Taking -- 10th,Sep. to 10th,Sep.']
   }, {
       time: "1st Sep.",
       picurl: 'https://static.igem.org/mediawiki/2013/c/c7/IMG_20130924_222916.jpg',
       content: ['Debug and Modify -- 1st,Sep. to 19th,Sep.', 'Model Demostration -- 1st,Sep. to 19th,Sep.', 'Experimental Verification -- 1st,Sep. to 19th,Sep.', 'Software Debugging -- 1st,Sep. to 19th,Sep.']
   }, {
       time: "21st Sep.",
       picurl: 'https://static.igem.org/mediawiki/2013/2/2f/IMG_20130923_192421.jpg',
       content: ['Preparation for the Competition -- 21th,Sep to 3rd,Oct.', 'Powerpoint -- 21th,Sep to 3rd,Oct.', 'Poster -- 21th,Sep to 3rd,Oct.', 'Logistics -- 21th,Sep to 3rd,Oct.', 'Software Final Debugging -- 21th,Sep to 3rd,Oct.']
   }];


   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(parseInt(idx)).css('color', 'red');
   });

});


function renderTimeLine(data) {

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


   function createBlock(itemData, idx) {
var timeline = $("
  • </li>"), aLabel = $("<a href=\"#time-" + idx + "\"></a>"); aLabel.text(itemData.time); timeline.append(aLabel); timeline.css('top', (58 * idx) + 'px'); $("#detail-timeline").append(timeline); var block = $("
  • </li>"), left = $("
    "), right = $("
    ");
           var img = $("<img src=\"" + itemData.picurl + "\">"),
    
    title = $("

    " + itemData.time + "

    "), ul = $("
      ");
             for (var i = 0; i < itemData.content.length; i++) {
      
      ul.append("
    • " + itemData.content[i] + "</li>"); } left.append(img); right.append(title); right.append(ul); block.append(left); block.append(right); $("#detail-block").append(block); } }