// The global array of objects that have been instanciated
if (!Bs_Objects) {var Bs_Objects = [];};
/**
* A Slider Component.
*
* Features:
* - IE6 and NS(Mozilla7) compliant.
* - Lets you add a slider to your page. It simulates a HTML-form text field; so your form-handling will not change.
* - You may use your customized images.
* - Able to attach onClick- and onChange-events to execute your JS-code when checked/changed.
*
* Includes (+Dependencies):
*
*
*
*
*
*
*
* How to use:
* 1. Have a look at the example (see example link below)
* 2. Create a function in the HTML-header called init(). Place the javascript code
* that instanciates and inits this component into init().
* 3. Place an 'onLoad' in your body-tag: e.g.
* 4. In the HTML body: Place a div- or span-tag with an unique ID where you want the component to be.
*
* How it works:
* - [After instanciating and initializing the object]. Call the drawInto([tag id]) method.
* This will search the HTML code for a tag with the given id and insert HTML- and JS- code
* dynamically (using DOM) to display the component and handle it.
*
* What is returned to the server:
*
* +------------------------+------------------------------------------------+
* | [tag id] +"_value" | int, The slider value |
* +------------------------+------------------------------------------------+
* In versions 4.4 and before
* +--------------------------------------------+----------------------------+
* | [varible name of the object] +"_value" | int, The slider value |
* +--------------------------------------------+----------------------------+
*
* This class generates a normal HTML text field and saves it's state in there.
* It's not visible because it is set to display:none (invisible) but (when used in a form),
* it will be submitted like any other HTML-form-field. To override this name see {@link fieldname}.
*
* Event-Handling: (see {@link attachOnClick()}, {@link attachOnChange()})
* - You can a callback function for certain events onto this component
* (events are things like onClick, onChange ... aso)
*
* Snippet 1) Attaching a callback function:
*
* var mySlider = new Bs_Slider();
* mySlider.attachOnChange(yourCallbackFunctionName);
*
* The function you pass should be able to receive 3 parameters.
* - The componentObj is an instance of this class and allows you to access it the
* component that triggered the event.
* - newValue is the new value that was set, new position is the new position in pixels.
*
* function yourCallbackFunctionName(componentObj, newValue, newPosition) {
* // do some stuff.
* }
* if you're using the 2-knob slider then there is a 4th param: knobNumber.
*
*
* Customized images:
* - Set the path to your image-dir {@link imgDir}
* - Then use following methods setup the colorbar and to place the images you intend to use:
* {@link colorbar}
* {@link setBackgroundImage()}
* {@link setSliderIcon()}
* {@link setArrowIconLeft()}, {@link setArrowIconRight()}
*
* @example example1.html
* @example example2.html
*
* @author andrej arn , sam blum
* @package javascript_components
* @subpackage slider
* @copyright blueshoes.org
*/
function Bs_Slider(theFieldnamePrefix) {
/**
* Unique Object/Tag ID is initialized in the constuctor.
* Based on this._id. Can be used in genarated JS-code as ID. Is set together
* from the classname + this._id (see _constructor() code ).
*
* @access private
* @var string
*/
this._objectId;
/**
* When submitting the form, you'll receive the value under this name.
* In other words you'll receive the data back to the server as if you had placed
*
* into your HTML-form.
*
* Note:
* - If not set the field name will be genarated as instanceName +"_value"
*
* @access public
* @var string
*/
this.fieldName;
this.fieldName2;
/**
* If the whole slider is disabled or not.
* @access private
* @var bool
* @see setDisabled()
*/
this._disabled = false;
/**
* The slider direction (horizontal/vertical)
*
* @access public
* @var int direction
* @todo implement vertically
*/
this.direction = 0;
/**
* The width of the sliding part in pixel.
* Note: This is not the full width. It excludes the input field and the push buttons.
* @access public
* @var int (default is 100 pixel)
*/
this.width = 100 + 'px';
/**
* The height of the sliding part in pixel.
* This is not the full height. it excludes the input field and the push buttons.
* @access public
* @var int (default is 20 pixel)
*/
this.height = 20 +'px';
/**
* The lowest possible value. It may be lower than 0 afaik :-)
* @access public
* @var int (default is 0)
*/
this.minVal = 0;
/**
* The highest possible value.
* @access public
* @var int (default is 100)
*/
this.maxVal = 100;
/**
* The default value (when the slider gets initialized).
* Note:
* - Can initially have alower or higher value than minVal/maxVal.
* This is a feature. You can detect if the used has set any value this way.
* Only values in the range of minVal - maxVal can be set and are displayed.
* @access public
* @var int
*/
this.valueDefault = 0;
/**
* How much units to slide on an arrow click.
* If set to 0 then the arrows won't be displayed.
* Something like 0.5 is possible as well.
* @access public
* @var int (default is 1)
* @see this.wheelAmount
*/
this.arrowAmount = 1;
/**
* if activated then a mouseover is already enough for the arrow to fire. it then
* does not need a click. it continues to fire until onmouseout.
* @access public
* @var bool arrowMouseOver
* @since bs-4.6
* @see var this.arrowKeepFiringTimeout
*/
this.arrowMouseOver = false;
/**
* every this milliseconds the onChangeByArrow() events keep firing.
* set to 0 if you don't want that.
* @access public
* @var int arrowKeepFiringTimeout
*/
this.arrowKeepFiringTimeout = 10;
/**
* @access private
* @var bool _stopFireArrowFlag
* @see this.stopFireArrow()
*/
this._stopFireArrowFlag = false;
/**
* how much to scroll when the mouse wheel is used.
* note: the mouse wheel is supported by ie only (as of 2004/03).
* @access public
* @var int wheelAmount
* @see this.arrowAmount
* @since bs-4.6
*/
this.wheelAmount = 5;
/**
* If and how the colorbar feature should be used.
*
* - If it's a string then it will be interpreted as a css class.
*
* - If it's an array (hash) (or object with vars) the keys will be used to
* generate style settings.
* You can achieve the same results using both ways, except for 'widthDifference'.
*
* - You can use both (array with css class as elemenet of the array) to
* set additional css properties. I can't think of any, but maybe you do.
*
* if you give it an array, it can have these settings:
* KEY DEFAULT
* cssClass -nothing-
* color 'orange' if cssClass is not set, otherwise -nothing-
* height -nothing-
* widthDifference 0
* offsetLeft -nothing-
* offsetTop -nothing-
*
* coments:
* color:
* if you don't see the colorbar, you prolly have a cssClass defined
* but neither there a color defined not in the array ('color' element).
* widthDifference:
* the width of the colorbar is always from the left side to where the
* handle (slider) is. so the left side of the slider bar is colored.
* it may be (depending on your design) that you need to have the color
* bar a little bit larger or smaller. you can set an amound of pixels
* here, it may even be negative.
* offsetLeft:
* if you use a cssclass, you can specify something like left:5px;
* if you use arrows, you have to take the width of the left arrow
* into account. if you use offsetLeft, you don't. this is done for you.
*
*
* anyway play with the values until you get what you want.
*
* So if you want to use a css class and want to specify a widthDifference,
* do something like
*
* arr = new Array()
* arr['cssClass'] = 'yourClass';
* arr['widthDifference'] = -5;
*
* and you're done.
*
* On the other hand it's handy if you don't have to create a css class and make
* sure it always ships with your file. well, enough of comments for this one.
*
* @access public
* @var mixed (array or string)
*/
this.colorbar;
this.colorbar2;
/**
* The z-index the slider will use. you may want to change this if you have
* elements on your page that overlap this slider (floating stuff or so).
* @access public
* @var int (default is 1000)
*/
this.baseZindex = 1000;
/**
* If you want to move the whole slider object with everything on the x-axis
* then set a value here.
* - example: -5 means move the whole thing 5 pixel to the left.
* - example: 10 means move the whole thing 10 pixel to the right.
* @access public
* @var int
* @see moveY
* @since bs4.3
*/
this.moveX = 0;
/**
* If you want to move the whole slider object with everything on the y-axis
* then set a value here.
* - example: -5 means move the whole thing 5 pixel up the page.
* - example: 10 means move the whole thing 10 pixel down the page.
* @access public
* @var int
* @see moveX
* @since bs4.3
*/
this.moveY = 0;
/**
* The base path for the image folder.
* @deprecated use imgDir
* @access private
*/
this.imgBasePath;
/**
* The base path for the image folder.
*
* Examples: (NOTE: The path has to end with a slash.)
* - 'http://www.domain.com/foo/' <= with domain
* - '/my/image/path/' <= absolute path without domain
* - '../some/path/' <= relative path
*
*
* Default is: '/_bsJavascript/components/slider/img/'
* Check this folder and the other folders around there for other styles.
*
* @access public
* @var string
*/
this.imgDir = '/_bsJavascript/components/slider/img/';
/**
* The name of the background image in the imgDir.
* Set this using setBackgroundImage(), so look there.
* @access private
* @var string
* @see setBackgroundImage()
*/
this._bgImgSrc;
/**
* How a background-image should be repeated. it's a css property.
* - example: 'no-repeat'
* set this using setBackgroundImage(), so look there.
* @access private
* @var string
* @see setBackgroundImage()
*/
this._bgImgRepeat;
/**
* Additional css style string for the background image.
* set this using setBackgroundImage(), so look there.
* @access private
* @var string
* @see setBackgroundImage()
*/
this._bgImgCssStyle;
/**
* @access private
* @var string
* @see setBackgroundImageLeft()
*/
this._bgImgLeftSrc;
/**
* @access private
* @var int
* @see setBackgroundImageLeft()
*/
this._bgImgLeftWidth;
/**
* @access private
* @var int
* @see setBackgroundImageLeft()
*/
this._bgImgLeftHeight;
/**
* @access private
* @var string
* @see setBackgroundImageRight()
*/
this._bgImgRightSrc;
/**
* @access private
* @var int
* @see setBackgroundImageRight()
*/
this._bgImgRightWidth;
/**
* @access private
* @var int
* @see setBackgroundImageRight()
*/
this._bgImgRightHeight;
/**
* The slider handle image name. (knob)
* Set this using setSliderIcon().
* @access private
* @var int
* @see setSliderIcon(), _sliderImgWidth, _sliderImgHeight
*/
this._sliderImgSrc;
/**
* The width of the slider handle image.
* Set this using setSliderIcon().
* @access private
* @var int
* @see setSliderIcon(), _sliderImgSrc, _sliderImgHeight
*/
this._sliderImgWidth;
/**
* The height of the slider handle image.
* Set this using setSliderIcon().
* @access private
* @var int _sliderImgHeight
* @see setSliderIcon(), _sliderImgSrc, _sliderImgWidth
*/
this._sliderImgHeight;
/**
* Used to set a CSS class name for the slider container.
* @access public
* @var string
*/
this.styleContainerClass;
/**
* Used to set a CSS class name for the value input field.
* @access public
* @var string
*/
this.styleValueFieldClass = 'smalltxt spanSliderField';
this.styleValueFieldClass2 = 'smalltxt spanSliderField';
/**
* Used to set a CSS class name for the value text span.
* @access public
* @var string
*/
this.styleValueTextClass = 'smalltxt spanSliderText';
this.styleValueTextClass2 = 'smalltxt spanSliderText';
/**
* The background color. hex code or named color.
* examples: 'blue', 'green', '#000000'
* @access public
* @var string
*/
this.bgColor;
/**
* The name of the left arrow icon.
* @access private
* @var string
* @see setArrowIconLeft()
*/
this._arrowIconLeftSrc;
/**
* The width of the left arrow icon.
* @access private
* @var string
* @see setArrowIconLeft()
*/
this._arrowIconLeftWidth = 0;
/**
* The height of the left arrow icon.
* @access private
* @var string
* @see setArrowIconLeft()
*/
this._arrowIconLeftHeight = 0;
/**
* A CSS style string to use in the image tag.
* @access private
* @var string arrowIconLeftCssStyle
* @see setArrowIconLeft()
* @todo all
*/
this._arrowIconLeftCssStyle = 0;
/**
* The name of the right arrow icon.
* @access private
* @var string
* @see setArrowIconRight()
*/
this._arrowIconRightSrc;
/**
* The width of the right arrow icon.
* @access private
* @var int
* @see setArrowIconRight()
*/
this._arrowIconRightWidth = 0;
/**
* The height of the right arrow icon.
* @access private
* @var int
* @see setArrowIconRight()
*/
this._arrowIconRightHeight = 0;
/**
* A CSS style string to use in the image tag.
* @access private
* @var string
* @see setArrowIconRight()
* @todo all
*/
this._arrowIconRightCssStyle = 0;
/**
* The step (interval) of the values.
*
* Examples: 0, 1, 2, 3 ... has an interval of 1
* 0, 0.5, 1, 1.5 ... has an interval of 0.5
*
*
* @access public
* @var number (int or real, whatever)
*/
this.valueInterval = 1;
this.valueInterval2 = 1;
/**
* Should we display the input field (with value) to the right?
*
*
* 0 = no
* 1 = show as text (not implemented yet, will be shown as #2)
* 2 = show as input field (changable). this is the default.
* 3 = show as text, onmouseover becomes an input field.
*
*
* The trick is to keep it invisible if set to false. we need it because it's
* the holder of the internal value. could be recoded, if you want to...
*
* @access public
* @var int useInputField
* @see inputTextFieldEvent
*/
this.useInputField = 2;
this.useInputField2 = 2;
/**
* If {@link useInputField} is set to 3 we toggle. but when?
* default is onMouseOver (over) but it can be set to 'click'
* (onClick).
* @access public
* @var string ('over' or 'click')
* @see useInputField
*/
this.inputTextFieldEvent = 'over';
/**
* if a second knob should be used.
* default is false.
* @access public
* @since bs-4.6
* @status experimental
*/
this.useSecondKnob;
/**
* if the 2nd value can be lower than the 1st, and vice versa.
* per default value crossing is blocked.
* @access public
* @since bs-4.6
* @status experimental
* @see useSecondKnob
*/
this.preventValueCrossing;
/**
* ?
* @access private
*/
this.ctrl;
this.ctrl2;
/**
* The real value we have.
* in the beginning it will be set to this.valueDefault.
* WARNING:
* - don't mix this._valueInternal and this.valueInterval.
* it's not only that one is private and the other is not,
* it's that one is the internal value, the other is the STEP.
* maybe step would have been a better name. got that?
* @access private
* @var double
* @see getValue()
*/
this._valueInternal;
this._valueInternal2;
/**
* How the slider should be seen in the browser
* @access private
* @var int
* @see setDisplay()
*/
this._display = 2;
/**#@+
* Ids and objects
* @access private
*/
this._arrowLeftContainerId;
this._arrowLeftContainerObj;
this._arrowLeftIconId;
this._arrowLeftIconObj;
this._arrowRightContainerId;
this._arrowRightContainerObj;
this._arrowRightIconId;
this._arrowRightIconObj;
this._valueContainerId;
this._valueContainerObj;
this._handleId;
this._handleObj;
this._valueFieldId;
this._valueFieldObj;
this._valueFieldObj2;
this._valueTextId;
this._valueTextObj;
this._valueTextObj2;
this._slideBarId;
this._slideBarObj;
this._colorbarId;
this._colorbarObj;
this._colorbarObj2;
/**#@-*/
/**#@+
* positions and measurements in pixels
* @access private
*/
this._posUpperLeftX;
this._posUpperLeftY;
this._posSlideStart;
this._posSlideEnd;
/**#@-*/
/**
* That's this.width - this._sliderImgWidth. Slide area without the handle.
* If you don't get this, draw a slider yourself. maybe you'll
* figure it out then. :-)
* @access private
* @var int
*/
this._slideWidth;
//attached (assigned) event functions (that exist in the global scope):
/**
* Array holding all the information about attached events.
* The structure can be like these:
*
* 1. attach a function directly
* syntax: _attachedEvents['eventName'] = yourFunctionName;
* 2. attach some javascript code
* syntax: _attachedEvents['eventName'] = "yourCode();";
* example: _attachedEvents['eventName'] = "alert('hi'); callSomething('foo');";
* just keep in mind that you cannot use vars in that code, because when it
* gets executed that will be another scope (unless the vars are global...)
* 3. attach multiple things for the same event
* syntax: _attachedEvents['eventName'] = new Array;
* _attachedEvents['eventName'][0] = yourFunctionName;
* _attachedEvents['eventName'][1] = "yourCode();";
* possible values for 'eventName' are:
* 'onChange'
*
*
* @access private
* @var array (hash, see above)
* @see attachEvent();
*/
this._attachedEvents;
/**
* Fires whenever the value changes. that can happen by sliding,
* hitting arrow buttons or typing in values into the input field.
* @access private
* @var function
* @see attachOnChange()
*/
this.eventOnChange;
/**#@+
* Attached function for the slide start, move and end event.
* @access private
* @var function
*/
this.slideStartCB;
this.slideMoveCB;
this.slideEndCB;
/**#@-*/
/**
* the pseudo constructor.
* @access private
* @return void
*/
this._constructor = function(theFieldnamePrefix) {
// Put this instance into the global object instance list
this._id = Bs_Objects.length;
Bs_Objects[this._id] = this;
this._objectId = "Bs_Slider_"+this._id;
// For copatibillity we still init "objectName"
this.objectName = this._objectId;
// In V4.4 the fieldname used to be given by the constuctor-parameter. So if
// a paramter is passed in the constructor, we still use it as fieldname prefix
if (typeof(theFieldnamePrefix) == 'string') {
this.fieldName = theFieldnamePrefix + '_value';
this.fieldName2 = theFieldnamePrefix + '2_value';
this.objectName = theFieldnamePrefix;
}
}
/**
* Makes sure everything is ready to use. sets some default values if needed.
* @access private
* @return void
*/
this._checkup = function() {
if (typeof(this.minVal) == 'undefined') this.minVal = 0;
if (typeof(this.maxVal) == 'undefined') this.maxVal = 10;
if (typeof(this.valueDefault) == 'undefined') this.valueDefault = this.minVal;
this._valueInternal = this.valueDefault;
if (this.useSecondKnob) {
if (typeof(this.minVal2) == 'undefined') this.minVal2 = 0;
if (typeof(this.maxVal2) == 'undefined') this.maxVal2 = 10;
if (typeof(this.valueDefault2) == 'undefined') this.valueDefault2 = this.maxVal2;
this._valueInternal2 = this.valueDefault2;
}
// This is for backward compatabillity only --sam 2003-06
if (typeof(this.imgBasePath) == 'string') this.imgDir = this.imgBasePath;
}
/**
* loads a skin by its name.
*
* you can do the same with manual calls to setSliderIcon() etc, but this is quick and easy.
*
* available skins:
*
*
* @access public
* @param string skinName
* @return bool
* @since bs-4.6
*/
this.loadSkin = function(skinName) {
switch (skinName) {
case 'winxp':
case 'winxp-scrollbar-horizontal':
this.useInputField = 0;
this.height = 16;
this.imgDir = '/_bsJavascript/components/slider/img/winxp/';
this.setSliderIcon('horizontal_scrollbar_knob.gif', 17, 16);
this.setArrowIconLeft('horizontal_scrollbar_arrowLeft.gif', 17, 16);
this.setArrowIconRight('horizontal_scrollbar_arrowRight.gif', 17, 16);
break;
case 'h2ogtk2-scrollbar-horizontal':
this.useInputField = 0;
this.height = 17;
this.imgDir = '/_bsJavascript/components/slider/img/h2ogtk2/';
this.setSliderIcon('horizontal_knob.gif', 30, 17);
this.setBackgroundImage('horizontal_background.gif', 'repeat');
this.setArrowIconLeft('horizontal_arrowLeft.gif', 15, 17);
this.setArrowIconRight('horizontal_arrowRight.gif', 15, 17);
break;
default:
return false;
}
return true;
}
/**
* Render function.
* @access public
* @param string tagId (ID of the element in that we render the slider.)
* @return void
*/
this.render = function(tagId) {
this._checkup();
this._containerId = 'co' + tagId;
this._handleId = 'po' + tagId;
this._arrowLeftContainerId = 'alc' + tagId;
this._arrowLeftIconId = 'ali' + tagId;
this._arrowRightContainerId = 'arc' + tagId;
this._arrowRightIconId = 'ari' + tagId;
this._valueContainerId = 'vc' + tagId;
this._valueFieldId = 'vf' + tagId;
if (typeof(this.fieldName) == 'undefined') this.fieldName = tagId + '_value';
if (typeof(this.fieldName2) == 'undefined') this.fieldName2 = tagId + '2_value';
this._valueTextId = 'vt' + tagId;
this._slideBarId = 'bar' + tagId;
this._colorbarId = 'cb' + tagId;
var divWidth = this.width; // + this._sliderImgWidth;
var divHeight = this.height;
//var completeWidth = this.width + this._arrowIconLeftWidth + this._arrowIconRightWidth + this._sliderImgWidth +15; //15 just to add some space.
var out = new Array();
var outI = 0;
var localOffset = 0;
//container begin
out[outI++] = '
';
out[outI++] = '
';
out[outI++] = '