https://www.galil-elion.org.il/design/jscripts/gridgallery/ug-theme-tilesgrid.js

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