Add Control Panel

This commit is contained in:
Nick Eyre
2014-06-09 21:25:15 -07:00
parent 220805c058
commit 87d9c71184
2 changed files with 27 additions and 22 deletions

View File

@@ -17,13 +17,7 @@
</head>
<body>
<div class='container' id='logoScreen'>
<div class='blinds right background'>&nbsp;</div>
<div class='blinds right center blank'>&nbsp;</div>
<div class='blinds left background'>&nbsp;</div>
<div class='blinds left center'>&nbsp;</div>
<div class='blinds left center blank'>&nbsp;</div>
</div>
<div id='container'></div>
<div class='controlpanel'>
<h3>Control Panel</h3>
@@ -35,5 +29,15 @@
<script src="/static/lib/jquery.transit.min.js"></script>
<script src="/static/js/audience.js"></script>
<script type='text/x-template' class='template' id='logoScreen'>
<div id='logoScreen'>
<div class='blinds right background'>&nbsp;</div>
<div class='blinds right center blank'>&nbsp;</div>
<div class='blinds left background'>&nbsp;</div>
<div class='blinds left center'>&nbsp;</div>
<div class='blinds left center blank'>&nbsp;</div>
</div>
</script>
</body>
</html>

View File

@@ -5,38 +5,39 @@ var handle;
function logoScreen(){
// Initialize
$('#logoScreen .blinds.center:not(.blank)').css({rotateY: '-180deg'})
$('#container').html($('.template#logoScreen').html());
$('.blinds.center:not(.blank)').css({rotateY: '-180deg'})
// In Animation
closeBlinds('logoScreen', function(){
closeBlinds(function(){
setTimeout(function(){
$('#logoScreen .blinds.center.blank').transition({rotateY: '180deg'});
$('#logoScreen .blinds.center:not(.blank)').transition({rotateY: '0deg'});
$('.blinds.center.blank').transition({rotateY: '180deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '0deg'});
}, 400);
});
// Close Function
return function(callback){
$('#logoScreen .blinds.center.blank').transition({rotateY: '360deg'});
$('#logoScreen .blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
openBlinds('logoScreen', callback);
$('.blinds.center.blank').transition({rotateY: '360deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
openBlinds(callback);
});
}
}
function closeBlinds(id, callback){
$('#'+id+' .blinds.right').transition({right: 0});
$('#'+id+' .blinds.left').transition({left: 0}, function(){
function closeBlinds(callback){
$('.blinds.right').transition({right: 0});
$('.blinds.left').transition({left: 0}, function(){
$(this).addClass('full');
callback();
});
}
function openBlinds(id, callback){
$('#'+id+' .blinds.right').show();
$('#'+id+' .blinds.left').removeClass('full');
$('#'+id+' .blinds.right').show().transition({right: '-50%'});
$('#'+id+' .blinds.left').transition({left: '-50%'}, function(){
function openBlinds(callback){
$('.blinds.right').show();
$('.blinds.left').removeClass('full');
$('.blinds.right').show().transition({right: '-50%'});
$('.blinds.left').transition({left: '-50%'}, function(){
callback();
});
}