From 12c10d56fe8597d86cff32041f622081bded31a6 Mon Sep 17 00:00:00 2001 From: JT Smith Date: Wed, 3 May 2006 14:36:48 +0000 Subject: [PATCH] hex slider --- lib/WebGUI/Form/HexSlider.pm | 131 +++++ www/extras/slider/api.html | 91 ++++ www/extras/slider/css/bluecurve/bluecurve.css | 80 +++ .../css/bluecurve/handle.horizontal.png | Bin 0 -> 286 bytes .../slider/css/bluecurve/handle.vertical.png | Bin 0 -> 352 bytes .../slider/css/bluecurve/horizontal.gif | Bin 0 -> 1242 bytes www/extras/slider/css/bluecurve/vertical.gif | Bin 0 -> 345 bytes www/extras/slider/css/boxsizing.htc | 157 ++++++ .../css/luna/handle.horizontal.hover.png | Bin 0 -> 440 bytes .../slider/css/luna/handle.horizontal.png | Bin 0 -> 443 bytes .../slider/css/luna/handle.vertical.hover.png | Bin 0 -> 395 bytes .../slider/css/luna/handle.vertical.png | Bin 0 -> 398 bytes www/extras/slider/css/luna/luna.css | 75 +++ .../slider/css/swing/handle.horizontal.png | Bin 0 -> 288 bytes .../slider/css/swing/handle.vertical.png | Bin 0 -> 271 bytes www/extras/slider/css/swing/swing.css | 82 +++ www/extras/slider/css/winclassic.css | 99 ++++ www/extras/slider/demo.html | 152 ++++++ www/extras/slider/implementation.html | 119 ++++ www/extras/slider/js/range.js | 147 +++++ www/extras/slider/js/slider.js | 506 ++++++++++++++++++ www/extras/slider/js/timer.js | 78 +++ www/extras/slider/local/helptip.css | 38 ++ www/extras/slider/local/helptip.js | 215 ++++++++ www/extras/slider/local/title-background.png | Bin 0 -> 1467 bytes www/extras/slider/local/webfxapi.css | 41 ++ www/extras/slider/local/webfxapi.js | 20 + www/extras/slider/local/webfxlayout.css | 1 + www/extras/slider/local/webfxlayout.js | 111 ++++ www/extras/slider/rgbdemo.html | 178 ++++++ www/extras/slider/slider.html | 161 ++++++ 31 files changed, 2482 insertions(+) create mode 100644 lib/WebGUI/Form/HexSlider.pm create mode 100755 www/extras/slider/api.html create mode 100755 www/extras/slider/css/bluecurve/bluecurve.css create mode 100755 www/extras/slider/css/bluecurve/handle.horizontal.png create mode 100755 www/extras/slider/css/bluecurve/handle.vertical.png create mode 100755 www/extras/slider/css/bluecurve/horizontal.gif create mode 100755 www/extras/slider/css/bluecurve/vertical.gif create mode 100755 www/extras/slider/css/boxsizing.htc create mode 100755 www/extras/slider/css/luna/handle.horizontal.hover.png create mode 100755 www/extras/slider/css/luna/handle.horizontal.png create mode 100755 www/extras/slider/css/luna/handle.vertical.hover.png create mode 100755 www/extras/slider/css/luna/handle.vertical.png create mode 100755 www/extras/slider/css/luna/luna.css create mode 100755 www/extras/slider/css/swing/handle.horizontal.png create mode 100755 www/extras/slider/css/swing/handle.vertical.png create mode 100755 www/extras/slider/css/swing/swing.css create mode 100755 www/extras/slider/css/winclassic.css create mode 100755 www/extras/slider/demo.html create mode 100755 www/extras/slider/implementation.html create mode 100755 www/extras/slider/js/range.js create mode 100755 www/extras/slider/js/slider.js create mode 100755 www/extras/slider/js/timer.js create mode 100755 www/extras/slider/local/helptip.css create mode 100755 www/extras/slider/local/helptip.js create mode 100755 www/extras/slider/local/title-background.png create mode 100755 www/extras/slider/local/webfxapi.css create mode 100755 www/extras/slider/local/webfxapi.js create mode 100755 www/extras/slider/local/webfxlayout.css create mode 100755 www/extras/slider/local/webfxlayout.js create mode 100755 www/extras/slider/rgbdemo.html create mode 100755 www/extras/slider/slider.html diff --git a/lib/WebGUI/Form/HexSlider.pm b/lib/WebGUI/Form/HexSlider.pm new file mode 100644 index 000000000..181662a89 --- /dev/null +++ b/lib/WebGUI/Form/HexSlider.pm @@ -0,0 +1,131 @@ +package WebGUI::Form::HexSlider; + +=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::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 + +#------------------------------------------------------------------- + +=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 "ff". The maximum that the slider can go to. + +=head4 minimum + +Defaults to "00". The minimum value that the slider can go to. + +=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("475") + }, + maximum=>{ + defaultValue=> "ff", + }, + minimum=>{ + defaultValue=> "00", + }, + profileEnabled=>{ + defaultValue=>1 + }, + }); + return $class->SUPER::definition($session, $definition); +} + +#------------------------------------------------------------------- + +=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 $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 = '
get("extras").' tabindex="1"> + +
'; + return $output; +} + +1; + diff --git a/www/extras/slider/api.html b/www/extras/slider/api.html new file mode 100755 index 000000000..faabea972 --- /dev/null +++ b/www/extras/slider/api.html @@ -0,0 +1,91 @@ + + + + +Slider API (WebFX) + + + + + + + +
+ + + +

Timer

+ Object Oriented Encapsulation of setTimeout +

Syntax

+ + new Timer([nPauseTime])

Parameters

NameTypeDescripton
nPauseTimeNumberOptional. + The time (in milliseconds) before the timer should be triggered once started. + + The default value is 1000. +

Static Methods

NameDescription
None.

Static Fields

NameTypeDescripton
None.

Methods

NameDescription
getPauseTime

Syntax

object.getPauseTime()

Arguments

No Arguments.

Return Type

Number

Returns the pause time (in milliseconds) used to wait once started before triggering the event
isStarted

Syntax

object.isStarted()

Arguments

No Arguments.

Return Type

Boolean

Returns whether the timer is started
setPauseTime

Syntax

object.setPauseTime(nPauseTime)

Arguments

NameTypeDescripton
nPauseTimeNumberThe time to pause

Return Type

void

Sets the time (in milliseconds) to pause before triggering the event
start

Syntax

object.start()

Arguments

No Arguments.

Return Type

void

Starts the timer
stop

Syntax

object.stop()

Arguments

No Arguments.

Return Type

void

Stops the timer if previously started

Fields

NameTypeDescripton
None.

Events

NameDescripton
ontimerFires nPauseTime milliseconds after started

Remarks

+ None. +

Range

+ Used to model the data used when working with sliders, scrollbars and progress bars. + Based on the ideas of the javax.swing.BoundedRangeModel interface defined by Sun for Java + (http://java.sun.com/products/jfc/swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html). +

Syntax

+ + new Range()

Parameters

NameTypeDescripton
No parameters.

Static Methods

NameDescription
None.

Static Fields

NameTypeDescripton
None.

Methods

NameDescription
getExtent

Syntax

object.getExtent()

Arguments

NameTypeDescripton

Return Type

Number

Returns the extent of the range
getMaximum

Syntax

object.getMaximum()

Arguments

NameTypeDescripton

Return Type

Number

Returns the maximum allowed value
getMinimum

Syntax

object.getMinimum()

Arguments

NameTypeDescripton

Return Type

Number

Returns the minimum value
getValue

Syntax

object.getValue()

Arguments

NameTypeDescripton

Return Type

Number

Returns the current value of the range
setExtent

Syntax

object.setExtent(nExtent)

Arguments

NameTypeDescripton
nExtentNumberThe extent of the value

Return Type

void

Sets the extent of the range
setMaximum

Syntax

object.setMaximum(nMaximum)

Arguments

NameTypeDescripton
nMaximumNumberThe maximum value

Return Type

void

Sets the maximum allowed value
setMinimum

Syntax

object.setMinimum(nMinimum)

Arguments

NameTypeDescripton
nMinimumNumberThe minimum value

Return Type

void

Sets the minimum allowed value
setValue

Syntax

object.setValue(nValue)

Arguments

NameTypeDescripton
nValueNumberThe value for the range

Return Type

void

Sets the value for the range

Fields

NameTypeDescripton
None.

Events

NameDescripton
ontimerFires on the object nPauseTime milliseconds after started

Remarks

+ None. +

Slider

+ A slider control that allows the user to drag a handle to change the value that + is limited by a maximum value and a minimum value. +

Syntax

+ + new Slider(oElement, oInput [, sOrientation])

Parameters

NameTypeDescripton
oElementHTMLElementThe element acting as a slider
oInputHTMLInputElementThe input element used for backward compatibility and posting
sOrientationStringOptional. + The orientation of the slider. Valid values are "horizontal" and "vertical" + + The default value is horizontal. +

Static Methods

NameDescription
None.

Static Fields

NameTypeDescripton
isSupportedBooleanRead only. This value is true if the browser supports dynamic sliders

Methods

NameDescription
getBlockIncrement

Syntax

object.getBlockIncrement()

Arguments

NameTypeDescripton

Return Type

Number

Returns the amount used for large increments
getMaximum

Syntax

object.getMaximum()

Arguments

NameTypeDescripton

Return Type

Number

Returns the maximum value
getMinimum

Syntax

object.getMinimum()

Arguments

NameTypeDescripton

Return Type

Number

Returns the minimum value
getOrientation

Syntax

object.getOrientation()

Arguments

NameTypeDescripton

Return Type

String

Returns the orientation of the slider. Valid values are "horizontal" and + "vertical".
getUnitIncrement

Syntax

object.getUnitIncrement()

Arguments

NameTypeDescripton

Return Type

Number

Returns the amount used to do small increments
getValue

Syntax

object.getValue()

Arguments

NameTypeDescripton

Return Type

Number

Returns the value of the slider
ontimer

Syntax

object.ontimer()

Arguments

NameTypeDescripton

Return Type

void

Called when the timer used when holding down the mouse button is fired
recalculate

Syntax

object.recalculate()

Arguments

NameTypeDescripton

Return Type

void

Recalculates the position and size of the sub elements to make ensure the + layout is correct. Use this message after the slider has been resized.
setBlockIncrement

Syntax

object.setBlockIncrement(nBlockIncrement)

Arguments

NameTypeDescripton
nBlockIncrementNumberThe block increment value

Return Type

void

Sets the amounf to increment the value for large increments. This value is + used when using the page up and page down keys to change the value as well as when + holding down the mouse on the slider (but not dragging the handle).
setMaximum

Syntax

object.setMaximum(nMaximum)

Arguments

NameTypeDescripton
nMaximumNumberThe maximum value

Return Type

void

Sets the maximum allowed value for the slider
setMinimum

Syntax

object.setMinimum(nMinimum)

Arguments

NameTypeDescripton
nMinimumNumberThe minimum value

Return Type

void

Sets the minimum allowed value for the slider
setOrientation

Syntax

object.setOrientation(sOrientation)

Arguments

NameTypeDescripton
sOrientationStringThe orientation to use

Return Type

EDIT_THIS

Sets the orientation of the slider. Valid values are "horizontal" and + "vertical".
setUnitIncrement

Syntax

object.setUnitIncrement(nUnitIncrement)

Arguments

NameTypeDescripton
nUnitIncrementNumberThe unit increment value

Return Type

void

Sets the amount to increment the value for small increments. This value is + used when using the arrow keys to change the value
setValue

Syntax

object.setValue(nValue)

Arguments

NameTypeDescripton
nValueNumberThe value to set

Return Type

void

Sets the value of the slider

Fields

NameTypeDescripton
classNameTagStringThe extra string to add to the class name for a dynamic slider. This property + is used to allow specific CSS rules to distinguish between static sliders and dynamic. + This property should not be changed after any sliders have been created.

Events

NameDescripton
onchangeThis event is fired when the value of the slider has changed

Remarks

+ None. +

+ +

+Slider
+Implementation
+API
+Demo
+Download +

+ +

Author: Erik Arvidsson

+ + +
+ + + diff --git a/www/extras/slider/css/bluecurve/bluecurve.css b/www/extras/slider/css/bluecurve/bluecurve.css new file mode 100755 index 000000000..01e3a56da --- /dev/null +++ b/www/extras/slider/css/bluecurve/bluecurve.css @@ -0,0 +1,80 @@ +/* + back: rgb(230,230,230) + dark: rgb(90,97,90) + medium rgb(189,190,189) + */ + +.dynamic-slider-control { + position: relative; + background-color: rgb(230,230,230); + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 31px; + height: 14px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover {} + +.dynamic-slider-control.vertical .handle { + width: 15px; + height: 31px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid rgb(90,97,90); + background: rgb(189,190,189); + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 3px; +} + +.dynamic-slider-control.horizontal .line { + height: 3px; +} + +.dynamic-slider-control .line div { + width: 1px; + height: 1px; + + border: 1px solid; + border-color: rgb(230,230,230) rgb(189,190,189) + rgb(189,190,189) rgb(230,230,230); +} \ No newline at end of file diff --git a/www/extras/slider/css/bluecurve/handle.horizontal.png b/www/extras/slider/css/bluecurve/handle.horizontal.png new file mode 100755 index 0000000000000000000000000000000000000000..d9dc7ff91becca2a4cc827906769183501baa3cc GIT binary patch literal 286 zcmeAS@N?(olHy`uVBq!ia0vp^@<7bT!3-oH{4zHMQY`6?zK#qG>ra@ocD)4hB}-f* zN`mv#O3D+9QW+dm@{>{(JaZG%Q-e|yQz{EjrrH1%i3a$Dxc>k3f6mM~XV0CDN{ssd z|NpaR&w%8Iaxr0`0``(1zhEF22pFWincaXwHJ&bxAr-fh5|WdT@!q(>z|_&$JCoHs zA&r?sfh|oe>`p_cq(TG7NoE#-Wj4xPHVzDmr<+qHBqv-kFa(NCvT=-MH8 Q3g`|7Pgg&ebxsLQ0Gml(82|tP literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/bluecurve/handle.vertical.png b/www/extras/slider/css/bluecurve/handle.vertical.png new file mode 100755 index 0000000000000000000000000000000000000000..0c00f85d0b1124d937cdc522c4d30942955f0b18 GIT binary patch literal 352 zcmeAS@N?(olHy`uVBq!ia0vp^{6H+v!3<*EOMeWcSkfJR9T^zbpD<_bdI{u9mbgZg z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-#;3h)VWoilUJ*>h*3Vx#{5|NrdS zGa#v=@QMW}%T^NP7YyY7|Ie^_|C0Sckwcy?jv*Ddk`hu=ofyKx8W@1ABsT^%Fe@p| zk-<%^fx+oHGmC(gyh6i;pA3vG=h!(EO6(jM7Jg=A;+V@X;80-4+ybNw?3j%~bbwvQ zX@*BY9WDINjGBJ{bzC^l69$xc@e8QI(|!h!>GA7eO#=hd=fq=-AS2g-%>D}0vgonp!HiQ(InJghIfU&2 zWjLjg14Rc8oFF(6;YJA#2Wv2)0fFNX&=@1o#HSMyKAvDv6A(`hTTjxh%eV8@Wd&|tuu zaRfoEz1HRA|0H60?&U9l$4ePdC<~7qEm9qY2*oE#e$bTucv4$de(H3^nX|ges&o44 zn)8MWwRIQk8!j0yH(qJF+T4Qw)cW%;*V@{zn>ucoJG(5uTDyB}T4LXC_Wpr^n?u7* zL=Zpv$JqG9_{c5Slwl;kGJewi_uUHOOx2ya`oa0f3;!-YdHU@6lKp{(9K7(Bpb5jb z5n=i+TT`{A2npS&6I`vassqR0rLr#qO^M1+L=!fLeSGM=UtrqJ<_mqNn7ey*!j@Y5 zS$3{C?ysxUNxYAISJ;I3#jTaFCoQ8FuOF_B^&*p*2OFxZx3q|Ji&M3|moqKLOsgDq zJM{4hB^f*MJ#^(u$#idJ`@@g{Tyy8{pL6T0CVAO03okZ3*_ZjL((C=tzkQPGwrVWD zpGdyeJkxi2-L`du#nRgY`k1`H`#JcU;m(xZsiqB4Ih&1Zt>yPO9K4_0!k8H;cs}$% zcq5eD6TP%`|Fo$f{K|oet@DWk(VNa~HnlCxjkfHW>^HS9K6F{sAzM1GKb^nx{o7nk z$BTLrHISA$XqIC{-!(jy>+l&U$Shz&8Jx&ecmhOw!NyAxTDvI#4<2TsXWQg+GsZ~*)b(A4UgT&n+Z zJ%PG-8OS^+Y?%yNg3Nrc?QN>b@}8w6+c|l|BYqicVv$SmaCw>ulA2UG_|UA^8wjZR z9l)Zc%qY@VrzaN{(pY1_|FeoO%6x21W^7;UYGr+$^LDsi;XQWA*wA>l20KoTw4ASZ z7ZpN6fXV$TN)%@Apa4O_3dVQuT{^iwku%feMccVoobiCe_ocLQXRGlKSaMG?JrnrX zO~?{_JWxd86MJYp9K<{_bK!eFa~48r)!8?X(Ic^3Y9ya3|ElGw)yzc*$u7MG+vb*& zNoeMmHahVZiAr)wx>SrF9ZU%)O_98}*o^c2af|on2e=+<9}gx5~m3K-iMgby3k4FecDV|k(iX|7kR!m&%&^PRr*ek;CTP$%QTh9N>> z$!rz~7NucIts0({f?=Y}ZY5ocmRs?otW?vX?3H)NuNA>^#UnYJK zdxAh;g%5y<3yThoh>vu7c9WEHlP{1BaGPwM43d47f0uRuq6>`6yOF)NauBn%nG{L{%FE2jQBKfMD@aF0KY`Xl*+e$l-P}1n+v4Bk;nn5n=hNfr zM(pYE>nGIm@AU2V*Y)`E{qrIC1D + + + + \ No newline at end of file diff --git a/www/extras/slider/css/luna/handle.horizontal.hover.png b/www/extras/slider/css/luna/handle.horizontal.hover.png new file mode 100755 index 0000000000000000000000000000000000000000..d2fd059d8e731a7ddca10b1cf485e0b9328e12c7 GIT binary patch literal 440 zcmeAS@N?(olHy`uVBq!ia0vp^+(0bK!3-pquY2+zNU@|l`Z_W&tUqDS+Vv91mn?CO zC<)F_D=AMbN@Z|N$xljE@XSq2PYp^-w4!^6EOCJ$rPdPwV5yw-+v)nZIe@r%&(p zoxZ$&|A_+|S{^SkXqYtb%J~CJrx(=r&AdBbzkSxSqUPTJ|Npm^uLHSLp(MyJ7|6v3 z7-C|i-vZTc@^ovNAJ=LGcD4+eliWVZu!Y#+EZ|911CB4h)K$8JRd{0yUh-X<%?l11jm! zWk>;1%^K1(PO6_c$tU2z$X5+xnc;iz{5QKH}lTd?i>ql=SXY^x}L$))z4*}Q$iB}k2$)~ literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/luna/handle.horizontal.png b/www/extras/slider/css/luna/handle.horizontal.png new file mode 100755 index 0000000000000000000000000000000000000000..b3af6bbff6f70f7d24218b97d5f2bed308340708 GIT binary patch literal 443 zcmeAS@N?(olHy`uVBq!ia0vp^+(0bK!3-pquY2+zNU@|l`Z_W&tUqDS+Vv91mn?CO zC<)F_D=AMbN@Z|N$xljE@XSq2PYp^sqR#6m^3e9M#lgD|5a9}Ob6PfP!i-94CLYi z3^6g%Z-HvJdb&71IlbJXa*ec@`*pED!&JJPzopr0KQ4Kvj6}9 literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/luna/handle.vertical.hover.png b/www/extras/slider/css/luna/handle.vertical.hover.png new file mode 100755 index 0000000000000000000000000000000000000000..379cdc29a2571efda1786e27aebe520ffee9cddf GIT binary patch literal 395 zcmeAS@N?(olHy`uVBq!ia0vp^k{~t*Gmy+KFuen$SkfJR9T^zbpD<_bdI?fc;u=vB zoS#-wo>-L1;Fyx1l&avFo0y&&l$w}QS$Hzl2B;_@z$e7@^XK>F9h0^mIs5hNr|;jt z96o&D&YhblCuu)gZ1C$~#Ia+Cf1fV-bs+Ta-J8cJXwBcW@AsLK-{)$6pDMh!K!4lO zv$cIQcdxGBclz@8&89WY^%b3y+h;9XzyHL=={h$rZ2SNJzxmDT2|&9PN`m}?fn0om zAtpxpEl_Q%r;B4q#jT_X;^K*iSd9LBVqiR?pr?MKiL>I!5=N#DN0)#ONnsC;ZYCB1 z=E)4|%xVu3(pfkZ*wpf5j2IYOqS+K03QjYy2;@~WFmY^`YhXx95PEb_k6FNh$H+!# zPtFO3Gn1cAW&-M{GfdPAOJR8S(bEWMSo5AO8p>)DlBTe87%&|A!+Pk-L1;Fyx1l&avFo0y&&l$w}QS$Hzl2B;_@z$e7@^XK>F9h0^mIs5hNr|;jt z+_`h}@ZkgUYh|TpOQl^&J$CG{$7wgWQ!YyT6z<-=S=%==d3{+$=j8dD_O;JiR@B_< zb=qUw(X$2D^7oy-yyoZu-}dN_AK%I@l)ioYM#|-+|NsBTH{6K@+NDquKMN;Xu=1Sv5v9#POgbH0O<#T95N55qi8)>YvTtk{5VV(@hJ Kb6Mw<&;$Tv`Kb*6 literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/luna/luna.css b/www/extras/slider/css/luna/luna.css new file mode 100755 index 000000000..9b1fb8dde --- /dev/null +++ b/www/extras/slider/css/luna/luna.css @@ -0,0 +1,75 @@ +.dynamic-slider-control { + position: relative; + background-color: ThreeDFace; + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 11px; + height: 21px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover { + background-image: url("handle.horizontal.hover.png"); +} + +.dynamic-slider-control.vertical .handle { + width: 25px; + height: 13px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover { + background-image: url("handle.vertical.hover.png"); +} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: ThreeDShadow ThreeDHighlight + ThreeDHighlight ThreeDShadow; + -moz-border-radius: 50%; + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 2px; +} + +.dynamic-slider-control.horizontal .line { + height: 2px; +} + +.dynamic-slider-control .line div { + display: none; +} \ No newline at end of file diff --git a/www/extras/slider/css/swing/handle.horizontal.png b/www/extras/slider/css/swing/handle.horizontal.png new file mode 100755 index 0000000000000000000000000000000000000000..6c7fb90bcfd5fcfa7b02b3f2853797e4cd07be5d GIT binary patch literal 288 zcmeAS@N?(olHy`uVBq!ia0vp^{6H+g!3-q-bzC(AQY`6?zK#qG>ra@ocD)4hB}-f* zN`mv#O3D+9QW+dm@{>{(JaZG%Q-e|yQz{EjrrH1%@dWsUxc>kDAILm&<_wV0m$vQ; z$gq+izhIEKgVstAzsu9bF{I*FQbL*w+ZhJNBL_}2@JKK+aU4lcN@_}UYhYmdG*iNn zha-)JLqR}ZkNXKTi@*&2@PkJ<1RP%c0xFEPcVKY5a+p!sfx*zgSgCj>BU4ACq-Vp# znUV?(4K+I$CYhjF7w SyH+^RRScf4elF{r5}E*LM_4NW literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/swing/handle.vertical.png b/www/extras/slider/css/swing/handle.vertical.png new file mode 100755 index 0000000000000000000000000000000000000000..ca1ac4a15f7bd57465821e4d7ab03d576ad93a78 GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~q!3-pCt=%sRq*&4&eH|GX)}JtE?Rp91OP07s zlmzFem6RtIr7}3CR literal 0 HcmV?d00001 diff --git a/www/extras/slider/css/swing/swing.css b/www/extras/slider/css/swing/swing.css new file mode 100755 index 000000000..e02ec7001 --- /dev/null +++ b/www/extras/slider/css/swing/swing.css @@ -0,0 +1,82 @@ +/* + dark rgb(102,102,102) + medium rgb(152,153,153) + gray: rgb(204,204,204) + bright: white; + */ + +.dynamic-slider-control { + position: relative; + background-color: rgb(204,204,204); + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 15px; + height: 16px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover {} + +.dynamic-slider-control.vertical .handle { + width: 16px; + height: 15px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: rgb(102,102,102) white + white rgb(102,102,102); + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 4px; +} + +.dynamic-slider-control.horizontal .line { + height: 4px; +} + +.dynamic-slider-control .line div { + width: 2px; + height: 2px; + + border: 1px solid; + border-color: rgb(152,153,153) rgb(102,102,102) + rgb(102,102,102) rgb(152,153,153); +} \ No newline at end of file diff --git a/www/extras/slider/css/winclassic.css b/www/extras/slider/css/winclassic.css new file mode 100755 index 000000000..068596dde --- /dev/null +++ b/www/extras/slider/css/winclassic.css @@ -0,0 +1,99 @@ +.dynamic-slider-control { + position: relative; + background-color: ThreeDFace; + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 29px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + -moz-user-select: none; + cursor: default; + background: ThreeDFace; + border: 1px solid; + border-color: ThreeDHighlight ThreeDDarkShadow + ThreeDDarkShadow ThreeDHighlight; +} + +/* inner border */ +.dynamic-slider-control .handle div { + font-size: 1px; + border: 1px solid; + border-color: ThreeDLightShadow ThreeDShadow + ThreeDShadow ThreeDLightShadow; + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} + +/* inner sets size +.dynamic-slider-control.horizontal .handle { + width: 12px; + height: 22px; +} +*/ + +.dynamic-slider-control.horizontal .handle div { + width: 8px; + height: 18px; +} + +.dynamic-slider-control.horizontal .handle.hover {} + +/* inner sets size +.dynamic-slider-control.vertical .handle { + width: 22px; + height: 12px; +} +*/ + +.dynamic-slider-control.vertical .handle div { + width: 18px; + height: 8px; +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; + + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: ThreeDShadow ThreeDHighlight + ThreeDHighlight ThreeDShadow; + background: ThreeDDarkShadow; +} + +.dynamic-slider-control.vertical .line { + width: 1px; + +} + +.dynamic-slider-control.horizontal .line { + height: 1px; +} + +.dynamic-slider-control .line div { + display: none; +} \ No newline at end of file diff --git a/www/extras/slider/demo.html b/www/extras/slider/demo.html new file mode 100755 index 000000000..aa7d532e6 --- /dev/null +++ b/www/extras/slider/demo.html @@ -0,0 +1,152 @@ + + + + +Slider Demo (WebFX) + + + + + + + + + + + + +

Horizontal

+
+ +
+ +

+Value: +Minimum: +Maximum: +

+ +

Vertical

+
+ +
+ + + +

+ + +  + +

+

+
+Color:  

+ + + + + diff --git a/www/extras/slider/implementation.html b/www/extras/slider/implementation.html new file mode 100755 index 000000000..0c60a5d9f --- /dev/null +++ b/www/extras/slider/implementation.html @@ -0,0 +1,119 @@ + + + + +Slider (WebFX) + + + + + + + + + + + + +
+ + +

Implementation

+ +

The slider implementation mostly consists of lots of event handlers that +sets the value depending on the event arguments.

+ +

Range

+ +

The data model is handled by a class called Range (also known as BoundedRangeModel). +This class has a few properties that fits perfectly with sliders, scrollbars and +progress bars. A range has a minimum value, a value, an extent and a maximum value. +The following is always true for a range object.

+ +
+minimum < value < value + extent < maximum
+
+ +

In the case of a slider the extent is always zero. Using a range for the data +model allows the implementation of the slider to concentrate on other things than +ensuring that the data model is valid.

+ +

Timer

+ +

For this implementation of the slider I decided to use an object oriented +abstraction of window.setTimeout. A timer from the Timer +class can be started and stopped and it fires a pseudo event called ontimer +a certain amount of milliseconds after the timer is started.

+ +
+Timer.prototype.start = function () {
+   if (this.isStarted())
+      this.stop();
+   var oThis = this;
+   this._timer = window.setTimeout(function () {
+      if (typeof oThis.ontimer == "function")
+         oThis.ontimer();
+   }, this._pauseTime);
+   this._isStarted = false;
+};
+
+Timer.prototype.stop = function () {
+   if (this._timer != null)
+      window.clearTimeout(this._timer);
+   this._isStarted = false;
+};
+
+ +

Slider

+ +

The slider consists of a line element and a handle element. The line is only +there for the visual effect. The handle on the other hand can be dragged and +thereby changing the value. When dragging the handle the position of the mouse +is used to calculate a new value for the data model. Once the value is changed +the layout for the slider is recalculated.

+ +

When the user holds down the mouse on the slider, but not on the handle, a +timer is started and every time the timer triggers the timer event +the value is changed by the blockIncrement towards the mouse +pointer.

+ +

The slider also allows the user to use the keyboard to change the value. This +is done by listening to the keydown (and keypress) +events. In the keydown handler the key is checked and the value for +the data model is updated accordingly. The reason for the keypress +handler is to disable the default actions in the browser.

+ +

+Slider
+Implementation
+API
+Demo
+Download +

+ +

Author: Erik Arvidsson

+ + +
+ + + diff --git a/www/extras/slider/js/range.js b/www/extras/slider/js/range.js new file mode 100755 index 000000000..1fd0c34fa --- /dev/null +++ b/www/extras/slider/js/range.js @@ -0,0 +1,147 @@ +/*----------------------------------------------------------------------------\ +| Range Class | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| Used to model the data used when working with sliders, scrollbars and | +| progress bars. Based on the ideas of the javax.swing.BoundedRangeModel | +| interface defined by Sun for Java. http://java.sun.com/products/jfc/ | +| swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html | | +|-----------------------------------------------------------------------------| +| Copyright (c) 1999 - 2002 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| This software is provided "as is", without warranty of any kind, express or | +| implied, including but not limited to the warranties of merchantability, | +| fitness for a particular purpose and noninfringement. In no event shall the | +| authors or copyright holders be liable for any claim, damages or other | +| liability, whether in an action of contract, tort or otherwise, arising | +| from, out of or in connection with the software or the use or other | +| dealings in the software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| This software is available under the three different licenses mentioned | +| below. To use this software you must chose, and qualify, for one of those. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Non-Commercial License http://webfx.eae.net/license.html | +| Permits anyone the right to use the software in a non-commercial context | +| free of charge. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Commercial license http://webfx.eae.net/commercial.html | +| Permits the license holder the right to use the software in a commercial | +| context. Such license must be specifically obtained, however it's valid for | +| any number of implementations of the licensed software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt | +| Permits anyone the right to use and modify the software without limitations | +| as long as proper credits are given and the original and modified source | +| code are included. Requires that the final product, software derivate from | +| the original source or any software utilizing a GPL component, such as | +| this, is also licensed under the GPL license. | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2002-10-14 | +\----------------------------------------------------------------------------*/ + + +function Range() { + this._value = 0; + this._minimum = 0; + this._maximum = 100; + this._extent = 0; + + this._isChanging = false; +} + +Range.prototype.setValue = function (value) { + value = parseInt(value); + if (isNaN(value)) return; + if (this._value != value) { + if (value + this._extent > this._maximum) + this._value = this._maximum - this._extent; + else if (value < this._minimum) + this._value = this._minimum; + else + this._value = value; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getValue = function () { + return this._value; +}; + +Range.prototype.setExtent = function (extent) { + if (this._extent != extent) { + if (extent < 0) + this._extent = 0; + else if (this._value + extent > this._maximum) + this._extent = this._maximum - this._value; + else + this._extent = extent; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getExtent = function () { + return this._extent; +}; + +Range.prototype.setMinimum = function (minimum) { + if (this._minimum != minimum) { + var oldIsChanging = this._isChanging; + this._isChanging = true; + + this._minimum = minimum; + + if (minimum > this._value) + this.setValue(minimum); + if (minimum > this._maximum) { + this._extent = 0; + this.setMaximum(minimum); + this.setValue(minimum) + } + if (minimum + this._extent > this._maximum) + this._extent = this._maximum - this._minimum; + + this._isChanging = oldIsChanging; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getMinimum = function () { + return this._minimum; +}; + +Range.prototype.setMaximum = function (maximum) { + if (this._maximum != maximum) { + var oldIsChanging = this._isChanging; + this._isChanging = true; + + this._maximum = maximum; + + if (maximum < this._value) + this.setValue(maximum - this._extent); + if (maximum < this._minimum) { + this._extent = 0; + this.setMinimum(maximum); + this.setValue(this._maximum); + } + if (maximum < this._minimum + this._extent) + this._extent = this._maximum - this._minimum; + if (maximum < this._value + this._extent) + this._extent = this._maximum - this._value; + + this._isChanging = oldIsChanging; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getMaximum = function () { + return this._maximum; +}; diff --git a/www/extras/slider/js/slider.js b/www/extras/slider/js/slider.js new file mode 100755 index 000000000..2abb01036 --- /dev/null +++ b/www/extras/slider/js/slider.js @@ -0,0 +1,506 @@ +/*----------------------------------------------------------------------------\ +| Slider 1.02 | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| A slider control that degrades to an input control for non supported | +| browsers. | +|-----------------------------------------------------------------------------| +| Copyright (c) 1999 - 2002 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| This software is provided "as is", without warranty of any kind, express or | +| implied, including but not limited to the warranties of merchantability, | +| fitness for a particular purpose and noninfringement. In no event shall the | +| authors or copyright holders be liable for any claim, damages or other | +| liability, whether in an action of contract, tort or otherwise, arising | +| from, out of or in connection with the software or the use or other | +| dealings in the software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| This software is available under the three different licenses mentioned | +| below. To use this software you must chose, and qualify, for one of those. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Non-Commercial License http://webfx.eae.net/license.html | +| Permits anyone the right to use the software in a non-commercial context | +| free of charge. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Commercial license http://webfx.eae.net/commercial.html | +| Permits the license holder the right to use the software in a commercial | +| context. Such license must be specifically obtained, however it's valid for | +| any number of implementations of the licensed software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt | +| Permits anyone the right to use and modify the software without limitations | +| as long as proper credits are given and the original and modified source | +| code are included. Requires that the final product, software derivate from | +| the original source or any software utilizing a GPL component, such as | +| this, is also licensed under the GPL license. | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +| 2003-03-27 | Added a test in the constructor for missing oElement arg | +| 2003-11-27 | Only use mousewheel when focused | +|-----------------------------------------------------------------------------| +| Dependencies: timer.js - an OO abstraction of timers | +| range.js - provides the data model for the slider | +| winclassic.css or any other css file describing the look | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2003-1-27 | +\----------------------------------------------------------------------------*/ + + +Slider.isSupported = typeof document.createElement != "undefined" && + typeof document.documentElement != "undefined" && + typeof document.documentElement.offsetWidth == "number"; + + +function Slider(oElement, oInput, sOrientation) { + if (!oElement) return; + this._orientation = sOrientation || "horizontal"; + this._range = new Range(); + this._range.setExtent(0); + this._blockIncrement = 10; + this._unitIncrement = 1; + this._timer = new Timer(100); + + + if (Slider.isSupported && oElement) { + + this.document = oElement.ownerDocument || oElement.document; + + this.element = oElement; + this.element.slider = this; + this.element.unselectable = "on"; + + // add class name tag to class name + this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className; + + // create line + this.line = this.document.createElement("DIV"); + this.line.className = "line"; + this.line.unselectable = "on"; + this.line.appendChild(this.document.createElement("DIV")); + this.element.appendChild(this.line); + + // create handle + this.handle = this.document.createElement("DIV"); + this.handle.className = "handle"; + this.handle.unselectable = "on"; + this.handle.appendChild(this.document.createElement("DIV")); + this.handle.firstChild.appendChild( + this.document.createTextNode(String.fromCharCode(160))); + this.element.appendChild(this.handle); + } + + this.input = oInput; + + // events + var oThis = this; + this._range.onchange = function () { + oThis.recalculate(); + if (typeof oThis.onchange == "function") + oThis.onchange(); + }; + + if (Slider.isSupported && oElement) { + this.element.onfocus = Slider.eventHandlers.onfocus; + this.element.onblur = Slider.eventHandlers.onblur; + this.element.onmousedown = Slider.eventHandlers.onmousedown; + this.element.onmouseover = Slider.eventHandlers.onmouseover; + this.element.onmouseout = Slider.eventHandlers.onmouseout; + this.element.onkeydown = Slider.eventHandlers.onkeydown; + this.element.onkeypress = Slider.eventHandlers.onkeypress; + this.element.onmousewheel = Slider.eventHandlers.onmousewheel; + this.handle.onselectstart = + this.element.onselectstart = function () { return false; }; + + this._timer.ontimer = function () { + oThis.ontimer(); + }; + + // extra recalculate for ie + window.setTimeout(function() { + oThis.recalculate(); + }, 1); + } + else { + this.input.onchange = function (e) { + oThis.setValue(oThis.input.value); + }; + } +} + +Slider.eventHandlers = { + + // helpers to make events a bit easier + getEvent: function (e, el) { + if (!e) { + if (el) + e = el.document.parentWindow.event; + else + e = window.event; + } + if (!e.srcElement) { + var el = e.target; + while (el != null && el.nodeType != 1) + el = el.parentNode; + e.srcElement = el; + } + if (typeof e.offsetX == "undefined") { + e.offsetX = e.layerX; + e.offsetY = e.layerY; + } + + return e; + }, + + getDocument: function (e) { + if (e.target) + return e.target.ownerDocument; + return e.srcElement.document; + }, + + getSlider: function (e) { + var el = e.target || e.srcElement; + while (el != null && el.slider == null) { + el = el.parentNode; + } + if (el) + return el.slider; + return null; + }, + + getLine: function (e) { + var el = e.target || e.srcElement; + while (el != null && el.className != "line") { + el = el.parentNode; + } + return el; + }, + + getHandle: function (e) { + var el = e.target || e.srcElement; + var re = /handle/; + while (el != null && !re.test(el.className)) { + el = el.parentNode; + } + return el; + }, + // end helpers + + onfocus: function (e) { + var s = this.slider; + s._focused = true; + s.handle.className = "handle hover"; + }, + + onblur: function (e) { + var s = this.slider + s._focused = false; + s.handle.className = "handle"; + }, + + onmouseover: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (e.srcElement == s.handle) + s.handle.className = "handle hover"; + }, + + onmouseout: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (e.srcElement == s.handle && !s._focused) + s.handle.className = "handle"; + }, + + onmousedown: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (s.element.focus) + s.element.focus(); + + Slider._currentInstance = s; + var doc = s.document; + + if (doc.addEventListener) { + doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true); + doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true); + } + else if (doc.attachEvent) { + doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove); + doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup); + doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup); + s.element.setCapture(); + } + + if (Slider.eventHandlers.getHandle(e)) { // start drag + Slider._sliderDragData = { + screenX: e.screenX, + screenY: e.screenY, + dx: e.screenX - s.handle.offsetLeft, + dy: e.screenY - s.handle.offsetTop, + startValue: s.getValue(), + slider: s + }; + } + else { + var lineEl = Slider.eventHandlers.getLine(e); + s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0); + s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0); + s._increasing = null; + s.ontimer(); + } + }, + + onmousemove: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + + if (Slider._sliderDragData) { // drag + var s = Slider._sliderDragData.slider; + + var boundSize = s.getMaximum() - s.getMinimum(); + var size, pos, reset; + + if (s._orientation == "horizontal") { + size = s.element.offsetWidth - s.handle.offsetWidth; + pos = e.screenX - Slider._sliderDragData.dx; + reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100; + } + else { + size = s.element.offsetHeight - s.handle.offsetHeight; + pos = s.element.offsetHeight - s.handle.offsetHeight - + (e.screenY - Slider._sliderDragData.dy); + reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100; + } + s.setValue(reset ? Slider._sliderDragData.startValue : + s.getMinimum() + boundSize * pos / size); + return false; + } + else { + var s = Slider._currentInstance; + if (s != null) { + var lineEl = Slider.eventHandlers.getLine(e); + s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0); + s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0); + } + } + + }, + + onmouseup: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = Slider._currentInstance; + var doc = s.document; + if (doc.removeEventListener) { + doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true); + doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true); + } + else if (doc.detachEvent) { + doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove); + doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup); + doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup); + s.element.releaseCapture(); + } + + if (Slider._sliderDragData) { // end drag + Slider._sliderDragData = null; + } + else { + s._timer.stop(); + s._increasing = null; + } + Slider._currentInstance = null; + }, + + onkeydown: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + //var s = Slider.eventHandlers.getSlider(e); + var s = this.slider; + var kc = e.keyCode; + switch (kc) { + case 33: // page up + s.setValue(s.getValue() + s.getBlockIncrement()); + break; + case 34: // page down + s.setValue(s.getValue() - s.getBlockIncrement()); + break; + case 35: // end + s.setValue(s.getOrientation() == "horizontal" ? + s.getMaximum() : + s.getMinimum()); + break; + case 36: // home + s.setValue(s.getOrientation() == "horizontal" ? + s.getMinimum() : + s.getMaximum()); + break; + case 38: // up + case 39: // right + s.setValue(s.getValue() + s.getUnitIncrement()); + break; + + case 37: // left + case 40: // down + s.setValue(s.getValue() - s.getUnitIncrement()); + break; + } + + if (kc >= 33 && kc <= 40) { + return false; + } + }, + + onkeypress: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var kc = e.keyCode; + if (kc >= 33 && kc <= 40) { + return false; + } + }, + + onmousewheel: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (s._focused) { + s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement()); + // windows inverts this on horizontal sliders. That does not + // make sense to me + return false; + } + } +}; + + + +Slider.prototype.classNameTag = "dynamic-slider-control", + +Slider.prototype.setValue = function (v) { + this._range.setValue(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getValue = function () { + return this._range.getValue(); +}; + +Slider.prototype.setMinimum = function (v) { + this._range.setMinimum(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getMinimum = function () { + return this._range.getMinimum(); +}; + +Slider.prototype.setMaximum = function (v) { + this._range.setMaximum(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getMaximum = function () { + return this._range.getMaximum(); +}; + +Slider.prototype.setUnitIncrement = function (v) { + this._unitIncrement = v; +}; + +Slider.prototype.getUnitIncrement = function () { + return this._unitIncrement; +}; + +Slider.prototype.setBlockIncrement = function (v) { + this._blockIncrement = v; +}; + +Slider.prototype.getBlockIncrement = function () { + return this._blockIncrement; +}; + +Slider.prototype.getOrientation = function () { + return this._orientation; +}; + +Slider.prototype.setOrientation = function (sOrientation) { + if (sOrientation != this._orientation) { + if (Slider.isSupported && this.element) { + // add class name tag to class name + this.element.className = this.element.className.replace(this._orientation, + sOrientation); + } + this._orientation = sOrientation; + this.recalculate(); + + } +}; + +Slider.prototype.recalculate = function() { + if (!Slider.isSupported || !this.element) return; + + var w = this.element.offsetWidth; + var h = this.element.offsetHeight; + var hw = this.handle.offsetWidth; + var hh = this.handle.offsetHeight; + var lw = this.line.offsetWidth; + var lh = this.line.offsetHeight; + + // this assumes a border-box layout + + if (this._orientation == "horizontal") { + this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) / + (this.getMaximum() - this.getMinimum()) + "px"; + this.handle.style.top = (h - hh) / 2 + "px"; + + this.line.style.top = (h - lh) / 2 + "px"; + this.line.style.left = hw / 2 + "px"; + //this.line.style.right = hw / 2 + "px"; + this.line.style.width = Math.max(0, w - hw - 2)+ "px"; + this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px"; + } + else { + this.handle.style.left = (w - hw) / 2 + "px"; + this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) / + (this.getMaximum() - this.getMinimum()) + "px"; + + this.line.style.left = (w - lw) / 2 + "px"; + this.line.style.top = hh / 2 + "px"; + this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width + //this.line.style.bottom = hh / 2 + "px"; + this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width + } +}; + +Slider.prototype.ontimer = function () { + var hw = this.handle.offsetWidth; + var hh = this.handle.offsetHeight; + var hl = this.handle.offsetLeft; + var ht = this.handle.offsetTop; + + if (this._orientation == "horizontal") { + if (this._mouseX > hl + hw && + (this._increasing == null || this._increasing)) { + this.setValue(this.getValue() + this.getBlockIncrement()); + this._increasing = true; + } + else if (this._mouseX < hl && + (this._increasing == null || !this._increasing)) { + this.setValue(this.getValue() - this.getBlockIncrement()); + this._increasing = false; + } + } + else { + if (this._mouseY > ht + hh && + (this._increasing == null || !this._increasing)) { + this.setValue(this.getValue() - this.getBlockIncrement()); + this._increasing = false; + } + else if (this._mouseY < ht && + (this._increasing == null || this._increasing)) { + this.setValue(this.getValue() + this.getBlockIncrement()); + this._increasing = true; + } + } + + this._timer.start(); +}; \ No newline at end of file diff --git a/www/extras/slider/js/timer.js b/www/extras/slider/js/timer.js new file mode 100755 index 000000000..c6688ca63 --- /dev/null +++ b/www/extras/slider/js/timer.js @@ -0,0 +1,78 @@ +/*----------------------------------------------------------------------------\ +| Timer Class | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| Object Oriented Encapsulation of setTimeout fires ontimer when the timer | +| is triggered. Does not work in IE5.00 | +|-----------------------------------------------------------------------------| +| Copyright (c) 1999 - 2002 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| This software is provided "as is", without warranty of any kind, express or | +| implied, including but not limited to the warranties of merchantability, | +| fitness for a particular purpose and noninfringement. In no event shall the | +| authors or copyright holders be liable for any claim, damages or other | +| liability, whether in an action of contract, tort or otherwise, arising | +| from, out of or in connection with the software or the use or other | +| dealings in the software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| This software is available under the three different licenses mentioned | +| below. To use this software you must chose, and qualify, for one of those. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Non-Commercial License http://webfx.eae.net/license.html | +| Permits anyone the right to use the software in a non-commercial context | +| free of charge. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Commercial license http://webfx.eae.net/commercial.html | +| Permits the license holder the right to use the software in a commercial | +| context. Such license must be specifically obtained, however it's valid for | +| any number of implementations of the licensed software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt | +| Permits anyone the right to use and modify the software without limitations | +| as long as proper credits are given and the original and modified source | +| code are included. Requires that the final product, software derivate from | +| the original source or any software utilizing a GPL component, such as | +| this, is also licensed under the GPL license. | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2002-10-14 | +\----------------------------------------------------------------------------*/ + +function Timer(nPauseTime) { + this._pauseTime = typeof nPauseTime == "undefined" ? 1000 : nPauseTime; + this._timer = null; + this._isStarted = false; +} + +Timer.prototype.start = function () { + if (this.isStarted()) + this.stop(); + var oThis = this; + this._timer = window.setTimeout(function () { + if (typeof oThis.ontimer == "function") + oThis.ontimer(); + }, this._pauseTime); + this._isStarted = false; +}; + +Timer.prototype.stop = function () { + if (this._timer != null) + window.clearTimeout(this._timer); + this._isStarted = false; +}; + +Timer.prototype.isStarted = function () { + return this._isStarted; +}; + +Timer.prototype.getPauseTime = function () { + return this._pauseTime; +}; + +Timer.prototype.setPauseTime = function (nPauseTime) { + this._pauseTime = nPauseTime; +}; \ No newline at end of file diff --git a/www/extras/slider/local/helptip.css b/www/extras/slider/local/helptip.css new file mode 100755 index 000000000..7ec71d7bb --- /dev/null +++ b/www/extras/slider/local/helptip.css @@ -0,0 +1,38 @@ +/* + Notice that IE has a display problem if the help link is on + the last line of a container with no padding. If this is the + case increase the padding bottom to at least 1px +*/ + +a.helpLink { + color: Green; + text-decoration: none; + border-bottom: 1px dashed Green; + cursor: help; +} + +a.helpLink:hover { + color: Red; + text-decoration: none; + border-bottom: 1px dashed Red; +} + +.help-tooltip { + position: absolute; + width: 250px; + border: 1px Solid WindowFrame; + background: Infobackground; + color: InfoText; + font: StatusBar; + font: Status-Bar; + padding: 3px; + filter: progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3); + z-index: 10000; +} + + +.help-tooltip a, +.help-tooltip a:hover { + color: blue !important; + background: none; +} diff --git a/www/extras/slider/local/helptip.js b/www/extras/slider/local/helptip.js new file mode 100755 index 000000000..a75ddf9c2 --- /dev/null +++ b/www/extras/slider/local/helptip.js @@ -0,0 +1,215 @@ +/*----------------------------------------------------------------------------\ +| Help Tip 1.1 | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| A tool tip like script that can be used for context help | +|-----------------------------------------------------------------------------| +| Copyright (c) 1999 - 2002 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| This software is provided "as is", without warranty of any kind, express or | +| implied, including but not limited to the warranties of merchantability, | +| fitness for a particular purpose and noninfringement. In no event shall the | +| authors or copyright holders be liable for any claim, damages or other | +| liability, whether in an action of contract, tort or otherwise, arising | +| from, out of or in connection with the software or the use or other | +| dealings in the software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| This software is available under the three different licenses mentioned | +| below. To use this software you must chose, and qualify, for one of those. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Non-Commercial License http://webfx.eae.net/license.html | +| Permits anyone the right to use the software in a non-commercial context | +| free of charge. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| The WebFX Commercial license http://webfx.eae.net/commercial.html | +| Permits the license holder the right to use the software in a commercial | +| context. Such license must be specifically obtained, however it's valid for | +| any number of implementations of the licensed software. | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt | +| Permits anyone the right to use and modify the software without limitations | +| as long as proper credits are given and the original and modified source | +| code are included. Requires that the final product, software derivate from | +| the original source or any software utilizing a GPL component, such as | +| this, is also licensed under the GPL license. | +|-----------------------------------------------------------------------------| +| 2002-09-27 | | +| 2001-11-25 | Added a resize to the tooltip if the document width is too | +| | small. | +| 2002-05-19 | IE50 did not recognise the JS keyword undefined so the test | +| | for scroll support was updated to be IE50 friendly. | +| 2002-07-06 | Added flag to hide selects for IE | +| 2002-10-04 | (1.1) Restructured and made code more IE garbage collector | +| | friendly. This solved the most nasty memory leaks. Also added | +| | support for hiding the tooltip if ESC is pressed. | +|-----------------------------------------------------------------------------| +| Dependencies: helptip.css (To set up the CSS of the help-tooltip class) | +|-----------------------------------------------------------------------------| +| Usage: | +| | +| | +| | +| | +| Help | +|-----------------------------------------------------------------------------| +| Created 2001-09-27 | All changes are in the log above. | Updated 2002-10-04 | +\----------------------------------------------------------------------------*/ + +function showHelpTip(e, sHtml, bHideSelects) { + + // find anchor element + var el = e.target || e.srcElement; + while (el.tagName != "A") + el = el.parentNode; + + // is there already a tooltip? If so, remove it + if (el._helpTip) { + helpTipHandler.hideHelpTip(el); + } + + helpTipHandler.hideSelects = Boolean(bHideSelects); + + // create element and insert last into the body + helpTipHandler.createHelpTip(el, sHtml); + + // position tooltip + helpTipHandler.positionToolTip(e); + + // add a listener to the blur event. + // When blurred remove tooltip and restore anchor + el.onblur = helpTipHandler.anchorBlur; + el.onkeydown = helpTipHandler.anchorKeyDown; +} + +var helpTipHandler = { + hideSelects: false, + + helpTip: null, + + showSelects: function (bVisible) { + if (!this.hideSelects) return; + // only IE actually do something in here + var selects = []; + if (document.all) + selects = document.all.tags("SELECT"); + var l = selects.length; + for (var i = 0; i < l; i++) + selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden"; + }, + + create: function () { + var d = document.createElement("DIV"); + d.className = "help-tooltip"; + d.onmousedown = this.helpTipMouseDown; + d.onmouseup = this.helpTipMouseUp; + document.body.appendChild(d); + this.helpTip = d; + }, + + createHelpTip: function (el, sHtml) { + if (this.helpTip == null) { + this.create(); + } + + var d = this.helpTip; + d.innerHTML = sHtml; + d._boundAnchor = el; + el._helpTip = d; + return d; + }, + + // Allow clicks on A elements inside tooltip + helpTipMouseDown: function (e) { + var d = this; + var el = d._boundAnchor; + + if (!e) e = event; + var t = e.target || e.srcElement; + while (t.tagName != "A" && t != d) + t = t.parentNode; + if (t == d) return; + + el._onblur = el.onblur; + el.onblur = null; + }, + + helpTipMouseUp: function () { + var d = this; + var el = d._boundAnchor; + el.onblur = el._onblur; + el._onblur = null; + el.focus(); + }, + + anchorBlur: function (e) { + var el = this; + helpTipHandler.hideHelpTip(el); + }, + + anchorKeyDown: function (e) { + if (!e) e = window.event + if (e.keyCode == 27) { // ESC + helpTipHandler.hideHelpTip(this); + } + }, + + removeHelpTip: function (d) { + d._boundAnchor = null; + d.style.filter = "none"; + d.innerHTML = ""; + d.onmousedown = null; + d.onmouseup = null; + d.parentNode.removeChild(d); + //d.style.display = "none"; + }, + + hideHelpTip: function (el) { + var d = el._helpTip; + d.style.visibility = "hidden"; + d.style.top = - el.offsetHeight - 100 + "px" + d._boundAnchor = null; + + el.onblur = null; + el._onblur = null; + el._helpTip = null; + el.onkeydown = null; + + this.showSelects(true); + }, + + positionToolTip: function (e) { + this.showSelects(false); + var scroll = this.getScroll(); + var d = this.helpTip; + + var dw = (window.innerWidth || document.documentElement.offsetWidth) - 25; + if (d.offsetWidth >= dw) + d.style.width = dw - 10 + "px"; else + d.style.width = ""; + if (e.clientX > dw - d.offsetWidth) + d.style.left = dw - d.offsetWidth + scroll.x + "px"; + else + d.style.left = e.clientX - 2 + scroll.x + "px"; + d.style.top = e.clientY + 18 + scroll.y + "px"; + + d.style.visibility = "visible"; + }, + + // returns the scroll left and top for the browser viewport. + getScroll: function () { + if (document.all && typeof document.body.scrollTop != "undefined") { // IE model + var ieBox = document.compatMode != "CSS1Compat"; + var cont = ieBox ? document.body : document.documentElement; + return {x : cont.scrollLeft, y : cont.scrollTop}; + } + else { + return {x : window.pageXOffset, y : window.pageYOffset}; + } + + } + +}; \ No newline at end of file diff --git a/www/extras/slider/local/title-background.png b/www/extras/slider/local/title-background.png new file mode 100755 index 0000000000000000000000000000000000000000..39487d5f454b1da11c3d12b1eebe92bd31d5dcf3 GIT binary patch literal 1467 zcmb7EeN<9s7{8F92%M1`87CW+uBf{*vkyCF;QT_Q5MfERGcfODw7yJRt+w$o$+VVs zP@B<41*zpxLbj8AETnQqox=sn2hJHC$B==AgkjLS30HCpL6`^DR^=B0%XBTAc z{HWklSv~}Ca(CuHOzw7B9wdZhx%+qDhT_p6n;=7!j37u?7hHeG*V{X4ygYoe3I25u z=^aAquEMu|nYjN9*>wUwdLF*m0*{O%miEbm2KYb&vZD$vZ-A>?kgw`S$GyHv^YGBn zs{t5syS=Bbd0&holdqA>4v+FI?43kjjv;-0o+1_d=0hml8rATAet`o~wzcfEI>Al=;~=GHOmPacnF@^CHO zcpbLg8-wAAh}2Fq+P{jM#1ZXt9c;Z5tY(K31=BkP_Z=|-ysh-m4_bM(%n@JXj3;02 z?vh08T-x1hE_q5y6|d{LxwoFaG`jUjLazC4-ypd1{K?|)m-FbBs1M6+E7Zq=MYS*L zBd3X;wF<>$DO-y7G;E*fo_M}M8BLqNh+UDJLOk+FwKlOioYH?`SucK(hbE;qC6XxS zTB|f%4$#09)Ay+L=&ZpUY2Ue&~42tDZ%w$e4PNw92Il0P}mp~h{FW15?q7?J*s{SLM0C|whY zMbpwG`T3eCbV;KM>E?6|{(-F00^p0iEM7HhXyr>5MYC5!xYEm<@6c1Z+XyZ%EG(1`GTQw&^Bu>_)Icjo zj~&uX;4YUil`qjtnXA$;R;aL!Fn#MBf0Zd&bP|?>SzyZi!*xN?nQR>!PJNLc955VW?Ov z7TASFotii-?V6Adetc1(U?>4{JS5q)Nu3w`?p&bSV)%K@mY(LDEyuC44Z=!7Jj5vl z#ZkICd9fmtXx<>su+ApBrs+E+dY%zP#1>qwFPfT-p9y!kYoh; zA|NBdt%J6axx(3HMcGc>Eiz8C_)UlLL)pwa<H%#HctT+vA>o`WLj7aK7|5aU zW|vzsWJ&_Dhecj#mjYGzm&{OYz8~Rlp`m)iDEogds?MO9Ya!KwIYUE%8?mC-m_X;= z_n#RdMM>v!wzP5UMjt z7m-L~mA*{`WvovYo|~GfJvdC8jFH-*OU8zWSv>HsF6X3$P2IQcxgS*SG=cIB9eOf} zQiOpSp_Yh*?%HR_X)oQtD=Xd>Hn&(C5kNGpUr~ x2;%r@9z&ap^;mrl9PgPiFZ0n`zoVd1U^MI-{hp1+>*$Xa;3lt6YDko-{{nnlb65ZX literal 0 HcmV?d00001 diff --git a/www/extras/slider/local/webfxapi.css b/www/extras/slider/local/webfxapi.css new file mode 100755 index 000000000..bff581c7d --- /dev/null +++ b/www/extras/slider/local/webfxapi.css @@ -0,0 +1,41 @@ +/* This style sheet is used for WebFX Api pages */ a.helpLink, +a.helpLink:hover { + color: rgb(0,66,174); + border-bottom-color:rgb(0,66,174); +} + +.help-tooltip { + width: auto; +} + +.help-tooltip h4, +.help-tooltip table, +.help-tooltip p { + width: auto; +} + +.methodContainer { + display: none; +} + +.methodInfo h4, +.methodInfo thead td { + font-size: 13px; + background: none; + border-bottom: 0; +} + +.methodInfo h4, +.methodInfo p, +.methodInfo table { + margin: 5px; + padding: 0; +} + +td { + vertical-align: top; +} + +td code { + white-space: nowrap; +} \ No newline at end of file diff --git a/www/extras/slider/local/webfxapi.js b/www/extras/slider/local/webfxapi.js new file mode 100755 index 000000000..32962f858 --- /dev/null +++ b/www/extras/slider/local/webfxapi.js @@ -0,0 +1,20 @@ +/* + * This script is used for WebFX Api pages + * + * It defines one funtion and includes helptip.js, helptip.css and webfxapi.css + */ + +document.write( " + + + + + + +++++ + + + + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+ +
+
+ + + + + + + + + + + + + diff --git a/www/extras/slider/slider.html b/www/extras/slider/slider.html new file mode 100755 index 000000000..9a8cfc2f7 --- /dev/null +++ b/www/extras/slider/slider.html @@ -0,0 +1,161 @@ + + + + +Slider (WebFX) + + + + + + + + + + + + +
+ + +

+2002-10-07: First public version released +

+ +

Introduction

+ +

Sliders are useful controls for choosing a value in a range of values. +Common uses are volume controls, seekers for movie and sound files as well +as color pickers. A few people have asked for an update to the old +Slidebar +component to make it work in Mozilla and work better in IE. But since the +original control was very basic and was not very usable I decided to +create a new one.

+ +
+
+ +
+
+ + + +

When starting with the new slider a few main features where kept in mind:

+ +
    +
  • Degrade gracefully for browser without the needed DOM support. This is + achieved by using a basic text input as the base for the control. In case + the browser does not support the needed features then the input can be used + in the normal way.
    • +
  • Full mouse support. Lots of slider controls does not support anything beyond dragging + the handle. The goal was to allow the user to be able to both drag the handle + and hold down the mouse anywhere on the slider to move the handle towards the + mouse.
    • +
  • Full keyboard support. Once the slider is focused the arrow keys and Page Up / + Page Down can be used to change the value.
    • +
  • Mouse wheel support where available.
    • +
  • Skinable using different CSS files.
    • +
+ +

Requirements

+ +

The slider works in any browser but the GUI component works in +browsers with simple DOM level 1 support with one IE extended proprietary property. +That property is offsetWidth (and offsetHeight) and this is +known to be supported by IE5+, Mozilla 1.0+, Konqueror 3+ and it is assumed other future +browsers will support this as well because it has become a de facto standard.

+ +

Usage

+ +

To use the slider we have to include a few JS files and a CSS file.

+ +
+<script type="text/javascript" src="js/range.js"></script>
+<script type="text/javascript" src="js/timer.js"></script>
+<script type="text/javascript" src="js/slider.js"></script>
+<link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
+
+ +

Then we need to define the HTML to use for the slider. Something like this:

+ +
+<div class="slider" id="slider-1" tabIndex="1">
+   <input class="slider-input" id="slider-input-1"
+      name="slider-input-1"/>
+</div>
+
+ +

After this we have to create the JS object that handles the logic. If we only +plan to use this in pages and applications that you know will support the dynamic +slider control we can use the following script block. This should be placed directly +after the slider div.

+ +
+<script type="text/javascript">
+
+var s = new Slider(document.getElementById("slider-1"),
+                   document.getElementById("slider-input-1"));
+
+</script>
+
+ +

If we however cannot guarantee that all user uses browsers that support +document.getElementById we should use document.forms +to find the input and test whether document.getElementById is +defined.

+ +
+<script type="text/javascript">
+
+var sliderEl = document.getElementById ?
+                  document.getElementById("slider-1") : null;
+var inputEl = document.forms[0]["slider-input-1"];
+var s = new Slider(sliderEl, inputEl);
+
+</script>
+
+ +

+Slider
+Implementation
+API
+Demo
+Download +

+ +

Author: Erik Arvidsson

+ + +
+ + +