https://theoschilder.nl/themes/web/assets/js/unitegallery/themes/tiles/ug-theme-tiles.js

1
2if(typeof g_ugFunctions != "undefined")
3	g_ugFunctions.registerTheme("tiles");
4else 
5	jQuery(document).ready(function(){g_ugFunctions.registerTheme("tiles")});
6
7
8/**
9 * Grid gallery theme
10 */
11function UGTheme_tiles(){
12
13	var t = this;
14	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
15	var g_tiles = new UGTiles(), g_lightbox = new UGLightbox(), g_objPreloader, g_objTilesWrapper;
16	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();
17	
18	var g_options = {
19			theme_enable_preloader: true,		//enable preloader circle
20			theme_preloading_height: 200,		//the height of the preloading div, it show before the gallery
21			theme_preloader_vertpos: 100,		//the vertical position of the preloader
22			theme_gallery_padding: 0,			//the horizontal padding of the gallery from the sides
23			theme_appearance_order: "normal",	//normal, shuffle, keep - the appearance order of the tiles. applying only to columns type
24			theme_auto_open:null				//auto open lightbox at start
25	};
26	
27	var g_defaults = {
28			gallery_width: "100%"
29	};
30	
31	//temp variables
32	var g_temp = {
33			showPreloader: false
34	};
35	
36	
37	/**
38	 * Init the theme
39	 */
40	function initTheme(gallery, customOptions){
41		
42		g_gallery = gallery;
43		
44		//set default options
45		g_options = jQuery.extend(g_options, g_defaults);
46		
47		//set custom options
48		g_options = jQuery.extend(g_options, customOptions);
49		
50		modifyOptions();
51		
52		//set gallery options
53		g_gallery.setOptions(g_options);
54		
55		g_gallery.setFreestyleMode();
56		
57		g_objects = gallery.getObjects();
58		
59		//get some objects for local use
60		g_objGallery = jQuery(gallery);		
61		g_objWrapper = g_objects.g_objWrapper;
62		
63		//init objects
64		g_tiles.init(gallery, g_options);
65		g_lightbox.init(gallery, g_options);
66		
67		g_objTileDesign = g_tiles.getObjTileDesign();
68		
69	}
70	
71	
72	/**
73	 * modift options
74	 */
75	function modifyOptions(){
76		
77		if(g_options.theme_enable_preloader == true)
78			g_temp.showPreloader = true;
79		
80		switch(g_options.theme_appearance_order){
81			default:
82			case "normal":
83			break;
84			case "shuffle":
85				g_gallery.shuffleItems();
86			break;
87			case "keep":
88				g_options.tiles_keep_order = true;
89			break;
90		}
91		
92	}
93
94	
95	/**
96	 * set gallery html elements
97	 */
98	function setHtml(){
99		
100		//add html elements
101		g_objWrapper.addClass("ug-theme-tiles");
102		
103		g_objWrapper.append("<div class='ug-tiles-wrapper' style='position:relative'></div>");
104		
105		//add preloader
106		if(g_temp.showPreloader == true){
107			g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>");
108			g_objPreloader = g_objWrapper.children(".ug-tiles-preloader");
109			g_objPreloader.fadeTo(0,0);
110		}
111		
112		g_objTilesWrapper = g_objWrapper.children(".ug-tiles-wrapper");
113		
114		//set padding
115		if(g_options.theme_gallery_padding)
116			g_objWrapper.css({
117				"padding-left":g_options.theme_gallery_padding+"px",
118				"padding-right":g_options.theme_gallery_padding+"px"
119			});
120		
121		g_tiles.setHtml(g_objTilesWrapper);
122		g_lightbox.putHtml();
123	}
124	
125	/**
126	 * actually run the theme
127	 */
128	function actualRun(){
129		
130		//set preloader mode
131		if(g_objPreloader){
132			g_objPreloader.fadeTo(0,1);
133			g_objWrapper.height(g_options.theme_preloading_height);
134			g_functions.placeElement(g_objPreloader, "center", g_options.theme_preloader_vertpos);
135		}
136		
137		initEvents();
138		
139		g_tiles.run();
140		g_lightbox.run();
141		
142	}
143
144	
145	/**
146	 * run the theme
147	 */
148	function runTheme(){
149		
150		setHtml();
151		
152		actualRun();
153		
154	}
155	
156	
157	
158	/**
159	 * init size of the thumbs panel
160	 */
161	function initThumbsPanel(){
162		
163		//set size:
164		var objGallerySize = g_gallery.getSize();
165			
166		if(g_temp.isVertical == false)			
167			g_objPanel.setWidth(objGallerySize.width);
168		else
169			g_objPanel.setHeight(objGallerySize.height);
170		
171		g_objPanel.run();
172	}
173	
174	
175	/**
176	 * on tile click - open lightbox
177	 */
178	function onTileClick(data, objTile){
179		
180		objTile = jQuery(objTile);		
181		
182		var objItem = g_objTileDesign.getItemByTile(objTile);
183		var index = objItem.index;		
184		
185		g_lightbox.open(index);
186	}
187	
188	
189	/**
190	 * before items request: hide items, show preloader
191	 */
192	function onBeforeReqestItems(){
193				
194		g_objTilesWrapper.hide();
195		
196		if(g_objPreloader){
197			g_objPreloader.show();
198		
199			var preloaderSize = g_functions.getElementSize(g_objPreloader);
200			var galleryHeight = preloaderSize.bottom + 30;
201			
202			g_objWrapper.height(galleryHeight);
203		}
204		
205	}
206
207	/**
208	 * open lightbox at start if needed
209	 */
210	function onLightboxInit(){
211
212		if(g_options.theme_auto_open !== null){
213			g_lightbox.open(g_options.theme_auto_open);
214			g_options.theme_auto_open = null;
215		}
216		
217	}
218	
219	
220	/**
221	 * init buttons functionality and events
222	 */
223	function initEvents(){
224		
225		//remove preloader on tiles first placed
226		if(g_objPreloader){
227			jQuery(g_tiles).on(g_tiles.events.TILES_FIRST_PLACED, function(){
228				g_objWrapper.height("auto");
229				g_objPreloader.hide();
230			});			
231		}
232		
233		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
234		
235		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
236
237		jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit);
238
239	}
240	
241	
242	/**
243	 * destroy the theme
244	 */
245	this.destroy = function(){
246				
247		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
248		jQuery(g_tiles).off(g_tiles.events.TILES_FIRST_PLACED);
249		
250		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
251
252		jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT);
253		
254		g_tiles.destroy();
255		g_lightbox.destroy();
256	}
257	
258	
259	/**
260	 * run the theme setting
261	 */
262	this.run = function(){
263		
264		runTheme();
265	}
266	
267	
268	/**
269	 * init 
270	 */
271	this.init = function(gallery, customOptions){
272				
273		initTheme(gallery, customOptions);
274		
275	}
276	
277	
278}