https://www.cnvv.fr/inc/unitegallery/themes/carousel/ug-theme-carousel.js

1
2if(typeof g_ugFunctions != "undefined")
3	g_ugFunctions.registerTheme("carousel");
4else 
5	jQuery(document).ready(function(){g_ugFunctions.registerTheme("carousel")});
6
7
8/**
9 * Grid gallery theme
10 */
11function UGTheme_carousel(){
12
13	var t = this;
14	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper;
15	var g_lightbox = new UGLightbox(), g_carousel = new UGCarousel();
16	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();;
17	var g_objNavWrapper, g_objButtonLeft, g_objButtonRight, g_objButtonPlay, g_objPreloader;
18	var g_apiDefine = new UG_API();
19	
20	var g_options = {
21			theme_gallery_padding: 0,				//the padding of the gallery wrapper
22			
23			theme_carousel_align: "center",			//the align of the carousel
24			theme_carousel_offset: 0,				//the offset of the carousel from the align sides
25
26			theme_enable_navigation: true,
27			theme_navigation_position: "bottom",	//top,bottom: the vertical position of the navigation reative to the carousel
28			theme_navigation_enable_play: true,		//enable / disable the play button of the navigation
29			theme_navigation_align: "center",		//the align of the navigation
30			theme_navigation_offset_hor: 0,			//horizontal offset of the navigation
31			theme_navigation_margin: 20,			//the space between the carousel and the navigation
32			theme_space_between_arrows: 5			//the space between arrows in the navigation
33	};
34	
35	var g_defaults = {
36			gallery_width: "100%",
37			tile_width: 160,
38			tile_height: 160,
39			tile_enable_border: true,
40			tile_enable_outline: true,
41			carousel_vertical_scroll_ondrag: true
42	};
43	
44	
45	//temp variables
46	var g_temp = {
47	};
48	
49	
50	/**
51	 * Init the theme
52	 */
53	function initTheme(gallery, customOptions){
54		
55		g_gallery = gallery;
56		
57		//set default options
58		g_options = jQuery.extend(g_options, g_defaults);
59		
60		//set custom options
61		g_options = jQuery.extend(g_options, customOptions);
62		
63		//modifyOptions();
64		
65		//set gallery options
66		g_gallery.setOptions(g_options);
67		
68		g_gallery.setFreestyleMode();
69		
70		g_objects = gallery.getObjects();
71		
72		//get some objects for local use
73		g_objGallery = jQuery(gallery);		
74		g_objWrapper = g_objects.g_objWrapper;
75		
76		//init objects
77		g_lightbox.init(gallery, g_options);
78		
79		g_carousel.init(gallery, g_options);
80		
81		g_objTileDesign = g_carousel.getObjTileDesign();
82	}
83	
84	
85	/**
86	 * set gallery html elements
87	 */
88	function setHtml(){
89				
90		//add html elements
91		g_objWrapper.addClass("ug-theme-carousel");
92		
93		g_carousel.setHtml(g_objWrapper);
94		
95		if(g_options.theme_enable_navigation == true){
96			var htmlAdd = "<div class='ug-tile-navigation-wrapper' style='position:absolute'>";
97			htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-left'></div>";
98			
99			//put play/pause button
100			if(g_options.theme_navigation_enable_play == true)
101				htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-play'></div>";
102			
103			htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-right'></div>";
104			htmlAdd += "</div>";
105			g_objWrapper.append(htmlAdd);
106			
107			g_objNavWrapper = g_objWrapper.children(".ug-tile-navigation-wrapper");
108			
109			g_objButtonLeft = g_objNavWrapper.children(".ug-button-tile-left");
110			g_objButtonRight = g_objNavWrapper.children(".ug-button-tile-right");
111			
112			g_objButtonLeft.css("margin-right",g_options.theme_space_between_arrows+"px");
113			
114			if(g_options.theme_navigation_enable_play == true){			
115				g_objButtonPlay = g_objNavWrapper.children(".ug-button-tile-play");
116				g_objButtonPlay.css("margin-right",g_options.theme_space_between_arrows+"px");
117			}
118			
119		}
120		
121		g_lightbox.putHtml();
122
123		//add preloader
124		g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>");
125		g_objPreloader = g_objWrapper.children(".ug-tiles-preloader");
126		g_objPreloader.fadeTo(0,0);
127		
128	}
129
130	/**
131	 * get gallery width available for the grid
132	 */
133	function getGalleryWidth(){
134		var galleryWidth = g_gallery.getSize().width;
135		galleryWidth -= g_options.theme_gallery_padding * 2;
136		
137		return(galleryWidth);
138	}
139	
140	/**
141	 * get estimated height of the carousel and the navigation
142	 */
143	function getEstimatedHeight(){
144		var height = g_carousel.getEstimatedHeight();
145		
146		if(g_objNavWrapper){
147			var navHeight = g_objNavWrapper.height();
148			height += navHeight + g_options.theme_navigation_margin;
149		}
150		
151		return(height);
152	}
153	
154	/**
155	 * actually run the theme
156	 */
157	function actualRun(){
158		
159		//first set the height, maybe scrollbars will appear
160		var galleryHeight = getEstimatedHeight();
161		g_objWrapper.height(galleryHeight);
162		
163		var galleryWidth = getGalleryWidth();
164
165		initEvents();
166		
167		g_carousel.setMaxWidth(galleryWidth);
168		g_carousel.run();
169		
170		g_lightbox.run();
171			
172		positionElements();
173		
174	}
175	
176	
177	/**
178	 * run the theme
179	 */
180	function runTheme(){
181		
182		setHtml();
183		
184		actualRun();
185		
186	}
187	
188	
189	/**
190	 * position elements
191	 */
192	function positionElements(){
193		
194		var carouselElement = g_carousel.getElement();
195		var sizeCar = g_functions.getElementSize(carouselElement);
196
197		var navHeight = 0;
198		
199		if(g_objNavWrapper){
200			var sizeNav = g_functions.getElementSize(g_objNavWrapper);
201			navHeight = sizeNav.height;
202		}
203				
204		var galleryHeight = sizeCar.height;
205		
206		if(navHeight > 0)
207			galleryHeight += g_options.theme_navigation_margin + navHeight;
208		
209		//vars for bottom nav position
210		var carouselTop = 0;
211		
212		if(g_objNavWrapper){
213			
214			var navTop = sizeCar.height + g_options.theme_navigation_margin;
215			
216			//change vars for top nav position
217			if(g_options.theme_navigation_position == "top"){
218				
219				carouselTop = sizeNav.height + g_options.theme_navigation_margin;
220				navTop = 0;
221			}
222		}
223		
224		//align the carousel

225		g_functions.placeElement(carouselElement, g_options.theme_carousel_align, carouselTop, g_options.theme_carousel_offset, 0);
226		var sizeCar = g_functions.getElementSize(carouselElement);
227		
228		//position buttons
229		if(g_objNavWrapper){
230			var navX = sizeCar.left + g_functions.getElementRelativePos(g_objNavWrapper, g_options.theme_navigation_align, g_options.theme_navigation_offset_hor, carouselElement);
231			g_functions.placeElement(g_objNavWrapper, navX, navTop);
232			
233		}
234		
235		g_objWrapper.height(galleryHeight);		//temp height
236
237		//place preloader
238		g_functions.placeElement(g_objPreloader, "center", 50);
239	
240	}
241		
242	
243	/**
244	 * on tile click - open lightbox
245	 */
246	function onTileClick(data, objTile){
247		
248		objTile = jQuery(objTile);		
249		
250		var objItem = g_objTileDesign.getItemByTile(objTile);
251		var index = objItem.index;		
252		
253		g_lightbox.open(index);
254	}
255	
256	
257	/**
258	 * on gallery size change - resize the theme.
259	 */
260	function onSizeChange(){
261		
262		var galleryWidth = getGalleryWidth();
263		g_carousel.setMaxWidth(galleryWidth);
264		g_carousel.run();
265			
266		positionElements();
267	}
268
269	/**
270	 * before items request: hide items, show preloader
271	 */
272	function onBeforeReqestItems(){
273		
274		g_carousel.stopAutoplay();
275		
276		g_carousel.getElement().hide();
277		
278		if(g_objNavWrapper)
279			g_objNavWrapper.hide();
280		
281		//show preloader:
282		g_objPreloader.fadeTo(0,1);
283	}
284	
285	
286	/**
287	 * init api functions
288	 */
289	function initAPIFunctions(event, api){
290		
291		api.carouselStartAutoplay = function(){
292			g_carousel.startAutoplay();
293		}
294		
295		api.carouselStopAutoplay = function(){
296			g_carousel.stopAutoplay();
297		}
298		
299		api.carouselPause = function(){
300			g_carousel.pauseAutoplay();
301		}
302		
303		api.carouselUnpause = function(){
304			g_carousel.unpauseAutoplay();
305		}
306		
307		api.scrollLeft = function(numTiles){
308			g_carousel.scrollLeft(numTiles);
309		}	
310		
311		api.scrollRight = function(numTiles){
312			g_carousel.scrollRight(numTiles);
313		}
314		
315		
316	}
317
318	
319	/**
320	 * init buttons functionality and events
321	 */
322	function initEvents(){
323				
324		//set navigation buttons events
325		if(g_objNavWrapper){
326			
327			g_carousel.setScrollLeftButton(g_objButtonRight);
328			g_carousel.setScrollRightButton(g_objButtonLeft);
329			
330			if(g_objButtonPlay)
331				g_carousel.setPlayPauseButton(g_objButtonPlay);
332			
333		}
334		
335		g_objGallery.on(g_gallery.events.SIZE_CHANGE, onSizeChange);
336		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
337		
338		//on click events
339		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
340		
341		//init api
342		g_objGallery.on(g_apiDefine.events.API_INIT_FUNCTIONS, initAPIFunctions);
343	}
344	
345	
346	/**
347	 * destroy the carousel events
348	 */
349	this.destroy = function(){
350		
351		if(g_objNavWrapper){
352			g_functions.destroyButton(g_objButtonRight);
353			g_functions.destroyButton(g_objButtonLeft);
354			
355			if(g_objButtonPlay)
356				g_functions.destroyButton(g_objButtonPlay);						
357		}
358		
359		g_objGallery.off(g_gallery.events.SIZE_CHANGE);
360		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
361		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
362		
363		g_carousel.destroy();
364		g_lightbox.destroy();
365		
366	}
367	
368	
369	/**
370	 * run the theme setting
371	 */
372	this.run = function(){
373		
374		runTheme();
375	}
376	
377	
378	/**
379	 * init 
380	 */
381	this.init = function(gallery, customOptions){
382				
383		initTheme(gallery, customOptions);
384		
385	}
386	
387	
388}