build/tools/droiddoc/templates/assets/carousel.js

   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 }