Team:Freiburg/Templates/html/js.html

From 2014.igem.org

(Difference between revisions)
 
(40 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<button class="invertbutton" onclick="invertColors();">Inv.</button>
 +
<script>
 +
function invertColors() {
 +
      var $html = $('html');
 +
      $html.toggleClass('inverted-colors');
 +
    };
 +
(function(){
 +
  var DEBUG = false;
 +
  // grab navigation links
 +
  var navLinks = document.getElementsByTagName('nav');
 +
  if (navLinks.length > 0) navLinks = navLinks[0];
 +
  navLinks = navLinks.getElementsByTagName('a');
-
<script src="/Team:Freiburg/js/jquery-2.1.1.min.js?action=raw"></script>
+
  // check all links' href attributes for equality with url
-
<script src="/Team:Freiburg/js/bootstrap.3.2.0.min.js?action=raw"></script>
+
  var currentPath = location.pathname;
-
<script src="/Team:Freiburg/js/jquery.magnific-popup.min.js?action=raw"></script>
+
  if (DEBUG) console.log("Current Path: " + currentPath);
-
<script src="/Team:Freiburg/js/jquery-ui.min.js?action=raw"></script>
+
  for (var i=0;i<navLinks.length;i++) {
 +
    var href = navLinks[i].getAttribute('href')
 +
    if (DEBUG) console.log(href);
 +
    var indexOfPath = href.indexOf(currentPath);
 +
    if (DEBUG) console.log("indexofPath: " + indexOfPath);
 +
    if (indexOfPath === -1) continue;
 +
    if (indexOfPath > 2) continue;
 +
    if (indexOfPath >= href.length - currentPath.length - 1){
 +
      // set active state
 +
      if (DEBUG) console.log('Setting active state for: ' + href);
 +
      var parent = navLinks[i].parentNode;
 +
      while (parent.tagName != 'NAV') {
 +
        // set active class for all ancestral list items
 +
        if (parent.tagName == 'LI') {
 +
          parent.setAttribute('class', 'active');
 +
        }
 +
        parent = parent.parentNode;
 +
      }
 +
    }
 +
  }
 +
})();
 +
</script>
 +
 
 +
 
 +
<script src="/Team:Freiburg/js/jquery-2.1.1.min.js?action=raw&ctype=text/javascript"></script>
 +
<script src="/Team:Freiburg/js/bootstrap.3.2.0.min.js?action=raw&ctype=text/javascript"></script>
 +
<script src="/Team:Freiburg/js/jquery.magnific-popup.min.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
-
  $(document).ready(function() {
+
    $(document).ready(function(){
-
       // remove unnecessary css
+
       $('figure img').each(function(){
-
      if ($('body').hasClass('mediawiki')){
+
        var parent = this.parentNode;
-
         $('head link[rel="stylesheet"]').remove();
+
        if (parent.tagName != 'A') return;
-
         $('head style[type="text/css"]').remove();
+
         $(parent).magnificPopup({
-
       }
+
          type: 'image',
 +
          tLoading: 'Loading image #%curr%...',
 +
          mainClass: 'mfp-img-mobile',
 +
          gallery: {
 +
            enabled: true,
 +
            navigateByImgClick: true,
 +
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
 +
          },
 +
          image: {
 +
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
 +
            titleSrc: function(item) {
 +
              var caption = $(item.el).find('.caption-fullscreen').html();
 +
              return caption?caption:'';
 +
            }
 +
          }
 +
         });
 +
      });
 +
    });
 +
 
 +
    $(window).load(function() {
 +
 
 +
 
 +
      $('.gallery').each(function(){
 +
        $(this).magnificPopup({
 +
          delegate: 'a',
 +
          type: 'image',
 +
          tLoading: 'Loading image #%curr%...',
 +
          mainClass: 'mfp-img-mobile',
 +
          gallery: {
 +
            enabled: true,
 +
            navigateByImgClick: true,
 +
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
 +
          },
 +
          image: {
 +
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
 +
            titleSrc: function(item) {
 +
              var caption = $(item.el).find('.caption-fullscreen').html();
 +
              return caption?caption:'';
 +
            }
 +
          }
 +
        });
 +
       });
 +
 
 +
 
        
        
-
    $('.gallery').each(function(){
+
      $('.svg-container').each(function(){
-
      $(this).magnificPopup({
+
        var $this = $(this);
-
        delegate: 'a',
+
        if ($this.find('svg a').length === 0){
-
        type: 'image',
+
          $this.magnificPopup({
-
         tLoading: 'Loading image #%curr%...',
+
            items: {
-
         mainClass: 'mfp-img-mobile',
+
                src: $this.clone(),
-
         gallery: {
+
                type: 'inline'
-
          enabled: true,
+
            }
-
          navigateByImgClick: true,
+
          });
-
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+
         }
-
        },
+
      });
-
        image: {
+
 
-
          tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
+
 
-
           titleSrc: function(item) {
+
      $('.partlink').each(function(){
-
             var caption = $(item.el).find('.caption-fullscreen').html();
+
         $(this).magnificPopup({
-
             return caption?caption:'';
+
          type: 'iframe'
 +
         });
 +
      });
 +
 
 +
    });
 +
 
 +
    $(window).load(function(){
 +
      $('#content-nav').affix({
 +
        offset: {
 +
           top: function () {
 +
             return (this.top = $('header nav').offset().top - 16)
 +
          }
 +
        , bottom: function () {
 +
             return (this.bottom = $('.footer').outerHeight(true))
           }
           }
         }
         }
       });
       });
 +
      $('#content-nav.affix').css('top', $('header nav').height() + 16 + 35);
 +
 +
      $('header nav').affix({
 +
        offset: {
 +
          top: function () {
 +
            return (this.top = $('header nav').offset().top - 16)
 +
          }
 +
        , bottom: function () {
 +
            return (this.bottom = $('.footer').outerHeight(true))
 +
          }
 +
        }
 +
      });
 +
      var topDifference = 0;
 +
      $('header nav').on('affix.bs.affix', function(){
 +
        var offsetTopContent = 0;
 +
        if ($('body').hasClass('mediawiki')){
 +
          offsetTopContent = $('#bodyContent > .wrapper-outer').offset().top;
 +
        } else {
 +
          offsetTopContent = $('body > .wrapper-outer').offset().top;
 +
        }
 +
        var $nav = $('header nav');
 +
        var $h = $('header');
 +
 +
        var navTop = $nav.offset().top;
 +
        var hTop = $h.offset().top;
 +
        var hHeight = $h.outerHeight(true);
 +
        var navHeight = $nav.outerHeight(true);
 +
        var rest = hHeight - (navTop - hTop) - navHeight;
 +
        topDifference = offsetTopContent - navTop - rest;
 +
      });
 +
 +
      $('header nav').on('affixed.bs.affix', function(){
 +
        //pad the content so the affixed navbar stays visible
 +
        $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', topDifference + 'px');
 +
        $('#bodyContent > .wrapper-outer').css('padding-top', topDifference + 'px');
 +
        $('#content-nav.affix').css('top', $('header nav').outerHeight(true) + 35);
 +
      });
 +
      $('header nav').on('affixed-top.bs.affix', function(){
 +
        // remove padding if the nav bar is unaffixed
 +
        $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', 0);
 +
        $('#bodyContent > .wrapper-outer').css('padding-top', 0);
 +
      });
 +
     });
     });
 +
</script>
 +
 +
<script>
 +
    // remove url in front of anchor links so scroll spy behaves correctly
 +
    var navLinks = $('#content-nav .nav a');
 +
 +
    // check all links' href attributes for equality with url
 +
    var currentPath = location.pathname;
 +
    for (var i=0;i<navLinks.length;i++) {
 +
      var href = navLinks[i].getAttribute('href')
 +
      var indexOfPath = href.indexOf(currentPath);
 +
      if (indexOfPath === -1) continue;
 +
      if (indexOfPath > 2) continue;
 +
 +
      var indexOfSharp = href.indexOf('#');
 +
      // check if the url part of the href ends with our location
 +
      var hreflength = href.length;
 +
      if (indexOfSharp !== -1) hreflength = indexOfSharp;
 +
      if (indexOfPath >= hreflength - currentPath.length - 1){
 +
        if (indexOfSharp === -1) {
 +
          navLinks[i].setAttribute('href', '#');
 +
          navLinks[i].setAttribute('class', 'active');
 +
        } else {
 +
          navLinks[i].setAttribute('href', href.slice(indexOfSharp));
 +
        }
 +
      }
 +
    }
 +
    // initialize scrollspy
     $('body').scrollspy({
     $('body').scrollspy({
       target: '#content-nav',
       target: '#content-nav',
Line 40: Line 205:
     });
     });
-
     $('#content-nav').affix({
+
    // different click navigation for first link
-
      offset: {
+
     $('#content-nav .nav > li > a ').click(function(e){
-
        top: function () {
+
      var $parent = $(this.parentNode);
-
          return (this.top = $('.content-wrapper').offset().top - 85)
+
      var children = $parent.children('ul');
-
        }
+
      // prevent redirect if we have children
-
       , bottom: function () {
+
      if (children.length == 0) return;
-
          return (this.bottom = $('.footer').outerHeight(true))
+
       e.preventDefault();
-
        }
+
 
-
      }
+
      // open up the nav otherwise
 +
      $parent.toggleClass('active');
     });
     });
 +
  </script>
-
    $('header nav').affix({
+
<script src="/Team:Freiburg/js/jquery.qtip.min.js?action=raw&ctype=text/javascript"></script>
-
       offset: {
+
<script>
-
         top: function () {
+
  $('.ttip').each(function(){
-
          return (this.top = $('header .header-banner').outerHeight(true) - 15)
+
    var $this = $(this);
 +
    $(this).qtip({
 +
       content: {
 +
         text: $($this.data('content')).html(),
 +
        title: $this.data('title'),
 +
      },
 +
      style: { classes: 'qtip-dark' },
 +
      hide: {
 +
        fixed: true,
 +
        delay: 350,
 +
        effect: function() {
 +
          $(this).fadeTo(100, 0);
         }
         }
-
       , bottom: function () {
+
       },
-
           return (this.bottom = $('.footer').outerHeight(true))
+
      show: {
 +
        effect: function() {
 +
           $(this).fadeTo(100, 1);
         }
         }
       }
       }
     });
     });
-
    $('header nav').on('affixed.bs.affix', function(){
+
   })
-
      //pad the content so the affixed navbar stays visible
+
-
      $('body > .wrapper-outer').addClass('top-padded');
+
-
    });
+
-
    $('header nav').on('affixed-top.bs.affix', function(){
+
-
      // remove padding if the nav bar is unaffixed
+
-
      $('body > .wrapper-outer').removeClass('top-padded');
+
-
    });
+
-
 
+
-
    $('.accordion').accordion({
+
-
      heightStyle: "content",
+
-
      collapsible: true,
+
-
      active: null
+
-
    });
+
-
 
+
-
   });
+
</script>
</script>
 +
<script src="/Team:Freiburg/js/three.min.js?action=raw&ctype=text/javascript"></script>
 +
<script src="/Team:Freiburg/js/startIcosahedron.js?action=raw&ctype=text/javascript"></script>
 +
<script>startIcosahedron();</script>
</html>
</html>

Latest revision as of 22:56, 17 October 2014

Retrieved from "http://2014.igem.org/Team:Freiburg/Templates/html/js.html"