https://www.foment.com/wp-content/plugins/eventon-event-slider/assets/evosl_script.js

1/**
2 * Javascript: Slider for eventon
3 * @version  2.0
4 */
5jQuery(document).ready(function($){
6	
7// INIT
8	  sliderfy_events();
9
10// window resize
11	$( window ).resize(function() {
12		sliderfy_events();
13	});
14
15// EVO Slider code
16	function sliderfy_events(){
17		$('body').find('.evoslider').each(function(){
18			var CAL = $(this);
19			var SC = CAL.evo_shortcode_data();
20			//console.log( SC);
21
22			var OUTTER = CAL.find('.evo_slider_slide_out');
23			var slides = CAL.find('.eventon_list_event').length;
24			var EL = CAL.find('.eventon_events_list');
25			
26			var slider_move_distance = 0;
27			var all_slides_w = 0;
28			var slider_h = 0;
29
30			// slides visible 
31				slides_visible = ('slides_visible' in SC)? SC.slides_visible: 1;
32			
33			// slider controls		
34				if( SC.control_style == 'tb'|| SC.control_style == 'lr'|| SC.control_style == 'lrc'){
35					if(CAL.find('.evoslider_dots').length == 0){
36						html = "<span class='evoslider_nav nav prev'><i class='fa fa-angle-left'></i></span>";
37						CAL.find('.evo_slider_outter').prepend(html);
38						html = "<span class='evoslider_nav nav next'><i class='fa fa-angle-right'></i></span>";
39						CAL.find('.evo_slider_outter').append(html);
40						CAL.find('.evosl_footer').append( "<span class='evoslider_dots'></span>" );
41					}
42				}else{
43					html = "<span class='evoslider_nav nav prev'><i class='fa fa-angle-left'></i></span>";
44					html += "<span class='evoslider_dots'></span>";
45					html += "<span class='evoslider_nav nav next'><i class='fa fa-angle-right'></i></span>";
46					CAL.find('.evosl_footer').html( html );
47				}
48
49			slider_w = OUTTER.width();
50
51			// colorize events
52				EL.find('.eventon_list_event').each(function(){
53					var el = $(this);
54
55					var c = el.data('colr');
56					el.css('background-color', c);					
57					if(!el.parent().hasClass('slide')) el.wrap('<div class="slide"></div>');
58					if(!_hex_is_light( c )) el.addClass('sldark');
59				});
60
61			// slide width setting
62				// all verticals
63				if( SC.slider_type == 'vertical'){
64					EL.fadeIn().data('slideindex',0);
65
66					CAL.find('.evo_slider_slide_out').height(0);
67
68					for (var i = 0; i < slides_visible; i++) {
69						slider_h += CAL.find('.slide').eq( i ).height();
70					}		
71
72					CAL.find('.evo_slider_slide_out').height( slider_h );
73				
74				// all horizontals
75				}else{
76					one_slide_w = 0;
77					slider_move_distance = slider_w;
78
79					// slides visible
80					if( SC.slider_type == 'micro'){
81						slv = parseInt( slider_w/ 120);
82						slides_visible = SC.slides_visible = slv;
83					}else if( SC.slider_type == 'mini'){
84						slv = parseInt( slider_w/ 200);
85						slides_visible = SC.slides_visible = slv;
86					}else if( SC.slider_type == 'multi'){
87						if( slider_w < 400)	slides_visible = SC.slides_visible = 1;
88						if( slider_w > 401 && slider_w < 600)	slides_visible = SC.slides_visible = 2;
89						if( slider_w > 601 && slider_w < 800)	slides_visible = SC.slides_visible = 3;
90						if( slider_w > 801 ) slides_visible = SC.slides_visible = 4;
91					}
92
93					var cur_slide_index = parseInt(EL.data('slideindex'));
94					if( cur_slide_index === undefined || !cur_slide_index ) cur_slide_index = 0;
95					
96					one_slide_w = (slider_w/ slides_visible);
97					slider_move_distance = one_slide_w;		
98
99					all_slides_w = slides * one_slide_w;
100
101
102					EL.width( all_slides_w ).fadeIn().data('slideindex', cur_slide_index);
103					CAL.find('.slide').width( one_slide_w);
104
105					// focus slider into the correct slide index
106					go_to_slide_index( cur_slide_index , CAL, true);
107				}		
108
109			// slider control dots 
110				var dots_html = '';
111				if( SC.slide_nav_dots == 'yes'){
112
113					dot_max = slides - slides_visible +1;
114					for(var dc = 0; dc< dot_max; dc++){
115						dots_html += "<span class='evosl_dot "+ (dc == cur_slide_index? 'f':'') +"' data-index='"+ dc+"'><em></em></span>";
116					}	
117
118					CAL.find('.evoslider_dots').html( dots_html);		
119				}
120
121			// set slider data for interaction
122				EL.data({
123					'slider_move_distance': slider_move_distance,
124					'all_slides_w': all_slides_w,
125					'slides_visible': slides_visible
126				});
127
128			// hide slider controls
129				if( SC.slide_hide_control == 'yes')	CAL.find('.evosl_footer').hide();
130			
131		});
132	}
133
134// slider works
135	$.fn.slider_work = function (options) {
136		var slide = {},
137		interval = null,
138		$el = this;
139		slide.$el = this;
140		var SC = $el.evo_shortcode_data();
141		var EL = $el.find('.eventon_events_list');
142		var all_slides = $el.find('.eventon_list_event').length;
143
144		slide = {
145			iv: SC.slider_pause,
146			running: false,
147			init: function(){
148				if( SC.slide_auto == 'yes'){
149					slide.auto();
150
151					// pause on hover
152					if( SC.slide_pause_hover == 'yes'){
153						$el.on('mouseover','.evo_slider_slide_out', function(){
154							slide.pause();
155						}).on('mouseout',function(){
156							slide.auto();
157						});	
158					}				
159				}
160			},
161			auto: function (){
162				clearInterval( interval );
163
164				if( SC.slide_auto == 'yes'){ // if auto slide enabled via shortcode
165					interval = setInterval(function(){
166						slide.gotoNextSlides();
167					}, this.iv );
168				}
169			},
170			resetInterval: function(){
171				slide.auto();
172			},
173			pause: function(){
174				clearInterval(interval);
175			},
176			gotoNextSlides: function(){
177				var cur_slide_index = parseInt(EL.data('slideindex'));
178				var slides_visible = parseInt(EL.data('slides_visible'));

179
180				new_slide_index = (cur_slide_index == (all_slides- slides_visible) ) ? 0: cur_slide_index + 1;
181				if( new_slide_index<0) new_slide_index = 0;
182				go_to_slide_index(new_slide_index, $el);
183				slide.resetInterval();
184			},
185			interaction: function(){
186				// click on nav arrows
187				$el.on('swiperight','.evo_slider_outter', function(){
188					slide.changeSlide( 'prev');
189				});
190				$el.on('swipeleft','.evo_slider_outter', function(){
191					slide.changeSlide( 'next');
192				});
193
194				$el.on('click','.evoslider_nav',function(){
195					var direction = $(this).hasClass('next')? 'next':'prev';
196					slide.changeSlide( direction);
197				});
198
199				// click on control dots
200				$el.on('click','.evosl_dot', function(){
201					go_to_slide_index( $(this).data('index') , $el);
202				});
203			},
204			changeSlide: function(direction){
205				var new_slide_index = 0;
206					
207				var cur_slide_index = parseInt(EL.data('slideindex'));
208				var slides_visible = parseInt(EL.data('slides_visible'));
209
210				if(direction == 'next'){
211					new_slide_index = (cur_slide_index == (all_slides- slides_visible) ) ? 0: cur_slide_index + 1;
212				}else{ //previous
213					new_slide_index = (cur_slide_index == 0)? 
214						all_slides - slides_visible : 
215						cur_slide_index - 1;
216				}
217
218				if( new_slide_index<0) new_slide_index = 0;
219				go_to_slide_index(new_slide_index, $el);
220				
221				slide.resetInterval();
222			}
223		};
224
225		slide.init();
226		slide.interaction();
227	};
228	
229	$('body').find('.evoslider').each(function(){
230		$(this).slider_work();
231	});
232
233// slider control interaction
234	// hover over micro slides
235		$('.ajde_evcal_calendar.microSlider').on('mouseover','.eventon_list_event', function(){
236			O = $(this);
237			OUT = O.closest('.evo_slider_outter');
238			title = O.find('.evcal_event_title').html();
239
240			p = O.position();
241
242			OUT.append('<span class="evo_bub_box" style="">'+ title +"</span>");
243			B = OUT.find('.evo_bub_box');
244
245			l = p.left;
246			t = p.top- B.height() -30;
247
248			// adjust bubble to left if event on right edge
249			LM = OUT.width();
250			tl = p.left + B.width() + O.width();
251			if(   tl > LM){
252				l = l - B.width() +O.width()-20;
253			}
254
255			B.css({'top':t, 'left':l});
256
257			OUT.find('.evo_bub_box').addClass('show');
258		}).on('mouseout',function(){
259			B = $(this).find('.evo_bub_box').remove();
260		});
261
262// go into a focused slide
263	function go_to_slide_index(new_slide_index, CAL, instant = false){
264		var slider = CAL.find('.evo_slider_slide_out');
265		var SC = CAL.evo_shortcode_data();
266		var EL = CAL.find('.eventon_events_list');
267		var new_marl = new_mart = 0;
268
269		var all_slides = CAL.find('.slide').length;
270		var cur_slide_index = parseInt(EL.data('slideindex'));
271		var slides_visible = parseInt(EL.data('slides_visible'));
272
273		var cur_mart = parseFloat(EL.css('margin-top') );
274		var cur_slider_height = slider.height();
275
276
277		// vertical
278		if( SC.slider_type == 'vertical' ){
279			new_slider_h = 0;
280			for (var i = new_slide_index; i < (new_slide_index + slides_visible); i++) {
281				new_slider_h += CAL.find('.slide').eq( i ).height();
282			}
283
284			for (var i = 0; i < (new_slide_index ); i++) {
285				new_mart += CAL.find('.slide').eq( i ).height();
286			}
287			new_mart = -1*new_mart;						
288			slider.animate({height: new_slider_h });
289		// horizontal
290		}else{
291			var slider_move_distance = EL.data('slider_move_distance');
292			var cur_marl = parseFloat(EL.css('margin-left'));
293
294			for (var i = 0; i < (new_slide_index ); i++) {
295				new_marl += CAL.find('.slide').eq( i )[0].getBoundingClientRect().width;
296			}
297
298			new_marl = -1*new_marl;
299
300			// end validation
301			if( (new_marl -  slider.width())*-1 >  ( EL.width() )){
302				new_marl = 0; new_slide_index = 0;
303			} 
304		}
305
306		// set dot focus
307		CAL.find('.evosl_footer .evosl_dot').removeClass('f');
308		CAL.find('.evosl_footer .evosl_dot').eq( new_slide_index ).addClass('f');
309
310		EL.data('slideindex', new_slide_index);
311		if( instant){
312			EL.css({
313				marginLeft: new_marl,
314				marginTop: new_mart,
315			});
316		}else{
317			EL.animate({
318				marginLeft: new_marl,
319				marginTop: new_mart,
320			}, parseInt(SC.slider_speed) , 'easeOutCirc');
321		}
322		
323	}
324
325// whether an event color is lighter or dark
326	function _hex_is_light(color) {
327		if( color === undefined ) return false;
328	    const hex = color.replace('#', '');
329	    const c_r = parseInt(hex.substr(0, 2), 16);
330	    const c_g = parseInt(hex.substr(2, 2), 16);
331	    const c_b = parseInt(hex.substr(4, 2), 16);
332	    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
333	    return brightness > 220;
334	}
335
336});