fade in elements on post activities

This commit is contained in:
2015-08-17 21:26:19 +02:00
parent ae22c7e28e
commit e468fae550
3 changed files with 57 additions and 33 deletions

View File

@@ -26,7 +26,9 @@
</head> </head>
<body> <body>
<header><!-- <i class="fa fa-icon fa-date"></i> --><time id="date"></time></header> <header><!-- <i class="fa fa-icon fa-date"></i> --><time id="date"></time></header>
<main><i id="buffer" class="fa fa-spinner fa-spin"></i></main> <main>
<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
</main>
<div id="feedback"> <div id="feedback">
<h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1> <h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1>
<div id="feed_content"></div> <div id="feed_content"></div>

View File

@@ -16,10 +16,10 @@ function Film()
{ {
this._ban.status = true; this._ban.status = true;
this._ban.reason = sReason; this._ban.reason = sReason;
this.error('Hidding "'+this.name()+'". Ban reason: '+this.ban().reason); this.feedback('Hidding movie "'+this.name()+'". Ban reason: '+this.ban().reason);
this.anchor().addClass('banned'); this.anchor().addClass('banned');
} }
else this.error('setting ban status with no reason'); else this.error('Setting ban status with no reason');
} }
this.id = function(iFilmId) this.id = function(iFilmId)
@@ -89,6 +89,7 @@ function Film()
//Add film to DOM //Add film to DOM
this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.getRank()}) this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.getRank()})
.data('rank', this.getRank()) .data('rank', this.getRank())
.data('id', this.id())
//.append($('<img>', {'class':'bg', 'src':this.poster()})) //.append($('<img>', {'class':'bg', 'src':this.poster()}))
.append($('<img>', {'class':'poster', 'src':this.poster()})) .append($('<img>', {'class':'poster', 'src':this.poster()}))
.append($('<div>', {'class':'info'}) .append($('<div>', {'class':'info'})
@@ -126,8 +127,8 @@ function Film()
var sCinema = asCinemas[iCinemaId]; var sCinema = asCinemas[iCinemaId];
$.each(asLang, function(iKey, sLang) $.each(asLang, function(iKey, sLang)
{ {
if(sLang=='VF' && ('VOSTF' in self.timetable(iCinemaId))) self.error('Hiding VF version of "'+self.name()+'" @'+sCinema+' (VOSTF available)'); if(sLang=='VF' && ('VOSTF' in self.timetable(iCinemaId))) self.feedback('Hiding VF of "'+self.name()+'" @'+sCinema+' (VOSTF available)');
else if(sLang=='VFSTF') self.error('Hiding hearing-impaired version ('+sLang+') of "'+self.name()+'" @'+sCinema) else if(sLang=='VFSTF') self.feedback('Hiding hearing-impaired version ('+sLang+') of "'+self.name()+'" @'+sCinema)
else else
{ {
var $Timetable = $('<p>') var $Timetable = $('<p>')
@@ -136,7 +137,6 @@ function Film()
.append($('<span>', {'class':'cinema_name'}).text(sCinema))) .append($('<span>', {'class':'cinema_name'}).text(sCinema)))
.append($('<span>', {'class':'lang'}).text(sLang)) .append($('<span>', {'class':'lang'}).text(sLang))
.appendTo(self.anchor().find('.timetable')); .appendTo(self.anchor().find('.timetable'));
var test = self.timetable(iCinemaId, sLang); var test = self.timetable(iCinemaId, sLang);
if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id()); if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id());
@@ -154,10 +154,15 @@ function Film()
return (Date.parse('01/01/1970 '+sTime1.time+':00') > Date.parse('01/01/1970 '+sTime2.time+':00')); return (Date.parse('01/01/1970 '+sTime1.time+':00') > Date.parse('01/01/1970 '+sTime2.time+':00'));
}; };
this.error = function(sMsg) this.feedback = function(sMsg)
{ {
$('#feed_content').append($('<p>').text(sMsg)); $('#feed_content').append($('<p>').text(sMsg));
}; };
this.error = function(sMsg)
{
console.log('Film Error: '+sMsg);
};
} }
function Affiche(oDate) function Affiche(oDate)
@@ -173,16 +178,11 @@ function Affiche(oDate)
this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
months:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]}; months:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]};
this.$Header = $('header');
this.$Main = $('main'); this.$Main = $('main');
this.$Footer = $('footer'); this.$Footer = $('footer');
this.$Feedback = $('#feedback'); this.$Feedback = $('#feedback');
this.isLoaded = function()
{
//TODO
return true;
};
this.wip = function(iProgress) this.wip = function(iProgress)
{ {
if(!iProgress) return this._wip; if(!iProgress) return this._wip;
@@ -195,19 +195,30 @@ function Affiche(oDate)
this.onPostLoad = function() this.onPostLoad = function()
{ {
//Sort films
$Films = $('.film'); $Films = $('.film');
$Films.sort(function(oFilm1, oFilm2)
{ //Display Header
return ($(oFilm1).data('rank') < $(oFilm2).data('rank'))?1:-1; this.$Header.css('visibility', 'visible');
//Sort films
$Films.sort(function(oFilm1, oFilm2){return ($(oFilm1).data('rank') < $(oFilm2).data('rank'))?1:-1;}).detach();
//Remove movies with no screening
$Films.not('.banned').each(function(iKey, hFilm){
var $Film = $(hFilm);
if($Film.find('.timetable').is(':empty'))
{
var oFilm = self.film($Film.data('id'));
self.feedback('Hiding movie "'+oFilm.name()+'". No screening today');
$Film.addClass('banned');
}
}); });
//Remove loading
this.$Main.find('#buffer').hide(); this.$Main.find('#buffer').hide();
$Films
.detach() //Add films (except bans)
.appendTo(this.$Main) $Films.appendTo(this.$Main).not('.banned').slideDown('slow');
.not('.banned')
.show();
this.$Footer.add(this.$Feedback).show(); this.$Footer.add(this.$Feedback).show();
}; };
@@ -272,12 +283,7 @@ function Affiche(oDate)
getUgcPage( 'filmsAfficheAction!loadDatesList.action', getUgcPage( 'filmsAfficheAction!loadDatesList.action',
{filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:''}, {filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:''},
function(jData){ function(jData){
if(!(self.date.timestamp in jData.dates)) if(!(self.date.timestamp in jData.dates)) self.wip(-1);
{
self.error('No times today for "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+' (first date available: '+jData.dates[Object.keys(jData.dates)[0]]+')');
//if(self.isLoaded()) oFilm.removeSpinner();
self.wip(-1);
}
else else
{ {
getUgcPage( 'filmsAfficheAction!reloadSeancesList.action', getUgcPage( 'filmsAfficheAction!reloadSeancesList.action',
@@ -305,19 +311,18 @@ function Affiche(oDate)
}); });
asLangs.push(sLang); asLangs.push(sLang);
oFilm.renderTimetable(iCinemaId, asLangs); oFilm.renderTimetable(iCinemaId, asLangs);
//if(self.isLoaded()) oFilm.removeSpinner();
self.wip(-1); self.wip(-1);
}, },
function(){ function(){
self.wip(-1); self.wip(-1);
self.error('Error detected on film "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable'); self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable');
}, },
'html'); 'html');
} }
}, },
function(){ function(){
self.wip(-1); self.wip(-1);
self.error('Error detected on film "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable'); self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable');
}, },
'json'); 'json');
} }
@@ -341,10 +346,15 @@ function Affiche(oDate)
else this._films[iFilmId] = oFilm; else this._films[iFilmId] = oFilm;
}; };
this.error = function(sMsg) this.feedback = function(sMsg)
{ {
$('#feed_content').append($('<p>').text(sMsg)); $('#feed_content').append($('<p>').text(sMsg));
}; };
this.error = function(sMsg)
{
console.log('Affiche Error: '+sMsg);
};
} }
function getUgcPage(sPath, asData, fOnSuccess, fOnFail, sType) function getUgcPage(sPath, asData, fOnSuccess, fOnFail, sType)

View File

@@ -67,6 +67,7 @@ header {
margin:0 0 0 0.5em; margin:0 0 0 0.5em;
font-size: 2em; font-size: 2em;
color:#08288B; color:#08288B;
visibility:hidden;
} }
/* Section - Main */ /* Section - Main */
@@ -76,7 +77,18 @@ main {
} }
#buffer { #buffer {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 1em;
height: 1em;
margin: auto;
padding: 0px;
font-size:2em; font-size:2em;
color:#08288B;
padding-bottom: 0.5em;
} }
/* Section - Film */ /* Section - Film */