Optimización

javiertoledo · Sep 21, 2012 · d41994d · d41994d
1 parent 50724f4
commit d41994d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 99 deletions.
diff --git a/Cakefile b/Cakefile
@@ -5,14 +5,21 @@ fs = require 'fs'
 
 includes = "src/spain-map.coffee src/main.coffee"
 
-build = (callback) ->
-  coffee = exec "coffee -j interactive-spain-map.js -o lib -c #{includes}"
-  coffee.stderr.on 'data', (data) ->
+logErrors = (result, callback) ->
+  result.stderr.on 'data', (data) ->
     process.stderr.write data.toString()
-  coffee.stdout.on 'data', (data) ->
+  result.stdout.on 'data', (data) ->
     print data.toString()
-  coffee.on 'exit', (code) ->
+  result.on 'exit', (code) ->
     callback?() if code is 0
 
+build = (callback) ->
+  result = exec "coffee -j spain-map.js -o lib -c #{includes}"
+  logErrors result, callback
+
+minimize = (callback) ->
+  result = exec "uglifyjs --unsafe -o lib/spain-map.min.js lib/spain-map.js"
+  logErrors result, callback
+
 task 'build', 'Build lib/ from src/', ->
-  build()
+  build minimize
diff --git a/README.md b/README.md
@@ -7,15 +7,15 @@ Mapa vectorial de España interactivo creado a partir de un mapa SVG y la librer
 
 ## Uso
 
-El mapa está preparado para integrarlo en cualquier página web ya que está contenido en un único fichero JavaScript: interactive-spain-map.js
+El mapa está preparado para integrarlo en cualquier página web ya que está contenido en un único fichero JavaScript minificado: spain-map.min.js
 
 El mapa depende de la librería [RaphaëlJs](http://raphaeljs.com)
 
-1. Carga raphaeljs y el script interactive-spain-map.js
+1. Carga raphaeljs y el script spain-map.js
 
   ```
   <script type="text/javascript" src="some/path/raphael-min.js"></script>
-  <script type="text/javascript" src="some/path/interactive-spain-map.js"></script>
+  <script type="text/javascript" src="some/path/spain-map.min.js"></script>
   ```
 
 2. Crea una instancia de mapa. El mapa acepta los siguientes parámetros de configuración:
@@ -30,8 +30,7 @@ El mapa depende de la librería [RaphaëlJs](http://raphaeljs.com)
         strokeColor: "#bbbbbb", // color de las líneas de frontera
         strokeWidth: 0.7, // ancho de las líneas de frontera
         selectedColor: "#99eeee", // color de relleno de la provincia al pasar el ratón por encima
-        animate: true, // Verdadero para que el color de relleno cambie con una animación
-        animationDuration: 200, // Duración de la animación
+        animationDuration: 200, // Duración de la animación de salida
         onClick: function(province) {
           // Método que se ejecutará al hacer click sobre una provincia
         },

diff --git a/demo.html → index.html b/demo.html → index.html
@@ -1,8 +1,9 @@
 <html>
 <head>
   <title>Mapa interactivo de España SVG/RaphaëlJs - Demo</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script type="text/javascript" src="lib/raphael-min.js"></script>
-  <script type="text/javascript" src="lib/interactive-spain-map.js"></script>
+  <script type="text/javascript" src="lib/spain-map.min.js"></script>
   <style type="text/css">
     body {
       background: #fff;
@@ -54,14 +55,13 @@ <h1>Mapa interactivo de España SVG/RaphaëlJs</h1>
       strokeColor: "#cccccc",
       strokeWidth: 0.7,
       selectedColor: "#66bbdd",
-      //animate: false,
       animationDuration: 200,
       onClick: function(province) {
         alert("Has seleccionado " + province.name);
-      },
-      onMouseOver: function(province) {
-        //console.log(province.name + ': ' + province.number);
       }
+      //onMouseOver: function(province) {
+      //  console.log(province.name + ': ' + province.number);
+      //}
     });
   </script>
 </body>
diff --git a/lib/interactive-spain-map.js → lib/spain-map.js b/lib/interactive-spain-map.js → lib/spain-map.js
diff --git a/lib/spain-map.min.js b/lib/spain-map.min.js
diff --git a/src/main.coffee b/src/main.coffee
@@ -2,56 +2,33 @@
 window.SpainMap = (config)->
   R = Raphael(config.id, config.width, config.height)
 
-  config.animate = true unless config.animate == false
-
   attr =
     "fill": config.fillColor || "#d3d3d3"
     "stroke": config.strokeColor || "#fff"
-    "stroke-opacity": "1"
-    "stroke-linejoin": "round"
-    "stroke-miterlimit": "4"
     "stroke-width": config.strokeWidth || "0.75"
-    "stroke-dasharray": "none"
-
-  globalBBox =
-    x: config.width
-    y: config.height
-    x2: 0
-    y2: 0
-
-  expandBBox = (bbox) ->
-    globalBBox.x = bbox.x if globalBBox.x > bbox.x
-    globalBBox.y = bbox.y if globalBBox.y > bbox.y
-    globalBBox.x2 = bbox.x2 if globalBBox.x2 < bbox.x2
-    globalBBox.y2 = bbox.y2 if globalBBox.y2 < bbox.y2
 
   load = (province) ->
     path = R.path(province.path).attr(attr)
-    expandBBox path.getBBox()
+    delete province.path
     path[0].style.cursor = "pointer"
     path[0].onmouseover = ->
-      if config.animate
-        path.animate {fill: config.selectedColor}, config.animationDuration || 500
-      else
-        path.attr {fill: config.selectedColor}
+      path.attr {fill: config.selectedColor}
       R.safari()
       if config.onMouseOver
         config.onMouseOver province
     path[0].onmouseout = ->
-      if config.animate
-        path.animate {fill: config.fillColor}, config.animationDuration || 500
-      else
-        path.attr {fill: config.fillColor}
+      path.animate {fill: config.fillColor}, config.animationDuration || 500
       R.safari()
     if config.onClick
       path[0].onclick = ->
         config.onClick province
 
   # Draw Map and add mouse listeners
+  R.setStart()
   load(province) for province in spainMap
+  set = R.setFinish()
 
-  spainMap = null
+  globalBBox = set.getBBox(true)
+  R.setViewBox globalBBox.x, globalBBox.y, globalBBox.width, globalBBox.height, true
 
-  globalBBox.width = globalBBox.x2-globalBBox.x
-  globalBBox.height = globalBBox.y2-globalBBox.y
-  R.setViewBox globalBBox.x, globalBBox.y, globalBBox.width, globalBBox.height, true
+  spainMap = null