franzz/ugc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

settings: cinemas picker

Browse Source
This commit is contained in:
Franzz
2015-08-20 23:00:24 +02:00
parent 6a97fba1de
commit 6da97fb569
8 changed files with 201 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
inc/functions.php
View File

@@ -30,9 +30,9 @@ function setPageMime($sType='html')
if($sType!='html' && array_key_exists($sType, $asMainTypes)) header('Content-type: '.$asMainTypes[$sType].'/'.$sType); if($sType!='html' && array_key_exists($sType, $asMainTypes)) header('Content-type: '.$asMainTypes[$sType].'/'.$sType);
} }
function getTrimImage($iFilmId, $sinPath, $sImageExt) function getTrimImage($iFilmId, $sSize, $sinPath, $sImageExt)
{ {
$sOutPath = 'images/'.$iFilmId.'.'.$sImageExt; $sOutPath = 'images/'.$iFilmId.'_'.$sSize.'.'.$sImageExt;
if(!file_exists($sOutPath)) if(!file_exists($sOutPath))
{ {
$oImage = call_user_func('imagecreatefrom'.$sImageExt, $sinPath); $oImage = call_user_func('imagecreatefrom'.$sImageExt, $sinPath);

2
index.php
View File

@@ -13,7 +13,7 @@ switch($sAction)
$sResult = getPage($asData['path'], $asData['vars']); $sResult = getPage($asData['path'], $asData['vars']);
break; break;
case 'get_poster': case 'get_poster':
$sResult = getTrimImage($asData['id'], $asData['url'], $sType); $sResult = getTrimImage($asData['id'], $asData['size'], $asData['url'], $sType);
break; break;
default: default:
$sResult = file_get_contents('masks/index.html'); $sResult = file_get_contents('masks/index.html');

12
masks/index.html
View File

@@ -12,7 +12,6 @@
<title>UGC Clone</title> <title>UGC Clone</title>
<script type="text/javascript"> <script type="text/javascript">
//Parameters //Parameters
var asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'};
var oDate = new Date(/*'2015-08-15'*/); var oDate = new Date(/*'2015-08-15'*/);
if(oDate.getHours()==23) oDate.setDate(oDate.getDate() + 1); if(oDate.getHours()==23) oDate.setDate(oDate.getDate() + 1);
@@ -23,14 +22,21 @@
</script> </script>
</head> </head>
<body> <body>
<header><div class="title"><time id="date"></time></div></header> <header>
<div class="title"><time id="date"></time></div>
<div id="btn_settings" class="fa fa-settings"></div>
</header>
<main> <main>
<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div> <div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
</main> </main>
<div id="feedback"> <div id="feedback">
<h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1> <h2><i class="fa fa-icon fa-feedback"></i>Filtered films</h2>
<div id="feed_content"></div> <div id="feed_content"></div>
</div> </div>
<footer><i class="fa fa-icon fa-power"></i>Designed &amp; powered by Franzz, licensed under GPLv3.</footer> <footer><i class="fa fa-icon fa-power"></i>Designed &amp; powered by Franzz, licensed under GPLv3.</footer>
<div id="settings">
<h1>Theaters<span id="ok_settings" class="button square fa fa-ok"></span></h1>
<ul class="cinemas"></ul>
</div>
</body> </body>
</html> </html>

108
script/film.js
View File

@@ -35,15 +35,23 @@ function Film()
this.poster = function(sPoster) this.poster = function(sPoster)
{ {
if(sPoster) //Set if(sPoster) sPoster = this.getPosterUrl(sPoster, 'small');
{
var sExt = sPoster.substr(sPoster.lastIndexOf('.')+1).toLowerCase();
if(sExt=='jpg') sExt = 'jpeg';
var sPoster = this.consts.process_url+'?a=get_poster&type='+sExt+'&data[id]='+this.id()+'&data[url]='+encodeURIComponent(sPoster);
}
return this.attr('poster', sPoster); return this.attr('poster', sPoster);
}; };
this.backgroundPoster = function(sPoster)
{
if(sPoster) sPoster = this.getPosterUrl(sPoster, 'medium');
return this.attr('poster_bg', sPoster);
};
this.getPosterUrl = function(sUrl, sSize)
{
var sExt = sUrl.substr(sUrl.lastIndexOf('.')+1).toLowerCase();
if(sExt=='jpg') sExt = 'jpeg';
return this.consts.process_url+'?a=get_poster&type='+sExt+'&data[id]='+this.id()+'&data[url]='+encodeURIComponent(sUrl)+'&data[size]='+sSize;
};
this.edito = function(sEdito) this.edito = function(sEdito)
{ {
return this.attr('edito', sEdito); return this.attr('edito', sEdito);
@@ -90,7 +98,7 @@ function Film()
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()) .data('id', this.id())
.append($('<img>', {'class':'bg', 'src':this.poster()})) .append($('<img>', {'class':'bg', 'src':this.backgroundPoster()}))
.append($('<img>', {'class':'poster', 'src':this.poster()})) .append($('<img>', {'class':'poster', 'src':this.poster()}))
.append($('<div>', {'class':'info'}) .append($('<div>', {'class':'info'})
.append($('<p>', {'class':'title'}) .append($('<p>', {'class':'title'})
@@ -142,7 +150,7 @@ function Film()
if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id()); if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id());
$.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){ $.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){
$Timetable $Timetable
.append($('<a>', {'class':'time', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time)) .append($('<a>', {'class':'button', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time))
.append(' '); //for line break .append(' '); //for line break
}); });
} }
@@ -173,6 +181,7 @@ function Affiche(oDate)
this.date.today = new Date(this.date.now.getFullYear(), this.date.now.getMonth(), this.date.now.getDate()); this.date.today = new Date(this.date.now.getFullYear(), this.date.now.getMonth(), this.date.now.getDate());
this.date.timestamp = this.date.today / 1; this.date.timestamp = this.date.today / 1;
this._cinemasList = {};
this._films = {}; this._films = {};
this._wip = 0; this._wip = 0;
this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
@@ -182,6 +191,7 @@ function Affiche(oDate)
this.$Main = $('main'); this.$Main = $('main');
this.$Footer = $('footer'); this.$Footer = $('footer');
this.$Feedback = $('#feedback'); this.$Feedback = $('#feedback');
this.$Settings = $('#settings');
this.wip = function(iProgress) this.wip = function(iProgress)
{ {
@@ -224,7 +234,6 @@ function Affiche(oDate)
this.loadCinemas = function() this.loadCinemas = function()
{ {
//Today timestamp
this.setHeader(); this.setHeader();
$.each(asCinemas, function(iCinemaId, sCinemaName){ $.each(asCinemas, function(iCinemaId, sCinemaName){
@@ -262,7 +271,9 @@ function Affiche(oDate)
oFilm.name($Film.find('.FilmTitle').text()); oFilm.name($Film.find('.FilmTitle').text());
//Poster //Poster
oFilm.poster($Film.find('.FilmThumbnail img').attr('src')); var sPosterUrl = $Film.find('.FilmThumbnail img').attr('src');
oFilm.poster(sPosterUrl);
oFilm.backgroundPoster(sPosterUrl.replace('152x217/FFFFFF', '274x410/EEEEE8'));
//Trailer //Trailer
oFilm.trailer($Film.find('.FilmIntroLink a').attr('href')); oFilm.trailer($Film.find('.FilmIntroLink a').attr('href'));
@@ -332,13 +343,90 @@ function Affiche(oDate)
this.setHeader = function() this.setHeader = function()
{ {
//Date on top
var iDay = this.date.today.getDate(); var iDay = this.date.today.getDate();
$('#date') $('#date')
.attr('datetime', this.date.today.getFullYear()+'-'+(("0" + (this.date.today.getMonth() + 1)).slice(-2))+'-'+(("0" + iDay).slice(-2))) .attr('datetime', this.date.today.getFullYear()+'-'+(("0" + (this.date.today.getMonth() + 1)).slice(-2))+'-'+(("0" + iDay).slice(-2)))
.append(this.consts.days[this.date.today.getDay()]+', '+this.consts.months[this.date.today.getMonth()]+' '+iDay) .append(this.consts.days[this.date.today.getDay()]+', '+this.consts.months[this.date.today.getMonth()]+' '+iDay)
.append($('<sup>').text((iDay%10==1)?'st':((iDay%10==2)?'nd':((iDay%10==3)?'rd':'th')))); .append($('<sup>').text((iDay%10==1)?'st':((iDay%10==2)?'nd':((iDay%10==3)?'rd':'th'))));
//Load Settings
this.setSettings();
} }
this.setSettings = function()
{
//Date
this.setDates();
//Cinemas
this.cinemas();
//Event
this.$Header.find('#btn_settings').click(function(){
self.$Settings.show();
});
this.$Main.click(function(){self.$Settings.hide();});
$(window).keyup(function(e){if(e.keyCode == 27) self.$Settings.hide();});
//Validattion
this.$Settings.find('#ok_settings').click(function(){
//Cinemas
var asCines = {};
self.$Settings.find('.include').each(function(iKey, oCinema){
$Cine = $(oCinema);
asCines[$Cine.data('id')] = $Cine.text();
});
self.cinemas(asCines);
//Day
location.reload();
});
};
this.setDates = function()
{
};
this.cinemas = function(asSetCinemas)
{
if(!asSetCinemas) //Set cookie/default cinemas and get list
{
var asCookieCinemas = Cookies.getJSON('cinemas');
if(!asCookieCinemas) asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'};
else asCinemas = asCookieCinemas;
getUgcPage( 'headerReservationAction!reloadCinemasList.action',
{'regionsAndCinemasBean.region':'', 'regionsAndCinemasBean.cinema':'', '_':Date.now()},
self.displaySettingsCinemas,
function(){self.error('Error: Could not load cinema list');},
'json');
}
else //Set new cinemas as cookie
{
Cookies.set('cinemas', asSetCinemas);
asCinemas = asSetCinemas;
}
};
this.displaySettingsCinemas = function(jData)
{
this._cinemasList = jData.cinemas;
var $Cinemas = self.$Settings.find('.cinemas');
$.each(this._cinemasList, function(iKey, sCinemaName){
var iCinemaId = $.trim(iKey);
$Cinemas.append($('<li>', {'class':'cinema'})
.attr('id', '_'+iCinemaId)
.data('id', iCinemaId)
.toggleClass('include', (iCinemaId in asCinemas))
.click(function(){$(this).toggleClass('include')})
.text(sCinemaName));
});
};
this.film = function(iFilmId, oFilm) this.film = function(iFilmId, oFilm)
{ {
if(!iFilmId) return this._films; if(!iFilmId) return this._films;

3
script/jquery.js vendored
View File

File diff suppressed because one or more lines are too long

2
style/ugc.css
View File

File diff suppressed because one or more lines are too long

2
style/ugc.css.map
View File

File diff suppressed because one or more lines are too long

96
style/ugc.scss
View File

@@ -26,7 +26,13 @@ a:hover {
} }
h1 { h1 {
color:#08288B;
margin:0 0 0.8em 0;
}
h2 {
margin:0 0 1em 0; margin:0 0 1em 0;
font-size:1.7em;
} }
/* Common Classes */ /* Common Classes */
@@ -35,6 +41,21 @@ h1 {
margin-right:0.5em; margin-right:0.5em;
} }
.button {
background:#666;
color:white;
padding:0.1em 0.4em;
border-radius:3px;
cursor: pointer;
}
.button:hover {
background:#08288B;
color:white;
}
.button.square {
padding:0.2em;
}
/* Font Awesome Classes */ /* Font Awesome Classes */
.fa-film:before { .fa-film:before {
@@ -61,6 +82,12 @@ h1 {
.fa-feedback:before { .fa-feedback:before {
content: "\f0b0"; content: "\f0b0";
} }
.fa-settings:before {
content: "\f013";
}
.fa-ok:before {
content: "\f00c";
}
/* Sections */ /* Sections */
@@ -70,6 +97,8 @@ header {
margin:0; margin:0;
visibility:hidden; visibility:hidden;
text-align: center; text-align: center;
color:#08288B;
position: relative;
} }
header .title { header .title {
@@ -81,10 +110,22 @@ header .title {
header .title time { header .title time {
display:inline-block; display:inline-block;
font-size: 2em; font-size: 2em;
color:#08288B;
padding:1.5em 0 1.5em 0.75em; padding:1.5em 0 1.5em 0.75em;
} }
header #btn_settings {
position: absolute;
top:0;
right:0;
font-size:1.5em;
cursor: pointer;
}
header #btn_settings:hover {
font-size: 2em;
top:-0.1em;
right:-0.1em;
}
/* Section - Main */ /* Section - Main */
main { main {
@@ -132,7 +173,7 @@ main {
right:0; right:0;
bottom:0; bottom:0;
width:calc(100% - 152px); width:calc(100% - 152px);
opacity:0.25; opacity:0.2;
} }
.film img.poster { .film img.poster {
@@ -192,16 +233,6 @@ main {
margin-right:0.5em; margin-right:0.5em;
} }
.film .timetable .time {
background:#666;
color:white;
padding:0.1em 0.4em;
border-radius:3px;
}
.film .timetable .time:hover {
background:#08288B;
}
/* Section - Feeback */ /* Section - Feeback */
#feedback { #feedback {
@@ -229,6 +260,47 @@ footer {
color:#08288B; color:#08288B;
} }
/* Section - Settings */
#settings {
display:none;
position:absolute;
top:0;
left:0;
right:0;
margin:1em;
padding:1em;
background:white;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
z-index: 3;
}
#settings h1 {
position:relative;
}
#settings h1 .button {
position:absolute;
right:0;
}
#settings ul.cinemas {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
list-style: none;
padding:0;
margin:0;
}
#settings ul.cinemas li {
cursor: pointer;
}
#settings ul.cinemas li.include {
font-weight: bold;
}
/* Mobile Support */ /* Mobile Support */
@import 'small_screen'; @import 'small_screen';