change canvas size automatically depending the client screen resolution
change some css rename index.php to index.html fix hover issue
This commit is contained in:
Valvin
parent
bc9db40874
commit
3faf647a76
3 changed files with 29 additions and 132 deletions
35
comicgen.js
35
comicgen.js
|
|
@ -1,10 +1,13 @@
|
|||
var d = document;
|
||||
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 scene = new RB.Scene(c);
|
||||
var w = c.width;
|
||||
var h = c.height;
|
||||
var fontFamily = "Domestic Manners, Arial, helvetica, sans serif";
|
||||
var pop = new Audio('pop.ogg');
|
||||
var currentObj = null;
|
||||
|
|
@ -68,9 +71,10 @@ d.onmousewheel = function(mw){
|
|||
};
|
||||
|
||||
cg.hoverdiv = function(e,divid){
|
||||
|
||||
var left = e.clientX + "px";
|
||||
var top = e.clientY + "px";
|
||||
var x = e.clientX + 25;
|
||||
var y = e.clientY ;
|
||||
var left = x + "px";
|
||||
var top = y + "px";
|
||||
|
||||
|
||||
var div = document.getElementById(divid);
|
||||
|
|
@ -81,21 +85,23 @@ cg.hoverdiv = function(e,divid){
|
|||
return false;
|
||||
}
|
||||
cg.sourceSwap = function (e) {
|
||||
var img_mini = $(this);
|
||||
var img_id = parseInt(img_mini.data('src-id'));
|
||||
var div_mini = $(this);
|
||||
console.log(div_mini)
|
||||
var img_id = parseInt(div_mini.data('src-id'));
|
||||
var img_url = toonUrls[img_id];
|
||||
console.log(img_url)
|
||||
$("#bigImg").attr('src','toons/' + img_url);
|
||||
cg.hoverdiv(e,"focusImg")
|
||||
}
|
||||
cg.buildMinis = function(){
|
||||
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 link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">";
|
||||
|
||||
for(var i=0; i < miniUrls.length; i++){
|
||||
buffer += divString.replace(/IMG_ID/,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);
|
||||
|
|
@ -103,7 +109,7 @@ cg.buildMinis = function(){
|
|||
//lib.append( $('#textTool').clone() );
|
||||
$('#menuContainer').append( $('#instructs').clone() );
|
||||
$(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(){
|
||||
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 b = win.document.body;
|
||||
var img = new Image();
|
||||
|
|
|
|||
10
gege.css
10
gege.css
|
|
@ -87,10 +87,10 @@ color:#000;
|
|||
|
||||
#wrapper
|
||||
{
|
||||
width: 1052px;
|
||||
margin:0 auto;
|
||||
margin-top: 60px;
|
||||
height: 602px;
|
||||
width: auto;
|
||||
margin:0;
|
||||
margin-top: 30px;
|
||||
height: auto;
|
||||
background-color: #d5b578;
|
||||
border:7px solid rgb(213, 181, 120);
|
||||
box-shadow:0 3px 10px black;
|
||||
|
|
@ -212,7 +212,7 @@ padding: 0;
|
|||
|
||||
footer
|
||||
{
|
||||
margin-top: 50px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #273740;
|
||||
|
|
|
|||
116
index.php
116
index.php
|
|
@ -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>
|
||||
Loading…
Reference in a new issue