Permalink
Browse files

Add JS color picker to gradient color fields in demo

  • Loading branch information...
1 parent 951e3db commit c7cbd349f55414e77a9d7639106cf189f437101c Jason Johnston committed Jul 4, 2010
View
@@ -51,7 +51,6 @@
border: 1px solid #CCC;
padding: 3px 10px 5px;
margin: 0 0 10px;
- overflow: hidden;
}
#controls fieldset legend {
@@ -61,6 +60,7 @@
#controls fieldset fieldset {
margin: 0 0 5px;
+ padding-left: 5px;
line-height: 25px;
}
@@ -77,6 +77,16 @@
#controls .details {
float: right;
}
+ #controls .details label {
+ margin-left: 2px;
+ }
+
+ .colorPicker {
+ position: absolute;
+ margin-top: 20px;
+ border: 1px solid #CCC;
+ background: #FFF;
+ }
#output {
display: block;
@@ -88,7 +98,9 @@
}
</style>
+ <link href="farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script type="text/javascript" src="farbtastic/farbtastic.min.js"></script>
<script type="text/javascript">
$( function() {
@@ -177,6 +189,30 @@
$( '#controls .toggle > input' ).change( updateDetailsVis );
$( '#codeToggle' ).change( updateCodeVis );
+ $( '#controls input.color' ).each( function() {
+ var inp = $( this ),
+ picker = $( '<div class="colorPicker"/>' ),
+ farb = $.farbtastic( picker, function( c ) {
+ if( c ) {
+ inp[0].value = c.toUpperCase();
+ inp.change();
+ }
+ } );
+
+ inp.focus( function() {
+ farb.setColor( this.value );
+ picker.css( inp.position() ).fadeIn();
+ $( document ).bind( 'mousedown', function handler() {
+ picker.fadeOut();
+ $( this ).unbind( 'mousedown', handler )
+ } );
+ } );
+
+ picker.insertAfter( inp ).hide().mousedown( function( e ) {
+ e.stopPropagation();
+ } );
+ } );
+
updateCss();
updateDetailsVis();
updateCodeVis();
@@ -251,11 +287,11 @@
<div class="details">
<label for="gradientColor1">Top color:</label>
<!--<input type="color" id="gradientColor1" value="#99FF99" size="7" />-->
- <input type="text" id="gradientColor1" value="#99FF99" size="7" />
+ <input type="text" class="color" id="gradientColor1" value="#99FF99" size="7" />
<label for="gradientColor2">Bottom color:</label>
<!--<input type="color" id="gradientColor2" value="#339933" size="7" />-->
- <input type="text" id="gradientColor2" value="#339933" size="7" />
+ <input type="text" class="color" id="gradientColor2" value="#339933" size="7" />
</div>
</fieldset>
</fieldset>
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><title>Farbtastic: Changelog</title></head>
+<body>
+ <h1 class="title">Farbtastic: Changelog</h1>
+
+ <h2>1.2 - 2007/01/08</h2>
+ <ul>
+ <li>Fixed bug with linking multiple fields with the same value.</li>
+ </ul>
+ <h2>1.1 - 2006/10/27</h2>
+ <ul>
+ <li>Work around for the transparent PNGs in Internet Explorer.</li>
+ <li>Better mouse handling code to accomodate CSS-based layouts better.</li>
+ </ul>
+ <h2>1.0 - 2006/07/14</h2>
+ <ul>
+ <li>Initial release.</li>
+ </ul>
+
+ <p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>
+ <p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit c7cbd34

Please sign in to comment.