Adding sliders

This commit is contained in:
Martin Kamerbeek 2006-05-08 09:35:34 +00:00
parent 5d0ad1f6fb
commit 96ac393a11
8 changed files with 973 additions and 40 deletions

View file

@ -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};
}
}
#-------------------------------------------------------------------
=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"});
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;
my $properties = {
name => $self->get('name'),
value => $self->get('value'),
size => $self->get('size'),
id => 'view-'.$self->get('id'),
};
return WebGUI::Form::hexadecimal->new($self->session, $properties)->getValueFromPost;
}
1;