00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023 @import "CPColorPicker.j"
00024
00025
00026
00027
00028 @implementation CPSliderColorPicker : CPColorPicker
00029 {
00030 CPView _contentView;
00031
00032 CPSlider _redSlider;
00033 CPSlider _greenSlider;
00034 CPSlider _blueSlider;
00035 CPSlider _hueSlider;
00036 CPSlider _saturationSlider;
00037 CPSlider _brightnessSlider;
00038
00039 CPTextField _rgbLabel;
00040 CPTextField _hsbLabel;
00041 CPTextField _redLabel;
00042 CPTextField _greenLabel;
00043 CPTextField _blueLabel;
00044 CPTextField _hueLabel;
00045 CPTextField _saturationLabel;
00046 CPTextField _brightnessLabel;
00047 CPTextField _hexLabel;
00048
00049 DOMElement _redValue;
00050 DOMElement _greenValue;
00051 DOMElement _blueValue;
00052 DOMElement _hueValue;
00053 DOMElement _saturationValue;
00054 DOMElement _brightnessValue;
00055 DOMElement _hexValue;
00056 }
00057
00058 - (id)initWithPickerMask:(int)mask colorPanel:(CPColorPanel)owningColorPanel
00059 {
00060 return [super initWithPickerMask:mask colorPanel: owningColorPanel];
00061 }
00062
00063 -(id)initView
00064 {
00065 aFrame = CPRectMake(0, 0, CPColorPickerViewWidth, CPColorPickerViewHeight);
00066
00067 _contentView = [[CPView alloc] initWithFrame:aFrame];
00068 [_contentView setAutoresizingMask:CPViewWidthSizable|CPViewHeightSizable];
00069
00070 _rgbLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 10, 100, 20)];
00071 [_rgbLabel setStringValue: "RGB"];
00072 [_rgbLabel setTextColor:[CPColor whiteColor]];
00073
00074 _redLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 35, 15, 20)];
00075 [_redLabel setStringValue: "R"];
00076 [_redLabel setTextColor:[CPColor whiteColor]];
00077
00078 _redSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 35, aFrame.size.width - 70, 20)];
00079 [_redSlider setMaxValue: 1.0];
00080 [_redSlider setMinValue: 0.0];
00081 [_redSlider setTarget: self];
00082 [_redSlider setAction: @selector(sliderChanged:)];
00083 [_redSlider setAutoresizingMask: CPViewWidthSizable];
00084
00085 var updateFunction = function(aDOMEvent)
00086 {
00087 if(isNaN(this.value))
00088 return;
00089
00090 switch(this)
00091 {
00092 case _redValue: [_redSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00093
00094 break;
00095
00096 case _greenValue: [_greenSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00097
00098 break;
00099
00100 case _blueValue: [_blueSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00101
00102 break;
00103
00104 case _hueValue: [_hueSlider setFloatValue:MAX(MIN(ROUND(this.value), 360), 0)];
00105
00106 break;
00107
00108 case _saturationValue: [_saturationSlider setFloatValue:MAX(MIN(ROUND(this.value), 100), 0)];
00109
00110 break;
00111
00112 case _brightnessValue: [_brightnessSlider setFloatValue:MAX(MIN(ROUND(this.value), 100), 0)];
00113
00114 break;
00115 }
00116
00117 this.blur();
00118 };
00119
00120 var keypressFunction = function(aDOMEvent)
00121 {
00122 aDOMEvent = aDOMEvent || window.event;
00123 if (aDOMEvent.keyCode == 13)
00124 {
00125 updateFunction(aDOMEvent);
00126
00127 if(aDOMEvent.preventDefault)
00128 aDOMEvent.preventDefault();
00129 else if(aDOMEvent.stopPropagation)
00130 aDOMEvent.stopPropagation();
00131 }
00132 }
00133
00134
00135 var redValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 35, 45, 20)];
00136 [redValue setAutoresizingMask: CPViewMinXMargin];
00137
00138 _redValue = document.createElement("input");
00139 _redValue.style.width = "40px";
00140 _redValue.style.backgroundColor = "transparent";
00141 _redValue.style.border = "1px solid white";
00142 _redValue.style.color = "white";
00143 _redValue.style.position = "absolute";
00144 _redValue.style.top = "0px";
00145 _redValue.style.left = "0px";
00146 _redValue.onchange = updateFunction;
00147
00148 redValue._DOMElement.appendChild(_redValue);
00149 [_contentView addSubview: redValue];
00150
00151 _greenLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 58, 15, 20)];
00152 [_greenLabel setStringValue: "G"];
00153 [_greenLabel setTextColor:[CPColor whiteColor]];
00154
00155 _greenSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 58, aFrame.size.width - 70, 20)];
00156 [_greenSlider setMaxValue: 1.0];
00157 [_greenSlider setMinValue: 0.0];
00158 [_greenSlider setTarget: self];
00159 [_greenSlider setAction: @selector(sliderChanged:)];
00160 [_greenSlider setAutoresizingMask: CPViewWidthSizable];
00161
00162
00163 var greenValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 58, 45, 20)];
00164 [greenValue setAutoresizingMask: CPViewMinXMargin];
00165
00166 _greenValue = _redValue.cloneNode(false);
00167 _greenValue.onchange = updateFunction;
00168
00169 greenValue._DOMElement.appendChild(_greenValue);
00170 [_contentView addSubview: greenValue];
00171
00172 _blueLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 81, 15, 20)];
00173 [_blueLabel setStringValue: "B"];
00174 [_blueLabel setTextColor:[CPColor whiteColor]];
00175
00176 _blueSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 81, aFrame.size.width - 70, 20)];
00177 [_blueSlider setMaxValue: 1.0];
00178 [_blueSlider setMinValue: 0.0];
00179 [_blueSlider setTarget: self];
00180 [_blueSlider setAction: @selector(sliderChanged:)];
00181 [_blueSlider setAutoresizingMask: CPViewWidthSizable];
00182
00183
00184 var blueValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 81, 45, 20)];
00185 [blueValue setAutoresizingMask: CPViewMinXMargin];
00186
00187 _blueValue = _redValue.cloneNode(false);
00188 _blueValue.onchange = updateFunction;
00189
00190 blueValue._DOMElement.appendChild(_blueValue);
00191 [_contentView addSubview: blueValue];
00192
00193 _hsbLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 120, 100, 20)];
00194 [_hsbLabel setStringValue: "HSB"];
00195 [_hsbLabel setTextColor:[CPColor whiteColor]];
00196
00197 _hueLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 145, 15, 20)];
00198 [_hueLabel setStringValue: "H"];
00199 [_hueLabel setTextColor:[CPColor whiteColor]];
00200
00201 _hueSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 145, aFrame.size.width - 70, 20)];
00202 [_hueSlider setMaxValue: 359.0];
00203 [_hueSlider setMinValue: 0.0];
00204 [_hueSlider setTarget: self];
00205 [_hueSlider setAction: @selector(sliderChanged:)];
00206 [_hueSlider setAutoresizingMask: CPViewWidthSizable];
00207
00208
00209 var hueValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 145, 45, 20)];
00210 [hueValue setAutoresizingMask: CPViewMinXMargin];
00211
00212 _hueValue = _redValue.cloneNode(false);
00213 _hueValue.onchange = updateFunction;
00214
00215 hueValue._DOMElement.appendChild(_hueValue);
00216 [_contentView addSubview: hueValue];
00217
00218 _saturationLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 168, 15, 20)];
00219 [_saturationLabel setStringValue: "S"];
00220 [_saturationLabel setTextColor:[CPColor whiteColor]];
00221
00222 _saturationSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 168, aFrame.size.width - 70, 20)];
00223 [_saturationSlider setMaxValue: 100.0];
00224 [_saturationSlider setMinValue: 0.0];
00225 [_saturationSlider setTarget: self];
00226 [_saturationSlider setAction: @selector(sliderChanged:)];
00227 [_saturationSlider setAutoresizingMask: CPViewWidthSizable];
00228
00229
00230 var saturationValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 168, 45, 20)];
00231 [saturationValue setAutoresizingMask: CPViewMinXMargin];
00232
00233 _saturationValue = _redValue.cloneNode(false);
00234 _saturationValue.onchange = updateFunction;
00235
00236 saturationValue._DOMElement.appendChild(_saturationValue);
00237 [_contentView addSubview: saturationValue];
00238
00239 _brightnessLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 191, 15, 20)];
00240 [_brightnessLabel setStringValue: "B"];
00241 [_brightnessLabel setTextColor:[CPColor whiteColor]];
00242
00243 _brightnessSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 191, aFrame.size.width - 70, 20)];
00244 [_brightnessSlider setMaxValue: 100.0];
00245 [_brightnessSlider setMinValue: 0.0];
00246 [_brightnessSlider setTarget: self];
00247 [_brightnessSlider setAction: @selector(sliderChanged:)];
00248 [_brightnessSlider setAutoresizingMask: CPViewWidthSizable];
00249
00250
00251 var brightnessValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 191, 45, 20)];
00252 [brightnessValue setAutoresizingMask: CPViewMinXMargin];
00253
00254 _brightnessValue = _redValue.cloneNode(false);
00255 _brightnessValue.onchange = updateFunction;
00256
00257 brightnessValue._DOMElement.appendChild(_brightnessValue);
00258 [_contentView addSubview: brightnessValue];
00259
00260 _hexLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 230, 100, 20)];
00261 [_hexLabel setStringValue: "Hex"];
00262 [_hexLabel setTextColor:[CPColor whiteColor]];
00263
00264
00265 _hexValue = _redValue.cloneNode(false);
00266 _hexValue.style.top = "255px";
00267 _hexValue.style.width = "80px";
00268 _hexValue.style.left = "0px";
00269 _hexValue.onkeypress = function(aDOMEvent)
00270 {
00271 aDOMEvent = aDOMEvent || window.event;
00272 if (aDOMEvent.keyCode == 13)
00273 {
00274 var newColor = [CPColor colorWithHexString: this.value];
00275
00276 if(newColor)
00277 {
00278 [self setColor: newColor];
00279 [[self colorPanel] setColor: newColor];
00280 }
00281
00282 if(aDOMEvent.preventDefault)
00283 aDOMEvent.preventDefault();
00284 else if(aDOMEvent.stopPropagation)
00285 aDOMEvent.stopPropagation();
00286
00287 this.blur();
00288 }
00289 };
00290
00291 _contentView._DOMElement.appendChild(_hexValue);
00292
00293 [_contentView addSubview: _rgbLabel];
00294 [_contentView addSubview: _redLabel];
00295 [_contentView addSubview: _greenLabel];
00296 [_contentView addSubview: _blueLabel];
00297 [_contentView addSubview: _redSlider];
00298 [_contentView addSubview: _greenSlider];
00299 [_contentView addSubview: _blueSlider];
00300
00301 [_contentView addSubview: _hsbLabel];
00302 [_contentView addSubview: _hueLabel];
00303 [_contentView addSubview: _saturationLabel];
00304 [_contentView addSubview: _brightnessLabel];
00305 [_contentView addSubview: _hueSlider];
00306 [_contentView addSubview: _saturationSlider];
00307 [_contentView addSubview: _brightnessSlider];
00308
00309 [_contentView addSubview: _hexLabel];
00310 }
00311
00312 - (CPView)provideNewView:(BOOL)initialRequest
00313 {
00314 if (initialRequest)
00315 [self initView];
00316
00317 return _contentView;
00318 }
00319
00320 - (int)currentMode
00321 {
00322 return CPSliderColorPickerMode;
00323 }
00324
00325 - (BOOL)supportsMode:(int)mode
00326 {
00327 return (mode == CPSliderColorPickerMode) ? YES : NO;
00328 }
00329
00330 -(void)sliderChanged:(id)sender
00331 {
00332 var newColor;
00333
00334 switch(sender)
00335 {
00336 case _hueSlider:
00337 case _saturationSlider:
00338 case _brightnessSlider: newColor = [CPColor colorWithHue: [_hueSlider floatValue]
00339 saturation: [_saturationSlider floatValue]
00340 brightness: [_brightnessSlider floatValue]];
00341
00342 [self updateRGBSliders: newColor];
00343 break;
00344
00345 case _redSlider:
00346 case _greenSlider:
00347 case _blueSlider: newColor = [CPColor colorWithCalibratedRed: [_redSlider floatValue]
00348 green: [_greenSlider floatValue]
00349 blue: [_blueSlider floatValue]
00350 alpha: 1.0];
00351
00352 [self updateHSBSliders: newColor];
00353 break;
00354 }
00355
00356 [self updateLabels];
00357 [self updateHex: newColor];
00358 [[self colorPanel] setColor: newColor];
00359 }
00360
00361 -(void)setColor:(CPColor)aColor
00362 {
00363 [self updateRGBSliders: aColor];
00364 [self updateHSBSliders: aColor];
00365 [self updateHex: aColor];
00366 [self updateLabels];
00367 }
00368
00369 -(void)updateHSBSliders:(CPColor)aColor
00370 {
00371 var hsb = [aColor hsbComponents];
00372
00373 [_hueSlider setFloatValue:hsb[0]];
00374 [_saturationSlider setFloatValue:hsb[1]];
00375 [_brightnessSlider setFloatValue:hsb[2]];
00376 }
00377
00378 - (void)updateHex:(CPColor)aColor
00379 {
00380 _hexValue.value = [aColor hexString];
00381 }
00382
00383 - (void)updateRGBSliders:(CPColor)aColor
00384 {
00385 var rgb = [aColor components];
00386
00387 [_redSlider setFloatValue:rgb[0]];
00388 [_greenSlider setFloatValue:rgb[1]];
00389 [_blueSlider setFloatValue:rgb[2]];
00390 }
00391
00392 - (void)updateLabels
00393 {
00394 _hueValue.value = ROUND([_hueSlider floatValue]);
00395 _saturationValue.value = ROUND([_saturationSlider floatValue]);
00396 _brightnessValue.value = ROUND([_brightnessSlider floatValue]);
00397
00398 _redValue.value = ROUND([_redSlider floatValue] * 255);
00399 _greenValue.value = ROUND([_greenSlider floatValue] * 255);
00400 _blueValue.value = ROUND([_blueSlider floatValue] * 255);
00401 }
00402
00403 - (CPImage)provideNewButtonImage
00404 {
00405 return [[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:CPColorPicker] pathForResource:"slider_button.png"] size:CGSizeMake(32, 32)];
00406 }
00407
00408 - (CPImage)provideNewAlternateButtonImage
00409 {
00410 return [[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:CPColorPicker] pathForResource:"slider_button_h.png"] size:CGSizeMake(32, 32)];
00411 }
00412
00413 @end