https://kyurijeon.com/javascript?26.11.18.1&1465424684

1/**
2 * Vega
3 */
4
5var Design = Design || {
6	 keyboardshortcuts: function() {
7		// Reset
8		Cargo.Core.KeyboardShortcut.Remove("J");
9		Cargo.Core.KeyboardShortcut.Remove("K");
10		Cargo.Core.KeyboardShortcut.Remove("I");
11		Cargo.Core.KeyboardShortcut.Remove("X");
12
13		// Next
14		Cargo.Core.KeyboardShortcut.Add("J", 74, function() {
15			Design.nextProject();
16		});
17
18		// Prev
19		Cargo.Core.KeyboardShortcut.Add("K", 75, function() {
20			Design.prevProject();
21		});
22
23		// Next
24		Cargo.Core.KeyboardShortcut.Add("Down", 74, function() {
25			Design.nextProject();
26		});
27
28		// Prev
29		Cargo.Core.KeyboardShortcut.Add("Up", 75, function() {
30			Design.prevProject();
31		});
32
33		// Index
34		Cargo.Core.KeyboardShortcut.Add("I", 73, function() {
35			window.location = Cargo.Helper.GetBaseUrl(true, true);
36		});
37
38		Cargo.Core.KeyboardShortcut.Add("X", 88, function() {
39			window.location = Cargo.Helper.GetBaseUrl(true, true);
40		});
41	},
42
43	nextProject: function() {
44		var pid = $(".project.active").parent().next().attr("data-id") || $(".project_container").first().attr("data-id");
45		Design.Project.scrollToProject(pid);
46	},
47
48	prevProject: function() {
49		var pid = $(".project.active").parent().prev().attr("data-id") || $(".project_container").last().attr("data-id");
50		Design.Project.scrollToProject(pid);
51	}
52};
53
54$(function() {
55	
56	if ( Cargo.Helper.isMobile() ) {
57	   $('body').addClass('mobile');
58	};
59	
60	Cargo.Core.ReplaceLoadingAnims.init();
61	Design.keyboardshortcuts();
62});
63
64/**
65 * Project methods
66 */
67
68Design.Project = {
69	"$container": null,
70	"$thumbcontainer": null,
71
72	data: {
73		"thumb_height"	 : 0,
74		"thumb_click"	 : false,
75		"thumb_hover"	 : false,
76		"scrollY"		 : 0,
77		"ticking"		 : null,
78		"last_project"	 : null,
79		"position_offset": 0,
80		"project_height" : 0,
81		"window_height"	 : 0
82	},
83
84	positions: [],
85
86	init: function() {
87		// Cache some elements
88		Design.Project.$container = $(window);
89		Design.Project.$thumbcontainer = $(".thumbnails_container");
90
91		// Set some data
92		Design.Project.data.thumb_height = $(".project_thumb:first").outerHeight();
93
94		// Set scroll event
95		Design.Project.$container
96			.bind("scroll", Design.Project.onScroll);
97
98		// Thumbnail scroll
99		Design.Project.$thumbcontainer
100			.bind("mouseenter", function() {
101				$("body").addClass("disable_scroll");
102				Design.Project.data.thumb_hover = true;
103			})
104			.bind("mouseleave", function() {
105				$("body").removeClass("disable_scroll");
106				Design.Project.data.thumb_hover = false;
107			});
108	},
109
110	paginateProjects: function() {
111		// Reset and set data
112		Design.Project.positions = [];
113
114		Design.Project.data.window_height = $(window).height();
115		Design.Project.data.position_offset = Math.floor((Design.Project.data.window_height - $(".thumb_block").height()) / Design.Project.data.thumb_height) / 2;
116
117		// Store the projects
118		$(".project").each(function() {
119			// Add the positions to an array
120			Design.Project.positions.push($(this).offset().top);
121
122			// Minimum height
123			$(this).css({
124				"min-height": Design.Project.data.window_height / 2 + 10 + "px"
125			});
126		});
127
128		// Scroll if we're not over thumbs
129		if (!Design.Project.data.thumb_hover) {
130			Design.Project.onScroll();
131		}
132	},
133
134	onScroll: function(e) {
135		Design.Project.scrollY = Design.Project.$container.scrollTop() + (Design.Project.data.window_height / 2);
136		Design.Project.requestTick();
137		if (e) {
138			e.stopPropagation();
139		}
140	},
141
142	requestTick: function() {
143		if (!Design.Project.ticking) {
144			requestAnimationFrame(Design.Project.scroll);
145		}
146
147		Design.Project.ticking = true;
148	},
149
150	scroll: function() {
151		// Update data
152		Design.Project.ticking = false;
153
154		for (var i = Design.Project.positions.length - 1; i >= 0; i--) {
155			var offset = Design.Project.positions[i];
156
157			if (Design.Project.scrollY > offset && Design.Project.scrollY != Design.Project.data.window_height / 2) {
158				// Active classes
159				if (i != Design.Project.data.last_project) {
160					// Reset old
161					if (Design.Project.data.last_project) {
162						Design.Project.data.last_project.removeClass("active");
163					}
164
165					// Update
166					Design.Project.data.last_project = $(".project").eq(i);
167					Design.Project.data.project_height = Design.Project.data.last_project.outerHeight();
168
169					// Set new
170					Design.Project.data.last_project.addClass("active");
171
172					// Ignore if clicked
173					if (!Design.Project.data.thumb_click) {
174						$(".project_thumb.active").removeClass("active");
175						$(".project_thumb").eq(i).addClass("active");
176					}
177				}
178
179				var position = Design.Project.scrollY - offset;
180					position = position / Design.Project.data.project_height;
181
182				var top =  (Design.Project.data.thumb_height * (i - Design.Project.data.position_offset));
183					top += (position * Design.Project.data.thumb_height);
184					top =  Math.floor(top);
185
186				// Scroll it
187				if (!Design.Project.data.thumb_click) {
188					if(Cargo.Helper.isIOS()){
189						Design.Project.$thumbcontainer.animate({
190							scrollTop: top
191						}, 0);
192					} else {
193						Design.Project.$thumbcontainer.scrollTop(top);
194					}
195				}
196
197				break;
198			}
199		};
200	},
201
202	formatThumbnails: function() {
203		$(".project_thumb").each(function() {
204			// Center the title
205			var offset = ($(this).height() - $(this).find(".thumb_title").height()) / 2;
206
207			$(this).find(".thumb_title").css({
208				paddingTop: offset + "px"
209			});
210
211			// Center the image
212			var thumb_width			  = $(this).find(".thumb_image img").width(),
213				thumb_container_width = $(this).find(".thumb_image").width();
214
215			// Margin
216			if (thumb_width > thumb_container_width) {
217				var margin = (thumb_width - thumb_container_width) / 2

218				$(this).find(".thumb_image img").css("margin-left", "-" + margin + "px");
219			}
220
221			$(this).addClass("formatted");
222		});
223	},
224
225	clickThumbnail: function() {
226		var click_timeout;
227
228		$("#project_thumbnails").on("click dblclick", ".project_thumb", function(e) {
229
230			if (e.metaKey || e.ctrlKey) {
231				var purl = Cargo.Helper.GetPurlFromPid($(this).attr("data-id"));
232	            window.open(Cargo.Helper.MakeDirectLinkFromPurl(purl));
233	        }
234
235			// Scroll to the project
236			if (!$(this).hasClass("active")) {
237				Design.Project.scrollToProject($(this).attr("data-id"));
238			}
239
240			// Active
241			$(".project_thumb").removeClass("active");
242			$(this).addClass("active");
243
244			$("#project_thumbnails").mouseleave();
245			setTimeout(function() {
246				$("#project_thumbnails").mouseenter();
247			}, 10);
248		});
249	},
250
251	scrollToProject: function(pid) {
252		var current_position = Design.Project.$container.scrollTop(),
253			new_position     = $(".project_container[data-id='" + pid + "']").position().top + 1;
254
255		// Direction
256		if (current_position > new_position) {
257			current_position = new_position + 50;
258		} else {
259			current_position = new_position - 50;
260		}
261
262		// Browser
263		var $scroll_target = $("body, html");
264
265		if (typeof InstallTrigger !== "undefined") {
266			$scroll_target = $("html");
267		}
268
269		// scroll to project
270		$scroll_target.scrollTop(current_position).animate({
271			scrollTop: new_position
272		}, 100);
273
274	}
275};
276
277$(function() {
278	Design.Project.formatThumbnails();
279	Design.Project.clickThumbnail();
280	Design.Project.init();
281
282	// Safari retina scroll bug fix
283	if (typeof InstallTrigger !== "undefined") {
284		$(".thumbnails_container").addClass("scrollfix");
285	}
286
287	setTimeout(function() {
288		Design.Project.paginateProjects();
289	}, 100);
290
291	var resizer;
292	$(window).resize(function(event) {
293		// Debounce
294		clearTimeout(resizer);
295		resizer = setTimeout(function() {
296			Design.Project.paginateProjects();
297		}, 100);
298	});
299});
300
301/**
302 * Events
303 */
304
305Cargo.Event.on("slideshow_thumbnails_toggle", function(el, obj) {
306	setTimeout(function() {
307		Design.Project.paginateProjects();
308	}, 100);
309});
310
311Cargo.Event.on("element_resizer_init", function(plugin) {
312	plugin.setOptions({
313		adjustElementsToWindowHeight: false,
314		centerElements: false
315	});
316});
317
318Cargo.Event.on("pagination_complete", function(new_page) {
319	Design.Project.formatThumbnails();
320
321	setTimeout(function() {
322		Cargo.Plugins.elementResizer.refresh();
323		Design.Project.paginateProjects();
324	}, 100);
325});
326
327Cargo.Event.on("project_collection_reset", function(new_page) {
328	Cargo.Core.log("Reset");
329	Design.Project.formatThumbnails();
330
331	setTimeout(function() {
332		Cargo.Plugins.elementResizer.refresh();
333		Design.Project.paginateProjects();
334	}, 100);
335});
336
337Cargo.Event.on("inspector_unload", function() {
338	Design.Project.formatThumbnails();
339});
340
341Cargo.Event.on("fullscreen_destroy_hotkeys", function() {
342    Design.keyboardshortcuts();
343});