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
35
comicgen.js
35
comicgen.js
@ -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
10
gege.css
@ -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
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 New Issue
Block a user