https://www.invictvs.com.co/recursos/lib/node_modules/unitegallery/dist/themes/grid/ug-theme-grid.js

1
2if(typeof g_ugFunctions != "undefined")
3	g_ugFunctions.registerTheme("grid");
4else 
5	jQuery(document).ready(function(){g_ugFunctions.registerTheme("grid")});
6
7
8/**
9 * Grid gallery theme
10 */
11function UGTheme_grid(){
12
13	var t = this;
14	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
15	var g_objSlider;
16	var g_functions = new UGFunctions();
17	var g_objPanel = new UGGridPanel();
18
19	
20	//theme options
21	var g_options = {
22			theme_load_slider:true,					//true, false - load the slider
23			theme_load_panel:true,					//true, false - load the thumbs grid panel
24			theme_panel_position: "right",			//left, right, top, bottom - thumbs panel position
25			theme_hide_panel_under_width: 480		//hide panel under certain browser width, if null, don't hide
26	};
27	
28	//global defaults (for right side)
29	var g_defaults = {
30			slider_controls_always_on:true,
31			slider_vertical_scroll_ondrag: true
32	};
33	
34	//special defaults for left side panel position
35	var g_defaults_left = {
36		slider_zoompanel_align_hor: "right",
37		slider_fullscreen_button_align_hor: "right",
38		slider_play_button_align_hor: "right",
39		
40		slider_zoompanel_offset_vert: 9,
41		slider_zoompanel_offset_hor: 11,
42		slider_play_button_offset_hor: 88,
43		slider_play_button_offset_vert: 8,
44		slider_fullscreen_button_offset_hor: 52,
45		slider_fullscreen_button_offset_vert: 9								
46	};
47	
48	var g_defaults_right = {
49			slider_zoompanel_offset_vert: 9,
50			slider_zoompanel_offset_hor: 11,
51			slider_play_button_offset_hor: 88,
52			slider_play_button_offset_vert: 8,
53			slider_fullscreen_button_offset_hor: 52,
54			slider_fullscreen_button_offset_vert: 9						
55	}
56	
57	var g_defaults_bottom = {
58		slider_enable_text_panel: false,
59		slider_zoompanel_align_hor: "right",
60		slider_zoompanel_offset_vert: 10,
61		
62		slider_progress_indicator_align_hor: "left",
63		slider_progress_indicator_offset_vert: 36,	
64		slider_progress_indicator_offset_hor: 16
65	}
66	
67	var g_defaults_top = {
68			slider_enable_text_panel: false,
69			slider_zoompanel_align_vert: "bottom",
70			slider_zoompanel_offset_vert: 10,
71			
72			slider_play_button_align_hor: "right",
73			slider_play_button_align_vert: "bottom",
74			
75			slider_fullscreen_button_align_vert: "bottom",	
76			slider_fullscreen_button_align_hor: "right",
77			
78			slider_progress_indicator_align_vert: "bottom",
79			slider_progress_indicator_offset_vert: 40,			
80			gridpanel_padding_border_top: 4,		    //padding between the top border of the panel
81			gridpanel_padding_border_bottom: 10			//padding between the bottom border of the panel	
82	}
83	
84	//temp variables
85	var g_temp = {
86		isMobileModeWasEnabled: false,
87		isHorPos: false
88	};
89	
90	
91	/**
92	 * Init the theme
93	 */
94	function initTheme(gallery, customOptions){
95		
96		g_gallery = gallery;
97		
98		g_options = jQuery.extend(g_options, g_defaults);
99		g_options = jQuery.extend(g_options, customOptions);
100		
101		switch(g_options.theme_panel_position){
102			case "left":
103				g_options = jQuery.extend(g_options, g_defaults_left);
104			break;
105			case "right":
106				g_options = jQuery.extend(g_options, g_defaults_right);
107			break;
108			case "top":
109				g_options = jQuery.extend(g_options, g_defaults_top);
110			break;
111			case "bottom":
112				g_options = jQuery.extend(g_options, g_defaults_bottom);
113			break;			
114		}
115		
116		g_options = jQuery.extend(g_options, customOptions);
117		
118		modifyOptions();
119		
120		//set gallery options
121		g_gallery.setOptions(g_options);
122				
123		//include gallery elements
124		if(g_options.theme_load_panel == true){
125			if(g_options.theme_panel_position == "top" || g_options.theme_panel_position == "bottom")
126				g_temp.isHorPos = true;
127				
128			g_objPanel.setOrientation(g_options.theme_panel_position);
129			g_objPanel.init(gallery, g_options);
130		}else
131			g_objPanel = null;
132		
133		if(g_options.theme_load_slider == true)
134			g_gallery.initSlider(g_options);
135		
136		g_objects = gallery.getObjects();
137		
138		//get some objects for local use
139		g_objGallery = jQuery(gallery);		
140		g_objWrapper = g_objects.g_objWrapper;
141		
142		if(g_options.theme_load_slider == true)
143			g_objSlider = g_objects.g_objSlider;
144		
145	}
146	
147	
148	/**
149	 * modify options
150	 */
151	function modifyOptions(){
152		
153		if(g_options.theme_load_panel == true && g_options.theme_panel_position == "left"){
154			g_options.gridpanel_handle_position = "right";
155		}
156	}
157	
158	/**
159	 * init all the theme's elements and set them to their places 
160	 * according gallery's dimentions.
161	 * this function should work on resize too.
162	 */
163	function initAndPlaceElements(){
164		
165		//place objects:
166		if(g_objPanel){

167			initThumbsPanel();
168			placeThumbsPanel();
169		}
170		
171		if(g_objSlider){
172			g_objSlider.run();
173			placeSlider();
174		}
175		
176	}
177	
178	
179	/**
180	 * run the theme
181	 */
182	function runTheme(){
183		
184		setHtml();
185		
186		initAndPlaceElements();
187		
188		initEvents();
189	}
190	
191	
192	/**
193	 * set gallery html elements
194	 */
195	function setHtml(){
196		
197		//add html elements
198		g_objWrapper.addClass("ug-theme-grid");
199		
200		//set panel html
201		if(g_objPanel)
202			g_objPanel.setHtml();
203			
204		//set slider html
205		if(g_objSlider)
206			g_objSlider.setHtml();
207		
208	}
209	
210	
211	/**
212	 * init size of the thumbs panel
213	 */
214	function initThumbsPanel(){
215				
216		//set size:
217		var objGallerySize = g_gallery.getSize();
218		if(g_temp.isHorPos == true)
219			g_objPanel.setWidth(objGallerySize.width);
220		else
221			g_objPanel.setHeight(objGallerySize.height);
222					
223		g_objPanel.run();
224	}
225	
226	
227	/**
228	 * place thumbs panel according the settings
229	 */
230	function placeThumbsPanel(){
231		
232		var objPanelElement = g_objPanel.getElement();
233		
234		var isNeedToHide = isPanelNeedToHide();
235		var isHidden = g_objPanel.isPanelClosed();		
236		
237		var showClosed = (isNeedToHide || isHidden);
238
239		var pos = g_options.theme_panel_position;
240		
241		//place the panel closed or opened state.
242		if(showClosed){
243			var hiddenDest = g_objPanel.getClosedPanelDest();
244			var originalPos =  g_functions.getElementRelativePos(objPanelElement, g_options.theme_panel_position);
245			g_objPanel.setClosedState(originalPos);
246			pos = hiddenDest;
247		}else{
248			g_objPanel.setOpenedState();
249		}
250		
251		if(g_temp.isHorPos == true)		
252			g_functions.placeElement(objPanelElement, "left", pos);
253		else
254			g_functions.placeElement(objPanelElement, pos, "top");
255		
256	} 
257	
258	
259	/**
260	 * place the slider according the thumbs panel size and position
261	 */
262	function placeSlider(){
263		
264		//g_objPanel
265		var gallerySize = g_functions.getElementSize(g_objWrapper);
266		
267		var sliderWidth = gallerySize.width;
268		var sliderHeight = gallerySize.height;
269		var sliderTop = 0;
270		var sliderLeft = 0;
271		
272		if(g_objPanel){
273			
274			var panelSize = g_objPanel.getSize();
275						
276			switch(g_options.theme_panel_position){
277				case "left":
278					sliderLeft = panelSize.right;
279					sliderWidth = gallerySize.width - panelSize.right;				
280				break;
281				case "right":
282					sliderWidth = panelSize.left;					
283				break;
284				case "top":
285					sliderHeight = gallerySize.height - panelSize.bottom;
286					sliderTop = panelSize.bottom;
287				break;
288				case "bottom":
289					sliderHeight = panelSize.top;					
290				break;
291			}
292						
293		}
294				
295		g_objSlider.setSize(sliderWidth, sliderHeight);
296		g_objSlider.setPosition(sliderLeft, sliderTop);
297	}
298
299	
300	/**
301	 * check if need to hide the panel according the options.
302	 */
303	function isPanelNeedToHide(){
304		
305		if(!g_options.theme_hide_panel_under_width)
306			return(false);
307		
308		var windowWidth = jQuery(window).width();
309		var hidePanelValue = g_options.theme_hide_panel_under_width;
310		
311		if(windowWidth <= hidePanelValue)
312			return(true);
313			
314		return(false);
315	}
316	
317	/**
318	 * check if need to hide or show panel according the theme_hide_panel_under_width option
319	 */
320	function checkHidePanel(){
321		
322		//check hide panel:
323		if(!g_options.theme_hide_panel_under_width)
324			return(false);
325		
326			var needToHide = isPanelNeedToHide();
327			
328			if(needToHide == true){
329				g_objPanel.closePanel(true);
330				g_temp.isMobileModeWasEnabled = true;
331			}
332			else{
333				if(g_temp.isMobileModeWasEnabled == true){
334					g_objPanel.openPanel(true);
335					g_temp.isMobileModeWasEnabled = false;
336				}
337			}
338	}
339	
340	
341	/**
342	 * on gallery size change - resize the theme.
343	 */
344	function onSizeChange(){
345		
346		initAndPlaceElements();
347		
348		if(g_objPanel)
349			checkHidePanel();
350		
351	}
352	
353	
354	/**
355	 * on panel move event
356	 */
357	function onPanelMove(){
358		placeSlider();
359	}
360
361
362	/**
363	 * before items request: hide items, show preloader
364	 */
365	function onBeforeReqestItems(){
366	
367		g_gallery.showDisabledOverlay();
368	
369	}
370	
371	
372	/**
373	 * init buttons functionality and events
374	 */
375	function initEvents(){
376						
377		g_objGallery.on(g_gallery.events.SIZE_CHANGE,onSizeChange);		
378		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
379	
380		if(g_objPanel){
381			jQuery(g_objPanel).on(g_objPanel.events.FINISH_MOVE, onPanelMove);
382		}
383		
384	}
385	
386	
387	/**
388	 * destroy the theme events
389	 */
390	this.destroy = function(){
391		
392		g_objGallery.off(g_gallery.events.SIZE_CHANGE,onSizeChange);		
393		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
394		
395		if(g_objPanel)
396			jQuery(g_objPanel).off(g_objPanel.events.FINISH_MOVE);
397		
398		g_objPanel.destroy();
399		g_objSlider.destroy();
400	
401	}
402	
403	
404	/**
405	 * run the theme setting
406	 */
407	this.run = function(){
408		
409		runTheme();
410	}
411	
412	
413	/**
414	 * init 
415	 */
416	this.init = function(gallery, customOptions){
417				
418		initTheme(gallery, customOptions);
419	}
420	
421	
422}
423