*
* 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; //alert(this.fieldName) /** * If the whole slider is disabled or not. * @access private * @var bool * @see setDisabled() */ this._disabled = false; /** * The slider direction (horizontal/vertical) *
* 0 = horizontally (default) * 1 = vertically (currently not implemented) ** @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; /** * 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; /** * 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 = 0;
/**
* 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 = -5; // initialy it was 0 (zero)
/**
* 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 = -5;
/**
* 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 = 'images/';
this.imgDir = '';
/**
* 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=180.00; // this was not set it has to be set 35 for move the slide pointer too. //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;
//alert('this.fieldName=='+this.fieldName)
}
}
/**
* 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;
}
/********THIS IS THE MOST IMPORTENT PART OF THIS JS IT FIRST CREATE AN INNERHTML TEXT AND THEN CALL ALL THE FUNCTIONS***********/
/**
* Render function.
* @access public
* @param string tagId (ID of the element in that we render the slider.)
* @return void
*/
this.render = function(tagId) {
//alert('tagId==='+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++] = '';
//alert(this.moveX);
if (this.useSecondKnob) {
out[outI++] = this._renderInputFieldAndText(localOffset, 1);
if (this['useInputField'] != 0) {
localOffset += 15; // value was +35. display the right scroll value at the above the right bar.
}
}
//knob
//alert(this._handleId);
out[outI++] = '';
//knob 2
if (this.useSecondKnob) {
out[outI++] = '';
}
//arrow left
if ((this.arrowAmount > 0) && this._arrowIconLeftSrc) {
out[outI++] = '
';
out[outI++] = '
';
out[outI++] = '
';
out[outI++] = '
';
localOffset += (this.direction == 0) ? this._bgImgLeftWidth : this._bgImgLeftHeight;
}
//main layer
out[outI++] = '';
out[outI++] = '
';
out[outI++] = '
';
localOffset += (this.direction == 0) ? this._bgImgRightWidth : this._bgImgRightHeight;
}
//arrow right
if ((this.arrowAmount > 0) && this._arrowIconRightSrc) {
var tmpLeft = (this.direction == 0) ? localOffset : 0;
var tmpTop = (this.direction == 0) ? 0 : localOffset;
out[outI++] = '';
out[outI++] = '
this.minVal)
{
//how many percent is valueDefault from maxVal-minVal?
var hundertPercent = this.maxVal - this.minVal;
var myPercent = (this.valueDefault-this.minVal) * 100 / hundertPercent;
//now how much is that from the given length?
this._currentRelSliderPosX += (myPercent * this._slideWidth / 100);
}
//alert(this._currentRelSliderPosX);
if (this.direction == 0)
{
//alert(this._currentRelSliderPosX+"--0--");
//alert(this._currentRelSliderPosX);
this._handleObj.style.left = (this._currentRelSliderPosX);// + 35.00); // to fix the position of left knob bar.
}
else
{
//alert(this._currentRelSliderPosX+"--1--");
this._handleObj.style.top = this._currentRelSliderPosX;
}
this._handleObj.style.display = 'block';
//handleObj = handlespan
temp = ech_attachMouseDrag(this._handleObj,this.slideStart,null,this.slideMove,null,this.slideEnd,null,null,null);
temp = temp.linkCtrl(getDivImage('', 'poImg' + tagId));
this.ctrl = temp;
this.ctrl.sliderObj = this; //add back reference
this.ctrl.knobId = 1;
var x = getDivLeft(this._handleObj);
var y = getDivTop(this._handleObj);
y = 0; //z3b
if (this.direction == 0)
{ // horizontal
this.ctrl.minX = this._posSlideStart;
this.ctrl.maxX = this._posSlideEnd;
this.ctrl.minY = y;
this.ctrl.maxY = y;
}
else { // vertical
this.ctrl.minX = x;
this.ctrl.maxX = x;
this.ctrl.minY = this._posSlideStart;
this.ctrl.maxY = this._posSlideEnd;
}
if (this.useSecondKnob)
{
this._handleObj2 = document.getElementById(this._handleId + '2');
this._valueContainerObj2 = document.getElementById(this._valueContainerId + '2');
this._valueFieldObj2 = document.getElementById(this._valueFieldId + '2'); //may fail if only 1 field used.
this._valueTextObj2 = document.getElementById(this._valueTextId + '2');
this._colorbarObj2 = document.getElementById(this._colorbarId + '2');
//this._slideWidth2 = (this.direction == 0) ? this.width - this._sliderImgWidth2 : this.height - this._sliderImgHeight2;
this._slideWidth2 = this._slideWidth;
this._posSlideEnd2 = this._posSlideStart + this._slideWidth2;
this._currentRelSliderPosX2 = this._posSlideStart;
if (this.valueDefault2 > this.minVal2) {
//how many percent is valueDefault from maxVal-minVal?
var hundertPercent = this.maxVal2 - this.minVal2;
var myPercent = (this.valueDefault2-this.minVal2) * 100 / hundertPercent;
//now how much is that from the given length?
this._currentRelSliderPosX2 += (myPercent * this._slideWidth2 / 100);
}
if (this.direction == 0)
{
this._handleObj2.style.left = this._currentRelSliderPosX2;
}
else
{
this._handleObj2.style.top = this._currentRelSliderPosX2;
}
this._handleObj2.style.display = 'block';
//handleObj = handlespan
temp2 = ech_attachMouseDrag(this._handleObj2,this.slideStart,null,this.slideMove,null,this.slideEnd,null,null,null);
temp2 = temp2.linkCtrl(getDivImage('', 'poImg' + tagId + '2'));
this.ctrl2 = temp2;
this.ctrl2.sliderObj = this; //add back reference
this.ctrl2.knobId = 2;
var x = getDivLeft(this._handleObj2);
var y = getDivTop(this._handleObj2);
y = 0; //z3b
if (this.direction == 0) { // horizontal
this.ctrl2.minX = this._posSlideStart;
this.ctrl2.maxX = this._posSlideEnd2;
this.ctrl2.minY = y;
this.ctrl2.maxY = y;
}
else
{ // vertical
this.ctrl2.minX = x;
this.ctrl2.maxX = x;
this.ctrl2.minY = this._posSlideStart;
this.ctrl2.maxY = this._posSlideEnd2;
}
}
this._updateColorbar(this._currentRelSliderPosX, 1);
this._updateColorbar(this._currentRelSliderPosX2, 2);
//alert(out);
}
/**
* @access private
* @param ? localOffset
* @param int knobId (default is 1 can be 2.)
* @return string
*/
/***********************************modifies here******************************************************/
this._renderInputFieldAndText = function(localOffset, knobId) {
//alert('localOffset==='+localOffset);
//alert(knobId);
var k = ((typeof(knobId) == 'undefined') || (knobId == 1)) ? '' : '2';
var out = new Array();
var styleValueFieldClass = (this['styleValueFieldClass'+k]) ? ' class="' + this['styleValueFieldClass'+k] + '"' : '';
var styleValueTextClass = (this['styleValueTextClass'+k]) ? ' class="' + this['styleValueTextClass'+k] + '"' : '';
var cssAlign = (this.useSecondKnob && (knobId == 1)) ? 'float:left;' : '';
//if (this['useInputField'+k] != 0) {
//alert('localofset==='+localOffset);
if(localOffset == 190)
{
localOffset=145;
}
else if(localOffset == 0)
{
localOffset=15;
}
//alert(this._slideBarId);
if(this._slideBarId == 'barsliderDiv1')
{
//var amountin= '($)';
var amountin= '';
if(localOffset == 145)
{
localOffset=130;
}
else if(localOffset == 15)
{
localOffset=5;
}
}
else if(this._slideBarId == 'barsliderDiv2')
{
//var amountin= '(sqft)';
var amountin= '';
if(localOffset == 145)
{
localOffset=130;
}
else if(localOffset == 15)
{
localOffset=5;
}
}
else if(this._slideBarId == 'barsliderDiv3')
{
//var amountin= '(sqft)';
var amountin= '';
if(localOffset == 145)
{
localOffset=130;
}
else if(localOffset == 15)
{
localOffset=5;
}
}
else
{
var amountin= '';
}
if(knobId==1) { posknobval=-38; addsomevaluetoknob=100; knobalign='left';}else{ posknobval=-38; addsomevaluetoknob=-65; knobalign='right';}
out[out.length] = '
'; //} //alert(this['useInputField'+k]); if (this['useInputField'+k] == 1) { //view only //alert('hiii'); var value=amountin + this['valueDefault'+k]; var newvalue =addCommas(value); out[out.length] = '
' + newvalue + ' ';
out[out.length] = '';
}
else if (this['useInputField'+k] == 3)
{
//alert('hiii');
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
var value=amountin + this['valueDefault'+k] ;
//var newvalue1 =addCommas(value);
//var newvalue1 =amountin + this['valueDefault'+k] ;
out[out.length] = '' + addCommas(amountin + this['valueDefault'+k]) + '';
}
else
{ //0
//alert('hii');
/*function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}*/
var value= this['valueDefault'+k] ;
//var newvalue1 =addCommas(value);
out[out.length] = '';
}
//if (this['useInputField'+k] != 0) {
out[out.length] = ' ';
//}
return out.join('');
}
/********THIS IS THE MOST IMPORTENT PART OF THIS JS IT FIRST CREATE AN INNERHTML TEXT AND THEN CALL ALL THE FUNCTIONS***********/
/********************************************ENDS HERE************************************************************/
/*********************************************************modifies here end**************************************************/
/**
* Renders the checkbox component and places it into the page.
*
* @access public
* @param string tagId Id of the tag. (Use
'; //} //alert(this['useInputField'+k]); if (this['useInputField'+k] == 1) { //view only //alert('hiii'); var value=amountin + this['valueDefault'+k]; var newvalue =addCommas(value); out[out.length] = '
or to hold the ID)
* @return void
*/
/******************************************NEED TO CHECK SANDIP************************************************/
this.drawInto = function(tagId) {
this.render(tagId);
if (this._disabled) this.setDisabled(true);
}
/******************************************NEED TO CHECK SANDIP************************************************/
/**
* DEPRECATED.
* Use drawInto()
* @deprecated use drawInto()
* @param string tagId (id of the span tag.)
* @see drawInto()
* @return void
*/
this.draw = function(tagId) {
this.render(tagId);
if (this._disabled) this.setDisabled(true);
}
/**
* Attaches an event like onChange, onMouseOver, onClickCaption ... a.s.o.
* Supported events are:
* - 'onChange'
*
* @access public
* @param string trigger (for example 'onChange')
* @param function A globalFunctionName (No string)
* @return void
* @see _attachedEvents
*/
this.attachEvent = function(trigger, yourEvent) {
if (typeof(this._attachedEvents) == 'undefined') {
this._attachedEvents = new Array();
}
if (typeof(this._attachedEvents[trigger]) == 'undefined') {
this._attachedEvents[trigger] = new Array(yourEvent);
} else {
this._attachedEvents[trigger][this._attachedEvents[trigger].length] = yourEvent;
}
}
/**
* Tells if an event is attached for the trigger specified.
* @access public
* @param string trigger
* @return bool
*/
this.hasEventAttached = function(trigger) {
return (this._attachedEvents && this._attachedEvents[trigger]);
}
/**
* Fires the events for the trigger specified.
* (used internally, but feel free to trigger events yourself...)
* @access public
* @param string trigger (for example 'onClickCaption')
* @return void
*/
this.fireEvent = function(trigger) {
if (this._attachedEvents && this._attachedEvents[trigger]) {
var e = this._attachedEvents[trigger];
if ((typeof(e) == 'string') || (typeof(e) == 'function')) {
e = new Array(e);
}
for (var i=0; i the background image repeats on both axis
* repeat-x => the bg image repeats on the x-axis only.
* repeat-y => the bg image repeats on the y-axis only.
* no-repeat => the bg image does not repeat; it only shows once.
*
* @access public
* @param string src
* @param string repeat (read above)
* @param string cssStyle (additional css style string, eg "left:4px;" to indent 4px from the left. since bs-4.6)
* @return void
* @see setBackgroundImageLeft(), setBackgroundImageRight()
*/
/************************************ONLOADE CALL*************************************/
this.setBackgroundImage = function(src, repeat, cssStyle) {
this._bgImgSrc = src;
this._bgImgRepeat = repeat;
this._bgImgCssStyle = cssStyle;
//alert('asdasdasdasd');
}
/************************************ONLOADE CALL*************************************/
/**
* Returns the current slider relative position in pixel.
* @access public
* @param int knobId (default is 1, can be 2)
* @return int
*/
this.getSliderPos = function(knobId) {
//alert('dsfsd fsdfsdf');
if (typeof(knobId) == 'undefined') knobId = 1;
if (knobId == 1) {
var absLeng = (this.direction==0) ? getDivLeft(this.ctrl.div) - this.ctrl.minX : getDivTop(this.ctrl.div) - this.ctrl.minY;
var absRang = this.maxVal - this.minVal;
//alert("975: absLeng:" +absLeng+" absRang:"+absRang+" _slideWidth:"+this._slideWidth);
return (absLeng * absRang/this._slideWidth) + this.minVal;
} else {
var absLeng = (this.direction==0) ? getDivLeft(this.ctrl2.div) - this.ctrl2.minX : getDivTop(this.ctrl2.div) - this.ctrl2.minY;
var absRang = this.maxVal2 - this.minVal2;
return (absLeng * absRang/this._slideWidth) + this.minVal2;
}
}
/**
* Fires when the user slides.
* @access private
* @param ? ctrl
*/
this.onChangeBySlide = function(ctrl) {
//alert(ctrl);
if (this._disabled) return;
var newPos = this._getNewLocationFromCursor(ctrl);
var valByPos = this._getValueByPosition(newPos);
var val = this._roundToGrid(valByPos, ctrl.knobId);
var valInternal = (ctrl.knobId == 1) ? this._valueInternal : this._valueInternal2;
if (val != valInternal) {
newPos = this._getPositionByValue(val, ctrl.knobId); //fix it so it is nicely rounded and not over the edges (needed). 2006-07-24 --andrej
if (ctrl.knobId == 1) {
this._valueInternal = val;
} else {
this._valueInternal2 = val;
}
/*function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
val1=addCommas(val);
alert(addCommas(val));*/
this.updateHandle(newPos, ctrl.knobId);
this.updateValueField(val, ctrl.knobId);
this.updateValueText(val, ctrl.knobId);
this._updateColorbar(newPos, ctrl.knobId);
if ('undefined' != typeof(this.eventOnChange))
{
//alert('calll');
if (this.useSecondKnob)
{
this.eventOnChange(this, val, newPos, ctrl.knobId);
}
else
{
this.eventOnChange(this, val, newPos);
}
}
this.fireEvent('onChange');
}
}
/**
* Sets a new value. even if the slider is disabled. this is allowed since it's an api method.
* @access public
* @param string val (new value)
* @param int knobId (default is 1 can be 2.)
* @return void
*/
this.setValue = function(val, knobId) {
if (typeof(knobId) == 'undefined') knobId = 1;
val = this._roundToGrid(val, knobId);
var newPos = this._getPositionByValue(val, knobId);
var valInternal = (knobId == 1) ? this._valueInternal : this._valueInternal2;
if (val != valInternal) {
if (knobId == 1) {
this._valueInternal = addCommas(val);
} else {
this._valueInternal2 = addCommas(val);
}
this.updateHandle(newPos, knobId);
this._updateColorbar(newPos, knobId);
if ('undefined' != typeof(this.eventOnChange)) {
if (this.useSecondKnob) {
this.eventOnChange(this, addCommas(val), newPos, knobId);
} else {
this.eventOnChange(this, addCommas(val), newPos);
}
}
this.fireEvent('onChange');
/*function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
val1=addCommas(val);*/
this.updateValueField(val, knobId);
this.updateValueText(val, knobId);
}
}
/**
* Updates the colorbar visually.
* @access private
* @param int newPos (at least i think it's an int.)
* @param int knobId (default is 1 can be 2.)
* @return void
*/
this._updateColorbar = function(newPos, knobId) {
var k = ((typeof(knobId) == 'undefined') || (knobId == 1) || ((typeof(this.colorbar) != 'undefined') && ((typeof(this.colorbar.type) != 'undefined') || (this.colorbar.type == 'between')))) ? '' : '2';
if (this['_colorbarObj'+k]) {
if ((typeof(this.colorbar.type) != 'undefined') && (this.colorbar.type == 'between')) {
var left = this._getPositionByValue(this._valueInternal, 1);
var right = this._getPositionByValue(this._valueInternal2, 2);
this['_colorbarObj'+k].style.left = left + this.colorbar.offsetLeft;
this['_colorbarObj'+k].style.width = right - left;
} else {
var newWidth = newPos + this['colorbar'+k]['widthDifference'];
if (newWidth < 0) newWidth = 0;
if (k == '2') {
var invertedWidth = this.width - newWidth;
if (invertedWidth < 0) invertedWidth = 0;
this['_colorbarObj'+k].style.width = invertedWidth;
if (typeof(this.colorbar2['offsetLeft']) != 'undefined') newWidth += this.colorbar2['offsetLeft'];
this['_colorbarObj'+k].style.left = newWidth;
//this['_colorbarObj'+k].style.right = 0;
} else {
this['_colorbarObj'+k].style.width = newWidth;
}
}
if (typeof(this['colorbar'+k]['color2']) != 'undefined') {
//fading feature used.
var percent = this.getValueInPercent(knobId);
var newColor = mixColor(this['colorbar'+k]['color'], this['colorbar'+k]['color2'], percent);
document.getElementById(this._colorbarId+k).style.backgroundColor = newColor;
}
}
}
/**
* Calculates the value based on the given position.
* @access private
* @param int pos
* @return double
*/
this._getValueByPosition = function(pos) {
if (this.direction == 0) {
pos -= this.ctrl.minX;
var hundertPercent = this.ctrl.maxX - this.ctrl.minX;
} else {
pos -= this.ctrl.minY;
var hundertPercent = this.ctrl.maxY - this.ctrl.minY;
}
var myPercent = pos / hundertPercent;
var val = this.minVal + ((this.maxVal - this.minVal) * myPercent);
//alert(parseInt(val));
return val;
}
/**
* Calculates the position based on the given value.
* @access private
* @param double val
* @param int knobId (default is 1 can be 2.)
* @return int
*/
this._getPositionByValue = function(val, knobId) {
var k = ((typeof(knobId) == 'undefined') || (knobId == 1)) ? '' : '2';
//alert(k);
//alert('minvalue=='+minvalue);
//alert('maxvalue=='+maxvalue);
val = val - this['minVal'+k]; //since 4.3, needed. was buggy before if minVal was not 0.
var hundertPercent = this['maxVal'+k] - this['minVal'+k];
var myPercent = val / hundertPercent;
if (this.direction == 0) {
var pos = this['ctrl'+k].minX + ((this['ctrl'+k].maxX - this['ctrl'+k].minX) * myPercent);
if (pos < this['ctrl'+k].minX) {
pos = this['ctrl'+k].minX;
} else if (pos > this['ctrl'+k].maxX) {
pos = this['ctrl'+k].maxX;
}
} else {
var pos = this['ctrl'+k].minY + ((this['ctrl'+k].maxY - this['ctrl'+k].minY) * myPercent);
if (pos < this['ctrl'+k].minY) {
pos = this['ctrl'+k].minY;
} else if (pos > this['ctrl'+k].maxY) {
pos = this['ctrl'+k].maxY;
}
}
//alert(pos);
return pos;
}
/**
* Parse and round value to next grid defined by this.valueInterval,
* and check lower/upper bounds.
* @access private
* @param string val
* @param int knobId (default is 1 can be 2.)
* @return float
*/
this._roundToGrid = function(val, knobId) {
val = parseFloat(val);
if (isNaN(val)) return this.minVal;
val = Math.round(val / this.valueInterval) * this.valueInterval;
// Js has some odd rounding problems somewhere at 10^-8. To get rid of it we do:
val = Math.round(val*10000)/10000;
// alert(val);
//check upper/lower bounds
if (val < this.minVal)
{
val = this.minVal;
}
if (val > this.maxVal)
{
val = this.maxVal;
}
if (this.useSecondKnob && this.preventValueCrossing) {
if ((typeof(knobId) == 'undefined') || (knobId == 1))
{
if (val >= this._valueInternal2)
{
if (val < this.minVal) val = this.minVal;
else
val = this._valueInternal2 - this.valueInterval;
}
/*if(Knobid == 1)
{
var minvalue = val;
}*/
}
else
{
if (val <= this._valueInternal)
{
if (val > this.maxVal2) val = this.maxVal2;
else
val = this._valueInternal + this.valueInterval2;
}
var maxvalue = val;
}
}
return val;
}
/**
* Returns the new handle pos.
* @access private
* @param ? ctrl
* @return int
*/
this._getNewLocationFromCursor = function(ctrl) {
if (ctrl.knobId == 1) {
var ox = this._posEventSlideStartX;
var oy = this._posEventSlideStartY;
var posObjSlideStartX = this._posObjSlideStartX;
var posObjSlideStartY = this._posObjSlideStartY;
}
else {
var ox = this._posEventSlideStartX2;
var oy = this._posEventSlideStartY2;
var posObjSlideStartX = this._posObjSlideStartX2;
var posObjSlideStartY = this._posObjSlideStartY2;
}
switch (this.direction) {
case 0: // horizontal
var t = ctrl.pageX - ox;
var x = parseInt(posObjSlideStartX) + t;
if (x > ctrl.maxX) x = ctrl.maxX;
if (x < ctrl.minX) x = ctrl.minX;
return x;
case 1: // vertical
var t = ctrl.pageY - oy;
var y = parseInt(posObjSlideStartY) + t;
if (y > ctrl.maxY) y = ctrl.maxY;
if (y < ctrl.minY) y = ctrl.minY;
return y;
}
}
/**
* Slides, in other words "updates the handle/knob".
* doesn't seem to be used. not used internally and is set to private.
* @access private
* @deprecated use updateHandle()
* @param int newPos
* @return void
*/
this.updatePointer = function(newPos) {
this.updateHandle(newPos);
}
/**
* Slides to new relative position, in other words "moves the handle/knob".
* @access public
* @param int newPos in pixel
* @param int knobId (default is 1 can be 2.)
* @return void
*/
this.updateHandle = function(newPos, knobId) {
//alert(newPos);
// alert(knobId);
if ((typeof(knobId) == 'undefined') || (knobId == 1)) {
if (this.direction == 0) {
this._currentRelSliderPosX = newPos;
this.ctrl.div.style.left = newPos;
} else {
this._currentRelSliderPosX = newPos;
this.ctrl.div.style.top = newPos;
}
} else { //2
if (this.direction == 0) {
this._currentRelSliderPosX2 = newPos;
this.ctrl2.div.style.left = newPos;
} else {
this._currentRelSliderPosX2 = newPos;
this.ctrl2.div.style.top = newPos;
}
}
return;
}
/**
* Updates the value of the input field.
* @access public
* @param mixed val (string or number)
* @param int knobId (default is 1 can be 2.)
* @return void
* @see updateValueText()
*/
/*********************************************SET THE VALUE OF THE ARRAY HERE ***********************************************/
this.updateValueField = function(val, knobId) {
var k = ((typeof(knobId) == 'undefined') || (knobId == 1)) ? '' : '2';
if (this['_valueFieldObj'+k]) {
//alert(val);
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
var val1=addCommas(val);
//alert(val1);
this['_valueFieldObj'+k].value = val;
//alert(this['_valueFieldObj'+k].value);
}
}
/*********************************************SET THE VALUE OF THE ARRAY HERE ENDS **********************************************/
/**
* Updates the value of the text box.
* @access public
* @param mixed val (string or number)
* @param int knobId (default is 1 can be 2.)
* @return void
* @see updateValueField()
*/
this.updateValueText = function(val, knobId) {
//alert(this['_valueTextObj'+k]);
var sliderId=this._slideBarId;
var knobid=knobId;
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
var k = ((typeof(knobId) == 'undefined') || (knobId == 1)) ? '' : '2';
if (this['_valueTextObj'+k])
{
if(knobId==2) //alert("hello"+knobId);
if(sliderId == 'barsliderDiv2')
{ //this['_valueTextObj'+k].innerHTML = '($)'+parseInt(val);
val1=addCommas(val);
//alert(val1);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
else if(sliderId == 'barsliderDiv1')
{
val1=addCommas(val);
//alert(val1);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
else if(sliderId == 'barsliderDiv3')
{
val1=addCommas(val);
//alert(val1);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
else
{
var val1=addCommas(val);
var val1=val;
//alert(val1);
this['_valueTextObj'+k].innerHTML = val12;
}
/*if(sliderId == 'barsliderDiv1')
{
if(knobid == 1)
{
searchvalue[0]=val;
searchval[0]=val;
}
if(knobid == 2)
{
searchvalue[1]=val;
searchval[1]=val;
}
}*/
if(sliderId == 'barsliderDiv1')
{ //this['_valueTextObj'+k].innerHTML = '($)'+parseInt(val);
//val1=addCommas(val);
//alert("second condition");
//alert(this['_valueTextObj'+k]);
val1=addCommas(val);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
else if(sliderId == 'barsliderDiv2')
{ //this['_valueTextObj'+k].innerHTML = '($)'+parseInt(val);
//val1=addCommas(val);
//alert("second condition");
//alert(this['_valueTextObj'+k]);
val1=addCommas(val);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
else if(sliderId == 'barsliderDiv3')
{ //this['_valueTextObj'+k].innerHTML = '($)'+parseInt(val);
//val1=addCommas(val);
//alert("second condition");
//alert(this['_valueTextObj'+k]);
val1=addCommas(val);
this['_valueTextObj'+k].innerHTML = ' '+val1;
}
/*if(sliderId == 'barsliderDiv2')
{
//alert(val);
if(knobid == 1)
{
searchvalue[2]=val;
searchval[2]=val;
}
if(knobid == 2)
{
searchvalue[3]=val;
searchval[3]=val;
}
}
if(sliderId == 'barsliderDiv3')
{
if(knobid == 1)
{
searchvalue[4]=val;
searchval[4]=val;
}
if(knobid == 2)
{
searchvalue[5]=val;
searchval[5]=val;
}
}*/
/* if(sliderId == 'barsliderDiv4')
{
if(knobid == 1)
{
searchvalue[6]=val;
searchval[6]=val;
}
if(knobid == 2)
{
searchvalue[7]=val;
searchval[7]=val;
}
}
if(sliderId == 'barsliderDiv5')
{
if(knobid == 1)
{
searchvalue[8]=val;
searchval[8]=val;
}
if(knobid == 2)
{
searchvalue[9]=val;
searchval[9]=val;
}
}*/
//alert(searchvalue[2]);
//alert(searchvalue[5]+'--a--'+searchvalue[4]+'---b--'+searchvalue[2]+'--c--'+searchvalue[3]);
var poststr ='';
poststr = "bedroom1=" + searchvalue[2] +
"&bedroom2=" + searchvalue[3] +
"&bathroom1=" + searchvalue[4] +
"&bathroom2=" + searchvalue[5] ;
//alert(poststr);
//alert(poststr);
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if (browser=="Microsoft Internet Explorer")
{
/*var image='
';*/
//var image='';
}
else
{
/*var image='
';*/
//var image='';
}
//document.getElementById("aaaaaa").innerHTML=image;
//document.getElementById("lodeimage").disabled="disabled";
//document.getElementById("lodeimage").style.background="#F8F8F8";
//makePOSTRequest('filtersearch_ajax.php', poststr);
/* alert('sliderid==='+sliderId);
alert('knobId==='+knobId);//this._valueTextId
alert(this['_valueTextObj'+k].innerHTML);*/
}
//alert(searchvalue[2]+'========val1======'+searchvalue[3]+'========val2====='+searchvalue[4]+'========val3======='+searchvalue[5]+'===========val4===========');
//onchangefunction(searchvalue[2]);
}
/**
* @access private
*/
this.arrowOnClick = function() {
//alert('hello');
}
/**
* fires after the value has changed. fires a lot when sliding, also
* fires after an arrow click or input change.
* @access private
* @param int val (new value)
*/
this.onChange = function(val) {
//alert(val);
if (this._disabled) return;
this.setValue(val);
}
/**
* DEPRECATED
* updates the input field box and/or the text with the value.
* @param string val (number)
* @access private
* @return void
* @deprecated
*/
this.updateInputBox = function(val) {
//alert(val);
if (this._disabled) return;
this.setValue(val);
}
/**
* @access private
* @param bool editMode
*/
/*this.textboxEdit = function(editMode, knobId) {
var k = ((typeof(knobId) == 'undefined') || (knobId == 1)) ? '' : '2';
if (this._disabled) return;
if (editMode) {
if ('undefined' != typeof(this['_valueFieldObj'+k])) {
this['_valueTextObj'+k].style.display = 'none';
this['_valueFieldObj'+k].style.display = 'block';
bsFormFieldSetFocusAndSelect(this['_valueFieldObj'+k], false);
}
} else {
if ('undefined' != typeof(this['_valueTextObj'+k])) {
this['_valueFieldObj'+k].style.display = 'none';
this['_valueTextObj'+k].style.display = 'block';
}
}
}*/
/**
* Fires during the mouse move of the slider-handle (as long as the mouse button is hold)
* @access private
* @param object ctrl The slider handle object
* @param object client
*/
this.slideMove = function(ctrl, client) {
ctrl.sliderObj.onChangeBySlide(ctrl);
//alert('ctrl==='+ctrl)
}
/**
* Fires on first click off the slider-handle
* @access private
* @param object ctrl The slider handle object
* @param ? client
*/
this.slideStart = function(ctrl, client) {
//for some reason it happens that 'this' is not what it's supposed to be.
//we're not were we should. and the slider is disabled. in this case we
//ignore this call.
//undone this, it renders all sliding useless. --andrej
//if (this._disabled) return;
//if (typeof(this._disabled) == 'undefined') return;
if (ctrl.knobId == 1) {
ctrl.sliderObj._handleObj.style.zIndex += 2;
//ctrl.startX += 120;
ctrl.sliderObj._posEventSlideStartX = ctrl.startX ;
ctrl.sliderObj._posEventSlideStartY = ctrl.startY;
ctrl.sliderObj._posObjSlideStartX = ctrl.sliderObj._handleObj.style.left;
ctrl.sliderObj._posObjSlideStartY = ctrl.sliderObj._handleObj.style.top;
} else { //2
ctrl.sliderObj._handleObj2.style.zIndex += 2;
ctrl.sliderObj._posEventSlideStartX2 = ctrl.startX;
ctrl.sliderObj._posEventSlideStartY2 = ctrl.startY;
ctrl.sliderObj._posObjSlideStartX2 = ctrl.sliderObj._handleObj2.style.left;
ctrl.sliderObj._posObjSlideStartY2 = ctrl.sliderObj._handleObj2.style.top;
}
var pos = ctrl.sliderObj.getSliderPos(ctrl.knobId);
ctrl.sliderObj.setValue(pos, ctrl.knobId);
if ('undefined' != typeof(ctrl.sliderObj.slideStartCB)) {
ctrl.sliderObj.slideStartCB(ctrl.sliderObj, ctrl.sliderObj.getValue(), pos);
}
}
/**
* Fires on first release of the slider-handle.
* @access private
* @param object ctrl The slider handle object
* @param ? client
*/
this.slideEnd = function(ctrl, client){
if (this._disabled) return;
if (ctrl.knobId == 1) {
ctrl.sliderObj._handleObj.style.zIndex -= 2;
} else {
ctrl.sliderObj._handleObj2.style.zIndex -= 2;
}
var pos = ctrl.sliderObj.getSliderPos();
if ('undefined' != typeof(ctrl.sliderObj.slideEndCB)) {
ctrl.sliderObj.slideEndCB(ctrl.sliderObj, ctrl.sliderObj.getValue(), pos);
}
return;
}
///////////////////////////////////////////
// constructor code
///////////////////////////////////////////
this._constructor(theFieldnamePrefix); //call the constructor. needs to be at the end.
}