Adding sliders

docs/changelog/6.x.x.txt

@@ -141,6 +141,8 @@
  - fix [ 1480536 ] "Add Files" link in Folder template doesn't work (Martin
    Kamerbeek / Procolix)
  - Added a graphing engine and tied it into the Poll asset (Martin Kamerbeek / Procolix)
+ - Added Slider form controls (IntSlider, HexSlider and SelectSlider) (Martin
+   Kamerbeek / Procolix)
 
 6.8.8
  - fix [ 1452466 ] File size not set in File asset (Thanks to Eric S)

lib/WebGUI/Form/HexSlider.pm

@@ -15,7 +15,7 @@ package WebGUI::Form::HexSlider;
 =cut
 
 use strict;
-use base 'WebGUI::Form::Control';
+use base 'WebGUI::Form::Slider';
 use WebGUI::International;
 
 =head1 NAME
@@ -54,10 +54,19 @@ Defaults to "ff". The maximum that the slider can go to.
 
 Defaults to "00". The minimum value that the slider can go to.
 
+=head4 size
+
+The length of the input box.
+
+=head4 padLength
+
+Pad the value to padLength characters by adding zeros in front if necesarry.
+
 =head4 profileEnabled
 
 Flag that tells the User Profile system that this is a valid form element in a User Profile
 
+
 =cut
 
 sub definition {
@@ -67,7 +76,7 @@ sub definition {
 	my $i18n = WebGUI::International->new($session);
 	push(@{$definition}, {
 		formName=>{
-			defaultValue=> $i18n->get("475")
+			defaultValue=> $i18n->get("hex slider")
 			},
 		maximum=>{
 			defaultValue=> "ff",
@@ -75,6 +84,12 @@ sub definition {
 		minimum=>{
 			defaultValue=> "00",
 			},
+		size=>{
+			defaultValue=>11,
+			},
+		padLength=>{
+			defaultValue=>"2",
+			},
 		profileEnabled=>{
 			defaultValue=>1
 			},
@@ -83,7 +98,117 @@ sub definition {
 }
 
 #-------------------------------------------------------------------
+=head2 getInputElement
 
+Returns the form element used for manual input.
+
+=cut
+
+sub getInputElement {
+	my $self = shift;
+
+	return WebGUI::Form::hexadecimal($self->session, {
+		name	=> $self->get('name'),
+		value	=> $self->get('value'),
+		size	=> $self->get('size'),
+		id	=> 'view-'.$self->get('id'),
+	});
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeInputElement
+
+Returns the javascript code to update the slider and other form elements on a
+change of the imput element.
+
+=cut
+
+sub getOnChangeInputElement {
+	my $self = shift;
+	
+	my $padLength = $self->get('padLength');
+	
+	return 
+		'while (this.value.length < '.$padLength.') { '.
+			'this.value = \'0\' + this.value'.
+		'};'.
+		$self->getSliderVariable.'.setValue(parseInt(this.value,16));'.
+		$self->getDisplayVariable.'.innerHTML = this.value';
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeSlider
+
+Returns the javascript code to update the form on a change of slider position.
+
+=cut
+
+sub getOnChangeSlider {
+	my $self = shift;
+	
+	my $padLength = $self->get('padLength');
+	
+	return 
+		$self->getInputVariable.'.value = this.getValue().toString(16);'.
+		'while ('.$self->getInputVariable.'.value.length < '.$padLength.') { '.
+			$self->getInputVariable.'.value = \'0\' + '.$self->getInputVariable.'.value'.
+		'};'.
+		$self->getDisplayVariable.'.innerHTML = this.getValue().toString(16);';
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMaximum
+
+Returns the maximum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMaximum {
+	my $self = shift;
+
+	return scalar(keys %{$self->get('options')}) - 1;
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMaximum
+
+Returns the minimum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMaximum {
+	my $self = shift;
+
+	return hex($self->get('maximum'));
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMaximum
+
+Returns the minimum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMinimum {
+	my $self = shift;
+
+	return hex($self->get('minimum'));
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderValue
+
+Returns the initial position of the slider in slider units.
+
+=cut
+
+sub getSliderValue {
+	my $self = shift;
+
+	return hex($self->get('value'));
+}
+
+#-------------------------------------------------------------------
 =head2 getValueFromPost ( )
 
 Retrieves a value from a form GET or POST and returns it. If the value comes back as undef, this method will return the defaultValue instead.  Strip newlines/carriage returns from the value.
@@ -92,40 +217,15 @@ Retrieves a value from a form GET or POST and returns it. If the value comes bac
 
 sub getValueFromPost {
 	my $self = shift;
-	my $formValue = $self->session->form->param($self->get("name")) if ($self->session->request);
-	if (defined $formValue && $formValue =~ m/^[a-f0-9]{2}$/) {
-		return $formValue;
-	} else {
-		return $self->{defaultValue};
-	}
-}
 
-#-------------------------------------------------------------------
+	my $properties = {
-
+		name	=> $self->get('name'),
-=head2 toHtml ( )
+		value	=> $self->get('value'),
-
+		size	=> $self->get('size'),
-Renders an input tag of type text.
+		id	=> 'view-'.$self->get('id'),
-
+	};
-=cut
+	
-
+	return WebGUI::Form::hexadecimal->new($self->session, $properties)->getValueFromPost;
-sub toHtml {
-	my $self = shift;
-	$self->session->style->setScript($self->session->url->extras("slider/js/range.js"), {type=>"text/javascript"});
-	$self->session->style->setScript($self->session->url->extras("slider/js/timer.js"), {type=>"text/javascript"});
-	$self->session->style->setScript($self->session->url->extras("slider/js/slider.js"), {type=>"text/javascript"});
-	$self->session->style->setLink($self->session->url->extras("slider/css/bluecurve/bluecurve.css"), {rel=>"stylesheet", type=>"text/css"});
-	my $output = '<div class="slider" id="'.$self->get('id').'" '.$self->get("extras").' tabindex="1">
-   <input class="slider-input" id="'.$self->get('id').'-input" name="'.$self->get("name").'" value="'.$self->get("value").'" />
-</div><script type="text/javascript">
-var sliderEl = document.getElementById ?  document.getElementById("'.$self->get('id').'") : null;
-var inputEl = document.forms[0]["'.$self->get('id').'-input"];
-var s = new Slider(sliderEl, inputEl);
-/* s.setMaximum('.$self->get("maximum").');
-s.setMinimum('.$self->get("minimum").');
-s.setValue('.$self->get("value").'); */
-</script>';
-	return $output;
 }
 
 1;
-

lib/WebGUI/Form/Hexadecimal.pm

@@ -0,0 +1,125 @@
+package WebGUI::Form::Hexadecimal;
+
+=head1 LEGAL
+
+ -------------------------------------------------------------------
+  WebGUI is Copyright 2001-2006 Plain Black Corporation.
+ -------------------------------------------------------------------
+  Please read the legal notices (docs/legal.txt) and the license
+  (docs/license.txt) that came with this distribution before using
+  this software.
+ -------------------------------------------------------------------
+  http://www.plainblack.com                     info@plainblack.com
+ -------------------------------------------------------------------
+
+=cut
+
+use strict;
+use base 'WebGUI::Form::Text';
+use WebGUI::International;
+
+=head1 NAME
+
+Package WebGUI::Form::Integer
+
+=head1 DESCRIPTION
+
+Creates an input field that accepts positive and negative integer.
+
+=head1 SEE ALSO
+
+This is a subclass of WebGUI::Form::Text.
+
+=head1 METHODS 
+
+The following methods are specifically available from this class. Check the superclass for additional methods.
+
+=cut
+
+#-------------------------------------------------------------------
+
+=head2 definition ( [ additionalTerms ] )
+
+See the superclass for additional details.
+
+=head3 additionalTerms
+
+The following additional parameters have been added via this sub class.
+
+=head4 maxlength
+
+Defaults to 11. Determines the maximum number of characters allowed in this field.
+
+=head4 defaultValue
+
+Defaults to 0. Used if no value is specified.
+
+=head4 size
+
+Defaults to 11. The number of characters that will be displayed at once in this field. Usually no need to override the default.
+
+=head4 profileEnabled
+
+Flag that tells the User Profile system that this is a valid form element in a User Profile
+
+=cut
+
+sub definition {
+	my $class = shift;
+	my $session = shift;
+	my $definition = shift || [];
+	my $i18n = WebGUI::International->new($session);
+	push(@{$definition}, {
+		formName=>{
+			defaultValue=>$i18n->get("hexadecimal")
+			},
+		maxlength=>{
+			defaultValue=> 11
+			},
+		defaultValue=>{
+			defaultValue=>0
+			},
+		size=>{
+			defaultValue=>11
+			},
+		profileEnabled=>{
+			defaultValue=>1
+			},
+		});
+        return $class->SUPER::definition($session, $definition);
+}
+
+#-------------------------------------------------------------------
+
+=head2 getValueFromPost ( )
+
+Returns the integer from the form post, or returns 0 if the post result is invalid.
+
+=cut
+
+sub getValueFromPost {
+	my $self = shift;
+	my $value = $self->session->form->param($self->get("name"));
+	if ($value =~ /^[0-9a-f]+$/i) {
+                return $value;
+        }
+        return 0;
+}
+
+#-------------------------------------------------------------------
+
+=head2 toHtml ( )
+
+Renders an integer field.
+
+=cut
+
+sub toHtml {
+        my $self = shift;
+	$self->session->style->setScript($self->session->url->extras('inputCheck.js'),{ type=>'text/javascript' });
+	$self->set("extras", $self->get('extras') . ' onkeyup="doInputCheck(document.getElementById(\''.$self->get("id").'\'),\'0123456789abcdef\')"');
+	return $self->SUPER::toHtml;
+}
+
+1;
+

lib/WebGUI/Form/IntSlider.pm

@@ -0,0 +1,147 @@
+package WebGUI::Form::IntSlider;
+
+=head1 LEGAL
+
+ -------------------------------------------------------------------
+  WebGUI is Copyright 2001-2006 Plain Black Corporation.
+ -------------------------------------------------------------------
+  Please read the legal notices (docs/legal.txt) and the license
+  (docs/license.txt) that came with this distribution before using
+  this software.
+ -------------------------------------------------------------------
+  http://www.plainblack.com                     info@plainblack.com
+ -------------------------------------------------------------------
+
+=cut
+
+use strict;
+use base 'WebGUI::Form::Slider';
+use WebGUI::International;
+
+=head1 NAME
+
+Package WebGUI::Form::IntSlider
+
+=head1 DESCRIPTION
+
+Creates a slider control that controls integer values.
+
+=head1 SEE ALSO
+
+This is a subclass of WebGUI::Form::Slider.
+
+=head1 METHODS 
+
+The following methods are specifically available from this class. Check the superclass for additional methods.
+
+=cut
+
+#-------------------------------------------------------------------
+
+=head2 definition ( [ additionalTerms ] )
+
+See the super class for additional details.
+
+=head3 additionalTerms
+
+The following additional parameters have been added via this sub class.
+
+=head4 size
+
+The length of the input box.
+
+=head4 profileEnabled
+
+Flag that tells the User Profile system that this is a valid form element in a User Profile
+
+=cut
+
+sub definition {
+	my $class = shift;
+	my $session = shift;
+	my $definition = shift || [];
+	my $i18n = WebGUI::International->new($session);
+	push(@{$definition}, {
+		formName=>{
+			defaultValue=> $i18n->get("int slider")
+			},
+		size=>{
+			defaultValue=> "3",
+			},
+		profileEnabled=>{
+			defaultValue=>1
+			},
+		});
+        return $class->SUPER::definition($session, $definition);
+}
+
+#-------------------------------------------------------------------
+=head2 getInputElement
+
+Returns the form element used for manual input.
+
+=cut
+
+sub getInputElement {
+	my $self = shift;
+
+	return WebGUI::Form::integer($self->session, {
+		name	=> $self->get('name'),
+		value	=> $self->get('value'),
+		size	=> $self->get('size'),
+		id	=> 'view-'.$self->get('id'),
+	});
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeInputElement
+
+Returns the javascript code to update the slider and other form elements on a
+change of the imput element.
+
+=cut
+
+sub getOnChangeInputElement {
+	my $self = shift;
+	
+	return $self->getSliderVariable.'.setValue(parseInt(this.value));'.
+		$self->getDisplayVariable.'.innerHTML = this.value;';
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeSlider
+
+Returns the javascript code to update the form on a change of slider position.
+
+=cut
+
+sub getOnChangeSlider {
+	my $self = shift;
+	
+	return $self->getInputVariable.'.value = this.getValue();'.
+		$self->getDisplayVariable.'.innerHTML = this.getValue();';
+}
+
+#-------------------------------------------------------------------
+
+=head2 getValueFromPost ( )
+
+Retrieves a value from a form GET or POST and returns it. If the value comes back as undef, this method will return the defaultValue instead.  Strip newlines/carriage returns from the value.
+
+=cut
+
+sub getValueFromPost {
+	my $self = shift;
+
+	my $properties = {
+		name	=> $self->get('name'),
+		value	=> $self->get('value'),
+		size	=> $self->get('size'),
+		id	=> 'view-'.$self->get('id'),
+	};
+
+	return WebGUI::Form::integer->new($self->session, $properties)->getValueFromPost;
+}
+
+1;
+

lib/WebGUI/Form/SelectSlider.pm

@@ -0,0 +1,195 @@
+package WebGUI::Form::SelectSlider;
+
+=head1 LEGAL
+
+ -------------------------------------------------------------------
+  WebGUI is Copyright 2001-2006 Plain Black Corporation.
+ -------------------------------------------------------------------
+  Please read the legal notices (docs/legal.txt) and the license
+  (docs/license.txt) that came with this distribution before using
+  this software.
+ -------------------------------------------------------------------
+  http://www.plainblack.com                     info@plainblack.com
+ -------------------------------------------------------------------
+
+=cut
+
+use strict;
+use base 'WebGUI::Form::Slider';
+use WebGUI::International;
+
+=head1 NAME
+
+Package WebGUI::Form::HexSlider
+
+=head1 DESCRIPTION
+
+Creates a slider control that controls hex values, as in the red, gree, blue values for HTML colors.
+
+=head1 SEE ALSO
+
+This is a subclass of WebGUI::Form::Control.
+
+=head1 METHODS 
+
+The following methods are specifically available from this class. Check the superclass for additional methods.
+
+=cut
+
+sub definition {
+	my $class = shift;
+	my $session = shift;
+	my $definition = shift || [];
+	my $i18n = WebGUI::International->new($session);
+	push(@{$definition}, {
+		formName=>{
+			defaultValue=> $i18n->get("select slider")
+			},
+		options =>{
+			defaultValue=>{},
+			},
+		value	=>{
+			defaultValue=>[],
+		},
+		profileEnabled=>{
+			defaultValue=>1
+			},
+		});
+        return $class->SUPER::definition($session, $definition);
+}
+
+#-------------------------------------------------------------------
+=head2 getDisplayValue
+
+Returns the value that should be displayed initially.
+
+=cut
+
+sub getDisplayValue {
+	my $self = shift;
+
+	return $self->get('options')->{$self->get('value')->[0]};
+}
+
+#-------------------------------------------------------------------
+=head2 getInputElement
+
+Returns the form element used for manual input.
+
+=cut
+
+sub getInputElement {
+	my $self = shift;
+
+	return WebGUI::Form::selectList($self->session, {
+		-name	=> $self->get('name'),
+		-value	=> $self->get('value'),
+		-options=> $self->get('options'),
+		-id	=> 'view-'.$self->get('id'),
+		-size	=> 1,
+	});
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeInputElement
+
+Returns the javascript code to update the slider and other form elements on a
+change of the imput element.
+
+=cut
+
+sub getOnChangeInputElement {
+	my $self = shift;
+	
+	return 
+		$self->getSliderVariable.'.setValue(this.selectedIndex);'.
+		$self->getDisplayVariable.'.innerHTML = this.options[this.selectedIndex].text;';
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeSlider
+
+Returns the javascript code to update the form on a change of slider position.
+
+=cut
+
+sub getOnChangeSlider {
+	my $self = shift;
+	
+	return 
+		$self->getInputVariable.'.selectedIndex = this.getValue();'.
+		$self->getDisplayVariable.'.innerHTML = '.$self->getInputVariable.'.options[this.getValue()].text;';
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMaximum
+
+Returns the maximum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMaximum {
+	my $self = shift;
+
+	return scalar(keys %{$self->get('options')}) - 1;
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMinimum
+
+Returns the minimum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMinimum {
+	my $self = shift;
+
+	return '0';
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderValue
+
+Returns the initial position of the slider in slider units.
+
+=cut
+
+sub getSliderValue {
+	my $self = shift;
+
+	my @keys = keys %{$self->get('options')};
+	for (my $i = 0; $i < @keys; $i++) {
+		return $i if $keys[$i] eq $self->get('value')->[0];
+	}
+
+	return undef;
+}
+
+#-------------------------------------------------------------------
+
+=head2 getValueFromPost ( )
+
+Retrieves a value from a form GET or POST and returns it. If the value comes
+back as undef, this method will return the defaultValue instead. Strip
+newlines/carriage returns from the value.
+
+=cut
+
+sub getValueFromPost {
+	my $self = shift;
+
+	my $properties =  {
+		-name	=> $self->get('name'),
+		-value	=> $self->get('value'),
+		-options=> $self->get('options'),
+		-id	=> 'view-'.$self->get('id'),
+		-size	=> 1,
+	};
+
+	return WebGUI::Form::selectList->new($self->session, $properties)->getValueFromPost;
+}
+
+
+
+1;
+

lib/WebGUI/Form/Slider.pm

@@ -0,0 +1,332 @@
+package WebGUI::Form::Slider;
+
+=head1 LEGAL
+
+ -------------------------------------------------------------------
+  WebGUI is Copyright 2001-2006 Plain Black Corporation.
+ -------------------------------------------------------------------
+  Please read the legal notices (docs/legal.txt) and the license
+  (docs/license.txt) that came with this distribution before using
+  this software.
+ -------------------------------------------------------------------
+  http://www.plainblack.com                     info@plainblack.com
+ -------------------------------------------------------------------
+
+=cut
+
+use strict;
+use base 'WebGUI::Form::Control';
+use WebGUI::International;
+
+=head1 NAME
+
+Package WebGUI::Form::Slider
+
+=head1 DESCRIPTION
+
+Abstract base class for slider controls. It cannot be used just by itself.
+You must overload some of the methods.
+
+=head1 SEE ALSO
+
+This is a subclass of WebGUI::Form::Control.
+
+=head1 METHODS 
+
+The following methods are specifically available from this class. Check the superclass for additional methods.
+
+=cut
+
+#-------------------------------------------------------------------
+
+=head2 definition ( [ additionalTerms ] )
+
+See the super class for additional details.
+
+=head3 additionalTerms
+
+The following additional parameters have been added via this sub class.
+
+=head4 maximum
+
+Defaults to "100". The maximum that the slider can go to.
+
+=head4 minimum
+
+Defaults to "0". The minimum value that the slider can go to.
+
+=head4 editable
+
+Defaults to 1. Setting this option to 0 will hide the input element tied to the 
+slider.
+
+=head4 profileEnabled
+
+Flag that tells the User Profile system that this is a valid form element in a User Profile
+
+=cut
+
+sub definition {
+	my $class = shift;
+	my $session = shift;
+	my $definition = shift || [];
+	my $i18n = WebGUI::International->new($session);
+	push(@{$definition}, {
+		formName=>{
+			defaultValue=> "No name",
+			},
+		maximum=>{
+			defaultValue=> "100",
+			},
+		minimum=>{
+			defaultValue=> "0",
+			},
+		editable=>{
+			defaultValue=> "1",
+			},
+		profileEnabled=>{
+			defaultValue=>0,
+			},
+		});
+        return $class->SUPER::definition($session, $definition);
+}
+
+#-------------------------------------------------------------------
+=head2 getDisplayValue
+
+Returns the value that should be displayed initially.
+
+=cut
+
+sub getDisplayValue {
+	my $self = shift;
+
+	return $self->get('value');
+}
+
+#-------------------------------------------------------------------
+=head2 getDisplayVariable
+
+Returns the javascript variable for the td element used for display of the
+slider value.
+
+=cut
+
+sub getDisplayVariable {
+	my $self = shift;
+
+	my $uniqueness = $self->get('id');
+	$uniqueness =~ s/-/\$/g;
+	
+	return 'd_'.$uniqueness;
+}
+
+#-------------------------------------------------------------------
+=head2 getInputElement
+
+Returns the form element used for manual input. You must overload this method.
+
+=cut
+
+sub getInputElement {
+	my $self = shift;
+
+	$self->session->errorHandler->fatal("Subclasses of WebGUI::Form::Session must overload getInputElement");
+}
+
+#-------------------------------------------------------------------
+=head2 getInputVariable
+
+Returns the javascript variable for the input element tied to the slider.
+
+=cut
+
+sub getInputVariable {
+	my $self = shift;
+
+	my $uniqueness = $self->get('id');
+	$uniqueness =~ s/-/\$/g;
+	
+	return 'i_'.$uniqueness;
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeInputElement
+
+This method should return the javascript code that should be executed on an
+onchange event of the input element. This should at the very least include
+updating the slider. 
+
+You must overload this method.
+
+For examples see any WebGUI::Form object that in herits
+from this class. For instance WebGUI::Form::SelectSlider.
+
+=cut
+
+sub getOnChangeInputElement {
+	my $self = shift;
+
+	$self->session->errorHandler->fatal("Subclasses of WebGUI::Form::Session must overload getOnChangeInputElement");
+}
+
+#-------------------------------------------------------------------
+=head2 getOnChangeSlider
+
+This method should return the javascript code that should be executed on an
+onchange event of the slider. This should at the very least include
+updating the input element and the display table cell. 
+
+You must overload this method.
+
+For examples see any WebGUI::Form object that in herits
+from this class. For instance WebGUI::Form::SelectSlider.
+
+=cut
+
+sub getOnChangeSlider {
+	my $self = shift;
+	
+	$self->session->errorHandler->fatal("Subclasses of WebGUI::Form::Session must overload getOnChangeSlider");
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMaximum
+
+Returns the maximum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMaximum {
+	my $self = shift;
+
+	return $self->get('maximum');
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderMinimum
+
+Returns the minimum value the slider can be set to in slider units.
+
+=cut
+
+sub getSliderMinimum {
+	my $self = shift;
+
+	return $self->get('minimum');
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderValue
+
+Returns the initial position of the slider in slider units.
+
+=cut
+
+sub getSliderValue {
+	my $self = shift;
+
+	return $self->get('value');
+}
+
+#-------------------------------------------------------------------
+=head2 getSliderVariable
+
+Returns the javascript variable for the slider.
+
+=cut
+
+sub getSliderVariable {
+	my $self = shift;
+
+	my $uniqueness = $self->get('id');
+	$uniqueness =~ s/-/\$/g;
+	
+	return 's_'.$uniqueness;
+}
+
+#-------------------------------------------------------------------
+
+=head2 toHtml ( )
+
+Renders an input tag of type text.
+
+=cut
+
+sub toHtml {
+	my $self = shift;
+	$self->session->style->setScript($self->session->url->extras("slider/js/range.js"), {type=>"text/javascript"});
+	$self->session->style->setScript($self->session->url->extras("slider/js/timer.js"), {type=>"text/javascript"});
+	$self->session->style->setScript($self->session->url->extras("slider/js/slider.js"), {type=>"text/javascript"});
+	$self->session->style->setLink($self->session->url->extras("slider/css/bluecurve/bluecurve.css"), {rel=>"stylesheet", type=>"text/css"});
+
+	# We need to make the variables unique because javascript does not have block scope. Also js cannot 
+	# have dashes in identifiers, so we convert those to dollars, which are allowed in identifiers.
+	my $uniqueness = $self->get('id');
+	$uniqueness =~ s/-/\$/g;
+	
+	my $output = '<table border="0"><tr>';
+
+	# Slider
+	$output .= '<td><div class="slider" id="'.$self->get('id').'" '.$self->get("extras").' tabindex="1">';
+	$output .= WebGUI::Form::hidden($self->session, {
+		-name	=> 'slider-'.$self->get('name'),
+		-value	=> $self->get('value'),
+		-id	=> $self->get('id').'-input',
+		-extras	=> 'class="slider-input"',
+	});
+	$output .= '</div></td>';
+	
+	if ($self->get('editable')) {
+		# Form element
+		$output .= '<td>'.$self->getInputElement.'</td>';
+
+		# Display box
+		$output .= '<td style="display : none;" id="text-'.$self->get('id').'">';
+		$output .= $self->getDisplayValue;
+		$output .= '</td>';
+	} else {
+		# Form element
+		$output .= '<td style="display : none;">'.$self->getInputElement.'</td>';
+
+		# Display box
+		$output .= '<td id="text-'.$self->get('id').'">';
+		$output .= $self->getDisplayValue;
+		$output .= '</td>';
+	}
+	
+	$output .= '</tr></table>';
+
+	# Javascript
+	my $input = $self->getInputVariable;
+	my $display = $self->getDisplayVariable;
+	my $slider = $self->getSliderVariable;
+	my $id = $self->get('id');
+	
+	$output .= '<script type="text/javascript">';
+	$output .= qq|
+		var $input = document.getElementById('view-$id');
+		var $display = document.getElementById('text-$id');
+		var sliderEl_$uniqueness = document.getElementById ? document.getElementById('$id') : null;
+		var inputEl_$uniqueness = document.forms[0]['$id-input'];
+		var $slider = new Slider(sliderEl_$uniqueness, inputEl_$uniqueness);
+		
+		$slider.setMaximum('|.$self->getSliderMaximum.qq|');
+		$slider.setMinimum('|.$self->getSliderMinimum.qq|');
+		$slider.setValue('|.$self->getSliderValue.qq|');
+		
+		$slider.onchange = function () {|.
+			$self->getOnChangeSlider.qq|;
+		};
+
+		$input.onchange = function () {|.
+			$self->getOnChangeInputElement.qq|;
+		};
+	|;
+	$output .= '</script>';
+
+	return $output;
+}
+
+1;
+

lib/WebGUI/Operation/Graphics.pm

@@ -5,6 +5,7 @@ use WebGUI::Image::Palette;
 use WebGUI::Image::Color;
 use WebGUI::Image::Font;
 use WebGUI::Storage;
+use Tie::IxHash;
 
 #-------------------------------------------------------------------
 sub _submenu {
@@ -30,7 +31,7 @@ sub _submenu {
 #### hoverhelp
 #-------------------------------------------------------------------
 sub _getColorForm {
-	my ($f, $color);
+	my ($f, $color, %hoppa);
 	my $session = shift;
 	my $colorId = shift;
 
@@ -38,6 +39,14 @@ sub _getColorForm {
 	
 	$color = WebGUI::Image::Color->new($session, $colorId);
 
+	# Create transparencies in 5% increments
+	tie %hoppa, 'Tie::IxHash';
+	$hoppa{'00'} = 'Opaque';
+	for (1 .. 19) {
+		$hoppa{unpack('H*', pack('C', $_*255/20))} = 5*$_.'% Transparent';
+	}
+	$hoppa{'ff'} = 'Invisible';
+
 	my $f = WebGUI::HTMLForm->new($session);
 	$f->text(
 		-name	=> 'colorName',
@@ -51,11 +60,13 @@ sub _getColorForm {
 		-maxlength => 7,
 		-size	=> 7,
 	);
-	$f->hexSlider(
+	$f->selectSlider(
 		-name	=> 'fillAlpha',
-		-value	=> $color->getFillAlpha,
+		-value	=> [ $color->getFillAlpha ],
+		-options=> \%hoppa, 
 		-label	=> $i18n->get('fill alpha'),
 		-maxlength => 2,
+		-editable=>0,
 		-size	=> 2,
 	);
 	$f->color(
@@ -65,11 +76,13 @@ sub _getColorForm {
 		-maxlength => 7,
 		-size	=> 7,
 	);
-	$f->text(
+	$f->selectSlider(
 		-name	=> 'strokeAlpha',
-		-value	=> $color->getStrokeAlpha,
+		-value	=> [ $color->getStrokeAlpha ],
+		-options=> \%hoppa,
 		-label	=> $i18n->get('stroke alpha'),
 		-maxlength => 2,
+		-editable => 0,
 		-size	=> 2,
 	);
 

lib/WebGUI/i18n/English/WebGUI.pm

@@ -3947,6 +3947,25 @@ Get a copy of wget and use this: <code>wget -p -r --html-extension -k http://the
 		lastUpdated => 1145658316,
 	},
 
+	'hex slider' => {
+		message => q|Hex slider|,
+		lastUpdated => 0,
+	},
+
+	'int slider' => {
+		message => q|Int slider|,
+		lastUpdated => 0,
+	},
+
+	'select slider' => {
+		message => q|Select slider|,
+		lastUpdated => 0,
+	},
+
+	'hexadecimal' => {
+		message => q|Hexadecimal|,
+		lastUpdated => 0,
+	},
 
 };