Permalink
Browse files

Merge pull request #93 from mlynch/most-recent-picker

Color picker for most recent colors
  • Loading branch information...
2 parents 7dae65f + 5cf5585 commit 1b10fb0c0d1f6ad5f28eea01c53118e0157b8d70 @tybenz tybenz committed May 24, 2012
Showing with 131 additions and 5 deletions.
  1. +20 −1 css/tr.layout.css
  2. +9 −2 index.php
  3. +46 −1 js/app.js
  4. +56 −1 js/ui.js
View
@@ -7,6 +7,7 @@ h2{
font-size: 12px;
margin: 10px;
}
+.clear { clear: both; }
.dialog{
padding: 20px 27px 0px;
@@ -267,6 +268,24 @@ h2{
margin-top: -2px;
}
+#most-recent-colors .picker {
+ overflow: hidden;
+ display: inline-block; /* Necessary to trigger "hasLayout" in IE */
+ display: block; /* Sets element back to block */
+}
+
+#most-recent-colors .picker h2 {
+ float: left;
+}
+#most-recent-colors .picker input {
+ width: 50px;
+ margin-top: -5px;
+}
+#most-recent-colors .picker div.compact {
+ float: right;
+ margin-top: 10px;
+}
+
#sliders{
margin-top: 15px;
padding: 0 10px;
@@ -601,4 +620,4 @@ iframe body{
display: none;
}
-.highlight { color:#E19704;}
+.highlight { color:#E19704;}
View
@@ -344,7 +344,14 @@
}
?>
<div id="most-recent-colors">
- <h2>Recent Colors</h2>
+ <div class="picker">
+ <h2>Recent Colors</h2>
+ <div class="compact">
+ <a id="recent-color-picker" href="#">colors...</a>
+ <input type="text" class="colorwell-toggle" value="#FFFFFF" data-name="recent" style="display: none" />
+ </div>
+ </div>
+ <div class="clear"></div>
<div class="colors">
<div class="color-drag disabled" style="background-color: #ddd"></div>
<div class="color-drag disabled" style="background-color: #ddd"></div>
@@ -416,4 +423,4 @@
</body>
-</html>
+</html>
View
@@ -80,6 +80,15 @@ TR.addMostRecent = function( color ) {
});
}
}
+//updates the newest recent color. Used when adding a color with the color picker
+TR.updateMostRecent = function( newColor ) {
+ var found = 0,
+ most_recent = $( "#most-recent-colors .color-drag:first" );
+
+ if( most_recent.length ) {
+ most_recent.css( "background-color", newColor );
+ }
+}
//adds some CSS, a tab panel, and a preview for the new swatch
TR.addSwatch = function( new_style, duplicate ) {
@@ -781,6 +790,42 @@ TR.initDialogs = function() {
}
}
}));
+
+ $( ".dialog#newColor" ).dialog({
+ autoOpen: false,
+ width: 450,
+ height: 260,
+ resizable: false,
+ draggable: false,
+ buttons: {
+ "Cancel": function() {
+ $( ".dialog#newColor" ).dialog( "close" );
+ },
+ "Submit": function() {
+ var color = $( "#newColorInput" ).val().toLowerCase();
+ color = /^{rgb|#}/.test( color ) ? color : "#" + color;
+ if ( color.length) {
+ $.tr.addMostRecent( color, $( this ).data( "swatch" ) );
+ }
+ $( ".dialog#newColor" ).dialog( "close" );
+ }
+ },
+ open: function( event, ui ) {
+ var currentColor = $.tr.rgbtohex( $( this ).data( "swatch" ).css( "background-color" ) );
+ $( "#newColorInput" )
+ .val( currentColor )
+ .next().css( "background-color", currentColor )
+ .end()
+ .keyup( function( event ) {
+ var input = $( this );
+ if ( event.keyCode === $.ui.keyCode.ENTER ) {
+ input.closest( ".ui-dialog" ).find( "button" ).eq( 1 ).click();
+ }
+ input.next().css( "background-color", input.val() );
+ });
+ }
+ });
+
//ajax call performed when share link is clicked
$( "#share-button" ).click(function(e) {
@@ -1667,4 +1712,4 @@ String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
-}) ( jQuery, window );
+}) ( jQuery, window );
View
@@ -95,6 +95,33 @@ TR.initializeUI = function() {
colorwell = null;
});
+ //colorwell refers to the inputs with color values
+ $( ".colorwell-toggle" ).focus(function() {
+ colorwell = $(this);
+ if( colorwell.is(":hidden") ) {
+ return;
+ }
+ var pos = $( this ).offset();
+ var name = $( this ).attr( "data-name" );
+ if(name.indexOf( "shadow-color" ) == -1) {
+ $( "#colorpicker" ).css({
+ "position": "absolute",
+ "left": pos.left,
+ "top": pos.top + 21
+ });
+ } else {
+ $( "#colorpicker" ).css({
+ "position": "absolute",
+ "left": pos.left,
+ "top": pos.top + 21
+ });
+ }
+ $( "#colorpicker" ).show();
+ }).blur(function(e) {
+ $( "#colorpicker" ).hide();
+ colorwell = null;
+ });
+
//Inspector Radio behavior
$( "#inspector-button" ).click(function() {
var $this = $( this ),
@@ -202,6 +229,34 @@ TR.initializeUI = function() {
.css("background-color", orig.saturation(sat_str + sat_percent).lightness(lit_str + lit_percent) );
}
});
+
+ // Recent color dropper
+
+ function processFarbChange( color ) {
+ $( "#most-recent-colors input" ).val( color );
+
+ TR.updateMostRecent( color );
+ }
+
+ $( "#recent-color-picker" ).click( function() {
+ var well = $( this ).parent().find( "input" ), pos = $(this).offset();
+
+ $( this ).hide();
+ well.show();
+ well.focus();
+
+ f.linkTo( processFarbChange );
+
+ TR.addMostRecent( well.val() );
+
+ event.preventDefault();
+ });
+
+ $( "#most-recent-colors .colorwell-toggle" ).blur(function() {
+ var well = $("#most-recent-colors .colorwell-toggle");
+ well.hide();
+ $('#recent-color-picker').show();
+ });
function rgbtohex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
@@ -224,4 +279,4 @@ TR.iframeLoadCallback = function()
$(function() {
TR.isDOMReady = true;
TR.initPanel();
-});
+});

0 comments on commit 1b10fb0

Please sign in to comment.