Farbtastic 1.2 out

I've released a new version of Farbtastic which fixes a bug with multiple fields that have the same value.

First off, Great piece of code. It is a really awesome asset that I am truly looking forward to using in my CMS.

I am working to integrate the new jQuery 1.1 release into my development process and have noticed that there are issues with Farbtastic in the new release. For example, the selector will follow the cursor when any area of the document window is clicked. Also, I can't select the input field I am linking to via the linkTo() function to manual entre the color.

Thanks again for your contribution!

David

I was looking around for a tool like this one, and I really like your implementation. Thanks! I was wondering something, and I suspect this is pretty much entirely based on my limited JS skills and total lack of understanding of OO principles: how do I get the picker to update the color of one element while dumping the color value to another element entirely? If you just say "use .color()" I'll be no better off, since my attempts along those lines failed.

Here's what I'm trying to do in a nutshell:

1. Have a picker that's pre-set to the color value of a div; let's call it #one.
2. Changing the picker changes the color of #one.
3. As the color of #one is updated via the picker, the value of #two (another div) is set to the newly picked color in hex form.

I've managed to do #2. #1 and #3 are beyond me, it would seem. Even if you just created a quick demo file showing how to do that, I'm pretty sure I could take it from there.

Thanks again for the nice tool, and I hope you'll show pity on a poor OOJS newbie!

Instead of tying farbtastic directly to some elements, you can specify a callback function for linkTo / callback and do whatever you want. You can look at farbtastic's internal callback to see how it does things by default.

For your problem, something like this should work (where f is a farbtastic object).

f.linkTo(function () {
  $('#one').css('backgroundColor', f.color);
  $('#two').attr('value', f.color);
});

I don't have time for hand-holding, sorry. Farbtastic is documented, and there are plenty of resources online that explain JS, closures and OO.

Yeah, I've read quite a few resources on those topics. So far, none of them make sense to me-- I grew up in a procedural era, and haven't been able to make the conceptual leap. Which would most likely be why I didn't really understand what you posted, though I picked up a few more glimmerings of possible understanding. (Maybe.)

Sorry to have troubled you.

Hi, Steven. Thank you very much for this plugin. It's awesome.

I just ask you to be nice with dean edwards' packer (http://dean.edwards.name/packer/) in future versions. Farbtastic currently misses semi-colons to make the packer work nice. But it is really easy to make it 'packable': just add a semi-colon to the end of all assignments and functions.

What a wonderful plugin! The only thing lacking is support for hosting the color picker within a scrollable element; here's my patch which allows just that:

diff -u farbtastic.js ~fred/js/farbtastic.js
--- farbtastic.js	2007-01-09 22:53:11.000000000 -0800
+++ js/farbtastic.js	2008-01-04 08:31:50.000000000 -0800
@@ -108,6 +108,7 @@
     if (typeof event.offsetX != 'undefined') {
       // Use offset coordinates and find common offsetParent
       var pos = { x: event.offsetX, y: event.offsetY };
+      var scrollTop = 0, scrollLeft = 0;
 
       // Send the coordinates upwards through the offsetParent chain.
       var e = el;
@@ -116,12 +117,14 @@
         e.mouseY = pos.y;
         pos.x += e.offsetLeft;
         pos.y += e.offsetTop;
+        scrollTop += e.scrollTop;
+        scrollLeft += e.scrollLeft;
         e = e.offsetParent;
       }
 
       // Look for the coordinates starting from the wheel widget.
       var e = reference;
-      var offset = { x: 0, y: 0 }
+      var offset = { x: 0 - scrollLeft, y: 0 - scrollTop }
       while (e) {
         if (typeof e.mouseX != 'undefined') {
           x = e.mouseX - offset.x;

Farbtastic is fantastic! Very cool work.

Are you aware it does not seem to work in a fixed position? At least I think that's the problem. It seems that if you try to put Farbtastic in a dialog box with BlockUI, you get all sorts of issues in Firefox 3 and IE 7 with it, and I think the Firefox problems are because the dialog box has position: fixed. IE problems must be something else... no idea really.

Keep up the awesome work.

@Matthew Krauss - Farbtastic does freak out with some positioning. It has to do with a change in jQuery going to 1.2.6. There is a fix in the version of farbtastic in the drupal cvs. You can get it at http://cvs.drupal.org/viewvc.py/drupal/drupal/misc/farbtastic/farbtastic...

@Matt Farina and Steven Wittens:

Thanks for the tip Matt.

I was working on fixing it myself, and as far as I can see, the Drupal version and my own version have the same effective behavior. I really don't quite get what either Steven's version or Drupal's version are doing in the relevant section, but I've included the diff from Steven's version to mine below in case it is useful to anyone. I suspect I must be missing something important, but in all my tests so far, my (much simplified) version is working as well as the Drupal version.

Unfortunately, Explorer is still very messed up in either version. I'll keep working on it.

Regards,
Matthew

*** farbtastic.orig.js  2008-10-01 17:06:30.000000000 -0400
--- farbtastic.mdk.js   2008-10-03 11:16:55.289786092 -0400
***************
*** 105,153 ****
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
  
!     if (typeof event.offsetX != 'undefined') {
!       // Use offset coordinates and find common offsetParent
!       var pos = { x: event.offsetX, y: event.offsetY };
! 
!       // Send the coordinates upwards through the offsetParent chain.
!       var e = el;
!       while (e) {
!         e.mouseX = pos.x;
!         e.mouseY = pos.y;
!         pos.x += e.offsetLeft;
!         pos.y += e.offsetTop;
!         e = e.offsetParent;
!       }
! 
!       // Look for the coordinates starting from the wheel widget.
!       var e = reference;
!       var offset = { x: 0, y: 0 }
!       while (e) {
!         if (typeof e.mouseX != 'undefined') {
!           x = e.mouseX - offset.x;
!           y = e.mouseY - offset.y;
!           break;
!         }
!         offset.x += e.offsetLeft;
!         offset.y += e.offsetTop;
!         e = e.offsetParent;
!       }
! 
!       // Reset stored coordinates
!       e = el;
!       while (e) {
!         e.mouseX = undefined;
!         e.mouseY = undefined;
!         e = e.offsetParent;
!       }
!     }
!     else {
!       // Use absolute coordinates
!       var pos = fb.absolutePosition(reference);
  
-       x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
-       y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
-     }
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }
--- 105,114 ----
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
  
!               var offset = $(reference).offset();
!               x = event.pageX - offset.left;
!               y = event.pageY - offset.top;
  
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }

@Matthew: Farbtastic's mouse handling is commented, and I even blogged about the mechanism used.

What's disturbing is that the Drupal approach to fixing JS code has apparently devolved into 'fuck with it until it works again', rather than say, looking at the changes made to jQuery since Farbtastic was written and updating the code to use the new available functions. With jQuery's $.offset() and mouse improvements, the entire fb.widgetCoords function should be obsolete. Instead, you took a legacy workaround method that does manual offsetParent calculations and added in $.offset(). This makes no sense.

Farbtastic has been sitting in core for nearly 2 years now. If nobody knows how it works, I'd say that's symptomatic of the Drupal community's SEP field.

@Steven: Relax! I've got nothing to do with Drupal, and I just started working with Farbtastic the other day. Okay, so widgetCoords is outdated. Are you planning to update it?

I thought Farbtastic was your baby? Have you handed it off to Drupal?

Anyhow, I have no idea yet why this works yet, but the following patch to the stylesheet actually solves my Explorer problems. Very strange.

Thanks,
Matthew

*** farbtastic.orig.css 2008-10-03 16:03:20.491129594 -0400
--- farbtastic.mdk.css 2008-10-03 16:03:53.487929547 -0400
***************
*** 6,11 ****
--- 6,12 ----
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
+ left: 0; top: 0;
width: 195px;
height: 195px;
}

What a nicely designed little color picker! I used it on a site prototype today so the client could try out different background colors. Worked out great and they thought I was a genius! (But I told them the source anyway.)

Many thanks.

Will Fastie
Baltimore, MD USA

@Steven - you are right that the solution in drupal is currently hack on the legacy code rather than taking advantage of what's in jQuery 1.2.6. That's my fault. Sorry I bastardized the code. In an effort to correct this I've written a patch to fix this. If you want to take a look check out http://drupal.org/node/323965. I'm not asking you to do anything but would appreciate your input if you are so inclined.

If you love getting
20 hours 47 sec ago
@Charles: Subdivision
4 days 11 hours ago
Oh, I only saw this post
4 days 22 hours ago
Awesome
5 days 22 min ago
Bug in the demo
5 days 11 hours ago

diff -u farbtastic.js ~fred/js/farbtastic.js
--- farbtastic.js	2007-01-09 22:53:11.000000000 -0800
+++ js/farbtastic.js	2008-01-04 08:31:50.000000000 -0800
@@ -108,6 +108,7 @@
     if (typeof event.offsetX != 'undefined') {
       // Use offset coordinates and find common offsetParent
       var pos = { x: event.offsetX, y: event.offsetY };
+      var scrollTop = 0, scrollLeft = 0;
 
       // Send the coordinates upwards through the offsetParent chain.
       var e = el;
@@ -116,12 +117,14 @@
         e.mouseY = pos.y;
         pos.x += e.offsetLeft;
         pos.y += e.offsetTop;
+        scrollTop += e.scrollTop;
+        scrollLeft += e.scrollLeft;
         e = e.offsetParent;
       }
 
       // Look for the coordinates starting from the wheel widget.
       var e = reference;
-      var offset = { x: 0, y: 0 }
+      var offset = { x: 0 - scrollLeft, y: 0 - scrollTop }
       while (e) {
         if (typeof e.mouseX != 'undefined') {
           x = e.mouseX - offset.x;

*** farbtastic.orig.js  2008-10-01 17:06:30.000000000 -0400
--- farbtastic.mdk.js   2008-10-03 11:16:55.289786092 -0400
***************
*** 105,153 ****
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
  
!     if (typeof event.offsetX != 'undefined') {
!       // Use offset coordinates and find common offsetParent
!       var pos = { x: event.offsetX, y: event.offsetY };
! 
!       // Send the coordinates upwards through the offsetParent chain.
!       var e = el;
!       while (e) {
!         e.mouseX = pos.x;
!         e.mouseY = pos.y;
!         pos.x += e.offsetLeft;
!         pos.y += e.offsetTop;
!         e = e.offsetParent;
!       }
! 
!       // Look for the coordinates starting from the wheel widget.
!       var e = reference;
!       var offset = { x: 0, y: 0 }
!       while (e) {
!         if (typeof e.mouseX != 'undefined') {
!           x = e.mouseX - offset.x;
!           y = e.mouseY - offset.y;
!           break;
!         }
!         offset.x += e.offsetLeft;
!         offset.y += e.offsetTop;
!         e = e.offsetParent;
!       }
! 
!       // Reset stored coordinates
!       e = el;
!       while (e) {
!         e.mouseX = undefined;
!         e.mouseY = undefined;
!         e = e.offsetParent;
!       }
!     }
!     else {
!       // Use absolute coordinates
!       var pos = fb.absolutePosition(reference);
  
-       x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
-       y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
-     }
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }
--- 105,114 ----
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
  
!               var offset = $(reference).offset();
!               x = event.pageX - offset.left;
!               y = event.pageY - offset.top;
  
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }

Thanks!

Issues with jQuery 1.1

Cool! But I'm stymied.

Custom callback

Thanks anyway

Be nice with dean edwards' packer

Patch to make color picker work within scrolling element

Fixed positioning?

Farbtastic and positioning

@Matt Farina and Steven

"Don't get what it's doing"

@Steven: Relax! I've got

Farbtastic Fantastic

You're Right

Post new comment

Recent comments

Read entries about

Images

Farbtastic 1.2 out

Post new comment

Recent comments

Read entries about

Images

Site