From 0fdc73eb3b33b8c6f9543b630517844c398fb838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?=
Date: Tue, 3 Apr 2012 17:28:51 +0200
Subject: [PATCH 01/53] round the border width
---
package.json | 2 +-
public/js/lib/models/arrow.js | 2 +-
public/js/spec/models/arrow_spec.js | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 81dc7db..d88bcc1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cssarrowplease",
- "version": "0.2.1-9",
+ "version": "0.2.1-10",
"author": {
"name": "Simon Højberg",
"email": "r.hackr@gmail.com"
diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js
index c3f7977..7488d0b 100644
--- a/public/js/lib/models/arrow.js
+++ b/public/js/lib/models/arrow.js
@@ -135,7 +135,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
if (borderWidth > 0) {
css = this._arrowCSS(
this.get('borderColor'),
- this.get('size') + (borderWidth * 1.41421356), // cos(PI/4) * 2
+ this.get('size') + Math.round(borderWidth * 1.41421356), // cos(PI/4) * 2
'before'
);
}
diff --git a/public/js/spec/models/arrow_spec.js b/public/js/spec/models/arrow_spec.js
index feeb712..6e98ff5 100644
--- a/public/js/spec/models/arrow_spec.js
+++ b/public/js/spec/models/arrow_spec.js
@@ -245,7 +245,7 @@ describe("CSSArrowPlease.Arrow", function () {
expect( arrow._arrowCSS ).toHaveBeenCalledWith(
arrow.get('borderColor'),
- arrow.get('size') + (arrow.get('borderWidth') * 1.41421356),
+ arrow.get('size') + Math.round(arrow.get('borderWidth') * 1.41421356),
'before'
);
});
From 1b4fb7444826c8e267532f4972a2faff446d9808 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?=
Date: Tue, 3 Apr 2012 17:32:01 +0200
Subject: [PATCH 02/53] snapshot deploy
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index d88bcc1..49ec139 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cssarrowplease",
- "version": "0.2.1-10",
+ "version": "0.2.2-2",
"author": {
"name": "Simon Højberg",
"email": "r.hackr@gmail.com"
From 36758cfe1e6330e324af173fa7ba0f9acb4ece5a Mon Sep 17 00:00:00 2001
From: Etienne Lemay
Date: Wed, 11 Apr 2012 11:27:26 -0400
Subject: [PATCH 03/53] Add keydown event for size & border_width inputs - Up
arrow increase by 1 (10 w/ shift) - Down arrow decrease by 1 (10 w/ shift)
---
.../js/lib/views/arrow_configuration_view.js | 28 +++++++++++++++----
1 file changed, 22 insertions(+), 6 deletions(-)
diff --git a/public/js/lib/views/arrow_configuration_view.js b/public/js/lib/views/arrow_configuration_view.js
index 0667ef1..ae36bca 100644
--- a/public/js/lib/views/arrow_configuration_view.js
+++ b/public/js/lib/views/arrow_configuration_view.js
@@ -51,16 +51,20 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
**/
_attachEvents: function () {
var _updateModelProxy = $.proxy( this._updateModel, this),
+ _updateInputProxy = $.proxy( this._updateInput, this),
container = this.container,
- selectors = [ '.position',
- '.size',
- '.base_color',
- '.border_width',
- '.border_color'
+ selectors = [ { classname: '.position', keyboard_interactive: false },
+ { classname: '.size', keyboard_interactive: true },
+ { classname: '.base_color', keyboard_interactive: false },
+ { classname: '.border_width', keyboard_interactive: true },
+ { classname: '.border_color', keyboard_interactive: false }
];
$.each(selectors, function (i, selector) {
- container.delegate(selector, 'change', _updateModelProxy);
+ container.delegate(selector.classname, 'change', _updateModelProxy);
+ if (selector.keyboard_interactive) {
+ container.delegate(selector.classname, 'keydown', _updateInputProxy);
+ }
});
},
@@ -85,6 +89,18 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
if (attr === 'borderWidth' || attr === 'size') val = parseInt(val, 10);
this.model.set(attr, val);
+ },
+
+ _updateInput: function (ev) {
+ if (ev.keyCode != 38 && ev.keyCode != 40) return;
+
+ var target = $(ev.currentTarget),
+ val = parseInt(target.val()),
+ increment = ev.keyCode == 38 ? 1 : -1,
+ multiply = ev.shiftKey ? 10 : 1
+
+ target.val(val + increment * multiply);
+ this._updateModel(ev)
}
};
From 5e3fdd21ba611797a982324d60bb44e381284d38 Mon Sep 17 00:00:00 2001
From: Etienne Lemay
Date: Wed, 11 Apr 2012 14:55:16 -0400
Subject: [PATCH 04/53] Add keyboard spec
---
.../views/arrow_configuration_view_spec.js | 28 +++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/public/js/spec/views/arrow_configuration_view_spec.js b/public/js/spec/views/arrow_configuration_view_spec.js
index 239cac8..a6388dc 100644
--- a/public/js/spec/views/arrow_configuration_view_spec.js
+++ b/public/js/spec/views/arrow_configuration_view_spec.js
@@ -69,6 +69,34 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
expect( arrow.get('borderColor') ).toEqual('#f00');
});
+ it('increases or decreases value accordingly when arrows are pressed', function() {
+ var objects = [
+ { selector: '.size', arrowAttr: 'size', defaultVal: 30 },
+ { selector: '.border_width', arrowAttr: 'borderWidth', defaultVal: 4 }
+ ],
+ keystrokes = [
+ { key: 38, increment: 1, shift: false },
+ { key: 38, increment: 10, shift: true },
+ { key: 40, increment: -1, shift: false },
+ { key: 40, increment: -10, shift: true }
+ ];
+
+ $.each(objects, function (i, object) {
+ var elem = $container.find(object.selector),
+ defaultVal = object.defaultVal,
+ arrowAttr = object.arrowAttr;
+
+ $.each(keystrokes, function (i, keystroke) {
+ var keydown = $.Event('keydown')
+ keydown.keyCode = keystroke.key;
+ keydown.shiftKey = keystroke.shift;
+
+ elem.val(defaultVal).trigger(keydown);
+ expect( arrow.get(arrowAttr) ).toEqual(defaultVal + keystroke.increment);
+ });
+ });
+ });
+
});
});
From 24c7747379bb84974b11e95348f676882d96e12c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?=
Date: Wed, 11 Apr 2012 23:59:44 +0200
Subject: [PATCH 05/53] spacing for units
---
public/css/app.css | 2 +-
public/index.html | 6 ++----
2 files changed, 3 insertions(+), 5 deletions(-)
diff --git a/public/css/app.css b/public/css/app.css
index 492af45..c3cdf82 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -46,7 +46,7 @@ input { border: 1px solid #777; box-shadow: inset 0 1px
.configuration .color { width: 60px; }
-.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
+.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }
/* result_code */
.result_code { white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
diff --git a/public/index.html b/public/index.html
index 29aaf4f..0a0b028 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,8 +32,7 @@ Arrow configuration
-
- px
+ px
@@ -43,8 +42,7 @@ Arrow configuration
-
-
- px
+ px
-
From a8d36a3f680f2085296479ccc16a68ccee7b0b94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?=
Date: Thu, 12 Apr 2012 00:01:37 +0200
Subject: [PATCH 06/53] up footer opacity
---
public/css/app.css | 4 ++--
public/index.html | 2 --
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/public/css/app.css b/public/css/app.css
index c3cdf82..575aa5b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -21,8 +21,8 @@ input { border: 1px solid #777; box-shadow: inset 0 1px
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 );
}
-#footer { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; }
-#footer a { vertical-align: top; }
+#footer { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; }
+#footer a { vertical-align: top; color: #fff; }
.clr { overflow: hidden; }
.preview_and_configuration { float: left; width: 395px; }
diff --git a/public/index.html b/public/index.html
index 0a0b028..79fcfde 100644
--- a/public/index.html
+++ b/public/index.html
@@ -56,8 +56,6 @@
Arrow configuration
-
-
-
@@ -88,11 +87,28 @@ Arrow configuration
_gaq.push(['_trackPageview']);
(function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
+ var defer = (function (document, script) {
+ var urls = [],
+ firstScript = document.getElementsByTagName(script)[0];
+
+ return function (url, callback) {
+ var inc;
+ if (url && urls.indexOf(url) === -1) {
+ inc = document.createElement(script);
+ inc.async = true;
+ inc.src = url;
+ inc.onload = callback || function () {};
+ firstScript.parentNode.insertBefore(inc, firstScript);
+ }
+ }
+ }(document, 'script'));
+
+ window.onload = function () {
+ defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
+ defer('//platform.twitter.com/widgets.js');
+ };
+ })();