https://www.healthycommunitieshealthyfuture.org/wp-content/themes/nlc-site/js/carousel.js

1var globalCarousel = {
2    officials : [],
3    iconLength : 3,
4    slides : null, // iconLength / 9
5    activeIcon : 0,
6    activeSlide : 0,
7    timer : 1,
8    order : 0, 
9    getOffset : function() {
10	//console.log("a.",this.activeSlide);
11	// console.log("b.",this.iconLength);
12	// console.log("c.",this.activeIcon);
13	this.offset = (this.activeSlide * this.iconLength + this.activeIcon);
14	return this.offset;
15    },
16    ulWidth : 210
17}
18var start = 0;
19
20// Each mayor is defined as an object
21function Official(data) {
22
23    this.name = data.role+" "+data.name+"<br/>"+data.municipalityName+", "+data.municipalityState;
24    this.order = 0; 
25	
26    this.url = data.url;// if at any time a url is available to somewhere else
27    this.image = data.image;
28    this.description = data.description; // greek text at the moment
29
30}
31
32Official.prototype.setOrder = function(num){
33    this.order = num;
34}
35
36
37function Activate( showcase ) {
38
39    var li = this.getIcon();
40    var _this = this,
41    lPortrait = $('#main-officials-feature'),
42    mayor = $('#mayor-title p'),

43    large = _this.image.large,
44    direction = _this.order - globalCarousel.activeIcon > 0 ? 1 : 0,// 1 = right to left; 0 = left to right,
45    _url = this.url;
46
47		
48    // if activated by click
49    if( showcase ) {
50	globalCarousel.timer = 0;
51	$('#main-officials-list h2 span .pause').trigger('click');
52    }
53	
54    // once image has loaded, animate in
55	
56    $.preloadImgs(large, function() {
57	mayor.html( _this.name );
58	//console.log("~~~~~~~~~~~~(name , order ) ",_this.name , _this.order);
59		
60	var img = $('<img />').attr('src',large).css({
61	    left: direction ? 260 : -260
62	}).bind('click',function(){
63	    window.location = _url
64	}).insertBefore( lPortrait.find('img') );
65		
66	lPortrait.find('img').animate({
67	    'left' : (direction ? '-=' : '+=') + 260
68	}, 700,function() {
69	    lPortrait.find('img:gt(0)').remove();
70	});
71		
72	$('#main-officials-ul li.current').removeClass('current');
73	li.addClass('current');
74    })
75}
76
77// returns the <li> object if exists,
78// otherwise creates a new one, and binds a click function
79Official.prototype.getIcon = function() {
80    if( this.iconLI ) return this.iconLI;
81	
82    var li = $('<li />').css({
83	'cursor' : 'pointer'
84    }),
85    src = this.image.small,
86    img = $('<img />').attr('src',src).attr('alt','').appendTo( li )
87    icon = $('<div />').appendTo( li );
88	
89    li.bind('click',{
90	_this:this
91    },function(e) {
92	Activate.call( e.data._this, 1 )
93    });
94	
95    this.iconLI = li;
96	
97    return li;
98}
99
100// return the next icon in line
101Official.prototype.next = function() {
102	
103    return globalCarousel.officials[ this.order + 1 ];
104}
105
106function getCarouselData() {
107    // Either save the Carousel data in PHP, but make it available to the js, or pull it in dynamically
108    $.ajax({
109	type:'POST',
110	//url:'/wp-content/themes/nlc-site/js/carousel/Carousel.json',
111	url:'/api/?action=getCarouselData',
112	dataType:'json',
113	success:processCarouselData,
114	error:function() {
115	    console.log('Carousel data load: FAILED.')
116	}
117    })
118}
119
120// wrap each official as an Official object, and push them into the global object
121function processCarouselData( d ) {
122	
123    $.each( d.officials, function( i, obj ) {
124		
125	var official = new Official(obj );
126
127	official.setOrder(globalCarousel.order);
128	globalCarousel.order++;
129	globalCarousel.officials.push( official );
130
131    });
132	
133    var shuffle = function(o) {
134	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
135	return o;
136    };
137	
138    //globalCarousel.officials = shuffle(globalCarousel.officials);
139	
140    // number of full slides rounding down, so make it divisible by the iconLength
141    globalCarousel.slides = Math.floor(globalCarousel.officials.length / globalCarousel.iconLength);
142	
143    carouselInit();
144}
145
146function carouselInit() {
147	
148
149    for( var i = 0; i < globalCarousel.iconLength; i++ ) {
150	$('#main-officials-ul').append($(globalCarousel.officials[i].getIcon()));
151    }
152	
153	
154	
155    // load first image & show it as the current mayor
156    $('<img />').attr('src',globalCarousel.officials[0].image.large).appendTo( $('#main-officials-feature div') );
157
158    Activate.call( globalCarousel.officials[0]);
159    $('#main-officials-ul li').eq(0).addClass('current');
160	
161    // assuming there will be atleast 2 full sets of icons, we show the 'next-carrot', and bind functions to both forward & backward
162    $('#forward-carousel').show().bind('click',function() {
163	carouselTransition(1)
164    });
165    //$('#main-officials-list .back-carrot').bind('click',function() { carouselTransition() });
166	
167    // initiate timer for the first time
168    carouselResumeTime();
169	
170
171}
172
173function carouselResumeTime() {
174
175    if( globalCarousel.timer ) $(document).stopTime('carousel').everyTime(5500,'carousel',carouselTimer);//3357000
176}
177
178function carouselStopTime() {
179    $(document).stopTime('carousel');
180}
181
182function carouselTimer() {
183    //console.log("------------------");
184
185    start += 1;
186
187    if( globalCarousel.activeIcon + 1 == globalCarousel.iconLength ){
188	carouselTransition(1);
189	start = 0;
190    }
191
192    if(start%3 != 0) {
193		
194	globalCarousel.activeIcon = globalCarousel.activeIcon%3;
195	globalCarousel.activeIcon++;
196		
197    }else{
198
199    }
200   
201    var offset = globalCarousel.getOffset();
202		
203    if(offset < globalCarousel.officials.length){
204
205	var cur = globalCarousel.officials[offset];
206
207	if(globalCarousel.activeIcon <= 2){
208	    var next = cur.next();
209
210				
211	}else {
212	    console.log("error:activeIcon >2");
213				
214	    return;
215	}
216	var li = $('#main-officials-ul li');
217			
218    }else{
219	console.log("error: offset> officals.length")
220	return;
221    }
222
223    $('#main-officials-ul li.current').removeClass('current');
224    if(next){
225	next.getIcon().addClass('current');
226	if(start%3 != 0){
227	}
228		
229	Activate.call(cur);
230	return true;
231    }
232		
233		

234// find the current offset, and activate the next official in line
235	
236}
237
238function carouselTransition( direction) {// direction of 1 = forward; 0 = backward
239    // stop the time until the new icons have loaded, and transitioned in
240    carouselStopTime();
241	
242    var g = globalCarousel,
243    ul = $('#main-officials-ul'),
244		
245    // will store the new icons, so that the animation can be applied directly to this, and not each <li>
246    tempContainer = $('<div class="tempContainer" />');
247		
248    g.activeSlide = direction ?
249    g.activeSlide + 1 == g.slides ?
250    0 : g.activeSlide + 1
251    :
252    g.activeSlide == 0 ?
253    0 : g.activeSlide - 1;								
254
255    // remove 'iconLI' property from all removed elements
256    var range = g.offset - (g.offset % g.iconLength);
257    for( var i = range; i < range + g.iconLength; i++ ) g.officials[i].iconLI = null;
258	
259    // if backward direction, set the new container to be left of the current icon list
260    if( !direction ) tempContainer.css('left',-g.ulWidth);
261	
262    // hide carrot icons until after it's done animating
263    $('#main-officials-list div[class$=carrot]').hide();
264	
265
266    // append all icons to new temp div	
267    for( var i = g.activeSlide * g.iconLength; i < g.activeSlide * g.iconLength + g.iconLength; i++ ) {
268	tempContainer.append( $( g.officials[ i ].getIcon()));
269    }
270	
271    // wrap the existing <li>'s in a div
272    ul.wrapInner('<div class="remove" />');
273	
274    // append new icons to the <ul>
275    tempContainer.appendTo(ul);
276	
277    // reset the current icon to 0
278    g.activeIcon = 0;
279	
280    // get the array index of the new icons about to be shown
281    g.getOffset();
282	
283    // add 'current' class to first icon in the set
284    g.officials[ g.offset ].getIcon().addClass('current');
285
286    // call the activate function on the first icon in the set  in transition
287    Activate.call( g.officials[g.offset]);
288	
289    // animate both divs inside the <ul>
290	
291    ul.children('div.tempContainer').animate({
292	left: 0
293    }, 150).end()
294    .children('div.remove').animate({
295	left: direction ? -g.ulWidth : g.ulWidth
296    }, 150,function() {
297	// remove old icons
298	$('#main-officials-ul .remove').remove();
299	// unwrap the div for the new icons
300	$('#main-officials-ul .tempContainer li').eq(0).unwrap();
301			
302	showCarrots();
303	carouselResumeTime();
304    })
305	
306	
307}
308
309// calculates based on number of total slides, and current slides, which carrots to show
310function showCarrots() {
311    var g = globalCarousel;
312	
313    g.activeSlide + 1 == g.slides ? $('#main-officials-list .forward-carrot').hide() : $('#main-officials-list .forward-carrot').show()
314    g.activeSlide ? $('#main-officials-list .back-carrot').show() : $('#main-officials-list .back-carrot').hide()
315}