From cfb3f3038d3e53e18730ec388644b7c0d3a02754 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 1 Apr 2012 15:20:47 +0200 Subject: [PATCH 1/3] Added production build with assetgraph-builder --- .gitignore | 1 + Makefile | 20 ++++++++++++++++++++ bin/server | 2 +- package.json | 4 +++- 4 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 Makefile diff --git a/.gitignore b/.gitignore index 3c3629e..4f68017 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +public-min diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..5133a7a --- /dev/null +++ b/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 \ No newline at end of file diff --git a/bin/server b/bin/server index 76780d5..2c1d805 100644 --- a/bin/server +++ b/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); diff --git a/package.json b/package.json index 7ffea07..0c9643b 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ "dependencies": { "connect": "~2.0.3" }, - "devDependencies": {}, + "devDependencies": { + "assetgraph-builder": "latest" + } "engines": { "node": ">=0.6" }, From 415ef3fdc577b787f83b68be6315d03a1d51f648 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 1 Apr 2012 15:37:02 +0200 Subject: [PATCH 2/3] Replaced preview style block from static html to autogenerated by app.js --- public/index.html | 1 - public/js/lib/app.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 8bcc2e6..29c66d0 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,6 @@
-

css arrow please!

diff --git a/public/js/lib/app.js b/public/js/lib/app.js index 23e4942..7af2769 100644 --- a/public/js/lib/app.js +++ b/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: $('').appendTo('body') }), new G.ArrowCSSView({ model: model, container: $('.result_code') }), ]; }, From 8352c65a76a52cd4ba81103ab793007a46479674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 1 Apr 2012 16:36:28 +0200 Subject: [PATCH 3/3] Refactored jscolor to include images with a stylesheet so assetgraph-builder understands it --- public/index.html | 1 + public/js/vendor/jscolor/jscolor.js | 26 +++++--------------------- 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/public/index.html b/public/index.html index 29c66d0..6fefbdf 100644 --- a/public/index.html +++ b/public/index.html @@ -67,6 +67,7 @@

Arrow configuration

+ diff --git a/public/js/vendor/jscolor/jscolor.js b/public/js/vendor/jscolor/jscolor.js index 3837daa..2a70007 100644 --- a/public/js/vendor/jscolor/jscolor.js +++ b/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(); }