"

From 2014.igem.org

/* ScrollMagic v1.1.2 The jQuery plugin for doing magical scroll interactions. (c) 2014 Jan Paepke (@janpaepke) License & Info: http://janpaepke.github.io/ScrollMagic

Inspired by and partially based on SUPERSCROLLORAMA by John Polacek (@johnpolacek) http://johnpolacek.github.com/superscrollorama/

Powered by the Greensock Tweening Platform (GSAP): http://www.greensock.com/js Greensock License info at http://www.greensock.com/licensing/

• /

/* @overview Debug Extension for ScrollMagic. @version 1.1.2 @license Dual licensed under MIT license and GPL. @author Jan Paepke - e-mail@janpaepke.de

• /

(function($, ScrollScene) { /** * Add Indicators for a ScrollScene. * __REQUIRES__ ScrollMagic Debug Extension: `jquery.scrollmagic.debug.js` * The indicators can only be added _AFTER_ the scene has been added to a controller. * @public

* @example * // add basic indicators * scene.addIndicators() * * // passing options * scene.addIndicators({zindex: 100, colorEnd: "#FFFFFF"}); * * @param {object} [options] - An object containing one or more options for the indicators. * @param {(string|object)} [options.parent=undefined] - A selector, DOM Object or a jQuery object that the indicators should be added to. If undefined, the scene's container will be used. * @param {number} [options.zindex=-1] - CSS zindex for the indicator container. * @param {number} [options.indent=0] - Additional position offset for the indicators (useful, when having multiple scenes starting at the same time). * @param {number} [options.suffix=""] - This string will be attached to the start and end indicator (useful for identification when working with multiple scenes). * @param {string} [options.colorTrigger=blue] - CSS color definition for the trigger indicator. * @param {string} [options.colorStart=green] - CSS color definition for the start indicator. * @param {string} [options.colorEnd=red] - CSS color definition for the end indicator. */ ScrollScene.prototype.addIndicators = function(opt) { var DEFAULT_OPTIONS = { parent: undefined, zindex: -1, indent: 0, suffix: "", colorTrigger: "blue", colorStart: "green", colorEnd: "red" };

var scene = this, options = $.extend({}, DEFAULT_OPTIONS, opt), controller = this.parent(); if (controller) { var cParams = controller.info(), suffix = (options.labelSuffix === "") ? "" : " " + options.suffix, $container = $(options.parent).length > 0 ? $(options.parent) : cParams.isDocument ? $("body") : cParams.container, // check if window element (then use body)

$wrap = $("")

.addClass("ScrollSceneIndicators") .data("options", options) .css({ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", "text-align": "center", "z-index": options.zindex, "pointer-events": "none", "font-size": 10 }),

$triggerHook = $("")

.css({ position: "fixed", overflow: "visible", color: options.colorTrigger }) .addClass("hook");

$start = $("")

.css({ position: "absolute", overflow: "visible", color: options.colorStart }) .addClass("start");

$end = $("")

.css({ position: "absolute", overflow: "visible", color: options.colorEnd }) .addClass("end");

if ($container.css("position") == "static") { $container.css("position", "relative"); // positioning needed for correct display of indicators }

scene.indicators = $wrap .append($triggerHook) .append($start) .append($end) .appendTo($container);

scene.updateIndicators(); var callUpdate = function (e) { if ((e.type == "scroll" || e.type == "resize") && !cParams.isDocument) { scene.updateIndicators(true); } else { scene.updateIndicators(); } }; scene.on("change.debug", callUpdate); cParams.container.on("resize scroll", callUpdate); if (!cParams.isDocument) { $(window).on("scroll resize", callUpdate); } } else { console.log("ERROR: Please add Scene to controller before adding indicators."); } return scene; }; ScrollScene.prototype.updateIndicators = function(triggerOnly) { var scene = this, controller = scene.parent(), indicators = scene.indicators, options = indicators.data("options"); if (indicators && controller) { var cParams = controller.info(), $triggerHook = indicators.children(".hook"), $start = indicators.children(".start"), $end = indicators.children(".end"), parentOffset = cParams.container.offset() || {top: 0, left: 0}, parentPos = cParams.vertical ? parentOffset.top : parentOffset.left, hookPos = (cParams.size * scene.triggerHook()) + parentPos, direction = cParams.vertical ? "v" : "h";

if (cParams.isDocument) { // account for possible body positioning var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset; indicators.css({ top: -bodyOffset.top, left: -bodyOffset.left }); } else { hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft(); }

$triggerHook .attr("data-hook", hookPos) .attr("data-direction", direction) .data("parent", cParams.container);

$otherhook = $(".ScrollSceneIndicators .hook[data-hook=\""+ hookPos +"\"][data-direction="+direction+"]:visible").not($triggerHook); if ($otherhook.length > 0 && $otherhook.data("parent") == cParams.container) { $triggerHook.hide(); } else { $triggerHook.show(); var flip = hookPos > cParams.size*0.8; // put name above line? if (cParams.vertical) { // triggerHook $triggerHook.css({ top: flip ? hookPos - $triggerHook.height() - 2 : hookPos, left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent, width: 40, height: "auto", padding: "0 8px 2px 8px", "border-top": flip ? "none" : "1px solid blue", "border-bottom": flip ? "1px solid blue" : "none", "border-left": "none", "border-right": "none" }); } else { $triggerHook.css({ top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent, left: flip ? hookPos - $triggerHook.width() - 9: hookPos, width: "auto", height: 20, padding: "5px 5px 0 5px", "border-top": "none", "border-bottom": "none", "border-left": flip ? "none" : "1px solid blue", "border-right": flip ? "1px solid blue" : "none" }); } }

if (!triggerOnly) { var startPos = scene.triggerPosition(), endPos = startPos + scene.duration(), resetCSS = { "border": "none", top: "auto", bottom: "auto", left: "auto", right: "auto" };

$start.css(resetCSS); $end.css(resetCSS);

if (scene.duration() === 0) { $end.hide(); } else { $end.show(); } if (cParams.vertical) { // start $start.css({ top: startPos, right: 71-cParams.container.scrollLeft() + options.indent, "border-top": "1px solid green", padding: "0 8px 0 8px" }); // end $end.css({ top: endPos, right: 71-cParams.container.scrollLeft() + options.indent, "border-top": "1px solid red", padding: "0 8px 0 8px" }); } else { // start $start.css({ left: startPos, bottom: 40-cParams.container.scrollTop() + options.indent, "border-left": "1px solid green", padding: "0 8px 0 8px" }); // end $end.css({ left: endPos, bottom: 40-cParams.container.scrollTop() + options.indent, "border-left": "1px solid red", padding: "0 8px 0 8px" }); } } } }; })(jQuery, ScrollScene);