before it's created
*/
SLIDER_TEMPLATE = '' +
'
';
/*
Returns the lowest common divisor for all the arguments. Ignores any
zero params.
*/
function greatestCommonDivisor(/* numbers */) {
var i = 0,
len = arguments.length,
r,
b;
// get first non-zero param
while ( !(r = arguments[i++]) && (i < len) );
for (; i < len; i++) {
b = arguments[i];
// ignore zeros
if (!b) { continue; }
while (1) {
r = r % b;
if (!r) {
r = b;
break;
}
b = b % r;
if (!b) {
break;
}
}
}
return r;
}
// closure for Ruler
(function() {
var vocabs = [
{
containerClassNamePart: "ruler",
length: "width",
pos: "left"
},
{
containerClassNamePart: "vRuler",
length: "height",
pos: "top"
}
];
/*
container - where to insert the ruler
opts.min - start val
opts.max - end val
opts.tickMajor - interval for major ticks
opts.tickMinor - interval for minor ticks
opts.labels - as with slider
opts.labelMapper - function which takes a label string and returns a new string. For adding stuff like % to the end
opts.vertical - vertical ruler
opts.reverse - makes the right / bottom of the ruler the start
opts.id - id on element
opts.className - additional class names for element
*/
Ruler = function(container, opts) {
container = $(container);
// assign default options
opts = glow.lang.apply({
size: 300,
min: 0,
max: 100
}, opts);
var vocab = vocabs[!!opts.vertical * 1],
// major tick template, this should be cloned before use
tickMajorElm = glow.dom.create('
'),
// minor tick template, this should be cloned before use
tickMinorElm = glow.dom.create('
'),
// label template, this should be cloned before use
labelElm = glow.dom.create('
'),
// labels converted into a number. This will be NaN for objects
labelInterval = Number(opts.labels),
// this is the largest incement we can use to loop
divisor = greatestCommonDivisor(opts.tickMajor, opts.tickMinor, labelInterval),
// percent position
percentPos,
// tmp holder for an element
tmpElm,
// a couple of shortcuts
reverse = opts.reverse,
// difference between max & min
size = opts.max - opts.min,
// container element
element,
// labels container
labelsElm,
// a tmp clone of the label elm
labelElmClone,
// looping vars
labelPos,
i = opts.min;
// create element
this.element = element = glow.dom.create('
');
labelsElm = element.get('div.ruler-labels');
// add custom ID / Class names
element[0].id = opts.id || "";
element[0].className += " " + (opts.className || "");
for (; i <= opts.max; i += divisor) {
// work out which pixel position we're dealing with
percentPos = ((i - opts.min) / size) * 100;
percentPos = reverse ? 100 - percentPos : percentPos;
// vocab.pos is top or left
if ( opts.tickMajor && !((i - opts.min) % opts.tickMajor) ) {
// place a major tick
tickMajorElm.clone().css(vocab.pos, percentPos + "%").appendTo(element);
} else if ( opts.tickMinor && !((i - opts.min) % opts.tickMinor) ) {
// place a minor tick
tickMinorElm.clone().css(vocab.pos, percentPos + "%").appendTo(element);
}
if (labelInterval && !((i - opts.min) % labelInterval)) {
// place a label
labelElmClone = labelElm.clone().css(vocab.pos, percentPos + "%");
// set the value as a property of the element
labelElmClone[0]._labelVal = i;
// set the html of the inner span. We pass the label through labelMapper if it exists
labelElmClone.get('span').html( opts.labelMapper ? opts.labelMapper(i) : i );
// add to labels
labelsElm.append(labelElmClone);
}
}
// right, our labels are set per position
if (!labelInterval) {
for (labelPos in opts.labels) {
// work out which pixel position we're dealing with
percentPos = ((Number(labelPos) - opts.min) / size) * 100;
percentPos = reverse ? 100 - percentPos : percentPos;
if (percentPos <= 100) {
// place a label
labelElmClone = labelElm.clone().css(vocab.pos, percentPos + "%");
// set the value as a property of the element
labelElmClone[0]._labelVal = Number(labelPos);
// set the html of the inner span. We pass the label through labelMapper if it exists
labelElmClone.get('span').html( opts.labelMapper ? opts.labelMapper(opts.labels[labelPos]) : opts.labels[labelPos] );
// add to labels
labelsElm.append(labelElmClone);
}
}
}
// place it in the document
container.append(element);
};
})();
/*
This returns either the horizontal or vertical vocab.
A lot of lines are the same for a horizonal & vertical sliders
aside from a couple of keywords. The vocabs cater for these
keywords.
*/
function getVocab(slider) {
return vocabs[!!slider._opts.vertical * 1];
}
/*
This adjusts size the active / inactive part of the slider, according to the handle position
*/
function adjustTracks(slider) {
var vocab = getVocab(slider);
// size the active / inactive part of the slider
// trackToChange is _trackOnElm or _trackOffElm, length is width or height
slider[vocab.trackToChange][0].style[vocab.length] = parseInt(slider._handleElm[0].style[vocab.pos]) + (slider._handleSize / 2) + "px";
}
/*
This is called as the mouse moves when the slider is being dragged
*/
function handleMouseMove() {
adjustTracks(this);
if (this._opts.changeOnDrag) {
var newVal = valueForHandlePos(this);
change(this, newVal);
(this._boundInput[0] || {}).value = newVal;
}
}
/*
This is called when the user interacts with the slider using keyboard (keydown)
*/
function handleKeyNav(event) {
var vocab = getVocab(this),
that = this,
nudgeAmount;
if (lastKeyDown == "prevented") {
// this is a repeat of a prevented slideStart, just exit
return false;
} else if (lastKeyDown != event.key) {
// this isn't a repeating keydown event, it's a new slide
// if lastKeyDown isn't null, key-sliding has changed direction but not actually restarting
if (!lastKeyDown && slideStart(this).defaultPrevented()) {
lastKeyDown = "prevented"; //this allows us to pick up repeats
return false;
}
nudgeAmount = (event.key == 'UP' || event.key == 'RIGHT') ? 1 : -1;
// set up repeating
// cancel any existing repeating
clearInterval(keyRepeater);
keyRepeater = setTimeout(function() {
keyRepeater = setInterval(function() {
nudge(that, nudgeAmount);
}, 40);
}, 500);
// do the initial nudge
nudge(that, nudgeAmount);
// we use this to know which keyup to react to
lastKeyDown = event.key;
}
return false;
}
/*
This is called when the user stops interacting with keyboard (keyup)
*/
function handleKeyNavEnd(event) {
if (lastKeyDown == event.key) {
// if lastKeyDown != event.key, sliding hasn't actually finished
lastKeyDown = null;
// cancel any existing repeating
clearInterval(keyRepeater);
// stop sliding
slideStop(this);
}
}
/*
Called when the back / fwd button is pressed down
*/
function handleButtonDown(event) {
if ( !this._disabled && !slideStart(this).defaultPrevented() ) {
//work out which button was pressed
var nudgeAmount = event.attachedTo.className.indexOf("-fwd") != -1 ? 1 : -1,
that = this;
//nudge slider
nudge(this, nudgeAmount);
//set the action to repeat
nudgeButtonRepeater = setTimeout(function() {
nudgeButtonRepeater = setInterval(function() {
nudge(that, nudgeAmount);
}, 40);
}, 500);
}
return false;
}
/*
Called when the back / fwd button is released (or mouse out)
*/
function handleButtonUp(event) {
if (nudgeButtonRepeater) {
clearTimeout(nudgeButtonRepeater);
clearInterval(nudgeButtonRepeater);
nudgeButtonRepeater = null;
slideStop(this);
}
return false;
}
/*
Move the slider by a step. Used by the nudge buttons and keyboard events.
stepsToNudge = number of steps to nudge
*/
function nudge(slider, stepsToNudge) {
// if the step is zero, we step by a pixel
var changeBy = (slider._opts.step || (1 / slider._pixelsPerVal)) * stepsToNudge;
// update the view
slider._nudgeVal = sanitiseVal(slider, slider._nudgeVal + changeBy);
updateSliderUi(slider, slider._nudgeVal);
if (slider._opts.changeOnDrag) {
change(slider, slider._nudgeVal);
(slider._boundInput[0] || {}).value = slider._val;
}
}
/*
Update the slider UI for 'val', or the current value. Expects val to
be already sanitised.
*/
function updateSliderUi(slider, val) {
var valueAsPixels,
vocab = getVocab(slider);
val = val === undefined ? slider._val : val;
//calculate the top / left position of the slider handle
valueAsPixels = slider._opts.vertical ?
// TODO copy the horizontal calculation and do the flipping afterwards
(slider._opts.max - val) * slider._pixelsPerVal : //vertical calculation
(val - slider._opts.min) * slider._pixelsPerVal; //horizontal calculation
// move the handle
// vocab.pos = left or top
slider._handleElm[0].style[vocab.pos] = valueAsPixels + "px";
// change track sizes
adjustTracks(slider);
}
/*
Generate value based on handle position.
This will calculate the value and round it to the
nearest valid value
*/
function valueForHandlePos(slider) {
var vocab = getVocab(slider),
//get the left or top value of the handle
handlePos = parseInt(slider._handleElm[0].style[vocab.pos]),
//calculate value
newVal = slider._opts.vertical ?
(slider._trackSize - slider._handleSize) - handlePos :
handlePos;
//we've got the value from the start position in pixels, now we need the
//value in terms of the slider
newVal = (newVal / slider._pixelsPerVal) + slider._opts.min;
//round to nearest step
return sanitiseVal(slider, newVal);
}
/*
Takes a value and rounds it to the nearest value in step / slider range.
NaN values will be treated as 0
*/
function sanitiseVal(slider, val) {
var step = slider._opts.step,
min = slider._opts.min,
max = slider._opts.max;
val = Number(val) || 0;
//obey boundaries
if (val < min) {
return min;
}
if (val > max) {
// a little more maths this time, we need to work out the maximum value we can step to
return max - ((max - min) % (step || 1));
}
// we don't need to calculate anything if step is zero
if (step === 0) { return val; }
// else round to step
return Math.round( (val - min) / step ) * step + min;
}
/*
Update the bound form field & fires an onchange if necessary.
If newVal is undefined it will be looked up (but passing in the value is faster)
*/
function change(slider, newVal) {
var currentVal = slider._val;
//calculate value if needed
newVal = (newVal === undefined) ? valueForHandlePos(slider) : newVal;
//update value
slider.element.attr("aria-valuenow", newVal);
slider._val = newVal;
//fire onchange if we have to
if (newVal != currentVal) {
events.fire(slider, "change");
}
}
/*
This is called when sliding starts. Fires the start event and returns an event object
*/
function slideStart(slider) {
//capture current value in case we need to reset it
slider._valBeforeSlide = slider._nudgeVal = slider._val;
return events.fire(slider, "slideStart");
}
/*
This is called when sliding stops. Fires event and resets value if default cancelled
*/
function slideStop(slider) {
var eventData = {
// current value
initialVal: slider._valBeforeSlide,
//get new value
currentVal: valueForHandlePos(slider)
};
if ( events.fire(slider, "slideStop", eventData).defaultPrevented() ) {
change(slider, slider._valBeforeSlide);
slider.val(slider._valBeforeSlide);
return;
}
change(slider, eventData.currentVal);
//if snaping ondrop is on, update handle position with val()
if (slider._opts.snapOnDrop) {
slider.val(eventData.currentVal);
} else {
(slider._boundInput[0] || {}).value = eventData.currentVal;
}
}
/*
Works out how many pixels a value is, adjust the size so ticks land
on pixels
*/
function initUi(slider, ruler) {
var opts = slider._opts,
//get hold of the vocab we need to use
vocab = getVocab(slider),
//will hold a nodelist of the slider
element = slider.element,
//the height of the slider when the track is 0px. Basically any padding, margins and borders
verticalPaddingHeight,
//adjusted size after catering for fitting ticks and steps onto pixels
adjustedSize,
//value the slider should start on
startVal,
//we listen to the mouse moving while the handle is dragging
mouseMoveListener,
//glow.dragDrop.Draggable instance for handle
handleDraggable,
//draggable options
draggableOpts,
//get the smallest non-zero value for step (if we're snapping while dragging), labelMinor, labelMajor
smallestStepingVal = greatestCommonDivisor( (opts.step * opts.snapOnDrag), opts.tickMinor, opts.tickMajor ),
oldLengthStyle;
if (opts.vertical) {
verticalPaddingHeight = element.height();
//apply height, we need to come up with a total of opts.size
slider._trackOnElm.height(opts.size - verticalPaddingHeight);
} else {
//apply width
element.width(opts.size);
}
//vocab.length holds 'width' or 'height'
slider._trackSize = slider._trackElm[vocab.length]();
// get the handle size
// right, this gets complicated in IE if the handle element has a percentage legnth, the offset values come in too late
oldLengthStyle = slider._handleElm[0].style[vocab.length];
if (glow.env.ie < 8) {
slider._handleElm[0].style[vocab.length] = slider._handleElm[0].currentStyle[vocab.length];
slider._handleElm[0].style[vocab.length] = slider._handleElm[0].style["pixel" + vocab.lengthUpper];
}
slider._handleSize = slider._handleElm[0]["offset" + vocab.lengthUpper];
slider._handleElm[0].style[vocab.length] = oldLengthStyle;
//apply the start value
if (opts.val != undefined) { //first use the option
startVal = opts.val;
} else if (slider._boundInput[0] && slider._boundInput[0].value != "") { //then the form field
startVal = slider._boundInput[0].value;
} else { //default to min val
startVal = opts.min;
}
/*if (slider._handleElm.css("position") != "absolute") {
// uh oh, our CSS hasn't loaded yet
// put in a tmp value for _pixelsPerVal, to prevent errors
slider._pixelsPerVal = 1;
slider._val = startVal;
slider._trackOnElm[0].style.height = "";
// rerun this function later
setTimeout(function() {
initUi(slider, ruler);
}, 0);
return;
}*/
//adjust size so labels / ticks sit on pixels if we have to
if (smallestStepingVal) {
adjustedSize =
// get the value of a pixel
((slider._trackSize - slider._handleSize) / (opts.max - opts.min))
// multiple by the smallest non-zero stepping value
* smallestStepingVal;
adjustedSize =
(
//floor the pixel step (we don't want fractions)
//get the new value of a pixel and work out the draggable pixel range
(Math.floor(adjustedSize) / smallestStepingVal) * (opts.max - opts.min)
//add on the handle size to get the new size of the inner track
) + slider._handleSize;
//apply the new size
if (opts.vertical) {
//apply the new size to the track
slider._trackOnElm.height(adjustedSize);
if (ruler) {
ruler.element.height(adjustedSize - slider._handleSize);
}
} else {
//work out the difference between the old track size and the new track size
//apply that difference to the element width
element.width(opts.size - (slider._trackSize - adjustedSize));
}
slider._trackSize = slider._trackElm[vocab.length]();
}
slider._pixelsPerVal = ((slider._trackSize - slider._handleSize) / (opts.max - opts.min));
//apply the start value
slider.val(startVal);
// ARIA - initial setup
element.attr({
"aria-valuenow": slider._val,
"aria-valuemin": opts.min,
"aria-valuemax": opts.max
});
//create draggable
draggableOpts = {
axis: vocab.axis,
container: slider._trackElm,
onDrag: function() {
if (slider._disabled || slideStart(slider).defaultPrevented()) {
return false;
}
slider._stateElm.addClass("slider-active");
mouseMoveListener = events.addListener(document, "mousemove", handleMouseMove, slider);
},
onDrop: function() {
slider._stateElm.removeClass("slider-active");
events.removeListener(mouseMoveListener);
slideStop(slider);
}
};
if (opts.snapOnDrag) {
draggableOpts.step = slider._pixelsPerVal * opts.step;
}
handleDraggable = new glow.dragdrop.Draggable(slider._handleElm, draggableOpts);
// track clicking
if (opts.jumpOnClick) {
events.addListener(slider._trackElm, "mousedown", function(event) {
if (slider._disabled || event.source == slider._handleElm[0]) {
// don't react if slider is disabled or handle is being used
return;
}
// vocab.pos is top / left, vocab.pagePos is pageX / pageY
var vocab = getVocab(slider),
oldPagePos = event[vocab.pagePos];
// This is a bit cheeky...
// We're tricking the draggable into thinking the mouse is in the centre of the handle.
// This way, all the handling of stepping and bounds is handled by the draggable
// TODO: Move this functionality into Draggable
event[vocab.pagePos] = slider._handleElm.offset()[vocab.pos] + (slider._handleSize / 2);
// so, make the draggable think the user has clicked in the centre of it
if (handleDraggable._startDragMouse.call(handleDraggable, event) === false) {
// now make it think the mouse has moved
event[vocab.pagePos] = oldPagePos;
handleDraggable._dragMouse.call(handleDraggable, event);
adjustTracks(slider);
// cancel default click
return false;
}
});
}
}
/**
@name glow.widgets.Slider
@class
@description Form control for setting a numerical value within a range.
Widgets must be called in a glow.ready() call.
@param {glow.dom.NodeList | Selector | HTMLElement} container Container of Slider.
The Slider will be appended to this element, retaining existing contents.
@param {Object} [opts] Options object
@param {Number} [opts.size=300] Pixel width / height of the slider
The size may be automatically reduced so that stepping sits on absolute pixels.
@param {glow.dom.NodeList | Selector | HTMLElement} [opts.bindTo] Form element to bind value to.
Changes to this form element will also cause the Slider to update
@param {Number} [opts.min=0] Minimum value for slider.
Can be negative but must be smaller than opts.max.
@param {Number} [opts.max=100] Maximum value for slider.
Can be negative but must be greater than opts.min.
@param {Number} [opts.step=1] Step between values.
0 or fractional step values may result in fractional values.
@param {Boolean} [opts.snapOnDrag=false] If true, the slide handle will snap to each step during drag.
This is a visual effect, it will not impact the value of the slider.
@param {Boolean} [opts.snapOnDrop=false] If true, the slide handle will snap to a step position on drop.
This is a visual effect, it will not impact the value of the slider.
@param {Number} [opts.val] Start value.
By default, the value from the bound form element will be used. If none
exists, the minimum value will be used.
@param {Boolean} [opts.changeOnDrag=false] Fire the 'change' event during drag.
@param {String} [opts.id] Value for Slider's ID attribute
@param {String} [opts.className] Values for Slider's class attribute.
Space separated values.
@param {Object} [opts.labels] Labels for Slider values.
For numerical labels, a Number can be provided for the interval between labels. Text labels can
be specified in the form
{"value": "label"},
eg
{"0": "Min", "50": "Medium", "100": "Maximum"}. Labels may contain
HTML, so images could be used.
@param {Number} [opts.tickMajor] The interval between each major tick mark.
@param {Number} [opts.tickMinor] The interval between each minor tick mark.
@param {Boolean} [opts.vertical=false] Create a vertical slider?
@param {String} [opts.theme="light"] Visual theme to use.
Current themes are "light" and "dark".
@param {Boolean} [opts.jumpOnClick=true] Does the track react to clicks?
If true, when the user clicks on the slider track the handle
will move to that position. Dragging can be initiated from anywhere
on the track.
@param {Boolean} [opts.buttons=true] Include fine-tuning buttons?
@param {Function} [opts.onSlideStart] Event shortcut.
See documentation below
@param {Function} [opts.onSlideStop] Event shortcut.
See documentation below
@param {Function} [opts.onChange] Event shortcut.
See documentation below
@example
var mySlider = new glow.widgets.Slider("#sliderContainer", {
min: 5,
max: 80,
id: "ageSlider",
tickMajor: 5,
tickMinor: 1,
labels: 5
});
@example
var mySlider = new glow.widgets.Slider("#fishLevelSlider", {
bindTo: 'numberOfFishInTheSea',
buttons: false,
className: 'deepBlue',
onSlideStart: function() {
glow.dom.get('img#fishes').toggleCss('moving');
},
onSlideStop: function() {
glow.dom.get('img#fishes').toggleCss('moving');
},
size: '600',
});
@example
var mySlider = new glow.widgets.Slider("#soundLevelHolder", {
min: 1,
max: 100,
id: "soundLevel",
onChange: function () {
updateFlash('sound', this.val());
}
tickMajor: 10,
tickMinor: 5,
labels: 5,
vertical: true
});
@see
Slider user guide
@see
Restyling a Slider
@see
Slider Demo: Colour Picker
*/
/**
@name glow.widgets.Slider#event:slideStart
@event
@description Fired when the user starts moving the slider.
Fired on both keyboard and mouse interaction. Preventing the
default will prevent the user moving the slider.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.Slider#event:slideStop
@event
@description Fired when the user stops moving the slider.
Fired on both keyboard and mouse interaction. Preventing the
default will return the slider to the position it was before
the user started dragging.
The event object contains properties 'initialVal' and
'currentVal', which contain the value before dragging and the
value about to be set respectively.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.Slider#event:change
@event
@description Fired when the slider value changes.
This is usually fired when the user drops the handle, but
can be configured to fire as the user is dragging the slider,
via the 'changeOnDrag' option. Change also occurs when the value
in the bound form element is changed by the user.
Change does not fire when the slider's value is set via
mySlider.val().
@param {glow.events.Event} event Event Object
*/
Slider = glow.widgets.Slider = function(container, opts) {
//private vars
/**
@name glow.widgets.Sliders#_boundInput
@type glow.dom.NodeList
@private
@description Element the slider is bound to.
Can be an empty NodeList if no input was specified by the user
*/
/**
@name glow.widgets.Sliders#_stateElm
@private
@type glow.dom.NodeList
@description Element to apply state-related class names to, like slider-disabled
*/
/**
@name glow.widgets.Sliders#_trackElm
@private
@type glow.dom.NodeList
@description Element to apply state-related class names to, like slider-disabled
*/
/**
@name glow.widgets.Sliders#_trackOnElm
@private
@type glow.dom.NodeList
@description Element containing the "on" state of the track
*/
/**
@name glow.widgets.Sliders#_trackOffElm
@private
@type glow.dom.NodeList
@description Element containing the "on" state of the track
*/
/**
@name glow.widgets.Sliders#_handleElm
@private
@type glow.dom.NodeList
@description The slider handle
*/
/**
@name glow.widgets.Sliders#_trackSize
@private
@type Number
@description Pixel width / height for track
*/
/**
@name glow.widgets.Sliders#_handleSize
@private
@type Number
@description Pixel width / height for handle
*/
/**
@name glow.widgets.Sliders#_pixelsPerVal
@private
@type Number
@description How much is each pixel movement of the handle worth?
*/
/**
@name glow.widgets.Sliders#_val
@private
@type Number
@description Current value of the slider. Set and read by val()
*/
/**
@name glow.widgets.Sliders#_valBeforeSlide
@private
@type Number
@description The value of the slider when sliding last began
*/
/**
@name glow.widgets.Sliders#_nudgeVal
@private
@type Number
@description Sometimes we need to hold the value of the slider as it's moving.
We don't want to set the actual val, as the change isn't over yet
*/
/**
@name glow.widgets.Sliders#_disabled
@private
@type Boolean
@description Is the slider disabled
*/
this._disabled = false;
//normalise container
container = $(container);
//set up the default options
this._opts = opts = glow.lang.apply({
min: 0,
max: 100,
step: 1,
theme: "light",
jumpOnClick: 1,
buttons: 1,
size: 300
}, opts);
var i,
//tmp holder of converted event names
onEventName,
//get hold of the vocab we need to use
vocab = getVocab(this),
//will hold a nodelist of the slider
element,
//the height of the slider when the track is 0px. Basically any padding, margins and borders
verticalPaddingHeight,
//adjusted size after catering for fitting ticks and steps onto pixels
adjustedSize,
//'that' for event listeners
that = this,
//nodelist to the back & fwd buttons
buttonElms,
//reference to the ticks & labels ruler used
ruler,
//get the smallest non-zero value for step (if we're snapping while dragging), labelMinor, labelMajor
smallestStepingVal = greatestCommonDivisor( (opts.step * opts.snapOnDrag), opts.tickMinor, opts.tickMajor );
//apply the listeners passed in through opts
i = eventNames.length;
while (i--) {
//convert names. Eg "slideStart" to "onSlideStart"
onEventName = "on" + eventNames[i].charAt(0).toUpperCase() + eventNames[i].slice(1);
if (opts[onEventName]) {
events.addListener(this, eventNames[i], opts[onEventName]);
}
}
// get bound input
this._boundInput = opts.bindTo ? $(opts.bindTo) : new glow.dom.NodeList();
/**
@name glow.widgets.Slider#element
@type glow.dom.NodeList
@description Slider HTML Element.
This can be used to perform DOM manipulation on the slider
@example
//get the offset of a slider
mySlider.element.offset();
*/
// add in wrapping element
this.element = element = glow.dom.create('
' + SLIDER_TEMPLATE + '
');
this._trackElm = element.get("div.slider-track");
this._trackOnElm = element.get("div.slider-trackOn");
this._trackOffElm = element.get("div.slider-trackOff");
this._handleElm = this._trackElm.get("div.slider-handle");
this._stateElm = element.get("div.slider-state");
// add in the theme
element.get("div.slider-theme").addClass("slider-" + opts.theme);
// removes buttons if the user doesn't want them
!opts.buttons && this._stateElm.addClass("slider-noButtons");
// add custom ID / Class names
element[0].id = opts.id || "";
element[0].className += " " + (opts.className || "");
// add Ruler (ticks and labels)
if (opts.tickMajor || opts.tickMinor || opts.labels) {
opts.reverse = opts.vertical;
ruler = new Ruler(element.get("div.slider-labels"), opts);
}
//add to page
this.element.appendTo(container);
initUi(this, ruler);
if (this._boundInput[0]) {
// listen for changes
events.addListener(this._boundInput, "change", function() {
var snappedValue = sanitiseVal(that, this.value);
change(that, snappedValue);
// using val() to do the UI & value updating results in sanitise being called twice, but saves code
that.val(snappedValue);
});
}
// focus changes
events.addListener(this.element, "focus", function() {
if ( !that._disabled ) {
that._stateElm.addClass("slider-active");
}
});
events.addListener(this.element, "blur", function() {
that._stateElm.removeClass("slider-active");
});
// keyboard events
events.addListener(this.element, 'keydown', function(event) {
if (that._disabled) { return; }
switch (event.key) {
case 'UP':
case 'RIGHT':
case 'DOWN':
case 'LEFT':
return handleKeyNav.call(that, event);
}
});
events.addListener(this.element, 'keyup', function(event) {
if (that._disabled) { return; }
switch (event.key) {
case 'UP':
case 'RIGHT':
case 'DOWN':
case 'LEFT':
return handleKeyNavEnd.call(that, event);
}
});
// the following prevents the arrow keys scrolling in some browsers (such as Opera)
events.addListener(this.element, 'keypress', function(event) {
if (that._disabled) { return; }
switch (event.key) {
case 'UP':
case 'RIGHT':
case 'DOWN':
case 'LEFT':
return false;
}
});
// nudge buttons
buttonElms = this.element.get(".slider-btn-fwd, .slider-btn-bk");
events.addListener(buttonElms, "mousedown", handleButtonDown, this);
events.addListener(buttonElms, "mouseup", handleButtonUp, this);
events.addListener(buttonElms, "mouseout", handleButtonUp, this);
// label clicking
if (ruler) {
events.addListener(ruler.element, "mousedown", function(event) {
// exit if slider disabled
if (that._disabled) { return; }
var labelElm = $(event.source),
snappedValue;
// right, we need to turn labelElm (currently the event source) into the label element
while ( labelElm[0] != ruler.element[0] ) {
if ( labelElm.hasClass("ruler-label") ) { // yey, we found the label
// check the value is valid
snappedValue = sanitiseVal(that, labelElm[0]._labelVal);
change(that, snappedValue);
// update UI
that.val(snappedValue);
return false;
}
labelElm = labelElm.parent();
}
// the user must have clicked outside a label
});
}
};
Slider.prototype = {
/**
@name glow.widgets.Slider#disabled
@function
@description Get / Set the disabled state of the slider
Call without parameters to get the state, call with parameters
to set the state.
Disabling the slider will also disable the bound form element.
@param {Boolean} [disable] Disable the slider?
'false' will enable a disabled slider.
@returns
The slider instance when setting. Boolean when getting.
@example
// disabling a slider
mySlider.disabled( true );
// toggling a slider
mySlider.disabled( !mySlider.disabled() )
*/
disabled: function(disable) {
if (disable !== undefined) {
// setting...
// cast to boolean and set
this._disabled = disable = !!disable;
// ARIA update
this.element.attr("aria-disabled", disable);
// add / remove the disabled class
this._stateElm[disable ? "addClass" : "removeClass"]("slider-disabled");
//disable the bound form field, if it's there
( this._boundInput[0] || {} ).disabled = disable;
return this;
} else {
// getting...
return this._disabled;
}
},
/**
@name glow.widgets.Slider#val
@function
@description Get / Set the value the slider
Call without parameters to get the value, call with parameters
to set the value.
@param {Number} [newVal] New value for the slider
@returns
The slider instance when setting. Number when getting.
@example
// getting the current value
var sliderVal = mySlider.val();
// setting the value
mySlider.val(50);
*/
/*
This param is a possible future enhancment
@param {glow.anim.Animation | Boolean} [anim] Animate the slider to the new value.
Ommiting this parameter will simply switch the slider to the new value.
True will create a basic easing animation, or a custom animation can
be provided.
Animating to a new value simulates human interaction. The usual events
will be fired along the way.
*/
val: function(newVal) {
if (newVal != undefined) {
//setting...
//sanitise and set
this._val = sanitiseVal(this, newVal);
//update aria
this.element.attr("aria-valuenow", this._val);
//update form
(this._boundInput[0] || {}).value = this._val;
//update UI
updateSliderUi(this);
return this;
} else {
return this._val;
}
},
/**
@name glow.widgets.Slider#valToLabel
@function
@description Get the label for a value.
@param {Number} [val] The value.
If omitted, the current slider value is used.
@returns {String}
Label text.
@example
// find out the label the handle is nearest
var label = mySlider.valToLabel();
*/
valToLabel: function(val) {
// pick the value up from the slider if there are no params
if (val === undefined) {
val = this._val;
}
var labels = this._opts.labels,
// the lowest difference between labels
lowestDiff = Infinity,
// the lowest different passed through Math.abs
lowestDiffAbs = Infinity,
// label that has the lowest differece
currentLabel,
// tmp value
diffAbs,
i;
// return null if there are no labels
if (labels === undefined) { return null; }
// look out for interval labels
if (typeof labels == 'number') {
// round to the nearest interval label
return Math.round(val / labels) * labels;
}
// deal with object labels
// is the value the actual position of a label? If so return it
if (labels[val]) {
return labels[val];
}
// bah, we have to look for the closest label
for (i in labels) {
// get the difference between the label and value
diffAbs = Math.abs(Number(i) - val);
if (diffAbs < lowestDiffAbs) {
// the difference is less than ones found previously, we have a new winner
lowestDiffAbs = diffAbs;
lowestDiff = Number(i) - val;
currentLabel = labels[i];
} else if (diffAbs == lowestDiffAbs) {
// uh oh, we have two diffs the same. Round up!
if (lowestDiff < 0) {
lowestDiffAbs = diffAbs;
lowestDiff = Number(i) - val;
currentLabel = labels[i];
}
}
}
return currentLabel;
},
/**
@name glow.widgets.Slider#labelToVal
@function
@description Get the value for a particular label.
If the label doesn't exist in the slider, null is returned
@param {String} [label] A label used in the slider
@returns {Number}
Value.
@example
// find out that value of "Medium" on the slider
var val = mySlider.labelToVal("Medium");
*/
labelToVal: function(label) {
var i,
labels = this._opts.labels;
// return null if there are no labels
if (labels === undefined) { return null; }
// look out for interval labels
if (typeof labels == 'number') {
label = Number(label);
// if the label is divisable by the interval, return it
if ( !(Number(label) % labels) && !isNaN(label) ) {
return label;
}
return null;
}
// loop through the objects until we find a match
for (i in labels) {
if (label == labels[i]) {
return Number(i);
}
}
return null;
}
};
}
});
(window.gloader || glow).module({
name: 'glow.widgets.AutoSuggest',
library: ['glow', '1.7.0'],
depends: [[
'glow', '1.7.0',
'glow.dom',
'glow.events',
'glow.anim',
'glow.widgets',
'glow.net',
'glow.widgets.Overlay'
]],
builder: function(glow) {
/* private fields *************************************************************/
var $ = glow.dom.get, // shortcuts
events = glow.events,
anim = glow.anim;
/* private functions **********************************************************/
/**
@private
@description Attach a text input element to this AutoSuggest instance.
*/
function bindTo(that, inputElement) {
that.inputElement = $(inputElement);
if (!that.inputElement[0].tagName.toLowerCase() == 'input') {
throw 'Argument "inputElement" must be set to an input HTMLElement.';
}
that.inputElement.attr('autocomplete', 'off'); // stop arrow keys from doing browsery things
}
/**
@private
@description Uses AJAX to refresh the data from a server URL.
*/
function downloadData(that, url, callback) { /*debug*///console.log("downloadData("+url+", "+callback+")");
if (that._lastDownload == url) { // no need to reload same url again
if (callback) callback.apply(that, arguments);
else that.find();
}
else {
that._lastDownload = url;
if (that._pendingRequest) that._pendingRequest.abort();
that._pendingRequest = glow.net.get(
url,
{
useCache: that.opts.useCache,
onLoad: function(r) {
var dataObject = (that.opts.parseData)? that.opts.parseData.apply(that, [r]) : eval(r.text());
that._pendingRequest = null;
that.setData(dataObject);
// create and populate Event instance
var e = new events.Event();
e.data = dataObject;
e.text = r.text();
events.fire(that, 'dataLoad', e);
if (callback) callback.apply(that, arguments);
else that.find();
},
onError: function(r) {
var e = new events.Event();
e.response = r;
events.fire(that, 'dataError', e);
},
onAbort: function(r) {
var e = new events.Event();
e.response = r;
events.fire(that, 'dataAbort', e);
}
}
);
}
}
/**
@private
@description Check whether the overlay is currently visible.
@type {Boolean}
*/
function isVisible(that) {
return ($(that.overlay.container).css('display') == 'block');
}
/**
@private
@description Position the overlay under the input element.
*/
function place(that) {
if (!that.opts.autoPosition) { return; }
var inputOffset = that.inputElement.offset();
that.overlay.container
.css('left', inputOffset.left + 'px')
.css('top', inputOffset.top + that.inputElement[0].offsetHeight + 'px')
.css('width', ((that.opts.width)? that.opts.width : that.inputElement[0].offsetWidth + 'px'));
}
/**
@private
*/
function buildIndexer(that) { // create a custom one from an opt value
if (that.opts.index) {
if (typeof that.opts.index == 'function') {
that._indexer = that.opts.index; // it's up to the user
}
else if (typeof that.opts.index == 'string') { // it's a field name
that._indexer = (function(index) {
return function(dataItem) {
return dataItem[index]
}
})(that.opts.index);
}
else if (that.opts.index.push !== undefined) { // it's an array of field names
that._indexer = (function(index) {
var l = index.length-1; // assumes the index length never changes
return function(dataItem) {
var result = [];
for (var i = l; i >= 0; i--) {
result[i] = dataItem[index[i]];
}
return result;
}
})(that.opts.index);
}
else throw 'opts.index must be of type function, string or array, not ' + typeof that.opts.index + '.';
}
else { // default
that._indexer = function (dataItem) { // the default indexer
return (dataItem['name'])? dataItem['name'] : dataItem.toString(); // TODO: what if there is no 'name' field?
}
}
}
/**
@private
@description Make the next item in the results active.
*/
function nextItem(that) {
var currItem = $(that.overlay.container).get('.active');
if (currItem.length == 0) {
var items = $(that.overlay.container).get('li'); // TODO
if (items.length) activateItem(that, items[0]);
}
else {
var nextItem = currItem.next();
if (nextItem && !nextItem.is('ul')) {
deactivateItem(that, currItem);
activateItem(that, nextItem);
}
else { // move selection down off of suggestion list, back into the input element
that.val(that._original);
deactivateItem(that, currItem);
}
}
}
/**
@private
@description Make the previous item in the results active.
*/
function prevItem(that) {
var currItem = $(that.overlay.container).get('.active');
if (currItem.length == 0) { // no item is active so return the last item
var allItems = $(that.overlay.container).get('li');
var lastItem = allItems[allItems.length-1];
activateItem(that, lastItem);
}
else {
var prevItem = currItem.prev();
if (prevItem && !prevItem.is('ul')) {
deactivateItem(that, currItem);
activateItem(that, prevItem);
}
else { // move selection up off of suggestion list, back into the input element
that.val(that._original);
deactivateItem(that, currItem);
that._lastActive = -1;
}
}
}
/**
@private
@description Given an HTML element, return this AutoSuggest list.
*/
function getParentListItem(that, node) { /*debug*///console.log("getParentListItem("+node+")");
var listItem = node;
while (listItem.parentNode && listItem.parentNode.parentNode) {
if ($(listItem.parentNode.parentNode).hasClass('glow170-autoSuggest')) break;
listItem = listItem.parentNode;
}
return (listItem.nodeName.toLowerCase() == 'li')? listItem : null;
}
/**
@private
@description Make the given list item from the results active.
*/
function activateItem(that, listItem) {
deactivateItems(that, listItem);
$(listItem).addClass('active');
if (that._lastActive != listItem) {
that._lastActive = listItem;
events.fire(that, 'itemActive');
}
}
/**
@private
@description Make the item from the results at the given offeset active.
*/
function activateItemOffset(that, offset) {
var li = that.overlay.container.get('li')[offset]; // TODO
if (li) $(li).addClass('active');
}
/**
@private
@description Make the given list item not active.
*/
function deactivateItem(that, listItem) {
$(listItem).removeClass('active');
}
/**
@private
@description Make all list items not active.
*/
function deactivateItems(that, listItem) {
var list = (listItem) ? $(listItem).parent() : that.overlay.container.get('ul');
list.get("li").each(
function(i) {
$(this).removeClass('active');
}
);
}
/**
@name glow.widgets.AutoSuggest#event:show
@event
@description Fired when the suggestion list is about to open.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.AutoSuggest#event:hide
@event
@description Fired when the suggestion list is about to close.
@param {glow.events.Event} event Event Object
*/
/**
@private
@description Used internally to add all necessary events.
*/
function addEvents(that) { /*debug*///console.log('addEvents()');
// make show or hide events from the overlay bubble up to AutoSuggest
var bubble = function(e) {
glow.events.fire(that, e.type, e);
return !e.defaultPrevented();
};
events.addListener(that.overlay, 'show', bubble);
events.addListener(that.overlay, 'hide', bubble);
events.addListener( // a result item has become active
that,
'itemActive',
function(e) { // fire any onItemActive handlers in the opts
if (!isVisible(that)) return false;
var selectedOffset = that.getSelectedOffset();
if (selectedOffset == -1) return false;
if (that.opts.onItemActive) {
var e = new events.Event();
e.activeItem = that._found[selectedOffset];
that.opts.onItemActive.apply(that, [e]);
}
return true;
}
);
events.addListener( // the mouse was clicked inside the input element
that.inputElement,
'mousedown',
function(e) { // bail, but keep any hilighted suggestion
clearTimeout(that.findTimeout);
// user accepts the hilited text
that._value = that.inputElement.val();
valueChanged(that, true);
that.hide();
that.value += that._selected;
that._selected = '';
return true;
}
);
events.addListener( // a result item was selected
that,
'itemSelect',
function(e) { // fire any onItemSelect handlers in the opts
if (!isVisible(that)) return false;
var selectedOffset = that.getSelectedOffset();
if (selectedOffset == -1) return false;
var e = new events.Event();
e.source = $(that.overlay.container).get('.active');
e.selectedItem = that._found[selectedOffset];
if (that.opts.onItemSelect) {
that.opts.onItemSelect.apply(that, [e]);
}
setCaretTo(that.inputElement[0], that.inputElement.val().length);
valueChanged(that, /*without finding?*/true);
that.hide();
return true;
}
);
events.addListener( // the list of results was clicked (and thus a result item was selected)
that.overlay.container.get('ul')[0],
'mousedown',
function(e) {
events.fire(that, 'itemSelect', e);
}
);
events.addListener( // the window was resized while the results were showing?
window,
'resize',
function(e){
place(that);
}
);
// some code wot jake done wrote:
// prevent moz from hiding the input box when a link in the results is clicked
events.addListener(that.overlay.container, 'mousedown', function() {
return false;
});
// same for IE...
events.addListener(that.overlay.container, 'beforedeactivate', function(event) {
if ($(event.nativeEvent.toElement).isWithin(that.overlay.container)) {
return false;
}
return true;
});
events.addListener( // the focus has moved away from the input element
that.inputElement,
'blur',
function(e) { /*debug*///console.log("blur("+e+")");
clearTimeout(that.findTimeout);
// user accepts the hilited text
that._value = that.inputElement.val();
valueChanged(that, true);
that.hide();
}
);
events.addListener( // the cursor is over a result item
that.overlay.container,
'mouseover',
function(e) { /*debug*///console.log("mouseover("+e+")");
var li = getParentListItem(that, e.source);
li && activateItem(that, li);
}
);
events.addListener( // the cursor has left a result item
that.overlay.container,
'mouseout',
function(e) { /*debug*///console.log("mousmouseouteover("+e+")");
var li = getParentListItem(that, e.source);
if (li && li != e.source) deactivateItem(that, li);
}
);
var ignoreInUp = false; // flag to tell the keyup handler if it should ignore already-handled key presses
var repeating = {ondown:0, onpress:0};
function keyDownHandler(e) { /*debug*///console.log("keydown "+e.key);
clearTimeout(that.findTimeout); // kill any pending finds whenever a new key is pressed
ignoreInUp = false;
repeating.ondown++;
switch (e.key) {
case 'DOWN':
if (isVisible(that)) {
ignoreInUp = true;
nextItem(that);
return false; // on some systems this moves the carat around
}
break;
case 'UP':
if (isVisible(that)) {
ignoreInUp = true;
prevItem(that);
return false;
}
break;
case 'LEFT':
case 'RIGHT':
if (isVisible(that)) {
// user accepts the highlighted text
that._value = that.inputElement.val();
valueChanged(that, true);
}
break;
case 'ESC':
// return to the value originally entered by the user
that.inputElement.val(that._original);
that._value = that._original;
valueChanged(that, true);
that.hide();
return false;
case 'DEL':
case 'BACKSPACE':
that.hide();
break;
case 'ENTER':
if (isVisible(that)) {
ignoreInUp = true;
}
else {
return true; // no: the results aren't visible so just do the default thing
}
var selectedOffset = that.getSelectedOffset();
if (selectedOffset == -1) { // no: there isn't any result item selected
that.hide();
return true; // do the default thing
}
// yes: fire the itemSelect event
var e = new events.Event();
e.source = $(that.overlay.container).get('.active');
e.selectedItem = that._found[selectedOffset];
events.fire(that, 'itemSelect', e);
return false; // return false to prevent form submitting?
}
// if we're still here...
return true;
}
events.addListener(that.inputElement[0], 'keydown', keyDownHandler);
function keyPressHandler(e) { /*debug*///console.log("keypress "+e.key);
repeating.onpress++;
// For non-printable characters, like arrow keys...
// Some browsers (like Mac Safari 3.1.1) only ever fire the keydown event
// (even for auto-repeats) and never fire the keypress event.
// Some browsers fire the keydown event only once and then fire the
// keypress event repeatedly until the key is released.
// We need to deal with both possibilities but we must not
// handle the event twice.
// We do nothing the very first time we get here, because the event must
// have already been handled in previous keydown phase.
// But if we've passed here more than once, oafter a single keydown,
// we must be repeating on keypress, so it's ok to handle it from now on.
if (repeating.ondown == 1 && repeating.onpress > 1) {
if (e.key == 'DOWN') {
if (isVisible(that)) {
nextItem(that);
}
return false;
}
else if (e.key == 'UP') {
if (isVisible(that)) {
prevItem(that);
}
return false;
}
}
return true;
}
events.addListener(that.inputElement[0], 'keypress', keyPressHandler);
function keyUpHandler(e) { /*debug*///console.log("keyUpHandler(e)");
repeating = {ondown:0, onpress:0}; // not repeating anymore
if (ignoreInUp) return false;
that._value = that.inputElement.val(); // stow the new value from the input element
valueChanged(that);
return true;
}
events.addListener(that.inputElement[0], 'keyup', keyUpHandler);
}
/**
@private
@description What to do when the value in the input element changes.
*/
function valueChanged(that, withoutFinding) { /*debug*///console.log("valueChanged(that, "+withoutFinding+")");
if (that._oldValue === undefined) that._oldValue = that.inputElement.val(); // initially
var currentValue = that.getValue(); // grab value, so we can send it with the event
/*debug*///console.log("oldValue is '"+that._oldValue+"'; currentValue is '"+currentValue+"';");
var skipFind = false;
if (currentValue == '') {
skipFind = true; // in case user has deleted last remaining character
that.hide(); // in case user has used keyboard to cut out all characters in the input item
}
else if (currentValue.toLowerCase() == that._oldValue.toLowerCase()) {
skipFind = true;
}
that._oldValue = currentValue;
if (withoutFinding || skipFind) return;
that.findTimeout = setTimeout(
function() {
var e = new glow.events.Event();
e.value = currentValue;
glow.events.fire(that, 'inputChange', e);
if (that.opts.activeOnShow !== false) { activateItemOffset(that, 0); }
if (!e.defaultPrevented()) { // user can cancel the find in their handler
if (typeof that.dataSource != 'object') that.loadData(); // urls and functions are always reloaded
that.find();
}
},
500
);
}
/* constructor ****************************************************************/
/**
@name glow.widgets.AutoSuggest
@constructor
@description Create an auto-suggest menu for an input element.
An AutoSuggest widget adds the ability for a text input element to make
suggestions whilst the user types. This appears as a list of selectable
items below the input element which dynamically updates based on what
has been typed so far.
Widgets must be called in a glow.ready() call.
@param {glow.dom.NodeList | String} inputElement A NodeList or css selector that points to a text input element.
@param {Object[] | String[] | String | Function} dataSource Either an array of objects, an array of strings (referred to as a 'dataSource'), a function that returns a dataSource or a URL that when requested will return a dataSource.
@param {Object} opts Optional configuration settings.
@param {String[] | Function} [opts.index=["name"]] When datasource is an array of objects, the property with this string is used as the index, or this function will be used to generate the index.
@param {Number} [opts.width=inputElement width] Width in pixels of the suggestion container. Default is the width of the inputElement.
@param {Number} [opts.height] Height in pixels of the suggestion container.
@param {Function} [opts.parseData] Transform the response from the server into a dataSource object.
The server may return XML or even plain text, but your parseData function should convert this
data into an array of objects.
Your function will be passed a {@link glow.net.Response} object from the server.
@param {Function} [opts.formatItem] Given the matched data item, return HTML or NodeList.
@param {Boolean} [opts.autoPosition=true] Automatically position the suggestion list under the input element.
If you set autoPosition to false, you can position the suggestion list yourself in a handler for the show event of your AutoSuggest object.
@param {Boolean} [opts.activeOnShow=true] Should the first suggestion automatically be active when the suggestion list appears?
@param {Number} [opts.maxListLength] Limit the size of the result list to this.
@param {Boolean} [opts.caseSensitive=false] Whether case is important when matching suggestions.
@param {Function} [opts.isMatch] Provide a custom function to filter the dataset for results
Your function will be passed an indexed term and the term entered by the user, return
true to confirm a match.
The default function will check the indexed term begins with the term entered by the user.
@param {Boolean} [opts.complete=false] Append the completed text of the currently active suggestion to the input text.
@param {String} [opts.delim] When defined, the input text will be treated as multiple values, separated by this string (with surrounding spaces ignored).
@param {string} [opts.theme="light"] Either "light" or "dark".
@param {String|Function} [opts.anim] Passed into the Overlay constructor for show and hide transitions.
@param {Function} [opts.onInputChange] Your own handler for the inputChange event.
@param {Function} [opts.filter] Filter matches found before they're displayed.
Provide a callback function that can be used to modify an array of
matching results before they are displayed. The callback receives a
single argument, an array of objects corresponding to the objects in
your data that are considered to match; expects you to return an array
of objects modified as you wish.
@param {Boolean} [opts.useCache=false] Allow results to cache when using a url dataSource
If false, a random number will be added to the URL to ensure the
results do not come from the browser's cache.
@param {Boolean} [opts.selectCompletedText=true] Set to false to prevent the widget from highlighting the completed text in the input element by selecting it.
@param {Function} [opts.onItemSelect] Your own handler for the itemSelect event.
@param {Function} [opts.onDataLoad] Your own handler for the dataLoad event.
@param {Function} [opts.onDataError] Your own handler for the dataError event.
@param {Function} [opts.onDataAbort] Your own handler for the dataAbort event.
@see
AutoSuggest user guide
@example
new glow.widgets.AutoSuggest(
"#inputElementId", // HTML input element to bind the AutoSuggest to
["Apple Flan", "Easy Shortbread", "Apple FlapJack", "Flambe of Brandied Apple Ice"] // Data source
);
@example
myOpts = {
width: 100,
theme: "dark",
maxListLength: "10",
onItemSelect: function(e) {
this.val(e.selectedItem.name); // Updates the binded HTML input element with the selected value
}
}
myData = [
{
name: "Apple Flan"
},
{
name: "Easy Shortbread"
},
{
name: "Apple FlapJack"
},
{
name: "Flambe of Brandied Apple Ice"
}
];
myAutoSuggest = new glow.widgets.AutoSuggest(
"#inputElementId", // HTML input element to bind the AutoSuggest to
myData,
myOpts
);
@example
new glow.widgets.AutoSuggest(
myInputElement, // HTML input element to bind the AutoSuggest to
"colornames.js", // URL to data
myOpts
).loadData(); // load data from URL now
*/
/**
@name glow.widgets.AutoSuggest#event:inputChange
@event
@description Fired whenever new suggestion appears based on changed input.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.AutoSuggest#event:itemSelect
@event
@description Fired whenever a suggestion is selected.
@param {glow.events.Event} event Event Object
@param {Object} event.selectedItem The object in the dataSource that is associated with the selected list item.
*/
/**
@name glow.widgets.AutoSuggest#event:dataLoad
@event
@description Fired whenever raw data is loaded from a request to a URL.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.AutoSuggest#event:dataError
@event
@description Fired whenever there is an errored request to a URL.
@param {glow.events.Event} event Event Object
*/
/**
@name glow.widgets.AutoSuggest#event:dataAbort
@event
@description Fired whenever there is an aborted request to a URL.
@param {glow.events.Event} event Event Object
*/
glow.widgets.AutoSuggest = function(inputElement, dataSource, opts) { /*debug*///console.log('new glow.widgets.AutoSuggest('+inputElement+', '+dataSource+', '+opts+')');
this.opts = opts || {};
bindTo(this, inputElement);
this.overlay = new glow.widgets.Overlay(
glow.dom.create('
'),
{
autoPosition: false,
anim: (this.opts.anim)? this.opts.anim : null
}
);
this.configure(this.opts);
buildIndexer(this); // build the function that will be used to create an index from the data
this.dataSource = dataSource;
this.data = [];
if (typeof dataSource != 'string') this.loadData(); // urls are not loaded on construct, objects and functions are
addEvents(this);
if (this.opts.complete) {
// Fix for trac 175 - "Autosuggest opens overlay onLoad where opts.complete == true"
if (this.inputElement.val() == '') {
this.setData(dataSource);
}
else {
this.setData(dataSource, function() {});
}
var that = this;
events.addListener(
that,
'itemActive',
function(e) {
var selectedOffset = that.getSelectedOffset();
if (selectedOffset == -1) return false;
var matchedOn = (that._found[selectedOffset][this.opts.index]||that._found[selectedOffset]['name']||that._found[selectedOffset]);
if (matchedOn.push !== undefined) matchedOn = that._matchedOn;
that.suggest(matchedOn);
return true;
}
);
}
this.opts.selectCompletedText =
(opts.selectCompletedText === undefined)? true : opts.selectCompletedText;
}
/* public fields *************************************************************/
/**
@name glow.widgets.AutoSuggest#inputElement
@type glow.dom.NodeList
@description Refers to the input element to which this is attached to.
@example
var myAutoSuggest = new glow.widgets.AutoSuggest(
"input#preferedColour",
"colornames.js"
);
alert(myAutoSuggest.inputElement); // returns a nodeList referencing input#preferedColour
*/
/**
@name glow.widgets.AutoSuggest#overlay
@type glow.widgets.Overlay
@description Refers to the overlay object that will contain the list of suggestions.
@example
var myAutoSuggest = new glow.widgets.AutoSuggest(
"input#preferedColour",
"colornames.js"
);
myAutoSuggest.overlay.show();
*/
/* public methods *************************************************************/
/**
@private
@description Used internally to apply configuration options.
*/
glow.widgets.AutoSuggest.prototype.configure = function(opts) {
this.opts = opts || {};
if (this.opts.autoPosition === undefined) { this.opts.autoPosition = true; }
if (this.opts.height) {
var listContainer = $(this.overlay.container.get('.glow170-autoSuggest').get('ul')[0]);
listContainer.css('overflow-x', 'hidden');
listContainer.css('overflow-y', 'auto');
listContainer.height(this.opts.height);
}
if (this.opts.theme == 'dark') {
$(this.overlay.container.get('ul')[0]).removeClass('autosuggest-light');
$(this.overlay.container.get('ul')[0]).addClass('autosuggest-dark');
}
else {
$(this.overlay.container.get('ul')[0]).removeClass('autosuggest-dark');
$(this.overlay.container.get('ul')[0]).addClass('autosuggest-light');
}
if (this.opts.onDataLoad) events.addListener(this, 'dataLoad', this.opts.onDataLoad);
if (this.opts.onDataError) events.addListener(this, 'dataError', this.opts.onDataError);
if (this.opts.onDataAbort) events.addListener(this, 'dataAbort', this.opts.onDataAbort);
if (this.opts.onInputChange) events.addListener(this, 'inputChange', this.opts.onInputChange);
this._isMatch = this.opts.isMatch || function(word, lookFor) { return (word.indexOf(lookFor) == 0); } // default
this._formatItem = this.opts.formatItem || function(o) { return (o.name)? o.name : o.toString(); }; // default
this._matchItem = this.opts.formatItem || function(o) { return o.name; }; // default
this._filter = this.opts.filter || function(results) { return results; }; // do nothing
}
/**
@name glow.widgets.AutoSuggest#setData
@function
@description Update the data source
If the dataSource is a URL it will be reloaded asynchronously.
@param {Object[] | String | Function} dataSource New data source
@type {glow.widgets.AutoSuggest}
@returns The instance of the widget.
@example
myAutoSuggest = new glow.widgets.AutoSuggest(
myInputElement,
"colornames.js", // URL to data
myOpts
)
myAutoSuggest.setData("newColornames.js"); // Set data to new URL
myAutoSuggest.loadData(); // load data from new URL now
*/
glow.widgets.AutoSuggest.prototype.setData = function(dataSource, callback) { /*debug*///console.log("setData("+((dataSource)?dataSource.toSource():"")+")");
if (typeof dataSource == 'function') {
dataSource = dataSource.call(this);
}
if (typeof dataSource == 'string') { // it's a URL but next time through we'll have an actual object, not a string
this.dataURL = dataSource;
this.data = []; // placeholder value until download completes
// insert the current value of the input element to pass to the server
dataSource = dataSource.replace(/\{input\}/g, escape(this.getValue()));
downloadData(this, dataSource, callback); // calls setData
}
else {
this.data = dataSource;
// process data to build a results_array and an index like {"keyword": results_array_offsets[]}
this.index = {};
this.results = [];
// this._indexer is a function to extract the keywords from each data item
for (var d = 0; d < this.data.length; d++) {
var datum = this.data[d];
this.results.push(datum);
// build index keywords
var keywords = this._indexer(datum);
keywords = (typeof keywords == 'string')? [keywords] : keywords;
// associate data items with keyword
for (var i = 0; i < keywords.length; i++) {
var keyword = "="+(this.opts.caseSensitive? String(keywords[i]) : String(keywords[i]).toLowerCase());
if (!this.index[keyword]) this.index[keyword] = [];
this.index[keyword].push(this.results.length-1);
}
}
return this; // chained
}
}
/**
@name glow.widgets.AutoSuggest#loadData
@function
@description Cause the dataSource passed to the constructor to be set as the current data.
@type {glow.widgets.AutoSuggest}
@returns The instance of the widget.
@example
new glow.widgets.AutoSuggest(
myInputElement,
"colornames.js", // URL to data
myOpts
).loadData(); // load data from URL now
*/
glow.widgets.AutoSuggest.prototype.loadData = function(callback) { /*debug*///console.log("loadData()");
this.setData(this.dataSource, callback);
return this; // chained
}
/**
@private
@description Used to create a sting that combines a completetion with existing text.
*/
function appendTag(currentValue, delim, value) { /*debug*///console.log("called appendTag('"+currentValue+"', '"+delim+"', '"+value+"')");
var split;
if (delim == '' || currentValue.indexOf(delim) < 0) {
split = new RegExp('^( *)(.*)$');
}
else {
split = new RegExp('^(.*'+delim+' *)([^'+delim+']*)$');
}
var lv = split.exec(currentValue)[1];
var rv = (split.exec(value)||["", "", value])[2];
return lv+rv;
}
/**
@name glow.widgets.AutoSuggest#val
@function
@param {string} [value] If defined this value is set, otherwise the current value is returned.
@description Sets or gets the value of the input element (minus any unaccepted completions).
@type {String|glow.widgets.AutoSuggest}
@returns The value of the input element when getting, or the instance of the widget when setting.
@example
new glow.widgets.AutoSuggest(
"input#recipeName", // refers to an input element on the page
["Apple Flan", "Easy Shortbread", "Apple FlapJack", "Flambe of Brandied Apple Ice"], // Data source
{
onItemSelect: function(e) {
this.val(e.selectedItem.name); // Set input#reciptName to the value of the selected item
}
}
);
*/
glow.widgets.AutoSuggest.prototype.val = function(value) { /*debug*///console.log("called val("+value+")");
if (value === undefined) { //set
return this._value;
}
else {
this._value = value;
this.inputElement.val(value);
return this; // chained
}
}
/**
@private
@name glow.widgets.AutoSuggest#setValue
@function
@description Sets the current value of the widget. In the case of
the delim option, set the last delimited item.
*/
glow.widgets.AutoSuggest.prototype.setValue = function(value) { /*debug*///console.log("called setValue("+value+")");
var currentValue = this._value || this.inputElement.val();
var delim = (this.opts.delim || '');
value = appendTag(currentValue, delim, value);
this._value = value;
this.inputElement.val(value);
}
/**
@private
@name glow.widgets.AutoSuggest#getValue
@function
@description Returns the current value of the widget. In the case of
the delim option, gets the last delimited item.
*/
glow.widgets.AutoSuggest.prototype.getValue = function() { /*debug*///console.log("getValue()");
var value = this._value || this.inputElement.val();
if (this.opts.delim !== undefined && this.opts.delim != '') {
value = (value.match(new RegExp('(^|'+this.opts.delim+' *)([^'+this.opts.delim+']*)$')) || ['', '', '']);
value = value[2];
}
return value;
}
/**
@private
@name glow.widgets.AutoSuggest#suggest
@param {string} suggested The text that is being suggested.
@description Display text with the suggested portion selected.
*/
glow.widgets.AutoSuggest.prototype.suggest = function(suggested) { /*debug*///console.log("suggest("+suggested+")");
this._suggested = suggested;
var currentValue = this.inputElement.val();
var delim = (this.opts.delim || '');
var value = appendTag(currentValue, delim, suggested);
this.inputElement.val(value);
if (this.opts.selectCompletedText) {
selectRange(this.inputElement[0], {start: (this._value || '').length, end: this.inputElement.val().length}); //currentValue.length+suggested.length})
}
}
/**
@private
@description Make the text in the given range selected.
@param el
@param range
@param range.start
@param range.end
*/
function selectRange(el, range) { /*debug*///console.log("selectRange("+el+", "+range.toSource()+")");
el.focus();
if (!window.opera && el.createTextRange) { // ie, but not opera (faker)
var r = el.createTextRange();
r.moveEnd('character', range.end);
r.moveStart('character', range.start);
r.select();
}
else { // moz, saf, opera
el.select();
el.selectionStart = range.start;
el.selectionEnd = range.end;
}
}
/**
@private
*/
function setCaretTo(el, pos) { /*debug*///console.log("setCaretTo("+el+", "+pos+")");
selectRange(el, {start: pos, end: pos})
}
/**
@private
@name array_indexOf
@function
@description Find the position of a value in an array. Like Mozilla's
Array#indexOf().
*/
function array_indexOf(value) {
var index = -1;
for (var i = 0, l = this.length; i < l; i++) {
if (this[i] === value) {
index = i;
break;
}
}
return index;
}
/**
@private
@name glow.widgets.AutoSuggest#find
@function
@description Cause the data to be searched for items that match the value of the inputElement.
@param {String} lookFor For testing purposes you can pass in a lookFor, otherwise it will be drawn from the inputElement.
@returns undefined
*/
glow.widgets.AutoSuggest.prototype.find = function(lookFor) { /*debug*///console.log("find()")
if (lookFor === undefined) lookFor = this.getValue();
// ltrim
while (lookFor.charAt(0) == ' ') lookFor = lookFor.substring(1);
if (!this.opts.caseSensitive) lookFor = lookFor.toLowerCase();
var found = [];
found.indexOf || (found.indexOf = array_indexOf);
if (lookFor) {
for (var k in this.index) {
var lookAt = k.substring(1);
if (this._isMatch(lookAt, lookFor)) {
var keys = this.index[k];
for (var j = 0; j < keys.length; j++) {
var offset = keys[j];
if (found.indexOf(this.results[offset]) == -1) {
found.push(this.results[offset]);
}
}
}
}
}
// apply any optional filtyering to the results
found = this._filter(found);
this._found = found; // used to get the selected object in event handlers
if (found.length) {
if (this.opts.maxListLength) found.length = Math.min(found.length, this.opts.maxListLength);
var list = [];
for (var i = 0; i < found.length; i++) {
list.push('
'+this._formatItem(found[i])+'');
}
$(this.overlay.container.get('ul')[0]).html(list.join(''));
this.show();
if (this.opts.activeOnShow !== false) nextItem(this);
}
else {
this.hide();
}
}
/**
@private
@description Make the overlay not visible.
*/
glow.widgets.AutoSuggest.prototype.hide = function() { /*debug*///console.log("hide()")
this.overlay.hide();
}
/**
@private
@description Make the overlay visible.
*/
glow.widgets.AutoSuggest.prototype.show = function() { /*debug*///console.log("show()")
this._original = this.val();
place(this);
this.overlay.show();
}
/**
@private
@description Get the offset of the currently selected item in the results.
*/
glow.widgets.AutoSuggest.prototype.getSelectedOffset = function() {
if (!isVisible(this)) return -1;
var items = this.overlay.container.get('li'); // TODO: handle embedded list items
for (var i = 0; i < items.length; i++) {
if ($(items[i]).hasClass('active')) return i;
}
return -1;
}
}
});
(window.gloader || glow).module({
name: 'glow.widgets.AutoComplete',
library: ['glow', '1.7.0'],
depends: [[
'glow', '1.7.0',
'glow.widgets.AutoSuggest'
]],
builder: function(glow) {
/* private fields *************************************************************/
var $ = glow.dom.get, // shortcuts
events = glow.events,
anim = glow.anim;
/* private functions **********************************************************/
/* constructor ****************************************************************/
/**
@constructor
@name glow.widgets.AutoComplete
@see
AutoSuggest user guide
@deprecated Since version 1.2.2. You should now use glow.widgets.AutoSuggest with the 'complete' constructor option
@description Adds the ability to complete what has been typed to the AutoSuggest widget.
This widget acts as a thin wrapper to the {@link glow.widgets.AutoSuggest}
widget and adds the ability to automatically append the missing text
to complete what has been typed by the user. Note that because the
completed item must be text in order to appear in the input element,
this widget can only process data items that are strings.
@param {NodeList | String} inputElement
A NodeList or css selector that points to a text input element.
@param {Object[] | String | Function} dataSource Either a dataSource
object, a function that returns a dataSource object or a URL that
returns a dataSource object.
@param {Object} opts All options are passed directly to the wrapped instance of
{@link glow.widgets.AutoSuggest}.
@param {string} opts.delim Character to delimit multiple entries.
If defined, the user can enter more than one term into the text input
element, delimited by this string (and any spaces surrounding the delimiter).
*/
glow.widgets.AutoComplete = function(inputElement, dataSource, opts) { /*debug*///console.log('new glow.widgets.AutoComplete('+inputElement+', '+dataSource+', '+opts+')');
opts = opts || {};
/**
@object
@name glow.widgets.AutoComplete#autosuggest
@type glow.widgets.AutoSuggest
@description The wrapped instance of glow.widgets.AutoSuggest used to implement this widget.
*/
this.autosuggest = new glow.widgets.AutoSuggest(inputElement, [], opts);
this.autosuggest._indexer = function(dataItem) { return dataItem.toString(); }
this.autosuggest._formatItem = function(dataItem) { return dataItem.toString(); }
this.autosuggest.setData(dataSource);
var that = this.autosuggest;
events.addListener(
that,
'itemActive',
function(e) {
var selectedOffset = that.getSelectedOffset();
if (selectedOffset == -1) return false;
that.suggest(that._found[selectedOffset]);
return true;
}
);
}
/* public fields **************************************************************/
/* public methods *************************************************************/
}
});
(window.gloader || glow).module({
name: "glow.widgets.Carousel",
library: ["glow", "1.7.0"],
depends: [[
"glow", "1.7.0",
"glow.dom",
"glow.events",
"glow.anim",
"glow.widgets",
'glow.i18n'
]],
builder: function(glow) {
var $ = glow.dom.get,
events = glow.events,
dom = glow.dom,
$i18n = glow.i18n;
$i18n.addLocaleModule("GLOW_WIDGETS_CAROUSEL", "en", {
PREVIOUS : "previous",
NEXT : "next"
});
/**
@name glow.widgets.Carousel
@class
@description Scroll through a list of items
Widgets must be called in a glow.ready() call.
@param {glow.dom.NodeList} container The container of items to display as a carousel.
@param {Object} opts Options object
@param {Boolean} [opts.loop=false] True if the carousel should loop when it gets to the end.
When using the loop option, it is good practice to indicate to the user how far they have scrolled through the carousel. We recommend the use of the pageNav parameter when allowing the user the loop to the begining of the carousel.
@param {Number} [opts.animDuration=0.2] Duration of animation in seconds.
@param {Function} [opts.animTween=glow.tweens.easeBoth()] A Glow tween function to animate scrolling.
@param {Number|String} [opts.step=1] Number of items to scroll by. When the string 'page' is passed in the carousel will be set to scroll by the number of viewable items.
@param {Function} [opts.onAddItem] Event shortcut.
{@link glow.widgets.Carousel.AddItem See documentation below}
@param {Function} [opts.onRemoveItem] Event shortcut.
{@link glow.widgets.Carousel.RemoveItem See documentation below}
@param {Function} [opts.onScroll] Event shortcut.
{@link glow.widgets.Carousel.onScroll See documentation below}
@param {Function} [opts.onAddItem] Event shortcut.
{@link glow.widgets.Carousel.AddItem See documentation below}
@param {Function} [opts.onAfterScroll] Event shortcut.
{@link glow.widgets.Carousel.AfterScroll See documentation below}
@param {Function} [opts.onItemClick] Event shortcut.
{@link glow.widgets.Carousel.ItemClick See documentation below}
@param {Boolean} [opts.vertical=false] Used to create a vertical oriented carousel
@param {Number} [opts.size] Number of items the carousel displays at any one time
By default, the carousel will fill all available horizontal (or vertical) space.
@param {Boolean} [opts.scrollOnHold=true] Continue to scroll while button is held down.
@param {Boolean} [opts.slideOnScroll=false] Use sliding animation when scrolling continuously.
@param {String} [opts.theme="light"] Visual Theme
Only applies when using the default template. Currently supported themes are "dark" and "light".
@param {Boolean} [opts.pageNav=false] Display navigational control next to the carousel.
@param {String} [opts.id] An ID to apply to the container element.
@param {String} [opts.className] List of additional space separated class names to apply to the container.
Space separated values.
@example
var myCarousel = new glow.widgets.Carousel("#carouselContainer", {
loop: true,
size: 4,
step: 4
});
@see
Carousel user guide
*/
/**
@name glow.widgets.Carousel#event:addItem
@event
@description One or more items about to be added to the carousel.
Canceling this event stops the items being added.
@param {glow.events.Event} event Event Object
@param {glow.dom.NodeList} event.items NodeList of items being added
*/
/**
@name glow.widgets.Carousel#event:removeItem
@event
@description Item about to be removed.
Canceling this event results in the item not being removed.
@param {glow.events.Event} event Event Object
@param {glow.dom.NodeList} event.item Represents the item to be removed
@param {Number} event.itemIndex Index of the item to be removed
*/
/**
@name glow.widgets.Carousel#event:scroll
@event
@description Fired before scrolling.
@param {glow.events.Event} event Event Object
@param {Number} event.currentPosition Carousel's current position
*/
/**
@name glow.widgets.Carousel#event:afterScroll
@event
@description Fired after scrolling animation is complete.
@param {glow.events.Event} event Event Object
@param {Number} event.position The carousel's new position
*/
/**
@name glow.widgets.Carousel#event:itemClick
@event
@description Fired when an item within the carousel is clicked.
The event contains properties 'item' an html element
representing the clicked item, and 'itemIndex', the index of the item
clicked.
@param {glow.events.Event} event Event Object
@param {glow.dom.NodeList} event.item Represents the item clicked
@param {Number} event.itemIndex Index of the item clicked
*/
/* Public Properties */
/**
@name glow.widgets.Carousel#element
@type glow.dom.NodeList
@description Carousel HTML Element.
@example
var myCarousel = new glow.widgets.Carousel("#carouselContainer");
glow.events.addListener(myCarousel, "itemClick", function(e) {
alert(this.element) // returns the HTML element "#carouselContainer"
});
*/
/**
@name glow.widgets.Carousel#items
@type glow.dom.NodeList
@description NodeList of the items within the carousel.
@example
var myCarousel = new glow.widgets.Carousel("ul#carouselContainer");
glow.events.addListener(myCarousel, "itemClick", function(e) {
alert(this.items) // returns an array of <li /> elements in "ul#carouselContainer"
});
*/
function Carousel(container, opts) {
var localeModule = $i18n.getLocaleModule("GLOW_WIDGETS_CAROUSEL");
opts = opts || {}; // prevent errors when trying to read properties of undefined opts
// create carousel content
this._content = $(container);
this._startContentHeight = this._content[0].offsetHeight;
this._content.addClass("carousel-content") // add a css selector hook
.css("zoom", "1"); // hack: adds "haslayout" on ie
this.items = this._content.children();
// set option defaults
opts = this._opts = glow.lang.apply(
{
animDuration: 0.4,
animTween: glow.tweens.easeBoth(),
loop: false,
step: 1,
vertical: false,
scrollOnHold: true,
slideOnScroll: false,
theme: "light",
pageNav: false
},
opts
);
// cast the integers
opts.animDuration = Number(opts.animDuration);
opts.size = Number(opts.size);
// build HTML
this.element =
dom.create("