JS code refactor + styling fixes

danii-nebot · Nov 16, 2013 · 1424a2c · 1424a2c
1 parent 87fcbdc
commit 1424a2c
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 97 deletions.
diff --git a/css/style.css b/css/style.css
@@ -20,19 +20,14 @@ input, select, textarea {
   margin:0; 
   padding: 2px 5px;
   outline:none; 
-  font-family:inherit; 
+  font-family:inherit;
+  background-color: grey;
   box-sizing:border-box; 
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 
-input:hover {
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
-}
-
 button {
   color: white;
   background-color: grey;
@@ -48,10 +43,14 @@ button {
   border-radius: 4px;
 }
 
-button:hover, button:active {
+button:hover, button:active, input:hover {
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 1px 5px rgba(0, 0, 0, 0.05);
   background-color: #666666;
 }
 
+
 .gui {
   width: 300px;
   text-align: right;

diff --git a/index.html b/index.html
@@ -1,92 +1,19 @@
 <!doctype html>
 <html>
-<head>
-	<meta charset=utf-8>
-	<title></title>
-	<link rel="stylesheet" type="text/css" href="css/style.css">
-</head>
-<body>
-  <canvas id="canvas" width="300" height="200"></canvas>
-  <div class="gui">
-    <input type="color" id="color" value="#FFAD40">
-    <button id="bt-clear">CLEAR</button>
-    <button id="bt-save">SAVE</button>
-  </div>
-
-<script>
-	var mousePressed = false;
-	var lastX, lastY;
-  var ctx;
-
-  function onLoad() {
-    // init canvas
-    var canvas = document.getElementById('canvas');
-    ctx = canvas.getContext('2d');
-    ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // button events
-    document.getElementById('bt-save').onmouseup = sendToServer;
-    document.getElementById('bt-clear').onmouseup = clearCanvas;
-
-    // canvas events
-    canvas.onmousedown = function(e) {
-      draw(e.layerX, e.layerY);
-      mousePressed = true;
-    };
-
-    canvas.onmousemove = function(e) {
-      if (mousePressed) {
-        draw(e.layerX, e.layerY);
-      }
-    };
-
-    canvas.onmouseup = function(e) {
-      mousePressed = false;
-    };
-
-    canvas.onmouseleave = function(e) {
-      mousePressed = false;
-    };
-  }
-
-  function draw(x, y) {
-    if (mousePressed) {
-      ctx.beginPath();
-      ctx.strokeStyle = document.getElementById('color').value;
-      ctx.lineWidth = 1;
-      ctx.lineJoin = 'round';
-      ctx.moveTo(lastX, lastY);
-      ctx.lineTo(x, y);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    lastX = x; lastY = y;
-  }
-
-  function sendToServer() {
-    var data = canvas.toDataURL('image/png');
-    var xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function() {
-      // request complete
-      if (xhr.readyState == 4) {
-        console.log(xhr.responseText);
-      }
-    }
-    xhr.open('POST','http://www.lostiemposcambian.com/blog/posts/guardando-pngs-html5/snapshot.php',true);
-    xhr.setRequestHeader('Content-Type', 'application/upload');
-    xhr.send(data);
-  }
-
-  function clearCanvas() {
-    // just repaint canvas white
-    ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-  }
-
-  window.onload = onLoad;
-
-</script>
-
-</body>
+  <head>
+  	<meta charset=utf-8>
+  	<title></title>
+  	<link rel="stylesheet" type="text/css" href="css/style.css">
+  </head>
+
+  <body>
+    <canvas id="canvas" width="300" height="200"></canvas>
+    <div class="gui">
+      <input type="color" id="color" value="#FF9200">
+      <button id="bt-clear">CLEAR</button>
+      <button id="bt-save">SAVE</button>
+    </div>
+
+  <script src= "script/guardando-pngs.js"></script>
+  </body>
 </html>
diff --git a/script/guardando-pngs.js b/script/guardando-pngs.js
@@ -0,0 +1,81 @@
+var tiemposcambian = tiemposcambian || {};
+
+tiemposcambian.GuardandoPNGs = (function() {
+  var mousePressed = false;
+  var lastX, lastY;
+  var ctx;
+
+  function init() {
+    // init canvas
+    var canvas = document.getElementById('canvas');
+    ctx = canvas.getContext('2d');
+    resetCanvas();
+
+    // button events
+    document.getElementById('bt-save').onmouseup = sendToServer;
+    document.getElementById('bt-clear').onmouseup = resetCanvas;
+
+    // canvas events
+    canvas.onmousedown = function(e) {
+      draw(e.layerX, e.layerY);
+      mousePressed = true;
+    };
+
+    canvas.onmousemove = function(e) {
+      if (mousePressed) {
+        draw(e.layerX, e.layerY);
+      }
+    };
+
+    canvas.onmouseup = function(e) {
+      mousePressed = false;
+    };
+
+    canvas.onmouseleave = function(e) {
+      mousePressed = false;
+    };
+  }
+
+  function draw(x, y) {
+    if (mousePressed) {
+      ctx.beginPath();
+      ctx.strokeStyle = document.getElementById('color').value;
+      ctx.lineWidth = 1;
+      ctx.lineJoin = 'round';
+      ctx.moveTo(lastX, lastY);
+      ctx.lineTo(x, y);
+      ctx.closePath();
+      ctx.stroke();
+    }
+    lastX = x; lastY = y;
+  }
+
+  function sendToServer() {
+    var data = canvas.toDataURL('image/png');
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+      // request complete
+      if (xhr.readyState == 4) {
+        window.open('http://www.lostiemposcambian.com/blog/posts/guardando-pngs-html5/snapshots/'+xhr.responseText,'_blank');
+      }
+    }
+    xhr.open('POST','http://www.lostiemposcambian.com/blog/posts/guardando-pngs-html5/snapshot.php',true);
+    xhr.setRequestHeader('Content-Type', 'application/upload');
+    xhr.send(data);
+  }
+
+  function resetCanvas() {
+    // just repaint canvas white
+    ctx.fillStyle = '#EEEEEE';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  return {
+    'init': init
+  };
+});
+
+
+window.onload = function() {
+  new tiemposcambian.GuardandoPNGs().init();
+};