Difference between revisions of "Team:USTC-Software"

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 () {

Revision as of 12:16, 23 October 2017

wikiHome </nowiki>