From 3e3d54b94ec2cc9e0d5956f9597916bf96de5ee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?=
Date: Sun, 1 Apr 2012 14:13:54 +0200
Subject: [PATCH 1/2] added color picker
---
public/css/app.css | 6 +-
public/index.html | 6 +-
.../js/lib/views/arrow_configuration_view.js | 5 +-
.../views/arrow_configuration_view_spec.js | 6 +-
public/js/vendor/jscolor/arrow.gif | Bin 0 -> 66 bytes
public/js/vendor/jscolor/cross.gif | Bin 0 -> 83 bytes
public/js/vendor/jscolor/hs.png | Bin 0 -> 2684 bytes
public/js/vendor/jscolor/hv.png | Bin 0 -> 2865 bytes
public/js/vendor/jscolor/jscolor.js | 935 ++++++++++++++++++
9 files changed, 949 insertions(+), 9 deletions(-)
create mode 100644 public/js/vendor/jscolor/arrow.gif
create mode 100644 public/js/vendor/jscolor/cross.gif
create mode 100644 public/js/vendor/jscolor/hs.png
create mode 100644 public/js/vendor/jscolor/hv.png
create mode 100644 public/js/vendor/jscolor/jscolor.js
diff --git a/public/css/app.css b/public/css/app.css
index 97982d6..4ffdd22 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -7,6 +7,7 @@ ul, ol, form { margin: 0; padding: 0; }
ul, ol { list-style-type: none; }
h1 { margin: 0; padding: 0; }
h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
+input { border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
/* =LAYOUT
====================================================== */
@@ -45,10 +46,9 @@ h2 { margin: 0; margin-bottom: 10px; padding: 0; font
.configuration .size,
.configuration .border_width { width: 25px; text-align: right; }
-.configuration .color,
-.configuration .border_color { width: 60px; }
+.configuration .color { width: 60px; }
-.configuration .unit { font-size: 14px; }
+.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
/* result_code */
.result_code { white-space: pre; padding: 10px; float: right; width: 380px; height: 370px; 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 bec6617..8bcc2e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,7 +38,7 @@ Arrow configuration
-
+
@@ -49,7 +49,7 @@ Arrow configuration
-
-
+
@@ -67,6 +67,8 @@ Arrow configuration
+
+
diff --git a/public/js/lib/views/arrow_configuration_view.js b/public/js/lib/views/arrow_configuration_view.js
index c54c361..0c145c8 100644
--- a/public/js/lib/views/arrow_configuration_view.js
+++ b/public/js/lib/views/arrow_configuration_view.js
@@ -39,7 +39,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
container.find('.position').val( model.get('position') );
container.find('.size').val( model.get('size') );
- container.find('.color').val( model.get('color') );
+ container.find('.base_color').val( model.get('color') );
container.find('.border_width').val( model.get('borderWidth') );
container.find('.border_color').val( model.get('borderColor') );
},
@@ -76,6 +76,9 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
else if (target.hasClass('border_color')) {
attr = 'borderColor';
}
+ else if (target.hasClass('base_color')) {
+ attr = 'color';
+ }
else {
attr = target.attr('class');
}
diff --git a/public/js/spec/views/arrow_configuration_view_spec.js b/public/js/spec/views/arrow_configuration_view_spec.js
index 195bee3..239cac8 100644
--- a/public/js/spec/views/arrow_configuration_view_spec.js
+++ b/public/js/spec/views/arrow_configuration_view_spec.js
@@ -9,7 +9,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
\
\
\
- \
+ \
\
\
";
@@ -36,7 +36,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
expect( $container.find('.position').val() ).toBe(arrow.get('position'));
expect( parseInt($container.find('.size').val(), 10) ).toBe(arrow.get('size'));
- expect( $container.find('.color').val() ).toBe(arrow.get('color'));
+ expect( $container.find('.base_color').val() ).toBe(arrow.get('color'));
expect( parseInt($container.find('.border_width').val(), 10) ).toBe(arrow.get('borderWidth'));
expect( $container.find('.border_color').val() ).toBe(arrow.get('borderColor'));
@@ -55,7 +55,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
});
it('syncs when color is changed', function () {
- $container.find('.color').val('#0f0').trigger('change');
+ $container.find('.base_color').val('#0f0').trigger('change');
expect( arrow.get('color') ).toEqual('#0f0');
});
diff --git a/public/js/vendor/jscolor/arrow.gif b/public/js/vendor/jscolor/arrow.gif
new file mode 100644
index 0000000000000000000000000000000000000000..246478a864f812d93d4cd0e0d0ad1c8e2d09c825
GIT binary patch
literal 66
zcmZ?wbhEHbWM|-JSjfZx1poj4Utv=LM2bII7`Ygj7<53QAbAERVV@R>f}L*~a`L;Z
PKCZl?^}@uHk--`OML81Y
literal 0
HcmV?d00001
diff --git a/public/js/vendor/jscolor/cross.gif b/public/js/vendor/jscolor/cross.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0ee9c7ac517bee40b78aea03afa809631f0b69fa
GIT binary patch
literal 83
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
YzFqsNg>|5V=vOIWZ|#VBZRvIQe;Bk#LI3~&
literal 0
HcmV?d00001
diff --git a/public/js/vendor/jscolor/hv.png b/public/js/vendor/jscolor/hv.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c5e01f8bcecc4cf835e8eeeaa43ef2c06789022
GIT binary patch
literal 2865
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
E0LKozl>h($
literal 0
HcmV?d00001
diff --git a/public/js/vendor/jscolor/jscolor.js b/public/js/vendor/jscolor/jscolor.js
new file mode 100644
index 0000000..3837daa
--- /dev/null
+++ b/public/js/vendor/jscolor/jscolor.js
@@ -0,0 +1,935 @@
+/**
+ * jscolor, JavaScript Color Picker
+ *
+ * @version 1.3.13
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
+ * @author Jan Odvarko, http://odvarko.cz
+ * @created 2008-06-15
+ * @updated 2012-01-19
+ * @link http://jscolor.com
+ */
+
+
+var jscolor = {
+
+
+ dir : '', // location of jscolor directory (leave empty to autodetect)
+ bindClass : 'color', // class name
+ binding : true, // automatic binding via
+ preloading : true, // use image preloading?
+
+
+ install : function() {
+ jscolor.addEvent(window, 'load', jscolor.init);
+ },
+
+
+ init : function() {
+ if(jscolor.binding) {
+ jscolor.bind();
+ }
+ if(jscolor.preloading) {
+ jscolor.preload();
+ }
+ },
+
+
+ getDir : function() {
+ if(!jscolor.dir) {
+ var detected = jscolor.detectDir();
+ jscolor.dir = detected!==false ? detected : 'jscolor/';
+ }
+ return jscolor.dir;
+ },
+
+
+ detectDir : function() {
+ var base = location.href;
+
+ var e = document.getElementsByTagName('base');
+ for(var i=0; i vs[a] ?
+ (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
+ tp[a],
+ -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
+ (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
+ (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
+ ];
+ }
+ drawPicker(pp[a], pp[b]);
+ }
+ };
+
+
+ this.importColor = function() {
+ if(!valueElement) {
+ this.exportColor();
+ } else {
+ if(!this.adjust) {
+ if(!this.fromString(valueElement.value, leaveValue)) {
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+ }
+ } else if(!this.required && /^\s*$/.test(valueElement.value)) {
+ valueElement.value = '';
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+
+ } else if(this.fromString(valueElement.value)) {
+ // OK
+ } else {
+ this.exportColor();
+ }
+ }
+ };
+
+
+ this.exportColor = function(flags) {
+ if(!(flags & leaveValue) && valueElement) {
+ var value = this.toString();
+ if(this.caps) { value = value.toUpperCase(); }
+ if(this.hash) { value = '#'+value; }
+ valueElement.value = value;
+ }
+ if(!(flags & leaveStyle) && styleElement) {
+ styleElement.style.backgroundImage = "none";
+ styleElement.style.backgroundColor =
+ '#'+this.toString();
+ styleElement.style.color =
+ 0.213 * this.rgb[0] +
+ 0.715 * this.rgb[1] +
+ 0.072 * this.rgb[2]
+ < 0.5 ? '#FFF' : '#000';
+ }
+ if(!(flags & leavePad) && isPickerOwner()) {
+ redrawPad();
+ }
+ if(!(flags & leaveSld) && isPickerOwner()) {
+ redrawSld();
+ }
+ };
+
+
+ this.fromHSV = function(h, s, v, flags) { // null = don't change
+ h<0 && (h=0) || h>6 && (h=6);
+ s<0 && (s=0) || s>1 && (s=1);
+ v<0 && (v=0) || v>1 && (v=1);
+ this.rgb = HSV_RGB(
+ h===null ? this.hsv[0] : (this.hsv[0]=h),
+ s===null ? this.hsv[1] : (this.hsv[1]=s),
+ v===null ? this.hsv[2] : (this.hsv[2]=v)
+ );
+ this.exportColor(flags);
+ };
+
+
+ this.fromRGB = function(r, g, b, flags) { // null = don't change
+ r<0 && (r=0) || r>1 && (r=1);
+ g<0 && (g=0) || g>1 && (g=1);
+ b<0 && (b=0) || b>1 && (b=1);
+ var hsv = RGB_HSV(
+ r===null ? this.rgb[0] : (this.rgb[0]=r),
+ g===null ? this.rgb[1] : (this.rgb[1]=g),
+ b===null ? this.rgb[2] : (this.rgb[2]=b)
+ );
+ if(hsv[0] !== null) {
+ this.hsv[0] = hsv[0];
+ }
+ if(hsv[2] !== 0) {
+ this.hsv[1] = hsv[1];
+ }
+ this.hsv[2] = hsv[2];
+ this.exportColor(flags);
+ };
+
+
+ this.fromString = function(hex, flags) {
+ var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
+ if(!m) {
+ return false;
+ } else {
+ if(m[1].length === 6) { // 6-char notation
+ this.fromRGB(
+ parseInt(m[1].substr(0,2),16) / 255,
+ parseInt(m[1].substr(2,2),16) / 255,
+ parseInt(m[1].substr(4,2),16) / 255,
+ flags
+ );
+ } else { // 3-char notation
+ this.fromRGB(
+ parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
+ parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
+ parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
+ flags
+ );
+ }
+ return true;
+ }
+ };
+
+
+ this.toString = function() {
+ return (
+ (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
+ );
+ };
+
+
+ function RGB_HSV(r, g, b) {
+ var n = Math.min(Math.min(r,g),b);
+ var v = Math.max(Math.max(r,g),b);
+ var m = v - n;
+ if(m === 0) { return [ null, 0, v ]; }
+ var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
+ return [ h===6?0:h, m/v, v ];
+ }
+
+
+ function HSV_RGB(h, s, v) {
+ if(h === null) { return [ v, v, v ]; }
+ var i = Math.floor(h);
+ var f = i%2 ? h-i : 1-(h-i);
+ var m = v * (1 - s);
+ var n = v * (1 - s*f);
+ switch(i) {
+ case 6:
+ case 0: return [v,n,m];
+ case 1: return [n,v,m];
+ case 2: return [m,v,n];
+ case 3: return [m,n,v];
+ case 4: return [n,m,v];
+ case 5: return [v,m,n];
+ }
+ }
+
+
+ function removePicker() {
+ delete jscolor.picker.owner;
+ document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
+ }
+
+
+ function drawPicker(x, y) {
+ if(!jscolor.picker) {
+ jscolor.picker = {
+ box : document.createElement('div'),
+ boxB : document.createElement('div'),
+ pad : document.createElement('div'),
+ padB : document.createElement('div'),
+ padM : document.createElement('div'),
+ sld : document.createElement('div'),
+ sldB : document.createElement('div'),
+ sldM : document.createElement('div'),
+ btn : document.createElement('div'),
+ btnS : document.createElement('span'),
+ btnT : document.createTextNode(THIS.pickerCloseText)
+ };
+ for(var i=0,segSize=4; i< 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
+ p.btn.style.borderColor = pickerOutsetColor;
+ }
+ p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
+ p.btn.style.position = 'absolute';
+ p.btn.style.left = THIS.pickerFace + 'px';
+ p.btn.style.bottom = THIS.pickerFace + 'px';
+ p.btn.style.padding = '0 15px';
+ p.btn.style.height = '18px';
+ p.btn.style.border = THIS.pickerInset + 'px solid';
+ setBtnBorder();
+ p.btn.style.color = THIS.pickerButtonColor;
+ p.btn.style.font = '12px sans-serif';
+ p.btn.style.textAlign = 'center';
+ try {
+ p.btn.style.cursor = 'pointer';
+ } catch(eOldIE) {
+ p.btn.style.cursor = 'hand';
+ }
+ p.btn.onmousedown = function () {
+ THIS.hidePicker();
+ };
+ 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();
+
+ jscolor.picker.owner = THIS;
+ document.getElementsByTagName('body')[0].appendChild(p.boxB);
+ }
+
+
+ function getPickerDims(o) {
+ var dims = [
+ 2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
+ (o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
+ o.pickerClosable ?
+ 4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
+ 2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
+ ];
+ return dims;
+ }
+
+
+ function redrawPad() {
+ // redraw the pad pointer
+ switch(modeID) {
+ case 0: var yComponent = 1; break;
+ case 1: var yComponent = 2; break;
+ }
+ var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
+ var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
+ jscolor.picker.padM.style.backgroundPosition =
+ (THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
+ (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
+
+ // redraw the slider image
+ var seg = jscolor.picker.sld.childNodes;
+
+ switch(modeID) {
+ case 0:
+ var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
+ for(var i=0; i
Date: Sun, 1 Apr 2012 14:17:08 +0200
Subject: [PATCH 2/2] use base_color
---
public/js/lib/views/arrow_configuration_view.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/public/js/lib/views/arrow_configuration_view.js b/public/js/lib/views/arrow_configuration_view.js
index 0c145c8..0667ef1 100644
--- a/public/js/lib/views/arrow_configuration_view.js
+++ b/public/js/lib/views/arrow_configuration_view.js
@@ -54,7 +54,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
container = this.container,
selectors = [ '.position',
'.size',
- '.color',
+ '.base_color',
'.border_width',
'.border_color'
];