Team:Heidelberg/js/notebook

From 2014.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 1: Line 1:
-
var projects = {
+
var selectedSubproject = 'general';
-
DNMT1: "DNMT1 description",
+
-
LOV: "LOV Domain description",
+
-
Lyso: "Lysozyme description",
+
-
Xyla: "Xylanase description",
+
-
Toolbox: "Toolbox description",
+
-
General: "General description",
+
-
};
+
scrollToElement = function(id){
scrollToElement = function(id){
Line 12: Line 5:
}
}
-
updateToTimestamp = function(timestamp) {
+
var currentTimestamp;
-
console.log("Updating to Timestamp: ", timestamp);
+
 
-
var $week = $('#innerWrapper .'+selectedProject).filter(function(){
+
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);
return ($(this).data("timestamp") <= timestamp) && (timestamp < $(this).data("timestamp")+604800);
}).first();
}).first();
-
$('#innerWrapper .'+selectedProject).removeClass('active');
+
$('#innerWrapper .'+selectedSubproject).removeClass('active');
$('#outerWrapper').stop(true);
$('#outerWrapper').stop(true);
$week.addClass('active');
$week.addClass('active');
-
$('#outerWrapper').animate({scrollTop: ($week.offset().top - $('#innerWrapper').offset().top)-20}, 1500, "easeInOutCubic");
+
if ($week.offset()) $('#outerWrapper').animate({scrollTop: ($week.offset().top - $('#innerWrapper').offset().top)-20}, 1500, "easeInOutCubic");
var $month = $('.month').filter(function(){
var $month = $('.month').filter(function(){
return $(this).data("timestamp") <= timestamp;
return $(this).data("timestamp") <= timestamp;
Line 27: Line 23:
$month.addClass('active');
$month.addClass('active');
-
setDate(timestamp);
+
if (updateGraph) scrollToDate(timestamp);
}
}
var viewModel = new (function () {
var viewModel = new (function () {
var self = this;
var self = this;
-
self.projects = ['DNMT1', 'LOV', 'Lyso', 'Xyla', 'Toolbox', 'General']
+
self.loading = ko.observable(true);
-
self.selected = ko.observable('General');
+
-
 
+
self.experiment = ko.observable();
self.experiment = ko.observable();
self.protocols = protocols;
self.protocols = protocols;
Line 41: Line 35:
var $viewExperimentModal;
var $viewExperimentModal;
$(function () {
$(function () {
 +
currentTimestamp = firstDate;
 +
$('#currentDate').text(formatDate(new Date(firstDate*1000)));
$(".titles span").click(function(event){
$(".titles span").click(function(event){
$('.titles span').removeClass("active");
$('.titles span').removeClass("active");
$(event.target).addClass("active");
$(event.target).addClass("active");
-
$('#project-description').html(projects[event.target.id]);
+
setSubproject(({ general: 'General', 'toolbox': 'Toolbox', lov: 'LOV', dnmt1: 'DNMT1', 'linker-screening': 'Lyso', 'xylanase': 'Xyla'})[event.target.id]);
-
selectedProject = event.target.id;
+
selectedSubproject = event.target.id;
-
console.log(selectedProject);
+
$('#innerWrapper > :not(.'+selectedSubproject).fadeOut();
-
$('#innerWrapper > :not(.'+selectedProject).fadeOut();
+
$('#innerWrapper > .'+selectedSubproject).fadeIn();
-
$('#innerWrapper > .'+selectedProject).fadeIn();
+
});
-
});
+
$(".month").click(function(event){
$(".month").click(function(event){
Line 67: Line 62:
var detailedJSON, detailedJSONName;
var detailedJSON, detailedJSONName;
function showExperiment(date, id) {
function showExperiment(date, id) {
-
viewModel.experiment(null);
+
viewModel.loading(true);
$viewExperimentModal.modal();
$viewExperimentModal.modal();
Line 73: Line 68:
if (file == detailedJSONName) {
if (file == detailedJSONName) {
viewModel.experiment(detailedJSON[id]);
viewModel.experiment(detailedJSON[id]);
 +
viewModel.loading(false);
} else {
} else {
(function (file) {
(function (file) {
Line 79: Line 75:
detailedJSONName = file;
detailedJSONName = file;
viewModel.experiment(data[id]);
viewModel.experiment(data[id]);
 +
viewModel.loading(false);
});
});
})(file);
})(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); } }

Retrieved from "http://2014.igem.org/Team:Heidelberg/js/notebook"