Difference between revisions of "Team:Slovenia/libraries/custom-js"

Line 1: Line 1:
−
{{Slovenia}}
+
function reloader() {
−
<html>
+
    try {
−
<head>
+
        console.log('start');
−
    <title>Home</title>
+
        $('.ui.sticky.global').sticky({
−
    <link rel="stylesheet"
+
            context: '#context',
−
          href="//2016.igem.org/Team:Slovenia/libraries/semantic-min-css?action=raw&ctype=text/css">
+
            offset: 16
−
    <script type="text/javascript"
+
        });
−
             src="//2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript"></script>
+
        $('.ui.sticky.image').sticky({
−
    <link rel="stylesheet" type="text/css" href="//2016.igem.org/Team:Slovenia/libraries/custom-css?action=raw&ctype=text/css">
+
            context: '#context',
−
    <script type="text/javascript" src="//2016.igem.org/Team:Slovenia/libraries/custom-js?action=raw&ctype=text/javascript"></script>
+
            offset: 27
−
    <script type="text/javascript"
+
        });
−
             src="//2016.igem.org/Team:Slovenia/libraries/zitator-js?action=raw&ctype=text/javascript"></script>
+
        $('.ui.sticky.text.menu').sticky({
−
    <script type="text/javascript"
+
            context: '#context',
−
             src="https://2016.igem.org/Team:Slovenia/libraries/bibtexparse-js?action=raw&ctype=text/javascript"></script>
+
            offset: 200
−
<!-- MathJax (LaTeX for the web) -->
+
        });
−
    <script type="text/x-mathjax-config">
+
        $('.ui.sticky.text').sticky({
−
        MathJax.Hub.Config({
+
            context: '#context',
−
            tex2jax: {
+
            offset: 200
−
                inlineMath: [['$', '$'], ['\\(', '\\)']]
+
        });
−
            },
+
        $('.image_div > img').visibility({
−
            jax: ["input/TeX","output/SVG"],
+
            type: 'image',
−
             TeX: {
+
             transition: 'fade in',
−
                 extensions: ["mhchem.js"],
+
            duration: 500
−
                 equationNumbers: {autoNumber: "all" },
+
        });
−
                 Macros: {
+
        $('.teamimg').hover(function () {
−
                  goodbreak: '\\mmlToken{mo}[linebreak="goodbreak"]{}',
+
            var width = $(this).outerWidth() / 2;
−
                  badbreak: ['\\mmlToken{mo}[linebreak="badbreak"]{#1}',1],
+
            $(this).find('.left').animate({right: width}, {queue: false, duration: 300});
−
                  nobreak: ['\\mmlToken{mo}[linebreak="nobreak"]{#1}',1],
+
            $(this).find('.right').animate({left: width}, {queue: false, duration: 300});
−
                  invisibletimes: ['\\mmlToken{mo}{\u2062}']
+
        }, function () {
 +
            $(this).find('.left').animate({right: 0}, {queue: false, duration: 300});
 +
            $(this).find('.right').animate({left: 0}, {queue: false, duration: 300});
 +
        });
 +
        $(function () {
 +
            // The parameter are the selector for the container(s) of text in which you want replacement
 +
            // and a URL pointing to your bibfile - mind the same origin policy...
 +
            var zitator = new Zitator(".citing", "//2016.igem.org/wiki/images/5/53/T--Slovenia--references.txt");
 +
            zitator.zitiere();
 +
        });
 +
        function isScrolledIntoView(elem) {
 +
            var docViewTop = $(window).scrollTop();
 +
            var docViewBottom = docViewTop + $(window).height() - $("#menucomb").height();
 +
 
 +
            var elemTop = $(elem).offset().top;
 +
            var elemBottom = elemTop + $(elem).height();
 +
 
 +
            if (elemTop >= docViewTop) {
 +
                return true;
 +
            }
 +
            else if (elemBottom >= docViewBottom) {
 +
                return true;
 +
            }
 +
            return false; // || elemTop >= docViewTop) ;
 +
        }
 +
 
 +
        function clearStyleOfSideMenu() {
 +
console.log("calling a function");
 +
             var id = null;
 +
            $("span.section").each(function () {
 +
                var id = this.id;
 +
console.log(id);
 +
                var selector = 'a[href*="#'.concat(id).concat('"]');
 +
                $(selector).css("color", "");
 +
             });
 +
 +
$("span.section").each(function() {
 +
var ident = this.id;
 +
var parent = (this.parentNode).parentNode;
 +
if(isScrolledIntoView(parent)) {
 +
var selector = 'a[href*="#'.concat(ident).concat('"]');
 +
$(selector).css("color", "#DB2828");
 +
return false;
 +
}
 +
});
 +
 +
/*var color = true;
 +
             $(".section").each(function () {
 +
                 //clear each parent
 +
                var id = this.id;
 +
                var selector = 'a[href*="#'.concat(id).concat('"]');
 +
                 if (isScrolledIntoView($(this).parent().parent())) {
 +
                    // nastavi barvo trenutni sekcij
 +
if(color) {
 +
 
 +
console.log("section is found");
 +
color = false;
 +
return false; //break from function
 +
}
 +
                 }
 +
            });*/
 +
        }
 +
 
 +
        $(document).ready(function () {
 +
                clearStyleOfSideMenu();
 +
                $(window).scroll(function () {
 +
                    clearStyleOfSideMenu();
 +
                });
 +
            }
 +
        );
 +
        $(".menuItem").mouseenter(
 +
            function () {
 +
                var loc = window.location.href;
 +
                var defaultItem;
 +
                var parent;
 +
                $(".submenu").each(function () {
 +
                        var context = this;
 +
                        $("a", context).each(function () {
 +
                            if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                                defaultItem = $(context).attr("id");
 +
                                parent = $("#".concat(defaultItem.replace("Submenu", "")));
 +
                            }
 +
                        });
 +
                    }
 +
                );
 +
                $(".ui.simple.item.menuItem a").each(function () {
 +
                    if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                        parent = $($(this).parents('.ui.simple.item.menuItem'));
 +
                        defaultItem = (parent.attr('id')).concat("Submenu");
 +
                        console.log(defaultItem);
 +
                    }
 +
                });
 +
                defaultItem = document.getElementById(defaultItem);
 +
                clearElements();
 +
                var submenu = document.getElementById(this.id.concat("Submenu"));
 +
                var submenuText = document.getElementById("SecondarySubmenu");
 +
                if (submenuText.innerHTML != submenu.innerHTML) {
 +
                    this.className = "ui simple active item menuItem";
 +
                    submenuText.innerHTML = submenu.innerHTML;
 +
                }
 +
                else {
 +
                    parent.attr("class", "ui simple active item menuItem");
 +
                    submenuText.innerHTML = defaultItem.innerHTML;
 
                 }
 
                 }
−
             },
+
             }
−
            CommonHTML: { linebreaks: { automatic: true, width: "75% container" } },
+
        );
−
            "HTML-CSS": { linebreaks: { automatic: true, width: "68% container" }},
+
        $("#menucomb").mouseleave(function () {
−
             SVG: { linebreaks: { automatic: true, width: "200% container" }}
+
                setDefaultMenu();
 +
            }
 +
        );
 +
    } catch (e) {
 +
        console.log('startReloading');
 +
        $.getScript("https://2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript", function () {
 +
             console.log('success');
 +
            reloader();
 
         });
 
         });
−
    </script>
+
        console.log('endReloading');
−
<script type="text/javascript" async
+
     }
−
            src="//2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+
}
−
     </script>
+
$(document).ready(injectHeader);
−
</head>
+
$(document).ready(reloader);
−
<body>
+
function enumerateKeys(object) {
−
<style>
+
    var numberPairs = {};
−
.container {
+
    var objectPairs = {};
−
position: relative;
+
    var number = 0;
−
}
+
−
.module1 {
+
−
position: absolute;
+
−
top: 220px;
+
−
left: 10px;
+
−
}
+
−
.module2 {
+
−
position: absolute;
+
−
bottom: 90px;
+
−
left: 220px;
+
−
}
+
−
.module3 {
+
−
position: absolute;
+
−
top: 180px;
+
−
right: 350px;
+
−
}
+
−
.module4 {
+
−
position: absolute;
+
−
bottom: 15px;
+
−
right: 380px;
+
−
}
+
−
+
−
/* Popup container - can be anything you want */
+
−
.popup {
+
−
display: inline-block;
+
−
cursor: pointer;
+
−
-webkit-user-select: none;
+
−
-moz-user-select: none;
+
−
-ms-user-select: none;
+
−
user-select: none;
+
−
padding: 10px 10px;
+
−
}
+
  
−
/* The actual popup */
+
    var matches = document.body.querySelectorAll(object + '[data-ref]');
−
.popup .popuptext {
+
    while (number < matches.length) {
−
padding: 10px 10px;
+
        var refName = matches[number].dataset.ref;
−
visibility: hidden;
+
        if (refName in numberPairs) {
−
width: 350px;
+
            console.log(refName, "This label has already been assigned.");
−
background-color: #555;
+
        } else {
−
color: #fff;
+
            numberPairs[number + 1] = matches[number];
−
text-align: center;
+
            objectPairs[refName] = number + 1;
−
border-radius: 6px;
+
        }
−
position: absolute;
+
        number++;
−
z-index: 100;
+
    }
−
font-size: 14px;
+
    return [numberPairs, objectPairs, number];
−
line-height: 20px;
+
}
−
}
+
  
−
/* Toggle this class - hide and show the popup */
+
function enumerate() {
−
.popup .show {
+
    var tables = enumerateKeys('table');
−
visibility: visible;
+
    var figures = enumerateKeys('figure');
−
-webkit-animation: fadeIn 1s;
+
−
animation: fadeIn 1s;
+
−
}
+
  
−
/* Add animation (fade in the popup) */
+
    var maximum = Math.max(tables[2], figures[2]);
−
@-webkit-keyframes fadeIn {
+
−
from {opacity: 0;}
+
−
to {opacity: 1;}
+
−
}
+
  
−
@keyframes fadeIn {
+
    for (var number = 1; number <= maximum; number++) {
−
from {opacity: 0;}
+
        if (number in tables[0]) {
−
to {opacity:1 ;}
+
            $(tables[0][number]).children('caption').prepend("Table " + number + ": ")
−
}
+
        }
−
.container img{
+
        if (number in figures[0]) {
−
display: block;
+
            $(figures[0][number]).children('figcaption').prepend("Figure " + number + ": ")
−
margin-left: auto;
+
        }
−
margin-right: auto;
+
    }
−
}
+
−
+
  
−
.corners {
+
    $(this).find('ref').each(function () {
−
border-radius: 15px;
+
        var label = $(this).text();
−
border: 2px solid #000000;
+
        $(this).click(function (event) {
−
padding: 15px;
+
            event.preventDefault();
−
margin-left:15px;
+
        });
−
margin-bottom:15px;
+
        if (label in tables[1]) {
−
}
+
            var number = tables[1][label];
−
+
            $(this).html("<a href=''> Table " + tables[1][label] + " </a>");
−
</style>
+
            $(this).on('click', function () {
−
<script>
+
                window.scroll(0, $(tables[0][number]).offset().top - 150);
−
$( document ).ready(
+
            })
−
function() {
+
        } else {
−
var getImgs = function() {
+
            var number = figures[1][label];
−
var imgs = [];
+
            $(this).html("<a href=''>Figure " + figures[1][label] + "</a>");
−
$('img').each(function() {
+
            $(this).on('click', function () {
−
console.log("image detected");
+
                window.scroll(0, $(figures[0][number]).offset().top - 150);
−
var data = $(this).data('alt');
+
            })
−
imgs.push(data);
+
        }
−
});
+
    });
−
return imgs;
+
}
−
}
+
$(document).ready(enumerate);
−
var imgs = getImgs();
+
$(document).ready(setDefaultMenu);
−
//preload images
+
$(document).ready(function(){
−
var image = [];
+
$('.ui.accordion').accordion();
−
$.each(imgs, function(index) {
+
});
−
console.log("loading resource");
+
 
−
image[index] = new Image();
+
function resize(img) {
−
image[index].src = imgs[index];
+
    if (img.className.includes("medium")) {
−
});
+
        img.className = "ui big centered image";
−
}
+
img.parentElement.parentElement.setAttribute("align", "center");
−
);
+
img.parentElement.parentElement.setAttribute("data-property", img.parentElement.parentElement.style.cssText);
−
function loadImage(sourceImage, popupname) {
+
img.parentElement.parentElement.style = "clear: both";
−
console.log(sourceImage);
+
    }
−
var image = document.getElementById("projectScheme");
+
    else {
−
image.src = sourceImage;
+
img.parentElement.parentElement.setAttribute("align", "");
−
+
        img.className = "ui medium image";
−
//var rect = image.getBoundingClientRect();
+
img.parentElement.parentElement.style.cssText = img.parentElement.parentElement.getAttribute("data-property");
−
//console.log(rect.top, rect.right, rect.bottom, rect.left);
+
    }
−
+
//scroll to image, (if two images are floated and the right one is resised, then the image gets pushed down)
−
var popup = document.getElementById(popupname);
+
//var top = img.offsetTop;
−
//popup.style.top = ((rect.bottom - rect.top)/2).toString().concat("px");
+
console.log($(img).offset().top);
−
//popup.style.left =  ((rect.right - rect.left)/2).toString().concat("px");
+
console.log($("menucomb").height());
−
//console.log((rect.right - rect.left)/2, (rect.bottom - rect.top)/2);
+
$(window).scrollTop($(img).offset().top -  $(window).height()/2 + $(img).height()/2);
−
popup.classList.toggle('show');
+
}
−
}
+
 
−
</script>
+
function setDefaultMenu() {
 +
console.log("calling set default item");
 +
    clearElements();
 +
    var loc = window.location.href;
 +
    var defaultItem;
 +
    var parent;
 +
    $(".submenu").each(function () {
 +
            var context = this;
 +
            $(this).css("color", "#DB2828");
 +
            $(this).css("font-weight", "bold");
 +
            $("a", context).each(function () {
 +
console.log($(this).attr("href"));
 +
                if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                    defaultItem = $(context).attr("id");
 +
                    parent = $("#".concat(defaultItem.replace("Submenu", "")));
 +
                    $(this).css("color", "#DB2828");
 +
                    $(this).css("font-weight", "bold");
 +
                }
 +
            });
 +
 
 +
        }
 +
    );
 +
    $(".ui.simple.item.menuItem a").each(function () {
 +
        if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
            parent = $($(this).parents('.ui.simple.item.menuItem'));
 +
            defaultItem = (parent.attr('id')).concat("Submenu");
 +
        }
 +
    });
 +
 
 +
    var submenuText = document.getElementById("SecondarySubmenu");
 +
    defaultItem = document.getElementById(defaultItem);
 +
    parent.attr("class", "ui simple active item menuItem");
 +
    submenuText.innerHTML = defaultItem.innerHTML;
 +
}
 +
 
 +
function clearElements() {
 +
    var elements = document.getElementsByClassName("menuItem");
 +
    for (var i = 0; i < elements.length; i++) {
 +
        elements[i].className = "ui simple item menuItem";
 +
    }
 +
}
 +
 
 +
function injectHeader() {
 +
    console.log("Injecting header");
 +
    var menu = "<div class='submenu' id='projectSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Description' \
 +
  class='item'>Description</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Design' \
 +
  class='item'>Design</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Experiments' \
 +
  class='item'>Experiments</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Results' \
 +
  class='item'>Results</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Demonstrate' \
 +
  class='item'>Demonstration</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Proof' \
 +
  class='item'>Proof of Concept</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='partsSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 15%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Basic_Part' \
 +
  class='item'>Basic Part</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Composite_Part' \
 +
  class='item'>Composite part</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Part_Collection' \
 +
  class='item'>Part Collection</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='notebookSubmenu'> \
 +
<!-- this is notebook submenu --> \
 +
<div class='menu' style = 'position: absolute; right: 15%'>\
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook' class='item'>Log book</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook/Protocols' class='item'>Protocols</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook/InitialProposals' class='item'>Initial proposals</a> \
 +
</div>\
 +
</div> \
 +
<div class='submenu' id='societySubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 0'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Integrated_Practices' class='item'>Integrated Practices</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Engagement' \
 +
  class='item'>Education and Public Engagement</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Collaborations' \
 +
  class='item'>Collaboration</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Safety' \
 +
  class='item'>Safety</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='homeSubmenu'> \
 +
</div> \
 +
<div class='submenu' id='ideaSubmenu'> \
 +
<!-- this is idea submenu -->\
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Challenge' class='item'>Challenge</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Solution' class='item'>Solution</a> \
 +
</div>\
 +
</div> \
 +
<div class='submenu' id='mechanosensingSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Overview' class='item'>Overview</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Mechanosensitive_channels' class='item'>Mechanosensitive channels</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Gas_vesicles' class='item'>Gas vesicles</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/CaDependent_mediator' class='item'>Ca-dependent mediator</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='implementationSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 30%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Implementation/ProteaseInducible_secretion' class='item'>Protease inducible secretion</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Implementation/Touch_painting' class='item'>Touch painting</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Implementation/Impact' class='item'>Impact</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='proteaseSignallingSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Overview' class='item'>Overview</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Reporters' class='item'>Reporters</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Orthogonality' class='item'>Orthogonality</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Split_proteases' class='item'>Split proteases</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Light_dependent_mediator' class='item'>Light-dependent mediator</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Logic' class='item'>Logic</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='dryLabSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 30%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Software' class='item'>CaPTURE software</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Hardware' class='item'>Ultrasound controlling device</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Model' class='item'>Modeling of ultrasound</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/ModelLogic' class='item'>Modeling logic gates</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/CoiledCoilInteraction' class='item'>Coiled coil interaction model</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='teamSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 0'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Students' class='item'>Students</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Advisors' class='item'>Advisors</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Attributions' class='item'>Attributions</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Sponsors'  class='item'>Sponsors</a> \
 +
</div> \
 +
</div> \
 +
<div class='ui sticky global' id='menucomb'> \
 +
<div class='ui red secondary ten item pointing menu'> \
 +
<div class='ui simple item menuItem' id='home'> \
 +
<a href='https://2016.igem.org/Team:Slovenia' class='home'> \
 +
Home \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='idea'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Challenge' class='home'> \
 +
Idea \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='mechanosensing'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Overview' class='home'> \
 +
Mechano- <br>sensing \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='proteaseSignalling'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Overview' class='home'> \
 +
Protease<br /> signaling\
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='dryLab'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Software' class='home'> \
 +
Dry lab \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='implementation'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Implementation/ProteaseInducible_secretion' class='home'> \
 +
Implementation \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='parts' > \
 +
<a href='https://2016.igem.org/Team:Slovenia/Parts' class='home'> \
 +
Parts \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='notebook' > \
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook' class='home'> \
 +
Notebook \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='society'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/HP/Gold' class='home'> \
 +
Society \
 +
</a> \
 +
</div> \
 +
<div class='ui simple item menuItem' id='team'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Students' class='home'> \
 +
Team \
 +
</a> \
 +
</div> \
 +
</div> \
 +
  \
 +
<div class='ui secondary menu' id='SecondarySubmenu'> \
 +
</div> \
 +
</div>";
 +
    var contextDiv = document.getElementById("context");
 +
    contextDiv.innerHTML = menu.concat(contextDiv.innerHTML);
 +
}
 +
 
 +
$('.playGif').on('click', function () {
 +
    console.log("play detected");
 +
    var parent = $(this);
 +
    var parAlt = parent.attr('data-alt');
 +
    var parSrc = parent.attr('src');
 +
    parent.attr("src", parAlt).attr("data-alt", parSrc);
 +
});
 +
 
 +
function relativeCoordinates(img) {
 +
console.log("calling a function");
 +
console.log(img.width);
 +
var c1 = [74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62];
 +
var c2 =  [387, 125, 393, 283, 423, 316, 518, 190, 486, 120];
 +
var c3 = [528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71];
 +
var c4 = [393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319];
 +
 +
for(i = 0; i < c1.length; i++) {
 +
c1[i] = (c1[i]/(800.0));
 +
}
 
 
−
<div id="example">
+
}
−
<div class="pusher">
+
−
<div class="full height">
+
−
<div class="banana">
+
−
<a href = "//2016.igem.org/Team:Slovenia">
+
−
<img class="ui medium sticky image" src="//2016.igem.org/wiki/images/d/d1/T--Slovenia--logo.png">
+
−
</a>
+
−
<div class="ui vertical sticky text menu">
+
−
<a class="item" href="#intro" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Project</b>
+
−
</a>
+
−
<a class="item" href="#achievements" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Achievements</b>
+
−
</a>
+
−
<a class="item" href="#requirements" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Medal requirements</b>
+
−
</a>
+
−
<a class="item" href="//2016.igem.org/Team:Slovenia/Idea/Challenge">
+
−
<i class="chevron circle right icon"></i>
+
−
<b>Idea</b>
+
−
</a>
+
−
<span>
+
−
<br />
+
−
</span>
+
−
<img class = "ui large circular image" src="//2016.igem.org/wiki/images/c/cb/T--Slovenia--igemLogo.gif">
+
−
<p style="font-size:11px;">
+
−
The iGEM symbol was drawn with a glass rod letter by letter on engineered human cells and imaged by a camera.
+
−
Cells were transfected with constructs coding for the bacterial ion channel MscS, gas vesicles (GvpA and GvpC) and a Ca-dependent
+
−
cyclic split luciferase reporter.
+
−
</p>
+
−
</div>
+
−
+
−
</div>
+
−
<div class="article" id="context">
+
−
<!-- menu goes here -->
+
−
<!-- content goes here -->
+
−
<div class="main ui citing justified container">
+
−
<h1 class="ui centered dividing header"><span id="intro" class = "section"> &nbsp; </span>Sonicell</h1>
+
−
<div class = "ui segment">
+
−
<p>Project Sonicell introduces exciting foundational advances to synthetic biology aimed to enable rapid cellular response to a combination of external stimuli such as sound, light or chemical compounds. This system is composed of a module for enhanced sensitivity of cells to ultrasound or other mechanical stimuli sensed by a calcium-dependent reporter, and a module for integration of a combination of several input signals into a signaling pathway based on the collection of orthogonal proteases. Finally, the proteases were designed to cleave an endoplasmic reticulum retention signal from target proteins, which results in a secretion of premade proteins.</p>
+
−
<div>
+
−
<div class = "container">
+
−
<img width = "100%" onresize="relativeCoordinates(this);" style = "border-radius: 15px;" src="//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png" alt="project scheme" usemap="#projectmap" id = "projectScheme"></img>
+
−
<map name="projectmap">
+
−
  <area id="area1" class="popup" shape="poly" coords="" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/9/92/T--Slovenia--Main-scheme1.png', 'module1')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module1')" href="//2016.igem.org/Team:Slovenia/Mechanosensing/Overview"></area>
+
−
  <area id="area2" class="popup" shape="poly" coords="" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/5/54/T--Slovenia--Main-scheme3.png', 'module2')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module2')" href="//2016.igem.org/Team:Slovenia/Protease_signaling/Logic"></area>
+
−
  <area id="area3" class="popup" shape="poly" coords="" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/f/f6/T--Slovenia--Main-scheme2.png', 'module3')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module3')" href="//2016.igem.org/Team:Slovenia/Protease_signaling/Overview"></area>
+
−
  <area id="area4" class="popup" shape="poly" coords="" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/1/12/T--Slovenia--Main-scheme4.png', 'module4')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module4')" href="//2016.igem.org/Team:Slovenia/Implementation/ProteaseInducible_secretion"></area>
+
−
</map>
+
−
<div class="popup module1">
+
−
<span class="popuptext" id="module1"><b>Enhanced mechanosensing:</b><br /> Sensitivity of mammalian cells to ultrasound or other mechanical stimuli was enhanced by the introduction of mechanosensitive ion channels and/or by the expression of protein gas vesicles from bacteria. Influx of calcium through channels is sensed by formation of a complex between calmodulin and M13 peptide that can result in a rapid light emission by cells (used for cell painting) or reconstitution of a split protease.</span>
+
−
</div>
+
−
<div class="popup module2">
+
−
<span class="popuptext" id="module2"><b>Protease based signaling <br />and information processing:</b><br /> Combinations of proteolytic activities against specific targets resulted in activation of a reporter or another protease, which forms the basis for the design of a new type of rapid signaling pathways and construction of logic functions.</span>
+
−
</div>
+
−
<div class="popup module3">
+
−
<span class="popuptext" id="module3"><b>Orthogonal site-specific proteases: </b><br /> A collection of orthogonal site-specific proteases that recognize different targets was prepared as split proteins, whose activity against selected targets can be induced by stimulation with an external signal such as light or chemicals.</span>
+
−
</div>
+
−
<div class="popup module4">
+
−
<span class="popuptext" id="module4"> <b>Protease-triggered rapid secretion <br /> of therapeutic proteins:</b> <br />A rapid cellular response by secretion of a protein is triggered by the proteolytic cleavage of an endoplasmic reticulum retention peptide. After the cleavage the cargo protein is moved from the ER, and secreted as therapeutic protein.</span>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class= "ui segment">
+
−
<h4>Abstract for experts</h4>
+
−
<p>Synthetic biology opens exciting perspectives to control cells, for applications ranging from industrial processes to cell-based therapy. However, the large majority of designed cellular circuits are based on the transcriptional regulation, which may be too slow for many therapeutic or diagnostic applications, for example delivery of insulin or detection of a metabolite. Several medical doctors and researchers that we consulted stressed that a fast but controllable response is high on their wish list of expectations from synthetic biology. Additionally, noninvasive stimulation of selected tissues in the organism would also be highly desirable. While light is extremely useful as a rapid, spatially-restricted input signal, it cannot penetrate deep into the tissue. On the other hand, ultrasound combines several advantages of light with the added ability to penetrate tissue.</p>
+
−
<p>In our project we enhanced the sensitivity of mammalian cells to ultrasound or other mechanical stimulus by introduction of bacterial or engineered mammalian mechanosensors. Additionally, the response to ultrasound and touch was strongly increased by expression of the two components of bacterial gas vesicles, GvpA and GvpC. Mechanosensing was detected by the calcium-induced calmodulin-M13 complex reconstituting split cyclic luciferase, highly applicable for the emerging field of mechanogenetics. This enabled us to draw on cells using touch, where we engaged in collaboration with an artist.</p>
+
−
<p>For the rapid response of cells to multiple stimuli we designed proteolysis-based signaling pathways. For this purpose four orthogonal split proteases were generated, each recognizing its own motif of seven amino acid residues. Based on cleavage of coiled-coil dimerizing domains we demonstrated the ability to implement proteolysis-based signal pathways and logic functions in mammalian cells. Based on the cleavage of an ER retention peptide by a protease, input signals lead to protein secretion without the slow step of induced protein synthesis.</p>
+
−
<p>We believe that this project introduced several foundational advances that could be very useful to synthetic biology far beyond iGEM and for the benefit of humanity for therapy, diagnostics and potentially many other advanced applications.</p>
+
−
</div>
+
−
<div class = "ui segment">
+
−
<h4>Abstract in plain English</h4>
+
−
<p>
+
−
Synthetic biology aims to control cells so they can obey our commands and do what we want, for example to produce drugs when needed. In our project we made cells respond to ultrasound or touch. When we touch the cells they light up, which can be recorded on a camera. Ideally we want cells to respond to our commands as fast as possible, because sometimes we can’t wait an hour before the cells produce the medicine and release it. That is why we gave cells a novel mechanism of processing information.
+
−
We achieved this by combining several enzymes that recognize very specific parts of proteins and cut them, which changes their function. This allowed us to combine different signals, like sound, touch, light or chemicals, to obtain the desired cell response. The new enzymes can also cut the anchor with which medicines are attached to cells after the cells make them. Among many possible uses of our inventions, we can imagine activating cells in the brain by ultrasound, which means that we don’t need to use
+
−
surgery to help people with Parkinson’s disease, or can trigger fast production of insulin in the body, to help people with diabetes.
+
−
</p>
+
−
</div>
+
−
<div>
+
−
<h1 class="ui centered dividing header"><span id="achievements" class = "section"> &nbsp; </span>Achievements</h1>
+
−
<div class = "ui segment">
+
−
<div class = "corners" style="float:right;">
+
−
<p><img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;">  new at science</p>
+
−
<p><img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;">  new at iGEM</p>
+
−
</div>
+
−
<ul>
+
−
<li>Mammalian cell sensitivity to ultrasound and mechanical stimuli was increased by ectopic expression of bacterial or human cation permeable channels and functional reconstitution of bacterial protein gas vesicles from two protein components (GvpA and GvpC)  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
−
<li>A custom-made ultrasound generator device was used to stimulate mammalian cells  <img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;"></li>
+
−
<li>A mechano-sensory luciferase reporter sensitive to an influx of free calcium ions was introduced into mammalian cells, which enabled rapid light emission of mammalian cells in response to mechanical stimuli and enabled painting on cells by touch with exciting potentials for other applications  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
−
<li>A circular proteolysis-activated luciferase reporter was experimentally verified and introduced into the iGEM collection  <img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;"></li>
+
−
<li>A set of four different orthogonal site-specific proteases was designed and tested as split proteins in mammalian cells  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
−
<li>New orthogonal protease-based signaling pathways and information processing platform was designed and several logic functions based on the combination of multiple input signals were tested experimentally  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
−
<li>Proteolysis of the ER retention signal was introduced as the trigger for the fast release of proteins from cells aimed to enable fast therapeutic responses such as required for the release of peptide hormones, neuroactive peptides etc.  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<div>
+
−
<h1 class="ui centered dividing header"><span id="requirements" class = "section"> &nbsp; </span>Medal requirements</h1>
+
−
<div class = "ui segment">
+
−
<h4>Gold:</h4>
+
−
<h4>Silver:</h4>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</body>
+
−
</html>
+

Revision as of 13:12, 17 October 2016

function reloader() { 

   try {
       console.log('start');
       $('.ui.sticky.global').sticky({
           context: '#context',
           offset: 16
       });
       $('.ui.sticky.image').sticky({
           context: '#context',
           offset: 27
       });
       $('.ui.sticky.text.menu').sticky({
           context: '#context',
           offset: 200
       });
       $('.ui.sticky.text').sticky({
           context: '#context',
           offset: 200
       });
       $('.image_div > img').visibility({
           type: 'image',
           transition: 'fade in',
           duration: 500
       });
       $('.teamimg').hover(function () {
           var width = $(this).outerWidth() / 2;
           $(this).find('.left').animate({right: width}, {queue: false, duration: 300});
           $(this).find('.right').animate({left: width}, {queue: false, duration: 300});
       }, function () {
           $(this).find('.left').animate({right: 0}, {queue: false, duration: 300});
           $(this).find('.right').animate({left: 0}, {queue: false, duration: 300});
       });
       $(function () {
           // The parameter are the selector for the container(s) of text in which you want replacement
           // and a URL pointing to your bibfile - mind the same origin policy...
           var zitator = new Zitator(".citing", "//2016.igem.org/wiki/images/5/53/T--Slovenia--references.txt");
           zitator.zitiere();
       });
       function isScrolledIntoView(elem) {
           var docViewTop = $(window).scrollTop();
           var docViewBottom = docViewTop + $(window).height() - $("#menucomb").height();

           var elemTop = $(elem).offset().top;
           var elemBottom = elemTop + $(elem).height();

           if (elemTop >= docViewTop) {
               return true;
           }
           else if (elemBottom >= docViewBottom) {
               return true;
           }
           return false; // || elemTop >= docViewTop) ;
       }

       function clearStyleOfSideMenu() {

console.log("calling a function"); 

           var id = null;
           $("span.section").each(function () {
               var id = this.id;

console.log(id); 

               var selector = 'a[href*="#'.concat(id).concat('"]');
               $(selector).css("color", "");
           });

$("span.section").each(function() { var ident = this.id; var parent = (this.parentNode).parentNode; if(isScrolledIntoView(parent)) { var selector = 'a[href*="#'.concat(ident).concat('"]'); $(selector).css("color", "#DB2828"); return false; } });

/*var color = true; 

           $(".section").each(function () {
               //clear each parent
               var id = this.id;
               var selector = 'a[href*="#'.concat(id).concat('"]');
               if (isScrolledIntoView($(this).parent().parent())) {
                   // nastavi barvo trenutni sekcij

if(color) {

console.log("section is found"); color = false; return false; //break from function } 

               }
           });*/
       }

       $(document).ready(function () {
               clearStyleOfSideMenu();
               $(window).scroll(function () {
                   clearStyleOfSideMenu();
               });
           }
       );
       $(".menuItem").mouseenter(
           function () {
               var loc = window.location.href;
               var defaultItem;
               var parent;
               $(".submenu").each(function () {
                       var context = this;
                       $("a", context).each(function () {
                           if (loc.match(/[^#]*/) == $(this).attr("href")) {
                               defaultItem = $(context).attr("id");
                               parent = $("#".concat(defaultItem.replace("Submenu", "")));
                           }
                       });
                   }
               );
               $(".ui.simple.item.menuItem a").each(function () {
                   if (loc.match(/[^#]*/) == $(this).attr("href")) {
                       parent = $($(this).parents('.ui.simple.item.menuItem'));
                       defaultItem = (parent.attr('id')).concat("Submenu");
                       console.log(defaultItem);
                   }
               });
               defaultItem = document.getElementById(defaultItem);
               clearElements();
               var submenu = document.getElementById(this.id.concat("Submenu"));
               var submenuText = document.getElementById("SecondarySubmenu");
               if (submenuText.innerHTML != submenu.innerHTML) {
                   this.className = "ui simple active item menuItem";
                   submenuText.innerHTML = submenu.innerHTML;
               }
               else {
                   parent.attr("class", "ui simple active item menuItem");
                   submenuText.innerHTML = defaultItem.innerHTML;
               }
           }
       );
       $("#menucomb").mouseleave(function () {
               setDefaultMenu();
           }
       );
   } catch (e) {
       console.log('startReloading');
       $.getScript("https://2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript", function () {
           console.log('success');
           reloader();
       });
       console.log('endReloading');
   }

} $(document).ready(injectHeader); $(document).ready(reloader); function enumerateKeys(object) { 

   var numberPairs = {};
   var objectPairs = {};
   var number = 0;

   var matches = document.body.querySelectorAll(object + '[data-ref]');
   while (number < matches.length) {
       var refName = matches[number].dataset.ref;
       if (refName in numberPairs) {
           console.log(refName, "This label has already been assigned.");
       } else {
           numberPairs[number + 1] = matches[number];
           objectPairs[refName] = number + 1;
       }
       number++;
   }
   return [numberPairs, objectPairs, number];

}

function enumerate() { 

   var tables = enumerateKeys('table');
   var figures = enumerateKeys('figure');

   var maximum = Math.max(tables[2], figures[2]);

   for (var number = 1; number <= maximum; number++) {
       if (number in tables[0]) {
           $(tables[0][number]).children('caption').prepend("Table " + number + ": ")
       }
       if (number in figures[0]) {
           $(figures[0][number]).children('figcaption').prepend("Figure " + number + ": ")
       }
   }

   $(this).find('ref').each(function () {
       var label = $(this).text();
       $(this).click(function (event) {
           event.preventDefault();
       });
       if (label in tables[1]) {
           var number = tables[1][label];
           $(this).html("<a href=> Table " + tables[1][label] + " </a>");
           $(this).on('click', function () {
               window.scroll(0, $(tables[0][number]).offset().top - 150);
           })
       } else {
           var number = figures[1][label];
           $(this).html("<a href=>Figure " + figures[1][label] + "</a>");
           $(this).on('click', function () {
               window.scroll(0, $(figures[0][number]).offset().top - 150);
           })
       }
   });

} $(document).ready(enumerate); $(document).ready(setDefaultMenu); $(document).ready(function(){ $('.ui.accordion').accordion(); });

function resize(img) { 

   if (img.className.includes("medium")) {
       img.className = "ui big centered image";

img.parentElement.parentElement.setAttribute("align", "center"); img.parentElement.parentElement.setAttribute("data-property", img.parentElement.parentElement.style.cssText); img.parentElement.parentElement.style = "clear: both"; 

   }
   else {

img.parentElement.parentElement.setAttribute("align", ""); 

       img.className = "ui medium image";

img.parentElement.parentElement.style.cssText = img.parentElement.parentElement.getAttribute("data-property"); 

   }

//scroll to image, (if two images are floated and the right one is resised, then the image gets pushed down) //var top = img.offsetTop; console.log($(img).offset().top); console.log($("menucomb").height()); $(window).scrollTop($(img).offset().top - $(window).height()/2 + $(img).height()/2); }

function setDefaultMenu() { console.log("calling set default item"); 

   clearElements();
   var loc = window.location.href;
   var defaultItem;
   var parent;
   $(".submenu").each(function () {
           var context = this;
           $(this).css("color", "#DB2828");
           $(this).css("font-weight", "bold");
           $("a", context).each(function () {

console.log($(this).attr("href")); 

               if (loc.match(/[^#]*/) == $(this).attr("href")) {
                   defaultItem = $(context).attr("id");
                   parent = $("#".concat(defaultItem.replace("Submenu", "")));
                   $(this).css("color", "#DB2828");
                   $(this).css("font-weight", "bold");
               }
           });

       }
   );
   $(".ui.simple.item.menuItem a").each(function () {
       if (loc.match(/[^#]*/) == $(this).attr("href")) {
           parent = $($(this).parents('.ui.simple.item.menuItem'));
           defaultItem = (parent.attr('id')).concat("Submenu");
       }
   });

   var submenuText = document.getElementById("SecondarySubmenu");
   defaultItem = document.getElementById(defaultItem);
   parent.attr("class", "ui simple active item menuItem");
   submenuText.innerHTML = defaultItem.innerHTML;

}

function clearElements() { 

   var elements = document.getElementsByClassName("menuItem");
   for (var i = 0; i < elements.length; i++) {
       elements[i].className = "ui simple item menuItem";
   }

}

function injectHeader() { 

   console.log("Injecting header");
var menu = " \ \ \ \ \ \ \ \ \ \ \ "; 
   var contextDiv = document.getElementById("context");
   contextDiv.innerHTML = menu.concat(contextDiv.innerHTML);

}

$('.playGif').on('click', function () { 

   console.log("play detected");
   var parent = $(this);
   var parAlt = parent.attr('data-alt');
   var parSrc = parent.attr('src');
   parent.attr("src", parAlt).attr("data-alt", parSrc);

});

function relativeCoordinates(img) { console.log("calling a function"); console.log(img.width); var c1 = [74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62]; var c2 = [387, 125, 393, 283, 423, 316, 518, 190, 486, 120]; var c3 = [528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71]; var c4 = [393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319];

for(i = 0; i < c1.length; i++) { c1[i] = (c1[i]/(800.0)); }

}