https://strou-market.ru/themes/theme1351/js/autoload/17-jquery.scrollmagic.debug.js

1/*
2ScrollMagic v1.1.2
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.1.2
16	@license	Dual licensed under MIT license and GPL.
17	@author		Jan Paepke - [email protected]
18*/
19(function($, ScrollScene) {
20	/**
21	 * Add Indicators for a ScrollScene.  
22	 * __REQUIRES__ ScrollMagic Debug Extension: `jquery.scrollmagic.debug.js`  
23	 * The indicators can only be added _AFTER_ the scene has been added to a controller.
24	 * @public
25
26	 * @example
27	 * // add basic indicators
28	 * scene.addIndicators()
29	 *
30	 * // passing options
31	 * scene.addIndicators({zindex: 100, colorEnd: "#FFFFFF"});
32	 *
33	 * @param {object} [options] - An object containing one or more options for the indicators.
34	 * @param {(string|object)} [options.parent=undefined] - A selector, DOM Object or a jQuery object that the indicators should be added to.  
35	 														 If undefined, the scene's container will be used.
36	 * @param {number} [options.zindex=-1] - CSS zindex for the indicator container.
37	 * @param {number} [options.indent=0] - Additional position offset for the indicators (useful, when having multiple scenes starting at the same time).
38	 * @param {number} [options.suffix=""] - This string will be attached to the start and end indicator (useful for identification when working with multiple scenes).
39	 * @param {string} [options.colorTrigger=blue] - CSS color definition for the trigger indicator.
40	 * @param {string} [options.colorStart=green] - CSS color definition for the start indicator.
41	 * @param {string} [options.colorEnd=red] - CSS color definition for the end indicator.
42	*/
43	ScrollScene.prototype.addIndicators = function(opt) {
44		var
45			DEFAULT_OPTIONS = {
46				parent: undefined,
47				zindex: -1,
48				indent: 0,
49				suffix: "",
50				colorTrigger: "blue",
51				colorStart: "green",
52				colorEnd: "red"
53			};
54
55
56		var
57			scene = this,
58			options = $.extend({}, DEFAULT_OPTIONS, opt),
59			controller = this.parent();
60		if (controller) {
61			var
62				cParams = controller.info(),
63				suffix = (options.labelSuffix === "") ? "" : " " + options.suffix,
64				$container = $(options.parent).length > 0 ?
65						  $(options.parent)
66						: cParams.isDocument ? $("body") : cParams.container, // check if window element (then use body)
67				$wrap = $("<div></div>")
68						.addClass("ScrollSceneIndicators")
69						.data("options", options)
70						.css({
71							position: "absolute",
72							top: 0,
73							left: 0,
74							width: "100%",
75							height: "100%",
76							"text-align": "center",
77							"z-index": options.zindex,
78							"pointer-events": "none",
79							"font-size": 10
80						}),
81				$triggerHook = $("<div>trigger</div>")
82								.css({
83									position: "fixed",
84									overflow: "visible",
85									color: options.colorTrigger
86								})
87								.addClass("hook");
88				$start = $("<div>start" + suffix + "</div>")
89								.css({
90									position: "absolute",
91									overflow: "visible",
92									color: options.colorStart
93								})
94								.addClass("start");
95				$end = $("<div>end" + suffix + "</div>")
96								.css({
97									position: "absolute",
98									overflow: "visible",
99									color: options.colorEnd
100								})
101								.addClass("end");
102
103			if ($container.css("position") == "static") {
104				$container.css("position", "relative");

104 // positioning needed for correct display of indicators
105			}
106
107			scene.indicators = $wrap
108				    			.append($triggerHook)
109				    			.append($start)
110				    			.append($end)
111				    			.appendTo($container);
112
113			scene.updateIndicators();
114			var callUpdate = function (e) {
115				if ((e.type == "scroll" || e.type == "resize") && !cParams.isDocument) {
116					scene.updateIndicators(true);
117				} else {
118					scene.updateIndicators();
119				}
120			};
121			scene.on("change.debug", callUpdate);
122			cParams.container.on("resize scroll", callUpdate);
123			if (!cParams.isDocument) {
124				$(window).on("scroll resize", callUpdate);
125			}
126		} else {
127			console.log("ERROR: Please add Scene to controller before adding indicators.");
128		}
129		return scene;
130	};
131	ScrollScene.prototype.updateIndicators = function(triggerOnly) {
132		var
133			scene = this,
134			controller = scene.parent(),
135			indicators = scene.indicators,
136			options = indicators.data("options");
137		if (indicators && controller) {
138			var
139				cParams = controller.info(),
140				$triggerHook = indicators.children(".hook"),
141				$start = indicators.children(".start"),
142				$end = indicators.children(".end"),
143				parentOffset = cParams.container.offset() || {top: 0, left: 0},
144				parentPos = cParams.vertical ? parentOffset.top : parentOffset.left,
145				hookPos = (cParams.size * scene.triggerHook()) + parentPos,
146				direction = cParams.vertical ? "v" : "h";
147
148			if (cParams.isDocument) { // account for possible body positioning
149				var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset;
150				indicators.css({
151					top: -bodyOffset.top,
152					left: -bodyOffset.left
153				});
154			} else {
155				hookPos -=  cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
156			}
157
158			$triggerHook
159				.attr("data-hook", hookPos)
160				.attr("data-direction", direction)
161				.data("parent", cParams.container);
162
163			$otherhook = $(".ScrollSceneIndicators .hook[data-hook=\""+ hookPos +"\"][data-direction="+direction+"]:visible").not($triggerHook);
164			if ($otherhook.length > 0 && $otherhook.data("parent") == cParams.container) {
165				$triggerHook.hide();
166			} else {
167				$triggerHook.show();
168				var flip = hookPos > cParams.size*0.8; // put name above line?	
169				if (cParams.vertical) {
170					// triggerHook
171					$triggerHook.css({
172						top: flip ? hookPos - $triggerHook.height() - 2 : hookPos,
173						left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent,
174						width: 40,
175						height: "auto",
176						padding: "0 8px 2px 8px",
177						"border-top": flip ? "none" : "1px solid blue",
178						"border-bottom": flip ? "1px solid blue" : "none",
179						"border-left": "none",
180						"border-right": "none"
181					});
182				} else {
183					$triggerHook.css({
184						top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
185						left: flip ? hookPos - $triggerHook.width() - 9: hookPos,
186						width: "auto",
187						height: 20,
188						padding: "5px 5px 0 5px",
189						"border-top": "none",
190						"border-bottom": "none",
191						"border-left": flip ? "none" : "1px solid blue",
192						"border-right": flip ? "1px solid blue" : "none"
193					});
194				}
195			}
196			
197			if (!triggerOnly) {
198				var
199					startPos = scene.triggerPosition(),
200					endPos = startPos + scene.duration(),
201					resetCSS = {
202						"border": "none",
203						top: "auto",
204						bottom: "auto",
205						left: "auto",
206						right: "auto"
207					};
208				
209				$start.css(resetCSS);
210				$end.css(resetCSS);
211
212				if (scene.duration() === 0) {
213					$end.hide();
214				} else {
215					$end.show();
216				}
217				if (cParams.vertical) {
218					// start
219					$start.css({
220						top: startPos,
221						right: 71-cParams.container.scrollLeft() + options.indent,
222						"border-top": "1px solid green",
223						padding: "0 8px 0 8px"
224					});
225					// end
226					$end.css({
227						top: endPos,
228						right: 71-cParams.container.scrollLeft() + options.indent,
229						"border-top": "1px solid red",
230						padding: "0 8px 0 8px"
231					});
232				} else {
233					// start
234					$start.css({
235						left: startPos,
236						bottom: 40-cParams.container.scrollTop() + options.indent,
237						"border-left": "1px solid green",
238						padding: "0 8px 0 8px"
239					});
240					// end
241					$end.css({
242						left: endPos,
243						bottom: 40-cParams.container.scrollTop() + options.indent,
244						"border-left": "1px solid red",
245						padding: "0 8px 0 8px"
246					});
247				}
248			}
249		}
250	};
251})(jQuery, ScrollScene);