Skip to content
This repository

Have color picker bind to $("html") for mousemove/up #19

Open
wants to merge 1 commit into from

2 participants

collin TJ Holowaychuk
collin

This way a drag initiated inside the canvas still work when you end up
going "outside" the lines of the color picker. Otherwise it can be tedious to
get to the very edge of the color picker.

collin collin Have color picker bind to $("html") for mousemove/up
This way a drag initiated inside the canvas still work when you end up
going "outside" the lines of the color picker. Otherwise it can be tedious to
get to the very edge of the color picker.
c85f98d
TJ Holowaychuk
Owner

we should add some bounds checking too since it kinda goes wonky if you drag out, it would be a lot nicer if we lock it in the rect

collin

Yes, maybe use Math.min and Math.max in the update function to keep things inside the canvas? Or is there a better place to put it?

TJ Holowaychuk
Owner

yup that should be fine

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Feb 03, 2012
collin collin Have color picker bind to $("html") for mousemove/up
This way a drag initiated inside the canvas still work when you end up
going "outside" the lines of the color picker. Otherwise it can be tedious to
get to the very edge of the color picker.
c85f98d
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 6 additions and 5 deletions. Show diff stats Hide diff stats

  1. +6 5 lib/components/color-picker/color-picker.js
11 lib/components/color-picker/color-picker.js
... ... @@ -1,4 +1,3 @@
1   -
2 1 /**
3 2 * Expose `ColorPicker`.
4 3 */
@@ -103,6 +102,7 @@ ColorPicker.prototype.height = function(n){
103 102 ColorPicker.prototype.spectrumEvents = function(){
104 103 var self = this
105 104 , canvas = $(this.spectrum)
  105 + , application = $("html")
106 106 , down;
107 107
108 108 function update(e) {
@@ -118,11 +118,11 @@ ColorPicker.prototype.spectrumEvents = function(){
118 118 update(e);
119 119 });
120 120
121   - canvas.mousemove(function(e){
  121 + application.mousemove(function(e){
122 122 if (down) update(e);
123 123 });
124 124
125   - canvas.mouseup(function(){
  125 + application.mouseup(function(){
126 126 down = false;
127 127 });
128 128 };
@@ -136,6 +136,7 @@ ColorPicker.prototype.spectrumEvents = function(){
136 136 ColorPicker.prototype.mainEvents = function(){
137 137 var self = this
138 138 , canvas = $(this.main)
  139 + , application = $("html")
139 140 , down;
140 141
141 142 function update(e) {
@@ -151,11 +152,11 @@ ColorPicker.prototype.mainEvents = function(){
151 152 update(e);
152 153 });
153 154
154   - canvas.mousemove(function(e){
  155 + application.mousemove(function(e){
155 156 if (down) update(e);
156 157 });
157 158
158   - canvas.mouseup(function(){
  159 + application.mouseup(function(){
159 160 down = false;
160 161 });
161 162 };

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.