Added production build with assetgraph-builder

.gitignore

@@ -1 +1,2 @@
 node_modules
+public-min

Makefile

@@ -0,0 +1,20 @@
+# Put all 'bin' dirs beneath node_modules into $PATH so that we're using
+# the locally installed AssetGraph:
+# Ugly 'subst' hack: Check the Make Manual section 8.1 - Function Call Syntax
+NPM_BINS := $(subst bin node,bin:node,$(shell if test -d node_modules; then find node_modules/ -name bin -type d; fi))
+ifneq ($(NPM_BINS),)
+	PATH := ${NPM_BINS}:${PATH}
+endif
+
+deps := $(shell find public/ -type f -name "*.*")
+
+public-min: public/index.html $(deps)
+	buildProduction \
+	    --root public \
+	    --outroot public-min \
+	    $<
+
+PHONY: clean
+
+clean:
+	rm -rf public-min

bin/server

@@ -3,6 +3,6 @@
 var connect = require('connect'), 
     http    = require('http');
 
-var app = connect().use(connect.static('public'));
+var app = connect().use(connect.static('public-min'));
 
 http.createServer(app).listen(process.env.PORT || 3000);

package.json

@@ -22,7 +22,9 @@
   "dependencies": {
     "connect": "~2.0.3"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "assetgraph-builder": "latest"
+  }
   "engines": {
     "node": ">=0.6"
   },

public/index.html

@@ -13,7 +13,6 @@
     <div id='content' class='clr'>
       <div class='preview_and_configuration'>
         <div class='preview'>
-          <style class='preview_styles'></style>
           <div class='arrow_box'>
             <h1 class='logo'>css arrow please!</h1>
           </div>
@@ -68,6 +67,7 @@ <h2>Arrow configuration</h2>
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
     <script type="text/javascript" src="js/vendor/jscolor/jscolor.js"></script>
+    <link rel="stylesheet" type="text/css" href="js/vendor/jscolor/jscolor.css">
 
     <script src='js/lib/models/arrow.js'></script>
     <script src='js/lib/views/arrow_configuration_view.js'></script>

public/js/lib/app.js

@@ -33,7 +33,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
       this.views = [
         new G.ArrowConfigurationView({ model: model, container: $('.configuration') }), 
-        new G.ArrowPreviewView({ model: model, container: $('.preview_styles') }), 
+        new G.ArrowPreviewView({ model: model, container: $('<style type="text/css"></style>').appendTo('body') }),
         new G.ArrowCSSView({ model: model, container: $('.result_code') }), 
       ];
     },

public/js/vendor/jscolor/jscolor.js

@@ -596,6 +596,7 @@ var jscolor = {
 			var p = jscolor.picker;
 
 			// controls interaction
+			p.box.className = modeID ? 'value' : 'saturation';
 			p.box.onmouseup =
 			p.box.onmouseout = function() { target.focus(); };
 			p.box.onmousedown = function() { abortBlur=true; };
@@ -637,6 +638,7 @@ var jscolor = {
 			p.box.style.height = dims[1] + 'px';
 
 			// picker border
+			p.boxB.className = 'jscolor';
 			p.boxB.style.position = 'absolute';
 			p.boxB.style.clear = 'both';
 			p.boxB.style.left = x+'px';
@@ -647,6 +649,7 @@ var jscolor = {
 			p.boxB.style.background = THIS.pickerFaceColor;
 
 			// pad image
+			p.pad.className = 'pad';
 			p.pad.style.width = jscolor.images.pad[0]+'px';
 			p.pad.style.height = jscolor.images.pad[1]+'px';
 
@@ -658,6 +661,7 @@ var jscolor = {
 			p.padB.style.borderColor = THIS.pickerInsetColor;
 
 			// pad mouse area
+			p.padM.className = 'cross';
 			p.padM.style.position = 'absolute';
 			p.padM.style.left = '0';
 			p.padM.style.top = '0';
@@ -679,6 +683,7 @@ var jscolor = {
 			p.sldB.style.borderColor = THIS.pickerInsetColor;
 
 			// slider mouse area
+			p.sldM.className = 'arrow';
 			p.sldM.style.display = THIS.slider ? 'block' : 'none';
 			p.sldM.style.position = 'absolute';
 			p.sldM.style.right = '0';
@@ -718,19 +723,6 @@ var jscolor = {
 			};
 			p.btnS.style.lineHeight = p.btn.style.height;
 
-			// load images in optimal order
-			switch(modeID) {
-				case 0: var padImg = 'hs.png'; break;
-				case 1: var padImg = 'hv.png'; break;
-			}
-			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
-			p.padM.style.backgroundRepeat = "no-repeat";
-			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
-			p.sldM.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
-			p.pad.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundPosition = "0 0";
-
 			// place pointers
 			redrawPad();
 			redrawSld();
@@ -918,14 +910,6 @@ var jscolor = {
 			};
 		}
 
-		// require images
-		switch(modeID) {
-			case 0: jscolor.requireImage('hs.png'); break;
-			case 1: jscolor.requireImage('hv.png'); break;
-		}
-		jscolor.requireImage('cross.gif');
-		jscolor.requireImage('arrow.gif');
-
 		this.importColor();
 	}