https://scrollmagic.io/assets/js/examples.js

1// SETTINGS
2var
3	MENU = {
4		"basic": {
5			title: "Basic",
6			sub: {
7				"simple_tweening.html" :				"Animating with GSAP",
8				"simple_velocity.html" :				"Animating with Velocity",
9				"simple_pinning.html" :					"Sticky Elements (pinning)",
10				"section_wipes_natural.html" :	"Section Wipes (natural)",
11				"scene_manipulation.html" :			"Scene Manipulation",
12				"going_horizontal.html" :				"Going Horizontal",
13				"class_toggles.html" :					"CSS Class Toggles",
14				"reveal_on_scroll.html" :				"Reveal on Scroll",
15				"responsive_duration.html" :		"Responsive Duration",
16				"custom_actions.html" :					"Custom Actions",
17				"debugging.html" :							"Debugging",
18			}
19		},
20		"advanced": {
21			title: "Advanced",
22			sub: {
23				"animate_css.html" :						"Animating with CSS",
24				"advanced_tweening.html" :			"Advanced Tweening",
25				"section_wipes_manual.html" :		"Section Wipes (manual)",
26				"section_slides_manual.html" :	"Section Slides (manual)",
27				"svg_drawing.html" :						"SVG Drawing",
28				"custom_containers.html" :			"Custom Containers",
29				"mobile_basic.html" :						"Mobile Support (Basic)",
30				"anchor_link_scrolling.html" :	"Anchor Link Scrolling",
31				"parallax_scrolling.html" :			"Parallax Scrolling",
32				"parallax_sections.html" :			"Parallax Sections",
33				"infinite_scrolling.html" :			"Infinite Scrolling",
34			}
35		},
36		"expert": {
37			title: "Expert",
38			sub: {
39				"cascading_pins.html" :							"Cascading Pins",
40				"callback_duration.html" :					"Callback Duration",
41				"manipulating_tweens.html" :				"Manipulating Tweens",
42				"bezier_path_animation.html" :			"Bezier Path Animation",
43				"multiple_scroll_directions.html" :	"Multiple Scroll Directions",
44				"mobile_advanced.html" :						"Mobile Support (Advanced)",
45				"image_sequence.html" :							"Image Sequence",
46				"removing_and_destroying.html" :		"Removing and Destroying",
47			}
48		}
49	};
50
51// badges
52var badges = {
53	'gsap' : {
54		url : "http://scrollmagic.io/docs/animation.GSAP.html",
55		name : "the Greensock Animation Platform"
56	},
57	'velocity' : {
58		url : "http://scrollmagic.io/docs/animation.Velocity.html",
59		name : "Velocity.js"
60	}
61};
62
63// vars
64
65var
66	path = window.location.pathname.split("/"),
67	isRoot = (path.length <= 1 || MENU[path[path.length-2]] === undefined);
68
69// functions
70
71function getCode($elem) {
72	var
73		source = $($elem)
74				  .clone()
75				  .html(),
76		lines = source.split("\n"),
77		linenumbers = "";
78
79
80	// kill empty lines at start/end
81	while (lines.length > 0 && $.trim(lines[0]) === "") {
82		lines.shift();
83	}
84	while (lines.length > 0 && $.trim(lines[lines.length - 1]) === "") {
85		lines.pop();
86	}
87
88	// make linenumbers
89	for (var i = 1; i <= lines.length; i++) {
90		linenumbers += i + "\n";
91	}
92
93	// normalize base indentation
94	var tabAtStart = /^\t/g;
95	while (lines[0].search(tabAtStart) > -1) {
96		$.each(lines, function (index, value) {
97			lines[index] = value.replace(tabAtStart, "");
98		});
99	}
100
101	return {
102		source: lines.join("\n"),
103		linenumbers: linenumbers
104	};
105}
106
107function showCode ($elem) {
108	var
109		code = getCode($elem);
110	
111	if ($elem.is("section.demo")) {
112		// complicated but i want to keep identation.
113		var $desc = $("div#example-wrapper section#titlechart").clone();
114		$desc.find(":not(script)").remove();
115		if ($desc.children().length > 0) {
116			var startcode = getCode($desc);
117			code.linenumbers = startcode.linenumbers + "᎒" + code.linenumbers;
118			code.source = startcode.source + "᎒" + code.source;
119		}
120	}
121
122	// insert
123	var $code = 	$("<div>")
124					.addClass("code")
125					.addClass("doselect")
126					.text(code.source)
127					.wrapInner("<pre>"),
128		$ln =		$("<div>")
129					.addClass("linenumbers")
130					.addClass("noselect")
131					.html(code.linenumbers)
132					.wrapInner("<pre>"),
133		$close = 	$("<div>")
134					.attr("id", "close")
135					.addClass("button"),
136		$select =	$("<div>")
137					.attr("id", "select")
138					.addClass("button")
139					.text("select all"),
140		$codewrap = $("<div>")
141					.addClass("codewrap")
142					.append($ln)
143					.append($code);
144	
145	$("<div>")
146		.attr("id", "codecontainer")
147		.append($codewrap)
148		.append($close)
149		.append($select)
150		.appendTo("body");
151
152	// avoid selecting parts of document, when selecting code.
153	$("html").css("user-select", "none");
154	disableScroll();
155
156	// highlight
157	hljs.highlightBlock($code.get(0));
158
159	$code.html($code.html().replace("᎒", '<div class="break noselect"> </div>'));
160	$ln.html($ln.html().replace("᎒", '<div class="break noselect"></div>'));
161}
162
163function hideCode() {
164	$("body > div#codecontainer").remove();
165	$("html").css("user-select", "");
166	enableScroll();
167}
168
169function selectCode() {
170	var $code = $("body > div#codecontainer .code");
171	if ($code[0]) {
172		if (document.body.createTextRange) { // IE
173			range = document.body.createTextRange();
174			range.moveToElementText($code[0]);
175			range.select();
176		} else if (window.getSelection) { // all others
177			selection = window.getSelection();
178			range = document.createRange();
179			range.selectNodeContents($code[0]);
180			selection.removeAllRanges();
181			selection.addRange(range);
182		}
183	}
184}
185
186function disableScroll (elem) {
187	if (elem === undefined) elem = window;
188	var

189		$node = document.ownerDocument ? $(elem) : $("body");
190		pos = {
191			x : $(elem).scrollLeft(),
192			y : $(elem).scrollTop()
193		};
194	$node.css("overflow", "hidden");
195	$(elem).on("scroll.PREVENT", function (e) {
196		$(elem).scrollLeft(pos.x);
197		$(elem).scrollTop(pos.y);
198		e.stopPropagation();
199	});
200}
201
202function enableScroll (elem) {
203	if (elem === undefined) elem = window;
204	var $node = document.ownerDocument ? $(elem) : $("body");
205	$node.css("overflow", "");
206	$(elem).off("scroll.PREVENT");
207}
208
209$(document).ready(function () {
210	// prepare highlight js
211	
212
213	// build menu
214	var
215		$menu = $("ul#menu")
216			.wrap("<div>"),
217		$menuwrap = $menu.parent()
218			.addClass("menuwrap");
219
220	if ($menu.length > 0) {
221		var
222			path = document.location.href.split("/"),
223			curSub = path.pop(),
224			curMain = path.pop(),
225			lastExample, prevExample, nextExample, foundExample;
226		$.each(MENU, function (mainID, submenu) {
227			var
228				path = isRoot ? mainID : "../" + mainID;
229				$li = $("<li>").appendTo($menu),
230				$a = $("<a href='" + path + "'>" + submenu.title + "</a>").appendTo($li),
231				$ul_sub = $("<ul>").appendTo($li);
232			if (mainID == curMain) {
233				$li.addClass("current");
234			}
235			$.each(submenu.sub, function (subURL, subTitle) {
236				var
237					$li = $("<li>").appendTo($ul_sub),
238					$a = $("<a href='" + path + "/" + subURL + "'>" + subTitle + "</a>").appendTo($li);
239				if (mainID == curMain && subURL == curSub) {
240					$li.addClass("current");
241					prevExample = lastExample;
242					foundExample = true;
243					return;
244				}
245				lastExample = {url: path + "/" + subURL, title: submenu.title + " / " + subTitle};
246				if (foundExample === true) {
247					nextExample = lastExample;
248					foundExample = false;
249				}
250			});
251		});
252
253		if ($menuwrap.parent().is("body")) {
254
255			if (prevExample) {
256				$("<a href='" + prevExample.url + "' title='" + prevExample.title + "'>◄</a>").addClass("prev").appendTo($menuwrap);
257			}
258			if (nextExample) {
259				$("<a href='" + nextExample.url + "' title='" + nextExample.title + "'>►</a>").addClass("next").appendTo($menuwrap);
260			}
261
262		}
263		if (Modernizr.touch) { // add touch menu
264			$menubtn = $("<button>")
265						.append("<span class='button-lines' aria-hidden='true'></span>")
266						.addClass("menubtn")
267						.appendTo($menu.parent());
268			$menubtn.on("click", function () {
269				$menuwrap.toggleClass("open");
270			});
271			$menuwrap.prependTo("body");
272
273			// hack for viewport height
274			$("section#titlechart").height($(window).height()); // dirty, but vh seems to be inconsistent on mobile
275		}
276	}
277
278	// store initial HTML of code
279	$("a.viewsource").each(function () {
280		var
281			demoSelector = ".demowrap, section.demo:not(.demowrap .demo)",
282			$demoElements = $(demoSelector),
283			$relevantCode = $demoElements.length <= 1 ? $demoElements : $(this).parents(demoSelector + ", div#example-wrapper, body").first();
284		$(this).data("code", $relevantCode.clone());
285	});
286
287	// build sliders
288	$("div.slider+input")
289		.prop("disabled", true)
290		.on("change", function () {
291			$(this).prev().find(".handle").css("left", Math.round(($(this).val() - parseFloat($(this).attr("min"))) / (parseFloat($(this).attr("max")) - parseFloat($(this).attr("min"))) * 100) + "%");
292		})
293		.prev()
294			.append("<div class=\"trackbar\"></div>")
295			.append("<div class=\"handle\"></div>")
296			.end()
297		.change(); // trigger to init
298
299
300	// add tooltips to badges
301	$.each(badges, function (key, badge) {
302		$("h1.badge." + key).attr("title", "This example requires the " + badge.name + ".");
303	});
304
305});
306
307// event listener
308$(document).on("click", "ul#menu > li > a", function (e) {
309	e.preventDefault();
310});
311
312$(document).on("click", "h1.badge", function (e) {
313	$.each(badges, function (key, badge) {
314		if ($(e.target).hasClass(key)) {
315			e.preventDefault();
316			window.open(badge.url, "_blank");
317			return;
318		}
319	});
320});
321
322$(document).on("click", "a.viewsource", function (e) {
323	e.preventDefault();
324	showCode($(this).data("code"));
325});
326
327$(document).on("click", "#codecontainer #close.button", hideCode);
328$(document).on("click", "#codecontainer #select.button", selectCode);
329$(document).on("keydown", function (e) {
330	if (e.which == 27) {
331		e.preventDefault();
332		hideCode();
333	}
334});
335
336// dragables / slider
337$(document).on("mousedown", ".slider, .move", function (e) {
338	if (e.which === 1) { // only left mouse button
339		var $this = $(this);
340		if ($this.is(".slider") || e.target == this) { // only the element itself,  not the children, unless its the slider
341			e.stopPropagation();
342			var
343				offset = $this.offset(),
344				drag = {top: offset.top - $(document).scrollTop(), left: offset.left - $(document).scrollLeft()};
345			if ($this.is(".move")) {
346				drag.top -= e.pageY;
347				drag.left -= e.pageX;
348			}
349			$this.data("drag", drag);
350			$this.addClass("dragging");
351			$("html").addClass("noselect");
352		}
353	}
354});
355
356$(document).on("mouseup mousemove", function (e) {
357	$(".move.dragging").each(function (f) {
358		var data = $(this).data("drag");
359		if (data) {
360			$(this).css({
361				top:  data.top + e.pageY,
362				left: data.left + e.pageX
363			});
364		}
365	});
366	$(".slider.dragging").each(function (f) {
367		var data = $(this).data("drag");
368		if (data) {
369			var
370				pos = e.pageX - data.left,
371				width = $(this).width(),
372				$input = $(this).next("input"),
373				min = parseFloat($input.attr("min")) || 0,
374				max = parseFloat($input.attr("max")) || width,
375				step = 1/parseFloat($input.attr("step")) || 1;
376			if (pos <= 0) {
377				pos = 0;
378			}
379			if (pos >= width) {
380				pos = width;
381			}
382			var
383				perc = pos/width,
384				val = (max-min) * perc + min,
385				decimals = Math.log(step) / Math.LN10;
386			// mind the step
387			val = Math.round(val*step)/step;
388			$(this).find(".handle").css("left", pos);
389
390			$input.val(val.toFixed(decimals));
391			if ($(this).hasClass("liveupdate")) {
392				$input.change();	
393			}
394		}
395	});
396});
397
398$(document).on("mouseup", function (e) {
399	$(".slider.dragging + input").change(); // trigger change
400	$(".move.dragging, .slider.dragging")
401		.data("drag", null)
402		.removeClass("dragging");
403	$("html").removeClass("noselect");
404});
405
406$(document).on("orientationchange", function (e) {
407	if ($("#example-wrapper.horizontal").length > 0) {
408		$("meta[name='viewport']").attr("content", (window.orientation === 0 ? "width" : "height")+ "=500");
409	}
410});
411$(document).trigger("orientationchange");
412
413
414