Template:Team:Calgary/Test

From 2013.igem.org

(Difference between revisions)
Line 33: Line 33:
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-
<script>
+
<script src="https://2013.igem.org/Team:Calgary/TestPageSliderJS?action=raw&ctype=text/javascript"></script>
-
/*! Superslides - v0.6.1 - 2013-07-09
+
-
* https://github.com/nicinabox/superslides
+
-
* Copyright (c) 2013 Nic Aitch; Licensed MIT */
+
-
(function(window, $) {
+
-
 
+
-
var Superslides, plugin = 'superslides';
+
-
 
+
-
Superslides = function(el, options) {
+
-
  this.options = $.extend({
+
-
    play: false,
+
-
    animation_speed: 600,
+
-
    animation_easing: 'swing',
+
-
    animation: 'slide',
+
-
    inherit_width_from: window,
+
-
    inherit_height_from: window,
+
-
    pagination: true,
+
-
    hashchange: false,
+
-
    scrollable: true,
+
-
    elements: {
+
-
      preserve: '.preserve',
+
-
      nav: '.slides-navigation',
+
-
      container: '.slides-container',
+
-
      pagination: '.slides-pagination'
+
-
    }
+
-
  }, options);
+
-
 
+
-
  var that      = this,
+
-
      $control  = $('<div>', { "class": 'slides-control' }),
+
-
      multiplier = 1;
+
-
 
+
-
  this.$el        = $(el);
+
-
  this.$container = this.$el.find(this.options.elements.container);
+
-
 
+
-
  // Private Methods
+
-
  var initialize = function() {
+
-
    multiplier = that._findMultiplier();
+
-
 
+
-
    that.$el.on('click', that.options.elements.nav + " a", function(e) {
+
-
      e.preventDefault();
+
-
 
+
-
      that.stop();
+
-
      if ($(this).hasClass('next')) {
+
-
        that.animate('next', function() {
+
-
          that.start();
+
-
        });
+
-
      } else {
+
-
        that.animate('prev', function() {
+
-
          that.start();
+
-
        });
+
-
      }
+
-
    });
+
-
 
+
-
    $(document).on('keyup', function(e) {
+
-
      if (e.keyCode === 37) {
+
-
        that.animate('prev');
+
-
      }
+
-
      if (e.keyCode === 39) {
+
-
        that.animate('next');
+
-
      }
+
-
    });
+
-
 
+
-
    $(window).on('resize', function() {
+
-
      setTimeout(function() {
+
-
        var $children = that.$container.children();
+
-
 
+
-
        that.width  = that._findWidth();
+
-
        that.height = (that._findHeight() - $('#TopBar').height()) * .8;
+
-
 
+
-
        $children.css({
+
-
          width: that.width,
+
-
          left: that.width
+
-
        });
+
-
 
+
-
        that.css.containers();
+
-
        that.css.images();
+
-
      }, 10);
+
-
    });
+
-
 
+
-
    $(window).on('hashchange', function() {
+
-
      var hash = that._parseHash(), index;
+
-
 
+
-
      if (hash) {
+
-
        if (!isNaN(hash)) {
+
-
// Minus 1 here because we don't want the url
+
-
        // to be zero-indexed
+
-
        index = that._upcomingSlide(hash - 1);
+
-
}
+
-
      } else {
+
-
        index = that._upcomingSlide(hash);
+
-
      }
+
-
 
+
-
      if (index >= 0) {
+
-
if (index !== that.current) {
+
-
that.animate(index);
+
-
}
+
-
      }
+
-
    });
+
-
 
+
-
    that.pagination._events();
+
-
 
+
-
    that.start();
+
-
    return that;
+
-
  };
+
-
 
+
-
var css = {
+
-
  containers: function() {
+
-
    if (that.init) {
+
-
      that.$el.css({
+
-
        height: that.height
+
-
      });
+
-
 
+
-
      that.$control.css({
+
-
        width: that.width * multiplier,
+
-
        left: -that.width
+
-
      });
+
-
 
+
-
      that.$container.css({
+
-
 
+
-
      });
+
-
    } else {
+
-
      $('body').css({
+
-
        margin: 0
+
-
      });
+
-
 
+
-
      that.$el.css({
+
-
        position: 'relative',
+
-
        overflow: 'hidden',
+
-
        width: '100%',
+
-
        height: that.height
+
-
      });
+
-
 
+
-
      that.$control.css({
+
-
        position: 'relative',
+
-
        transform: 'translate3d(0)',
+
-
        height: '100%',
+
-
        width: that.width * multiplier,
+
-
        left: -that.width
+
-
      });
+
-
 
+
-
      that.$container.css({
+
-
        display: 'none',
+
-
        margin: '0',
+
-
        padding: '0',
+
-
        listStyle: 'none',
+
-
        position: 'relative',
+
-
        height: '100%'
+
-
      });
+
-
    }
+
-
 
+
-
    if (that.size() === 1) {
+
-
      that.$el.find(that.options.elements.nav).hide();
+
-
    }
+
-
  },
+
-
  images: function() {
+
-
    var $images = that.$container.find('img')
+
-
                                .not(that.options.elements.preserve)
+
-
 
+
-
    $images.removeAttr('width').removeAttr('height')
+
-
      .css({
+
-
        "-webkit-backface-visibility": 'hidden',
+
-
        "-ms-interpolation-mode": 'bicubic',
+
-
        "position": 'absolute',
+
-
        "left": '0',
+
-
        "top": '0',
+
-
        "z-index": '-1',
+
-
        "max-width": 'none'
+
-
      });
+
-
 
+
-
    $images.each(function() {
+
-
      var image_aspect_ratio = that.image._aspectRatio(this),
+
-
          image = this;
+
-
 
+
-
      if (!$.data(this, 'processed')) {
+
-
        var img = new Image();
+
-
        img.onload = function() {
+
-
          that.image._scale(image, image_aspect_ratio);
+
-
          that.image._center(image, image_aspect_ratio);
+
-
          $.data(image, 'processed', true);
+
-
        };
+
-
        img.src = this.src;
+
-
 
+
-
      } else {
+
-
        that.image._scale(image, image_aspect_ratio);
+
-
        that.image._center(image, image_aspect_ratio);
+
-
      }
+
-
    });
+
-
  },
+
-
  children: function() {
+
-
    var $children = that.$container.children();
+
-
 
+
-
    if ($children.is('img')) {
+
-
      $children.each(function() {
+
-
        if ($(this).is('img')) {
+
-
          $(this).wrap('<div>');
+
-
 
+
-
          // move id attribute
+
-
          var id = $(this).attr('id');
+
-
          $(this).removeAttr('id');
+
-
          $(this).parent().attr('id', id);
+
-
        }
+
-
      });
+
-
 
+
-
      $children = that.$container.children();
+
-
    }
+
-
 
+
-
    if (!that.init) {
+
-
      $children.css({
+
-
        display: 'none',
+
-
        left: that.width * 2
+
-
      });
+
-
    }
+
-
 
+
-
    $children.css({
+
-
      position: 'absolute',
+
-
      overflow: 'hidden',
+
-
      height: '100%',
+
-
      width: that.width,
+
-
      top: 0,
+
-
      zIndex: 0
+
-
    });
+
-
 
+
-
  }
+
-
}
+
-
 
+
-
var fx = {
+
-
  slide: function(orientation, complete) {
+
-
    var $children = that.$container.children(),
+
-
        $target  = $children.eq(orientation.upcoming_slide);
+
-
 
+
-
    $target.css({
+
-
      left: orientation.upcoming_position,
+
-
      display: 'block'
+
-
    });
+
-
 
+
-
    that.$control.animate({
+
-
      left: orientation.offset
+
-
    },
+
-
    that.options.animation_speed,
+
-
    that.options.animation_easing,
+
-
    function() {
+
-
      if (that.size() > 1) {
+
-
        that.$control.css({
+
-
          left: -that.width
+
-
        });
+
-
 
+
-
        $children.eq(orientation.upcoming_slide).css({
+
-
          left: that.width,
+
-
          zIndex: 2
+
-
        });
+
-
 
+
-
        if (orientation.outgoing_slide >= 0) {
+
-
          $children.eq(orientation.outgoing_slide).css({
+
-
            left: that.width,
+
-
            display: 'none',
+
-
            zIndex: 0
+
-
          });
+
-
        }
+
-
      }
+
-
 
+
-
      complete();
+
-
    });
+
-
  },
+
-
  fade: function(orientation, complete) {
+
-
    var that = this,
+
-
        $children = that.$container.children(),
+
-
        $outgoing = $children.eq(orientation.outgoing_slide),
+
-
        $target = $children.eq(orientation.upcoming_slide);
+
-
 
+
-
    $target.css({
+
-
      left: this.width,
+
-
      opacity: 1,
+
-
      display: 'block'
+
-
    });
+
-
 
+
-
    if (orientation.outgoing_slide >= 0) {
+
-
      $outgoing.animate({
+
-
        opacity: 0
+
-
      },
+
-
      that.options.animation_speed,
+
-
      that.options.animation_easing,
+
-
      function() {
+
-
        if (that.size() > 1) {
+
-
          $children.eq(orientation.upcoming_slide).css({
+
-
            zIndex: 2
+
-
          });
+
-
 
+
-
          if (orientation.outgoing_slide >= 0) {
+
-
            $children.eq(orientation.outgoing_slide).css({
+
-
              opacity: 1,
+
-
              display: 'none',
+
-
              zIndex: 0
+
-
            });
+
-
          }
+
-
        }
+
-
 
+
-
        complete();
+
-
      });
+
-
    } else {
+
-
      $target.css({
+
-
        zIndex: 2
+
-
      });
+
-
      complete();
+
-
    }
+
-
  }
+
-
};
+
-
 
+
-
fx = $.extend(fx, $.fn.superslides.fx);
+
-
 
+
-
var image = {
+
-
  _centerY: function(image) {
+
-
    var $img = $(image);
+
-
 
+
-
    $img.css({
+
-
      top: (that.height - $img.height()) / 2
+
-
    });
+
-
  },
+
-
  _centerX: function(image) {
+
-
    var $img = $(image);
+
-
 
+
-
    $img.css({
+
-
      left: (that.width - $img.width()) / 2
+
-
    });
+
-
  },
+
-
  _center: function(image) {
+
-
    that.image._centerX(image);
+
-
    that.image._centerY(image);
+
-
  },
+
-
  _aspectRatio: function(image) {
+
-
    if (!image.naturalHeight) {
+
-
  if (!image.naturalWidth) {
+
-
  var img = new Image();
+
-
  img.src = image.src;
+
-
  image.naturalHeight = img.height;
+
-
  image.naturalWidth = img.width;
+
-
  }
+
-
    }
+
-
 
+
-
    return image.naturalHeight / image.naturalWidth;
+
-
  },
+
-
  _scale: function(image, image_aspect_ratio) {
+
-
    image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image);
+
-
 
+
-
    var container_aspect_ratio = that.height / that.width,
+
-
        $img = $(image);
+
-
 
+
-
    if (container_aspect_ratio > image_aspect_ratio) {
+
-
      $img.css({
+
-
        height: that.height,
+
-
        width: that.height / image_aspect_ratio
+
-
      });
+
-
 
+
-
    } else {
+
-
      $img.css({
+
-
        height: that.width * image_aspect_ratio,
+
-
        width: that.width
+
-
      });
+
-
    }
+
-
  }
+
-
};
+
-
 
+
-
var pagination = {
+
-
  _setCurrent: function(i) {
+
-
    if (!that.$pagination) { return; }
+
-
 
+
-
    var $pagination_children = that.$pagination.children();
+
-
 
+
-
    $pagination_children.removeClass('current');
+
-
    $pagination_children.eq(i)
+
-
      .addClass('current');
+
-
  },
+
-
  _addItem: function(i) {
+
-
    var slide_number = i + 1,
+
-
        href = slide_number,
+
-
        $slide = that.$container.children().eq(i),
+
-
        slide_id = $slide.attr('id');
+
-
 
+
-
    if (slide_id) {
+
-
      href = slide_id;
+
-
    }
+
-
 
+
-
    var $item = $("<a>", {
+
-
      'href': "#" + href,
+
-
      'text': href
+
-
    });
+
-
 
+
-
    $item.appendTo(that.$pagination);
+
-
  },
+
-
  _setup: function() {
+
-
    if (!that.options.pagination || that.size() === 1) { return; }
+
-
 
+
-
    var $pagination = $("<nav>", {
+
-
      'class': that.options.elements.pagination.replace(/^\./, '')
+
-
    });
+
-
 
+
-
    that.$pagination = $pagination.appendTo(that.$el);
+
-
 
+
-
    for (var i = 0; i < that.size(); i++) {
+
-
      that.pagination._addItem(i);
+
-
    }
+
-
  },
+
-
  _events: function() {
+
-
    that.$el.on('click', that.options.elements.pagination + ' a', function(e) {
+
-
      e.preventDefault();
+
-
 
+
-
      var hash  = that._parseHash(this.hash),
+
-
          index = that._upcomingSlide(hash - 1);
+
-
 
+
-
      if (index !== that.current) {
+
-
        that.animate(index);
+
-
      }
+
-
    });
+
-
  }
+
-
};
+
-
 
+
-
  this.css = css;
+
-
  this.image = image;
+
-
  this.pagination = pagination;
+
-
  this.fx = fx;
+
-
  this.animation = this.fx[this.options.animation];
+
-
 
+
-
  this.$control = this.$container.wrap($control).parent('.slides-control');
+
-
 
+
-
  that._findPositions();
+
-
  that.width  = that._findWidth();
+
-
  that.height = (that._findHeight() - $('#TopBar').height()) * .8;
+
-
 
+
-
  this.css.children();
+
-
  this.css.containers();
+
-
  this.css.images();
+
-
  this.pagination._setup();
+
-
 
+
-
  return initialize();
+
-
};
+
-
 
+
-
Superslides.prototype = {
+
-
  _findWidth: function() {
+
-
    return $(this.options.inherit_width_from).width();
+
-
  },
+
-
  _findHeight: function() {
+
-
    return $(this.options.inherit_width_from).height();
+
-
  },
+
-
 
+
-
  _findMultiplier: function() {
+
-
    return this.size() === 1 ? 1 : 3;
+
-
  },
+
-
 
+
-
  _upcomingSlide: function(direction) {
+
-
    if ((/next/).test(direction)) {
+
-
      return this._nextInDom();
+
-
 
+
-
    } else if ((/prev/).test(direction)) {
+
-
      return this._prevInDom();
+
-
 
+
-
    } else if ((/\d/).test(direction)) {
+
-
      return +direction;
+
-
 
+
-
    } else if (direction) {
+
-
  if ((/\w/).test(direction)) {
+
-
      var index = this._findSlideById(direction);
+
-
      if (index >= 0) {
+
-
        return index;
+
-
      } else {
+
-
        return 0;
+
-
      }
+
-
 
+
-
    } else {
+
-
      return 0;
+
-
    }
+
-
}
+
-
  },
+
-
 
+
-
  _findSlideById: function(id) {
+
-
    return this.$container.find('#' + id).index();
+
-
  },
+
-
 
+
-
  _findPositions: function(current, thisRef) {
+
-
    thisRef = thisRef || this;
+
-
 
+
-
    if (current === undefined) {
+
-
      current = -1;
+
-
    }
+
-
 
+
-
    thisRef.current = current;
+
-
    thisRef.next    = thisRef._nextInDom();
+
-
    thisRef.prev    = thisRef._prevInDom();
+
-
  },
+
-
 
+
-
  _nextInDom: function() {
+
-
    var index = this.current + 1;
+
-
 
+
-
    if (index === this.size()) {
+
-
      index = 0;
+
-
    }
+
-
 
+
-
    return index;
+
-
  },
+
-
 
+
-
  _prevInDom: function() {
+
-
    var index = this.current - 1;
+
-
 
+
-
    if (index < 0) {
+
-
      index = this.size() - 1;
+
-
    }
+
-
 
+
-
    return index;
+
-
  },
+
-
 
+
-
  _parseHash: function(hash) {
+
-
    hash = hash || window.location.hash;
+
-
    hash = hash.replace(/^#/, '');
+
-
 
+
-
    if (hash) {
+
-
      if (!isNaN(+hash)) {
+
-
  hash = +hash;
+
-
  }
+
-
    }
+
-
 
+
-
    return hash;
+
-
  },
+
-
 
+
-
  size: function() {
+
-
    return this.$container.children().length;
+
-
  },
+
-
 
+
-
  destroy: function() {
+
-
    return this.$el.removeData();
+
-
  },
+
-
 
+
-
  update: function() {
+
-
    this.css.children();
+
-
    this.css.containers();
+
-
    this.css.images();
+
-
 
+
-
    this.pagination._addItem(this.size())
+
-
 
+
-
    this._findPositions(this.current);
+
-
    this.$el.trigger('updated.slides');
+
-
  },
+
-
 
+
-
  stop: function() {
+
-
    clearInterval(this.play_id);
+
-
    delete this.play_id;
+
-
 
+
-
    this.$el.trigger('stopped.slides');
+
-
  },
+
-
 
+
-
  start: function() {
+
-
    var that = this;
+
-
 
+
-
    if (that.options.hashchange) {
+
-
      $(window).trigger('hashchange');
+
-
    } else {
+
-
      this.animate();
+
-
    }
+
-
 
+
-
    if (this.options.play) {
+
-
      if (this.play_id) {
+
-
        this.stop();
+
-
      }
+
-
 
+
-
      this.play_id = setInterval(function() {
+
-
        that.animate();
+
-
      }, this.options.play);
+
-
    }
+
-
 
+
-
    this.$el.trigger('started.slides');
+
-
  },
+
-
 
+
-
  animate: function(direction, userCallback) {
+
-
    var that = this,
+
-
        orientation = {};
+
-
 
+
-
    if (this.animating) {
+
-
      return;
+
-
    }
+
-
 
+
-
    this.animating = true;
+
-
 
+
-
    if (direction === undefined) {
+
-
      direction = 'next';
+
-
    }
+
-
 
+
-
    orientation.upcoming_slide = this._upcomingSlide(direction);
+
-
 
+
-
    if (orientation.upcoming_slide >= this.size()) {
+
-
      return;
+
-
    }
+
-
 
+
-
    orientation.outgoing_slide    = this.current;
+
-
    orientation.upcoming_position = this.width * 2;
+
-
    orientation.offset            = -orientation.upcoming_position;
+
-
 
+
-
    if (direction === 'prev' || direction < orientation.outgoing_slide) {
+
-
      orientation.upcoming_position = 0;
+
-
      orientation.offset            = 0;
+
-
    }
+
-
 
+
-
    if (that.size() > 1) {
+
-
      that.pagination._setCurrent(orientation.upcoming_slide);
+
-
    }
+
-
 
+
-
    if (that.options.hashchange) {
+
-
      var hash = orientation.upcoming_slide + 1,
+
-
          id = that.$container.children(':eq(' + orientation.upcoming_slide + ')').attr('id');
+
-
 
+
-
      if (id) {
+
-
        window.location.hash = id;
+
-
      } else {
+
-
        window.location.hash = hash;
+
-
      }
+
-
    }
+
-
 
+
-
    that.$el.trigger('animating.slides', [orientation]);
+
-
 
+
-
    that.animation(orientation, function() {
+
-
      that._findPositions(orientation.upcoming_slide, that);
+
-
 
+
-
      if (typeof userCallback === 'function') {
+
-
        userCallback();
+
-
      }
+
-
 
+
-
      that.animating = false;
+
-
      that.$el.trigger('animated.slides');
+
-
 
+
-
      if (!that.init) {
+
-
        that.$el.trigger('init.slides');
+
-
        that.init = true;
+
-
        that.$container.fadeIn('fast');
+
-
      }
+
-
    });
+
-
  }
+
-
};
+
-
 
+
-
// jQuery plugin definition
+
-
 
+
-
$.fn[plugin] = function(option, args) {
+
-
  var result = [];
+
-
 
+
-
  this.each(function() {
+
-
    var $this, data, options;
+
-
 
+
-
    $this = $(this);
+
-
    data = $this.data(plugin);
+
-
    options = typeof option === 'object' && option;
+
-
 
+
-
    if (!data) {
+
-
      result = $this.data(plugin, (data = new Superslides(this, options)));
+
-
    }
+
-
 
+
-
    if (typeof option === "string") {
+
-
      result = data[option];
+
-
      if (typeof result === 'function') {
+
-
        return result = result.call(data, args);
+
-
      }
+
-
    }
+
-
  });
+
-
 
+
-
  return result;
+
-
};
+
-
 
+
-
$.fn[plugin].fx = {};
+
-
 
+
-
})(this, jQuery);
+
-
</script>
+
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {

Revision as of 20:31, 14 August 2013

Home

Retrieved from "http://2013.igem.org/Template:Team:Calgary/Test"