https://www.ncausa.org/NOAH/plugins/unitegallery-master/dist/themes/tiles/ug-theme-tiles.js

1
2if(typeof g_ugFunctions != "undefined")
3    try { g_ugFunctions.registerTheme("tiles"); } catch (ex) { console.log(ex.message); }
4else 
5    jQuery(document).ready(function () { try { g_ugFunctions.registerTheme("tiles") } catch (ex) { console.log(ex.message); } });
6
7/**
8 * Grid gallery theme
9 */
10function UGTheme_tiles(){
11
12	var t = this;
13	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
14	var g_tiles = new UGTiles(), g_lightbox = new UGLightbox(), g_objPreloader, g_objTilesWrapper;
15	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();
16	
17	var g_options = {
18			theme_enable_preloader: true,		//enable preloader circle
19			theme_preloading_height: 200,		//the height of the preloading div, it show before the gallery
20			theme_preloader_vertpos: 100,		//the vertical position of the preloader
21			theme_gallery_padding: 0,			//the horizontal padding of the gallery from the sides
22			theme_appearance_order: "normal",	//normal, shuffle, keep - the appearance order of the tiles. applying only to columns type
23			theme_auto_open:null				//auto open lightbox at start
24	};
25	
26	var g_defaults = {
27			gallery_width: "100%"
28	};
29	
30	//temp variables
31	var g_temp = {
32			showPreloader: false
33	};
34	
35	
36	/**
37	 * Init the theme
38	 */
39	function initTheme(gallery, customOptions){
40		
41		g_gallery = gallery;
42		
43		//set default options
44		g_options = jQuery.extend(g_options, g_defaults);
45		
46		//set custom options
47		g_options = jQuery.extend(g_options, customOptions);
48		
49		modifyOptions();
50		
51		//set gallery options
52		g_gallery.setOptions(g_options);
53		
54		g_gallery.setFreestyleMode();
55		
56		g_objects = gallery.getObjects();
57		
58		//get some objects for local use
59		g_objGallery = jQuery(gallery);		
60		g_objWrapper = g_objects.g_objWrapper;
61		
62		//init objects
63		g_tiles.init(gallery, g_options);
64		g_lightbox.init(gallery, g_options);
65		
66		g_objTileDesign = g_tiles.getObjTileDesign();
67
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			
228			g_gallery.onEvent(g_tiles.events.TILES_FIRST_PLACED, function(){
229				
230				g_objWrapper.height("auto");
231				g_objPreloader.hide();
232			});			
233		}
234		
235		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
236		
237		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
238
239		jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit);
240
241	}
242	
243	
244	/**
245	 * destroy the theme
246	 */
247	this.destroy = function(){
248				
249		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
250		
251		g_gallery.destroyEvent(g_tiles.events.TILES_FIRST_PLACED);
252				
253		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
254
255		jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT);
256		
257		g_tiles.destroy();
258		g_lightbox.destroy();
259	}
260	
261	
262	/**
263	 * run the theme setting
264	 */
265	this.run = function(){
266		
267		runTheme();
268	}
269	
270	
271	/**
272	 * add items
273	 */
274	this.addItems = function(){
275		
276		g_tiles.runNewItems();

277	}
278	
279	
280	/**
281	 * init 
282	 */
283	this.init = function(gallery, customOptions){
284				
285		initTheme(gallery, customOptions);
286		
287	}
288	
289	
290}