312 lines
8.4 KiB
JavaScript
312 lines
8.4 KiB
JavaScript
/* file: carousel.js
|
|
date: oct 2008
|
|
author: jeremydw,smain
|
|
info: operates the carousel widget for announcements on
|
|
the android developers home page. modified from the
|
|
original market.js from jeremydw. */
|
|
|
|
/* -- video switcher -- */
|
|
|
|
var oldVid = "multi"; // set the default video
|
|
var nowPlayingString = "Now playing:";
|
|
var assetsRoot = "assets/";
|
|
|
|
|
|
/* -- app thumbnail switcher -- */
|
|
|
|
var currentDroid;
|
|
var oldDroid;
|
|
|
|
// shows a random application
|
|
function randomDroid(){
|
|
|
|
// count the total number of apps
|
|
var droidListLength = 0;
|
|
for (var k in droidList)
|
|
droidListLength++;
|
|
|
|
// pick a random app and show it
|
|
var j = 0;
|
|
var i = Math.floor(droidListLength*Math.random());
|
|
for (var x in droidList) {
|
|
if(j++ == i){
|
|
currentDroid = x;
|
|
showPreview(x);
|
|
centerSlide(x);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// shows a bulletin, swaps the carousel highlighting
|
|
function droid(appName){
|
|
|
|
oldDroid = $("#droidlink-"+currentDroid);
|
|
currentDroid = appName;
|
|
|
|
var droid = droidList[appName];
|
|
|
|
$("#"+appName).show().siblings().hide();
|
|
|
|
if(oldDroid)
|
|
oldDroid.removeClass("selected");
|
|
|
|
$("#droidlink-"+appName).addClass("selected");
|
|
}
|
|
|
|
|
|
// -- * build the carousel based on the droidList * -- //
|
|
function buildCarousel() {
|
|
var appList = document.getElementById("app-list");
|
|
for (var x in droidList) {
|
|
var droid = droidList[x];
|
|
var icon = droid.icon;
|
|
var name = droid.name;
|
|
var a = document.createElement("a");
|
|
var img = document.createElement("img");
|
|
var br = document.createElement("br");
|
|
var span = document.createElement("span");
|
|
var text = document.createTextNode(droid.name);
|
|
|
|
a.setAttribute("id", "droidlink-" + x);
|
|
a.className = x;
|
|
a.setAttribute("href", "#");
|
|
a.onclick = function() { showPreview(this.className); return false; }
|
|
img.setAttribute("src", toRoot + assetsRoot + "images/home/" + droid.icon);
|
|
img.setAttribute("alt", "");
|
|
|
|
span.appendChild(text);
|
|
a.appendChild(img);
|
|
a.appendChild(br);
|
|
a.appendChild(span);
|
|
appList.appendChild(a);
|
|
|
|
|
|
/* add the bulletins */
|
|
var layout = droid.layout;
|
|
var div = document.createElement("div");
|
|
var imgDiv = document.createElement("div");
|
|
var descDiv = document.createElement("div");
|
|
|
|
div.setAttribute("id", x);
|
|
div.setAttribute("style", "display:none");
|
|
imgDiv.setAttribute("class", "bulletinImg");
|
|
descDiv.setAttribute("class", "bulletinDesc");
|
|
|
|
if (layout == "imgLeft") {
|
|
$(imgDiv).addClass("img-left");
|
|
$(descDiv).addClass("desc-right");
|
|
} else if (layout == "imgTop") {
|
|
$(imgDiv).addClass("img-top");
|
|
$(descDiv).addClass("desc-bottom");
|
|
} else if (layout == "imgRight") {
|
|
$(imgDiv).addClass("img-right");
|
|
$(descDiv).addClass("desc-left");
|
|
}
|
|
|
|
imgDiv.innerHTML = "<img src='" + toRoot + assetsRoot + "images/home/" + droid.img + "'>";
|
|
descDiv.innerHTML = (droid.title != "") ? "<h3>" + droid.title + "</h3>" + droid.desc : droid.desc;
|
|
$(div).append(imgDiv);
|
|
$(div).append(descDiv);
|
|
|
|
$("#carouselMain").append(div);
|
|
|
|
}
|
|
}
|
|
|
|
// -- * slider * -- //
|
|
|
|
// -- dependencies:
|
|
// (1) div containing slides, (2) a "clip" div to hide the scroller
|
|
// (3) control arrows
|
|
|
|
// -- * config below * -- //
|
|
|
|
var slideCode = droidList; // the dictionary of slides
|
|
var slideList = 'app-list'; // the div containing the slides
|
|
var arrowRight = 'arrow-right'; // the right control arrow
|
|
var arrowLeft = 'arrow-left'; // the left control arrow
|
|
|
|
|
|
function showPreview(slideName) {
|
|
centerSlide(slideName);
|
|
if (slideName.indexOf('selected') != -1) {
|
|
return false;
|
|
}
|
|
droid(slideName); // do this function when slide is clicked
|
|
}
|
|
|
|
var thumblist = document.getElementById(slideList);// the div containing the slides
|
|
|
|
var slideWidth = 144; // width of a slide including all margins, etc.
|
|
var slidesAtOnce = 3; // no. of slides to appear at once (requires odd number to have a centered slide)
|
|
|
|
// -- * no editing should be needed below * -- //
|
|
|
|
var originPosition = {};
|
|
var is_animating = 0;
|
|
var currentStripPosition = 0;
|
|
var centeringPoint = 0;
|
|
var rightScrollLimit = 0;
|
|
|
|
// makeSlideStrip()
|
|
// - figures out how many slides there are
|
|
// - determines the centering point of the slide strip
|
|
function makeSlideStrip() {
|
|
var slideTotal = 0;
|
|
centeringPoint = Math.ceil(slidesAtOnce/2);
|
|
for (var x in slideCode) {
|
|
slideTotal++;
|
|
}
|
|
var i = 0;
|
|
for (var code in slideCode) {
|
|
if (i <= centeringPoint-1) {
|
|
originPosition[code] = 0;
|
|
} else {
|
|
if (i >= slideTotal-centeringPoint+1) {
|
|
originPosition[code] = (slideTotal-slidesAtOnce)*slideWidth;
|
|
} else {
|
|
originPosition[code] = (i-centeringPoint+1)*slideWidth;
|
|
}
|
|
}
|
|
i++;
|
|
}
|
|
rightScrollLimit = -1*(slideTotal-slidesAtOnce)*slideWidth;
|
|
}
|
|
|
|
// slides with acceleration
|
|
function slide(goal, id, go_left, cp) {
|
|
var div = document.getElementById(id);
|
|
var animation = {};
|
|
animation.time = 0.5; // in seconds
|
|
animation.fps = 60;
|
|
animation.goal = goal;
|
|
origin = 0.0;
|
|
animation.origin = Math.abs(origin);
|
|
animation.frames = (animation.time * animation.fps) - 1.0;
|
|
var current_frame = 0;
|
|
var motions = Math.abs(animation.goal - animation.origin);
|
|
function animate() {
|
|
var ease_right = function (t) { return (1 - Math.cos(t * Math.PI))/2.0; };
|
|
var ease = ease_right;
|
|
if (go_left == 1) {
|
|
ease = function(t) { return 1.0 - ease_right(t); };
|
|
}
|
|
var left = (ease(current_frame/animation.frames) * Math.abs(animation.goal - animation.origin)) - cp;
|
|
if(left < 0) {
|
|
left = 0;
|
|
}
|
|
if(!isNaN(left)) {
|
|
div.style.left = '-' + Math.round(left) + 'px';
|
|
}
|
|
current_frame += 1;
|
|
if (current_frame == animation.frames) {
|
|
is_animating = 0;
|
|
window.clearInterval(timeoutId)
|
|
}
|
|
}
|
|
var timeoutId = window.setInterval(animate, animation.time/animation.fps * 1000);
|
|
}
|
|
|
|
//Get style property
|
|
function getStyle(element, cssProperty){
|
|
var elem = document.getElementById(element);
|
|
if(elem.currentStyle){
|
|
return elem.currentStyle[cssProperty]; //IE
|
|
} else{
|
|
var style = document.defaultView.getComputedStyle(elem, null); //firefox, Opera
|
|
return style.getPropertyValue(cssProperty);
|
|
}
|
|
}
|
|
|
|
// Left and right arrows
|
|
function page_left() {
|
|
var amount = slideWidth;
|
|
animateSlide(amount, 'left');
|
|
}
|
|
|
|
function page_right() {
|
|
var amount = slideWidth;
|
|
animateSlide(amount, 'right');
|
|
}
|
|
|
|
|
|
// animates the strip
|
|
// - sets arrows to on or off
|
|
function animateSlide(amount,dir) {
|
|
var currentStripPosition = parseInt(getStyle(slideList,'left'));
|
|
var motionDistance;
|
|
if (amount == slideWidth ) {
|
|
motionDistance = slideWidth;
|
|
} else {
|
|
motionDistance = amount;
|
|
}
|
|
|
|
var rightarrow = document.getElementById(arrowRight);
|
|
var leftarrow = document.getElementById(arrowLeft);
|
|
|
|
function aToggle(state,aDir) {
|
|
if (state == 'on') {
|
|
if (aDir =='right') {
|
|
rightarrow.className = 'arrow-right-on';
|
|
rightarrow.href = "javascript:page_right()";
|
|
} else {
|
|
leftarrow.className = 'arrow-left-on';
|
|
leftarrow.href = "javascript:page_left()";
|
|
}
|
|
} else {
|
|
if (aDir =='right') {
|
|
rightarrow.href = "javascript:{}";
|
|
rightarrow.className = 'arrow-right-off';
|
|
} else {
|
|
leftarrow.href = "javascript:{}";
|
|
leftarrow.className = 'arrow-left-off';
|
|
}
|
|
}
|
|
}
|
|
|
|
function arrowChange(rP) {
|
|
if (rP >= rightScrollLimit) {
|
|
aToggle('on','right');
|
|
}
|
|
if (rP <= rightScrollLimit) {
|
|
aToggle('off','right');
|
|
}
|
|
if (rP <= slideWidth) {
|
|
aToggle('on','left');
|
|
}
|
|
if (rP >= 0) {
|
|
aToggle('off','left');
|
|
}
|
|
}
|
|
|
|
if (dir == 'right' && is_animating == 0) {
|
|
arrowChange(currentStripPosition-motionDistance);
|
|
is_animating = 1;
|
|
slide(motionDistance, slideList, 0, currentStripPosition);
|
|
} else if (dir == 'left' && is_animating == 0) {
|
|
arrowChange(currentStripPosition+motionDistance);
|
|
is_animating = 1;
|
|
rightStripPosition = currentStripPosition + motionDistance;
|
|
slide(motionDistance, slideList, 1, rightStripPosition);
|
|
}
|
|
}
|
|
|
|
function centerSlide(slideName) {
|
|
var currentStripPosition = parseInt(getStyle(slideList,'left'));
|
|
var dir = 'left';
|
|
var originpoint = Math.abs(currentStripPosition);
|
|
if (originpoint <= originPosition[slideName]) {
|
|
dir = 'right';
|
|
}
|
|
var motionValue = Math.abs(originPosition[slideName]-originpoint);
|
|
animateSlide(motionValue,dir);
|
|
}
|
|
|
|
|
|
function initCarousel(def) {
|
|
buildCarousel();
|
|
showPreview(def);
|
|
makeSlideStrip();
|
|
}
|