Permalink
Browse files

Added ColorPicker

  • Loading branch information...
uxder committed Feb 10, 2012
1 parent f23c758 commit dff2002ca580a0cd30c98b90583369097840a5ee
View
@@ -0,0 +1,162 @@
+.colorpicker {
+ width: 356px;
+ height: 176px;
+ overflow: hidden;
+ position: absolute;
+ background: url(../img/colorpicker/colorpicker_background.png);
+ font-family: Arial, Helvetica, sans-serif;
+ display: none;
+ z-index: 100;
+}
+.colorpicker_color {
+ width: 150px;
+ height: 150px;
+ left: 14px;
+ top: 13px;
+ position: absolute;
+ background: #f00;
+ overflow: hidden;
+ cursor: crosshair;
+}
+.colorpicker_color div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
+ background: url(../img/colorpicker/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ overflow: hidden;
+ background: url(../img/colorpicker/colorpicker_select.gif);
+ margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+ position: absolute;
+ top: 13px;
+ left: 171px;
+ width: 35px;
+ height: 150px;
+ cursor: n-resize;
+}
+.colorpicker_hue div {
+ position: absolute;
+ width: 35px;
+ height: 9px;
+ overflow: hidden;
+ background: url(../img/colorpicker/colorpicker_indic.gif) left top;
+ margin: -4px 0 0 0;
+ left: 0px;
+}
+.colorpicker_new_color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 213px;
+ top: 13px;
+ background: #f00;
+}
+.colorpicker_current_color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 283px;
+ top: 13px;
+ background: #f00;
+}
+.colorpicker input {
+ background-color: transparent;
+ border: 1px solid transparent;
+ position: absolute;
+ font-size: 10px;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #898989;
+ top: 4px;
+ right: 11px;
+ text-align: right;
+ margin: 0;
+ padding: 0;
+ height: 11px;
+}
+.colorpicker_hex {
+ position: absolute;
+ width: 72px;
+ height: 22px;
+ background: url(../img/colorpicker/colorpicker_hex.png) top;
+ left: 212px;
+ top: 142px;
+}
+.colorpicker_hex input {
+ right: 6px;
+}
+.colorpicker_field {
+ height: 22px;
+ width: 62px;
+ background-position: top;
+ position: absolute;
+}
+.colorpicker_field span {
+ position: absolute;
+ width: 12px;
+ height: 22px;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ cursor: n-resize;
+}
+.colorpicker_rgb_r {
+ background-image: url(../img/colorpicker/colorpicker_rgb_r.png);
+ top: 52px;
+ left: 212px;
+}
+.colorpicker_rgb_g {
+ background-image: url(../img/colorpicker/colorpicker_rgb_g.png);
+ top: 82px;
+ left: 212px;
+}
+.colorpicker_rgb_b {
+ background-image: url(../img/colorpicker/colorpicker_rgb_b.png);
+ top: 112px;
+ left: 212px;
+}
+.colorpicker_hsb_h {
+ background-image: url(../img/colorpicker/colorpicker_hsb_h.png);
+ top: 52px;
+ left: 282px;
+}
+.colorpicker_hsb_s {
+ background-image: url(../img/colorpicker/colorpicker_hsb_s.png);
+ top: 82px;
+ left: 282px;
+}
+.colorpicker_hsb_b {
+ background-image: url(../img/colorpicker/colorpicker_hsb_b.png);
+ top: 112px;
+ left: 282px;
+}
+.colorpicker_submit {
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ background: url(../img/colorpicker/colorpicker_submit.png) top;
+ left: 322px;
+ top: 142px;
+ overflow: hidden;
+}
+.colorpicker_focus {
+ background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+ background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+ background-position: bottom;
+}
+.colorpicker_slider {
+ background-position: bottom;
+}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -5,7 +5,7 @@
<title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
<link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
-
+ <link rel="stylesheet" href="css/colorpicker.css">
<link rel="stylesheet" href="css/stylesheet.css" media="screen">
<script>if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash';</script>
@@ -340,6 +340,7 @@ <h1>
/*
__Changelog__
+ 2012.02.09: Added colorpicker for hex values. (thx <a href="https://github.com/uxder">uxder</a>)
2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
2012.01.19: Linear Gradient Syntax <a href="https://github.com/paulirish/css3please/issues/78">Updated</a>. (thx <a href="http://cssdeck.com">cssdeck</a> and <a href="https://github.com/uxder">uxder</a>!)
2012.01.14: Added <code>tab-size</code>. (Blame <a href="http://mathiasbynens.be/">Mathias</a> if anything breaks!)
View
@@ -295,7 +295,7 @@ window.generator = {
return values;
},
grabAndSet : function(elem){
-
+
var item = -1;
allValues = generator.collectAllValues( $(elem).closest('.declaration-block')[0] || $(elem).closest('.rule')[0] ),
group = elem.parentNode.getAttribute('g'),
@@ -556,13 +556,45 @@ $(document).ready(function () {
$('#box_gradient,#box_rgba').find('a.off').click();
}
-
+ //create colorpicker
+ colorPicker.load("b[i='s2Hex']", 'hex');
});
$(window).load(function(){
setTimeout(copypasta,1000);
})
+window.colorPicker = {
+ _currentTarget: "",
+ _colors: {},
+ load: function(selector, colorType) {
+ var cp = this;
+ $(selector).ColorPicker({
+ onBeforeShow: function () {
+ var span = $(this),
+ text = span.text();
+
+ cp._currentTarget = span; //workaround to colorpicker plugin not preseving current element?
+ span.ColorPickerSetColor(text); //set the colorpicker value
+ },
+ onChange: function (hsb, hex, rgb) {
+ cp._colors = {
+ hsl: hsb,
+ hex: hex,
+ rgb: rgb
+ };
+ },
+ onHide: function(){
+ //update the colors
+ var input = cp._currentTarget.find('input');
+ input.val("#" + cp._colors[colorType]);
+ generator.grabAndSet(input[0]);
+ }
+ });
+ }
+}
+
+
window.css = {
'text-shadow': '2px 2px 2px #000;',
'filter': 'Shadow(Color=#666666, Direction=135, Strength=5);'

Large diffs are not rendered by default.

Oops, something went wrong.

1 comment on commit dff2002

@uxder

This comment has been minimized.

Show comment Hide comment
@uxder

uxder Feb 10, 2012

Collaborator

in response to #2

Collaborator

uxder commented on dff2002 Feb 10, 2012

in response to #2

Please sign in to comment.