Commit 8ba13741 authored by Simon Daron's avatar Simon Daron
Browse files

Fixing some strange behaviour with scroll & player.fixed

parent c4bb59d5
......@@ -173,7 +173,7 @@ body{
#metaNav {
min-height: 2em;
height: 2em;
color:white;
background-color: black;
position:fixed;
......@@ -273,6 +273,7 @@ body{
#player-container .metas{padding-left:0.5em;border-width:0 0 0 2px;border-style:solid;}
#player-container .padded{padding:1em;}
#player-container{
fon-size:90%;
border-top:2px solid black;
border-bottom:2px solid black;
}
......@@ -286,28 +287,38 @@ body{
width:100%;
top:2em;
}
#player-container.fixed #audioPlayer{
#player-container.fixed .padded{
padding:0.2em;
font-size:90%;
}
#Listen.withPlaylist #player-container #audioPlayer{
float:left;
width:45%;
padding-right:5%;
border-right:2px solid white;
}
#player-container.fixed #Playlist{
margin-left:45%;
#Listen.withPlaylist #player-container #Playlist{
float:right;
width:45%;
text-align:left;
}
#PlayerHelp{
clear:both;
}
#player-container.normal #player{
padding:2em;
max-width:350px;
}
#player-container #audioPlayer{
max-width:50%;
margin:auto;
}
#player-container.normal .sub{
padding:0.5em;
#player-container #PlayerHelp{
border-top:2px solid white;
}
/*Playlist*/
#Playlist{
}
#Playlist button{font-size:1em;
......@@ -342,17 +353,18 @@ body{
}
#player-container #Playlist ol{
font-size:0.8em;
}
#player-container #Playlist ol{
margin-top:1em;
padding:0 0 0 2em;
}
#player-container.fixed #Playlist ol{
height:1em;
overflow:auto;
#player-container #Playlist ol{
height:2em;
overflow:hidden;
}
#player-container #Playlist ol li{
height:1em !important;
height:2em !important;
}
#Playlist ol li .title{
max-width:70%;
......
......@@ -21,6 +21,7 @@
playlistContainer: $('<ol>'),
onAdd: function(){},
onPlay: function(){},
onUpdate: function(){},
},
_create: function() {
// Initialization logic here
......@@ -48,18 +49,12 @@
this.playlist = [];
this.playlistContainer.find('audio').each(function(){
thePlaylist.playlist.push(thePlaylist.jsonifyAudio($(this)));
});
if(this.playlist.length >= 1){
this.playlistContainer.show();
this.controls.show();
}else{
this.playlistContainer.hide();
this.controls.hide();
}
});
this.savePlaylist();
this.debugContainer.text(
JSON.stringify(this.playlist, null, '\t')
);
this.options.onUpdate(this);
return this.playlist;
},
savePlaylist: function(){
......@@ -122,7 +117,7 @@
var controls = $('<span>',{class:'soundControls controls'});
var html5 = $('<button>',{class:'icon-html5',click:function(){
audio.toggle();
}});
}}).hide();
var remove = $('<button>',{class:'icon-remove',click:function(){
container.remove();
thePlaylist._update();
......@@ -150,6 +145,7 @@
var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
this.playlistContainer.append(htmlAudio);
this.isLastAdd = htmlAudio;
if(!this.isActive){this.isActive=this.isLastAdd;}
this.options.onAdd(this);
if(success){success();}
this._update();
......
......@@ -23,6 +23,15 @@ $(function() {
onAdd:function(self){
//self.isLastAdd[0].scrollIntoView();
self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 );
},
onUpdate:function(self){
if(self.playlist.length >= 1){
self.element.show();
$('#Listen').addClass('withPlaylist');
}else{
self.element.hide();
$('#Listen').removeClass('withPlaylist');
}
}
});
......@@ -31,10 +40,10 @@ $(function() {
/****************************************************/
if($('#player-container').offset()){
var topPosition = 0;
topPosition = $('#player-container').offset().top - $('#metaNav').height();
topPosition = $('#player-container').offset().top;
$(window).bind('scroll load',function (event) {
$('#player-container').removeClass('fixed');
var y = $(this).scrollTop() - $('#player-container').height();
//$('#player-container').removeClass('fixed');
var y = $(this).scrollTop() - $('#Listen').height();
if (topPosition!== 0 && y >= topPosition) {
$('#Listen').css({'min-height':$('#Listen').height()});
$('#player-container').addClass('fixed').removeClass('normal');
......@@ -79,7 +88,7 @@ $(function() {
var bodyID = html.match(/<body id="(.*?)">/);
if(bodyID){$('body').attr('id',bodyID[1].trim());}
$("#Changing").css({'min-height':$('body').height()});
$('html, body').animate({scrollTop: $main.offset().top-$('#metaNav').height()+2}, 500);
$.scrollTo('#Changing',1000,{offset:-$('#metaNav').height()+2});
init();
};
......
<div id="player-container" class="normal">
<div id="player">
<div id="player-container" class="normal cf">
<div id="player" class="wrapper cf">
<div id="audioPlayer" class="cf">
<div class="padded">
<ul class="metas custom right">
<li><a class="button resymbol icon-download inBlock" title="Get the stream on your player!" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>
<!--<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>-->
<li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
</ul>
<button id="DirectStreamPanikControler" class="label">
......@@ -27,9 +27,9 @@
</div>
</div>
<div id="Playlist" class="sub cf">
<div class="padded">
<span class="label"><span class="icon-headphones" ></span>&nbsp;Playlist</span>
<div id="localList"></div>
<div id="localList" class="padded">
<div class="label"><span class="icon-headphones" ></span>&nbsp;Playlist</div>
</div>
</div>
<div id="PlayerHelp" class="sub padded hidden help">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment