Merge branch 'canvasandupload' into 'master'

Taille canvas dynamique et importation image

See merge request !6

comicgen.js

@@ -1,13 +1,17 @@
 var d = document;
 var cg = {};
-var c = $('#c')[0];
+var w = parseInt(window.innerWidth * 0.8);
+var h = parseInt(window.innerHeight * 0.8);
+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;
+$('#newWidth').val(w);
+$('#newHeight').val(h);
 
 scene.add( scene.rect(w, h, 'white') );
 scene.update();
@@ -68,9 +72,10 @@ d.onmousewheel = function(mw){
 };
 
 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);
@@ -81,21 +86,22 @@ cg.hoverdiv = function(e,divid){
     return false;
 }
 cg.sourceSwap = function (e) {
-    var img_mini = $(this);
+    var div_mini = $(this);
-    var img_id = parseInt(img_mini.data('src-id'));
+    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);
         });
 }
 
@@ -171,9 +177,35 @@ cg.createTextFromInput = function(e){
 		pop.play();
 	}
 }
+cg.createImageFromInput= function(t){
 
+  var fileList = t.files; /* now you can work with the file list */
+    var imageType = /image.*/;
+    var nBytes = 0;
+  
+    for (var i = 0; i < fileList.length; i++)
+    {
+      
+        var file = fileList[i];
+        nBytes += file.size;
+        if (!file.type.match(imageType))
+        {
+            continue;
+        }
+        imgUrl = window.URL.createObjectURL(file);
+        cg.createImage(imgUrl);
+    }
+
+}
 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();

gege.css

@@ -53,7 +53,7 @@ margin: 0;
 padding: 0;
 }
 
-h1, h2
+h1, h2, h3
 {
 text-transform: uppercase;
 background-color: transparent;
@@ -87,10 +87,10 @@ color:#000;
 
 #wrapper
 {
-width: 1052px;
+width: auto;
-margin:0 auto;
+margin:0;
-margin-top: 60px;
+margin-top: 30px;
-height: 602px;
+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;
@@ -243,3 +243,17 @@ text-decoration: underline;
   position: fixed;
 
 }
+#newWidth, #newHeight{
+
+ width: 70px ;
+display : inline;
+}
+.upload{
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+}
+
+input.file {
+  display:none;
+}

gege.js

@@ -0,0 +1,52 @@
+
+checkCacheFunction = 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);
+
+}
+
+checkCacheFunction();

index.html

@@ -1,59 +1,8 @@
 <!DOCTYPE html>
-<html manifest="comicgen.appcache">
+<html>
 <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>
@@ -70,12 +19,14 @@
 	<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 class="upload">
+                          <input type="file" accept="image/*" id="imageFileInput" class="file" multiple   onchange='cg.createImageFromInput(this)' />
+                        <h2 class="save"><a href="#" onclick="$('#imageFileInput').click();" title="Importer une ou plusieurs images">Importer une image</a></h2></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>
@@ -90,14 +41,15 @@
 	
 	<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> | 
+<br />
-	<a href="javascript:cg.setScreen(640, 480)" title="choisir une autre taille d ecran">640x480</a> | 
+<p> <input type="text" id="newWidth" placeholder="Largeur"/> x <input type="text" id="newHeight" placeholder="Hauteur"/> </p> 
-	<a href="javascript:cg.setScreen(320, 240)" title="choisir une autre taille d ecran">320x240</a></p>
+<br/>
+<h2 class="save"><a href="javascript:cg.setScreen($('#newWidth').val(), $('#newHeight').val())" class="save">Redimensionner</a> </h2>
 </div></div>
 <!-- fin tableau de bord -->
 
 	<div id="cscreen">
-		<canvas class="rc" id="c" width="800" height="600">
+		<canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600">
 			Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
 		</canvas>
 	</div>
@@ -110,6 +62,7 @@
 <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>
+<script type="text/javascript" src="gege.js"></script>
 
 </div>
 </body>