1/* 2ScrollMagic v1.3.0 3The jQuery plugin for doing magical scroll interactions. 4(c) 2014 Jan Paepke (@janpaepke) 5License & Info: http://janpaepke.github.io/ScrollMagic 6 7Inspired by and partially based on SUPERSCROLLORAMA by John Polacek (@johnpolacek) 8http://johnpolacek.github.com/superscrollorama/ 9 10Powered by the Greensock Tweening Platform (GSAP): http://www.greensock.com/js 11Greensock License info at http://www.greensock.com/licensing/ 12*/ 13/* 14 @overview Debug Extension for ScrollMagic. 15 @version 1.3.0 16 @license Dual licensed under MIT license and GPL. 17 @author Jan Paepke - [email protected] 18*/ 19(function (root, factory) { 20 if (typeof define === 'function' && define.amd) { 21 // AMD. Register as an anonymous module. 22 define(['ScrollMagic', 'jquery'], function(sm, $) { 23 factory(sm.Scene, $); 24 }); 25 } else { 26 // no browser global export needed, just execute 27 factory(root.ScrollScene, root.jQuery); 28 } 29}(this, function(ScrollScene, $) { 30 /** 31 * Add Indicators for a ScrollScene. 32 * __REQUIRES__ ScrollMagic Debug Extension: `jquery.scrollmagic.debug.js` 33 * The indicators can only be added _AFTER_ the scene has been added to a controller. 34 * @public 35 36 * @example 37 * // add basic indicators 38 * scene.addIndicators() 39 * 40 * // passing options 41 * scene.addIndicators({zindex: 100, colorEnd: "#FFFFFF"}); 42 * 43 * @param {object} [options] - An object containing one or more options for the indicators. 44 * @param {(string|object)} [options.parent=undefined] - A selector, DOM Object or a jQuery object that the indicators should be added to. 45 If undefined, the scene's container will be used. 46 * @param {number} [options.zindex=-1] - CSS zindex for the indicator container. 47 * @param {number} [options.indent=0] - Additional position offset for the indicators (useful, when having multiple scenes starting at the same time). 48 * @param {number} [options.suffix=""] - This string will be attached to the start and end indicator (useful for identification when working with multiple scenes). 49 * @param {string} [options.colorTrigger=blue] - CSS color definition for the trigger indicator. 50 * @param {string} [options.colorStart=green] - CSS color definition for the start indicator. 51 * @param {string} [options.colorEnd=red] - CSS color definition for the end indicator. 52 */ 53 ScrollScene.prototype.addIndicators = function(opt) { 54 var 55 DEFAULT_OPTIONS = { 56 parent: undefined, 57 zindex: -1, 58 indent: 0, 59 suffix: "", 60 colorTrigger: "blue", 61 colorStart: "green", 62 colorEnd: "red" 63 }; 64 65 66 var 67 scene = this, 68 options = $.extend({}, DEFAULT_OPTIONS, opt), 69 controller = this.parent(); 70 if (controller) { 71 var 72 cParams = controller.info(), 73 suffix = (options.labelSuffix === "") ? "" : " " + options.suffix, 74 $container = $(options.parent).length > 0 ? 75 $(options.parent) 76 : cParams.isDocument ? $("body") : cParams.container, // check if window element (then use body) 77 $wrap = $("<div></div>") 78 .addClass("ScrollSceneIndicators") 79 .data("options", options) 80 .css({ 81 position: "absolute", 82 top: 0, 83 left: 0, 84 width: "100%", 85 height: "100%", 86 "text-align": "center", 87 "z-index": options.zindex, 88 "pointer-events": "none", 89 "font-size": 10 90 }), 91 $triggerHook = $("<div>trigger</div>") 92 .css({ 93 position: "fixed", 94 overflow: "visible", 95 color: options.colorTrigger 96 }) 97 .addClass("hook"); 98 $start = $("<div>start" + suffix + "</div>") 99 .css({ 100 position: "absolute", 101 overflow: "visible", 102 color: options.colorStart 103 }) 104 .addClass("start"); 105 $end = $("<div>end" + suffix + "</div>") 106 .css({ 107 position: "absolute", 108 overflow: "visible", 109 color: options.colorEnd 110 }) 111 .addClass("end"); 112 113 if ($container.css("position") == "static") { 114 $container.css("position", "relative");
114 // positioning needed for correct display of indicators 115 } 116 117 scene.indicators = $wrap 118 .append($triggerHook) 119 .append($start) 120 .append($end) 121 .appendTo($container); 122 123 scene.updateIndicators(); 124 var callUpdate = function (e) { 125 if ((e.type == "scroll" || e.type == "resize") && !cParams.isDocument) { 126 scene.updateIndicators(true); 127 } else { 128 scene.updateIndicators(); 129 } 130 }; 131 scene.on("change.debug", callUpdate); 132 cParams.container.on("resize scroll", callUpdate); 133 if (!cParams.isDocument) { 134 $(window).on("scroll resize", callUpdate); 135 } 136 } else { 137 console.log("ERROR: Please add Scene to controller before adding indicators."); 138 } 139 return scene; 140 }; 141 ScrollScene.prototype.updateIndicators = function(triggerOnly) { 142 var 143 scene = this, 144 controller = scene.parent(), 145 indicators = scene.indicators, 146 options = indicators.data("options"); 147 if (indicators && controller) { 148 var 149 cParams = controller.info(), 150 $triggerHook = indicators.children(".hook"), 151 $start = indicators.children(".start"), 152 $end = indicators.children(".end"), 153 parentOffset = cParams.container.offset() || {top: 0, left: 0}, 154 parentPos = cParams.vertical ? parentOffset.top : parentOffset.left, 155 hookPos = (cParams.size * scene.triggerHook()) + parentPos, 156 direction = cParams.vertical ? "v" : "h"; 157 158 if (cParams.isDocument) { // account for possible body positioning 159 var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset; 160 indicators.css({ 161 top: -bodyOffset.top, 162 left: -bodyOffset.left 163 }); 164 } else { 165 hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft(); 166 } 167 168 $triggerHook 169 .attr("data-hook", hookPos) 170 .attr("data-direction", direction) 171 .data("parent", cParams.container); 172 173 $otherhook = $(".ScrollSceneIndicators .hook[data-hook=\""+ hookPos +"\"][data-direction="+direction+"]:visible").not($triggerHook); 174 if ($otherhook.length > 0 && $otherhook.data("parent") == cParams.container) { 175 $triggerHook.hide(); 176 } else { 177 $triggerHook.show(); 178 var flip = hookPos > cParams.size*0.8; // put name above line? 179 if (cParams.vertical) { 180 // triggerHook 181 $triggerHook.css({ 182 top: flip ? hookPos - $triggerHook.height() - 2 : hookPos, 183 left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent, 184 width: 40, 185 height: "auto", 186 padding: "0 8px 2px 8px", 187 "border-top": flip ? "none" : "1px solid blue", 188 "border-bottom": flip ? "1px solid blue" : "none", 189 "border-left": "none", 190 "border-right": "none" 191 }); 192 } else { 193 $triggerHook.css({ 194 top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent, 195 left: flip ? hookPos - $triggerHook.width() - 9: hookPos, 196 width: "auto", 197 height: 20, 198 padding: "5px 5px 0 5px", 199 "border-top": "none", 200 "border-bottom": "none", 201 "border-left": flip ? "none" : "1px solid blue", 202 "border-right": flip ? "1px solid blue" : "none" 203 }); 204 } 205 } 206 207 if (!triggerOnly) { 208 var 209 startPos = scene.triggerPosition(), 210 endPos = startPos + scene.duration(), 211 resetCSS = { 212 "border": "none", 213 top: "auto", 214 bottom: "auto", 215 left: "auto", 216 right: "auto" 217 }; 218 219 $start.css(resetCSS); 220 $end.css(resetCSS); 221 222 if (scene.duration() === 0) { 223 $end.hide(); 224 } else { 225 $end.show(); 226 } 227 if (cParams.vertical) { 228 // start 229 $start.css({ 230 top: startPos, 231 right: 71-cParams.container.scrollLeft() + options.indent, 232 "border-top": "1px solid green", 233 padding: "0 8px 0 8px" 234 }); 235 // end 236 $end.css({ 237 top: endPos, 238 right: 71-cParams.container.scrollLeft() + options.indent, 239 "border-top": "1px solid red", 240 padding: "0 8px 0 8px" 241 }); 242 } else { 243 // start 244 $start.css({ 245 left: startPos, 246 bottom: 40-cParams.container.scrollTop() + options.indent, 247 "border-left": "1px solid green", 248 padding: "0 8px 0 8px" 249 }); 250 // end 251 $end.css({ 252 left: endPos, 253 bottom: 40-cParams.container.scrollTop() + options.indent, 254 "border-left": "1px solid red", 255 padding: "0 8px 0 8px" 256 }); 257 } 258 } 259 } 260 }; 261}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.