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

interface upgrade

Browse Source
This commit is contained in:
Franzz
2015-08-15 15:23:24 +02:00
parent 61d37c748d
commit d231658b60
6 changed files with 197 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/logo_ugc.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

81
inc/functions.php
View File

@@ -25,7 +25,86 @@ function getPage($sPath, $asVars, $bSavePage=false)
function setPageMime($sType='html') function setPageMime($sType='html')
{ {
if($sType!='html') header('Content-type: application/'.$sType); $asMainTypes = array('json'=>'application', 'jpeg'=>'image', 'png'=>'image', 'gif'=>'image');
if($sType!='html' && array_key_exists($sType, $asMainTypes)) header('Content-type: '.$asMainTypes[$sType].'/'.$sType);
}
function getTrimImage($iFilmId, $sinPath, $sImageExt)
{
$sOutPath = 'images/'.$iFilmId.'.'.$sImageExt;
if(!file_exists($sOutPath))
{
$oImage = call_user_func('imagecreatefrom'.$sImageExt, $sinPath);
$iImageX = imagesx($oImage);
$iImageY = imagesy($oImage);
$iTop = 0;
$iBottom = 0;
$iLeft = 0;
$iRight = 0;
$iWhiteLimit = 220;
//Top height to crop:
for(; $iTop < $iImageY; ++$iTop)
{
for($x = 0; $x < $iImageX; ++$x)
{
$hColor = imagecolorat($oImage, $x, $iTop);
$iRed = ($hColor >> 16) & 0xFF;
$iGreen = ($hColor >> 8) & 0xFF;
$iBlue = $hColor & 0xFF;
if($iRed<$iWhiteLimit || $iGreen<$iWhiteLimit || $iBlue<$iWhiteLimit) break 2; //out of the 'top' loop
}
}
//Bottom height to crop
for(; $iBottom < $iImageY; ++$iBottom)
{
for($x = 0; $x < $iImageX; ++$x)
{
$hColor = imagecolorat($oImage, $x, $iImageY - $iBottom - 1);
$iRed = ($hColor >> 16) & 0xFF;
$iGreen = ($hColor >> 8) & 0xFF;
$iBlue = $hColor & 0xFF;
if($iRed<$iWhiteLimit || $iGreen<$iWhiteLimit || $iBlue<$iWhiteLimit) break 2; //out of the 'bottom' loop
}
}
//Left width to crop
for(; $iLeft < $iImageX; ++$iLeft)
{
for($y = 0; $y < $iImageY; ++$y)
{
$hColor = imagecolorat($oImage, $iLeft, $y);
$iRed = ($hColor >> 16) & 0xFF;
$iGreen = ($hColor >> 8) & 0xFF;
$iBlue = $hColor & 0xFF;
if($iRed<$iWhiteLimit || $iGreen<$iWhiteLimit || $iBlue<$iWhiteLimit) break 2; //out of the 'left' loop
}
}
//Right width to crop
for(; $iRight < $iImageX; ++$iRight)
{
for($y = 0; $y < $iImageY; ++$y)
{
$hColor = imagecolorat($oImage, $iImageX - $iRight-1, $y);
$iRed = ($hColor >> 16) & 0xFF;
$iGreen = ($hColor >> 8) & 0xFF;
$iBlue = $hColor & 0xFF;
if($iRed<$iWhiteLimit || $iGreen<$iWhiteLimit || $iBlue<$iWhiteLimit) break 2; //out of the 'right' loop
}
}
//Creating a image with the new height
$oCropImage = imagecreatetruecolor($iImageX-($iLeft+$iRight), $iImageY-($iTop+$iBottom));
//Copy the content, excluding the border
imagecopy($oCropImage, $oImage, 0, 0, $iLeft, $iTop, imagesx($oCropImage), imagesy($oCropImage));
call_user_func_array('image'.$sImageExt, array($oCropImage, $sOutPath));
}
return file_get_contents($sOutPath);
} }
?> ?>

8
index.php
View File

@@ -1,5 +1,8 @@
<?php <?php
//Debug
$bDebug = false;
require_once 'inc/functions.php'; require_once 'inc/functions.php';
$sAction = isset($_REQUEST['a'])?$_REQUEST['a']:''; $sAction = isset($_REQUEST['a'])?$_REQUEST['a']:'';
@@ -9,7 +12,10 @@ $sType = isset($_REQUEST['type'])?$_REQUEST['type']:'html';
switch($sAction) switch($sAction)
{ {
case 'get_page': case 'get_page':
$sResult = getPage($asData['path'], $asData['vars']); $sResult = getPage($asData['path'], $asData['vars'], $bDebug);
break;
case 'get_poster':
$sResult = getTrimImage($asData['id'], $asData['url'], $sType);
break; break;
default: default:
$sResult = file_get_contents('masks/index.html'); $sResult = file_get_contents('masks/index.html');

10
masks/index.html
View File

@@ -3,7 +3,6 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Franzz" /> <meta name="author" content="Franzz" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<link href="style/normalize.css" rel="stylesheet" type="text/css" /> <link href="style/normalize.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
@@ -15,7 +14,7 @@
<script type="text/javascript"> <script type="text/javascript">
//Parameters //Parameters
var asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'}; var asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'};
var oDate = new Date(); 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);
$(document).ready(function(){ $(document).ready(function(){
@@ -25,9 +24,12 @@
</script> </script>
</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><i id="buffer" class="fa fa-spinner fa-spin"></i></main>
<div id="feedback"></div> <div id="feedback">
<h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1>
<div id="feed_content"></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>
</body> </body>
</html> </html>

35
script/film.js
View File

@@ -1,7 +1,7 @@
function Film() function Film()
{ {
var self = this; var self = this;
this.consts = {'ugc_url':'http://www.ugc.fr/'}; this.consts = {'ugc_url':'http://www.ugc.fr/', 'process_url':'index.php'};
this._attr = {}; this._attr = {};
this._anchor = {}; this._anchor = {};
this._ban = {status:false, reason:''}; this._ban = {status:false, reason:''};
@@ -36,6 +36,12 @@ function Film()
this.poster = function(sPoster) this.poster = function(sPoster)
{ {
if(sPoster) //Set
{
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);
}; };
@@ -68,16 +74,17 @@ function Film()
{ {
//Init page //Init page
this.onPageReady(); this.onPageReady();
//Add film to DOM //Add film to DOM
this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.id()}) this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.id()})
//.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'})
.append($('<p>', {'class':'title'}) .append($('<p>', {'class':'title'})
.append($('<a>', {'class':'name', 'target':'_blank', 'href':this.consts.ugc_url+'film.html?id='+this.id()}) .append($('<a>', {'class':'name', 'target':'_blank', 'href':this.consts.ugc_url+'film.html?id='+this.id()})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-film'})) .append($('<i>', {'class':'fa fa-fw fa-icon fa-film'}))
.append(this.name())) .append(this.name()))
.append($('<span>', {'class':'edito'}).text(this.edito()?' ['+this.edito()+']':''))) .append($('<span>', {'class':'edito'+(this.edito()?' fa fa-edito':'')}).text(this.edito()?' '+this.edito():'')))
.append($('<p>', {'class':'trailer'}) .append($('<p>', {'class':'trailer'})
.append($('<a>', {'target':'_blank', 'href':this.trailer()}) .append($('<a>', {'target':'_blank', 'href':this.trailer()})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-trailer'})) .append($('<i>', {'class':'fa fa-fw fa-icon fa-trailer'}))
@@ -108,20 +115,24 @@ function Film()
this.renderTimetable = function(iCinemaId, asLang) this.renderTimetable = function(iCinemaId, asLang)
{ {
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()+'" (VOSTF available)'); if(sLang=='VF' && ('VOSTF' in self.timetable(iCinemaId))) self.error('Hiding VF version of "'+self.name()+'" @'+sCinema+' (VOSTF available)');
else if(sLang=='VFSTF') self.error('Hiding hearing-impaired version ('+sLang+') of "'+self.name()+'" @'+sCinema)
else else
{ {
var $Timetable = $('<p>') var $Timetable = $('<p>')
.append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId}) .append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-cinema'})) .append($('<i>', {'class':'fa fa-fw fa-icon fa-cinema'}))
.append(asCinemas[iCinemaId]+' '+sLang)) .append($('<span>', {'class':'cinema_name'}).text(sCinema)))
.append(' : ') .append($('<span>', {'class':'lang'}).text(sLang))
.appendTo(self.anchor().find('.timetable')); .appendTo(self.anchor().find('.timetable'));
$.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){ $.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){
$Timetable.append($('<a>', {'class':'time', 'href':oTime.booking, 'target':'_blank'}).text(oTime.time+' ')); $Timetable
.append($('<a>', {'class':'time', 'href':oTime.booking, 'target':'_blank'}).text(oTime.time))
.append(' '); //for line break
}); });
} }
}); });
@@ -134,7 +145,8 @@ function Film()
this.error = function(sMsg) this.error = function(sMsg)
{ {
$('#feedback').show().append($('<p>').text(sMsg)); $('#feedback').show();
$('#feed_content').append($('<p>').text(sMsg));
}; };
} }
@@ -271,12 +283,13 @@ function Affiche(oDate)
this.error = function(sMsg) this.error = function(sMsg)
{ {
$('#feedback').show().append($('<p>').text(sMsg)); $('#feedback').show();
$('#feed_content').append($('<p>').text(sMsg));
}; };
} }
function getUgcPage(sPath, asData, fOnSuccess, sType) function getUgcPage(sPath, asData, fOnSuccess, sType)
{ {
var asParams = {'a':'get_page', 'type':sType, 'data':{'path':sPath, 'vars':asData}}; var asParams = {'a':'get_page', 'type':sType, 'data':{'path':sPath, 'vars':asData}};
$.get('index.php', asParams, fOnSuccess, sType); $.get((new Film()).consts.process_url, asParams, fOnSuccess, sType);
} }

103
style/style.css
View File

@@ -7,28 +7,22 @@ body {
padding:1em; padding:1em;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 1em; font-size: 1em;
} color:#333;
background:#DDD;
header {
margin:1em 0;
font-size: 2em;
}
footer {
clear:both;
font-size: 0.8em;
margin: 1em 0px;
display: none;
} }
a { a {
text-decoration: none; text-decoration: none;
color:black; color:#333;
} }
a:hover { a:hover {
color:#08288B; color:#08288B;
} }
h1 {
margin:0 0 1em 0;
}
/* Common Classes */ /* Common Classes */
.fa-icon { .fa-icon {
@@ -47,7 +41,7 @@ a:hover {
content: "\f110"; content: "\f110";
} }
.fa-cinema:before { .fa-cinema:before {
content: "\f145"; content: "\f017";
} }
.fa-date:before { .fa-date:before {
content: "\f133"; content: "\f133";
@@ -55,11 +49,31 @@ a:hover {
.fa-power:before { .fa-power:before {
content: "\f1b0"; content: "\f1b0";
} }
.fa-edito:before {
content: "\f0e7";
}
.fa-feedback:before {
content: "\f0b0";
}
/* Sections */ /* Sections */
/* Section - Header */
header {
padding:1em 0 1em calc(113px + 0.5em);
background:url(../images/logo_ugc.png) 0 50% no-repeat;
margin:0 0 0 0.5em;
font-size: 2em;
color:#08288B;
}
/* Section - Main */ /* Section - Main */
main {
margin-top:1em;
}
#buffer { #buffer {
font-size:2em; font-size:2em;
} }
@@ -67,19 +81,27 @@ a:hover {
/* Section - Film */ /* Section - Film */
.film { .film {
clear:both; position:relative;
background:white; background:white;
float:left;
margin-bottom:1em; margin-bottom:1em;
width:100%;
} }
.film:nth-child(even) { .film:nth-child(even) {
} }
.film .bg {
position:absolute;
width:1000%;
opacity:0.3;
z-index: -1;
display:none;
}
.film .info { .film .info {
margin-left:152px; position:absolute;
top:0;
left:152px;
padding-left:1em; padding-left:1em;
width: calc(100% - 1em - 152px); width: calc(100% - 1em - 152px);
} }
@@ -94,11 +116,13 @@ a:hover {
.film .title .edito { .film .title .edito {
font-style: italic; font-style: italic;
margin-left:1em;
color:#999;
} }
.film img.poster { .film img.poster {
vertical-align: middle; width:152px;
float:left; display: block;
} }
.film .trailer { .film .trailer {
@@ -110,8 +134,33 @@ a:hover {
font-size: 0.8em; font-size: 0.8em;
} }
.film .timetable p {
line-height: 2.0;
margin: 0;
}
.film .timetable .cinema {
margin-right:0.5em;
}
.film .timetable .cinema .fa {
font-size: 1.25em;
line-height: 0.7656249414em;
vertical-align: -14.06250352%;
}
.film .timetable .lang {
margin-right:0.5em;
}
.film .timetable .time { .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 */
@@ -119,11 +168,10 @@ a:hover {
#feedback { #feedback {
background:#EEE; background:#EEE;
padding:1em; padding:1em;
float:left;
clear:both;
font-size:0.6em; font-size:0.6em;
margin-bottom: 1em; margin-bottom: 1em;
display:none; display:none;
color:#999;
} }
#feedback p:FIRST-CHILD { #feedback p:FIRST-CHILD {
@@ -131,4 +179,13 @@ a:hover {
} }
#feedback p:LAST-CHILD { #feedback p:LAST-CHILD {
margin-bottom:0; margin-bottom:0;
}
/* Section - Footer */
footer {
font-size: 0.8em;
margin: 1em 0px;
display: none;
color:#08288B;
} }