Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (133 sloc) 4.67 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Jason McLeod">
<!-- Date: 2011-07-19 -->
<style>
* {
margin:0px;
padding:0px;
}
html,body {
overflow:hidden;
}
#container {
position:absolute;
}
.app {
position:absolute;
width:100px;
height:100px;
background:#fafafa;
margin:5px;
}
.app h1 {
color:#eee;
vertical-align:middle;
text-align:center;
}
.app.selected {
border:2px solid #eee;
}
</style>
</head>
<body>
<div id='container'>
</div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/easing.js" type="text/javascript" charset="utf-8"></script>
<script>
var winWidth = 0;
var winHeight = 0;
var coverScale = 0;
var offset = 0;
var coverWidth = 360;
var coverHeight = 225;
var margin = 20;
var perRow = 5;
var camera = 0;
var selected = 0;
var wave = true;
var row = -1;
var prevRow = 0;
//var covers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var apps = [];
$(function() {
$.getJSON('system/php/json.apps.php',function(msg) {
apps = msg;
winWidth = $(window).width();
winHeight = $(window).height();
coverScale = winWidth / coverWidth / (perRow+1);
offset = winWidth - (((coverWidth-margin) * coverScale) * perRow);
camera = 0 * ((coverHeight+margin*2) * coverScale) - winHeight/2 + coverHeight/2 - margin*2
var yOffset = -1;
for(var a = 0; a < apps.length; a++) {
if(a%perRow==0) { yOffset++; }
$app = $('<div class="app" row="' + yOffset + '" app="' + a + '"><h1>' + a + '</h1></div>');
$app.css({
left:((coverWidth*coverScale) + margin) * (a%perRow),
top:yOffset*(coverScale*coverHeight+margin) - camera,
width:coverWidth*coverScale,
height:coverHeight*coverScale
});
$('#container').append($app);
}
var xOffset = $('.app:eq(' + (perRow-1) + ')').position().left + $('.app:eq(' + (perRow-1) + ')').width()
$('#container').css({left:(winWidth - xOffset)/2});
$('.app:first').addClass('selected');
});
$(document).keydown(function(e) {
var moved = false;
if(e.keyCode==37) { // left
moved=true;
selected--;
}
if(e.keyCode==38) { // up
moved=true;
selected-=perRow;
}
if(e.keyCode==39) { // right
moved=true;
selected++;
}
if(e.keyCode==40) { // down
moved=true;
selected+=perRow;
camera++;
}
// out of range prevention
if(selected<0) { selected=0; }
if(selected>apps.length-1) { selected = apps.length-1}
$('.selected').removeClass('selected');
$('.app:eq(' + selected + ')').addClass('selected');
row = $('.selected').attr('row')
if(prevRow!=row) {
camera = row * ((coverHeight+margin*2) * coverScale) - winHeight/2 + coverHeight/2 - margin*2
prevRow = row;
slideCovers();
}
if(moved) {
e.preventDefault();
}
});
});
function slideCovers() {
for(var a = 0; a < apps.length; a++) {
$this = $('.app[app="' + a + '"]');
setTimeout(function($elm) {
$elm.animate({
top:$elm.attr('row') * ((coverHeight+margin*2) * coverScale) - camera
},{
queue:false,
duration:wave?1000:500,
easing:wave?'easeOutQuint':'easeOutSine'
})
},(wave?a*20:20),$this);
};
}
</script>
</body>
</html>
Something went wrong with that request. Please try again.