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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

332
lib/WebGUI/Form/Slider.pm Normal file
View file

@ -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;