https://zarzadzanienajmem.eu/wp-content/plugins/unitegallery/unite…/tilesgrid/ug-theme-tilesgrid.js?ver=5.7.12

1
2if(typeof g_ugFunctions != "undefined")
3	g_ugFunctions.registerTheme("tilesgrid");
4else 
5	jQuery(document).ready(function(){g_ugFunctions.registerTheme("tilesgrid")});
6
7
8/**
9 * Fixed tiles theme
10 */
11function UGTheme_tilesgrid(){
12
13	var t = this;
14	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
15	var g_objThumbsGrid = new UGThumbsGrid(), g_lightbox = new UGLightbox();
16	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();
17	var g_objBullets, g_objNavWrapper, g_objButtonLeft, g_objButtonRight, g_objPreloader;
18	
19
20	var g_options = {
21			theme_gallery_padding: 0,				//padding from sides of the gallery
22			theme_grid_align: "center",				//grid align
23			theme_navigation_type: "bullets",		//bullets, arrows
24			theme_arrows_margin_top: 20,			//the space between arrows and grid
25			theme_space_between_arrows: 5,			//horizontal space between arrows
26			theme_bullets_margin_top: 40,			//the space 
27			theme_navigation_align: "center",		//center, left, right - horizontal align of the navigation
28			theme_navigation_offset_hor: 0,			//horizontal offset of the navigation, according the align
29			theme_bullets_color: "gray",			//gray, blue, brown, green, red - color of the bullets
30			theme_auto_open:null					//auto open lightbox at start
31	};
32	
33	var g_defaults = {
34			gallery_width: "100%",
35			
36			tile_width: 180,
37			tile_height: 150,
38			
39			grid_num_rows: 3,
40			grid_padding: 10,
41			
42			tile_enable_border: true,
43			tile_enable_shadow: true,
44			
45			tile_border_radius: 2,
46			
47			grid_space_between_cols: 20,
48			grid_space_between_rows: 20,
49			grid_space_between_mobile: 15,
50			
51			bullets_space_between: 12,
52			grid_vertical_scroll_ondrag: true
53	};
54	
55	
56	//temp variables
57	var g_temp = {
58			handle: null		//interval handle
59	};
60	
61	
62	/**
63	 * Init the theme
64	 */
65	function initTheme(gallery, customOptions){
66		
67		g_gallery = gallery;
68		
69		//set default options
70		g_options = jQuery.extend(g_options, g_defaults);
71		
72		//set custom options
73		g_options = jQuery.extend(g_options, customOptions);
74		
75		modifyOptions();
76		
77		//set gallery options
78		g_gallery.setOptions(g_options);
79		
80		g_gallery.setFreestyleMode();
81		
82		g_objects = gallery.getObjects();
83		
84		//get some objects for local use
85		g_objGallery = jQuery(gallery);		
86		g_objWrapper = g_objects.g_objWrapper;
87		
88		//init objects
89		g_lightbox.init(gallery, g_options);
90		
91		g_objThumbsGrid.init(gallery, g_options, true);
92
93		g_objTileDesign = g_objThumbsGrid.getObjTileDesign();
94	}
95	
96	
97	/**
98	 * modify options
99	 */
100	function modifyOptions(){
101		
102		if(!g_options.grid_num_rows)
103			g_options.grid_num_rows = 9999;
104		
105		g_options.bullets_addclass = "ug-bullets-"+g_options.theme_bullets_color;
106		
107	}
108	
109	
110	/**
111	 * get gallery width available for the grid
112	 */
113	function getGalleryWidth(){
114		var galleryWidth = g_gallery.getSize().width;
115		galleryWidth -= g_options.theme_gallery_padding * 2;
116		
117		return(galleryWidth);
118	}
119	
120	
121	/**
122	 * set gallery html elements
123	 */
124	function setHtml(){
125		
126		//init bullets (only after panes size estimation)				
127		if(g_options.theme_navigation_type == "bullets"){
128			
129			g_objBullets = new UGBullets();
130			
131			var galleryWidth = getGalleryWidth();
132			
133			var numPanes = g_objThumbsGrid.getNumPanesEstimationByWidth(galleryWidth);
134			
135			var objOptions = g_gallery.getOptions();
136			g_objBullets.init(g_gallery, objOptions, numPanes);			
137			
138		}
139		
140		//add html elements
141		g_objWrapper.addClass("ug-theme-tilesfixed");
142		
143		g_objThumbsGrid.setHtml();
144		
145		if(g_objBullets)
146			g_objBullets.appendHTML(g_objWrapper);
147		
148		if(g_options.theme_navigation_type == "arrows"){
149			var htmlAdd = "<div class='ug-tile-navigation-wrapper' style='position:absolute'>";
150			htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-left'></div>";
151			htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-right'></div>";
152			htmlAdd += "</div>";
153			g_objWrapper.append(htmlAdd);
154			
155			g_objNavWrapper = g_objWrapper.children(".ug-tile-navigation-wrapper");
156			
157			g_objButtonLeft = g_objNavWrapper.children(".ug-button-tile-left");
158			g_objButtonRight = g_objNavWrapper.children(".ug-button-tile-right");
159			
160			g_objButtonLeft.css("margin-right",g_options.theme_space_between_arrows+"px");
161		}
162		
163		g_lightbox.putHtml();
164		
165		//add preloader
166		g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>");
167		g_objPreloader = g_objWrapper.children(".ug-tiles-preloader");
168		g_objPreloader.fadeTo(0,0);
169		
170	}
171	
172	
173	/**
174	 * get height estimation by width
175	 */
176	function getHeightEstimation(galleryWidth){
177		
178		//put the placeholder before run. check the width
179		var gridHeight = g_objThumbsGrid.getHeightEstimationByWidth(galleryWidth);
180		var numPanes = g_objThumbsGrid.getNumPanesEstimationByWidth(galleryWidth);
181		
182		//add navigation height
183		if(numPanes > 1){
184			if(g_options.theme_navigation_type == "arrows"){
185				gridHeight += g_options.theme_arrows_margin_top;
186				gridHeight += 30;	//arrows size
187			}
188			else{
189				gridHeight += g_options.theme_bullets_margin_top;
190				gridHeight += 15;	//bullets size
191			}
192				
193		}
194	
195		return(gridHeight);
196	}
197	
198	
199	/**
200	 * actually run the theme
201	 */
202	function actualRun(){
203		
204		//get gallery width, set estimation height and get width again.
205		var galleryWidth = getGalleryWidth();
206		var totalHeight = getHeightEstimation(galleryWidth);
207		g_objWrapper.height(totalHeight);
208		var galleryWidth = getGalleryWidth();
209
210		initEvents();
211		
212		//place preloader
213		g_functions.placeElement(g_objPreloader, g_options.theme_grid_align, 50);
214		
215		g_objThumbsGrid.setWidth(galleryWidth);
216		
217		g_objThumbsGrid.run();
218				
219		g_lightbox.run();
220		
221		updateBullets();
222		
223		positionElements();
224		
225		
226	}
227
228	
229	/**
230	 * run the theme
231	 */
232	function runTheme(){
233		
234		setHtml();
235		actualRun();
236		
237	}
238	
239	
240	/**
241	 * position elements
242	 */
243	function positionElements(){
244		
245		var objGallerySize = g_gallery.getSize();
246		var g_objGridSize = g_objThumbsGrid.getSize();
247		
248		var gridElement = g_objThumbsGrid.getElement();
249		g_functions.placeElement(gridElement, g_options.theme_grid_align, 0);
250		
251		g_objGridSize = g_objThumbsGrid.getSize();
252		
253		var galleryHeight = g_objGridSize.height;
254		
255		var numPanes = g_objThumbsGrid.getNumPanes();
256
257		if(numPanes > 1){
258			
259			//position bullets
260			if(g_objBullets){
261				
262				g_objBullets.getElement().show();
263				
264				var bulletsElement = g_objBullets.getElement();
265				var bulletsWidth = g_objBullets.getBulletsWidth();
266				
267				//get bullets offset x (relative to the grid)
268				var bulletsX = g_objGridSize.left + g_functions.getElementRelativePos(bulletsWidth, g_options.theme_navigation_align, g_options.theme_navigation_offset_hor, gridElement);
269				
270				g_functions.placeElement(bulletsElement, bulletsX, galleryHeight + g_options.theme_bullets_margin_top);
271				
272				var sizeBullets = g_functions.getElementSize(bulletsElement);
273				galleryHeight = sizeBullets.bottom;
274				
275			}
276			
277			//position buttons
278			if(g_objNavWrapper){
279				
280				g_objNavWrapper.show();
281				
282				var navX = g_objGridSize.left + g_functions.getElementRelativePos(g_objNavWrapper, g_options.theme_navigation_align, g_options.theme_navigation_offset_hor, gridElement);
283								
284				g_functions.placeElement(g_objNavWrapper, navX, galleryHeight + g_options.theme_arrows_margin_top);
285				
286				var sizeNav = g_functions.getElementSize(g_objNavWrapper);
287				
288				galleryHeight = sizeNav.bottom;
289			}
290			
291		}else{	//if only one pame, hide the navigation
292			
293			if(g_objNavWrapper)
294				g_objNavWrapper.hide();
295			
296			if(g_objBullets)
297				g_objBullets.getElement().hide();
298		}
299		
300		g_objWrapper.height(galleryHeight);
301	}
302		
303	
304	/**
305	 * on tile click - open lightbox
306	 */
307	function onTileClick(data, objTile){
308		
309		objTile = jQuery(objTile);		
310		var index = objTile.index();
311		
312		g_lightbox.open(index);
313	}
314
315	
316	/**
317	 * update the bullets
318	 */
319	function updateBullets(){
320		
321		//update bullets
322		if(!g_objBullets)
323			return(false);
324		
325		numPanes = g_objThumbsGrid.getNumPanes();
326		g_objBullets.updateNumBullets(numPanes);
327		g_objBullets.setActive(0);
328	}
329	
330	
331	/**
332	 * on gallery size change - resize the theme.
333	 */
334	function onSizeChange(){
335		
336		var galleryWidth = getGalleryWidth();
337		
338		g_objThumbsGrid.setWidth(galleryWidth);
339		g_objThumbsGrid.run();
340		
341		updateBullets();
342		
343		setTimeout(positionElements, 500);
344		
345	}
346
347
348	/**
349	 * on tile click - open lightbox
350	 */
351	function onTileClick(data, objTile){
352		
353		objTile = jQuery(objTile);		
354		
355		var objItem = g_objTileDesign.getItemByTile(objTile);
356		var index = objItem.index;		
357			
358		g_lightbox.open(index);
359	}
360	
361	/**
362	 * before items request: hide items, show preloader
363	 */
364	function onBeforeReqestItems(){
365		
366		if(g_objNavWrapper)
367			g_objNavWrapper.hide();
368	
369		if(g_objThumbsGrid)
370			g_objThumbsGrid.getElement().hide();
371		
372		//show preloader:
373		g_objPreloader.fadeTo(0,1);
374	}
375	
376	
377	/**
378	 * open lightbox at start if needed
379	 */
380	function onLightboxInit(){
381
382		if(g_options.theme_auto_open !== null){
383			g_lightbox.open(g_options.theme_auto_open);
384			g_options.theme_auto_open = null;
385		}
386		
387	}
388	
389	
390	/**
391	 * init buttons functionality and events
392	 */
393	function initEvents(){
394		
395		g_objGallery.on(g_gallery.events.SIZE_CHANGE, onSizeChange);
396		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
397		
398		if(g_objBullets)
399			g_objThumbsGrid.attachBullets(g_objBullets);		
400		
401		if(g_objNavWrapper){
402			g_objThumbsGrid.attachNextPaneButton(g_objButtonRight);
403			g_objThumbsGrid.attachPrevPaneButton(g_objButtonLeft);
404		}
405		
406		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
407		
408		jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit);
409	}
410	
411	
412	/**
413	 * destroy the theme
414	 */
415	this.destroy = function(){
416				
417		g_objGallery.off(g_gallery.events.SIZE_CHANGE);
418		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
419
420		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
421		
422		if(g_objBullets)
423			jQuery(g_objBullets).off(g_objBullets.events.BULLET_CLICK);
424
425		jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT);
426		
427		g_objThumbsGrid.destroy();
428		g_lightbox.destroy();
429		
430	}
431
432	
433	/**
434	 * run the theme setting
435	 */
436	this.run = function(){
437		
438		runTheme();
439	}
440	
441	
442	/**
443	 * init 
444	 */
445	this.init = function(gallery, customOptions){
446				
447		initTheme(gallery, customOptions);
448		
449	}
450	
451	
452}