1 /* file: carousel.js 2 date: oct 2008 3 author: jeremydw,smain 4 info: operates the carousel widget for announcements on 5 the android developers home page. modified from the 6 original market.js from jeremydw. */ 7 8 /* -- video switcher -- */ 9 10 var oldVid = "multi"; // set the default video 11 var nowPlayingString = "Now playing:"; 12 var assetsRoot = "assets/"; 13 14 15 /* -- app thumbnail switcher -- */ 16 17 var currentDroid; 18 var oldDroid; 19 20 // shows a random application 21 function randomDroid(){ 22 23 // count the total number of apps 24 var droidListLength = 0; 25 for (var k in droidList) 26 droidListLength++; 27 28 // pick a random app and show it 29 var j = 0; 30 var i = Math.floor(droidListLength*Math.random()); 31 for (var x in droidList) { 32 if(j++ == i){ 33 currentDroid = x; 34 showPreview(x); 35 centerSlide(x); 36 } 37 } 38 39 } 40 41 // shows a bulletin, swaps the carousel highlighting 42 function droid(appName){ 43 44 oldDroid = $("#droidlink-"+currentDroid); 45 currentDroid = appName; 46 47 var droid = droidList[appName]; 48 49 $("#"+appName).show().siblings().hide(); 50 51 if(oldDroid) 52 oldDroid.removeClass("selected"); 53 54 $("#droidlink-"+appName).addClass("selected"); 55 } 56 57 58 // -- * build the carousel based on the droidList * -- // 59 function buildCarousel() { 60 var appList = document.getElementById("app-list"); 61 for (var x in droidList) { 62 var droid = droidList[x]; 63 var icon = droid.icon; 64 var name = droid.name; 65 var a = document.createElement("a"); 66 var img = document.createElement("img"); 67 var br = document.createElement("br"); 68 var span = document.createElement("span"); 69 var text = document.createTextNode(droid.name); 70 71 a.setAttribute("id", "droidlink-" + x); 72 a.className = x; 73 a.setAttribute("href", "#"); 74 a.onclick = function() { showPreview(this.className); return false; } 75 img.setAttribute("src", toRoot + assetsRoot + "images/home/" + droid.icon); 76 img.setAttribute("alt", ""); 77 78 span.appendChild(text); 79 a.appendChild(img); 80 a.appendChild(br); 81 a.appendChild(span); 82 appList.appendChild(a); 83 84 85 /* add the bulletins */ 86 var layout = droid.layout; 87 var div = document.createElement("div"); 88 var imgDiv = document.createElement("div"); 89 var descDiv = document.createElement("div"); 90 91 div.setAttribute("id", x); 92 div.setAttribute("style", "display:none"); 93 imgDiv.setAttribute("class", "bulletinImg"); 94 descDiv.setAttribute("class", "bulletinDesc"); 95 96 if (layout == "imgLeft") { 97 $(imgDiv).addClass("img-left"); 98 $(descDiv).addClass("desc-right"); 99 } else if (layout == "imgTop") { 100 $(imgDiv).addClass("img-top"); 101 $(descDiv).addClass("desc-bottom"); 102 } else if (layout == "imgRight") { 103 $(imgDiv).addClass("img-right"); 104 $(descDiv).addClass("desc-left"); 105 } 106 107 imgDiv.innerHTML = "<img src='" + toRoot + assetsRoot + "images/home/" + droid.img + "'>"; 108 descDiv.innerHTML = (droid.title != "") ? "<h3>" + droid.title + "</h3>" + droid.desc : droid.desc; 109 $(div).append(imgDiv); 110 $(div).append(descDiv); 111 112 $("#carouselMain").append(div); 113 114 } 115 } 116 117 // -- * slider * -- // 118 119 // -- dependencies: 120 // (1) div containing slides, (2) a "clip" div to hide the scroller 121 // (3) control arrows 122 123 // -- * config below * -- // 124 125 var slideCode = droidList; // the dictionary of slides 126 var slideList = 'app-list'; // the div containing the slides 127 var arrowRight = 'arrow-right'; // the right control arrow 128 var arrowLeft = 'arrow-left'; // the left control arrow 129 130 131 function showPreview(slideName) { 132 centerSlide(slideName); 133 if (slideName.indexOf('selected') != -1) { 134 return false; 135 } 136 droid(slideName); // do this function when slide is clicked 137 } 138 139 var thumblist = document.getElementById(slideList);// the div containing the slides 140 141 var slideWidth = 144; // width of a slide including all margins, etc. 142 var slidesAtOnce = 3; // no. of slides to appear at once (requires odd number to have a centered slide) 143 144 // -- * no editing should be needed below * -- // 145 146 var originPosition = {}; 147 var is_animating = 0; 148 var currentStripPosition = 0; 149 var centeringPoint = 0; 150 var rightScrollLimit = 0; 151 152 // makeSlideStrip() 153 // - figures out how many slides there are 154 // - determines the centering point of the slide strip 155 function makeSlideStrip() { 156 var slideTotal = 0; 157 centeringPoint = Math.ceil(slidesAtOnce/2); 158 for (var x in slideCode) { 159 slideTotal++; 160 } 161 var i = 0; 162 for (var code in slideCode) { 163 if (i <= centeringPoint-1) { 164 originPosition[code] = 0; 165 } else { 166 if (i >= slideTotal-centeringPoint+1) { 167 originPosition[code] = (slideTotal-slidesAtOnce)*slideWidth; 168 } else { 169 originPosition[code] = (i-centeringPoint+1)*slideWidth; 170 } 171 } 172 i++; 173 } 174 rightScrollLimit = -1*(slideTotal-slidesAtOnce)*slideWidth; 175 } 176 177 // slides with acceleration 178 function slide(goal, id, go_left, cp) { 179 var div = document.getElementById(id); 180 var animation = {}; 181 animation.time = 0.5; // in seconds 182 animation.fps = 60; 183 animation.goal = goal; 184 origin = 0.0; 185 animation.origin = Math.abs(origin); 186 animation.frames = (animation.time * animation.fps) - 1.0; 187 var current_frame = 0; 188 var motions = Math.abs(animation.goal - animation.origin); 189 function animate() { 190 var ease_right = function (t) { return (1 - Math.cos(t * Math.PI))/2.0; }; 191 var ease = ease_right; 192 if (go_left == 1) { 193 ease = function(t) { return 1.0 - ease_right(t); }; 194 } 195 var left = (ease(current_frame/animation.frames) * Math.abs(animation.goal - animation.origin)) - cp; 196 if(left < 0) { 197 left = 0; 198 } 199 if(!isNaN(left)) { 200 div.style.left = '-' + Math.round(left) + 'px'; 201 } 202 current_frame += 1; 203 if (current_frame == animation.frames) { 204 is_animating = 0; 205 window.clearInterval(timeoutId) 206 } 207 } 208 var timeoutId = window.setInterval(animate, animation.time/animation.fps * 1000); 209 } 210 211 //Get style property 212 function getStyle(element, cssProperty){ 213 var elem = document.getElementById(element); 214 if(elem.currentStyle){ 215 return elem.currentStyle[cssProperty]; //IE 216 } else{ 217 var style = document.defaultView.getComputedStyle(elem, null); //firefox, Opera 218 return style.getPropertyValue(cssProperty); 219 } 220 } 221 222 // Left and right arrows 223 function page_left() { 224 var amount = slideWidth; 225 animateSlide(amount, 'left'); 226 } 227 228 function page_right() { 229 var amount = slideWidth; 230 animateSlide(amount, 'right'); 231 } 232 233 234 // animates the strip 235 // - sets arrows to on or off 236 function animateSlide(amount,dir) { 237 var currentStripPosition = parseInt(getStyle(slideList,'left')); 238 var motionDistance; 239 if (amount == slideWidth ) { 240 motionDistance = slideWidth; 241 } else { 242 motionDistance = amount; 243 } 244 245 var rightarrow = document.getElementById(arrowRight); 246 var leftarrow = document.getElementById(arrowLeft); 247 248 function aToggle(state,aDir) { 249 if (state == 'on') { 250 if (aDir =='right') { 251 rightarrow.className = 'arrow-right-on'; 252 rightarrow.href = "javascript:page_right()"; 253 } else { 254 leftarrow.className = 'arrow-left-on'; 255 leftarrow.href = "javascript:page_left()"; 256 } 257 } else { 258 if (aDir =='right') { 259 rightarrow.href = "javascript:{}"; 260 rightarrow.className = 'arrow-right-off'; 261 } else { 262 leftarrow.href = "javascript:{}"; 263 leftarrow.className = 'arrow-left-off'; 264 } 265 } 266 } 267 268 function arrowChange(rP) { 269 if (rP >= rightScrollLimit) { 270 aToggle('on','right'); 271 } 272 if (rP <= rightScrollLimit) { 273 aToggle('off','right'); 274 } 275 if (rP <= slideWidth) { 276 aToggle('on','left'); 277 } 278 if (rP >= 0) { 279 aToggle('off','left'); 280 } 281 } 282 283 if (dir == 'right' && is_animating == 0) { 284 arrowChange(currentStripPosition-motionDistance); 285 is_animating = 1; 286 slide(motionDistance, slideList, 0, currentStripPosition); 287 } else if (dir == 'left' && is_animating == 0) { 288 arrowChange(currentStripPosition+motionDistance); 289 is_animating = 1; 290 rightStripPosition = currentStripPosition + motionDistance; 291 slide(motionDistance, slideList, 1, rightStripPosition); 292 } 293 } 294 295 function centerSlide(slideName) { 296 var currentStripPosition = parseInt(getStyle(slideList,'left')); 297 var dir = 'left'; 298 var originpoint = Math.abs(currentStripPosition); 299 if (originpoint <= originPosition[slideName]) { 300 dir = 'right'; 301 } 302 var motionValue = Math.abs(originPosition[slideName]-originpoint); 303 animateSlide(motionValue,dir); 304 } 305 306 307 function initCarousel(def) { 308 buildCarousel(); 309 showPreview(def); 310 makeSlideStrip(); 311 } 312
