darth-fader.js adds a customizable
onfade event
to any specified <input type=range>
element in a page;
listen for and handle the event like any other
include the script, then add a stop-point list
of fade arrays in a data-param, and listen for the
default fade event;
the following is a simple example
<script src="darth-fader.js"></script>
<div id="sampleDiv"></div>
<input id="fader0" type="range" data-fade="
color : [
'rgb(255, 255, 0)', 0,
'rgb(255, 0, 0)', 0.25,
'rgb(255, 255, 255)', 0.50,
'rgb( 0, 255, 255)', 0.75,
'rgb(255, 0, 255)', 1
],
size : [
' 20px', 0,
'100px', 0.5,
'380px', 1
]
"/>
<script>
fader0.addEventListener('fade',
(e, vals=e.detail) => {
sampleDiv.style.backgroundColor = vals.color;
sampleDiv.style.width = vals.size;
}
);
</script>
the
event.detail of the fade event contains
a property for every listed fade in that input element
- for example, if you create a fade called 'height'
you would access the current interpolated value
from the handler's
event.detail.height property
each <input> element contains a list
of arrays to fade through;
they are specified as a
name for
that array, followed by a
colon,
then an array in
hard-brackets;
the array consists of string-percent pairs:
a
string for the desired value, and a
float percent as the stop-point
for that value
name : ['value', %, 'value', %, ... ]
values are entered as a string
in
single quotes - any numbers will
be extracted from the string and converted
to actual numbers - separate arrays with a comma
every fade added to the input's param also
creates an <input type="hidden">
element that will get submitted with the form -
the hidden input will be assigned an
id
that is the darth-fader input's id, combined by an
underscore to the fade's name
in the above example,
fader0 created
two hidden inputs, one named
fader0_color and another with the id
fader0_size; besides being submitted
with any form, the current value of a fade
can also be accessed from the darth-fader's
hidden inputs
there are many different options which may
be configured -
darth-fader.js itself
has defaults that may be overwritten by
the script tag's
data-param;
any options may also be specified by the
individual darth-fader's
data-param
let's take a look at an example of that
<!--
options in the script tag data-parameter
become defaults for all darth-fader elements
here they are being set to what the default
values would be anyway, just so that you
can see what those values are
-->
<script src="darth-fader.js" data-fade="
selector : 'fade',
eventName : 'fade',
thumb : false,
snap : false,
steps : false,
fix : false,
ignore : false
"></script>
<!--
options can be overwritten in the element
-->
<input id="faderX" type="range"
data-fade="
price : ['$200', 0, '$1800', 1],
colors : [
'rgb(200, 100, 0)', 0,
'rgb(225, 175, 0)', 0.25,
'rgb(255, 255, 255)', 0.5,
'rgb(200, 0, 200)', 0.75,
'rgb(100, 0, 100)', 1
],
"
data-fade-opts="
eventName : 'faderXevent',
thumb : 'colors',
fix : 2
"
/>
alright, this will fade between several different
colors, aswell as between the prices of
two hundred dollars and
eighteen hundred dollars - but what do
all of these options mean?
- selector : this is what needs to follow
data- in the parameter in order for
darth-fader.js to recognize the element
as a darth fader; by default, anything with
<input data-fade> will be selected;
it can be any string
- eventName : the name of the event that
handlers need to listen for - by default, this is
also fade; in the example, faderX
has changed only its specific event's name to
faderXevent
- thumb : designates, by string,
the name of the fade that should be used to
color the thumb of the slider element;
in this example, the colors fade is
being used to color the thumb - this can also
be the boolean value true, in which case
darth-fader.js will color the thumb
using default colors
- snap : this is the string
name of the fade whose values you would like
the slider to snap at - darth-fader.js
will create a datalist element and use
that to snap the slider to the apropos values
denoted by the percentage stop-points of the fade
- steps : if, for some reason, you would
like the slider to move only in discreet steps,
set this value to the string name of
a fade and the slider will only move in as many
steps as there are percent-values in that fade;
alternatively, set this value to an integer
number of steps
- fix : if you want all numerically fadded
values to be only a fixed number of decimal places
long, enter the integer that specifies how
many decimal places each numerical value should have;
in this example, faderX has indicated
two decimal places, likely because of the
price fader using monetary values
- ignore : by default, all fades listed
in the data-param have a hidden input
element automatically created for them - these
hidden inputs are, ofcourse, form elements whose
values will get submitted if you use a darth-fader
in a form - this string is a comma-separated
list of the names of any fades for which you do NOT
want to have a hidden input element
there is a
minified version
that, for now, is just automatically minified by an
online minifier - eventually, there ought to be a more terse
version, intentionally designed to be as small as possible
if you are happy with the defaults, you can simply
include the
darth-fader.js script, label any
inputs with a
data-fade or
data-fade-opts parameter,
and write handlers for the
fade event
<script src="darth-fader.js"></script>
<input data-fade-opts="thumb:true,steps:5">
darth-fader.js will look for any <input>
that has either
data-fade or
data-fade-opts;
if the only information given is the
thumb:true option, the script automatically
creates a thumb-coloring slider
~queviva