diff --git a/docs/changelog/6.x.x.txt b/docs/changelog/6.x.x.txt index 7728397ea..55bb1d2f6 100644 --- a/docs/changelog/6.x.x.txt +++ b/docs/changelog/6.x.x.txt @@ -23,6 +23,7 @@ - Added edit icons to the list of prototypes and packages in the asset manager. - Added a select all option to the clipboard selector in the asset manager. + - Added a color picker form field type. 6.5.6 diff --git a/lib/WebGUI/Form.pm b/lib/WebGUI/Form.pm index d20820d4c..498919739 100644 --- a/lib/WebGUI/Form.pm +++ b/lib/WebGUI/Form.pm @@ -43,6 +43,7 @@ Base forms package. Eliminates some of the normal code work that goes along with $html = WebGUI::Form::checkbox({name=>"whichOne", value=>"red"}); $html = WebGUI::Form::checkList({name=>"dayOfWeek", options=>\%days}); $html = WebGUI::Form::codearea({name=>"stylesheet"}); + $html = WebGUI::Form::color({name=>"highlightColor"}); $html = WebGUI::Form::combo({name=>"fruit",options=>\%fruit}); $html = WebGUI::Form::contentType({name=>"contentType"); $html = WebGUI::Form::databaseLink(); @@ -300,6 +301,33 @@ sub codearea { return $output; } +#------------------------------------------------------------------- + +=head2 color ( hashRef ) + +Returns a color picker field. + +=head3 name + +The name field for this form element. + +=head3 value + +The value for this form element. This should be a scalar containing a hex color like "#000000". + +=head3 defaultValue + +This will be used if no value is specified. + +=cut + +sub color { + my $params = shift; + WebGUI::Style::setScript($session{config}{extrasURL}.'/colorPicker.js',{ type=>'text/javascript' }); + return ''; +} + + #------------------------------------------------------------------- =head2 combo ( hashRef ) @@ -539,9 +567,9 @@ This will be used if no value is specified. Defaults to today and now. sub dateTime { my $params = shift; my $value = epochToSet($params->{value}||$params->{defaultValue},1); - WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/calendar.js',{ language=>'javascript' }); - WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/lang/calendar-en.js',{ language=>'javascript' }); - WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/calendar-setup.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/calendar.js',{ type=>'text/javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/lang/calendar-en.js',{ type=>'text/javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/calendar/calendar-setup.js',{ type=>'text/javascript' }); WebGUI::Style::setLink($session{config}{extrasURL}.'/calendar/calendar-win2k-1.css', { rel=>"stylesheet", type=>"text/css", media=>"all" }); return text({ name=>$params->{name}, @@ -646,7 +674,7 @@ This will be used if no value is specified. sub email { my $params = shift; - WebGUI::Style::setScript($session{config}{extrasURL}.'/emailCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/emailCheck.js',{ type=>'text/javascript' }); my $output .= text({ name=>$params->{name}, value=>$params->{value}, @@ -953,7 +981,7 @@ sub float { my $params = shift; my $value = $params->{value} || 0; my $size = $params->{size} || 11; - WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ type=>'text/javascript' }); return text({ name=>$params->{name}, value=>$value, @@ -1207,7 +1235,7 @@ This will be used if no value is specified. sub integer { my $params = shift; - WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ type=>'text/javascript' }); return text({ name=>$params->{name}, value=>$params->{value}, @@ -1354,7 +1382,7 @@ This will be used if no value is specified. sub phone { my $params = shift; - WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ type=>'text/javascript' }); my $maxLength = $params->{maxlength} || 30; return text({ name=>$params->{name}, @@ -1738,7 +1766,7 @@ This will be used if no value is specified. Defaults to now. sub timeField { my $params = shift; my $value = WebGUI::DateTime::secondsToTime($params->{value}||$params->{defaultValue}); - WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ type=>'text/javascript' }); my $output = text({ name=>$params->{name}, value=>$value, @@ -1790,7 +1818,7 @@ This will be used if no value is specified. sub url { my $params = shift; my $maxLength = $params->{maxlength} || 2048; - WebGUI::Style::setScript($session{config}{extrasURL}.'/addHTTP.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/addHTTP.js',{ type=>'text/javascript' }); return text({ name=>$params->{name}, value=>$params->{value}, @@ -1933,7 +1961,7 @@ This will be used if no value is specified. sub zipcode { my $params = shift; - WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ language=>'javascript' }); + WebGUI::Style::setScript($session{config}{extrasURL}.'/inputCheck.js',{ type=>'text/javascript' }); my $maxLength = $params->{maxlength} || 10; return text({ name=>$params->{name}, diff --git a/lib/WebGUI/FormProcessor.pm b/lib/WebGUI/FormProcessor.pm index 2b38f4eec..6a06f99d1 100644 --- a/lib/WebGUI/FormProcessor.pm +++ b/lib/WebGUI/FormProcessor.pm @@ -36,6 +36,7 @@ This package helps in the processing of the form variables that are returned fro $value = WebGUI::FormProcessor::checkbox("whichOne"); $value = WebGUI::FormProcessor::checkList("dayOfWeek"); $value = WebGUI::FormProcessor::codearea("snippet"); + $value = WebGUI::FormProcessor::color("highlightColor"); $value = WebGUI::FormProcessor::combo("fruit"); $value = WebGUI::FormProcessor::contentType("text"); $value = WebGUI::FormProcessor::date("endDate"); @@ -140,6 +141,25 @@ sub codearea { } +#------------------------------------------------------------------- + +=head2 color ( name ) + +Returns a hex color string like: #000000 + +=head3 name + +The name of the form variable to retrieve. + +=cut + +sub color { + my $color = $session{form}{$_[0]}; + return undef unless $color =~ /\#\w{6}/; + return $color; +} + + #------------------------------------------------------------------- =head2 combo ( name ) diff --git a/lib/WebGUI/HTMLForm.pm b/lib/WebGUI/HTMLForm.pm index c15e33a65..665db28cb 100644 --- a/lib/WebGUI/HTMLForm.pm +++ b/lib/WebGUI/HTMLForm.pm @@ -60,6 +60,10 @@ Package that makes HTML forms typed data and significantly reduces the code need -name=>"stylesheet", -label=>"Stylesheet" ); + $f->color( + -name=>"highlightColor", + -label=>"Highlight Color" + ); $f->combo( -name=>"fruit", -options=>\%fruit, @@ -505,6 +509,61 @@ sub codearea { $self->{_data} .= $output; } +#------------------------------------------------------------------- + +=head2 color ( name, [, label, value, subtext, uiLevel, defaultValue ] ) + +Adds a hex color picker field. + +=head3 name + +The name field for this form element. + +=head3 label + +The left column label for this form row. + +=head3 value + +The value for this form element. Should be passed as a scalar containing a hex color like this: #000000 + +=head3 subtext + +Extra text to describe this form element or to provide special instructions. + +=head3 uiLevel + +The UI level for this field. See the WebGUI developer's site for details. Defaults to "0". + +=head3 defaultValue + +When no other value is present, will use this. + +=cut + +sub color { + my ($output); + my ($self, @p) = @_; + my ($name, $label, $value, $subtext, $uiLevel, $defaultValue) = rearrange([qw(name label value subtext uiLevel defaultValue)], @p); + if (_uiLevelChecksOut($uiLevel)) { + $output = WebGUI::Form::color({ + "name"=>$name, + "value"=>$value, + "defaultValue"=>$defaultValue + }); + $output .= _subtext($subtext); + $output = $self->_tableFormRow($label,$output); + } else { + $output = WebGUI::Form::hidden({ + "name"=>$name, + "value"=>$value, + "defaultValue",$defaultValue + }); + } + $self->{_data} .= $output; +} + + #------------------------------------------------------------------- =head2 combo ( name, options [, label, value, size, multiple, extras, subtext, uiLevel, defaultValue ] ) diff --git a/www/extras/colorPicker.gif b/www/extras/colorPicker.gif deleted file mode 100644 index a36307109..000000000 Binary files a/www/extras/colorPicker.gif and /dev/null differ diff --git a/www/extras/colorPicker.html b/www/extras/colorPicker.html deleted file mode 100644 index 6f7b5bf7a..000000000 --- a/www/extras/colorPicker.html +++ /dev/null @@ -1,351 +0,0 @@ - -Color Picker - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/www/extras/colorPicker.js b/www/extras/colorPicker.js new file mode 100644 index 000000000..e1a9263c1 --- /dev/null +++ b/www/extras/colorPicker.js @@ -0,0 +1,215 @@ +/** +* MiniColorPicker v0.3 +* By: me [at] daantje [dot] nl +* +* Last updated: Thu Sep 16 12:59:10 CEST 2004 +* +* Documentation: +* A realy small Photoshop like color picker in DHTML. +* It should be compatible with MSIE and Mozilla based +* browsers. +* +* License: +* GPL +* +* Support: +* Not realy. +*/ + + +//Config ammount of colors +var bit = 16; //increase to make picker bigger (and slower) + + +//define globals, don't change! +bit = Math.round(255 / bit); +var ConvArray = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'); +var picked = new Array(); +var pickedColorRGB = new Array(); +var toolbarShow = new Array(); +var donePickerInits = 0; +var clickedPicker; +var tmr = null; + + +//this function is written by Guido Socher, guido at linuxfocus dot org +function dec2hex(value){ + var retval = ''; + var intnum; + var tmpnum; + var i = 0; + + intnum = parseInt(value,10); + if (isNaN(intnum)){ + retval = 'NaN'; + }else{ + while (intnum > 0.9){ + i++; + tmpnum = intnum; + // cancatinate return string with new digit: + retval = ConvArray[tmpnum % 16] + retval; + intnum = Math.floor(tmpnum / 16); + if (i > 100){ + // break infinite loops + retval = 'NaN'; + break; + } + } + } + if(retval.length == 1) + retval = '0' + retval; + else if(retval.length == 0) + retval = '00'; + return retval; +} + + +function HEXcolor2RGB(value){ + value = value.replace('#',''); + pickedColorRGB[0] = value.substr(0,2); + pickedColorRGB[1] = value.substr(2,2); + pickedColorRGB[2] = value.substr(4,2); + for(i=0;i<3;i++){ + pickedColorRGB[i] = parseInt(pickedColorRGB[i],16); + } + return pickedColorRGB; +} + + +function buildPicker(){ + htmlStr = ""; + //palet + for(x=0;x<=255;x=x+bit){ + for(y=0;y<=255;y=y+bit){ + htmlStr+= ""; + } + htmlStr+= ""; + } + //grays + for(x=0;x<=255;x=x+bit){ + c = dec2hex(x)+dec2hex(x)+dec2hex(x); + htmlStr+= ""; + } + htmlStr+= "
"; + + return htmlStr; +} + + +function changePallet(R){ + for(G=0;G<=255;G=G+bit){ + for(B=0;B<=255;B=B+bit){ + document.getElementById(G+','+B).style.backgroundColor = '#'+dec2hex(R)+dec2hex(G)+dec2hex(B); + } + } + picked[clickedPicker] = R; +} + + +function changePickerHue(){ + g = 0; + b = 255; + gS = 0; + bS = 1; + htmlStr = ""; + for(r=0;r<=255;r=r+bit){ + c = dec2hex(r)+dec2hex(g)+dec2hex(b); + htmlStr+= ""; + + if(g == 255) gS = 1; + else if(g == 0) gS = 0; + + if(b == 255) bS = 1; + else if(b == 0) bS = 0; + + if(gS == 0) + g = g + (bit * 2); + else + g = g - (bit * 2); + + if(bS == 0) + b = b + (bit * 4); + else + b = b - (bit * 4); + } + htmlStr+= ""; + htmlStr+= "
"; + + return htmlStr; +} + + +function pickColor(r,g,b){ + c = '#'+dec2hex(r)+dec2hex(g)+dec2hex(b); + document.getElementById(clickedPicker).style.backgroundColor = c; + document.getElementById(clickedPicker+'Value').value = c; + changePallet(r); +} + + +function setPickedColorFromForm(obj){ + c = HEXcolor2RGB(obj.value); + changePallet(c[0]); + document.getElementById(obj.id.replace('Value','')).style.backgroundColor = obj.value; +} + + +function placePickerToolbar(obj){ + lastClickedPicker = clickedPicker; + clickedPicker = obj.id; + if(tmr) + clearTimeout(tmr); + if(toolbarShow[obj.id] == 0){ + toolbarShow[obj.id] = 1; + + t = obj.offsetTop + parseInt(obj.style.height) + 3; + l = obj.offsetLeft; + while(obj.offsetParent){ + t+= obj.offsetParent.offsetTop; + l+= obj.offsetParent.offsetLeft; + obj = obj.offsetParent; + } + document.getElementById('colorPickerTools').style.top = t; + document.getElementById('colorPickerTools').style.left = l; + document.getElementById('colorPickerTools').style.display = 'block'; + if(picked[clickedPicker] == null){ + changePallet(255); + }else{ + //changePallet(picked[clickedPicker]); + setPickedColorFromForm(document.getElementById(clickedPicker+'Value')); + } + }else if(toolbarShow[obj.id] == 1){ + document.getElementById('colorPickerTools').style.display = 'none'; + toolbarShow[obj.id] = 0; + } +} + + +function killColorPicker(sw){ + if(sw == 1 && clickedPicker){ + tmr = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',1000); + }else if(tmr){ + clearTimeout(tmr); + } +} + + +function initColorPicker(fieldName,fieldValue){ + pickerScreen = buildPicker(); + hueScreen = changePickerHue(); + if(!fieldValue) + fieldValue = ""; + + s = ""; + s+= ""; + s+= ""; + s+= "
 
"; + document.write(s); + if(donePickerInits == 0){ + document.write(""); + document.getElementById('colorPickerTools').innerHTML = '
'+pickerScreen+''+hueScreen+'
'; + } + + toolbarShow["pickedColor"+donePickerInits] = 0; + donePickerInits++; +}