Team:Heidelberg/js/notebook
From 2014.igem.org
(26 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | var | + | var selectedSubproject = 'general'; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
scrollToElement = function(id){ | scrollToElement = function(id){ | ||
- | $('#outerWrapper').animate({scrollTop: $('#'+id).offset().top - $('#innerWrapper').offset().top}, 1500, "easeInOutCubic"); | + | $('#outerWrapper').animate({scrollTop: $('#'+id).offset().top - $('#innerWrapper').offset().top}, 1500, "easeInOutCubic"); |
} | } | ||
+ | |||
+ | var currentTimestamp; | ||
updateToTimestamp = function(timestamp, updateGraph) { | updateToTimestamp = function(timestamp, updateGraph) { | ||
- | + | currentTimestamp = timestamp; | |
- | + | $('#currentDate').text(formatDate(new Date(timestamp*1000))); | |
- | + | var $week = $('#innerWrapper .'+selectedSubproject).filter(function(){ | |
- | + | return ($(this).data("timestamp") <= timestamp) && (timestamp < $(this).data("timestamp")+604800); | |
- | + | }).first(); | |
- | + | $('#innerWrapper .'+selectedSubproject).removeClass('active'); | |
- | + | $('#outerWrapper').stop(true); | |
- | + | $week.addClass('active'); | |
- | + | if ($week.offset()) $('#outerWrapper').animate({scrollTop: ($week.offset().top - $('#innerWrapper').offset().top)-20}, 1500, "easeInOutCubic"); | |
- | + | var $month = $('.month').filter(function(){ | |
- | + | return $(this).data("timestamp") <= timestamp; | |
- | + | }).last(); | |
- | + | $('.month').removeClass('active'); | |
+ | $month.addClass('active'); | ||
- | + | if (updateGraph) scrollToDate(timestamp); | |
- | + | ||
} | } | ||
+ | var viewModel = new (function () { | ||
+ | var self = this; | ||
+ | self.loading = ko.observable(true); | ||
+ | self.experiment = ko.observable(); | ||
+ | self.protocols = protocols; | ||
+ | })(); | ||
+ | var $viewExperimentModal; | ||
+ | $(function () { | ||
+ | currentTimestamp = firstDate; | ||
+ | $('#currentDate').text(formatDate(new Date(firstDate*1000))); | ||
+ | $(".titles span").click(function(event){ | ||
+ | $('.titles span').removeClass("active"); | ||
+ | $(event.target).addClass("active"); | ||
+ | setSubproject(({ general: 'General', 'toolbox': 'Toolbox', lov: 'LOV', dnmt1: 'DNMT1', 'linker-screening': 'Lyso', 'xylanase': 'Xyla'})[event.target.id]); | ||
+ | selectedSubproject = event.target.id; | ||
+ | $('#innerWrapper > :not(.'+selectedSubproject).fadeOut(); | ||
+ | $('#innerWrapper > .'+selectedSubproject).fadeIn(); | ||
+ | }); | ||
- | + | $(".month").click(function(event){ | |
- | + | event.preventDefault(); | |
- | + | updateToTimestamp($(this).data("timestamp"), true); | |
- | + | return false; | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $(".weekentry").click(function() { | |
- | + | updateToTimestamp($(this).data("timestamp"), true); | |
- | + | }); | |
- | + | ko.applyBindings(viewModel); | |
- | + | $viewExperimentModal = $('#viewExperimentModal'); | |
- | + | ||
}); | }); | ||
+ | |||
+ | var detailedJSON, detailedJSONName; | ||
+ | function showExperiment(date, id) { | ||
+ | viewModel.loading(true); | ||
+ | $viewExperimentModal.modal(); | ||
+ | |||
+ | var file = getJSONForDate(date).detailedFile; | ||
+ | if (file == detailedJSONName) { | ||
+ | viewModel.experiment(detailedJSON[id]); | ||
+ | viewModel.loading(false); | ||
+ | } else { | ||
+ | (function (file) { | ||
+ | $.getJSON(file, function (data) { | ||
+ | detailedJSON = data; | ||
+ | detailedJSONName = file; | ||
+ | viewModel.experiment(data[id]); | ||
+ | viewModel.loading(false); | ||
+ | }); | ||
+ | })(file); | ||
+ | } | ||
+ | } |
Latest revision as of 23:33, 17 October 2014
var selectedSubproject = 'general';
scrollToElement = function(id){ $('#outerWrapper').animate({scrollTop: $('#'+id).offset().top - $('#innerWrapper').offset().top}, 1500, "easeInOutCubic"); }
var currentTimestamp;
updateToTimestamp = function(timestamp, updateGraph) { currentTimestamp = timestamp; $('#currentDate').text(formatDate(new Date(timestamp*1000))); var $week = $('#innerWrapper .'+selectedSubproject).filter(function(){ return ($(this).data("timestamp") <= timestamp) && (timestamp < $(this).data("timestamp")+604800); }).first(); $('#innerWrapper .'+selectedSubproject).removeClass('active'); $('#outerWrapper').stop(true); $week.addClass('active'); if ($week.offset()) $('#outerWrapper').animate({scrollTop: ($week.offset().top - $('#innerWrapper').offset().top)-20}, 1500, "easeInOutCubic"); var $month = $('.month').filter(function(){ return $(this).data("timestamp") <= timestamp; }).last(); $('.month').removeClass('active'); $month.addClass('active');
if (updateGraph) scrollToDate(timestamp); }
var viewModel = new (function () { var self = this; self.loading = ko.observable(true); self.experiment = ko.observable(); self.protocols = protocols; })();
var $viewExperimentModal; $(function () { currentTimestamp = firstDate; $('#currentDate').text(formatDate(new Date(firstDate*1000))); $(".titles span").click(function(event){ $('.titles span').removeClass("active"); $(event.target).addClass("active"); setSubproject(({ general: 'General', 'toolbox': 'Toolbox', lov: 'LOV', dnmt1: 'DNMT1', 'linker-screening': 'Lyso', 'xylanase': 'Xyla'})[event.target.id]); selectedSubproject = event.target.id; $('#innerWrapper > :not(.'+selectedSubproject).fadeOut(); $('#innerWrapper > .'+selectedSubproject).fadeIn(); });
$(".month").click(function(event){ event.preventDefault(); updateToTimestamp($(this).data("timestamp"), true); return false; });
$(".weekentry").click(function() { updateToTimestamp($(this).data("timestamp"), true); });
ko.applyBindings(viewModel); $viewExperimentModal = $('#viewExperimentModal'); });
var detailedJSON, detailedJSONName; function showExperiment(date, id) { viewModel.loading(true); $viewExperimentModal.modal();
var file = getJSONForDate(date).detailedFile; if (file == detailedJSONName) { viewModel.experiment(detailedJSON[id]); viewModel.loading(false); } else { (function (file) { $.getJSON(file, function (data) { detailedJSON = data; detailedJSONName = file; viewModel.experiment(data[id]); viewModel.loading(false); }); })(file); } }