Alnotz/bd-chapril
Alnotz/bd-chapril
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change canvas size automatically depending the client screen resolution

Browse source 
change some css
rename index.php to index.html
fix hover issue
This commit is contained in:
Valvin 2017-09-17 17:47:31 +02:00
parent bc9db40874
commit 3faf647a76
3 changed files with 29 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
comicgen.js
View file

@ -1,10 +1,13 @@
var d = document; var d = document;
var cg = {}; var cg = {};
var c = $('#c')[0]; var w = window.innerWidth * 0.8;
var h = window.innerHeight * 0.8;;
console.log('size : ' + w + ' x ' + h);
var canvas = $('#c');
canvas.attr('width',w).attr('height',h);
var c = canvas[0];
var ctx = c.getContext('2d'); var ctx = c.getContext('2d');
var scene = new RB.Scene(c); var scene = new RB.Scene(c);
var w = c.width;
var h = c.height;
var fontFamily = "Domestic Manners, Arial, helvetica, sans serif"; var fontFamily = "Domestic Manners, Arial, helvetica, sans serif";
var pop = new Audio('pop.ogg'); var pop = new Audio('pop.ogg');
var currentObj = null; var currentObj = null;
@ -68,9 +71,10 @@ d.onmousewheel = function(mw){
}; };
cg.hoverdiv = function(e,divid){ cg.hoverdiv = function(e,divid){
var x = e.clientX + 25;
var left = e.clientX + "px"; var y = e.clientY ;
var top = e.clientY + "px"; var left = x + "px";
var top = y + "px";
var div = document.getElementById(divid); var div = document.getElementById(divid);
@ -81,21 +85,23 @@ cg.hoverdiv = function(e,divid){
return false; return false;
} }
cg.sourceSwap = function (e) { cg.sourceSwap = function (e) {
var img_mini = $(this); var div_mini = $(this);
var img_id = parseInt(img_mini.data('src-id')); console.log(div_mini)
var img_id = parseInt(div_mini.data('src-id'));
var img_url = toonUrls[img_id]; var img_url = toonUrls[img_id];
console.log(img_url)
$("#bigImg").attr('src','toons/' + img_url); $("#bigImg").attr('src','toons/' + img_url);
cg.hoverdiv(e,"focusImg") cg.hoverdiv(e,"focusImg")
} }
cg.buildMinis = function(){ cg.buildMinis = function(){
var buffer = ''; var buffer = '';
var divString = "<div class='himg' data-src-id='IMG_ID'>";
var imgString = "<img src='toons/IMG_URL' data-src-id='IMG_ID' class='rc mini' alt='toons'></img>"; var imgString = "<img src='toons/IMG_URL' data-src-id='IMG_ID' class='rc mini' alt='toons'></img>";
var link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">"; var link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">";
for(var i=0; i < miniUrls.length; i++){ for(var i=0; i < miniUrls.length; i++){
buffer += divString.replace(/IMG_ID/,i);
buffer += link.replace(/IMG_URL/, toonUrls[i]); buffer += link.replace(/IMG_URL/, toonUrls[i]);
buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '</a>'; buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '</a></div>';
} }
lib.append(buffer); lib.append(buffer);
@ -103,7 +109,7 @@ cg.buildMinis = function(){
//lib.append( $('#textTool').clone() ); //lib.append( $('#textTool').clone() );
$('#menuContainer').append( $('#instructs').clone() ); $('#menuContainer').append( $('#instructs').clone() );
$(function () { $(function () {
$('img.rc').hover(cg.sourceSwap, cg.sourceSwap); $('div.himg').hover(cg.sourceSwap, cg.sourceSwap);
}); });
} }
@ -174,6 +180,13 @@ cg.createTextFromInput = function(e){
cg.saveImage = function(){ cg.saveImage = function(){
var data = c.toDataURL('png'); var data = c.toDataURL('png');
// $.ajax({
// type: "POST",
// url: 'https://lut.im',
// data: data,
// success: function(d){console.log(d);},
// dataType: 'json'
// });
var win = window.open(); var win = window.open();
var b = win.document.body; var b = win.document.body;
var img = new Image(); var img = new Image();

10
gege.css
View file

@ -87,10 +87,10 @@ color:#000;
#wrapper #wrapper
{ {
width: 1052px; width: auto;
margin:0 auto; margin:0;
margin-top: 60px; margin-top: 30px;
height: 602px; height: auto;
background-color: #d5b578; background-color: #d5b578;
border:7px solid rgb(213, 181, 120); border:7px solid rgb(213, 181, 120);
box-shadow:0 3px 10px black; box-shadow:0 3px 10px black;
@ -212,7 +212,7 @@ padding: 0;
footer footer
{ {
margin-top: 50px; margin-top: 10px;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #273740; color: #273740;

116
index.php
View file

@ -1,116 +0,0 @@
<!DOCTYPE html>
<html manifest="comicgen.appcache">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="gege.css"/>
<script>
(function() {
var webappCache = window.applicationCache;
function loaded()
{
//var h1El = document.querySelector("h1");
var connectionStatus = ((navigator.onLine) ? 'online' : 'offline');
//h1El.textContent = h1El.textContent + " - currently: " + connectionStatus;
switch(webappCache.status)
{
case 0:
console.log("Cache status: Uncached");
break;
case 1:
console.log("Cache status: Idle");
break;
case 2:
console.log("Cache status: Checking");
break;
case 3:
console.log("Cache status: Downloading");
break;
case 4:
console.log("Cache status: Updateready");
break;
case 5:
console.log("Cache status: Obsolete");
break;
}
}
function updateCache()
{
webappCache.swapCache();
console.log("Cache has been updated due to a change found in the manifest");
}
function errorCache()
{
console.log("You're either offline or something has gone horribly wrong.");
}
window.addEventListener("load", loaded, false);
webappCache.addEventListener("updateready", updateCache, false);
webappCache.addEventListener("error", errorCache, false);
})();
</script>
<title>GéGé, Geektionnerd Generator</title>
</head>
<body>
<!-- ajout conteneur global -->
<div id="wrapper">
<div id="focusImg" style="display:none;"><img id="bigImg"/></div>
<!-- tableau de bord -->
<div id="tableauDeBord">
<div id="menuContainer">
<h1><span class="hidden">GéGé</span><img src="images/banniere_gege.png" width="240" height="74" alt="Banniere du generateur GKND" ></h1>
<p class="hidden">Geektionnerd Generator</p>
<div id="lib" class="rc">
<div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input type="text" id="newText" placeholder="Saisissez votre bulle" onkeypress="cg.createTextFromInput(event)"/></div>
</div>
</div>
<div id="hiddenObjs">
<div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
<div id="instructs" class="rc instructions">
<h2>Instructions</h2>
<ul>
<li><em>Flêche bas</em>: rétrécir</li>
<li><em>Flêche haut</em>: agrandir</li>
<li><em>Gauche/Droite</em>: retournement horizontal</li>
<li><em>Del</em>: effacer l'objet</li>
</ul>
</div></div>
<div id="toolbar" class="rcBottom">
<h2 class="save"><a href="javascript:cg.saveImage();" title="enregistrer l image">Enregistrer votre image</a></h2>
<h2 class="last">Redimensionner la fenêtre</h2>
<p><a href="javascript:cg.setScreen(800, 600)" title="choisir une autre taille d ecran" png">800x600</a> |
<a href="javascript:cg.setScreen(640, 480)" title="choisir une autre taille d ecran">640x480</a> |
<a href="javascript:cg.setScreen(320, 240)" title="choisir une autre taille d ecran">320x240</a></p>
</div></div>
<!-- fin tableau de bord -->
<div id="cscreen">
<canvas class="rc" id="c" width="800" height="600">
Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
</canvas>
</div>
<footer>
<p>Le Geektionnerd et l'intégralité de son contenu (images et textes) sont l'oeuvre de Simon "Gee" Giraudot et diffusés sous licence Creative Commons By-Sa.<br/>
Découvrez le Geektionnerd sur <a href="http://geektionnerd.net/" title="Suivez les aventures du GKND sur le site dédié">http://geektionnerd.net/</a> et <a href="http://enventelibre.org/catalog/par-association/framasoft" title="Acheter l'album sur En Vente Libre">en album.</a><br/>
Gégé est une adaptation de <a href="https://github.com/chambs/comicgen" title="Code source de l'auteur original sur Github">Comic Gen de Chamb</a> réalisée par Cyrille Largillier pour <a href="http://framasoft.org" title="Vous ne connaissez pas encore Framasoft ?">Framasoft</a>.</p>
</footer>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="ragaboom.min.js"></script>
<script type="text/javascript" src="comicgen.js"></script>
</div>
</body>
</html>