|
|
Line 7: |
Line 7: |
| <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | | <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| + | <script src="https://2017.igem.org/Team:USTC/js/jquery-mousewheel?action=raw&ctype=text/javascript"> |
| + | <script src="https://2017.igem.org/Team:USTC/js/slider?action=raw&ctype=text/javascript"> |
| <script> | | <script> |
| | | |
| | | |
− | (function (factory) {
| |
− | if ( false ) {
| |
− | // AMD. Register as an anonymous module.
| |
− | define(['jquery'], factory);
| |
− | } else if (typeof exports === 'object') {
| |
− | // Node/CommonJS style for Browserify
| |
− | module.exports = factory;
| |
− | } else {
| |
− | // Browser globals
| |
− | factory(jQuery);
| |
− | }
| |
− | }(function ($) {
| |
| | | |
− | var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
| |
− | toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
| |
− | ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
| |
− | slice = Array.prototype.slice,
| |
− | nullLowestDeltaTimeout, lowestDelta;
| |
− |
| |
− | if ( $.event.fixHooks ) {
| |
− | for ( var i = toFix.length; i; ) {
| |
− | $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
| |
− | }
| |
− | }
| |
− |
| |
− | var special = $.event.special.mousewheel = {
| |
− | version: '3.1.12',
| |
− |
| |
− | setup: function() {
| |
− | if ( this.addEventListener ) {
| |
− | for ( var i = toBind.length; i; ) {
| |
− | this.addEventListener( toBind[--i], handler, false );
| |
− | }
| |
− | } else {
| |
− | this.onmousewheel = handler;
| |
− | }
| |
− | // Store the line height and page height for this particular element
| |
− | $.data(this, 'mousewheel-line-height', special.getLineHeight(this));
| |
− | $.data(this, 'mousewheel-page-height', special.getPageHeight(this));
| |
− | },
| |
− |
| |
− | teardown: function() {
| |
− | if ( this.removeEventListener ) {
| |
− | for ( var i = toBind.length; i; ) {
| |
− | this.removeEventListener( toBind[--i], handler, false );
| |
− | }
| |
− | } else {
| |
− | this.onmousewheel = null;
| |
− | }
| |
− | // Clean up the data we added to the element
| |
− | $.removeData(this, 'mousewheel-line-height');
| |
− | $.removeData(this, 'mousewheel-page-height');
| |
− | },
| |
− |
| |
− | getLineHeight: function(elem) {
| |
− | var $elem = $(elem),
| |
− | $parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent']();
| |
− | if (!$parent.length) {
| |
− | $parent = $('body');
| |
− | }
| |
− | return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16;
| |
− | },
| |
− |
| |
− | getPageHeight: function(elem) {
| |
− | return $(elem).height();
| |
− | },
| |
− |
| |
− | settings: {
| |
− | adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
| |
− | normalizeOffset: true // calls getBoundingClientRect for each event
| |
− | }
| |
− | };
| |
− |
| |
− | $.fn.extend({
| |
− | mousewheel: function(fn) {
| |
− | return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
| |
− | },
| |
− |
| |
− | unmousewheel: function(fn) {
| |
− | return this.unbind('mousewheel', fn);
| |
− | }
| |
− | });
| |
− |
| |
− |
| |
− | function handler(event) {
| |
− | var orgEvent = event || window.event,
| |
− | args = slice.call(arguments, 1),
| |
− | delta = 0,
| |
− | deltaX = 0,
| |
− | deltaY = 0,
| |
− | absDelta = 0,
| |
− | offsetX = 0,
| |
− | offsetY = 0;
| |
− | event = $.event.fix(orgEvent);
| |
− | event.type = 'mousewheel';
| |
− |
| |
− | // Old school scrollwheel delta
| |
− | if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
| |
− | if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
| |
− | if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
| |
− | if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
| |
− |
| |
− | // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
| |
− | if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
| |
− | deltaX = deltaY * -1;
| |
− | deltaY = 0;
| |
− | }
| |
− |
| |
− | // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
| |
− | delta = deltaY === 0 ? deltaX : deltaY;
| |
− |
| |
− | // New school wheel delta (wheel event)
| |
− | if ( 'deltaY' in orgEvent ) {
| |
− | deltaY = orgEvent.deltaY * -1;
| |
− | delta = deltaY;
| |
− | }
| |
− | if ( 'deltaX' in orgEvent ) {
| |
− | deltaX = orgEvent.deltaX;
| |
− | if ( deltaY === 0 ) { delta = deltaX * -1; }
| |
− | }
| |
− |
| |
− | // No change actually happened, no reason to go any further
| |
− | if ( deltaY === 0 && deltaX === 0 ) { return; }
| |
− |
| |
− | // Need to convert lines and pages to pixels if we aren't already in pixels
| |
− | // There are three delta modes:
| |
− | // * deltaMode 0 is by pixels, nothing to do
| |
− | // * deltaMode 1 is by lines
| |
− | // * deltaMode 2 is by pages
| |
− | if ( orgEvent.deltaMode === 1 ) {
| |
− | var lineHeight = $.data(this, 'mousewheel-line-height');
| |
− | delta *= lineHeight;
| |
− | deltaY *= lineHeight;
| |
− | deltaX *= lineHeight;
| |
− | } else if ( orgEvent.deltaMode === 2 ) {
| |
− | var pageHeight = $.data(this, 'mousewheel-page-height');
| |
− | delta *= pageHeight;
| |
− | deltaY *= pageHeight;
| |
− | deltaX *= pageHeight;
| |
− | }
| |
− |
| |
− | // Store lowest absolute delta to normalize the delta values
| |
− | absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
| |
− |
| |
− | if ( !lowestDelta || absDelta < lowestDelta ) {
| |
− | lowestDelta = absDelta;
| |
− |
| |
− | // Adjust older deltas if necessary
| |
− | if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
| |
− | lowestDelta /= 40;
| |
− | }
| |
− | }
| |
− |
| |
− | // Adjust older deltas if necessary
| |
− | if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
| |
− | // Divide all the things by 40!
| |
− | delta /= 40;
| |
− | deltaX /= 40;
| |
− | deltaY /= 40;
| |
− | }
| |
− |
| |
− | // Get a whole, normalized value for the deltas
| |
− | delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
| |
− | deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
| |
− | deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
| |
− |
| |
− | // Normalise offsetX and offsetY properties
| |
− | if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
| |
− | var boundingRect = this.getBoundingClientRect();
| |
− | offsetX = event.clientX - boundingRect.left;
| |
− | offsetY = event.clientY - boundingRect.top;
| |
− | }
| |
− |
| |
− | // Add information to the event object
| |
− | event.deltaX = deltaX;
| |
− | event.deltaY = deltaY;
| |
− | event.deltaFactor = lowestDelta;
| |
− | event.offsetX = offsetX;
| |
− | event.offsetY = offsetY;
| |
− | // Go ahead and set deltaMode to 0 since we converted to pixels
| |
− | // Although this is a little odd since we overwrite the deltaX/Y
| |
− | // properties with normalized deltas.
| |
− | event.deltaMode = 0;
| |
− |
| |
− | // Add event and delta to the front of the arguments
| |
− | args.unshift(event, delta, deltaX, deltaY);
| |
− |
| |
− | // Clearout lowestDelta after sometime to better
| |
− | // handle multiple device types that give different
| |
− | // a different lowestDelta
| |
− | // Ex: trackpad = 3 and mouse wheel = 120
| |
− | if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
| |
− | nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
| |
− |
| |
− | return ($.event.dispatch || $.event.handle).apply(this, args);
| |
− | }
| |
− |
| |
− | function nullLowestDelta() {
| |
− | lowestDelta = null;
| |
− | }
| |
− |
| |
− | function shouldAdjustOldDeltas(orgEvent, absDelta) {
| |
− | // If this is an older event and the delta is divisable by 120,
| |
− | // then we are assuming that the browser is treating this as an
| |
− | // older mouse wheel event and that we should divide the deltas
| |
− | // by 40 to try and get a more usable deltaFactor.
| |
− | // Side note, this actually impacts the reported scroll distance
| |
− | // in older browsers and can cause scrolling to be slower than native.
| |
− | // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
| |
− | return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
| |
− | }
| |
− |
| |
− | }));
| |
| var pageColors = ["#3498db", "white", "white", "white", "white"] | | var pageColors = ["#3498db", "white", "white", "white", "white"] |
| | | |
− | var ddfullscreenslider = (function($){
| |
− |
| |
− | document.createElement('section')
| |
− | document.createElement('article')
| |
− |
| |
− | var defaults = {
| |
− | addHash: true,
| |
− | sliderstate: 'open', // reserved for future use
| |
− | keycodeNavigation: [40, 38], // keyCode codes for down and up naivagion, respectively
| |
− | transitionDuration: '0.5s',
| |
− | swipeconfig: {peekamount: 100, mousedrag: true},
| |
− | onslide: function($slide, index){
| |
− | console.log(index)
| |
− | var nav = document.getElementById("nav")
| |
− | var options = document.getElementsByClassName("navbar-nav")[0]
| |
− | nav.style.backgroundColor = pageColors[index]
| |
− | var list = options.classList
| |
− | list.forEach(function (x) {
| |
− | if (x.startsWith("page-"))
| |
− | list.remove(x)
| |
− | })
| |
− | options.classList.add("page-" + (index + 1))
| |
− | }
| |
− | }
| |
− |
| |
− | var transformprop = '' // variable to contain browser supported version of "transform" property
| |
− |
| |
− | function supportstranslate3d(){ // based on http://stackoverflow.com/a/12621264/4360074
| |
− | if (!window.getComputedStyle) {
| |
− | return false;
| |
− | }
| |
− | var $el = $('<div style="position:absolute" />').appendTo(document.body)
| |
− | var has3d
| |
− | $el.css('transform', 'translate3d(1px,1px,1px)')
| |
− | has3d = $el.css('transform')
| |
− | var findtransformprop = $el.get(0).style.cssText.match(/(\w|\-)*transform/i) // get "-vendor-transform" portion of CSS Text
| |
− | transformprop = (findtransformprop)? findtransformprop[0] : 'transform'
| |
− | $el.remove()
| |
− |
| |
− | return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
| |
− | }
| |
− |
| |
− |
| |
− | var $window = $(window)
| |
− | var $root = $('html')
| |
− |
| |
− | function ddfullscreenslider(setting){
| |
− | var translatesupport = supportstranslate3d()
| |
− | var s = $.extend({}, defaults, setting)
| |
− | var $slider = $('#' + s.sliderid)
| |
− | var $wrapper = $slider.find('div.slidewrapper').css({transitionDuration: s.transitionDuration})
| |
− | var $slides = $()
| |
− | var slideslength = 0
| |
− | var $nav = $()
| |
− | var thisslider = this
| |
− | var selectedindx = 0
| |
− | var hasharray = []
| |
− | var mouseslidetimer
| |
− | var swipeevts = {start:"", move:"", end:""}, swipestart = false, dy = 0, bounds = [,], scrollableclass = 'scrollable', bypassdrag = false
| |
− | var initialrun= true // indicate whether this is first time slider has run. After page loads, variable becomes false
| |
− |
| |
− | if (!translatesupport){
| |
− | s.transitionDuration = parseFloat(s.transitionDuration) * 1000
| |
− | }
| |
− |
| |
− | /** Function to call always after a slide is shown */
| |
− |
| |
− | function onslidealways($slide, index){
| |
− | if (!initialrun && s.addHash){
| |
− | var newhash = $nav.find('li').eq(selectedindx).find('a:eq(0)').attr('href')
| |
− | if (history.replaceState){
| |
− | history.replaceState(null, null, newhash)
| |
− | }
| |
− | else{
| |
− | window.location.hash = newhash
| |
− | }
| |
− | }
| |
− | s.onslide($slide, index) // user defined event handler
| |
− | }
| |
− |
| |
− | function hashtoselectedslide(hash){
| |
− | for (var i=0; i<hasharray.length; i++){
| |
− | if (hasharray[i][0] == hash){
| |
− | return i
| |
− | break
| |
− | }
| |
− | }
| |
− | return 0
| |
− | }
| |
− |
| |
− | function applybounds(val, swipedir){
| |
− | if (swipedir == "down"){
| |
− | return (translatesupport)? Math.max(-parseInt(bounds[1]), val) : Math.max(-bounds[1], val)
| |
− | }
| |
− | else{
| |
− | return (translatesupport)? Math.min(bounds[0], val) : Math.min(bounds[0], val)
| |
− | }
| |
− | }
| |
− |
| |
− | function isscrollable($target){ // check element finger is on is contained inside a "scrollable" element that's actually scrollable (scrollHeight exceeds container height)
| |
− | var $scrollel = $target.closest('.' + scrollableclass)
| |
− | var scrollel
| |
− | if ($scrollel.length == 1){
| |
− | scrollel = $scrollel.get(0)
| |
− | if (scrollel.offsetHeight < scrollel.scrollHeight){
| |
− | return true
| |
− | }
| |
− | }
| |
− | return false
| |
− | }
| |
− |
| |
− | /** Mousewheel and keyboard scroll related code. Requires jquery.mousewheel.min.js **/
| |
− |
| |
− | function mouseslide(deltaY){
| |
− | var targetindx = selectedindx
| |
− | if (deltaY < 0) // mouse down
| |
− | var targetindx = Math.min(slideslength-1, selectedindx+1)
| |
− | else if (deltaY > 0)
| |
− | var targetindx = Math.max(0, selectedindx-1)
| |
− | if (targetindx != selectedindx)
| |
− | thisslider.slideTo(targetindx)
| |
− | }
| |
− |
| |
− | $slider.on('mousewheel', function(event){
| |
− | clearTimeout(mouseslidetimer)
| |
− | var deltaY = event.deltaY
| |
− | mouseslidetimer = setTimeout(function(){
| |
− | mouseslide(deltaY)
| |
− | }, 100)
| |
− | return false
| |
− | })
| |
− |
| |
− | $(document).on('keyup', function(e){
| |
− | var targetindx = selectedindx
| |
− | if (e.keyCode == s.keycodeNavigation[0]) // key to go to next slide
| |
− | var targetindx = Math.min(slideslength-1, selectedindx+1)
| |
− | else if (e.keyCode == s.keycodeNavigation[1]) // key to go to previous slide
| |
− | var targetindx = Math.max(0, selectedindx-1)
| |
− | if (targetindx != selectedindx)
| |
− | {
| |
− | thisslider.slideTo(targetindx)
| |
− | }
| |
− | })
| |
− |
| |
− | /** Swipe/ Mouse Drag scroll related code **/
| |
− |
| |
− | swipeevts.start = 'touchstart' + (s.swipeconfig.mousedrag? ' mousedown' : '')
| |
− | swipeevts.move = 'touchmove.dragmove' + s.sliderid + (s.swipeconfig.mousedrag? ' mousemove.dragmove' + s.sliderid : '')
| |
− | swipeevts.end = 'touchend' + (s.swipeconfig.mousedrag? ' mouseup' : '')
| |
− |
| |
− | if (s.swipeconfig.mousedrag){
| |
− | $wrapper.bind('click', function(e){
| |
− | if ($wrapper.data('dy') != 0) // if dragging on belt instead of clicking on it
| |
− | e.preventDefault() // prevent default action
| |
− | })
| |
− | }
| |
− |
| |
− | $wrapper.bind(swipeevts.start, function(e){
| |
− | bypassdrag = false
| |
− | var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
| |
− | if ( isscrollable( $(e.target) ) ){ // if target is contained inside a "scrollable" element
| |
− | bypassdrag = true
| |
− | return
| |
− | }
| |
− | swipestart = true
| |
− | var mousey = e.pageY
| |
− | dy = 0 // reset swipe amount
| |
− | if (translatesupport){
| |
− | $wrapper.css({transition: 'none'})
| |
− | }
| |
− | var initialy = -$window.outerHeight() * selectedindx
| |
− | $wrapper.data({dy: dy})
| |
− | $(document).bind(swipeevts.move, function(e){
| |
− | if (bypassdrag){
| |
− | return
| |
− | }
| |
− | var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
| |
− | dy=e.pageY-mousey //distance to move horizontally
| |
− | var newy=initialy+dy
| |
− | newy = applybounds(newy, (dy < 0)? 'down' : 'up')
| |
− | if (translatesupport){
| |
− | $wrapper.css('transform', 'translate3d(0, ' + newy + 'px, 0)')
| |
− | }
| |
− | else{
| |
− | $wrapper.css('top', newy)
| |
− | }
| |
− | $wrapper.data({dy: dy})
| |
− | return false //cancel default drag action
| |
− | })
| |
− | if (e.type == "mousedown")
| |
− | return false //cancel default drag action
| |
− | })
| |
− |
| |
− | $(document).bind(swipeevts.end, function(e){
| |
− | $(document).unbind(swipeevts.move)
| |
− | if (!swipestart || bypassdrag)
| |
− | return
| |
− | if (dy != 0){ // if actual swipe has occured
| |
− | if (dy < 0 && dy < -s.swipeconfig.peekamount) // if swipe down and more than peek amount
| |
− | var targetindx = Math.min(slideslength-1, selectedindx+1)
| |
− | else if (dy > 0 && dy > s.swipeconfig.peekamount) // if swipe up and more than peek amount
| |
− | var targetindx = Math.max(0, selectedindx-1)
| |
− | else
| |
− | targetindx = selectedindx
| |
− | thisslider.slideTo(targetindx)
| |
− | if (e.type == "mouseup")
| |
− | return false
| |
− | }
| |
− | swipestart = false
| |
− | })
| |
− |
| |
− | /** CSS3 transition ontransitionend event set up */
| |
− |
| |
− | $wrapper.on('transitionend webkitTransitionEnd', function(e){
| |
− | if (/transform/i.test(e.originalEvent.propertyName)){ // check event fired on "transform" prop
| |
− | // onslidealways($slides.eq(selectedindx), selectedindx)
| |
− | }
| |
− | })
| |
− |
| |
− | /** Public functions **/
| |
− |
| |
− | this.reloadSlides = function(){
| |
− | $nav.remove()
| |
− | hasharray = []
| |
− | $nav = $('<ul class="fssnav" />')
| |
− | $slides = $('article.slide').each(function(i){
| |
− | var $curslide = $(this)
| |
− | var anchorval = $curslide.attr('id') || 'slide' + (i+1)
| |
− | anchorval = "#" + anchorval
| |
− | hasharray.push([anchorval, i])
| |
− | var title = $curslide.data('title') || anchorval
| |
− | var $navli = $('<li><a href="' + anchorval +'" title="' + title +'">' + (i + 1) + '</a></li>').appendTo($nav)
| |
− | var $navlink = $navli.find('a:eq(0)')
| |
− | $navli.on('click touchstart', function(e){
| |
− | thisslider.slideTo(i)
| |
− | })
| |
− | })
| |
− | $nav.on('click touchstart touchend', function(e){
| |
− | var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
| |
− | return false
| |
− | }).appendTo($slider)
| |
− | slideslength = $slides.length
| |
− | bounds = [0, $window.outerHeight() * (slideslength-1)]
| |
− | }
| |
− |
| |
− | this.openSlider = function(){
| |
− | initialrun = false
| |
− | bypassdrag = false
| |
− | s.sliderstate = 'open'
| |
− | $root.addClass('fssopen')
| |
− | $slider.css('visibility', 'visible')
| |
− | }
| |
− |
| |
− | this.closeSlider = function(){
| |
− | s.sliderstate = 'close'
| |
− | bypassdrag = true
| |
− | $root.removeClass('fssopen')
| |
− | $slider.css({visibility:'hidden'})
| |
− | }
| |
− |
| |
− | this.slideTo = function(indx, noanimation){
| |
− | onslidealways($slides.eq(selectedindx), indx)
| |
− | var newy = $window.outerHeight() * indx
| |
− | $nav.find('li').eq(selectedindx).removeClass('selected')
| |
− | $nav.find('li').eq(indx).addClass('selected')
| |
− | selectedindx = indx
| |
− | if (translatesupport){
| |
− | $wrapper.css({transition: (noanimation)? 'none' : transformprop + ' ' + s.transitionDuration})
| |
− | $wrapper.css('transform', 'translate3d(0, -' + newy + 'px, 0)')
| |
− | if (noanimation){ // run callback immediately
| |
− | onslidealways($slides.eq(selectedindx), selectedindx)
| |
− | }
| |
− | }
| |
− | else{
| |
− | $wrapper.stop().animate({top: -newy}, (noanimation)? 0 : s.transitionDuration, function(){
| |
− | onslidealways($slides.eq(selectedindx), selectedindx)
| |
− | })
| |
− | }
| |
− | }
| |
− |
| |
− | /** Initialize and show slider **/
| |
− |
| |
− | this.reloadSlides()
| |
− | selectedindx = hashtoselectedslide(window.location.hash)
| |
− | this.slideTo(selectedindx, true)
| |
− | if (s.sliderstate == 'open'){
| |
− | this.openSlider()
| |
− | }
| |
− |
| |
− | $(window).on('resize', function(){
| |
− | thisslider.slideTo(selectedindx, true)
| |
− | bounds = [0, $window.outerHeight() * (slideslength-1)]
| |
− | })
| |
− |
| |
− |
| |
− | } // end fullscreenslider def
| |
− |
| |
− | return ddfullscreenslider
| |
− |
| |
− | })(jQuery)
| |
| var fss | | var fss |
| $(function () { | | $(function () { |