1// The global array of objects that have been instanciated 2 3if (!Bs_Objects) {var Bs_Objects = [];}; 4 5 6 7 8 9/** 10 11* A Slider Component. 12 13* 14 15* <b>Features:</b> 16 17* - IE6 and NS(Mozilla7) compliant. 18 19* - Lets you add a slider to your page. It simulates a HTML-form text field; so your form-handling will not change. 20 21* - You may use your customized images. 22 23* - Able to attach onClick- and onChange-events to execute your JS-code when checked/changed. 24 25* 26 27* <b>Includes (+Dependencies):</b> 28 29* <code> 30 31* <script type="text/javascript" src="/_bsJavascript/lib/LibCrossBrowser.js"></script> 32 33* <script type="text/javascript" src="/_bsJavascript/lib/EventHandler.js"></script> 34 35* <script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script> 36 37* <script type="text/javascript" src="/_bsJavascript/components/slider/Bs_Slider.class.js"></script> 38 39* </code> 40 41* 42 43* <b>How to use:</b> 44 45* 1. Have a look at the example (see example link below) 46 47* 2. Create a function in the HTML-header called init(). Place the javascript code 48 49* that instanciates and inits this component into init(). 50 51* 3. Place an 'onLoad' in your body-tag: e.g. <body onLoad="init();"> 52 53* 4. In the HTML body: Place a div- or span-tag with an unique ID where you want the component to be. 54 55* 56 57* <b>How it works:</b> 58 59* - [After instanciating and initializing the object]. Call the drawInto([tag id]) method. 60 61* This will search the HTML code for a tag with the given id and insert HTML- and JS- code 62 63* dynamically (using DOM) to display the component and handle it. 64 65* 66 67* <b>What is returned to the server:</b> 68 69*<pre> 70 71* +------------------------+------------------------------------------------+ 72 73* | [tag id] +"_value" | int, The slider value | 74 75* +------------------------+------------------------------------------------+ 76 77* In versions 4.4 and before 78 79* +--------------------------------------------+----------------------------+ 80 81* | [varible name of the object] +"_value" | int, The slider value | 82 83* +--------------------------------------------+----------------------------+ 84 85*</pre> 86 87* This class generates a normal HTML text field and saves it's state in there. 88 89* It's not visible because it is set to display:none (invisible) but (when used in a form), 90 91* it will be submitted like any other HTML-form-field. To override this name see {@link fieldname}. 92 93* 94 95* <b>Event-Handling</b>: (see {@link attachOnClick()}, {@link attachOnChange()}) 96 97* - You can a callback function for certain events onto this component 98 99* (events are things like onClick, onChange ... aso) 100 101* 102 103* Snippet 1) Attaching a callback function: 104 105* <code> 106 107* var mySlider = new Bs_Slider(); 108 109* mySlider.attachOnChange(yourCallbackFunctionName); 110 111* </code> 112 113* The function you pass should be able to receive 3 parameters. 114 115* - The componentObj is an instance of this class and allows you to access it the 116 117* component that triggered the event. 118 119* - newValue is the new value that was set, new position is the new position in pixels. 120 121* <code> 122 123* function yourCallbackFunctionName(componentObj, newValue, newPosition){ 124 125* // do some stuff. 126 127* } 128 129* </code> 130 131* 132 133* <b>Customized images:</b> 134 135* - Set the path to your image-dir {@link imgDir} 136 137* - Then use following methods setup the colorbar and to place the images you intend to use: 138 139* {@link colorbar} 140 141* {@link setBackgroundImage()} 142 143* {@link setSliderIcon()} 144 145* {@link setArrowIconLeft()}, {@link setArrowIconRight()} 146 147* 148 149* @example example1.html 150 151* @example example2.html 152 153* 154 155* @author andrej arn <andrej at blueshoes dot org>, sam blume <sam at blueshoes dot org> 156 157* @package javascript_components 158 159* @subpackage slider 160 161* @copyright blueshoes.org 162 163*/ 164 165function Bs_Slider(theFieldnamePrefix) { 166 167 168 169 /** 170 171 * Unique Object/Tag ID is initialized in the constuctor. 172 173 * Based on this._id. Can be used in genarated JS-code as ID. Is set together 174 175 * from the classname + this._id (see _constructor() code ). 176 177 * 178 179 * @access private 180 181 * @var string 182 183 */ 184 185 this._objectId; 186 187 188 189 /** 190 191 * When submitting the form, you'll receive the value under this name. 192 193 * In other words you'll receive the data back to the server as if you had placed <br> 194 195 * <code><input type=text name="[the fieldName]" id="[the fieldName]" value="[the value]"></code><br> 196 197 * into your HTML-form. 198 199 * 200 201 * Note: 202 203 * - If not set the field name will be genarated as instanceName +"_value" 204 205 * 206 207 * @access public 208 209 * @since bs4.4 (before there was a bug and the field 'undefined' was used for all silders.) 210 211 * @var string 212 213 */ 214 215 this.fieldName; 216 217 218 219 /** 220 221 * If the whole slider is disabled or not. 222 223 * @access private 224 225 * @var bool 226 227 * @see setDisabled() 228 229 */ 230 231 this._disabled = false; 232 233 234 235 /** 236 237 * The slider direction (horizontal/vertical) 238 239 *<pre> 240 241 * 0 = horizontally (default) 242 243 * 1 = vertically (currently not implemented) 244 245 *</pre> 246 247 * @access public 248 249 * @var int direction 250 251 * @todo implement vertically 252 253 */ 254 255 this.direction = 0; 256 257 258 259 /** 260 261 * The width of the sliding part in pixel. 262 263 * Note: This is not the full width. It excludes the input field and the push buttons. 264 265 * @access public 266 267 * @var int (default is 100 pixel) 268 269 */ 270 271 this.width = 100; 272 273 274 275 /** 276 277 * The height of the sliding part in pixel. 278 279 * This is not the full height. it excludes the input field and the push buttons. 280 281 * @access public 282 283 * @var int (default is 20 pixel) 284 285 */ 286 287 this.height = 20; 288 289 290 291 /** 292 293 * The lowest possible value. It may be lower than 0 afaik :-) 294 295 * @access public 296 297 * @var int (default is 0) 298 299 */ 300 301 this.minVal = 0; 302 303 304 305 /** 306 307 * The highest possible value. 308 309 * @access public 310 311 * @var int (default is 100) 312 313 */ 314 315 this.maxVal = 100; 316 317 318 319 /** 320 321 * The default value (when the slider gets initialized). 322 323 * Note: 324 325 * - Can initially have alower or higher value than minVal/maxVal. 326 327 * This is a feature. You can detect if the used has set any value this way. 328 329 * Only values in the range of minVal - maxVal can be set and are displayed. 330 331 * @access public 332 333 * @var int 334 335 */ 336 337 this.valueDefault = 0; 338 339 this.valueLeadDefault = 0; 340 341 342 343 /** 344 345 * How much units to slide on an arrow click. 346 347 * If set to 0 then the arrows won't be displayed. 348 349 * Something like 0.5 is possible aswell. 350 351 * @access public 352 353 * @var int (default is 1) 354 355 * @see this.wheelAmount 356 357 */ 358 359 this.arrowAmount = 1; 360 361 362 363 /** 364 365 * if activated then a mouseover is already enough for the arrow to fire. it then 366 367 * does not need a click. it continues to fire until onmouseout. 368 369 * @access public 370 371 * @var bool arrowMouseOver 372 373 * @since bs-4.6 374 375 * @see var this.arrowKeepFiringTimeout 376 377 */ 378 379 this.arrowMouseOver = false; 380 381 382 383 /** 384 385 * every this milliseconds the onChangeByArrow() events keep firing. 386 387 * set to 0 if you don't want that. 388 389 * @access public 390 391 * @var int arrowKeepFiringTimeout 392 393 */ 394 395 this.arrowKeepFiringTimeout = 10; 396 397 398 399 /** 400 401 * @access private 402 403 * @var bool _stopFireArrowFlag 404 405 * @see this.stopFireArrow() 406 407 */ 408 409 this._stopFireArrowFlag = false; 410 411 412 413 /** 414 415 * how much to scroll when the mouse wheel is used. 416 417 * note: the mouse wheel is supported by ie only (as of 2004/03). 418 419 * @access public 420 421 * @var int wheelAmount 422 423 * @see this.arrowAmount 424 425 * @since bs-4.6 426 427 */ 428 429 this.wheelAmount = 5; 430 431 432 433 434 435 /** 436 437 * If and how the colorbar feature should be used. 438 439 * 440 441 * - If it's a string then it will be interpreted as a css class. 442 443 * 444 445 * - If it's an array (hash) (or object with vars) the keys will be used to 446 447 * generate style settings. 448 449 * You can achieve the same results using both ways, except for 'widthDifference'. 450 451 * 452 453 * - You can use both (array with css class as elemenet of the array) to 454 455 * set additional css properties. I can't think of any, but maybe you do. 456 457 * <pre> 458 459 * if you give it an array, it can have these settings: 460 461 * KEY DEFAULT 462 463 * cssClass -nothing- 464 465 * color 'orange' if cssClass is not set, otherwise -nothing- 466 467 * height -nothing- 468 469 * widthDifference 0 470 471 * offsetLeft -nothing- 472 473 * offsetTop -nothing- 474 475 * 476 477 * coments: 478 479 * color: 480 481 * if you don't see the colorbar, you prolly have a cssClass defined 482 483 * but neither there a color defined not in the array ('color' element). 484 485 * widthDifference: 486 487 * the width of the colorbar is always from the left side to where the 488 489 * handle (slider) is. so the left side of the slider bar is colored. 490 491 * it may be (depending on your design) that you need to have the color 492 493 * bar a little bit larger or smaller. you can set an amound of pixels 494 495 * here, it may even be negative. 496 497 * offsetLeft: 498 499 * if you use a cssclass, you can specify something like left:5px; 500 501 * if you use arrows, you have to take the width of the left arrow 502 503 * into account. if you use offsetLeft, you don't. this is done for you. 504 505 * </pre> 506 507 * 508 509 * anyway play with the values until you get what you want. 510 511 * 512 513 * So if you want to use a css class and want to specify a widthDifference, 514 515 * do something like 516 517 * <code> 518 519 * arr = new Array() 520 521 * arr['cssClass'] = 'yourClass'; 522 523 * arr['widthDifference'] = -5; 524 525 * </code> 526 527 * and you're done. 528 529 * 530 531 * On the other hand it's handy if you don't have to create a css class and make 532 533 * sure it always ships with your file. well, enough of comments for this one. 534 535 * 536 537 * @access public 538 539 * @var mixed (array or string) 540 541 */ 542 543 this.colorbar; 544 545 this.leadingColorbar; 546 547 548 549 /** 550 551 * The z-index the slider will use. you may want to change this if you have 552 553 * elements on your page that overlap this slider (floating stuff or so). 554 555 * @access public 556 557 * @var int (default is 1000) 558 559 */ 560 561 this.baseZindex = 1000; 562 563 564 565 /** 566 567 * If you want to move the whole slider object with everything on the x-axis 568 569 * then set a value here. 570 571 * - example: -5 means move the whole thing 5 pixel to the left. 572 573 * - example: 10 means move the whole thing 10 pixel to the right. 574 575 * @access public 576 577 * @var int 578 579 * @see moveY 580 581 * @since bs4.3 582 583 */ 584 585 this.moveX = 0; 586 587 588 589 /** 590 591 * If you want to move the whole slider object with everything on the y-axis 592 593 * then set a value here. 594 595 * - example: -5 means move the whole thing 5 pixel up the page. 596 597 * - example: 10 means move the whole thing 10 pixel down the page. 598 599 * @access public 600 601 * @var int 602 603 * @see moveX 604 605 * @since bs4.3 606 607 */ 608 609 this.moveY = 0; 610 611 612 613 /** 614 615 * The base path for the image folder. 616 617 * @deprecated use imgDir 618 619 * @access private 620 621 */ 622 623 this.imgBasePath; 624 625 626 627 /** 628 629 * The base path for the image folder. 630 631 * 632 633 * Examples: (NOTE: The path has to end with a slash.) 634 635 * - 'http://www.domain.com/foo/' <= with domain 636 637 * - '/my/image/path/' <= absolute path without domain 638 639 * - '../some/path/' <= relative path 640 641 * 642 643 * 644 645 * Default is: '/_bsJavascript/components/slider/img/' 646 647 * Check this folder and the other folders around there for other styles. 648 649 * 650 651 * @access public 652 653 * @var string 654 655 */ 656 657 this.imgDir = '/_bsJavascript/components/slider/img/'; 658 659 660 661 /** 662 663 * The name of the background image in the imgDir. 664 665 * Set this using setBackgroundImage(), so look there. 666 667 * @access private 668 669 * @var string 670 671 * @see setBackgroundImage() 672 673 */ 674 675 this._bgImgSrc; 676 677 678 679 /** 680 681 * How a background-image should be repeated. it's a css property. 682 683 * - example: 'no-repeat' 684 685 * set this using setBackgroundImage(), so look there. 686 687 * @access private 688 689 * @var string 690 691 * @see setBackgroundImage() 692 693 */ 694 695 this._bgImgRepeat; 696 697 698 699 /** 700 701 * Additional css style string for the background image. 702 703 * set this using setBackgroundImage(), so look there. 704 705 * @access private 706 707 * @var string 708 709 * @see setBackgroundImage() 710 711 */ 712 713 this._bgImgCssStyle; 714 715 716 717 718 719 /** 720 721 * @access private 722 723 * @var string 724 725 * @see setBackgroundImageLeft() 726 727 */ 728 729 this._bgImgLeftSrc; 730 731 732 733 /** 734 735 * @access private 736 737 * @var int 738 739 * @see setBackgroundImageLeft() 740 741 */ 742 743 this._bgImgLeftWidth; 744 745 746 747 /** 748 749 * @access private 750 751 * @var int 752 753 * @see setBackgroundImageLeft() 754 755 */ 756 757 this._bgImgLeftHeight; 758 759 760 761 /** 762 763 * @access private 764 765 * @var string 766 767 * @see setBackgroundImageRight() 768 769 */ 770 771 this._bgImgRightSrc; 772 773 774 775 /** 776 777 * @access private 778 779 * @var int 780 781 * @see setBackgroundImageRight() 782 783 */ 784 785 this._bgImgRightWidth; 786 787 788 789 /** 790 791 * @access private 792 793 * @var int 794 795 * @see setBackgroundImageRight() 796 797 */ 798 799 this._bgImgRightHeight; 800 801 802 803 804 805 /** 806 807 * The slider handle image name. (knob) 808 809 * Set this using setSliderIcon(). 810 811 * @access private 812 813 * @var int 814 815 * @see setSliderIcon(), _sliderImgWidth, _sliderImgHeight 816 817 */ 818 819 this._sliderImgSrc; 820 821 822 823 /** 824 825 * The width of the slider handle image. 826 827 * Set this using setSliderIcon(). 828 829 * @access private 830 831 * @var int 832 833 * @see setSliderIcon(), _sliderImgSrc, _sliderImgHeight 834 835 */ 836 837 this._sliderImgWidth; 838 839 840 841 /** 842 843 * The height of the slider handle image. 844 845 * Set this using setSliderIcon(). 846 847 * @access private 848 849 * @var int _sliderImgHeight 850 851 * @see setSliderIcon(), _sliderImgSrc, _sliderImgWidth 852 853 */ 854 855 this._sliderImgHeight; 856 857 858 859 /** 860 861 * Used to set a CSS class name for the slider container. 862 863 * @access public 864 865 * @var string 866 867 */ 868 869 this.styleContainerClass; 870 871 872 873 /** 874 875 * Used to set a CSS class name for the value input field. 876 877 * @access public 878 879 * @var string 880 881 */ 882 883 this.styleValueFieldClass = 'smalltxt spanSliderField'; 884 885 886 887 /** 888 889 * Used to set a CSS class name for the value text span. 890 891 * @access public 892 893 * @var string 894 895 */ 896 897 this.styleValueTextClass = 'smalltxt spanSliderText'; 898 899 900 901 /** 902 903 * The background color. hex code or named color. 904 905 * examples: 'blue', 'green', '#000000' 906 907 * @access public 908 909 * @var string 910 911 */ 912 913 this.bgColor; 914 915 916 917 /** 918 919 * The name of the left arrow icon. 920 921 * @access private 922 923 * @var string 924 925 * @see setArrowIconLeft() 926 927 */ 928 929 this._arrowIconLeftSrc; 930 931 932 933 /** 934 935 * The width of the left arrow icon. 936 937 * @access private 938 939 * @var string 940 941 * @see setArrowIconLeft() 942 943 */ 944 945 this._arrowIconLeftWidth = 0; 946 947 948 949 /** 950 951 * The height of the left arrow icon. 952 953 * @access private 954 955 * @var string 956 957 * @see setArrowIconLeft() 958 959 */ 960 961 this._arrowIconLeftHeight = 0; 962 963 964 965 /** 966 967 * A CSS style string to use in the image tag. 968 969 * @access private 970 971 * @var string arrowIconLeftCssStyle 972 973 * @see setArrowIconLeft() 974 975 * @todo all 976 977 */ 978 979 this._arrowIconLeftCssStyle = 0; 980 981 982 983 /** 984 985 * The name of the right arrow icon. 986 987 * @access private 988 989 * @var string 990 991 * @see setArrowIconRight() 992 993 */ 994 995 this._arrowIconRightSrc; 996 997 998 999 /** 1000 1001 * The width of the right arrow icon. 1002 1003 * @access private 1004 1005 * @var int 1006 1007 * @see setArrowIconRight() 1008 1009 */ 1010 1011 this._arrowIconRightWidth = 0; 1012 1013 1014 1015 /** 1016 1017 * The height of the right arrow icon. 1018 1019 * @access private 1020 1021 * @var int 1022 1023 * @see setArrowIconRight() 1024 1025 */ 1026 1027 this._arrowIconRightHeight = 0; 1028 1029 1030 1031 /** 1032 1033 * A CSS style string to use in the image tag. 1034 1035 * @access private 1036 1037 * @var string 1038 1039 * @see setArrowIconRight() 1040 1041 * @todo all 1042 1043 */ 1044 1045 this._arrowIconRightCssStyle = 0; 1046 1047 1048 1049 /** 1050 1051 * The step (interval) of the values. 1052 1053 * <pre> 1054 1055 * Examples: 0, 1, 2, 3 ... has an interval of 1 1056 1057 * 0, 0.5, 1, 1.5 ... has an interval of 0.5 1058 1059 * </pre> 1060 1061 * with the current rounding it can go down to 2 digits after the dot, 1062 1063 * like 3.51. 1064 1065 * 1066 1067 * @access public 1068 1069 * @var number (int or real, whatever) 1070 1071 */ 1072 1073 this.valueInterval = 1; 1074 1075 1076 1077 /** 1078 1079 * Should we display the input field (with value) to the right? 1080 1081 * 1082 1083 * <pre> 1084 1085 * 0 = no 1086 1087 * 1 = show as text (not implemented yet, will be shown as #2) 1088 1089 * 2 = show as input field (changable). this is the default. 1090 1091 * 3 = show as text, onclick becomes an input field. (not all browsers support that, but 1092 1093 * it's fancy :) 1094 1095 * </pre> 1096 1097 * 1098 1099 * The trick is to keep it invisible if set to false. we need it because it's 1100 1101 * the holder of the internal value. could be recoded, if you want to... 1102 1103 * 1104 1105 * @access public 1106 1107 * @var int useInputField 1108 1109 * @see inputTextFieldEvent 1110 1111 */ 1112 1113 this.useInputField = 2; 1114 1115 1116 1117 /** 1118 1119 * If {@link useInputField} is set to 3 we toggle. but when? 1120 1121 * default is onMouseOver (over) but it can be set to 'click' 1122 1123 * (onClick). 1124 1125 * @access public 1126 1127 * @var string ('over' or 'click') 1128 1129 * @see useInputField 1130 1131 */ 1132 1133 this.inputTextFieldEvent = 'over'; 1134 1135 1136 1137 /** 1138 1139 * ? 1140 1141 * @access private 1142 1143 */ 1144 1145 this.ctrl; 1146 1147 1148 1149 /** 1150 1151 * The real value we have. 1152 1153 * in the beginning it will be set to this.valueDefault. 1154 1155 * <b>WARNING:</b> 1156 1157 * - don't mix this._valueInternal and this.valueInterval. 1158 1159 * it's not only that one is private and the other is not, 1160 1161 * it's that one is the internal value, the other is the STEP. 1162 1163 * maybe step would have been a better name. got that? 1164 1165 * @access private 1166 1167 * @var double 1168 1169 * @see getValue() 1170 1171 */ 1172 1173 this._valueInternal; 1174 1175 this._valueLeadInternal; 1176 1177 1178 1179 /** 1180 1181 * How the slider should be seen in the browser 1182 1183 * @access private 1184 1185 * @var int 1186 1187 * @see setDisplay() 1188 1189 */ 1190 1191 this._display = 2; 1192 1193 1194 1195 /**#@+ 1196 1197 * Ids and objects 1198 1199 * @access private 1200 1201 */ 1202 1203 1204 1205 this._arrowLeftContainerId; 1206 1207 this._arrowLeftContainerObj; 1208 1209 this._arrowLeftIconId; 1210 1211 this._arrowLeftIconObj; 1212 1213 1214 1215 this._arrowRightContainerId; 1216 1217 this._arrowRightContainerObj; 1218 1219 this._arrowRightIconId; 1220 1221 this._arrowRightIconObj; 1222 1223 1224 1225 this._valueContainerId; 1226 1227 this._valueContainerObj; 1228 1229 1230 1231 this._handleId; 1232 1233 this._handleObj; 1234 1235 this._valueFieldId; 1236 1237 this._valueFieldObj; 1238 1239 this._valueTextId; 1240 1241 this._valueTextObj; 1242 1243 this._slideBarId; 1244 1245 this._slideBarObj; 1246 1247 this._colorbarId; 1248 1249 this._leadingColorbarId; 1250 1251 this._colorbarObj; 1252 1253 this._leadingColorbarObj; 1254 1255 /**#@-*/ 1256 1257 1258 1259 /**#@+ 1260 1261 * positions and measurements in pixels 1262 1263 * @access private 1264 1265 */ 1266 1267 this._posUpperLeftX; 1268 1269 this._posUpperLeftY; 1270 1271 this._posSlideStart; 1272 1273 this._posSlideEnd; 1274 1275 /**#@-*/ 1276 1277 1278 1279 /** 1280 1281 * That's this.width - this._sliderImgWidth. Slide area without the handle. 1282 1283 * If you don't get this, draw a slider yourself. maybe you'll 1284 1285 * figure it out then. :-) 1286 1287 * @access private 1288 1289 * @var int 1290 1291 */ 1292 1293 this._slideWidth; 1294 1295 1296 1297 1298 1299 //attached (assigned) event functions (that exist in the global scope): 1300 1301 1302 1303 /** 1304 1305 * Array holding all the information about attached events. 1306 1307 * The structure can be like these: 1308 1309 * <pre> 1310 1311 * 1. attach a function directly 1312 1313 * syntax: _attachedEvents['eventName'] = yourFunctionName; 1314 1315 * 2. attach some javascript code 1316 1317 * syntax: _attachedEvents['eventName'] = "yourCode();"; 1318 1319 * example: _attachedEvents['eventName'] = "alert('hi'); callSomething('foo');"; 1320 1321 * just keep in mind that you cannot use vars in that code, because when it 1322 1323 * gets executed that will be another scope (unless the vars are global...) 1324 1325 * 3. attach multiple things for the same event 1326 1327 * syntax: _attachedEvents['eventName'] = new Array; 1328 1329 * _attachedEvents['eventName'][0] = yourFunctionName; 1330 1331 * _attachedEvents['eventName'][1] = "yourCode();"; 1332 1333 * possible values for 'eventName' are: 1334 1335 * 'onChange' 1336 1337 * </pre> 1338 1339 * 1340 1341 * @access private 1342 1343 * @var array (hash, see above) 1344 1345 * @see attachEvent(); 1346 1347 */ 1348 1349 this._attachedEvents; 1350 1351 1352 1353 /** 1354 1355 * Fires whenever the value changes. that can happen by sliding, 1356 1357 * hitting arrow buttons or typing in values into the input field. 1358 1359 * @access private 1360 1361 * @var function 1362 1363 * @see attachOnChange() 1364 1365 */ 1366 1367 this.eventOnChange; 1368 1369 1370 1371 /**#@+ 1372 1373 * Attached function for the slide start, move and end event. 1374 1375 * @access private 1376 1377 * @var function 1378 1379 */ 1380 1381 this.slideStartCB; 1382 1383 this.slideMoveCB; 1384 1385 this.slideEndCB; 1386 1387 /**#@-*/ 1388 1389 1390 1391 /** 1392 1393 * the pseudo constructor. 1394 1395 * @access private 1396 1397 * @return void 1398 1399 */ 1400 1401 this._constructor = function(theFieldnamePrefix) { 1402 1403 // Put this instance into the global object instance list 1404 1405 this._id = Bs_Objects.length; 1406 1407 Bs_Objects[this._id] = this; 1408 1409 this._objectId = "Bs_Slider_"+this._id; 1410 1411 // For copatibillity we still init "objectName" 1412 1413 this.objectName = this._objectId; 1414 1415 // In V4.4 the fieldname used to be given be the constuctor-parameter. So if 1416 1417 // a paramter is passed in the constructor, we still use it as fieldname prefix 1418 1419 if (typeof(theFieldnamePrefix) == 'string') { 1420 1421 this.fieldName = theFieldnamePrefix + '_value'; 1422 1423 this.objectName = theFieldnamePrefix; 1424 1425 } 1426 1427 } 1428 1429 1430 1431 /** 1432 1433 * Makes sure everything is ready to use. sets some default values if needed. 1434 1435 * @access private 1436 1437 * @return void 1438 1439 */ 1440 1441 this._checkup = function() { 1442 1443 if (typeof(this.minVal) == 'undefined') this.minVal = 0; 1444 1445 if (typeof(this.maxVal) == 'undefined') this.maxVal = 10; 1446 1447 if (typeof(this.valueDefault) == 'undefined') this.valueDefault = this.minVal; 1448 1449 if (typeof(this.valueLeadDefault) == 'undefined') this.valueLeadDefault = 0; 1450 1451 this._valueInternal = this.valueDefault; 1452 1453 this._valueLeadInternal = this.valueLeadDefault; 1454 1455 1456 1457 // This is for backward compatabillity only --sam 2003-06 1458 1459 if (typeof(this.imgBasePath) == 'string') this.imgDir = this.imgBasePath; 1460 1461 } 1462 1463 1464 1465 1466 1467 /** 1468 1469 * loads a skin by its name. 1470 1471 * 1472 1473 * you can do the same with manual calls to setSliderIcon() etc, but this is quick and easy. 1474 1475 * 1476 1477 * available skins: 1478 1479 * 1480 1481 * 1482 1483 * @access public 1484 1485 * @param string skinName 1486 1487 * @return bool 1488 1489 * @since bs-4.6 1490 1491 */ 1492 1493 this.loadSkin = function(skinName) { 1494 1495 switch (skinName) { 1496 1497 case 'winxp': 1498 1499 case 'winxp-scrollbar-horizontal': 1500 1501 this.useInputField = 0; 1502 1503 this.height = 16; 1504 1505 this.imgDir = '/_bsJavascript/components/slider/img/winxp/'; 1506 1507 this.setSliderIcon('horizontal_scrollbar_knob.gif', 17, 16); 1508 1509 this.setArrowIconLeft('horizontal_scrollbar_arrowLeft.gif', 17, 16); 1510 1511 this.setArrowIconRight('horizontal_scrollbar_arrowRight.gif', 17, 16); 1512 1513 break; 1514 1515 case 'winxp-scrollbar-vertical': 1516 1517 this.direction = 1; 1518 1519 this.useInputField = 0; 1520 1521 this.width = 16; 1522 1523 this.imgDir = '/_bsJavascript/components/slider/img/winxp/'; 1524 1525 this.setSliderIcon('vertical_scrollbar_knob.gif', 16, 17); 1526 1527 this.setArrowIconLeft('vertical_scrollbar_arrowUp.gif', 16, 17); 1528 1529 this.setArrowIconRight('vertical_scrollbar_arrowDown.gif', 16, 17); 1530 1531 break; 1532 1533 case 'osx': 1534 1535 case 'osx-horizontal': 1536 1537 this.useInputField = 0; 1538 1539 this.height = 21; 1540 1541 this.imgDir = '/_bsJavascript/components/slider/img/osx/'; 1542 1543 this.setSliderIcon('horizontal_knob.gif', 17, 16); 1544 1545 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1546 1547 this.setBackgroundImageLeft('horizontal_backgroundLeft.gif', 6, 21); 1548 1549 this.setBackgroundImageRight('horizontal_backgroundRight.gif', 6, 21); 1550 1551 break; 1552 1553 case 'osx-scrollbar-horizontal': 1554 1555 this.useInputField = 0; 1556 1557 this.height = 15; 1558 1559 this.imgDir = '/_bsJavascript/components/slider/img/osx/'; 1560 1561 this.setSliderIcon('horizontal_scrollbar_knobSmall.gif', 23, 15); 1562 1563 this.setBackgroundImage('horizontal_scrollbar_background.gif', 'repeat'); 1564 1565 this.setArrowIconLeft('horizontal_scrollbar_arrowLeft.gif', 17, 15); 1566 1567 this.setArrowIconRight('horizontal_scrollbar_arrowRight.gif', 17, 15); 1568 1569 break; 1570 1571 case 'osx-scrollbar-vertical': 1572 1573 this.direction = 1; 1574 1575 this.useInputField = 0; 1576 1577 this.width = 15; 1578 1579 this.imgDir = '/_bsJavascript/components/slider/img/osx/'; 1580 1581 this.setSliderIcon('vertical_scrollbar_knobSmall.gif', 15, 23); 1582 1583 this.setBackgroundImage('vertical_scrollbar_background.gif', 'repeat'); 1584 1585 this.setArrowIconLeft('vertical_scrollbar_arrowUp.gif', 15, 17); 1586 1587 this.setArrowIconRight('vertical_scrollbar_arrowDown.gif', 15, 17); 1588 1589 break; 1590 1591 case 'os9': 1592 1593 case 'os9-horizontal': 1594 1595 this.useInputField = 0; 1596 1597 this.height = 16; 1598 1599 this.imgDir = '/_bsJavascript/components/slider/img/os9/'; 1600 1601 this.setSliderIcon('horizontal_scrollbar_knob.gif', 17, 16); 1602 1603 this.setBackgroundImage('horizontal_scrollbar_background.gif', 'repeat'); 1604 1605 this.setArrowIconLeft('horizontal_scrollbar_arrowLeft.gif', 16, 16); 1606 1607 this.setArrowIconRight('horizontal_scrollbar_arrowRight.gif', 16, 16); 1608 1609 break; 1610 1611 case 'os9-vertical': 1612 1613 this.direction = 1; 1614 1615 this.useInputField = 0; 1616 1617 this.width = 16; 1618 1619 this.imgDir = '/_bsJavascript/components/slider/img/os9/'; 1620 1621 this.setSliderIcon('vertical_scrollbar_knob.gif', 16, 17); 1622 1623 this.setBackgroundImage('vertical_scrollbar_background.gif', 'repeat'); 1624 1625 this.setArrowIconLeft('vertical_scrollbar_arrowUp.gif', 16, 16); 1626 1627 this.setArrowIconRight('vertical_scrollbar_arrowDown.gif', 16, 16); 1628 1629 break; 1630 1631 case 'opera7': 1632 1633 case 'opera7-horizontal': 1634 1635 this.useInputField = 0; 1636 1637 this.height = 16; 1638 1639 this.imgDir = '/_bsJavascript/components/slider/img/opera7/'; 1640 1641 this.setSliderIcon('horizontal_knob.gif', 19, 16); 1642 1643 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1644 1645 this.setArrowIconLeft('horizontal_arrowLeft.gif', 16, 16); 1646 1647 this.setArrowIconRight('horizontal_arrowRight.gif', 16, 16); 1648 1649 break; 1650 1651 case 'opera7-vertical': 1652 1653 this.direction = 1; 1654 1655 this.useInputField = 0; 1656 1657 this.width = 16; 1658 1659 this.imgDir = '/_bsJavascript/components/slider/img/opera7/'; 1660 1661 this.setSliderIcon('vertical_knob.gif', 16, 19); 1662 1663 this.setBackgroundImage('vertical_background.gif', 'repeat'); 1664 1665 this.setArrowIconLeft('vertical_arrowUp.gif', 16, 16); 1666 1667 this.setArrowIconRight('vertical_arrowDown.gif', 16, 16); 1668 1669 break; 1670 1671 case 'bob': 1672 1673 case 'bob-horizontal': 1674 1675 this.height = 18; 1676 1677 this.imgDir = '/_bsJavascript/components/slider/img/bob/'; 1678 1679 this.setBackgroundImage('background.gif', 'no-repeat'); 1680 1681 this.setSliderIcon('slider.gif', 13, 18); 1682 1683 //this.setArrowIconLeft('arrowLeft.gif', 16, 16); 1684 1685 //this.setArrowIconRight('arrowRight.gif', 16, 16); 1686 1687 this.colorbar = new Object(); 1688 1689 this.colorbar['color'] = 'blue'; 1690 1691 this.colorbar['height'] = 5; 1692 1693 this.colorbar['widthDifference'] = 0; //-12 1694 1695 this.colorbar['offsetLeft'] = 5; 1696 1697 this.colorbar['offsetTop'] = 9; 1698 1699 break; 1700 1701 case 'burp': 1702 1703 case 'burp-horizontal': 1704 1705 this.useInputField = 0; 1706 1707 this.height = 11; 1708 1709 this.imgDir = '/_bsJavascript/components/slider/img/burp/'; 1710 1711 this.setSliderIcon('horizontal_knob.gif', 5, 11); 1712 1713 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1714 1715 this.setArrowIconLeft('horizontal_arrowLeft.gif', 10, 11); 1716 1717 this.setArrowIconRight('horizontal_arrowRight.gif', 10, 11); 1718 1719 break; 1720 1721 case 'burp-vertical': 1722 1723 this.direction = 1; 1724 1725 this.useInputField = 0; 1726 1727 this.width = 11; 1728 1729 this.imgDir = '/_bsJavascript/components/slider/img/burp/'; 1730 1731 this.setSliderIcon('vertical_knob.gif', 11, 5); 1732 1733 this.setBackgroundImage('vertical_background.gif', 'repeat'); 1734 1735 this.setArrowIconLeft('vertical_arrowUp.gif', 11, 10); 1736 1737 this.setArrowIconRight('vertical_arrowDown.gif', 11, 10); 1738 1739 break; 1740 1741 case 'ximian-industrial': 1742 1743 case 'ximian-industrial-horizontal': 1744 1745 this.useInputField = 0; 1746 1747 this.height = 15; 1748 1749 this.imgDir = '/_bsJavascript/components/slider/img/ximian_industrial/'; 1750 1751 this.setSliderIcon('horizontal_knob.gif', 31, 15); 1752 1753 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1754 1755 this.setArrowIconLeft('horizontal_arrowLeft.gif', 15, 15); 1756 1757 this.setArrowIconRight('horizontal_arrowRight.gif', 15, 15); 1758 1759 break; 1760 1761 case 'ximian-industrial-vertical': 1762 1763 this.direction = 1; 1764 1765 this.useInputField = 0; 1766 1767 this.width = 15; 1768 1769 this.imgDir = '/_bsJavascript/components/slider/img/ximian_industrial/'; 1770 1771 this.setSliderIcon('vertical_knob.gif', 15, 31); 1772 1773 this.setBackgroundImage('vertical_background.gif', 'repeat'); 1774 1775 this.setArrowIconLeft('vertical_arrowUp.gif', 15, 15); 1776 1777 this.setArrowIconRight('vertical_arrowDown.gif', 15, 15); 1778 1779 break; 1780 1781 case 'smoothstreak': 1782 1783 case 'smoothstreak-horizontal': 1784 1785 this.useInputField = 0; 1786 1787 this.height = 15; 1788 1789 this.imgDir = '/_bsJavascript/components/slider/img/smoothstreak/'; 1790 1791 this.setSliderIcon('horizontal_knob.gif', 31, 15); 1792 1793 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1794 1795 this.setBackgroundImageLeft('horizontal_backgroundLeft.gif', 2, 15); 1796 1797 this.setBackgroundImageRight('horizontal_backgroundRight.gif', 2, 15); 1798 1799 this.colorbar = new Object(); 1800 1801 this.colorbar['color'] = '#736D6B'; 1802 1803 this.colorbar['height'] = 11; 1804 1805 this.colorbar['widthDifference'] = 0; 1806 1807 this.colorbar['offsetLeft'] = 0; 1808 1809 this.colorbar['offsetTop'] = 2; 1810 1811 break; 1812 1813 case 'smoothstreak-vertical': 1814 1815 this.direction = 1; 1816 1817 this.useInputField = 0; 1818 1819 this.width = 15; 1820 1821 this.imgDir = '/_bsJavascript/components/slider/img/smoothstreak/'; 1822 1823 this.setSliderIcon('vertical_knob.gif', 15, 31); 1824 1825 this.setBackgroundImage('vertical_background.gif', 'repeat'); 1826 1827 this.setBackgroundImageLeft('vertical_backgroundTop.gif', 15, 2); 1828 1829 this.setBackgroundImageRight('vertical_backgroundBottom.gif', 15, 2); 1830 1831 break; 1832 1833 case 'aluminumalloyvolcanic': 1834 1835 case 'aluminumalloyvolcanic-horizontal': 1836 1837 this.useInputField = 0; 1838 1839 this.height = 15; 1840 1841 this.imgDir = '/_bsJavascript/components/slider/img/aluminumalloyvolcanic/'; 1842 1843 this.setSliderIcon('horizontal_knob.gif', 15, 19); 1844 1845 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1846 1847 this.setBackgroundImageLeft('horizontal_backgroundLeft.gif', 2, 19); 1848 1849 this.setBackgroundImageRight('horizontal_backgroundRight.gif', 2, 19); 1850 1851 break; 1852 1853 case 'yattacier3': 1854 1855 case 'yattacier3-horizontal': 1856 1857 this.useInputField = 0; 1858 1859 this.height = 16; 1860 1861 this.imgDir = '/_bsJavascript/components/slider/img/yattacier3/'; 1862 1863 this.setSliderIcon('horizontal_knob.gif', 30, 16); 1864 1865 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1866 1867 this.setBackgroundImageLeft('horizontal_backgroundLeft.gif', 1, 16); 1868 1869 this.setBackgroundImageRight('horizontal_backgroundRight.gif', 1, 16); 1870 1871 break; 1872 1873 case 'h2ogtk2': 1874 1875 case 'h2ogtk2-horizontal': 1876 1877 this.useInputField = 0; 1878 1879 this.height = 17; 1880 1881 this.imgDir = '/_bsJavascript/components/slider/img/h2ogtk2/'; 1882 1883 this.setSliderIcon('horizontal_knob.gif', 30, 17); 1884 1885 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1886 1887 this.setBackgroundImageLeft('horizontal_backgroundLeft.gif', 7, 17); 1888 1889 this.setBackgroundImageRight('horizontal_backgroundRight.gif', 7, 17); 1890 1891 break; 1892 1893 case 'h2ogtk2-scrollbar-horizontal': 1894 1895 this.useInputField = 0; 1896 1897 this.height = 17; 1898 1899 this.imgDir = '/_bsJavascript/components/slider/img/h2ogtk2/'; 1900 1901 this.setSliderIcon('horizontal_knob.gif', 30, 17); 1902 1903 this.setBackgroundImage('horizontal_background.gif', 'repeat'); 1904 1905 this.setArrowIconLeft('horizontal_arrowLeft.gif', 15, 17); 1906 1907 this.setArrowIconRight('horizontal_arrowRight.gif', 15, 17); 1908 1909 break; 1910 1911 default: 1912 1913 return false; 1914 1915 } 1916 1917 return true; 1918 1919 } 1920 1921 1922 1923 1924 1925 /** 1926 1927 * Render function. 1928 1929 * @access public 1930 1931 * @param string tagId (ID of the element in that we render the slider.) 1932 1933 * @return void 1934 1935 */ 1936 1937 this.render = function(tagId) { 1938 1939 this._checkup(); 1940 1941 1942 1943 this._containerId = 'co' + tagId; 1944 1945 this._handleId = 'po' + tagId; 1946 1947 this._arrowLeftContainerId = 'alc' + tagId; 1948 1949 this._arrowLeftIconId = 'ali' + tagId; 1950 1951 this._arrowRightContainerId = 'arc' + tagId; 1952 1953 this._arrowRightIconId = 'ari' + tagId; 1954 1955 this._valueContainerId = 'vc' + tagId; 1956 1957 this._valueFieldId = 'vf' + tagId; 1958 1959 if (typeof(this.fieldName) == 'undefined') this.fieldName = tagId + '_value'; 1960 1961 this._valueTextId = 'vt' + tagId; 1962 1963 this._slideBarId = 'bar' + tagId; 1964 1965 this._colorbarId = 'cb' + tagId; 1966 1967 this._leadingColorbarId = 'lcb' + tagId; 1968 1969 1970 1971 var divWidth = this.width; // + this._sliderImgWidth; 1972 1973 var divHeight = this.height; 1974 1975 //var completeWidth = this.width + this._arrowIconLeftWidth + this._arrowIconRightWidth + this._sliderImgWidth +15; //15 just to add some space. 1976 1977 1978 1979 var out = new Array(); 1980 1981 var outI = 0; 1982 1983 var localOffset = 0; 1984 1985 1986 1987 //container begin 1988 1989 out[outI++] = '<div id="' + this._containerId + '"'; 1990 1991 if (this.styleContainerClass) { 1992 1993 out[outI++] = ' class="' + this.styleContainerClass + '"'; 1994 1995 } 1996 1997 out[outI++] = ' style="position:relative;'; 1998 1999 if (this._display == 0) { 2000 2001 out[outI++] = ' display:none;'; 2002 2003 } else if (this._display == 1) { 2004 2005 out[outI++] = ' visibility:hidden;'; 2006 2007 } 2008 2009 out[outI++] = ' onmousewheel="Bs_Objects['+this._id+'].onMouseWheel(); return false;"'; 2010 2011 out[outI++] = '">'; 2012 2013 2014 2015 out[outI++] = '<div'; 2016 2017 out[outI++] = ' onmousewheel="Bs_Objects['+this._id+'].onMouseWheel(); return false;"'; 2018 2019 out[outI++] = ' style="position:absolute; left:' + this.moveX + '; top:' + this.moveY + ';">'; 2020 2021 2022 2023 //knob 2024 2025 out[outI++] = '<div style="position:absolute; display:none; z-index:5000;" id="' + this._handleId + '">'; 2026 2027 out[outI++] = '<img name="bsslidericonname" src="' + this.imgDir + this._sliderImgSrc + '" border=0 width=' + this._sliderImgWidth + ' height=' + this._sliderImgHeight + '>'; 2028 2029 out[outI++] = '</div>'; 2030 2031 2032 2033 //arrow left 2034 2035 if ((this.arrowAmount > 0) && this._arrowIconLeftSrc) { 2036 2037 out[outI++] = '<div id="' + this._arrowLeftContainerId + '" style="position:absolute; left:' + localOffset + '; top:0;">'; 2038 2039 out[outI++] = '<a href="javascript:void(false);"'; 2040 2041 if (this.arrowMouseOver) { 2042 2043 out[outI++] = ' onMouseOver="Bs_Objects['+this._id+'].onChangeByArrow(false, true); return false;"'; 2044 2045 out[outI++] = ' onMouseOut="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2046 2047 } else { 2048 2049 //old code: 2050 2051 out[outI++] = ' onClick="Bs_Objects['+this._id+'].onChangeByArrow(false); return false;"'; 2052 2053 //new code: 2054 2055 //out[outI++] = ' onMouseDown="Bs_Objects['+this._id+'].onChangeByArrow(false, true); return false;"'; 2056 2057 //out[outI++] = ' onMouseUp="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2058 2059 //out[outI++] = ' onMouseOut="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2060 2061 } 2062 2063 out[outI++] = '>'; 2064 2065 out[outI++] = '<img id="' + this._arrowLeftIconId + '" src="' + this.imgDir + this._arrowIconLeftSrc + '" border="0" width="' + this._arrowIconLeftWidth + '" height="' + this._arrowIconLeftHeight + '"'; 2066 2067 if (typeof(this.arrowIconLeftCssStyle) != 'undefined') { 2068 2069 out[outI++] = ' style="' + this.arrowIconLeftCssStyle + '"'; 2070 2071 } 2072 2073 out[outI++] = '>'; 2074 2075 out[outI++] = '</a></div>'; 2076 2077 localOffset += this._arrowIconLeftWidth; 2078 2079 } 2080 2081 2082 2083 //left background image 2084 2085 if (typeof(this._bgImgLeftSrc) != 'undefined') { 2086 2087 var tmpLeft = (this.direction == 0) ? localOffset : 0; 2088 2089 var tmpTop = (this.direction == 0) ? 0 : localOffset; 2090 2091 out[outI++] = '<div style="position:absolute; left:' + tmpLeft + '; top:' + tmpTop + ';">'; 2092 2093 out[outI++] = '<img src="' + this.imgDir + this._bgImgLeftSrc + '" width="' + this._bgImgLeftWidth + '" height="' + this._bgImgLeftHeight + '" border="0">'; 2094 2095 out[outI++] = '</div>'; 2096 2097 localOffset += (this.direction == 0) ? this._bgImgLeftWidth : this._bgImgLeftHeight; 2098 2099 } 2100 2101 2102 2103 //leading colorbar 2104 2105 if (this.leadingColorbar) { 2106 2107 out[outI++] = '<div id="' + this._leadingColorbarId + '" onClick="return false;"'; 2108 2109 if (this.leadingColorbar['cssClass']) { 2110 2111 out[outI++] = ' class="' + this.leadingColorbar['cssClass'] + '"'; 2112 2113 } 2114 2115 out[outI++] = ' style="position:absolute; z-index:4000; width:0;'; 2116 2117 if ('undefined' != typeof(this.leadingColorbar['color'])) { 2118 2119 out[outI++] = ' background-color:' + this.leadingColorbar['color'] + ';'; 2120 2121 } else if ('undefined' == typeof(this.leadingColorbar['cssClass'])) { 2122 2123 out[outI++] = ' background-color:black;'; 2124 2125 } 2126 2127 if ('undefined' != typeof(this.leadingColorbar['offsetLeft'])) { 2128 2129 out[outI++] = ' left:' + (localOffset + this.leadingColorbar['offsetLeft']) + ';'; 2130 2131 } 2132 2133 if ('undefined' != typeof(this.leadingColorbar['offsetTop'])) { 2134 2135 out[outI++] = ' top:' + this.leadingColorbar['offsetTop'] + ';'; 2136 2137 } 2138 2139 if ('undefined' != typeof(this.leadingColorbar['height'])) { 2140 2141 out[outI++] = ' height:' + this.leadingColorbar['height'] + ';'; 2142 2143 } 2144 2145 out[outI++] = '">'; 2146 2147 out[outI++] = '<img src="/_bsImages/spacer.gif" width="1" height="5"></div>'; 2148 2149 } 2150 2151 2152 2153 2154 2155 //main layer 2156 2157 out[outI++] = '<div id="' + this._slideBarId + '" onClick="Bs_Objects['+this._id+'].onChangeByClick(event);"'; 2158 2159 2160 2161 var tmpLeft = (this.direction == 0) ? localOffset : 0; 2162 2163 var tmpTop = (this.direction == 0) ? 0 : localOffset; 2164 2165 out[outI++] = ' style="position:absolute; left:' + tmpLeft + '; top:' + tmpTop + '; width:' + divWidth + '; height: ' + divHeight + '; clip:rect(0 ' + divWidth + ' ' + divHeight + ' 0);'; 2166 2167 2168 2169 if (this.bgColor) { 2170 2171 out[outI++] = 'background-color:' + this.bgColor + '; layer-background-color:' + this.bgColor + ';'; 2172 2173 } 2174 2175 if (this._bgImgSrc) { 2176 2177 out[outI++] = ' background-image: url(' + this.imgDir + this._bgImgSrc + '); background-repeat:' + this._bgImgRepeat + ';'; 2178 2179 } 2180 2181 if (this._bgImgCssStyle) { 2182 2183 out[outI++] = this._bgImgCssStyle; 2184 2185 } 2186 2187 out[outI++] = '"></div>'; 2188 2189 2190 2191 //if (this.leadingColorbar) 2192 // localOffset += (this.direction == 0) ? 20 : this.height; 2193 2194 2195 2196 //colorbar 2197 2198 if (this.colorbar) { 2199 2200 out[outI++] = '<div id="' + this._colorbarId + '" onClick="Bs_Objects['+this._id+'].onChangeByClick(event);"'; 2201 2202 if (this.colorbar['cssClass']) { 2203 2204 out[outI++] = ' class="' + this.colorbar['cssClass'] + '"'; 2205 2206 } 2207 2208 out[outI++] = ' style="position:absolute; z-index:4000; width:0;'; 2209 2210 if ('undefined' != typeof(this.colorbar['color'])) { 2211 2212 out[outI++] = ' background-color:' + this.colorbar['color'] + ';'; 2213 2214 } else if ('undefined' == typeof(this.colorbar['cssClass'])) { 2215 2216 out[outI++] = ' background-color:orange;'; 2217 2218 } 2219 2220 if ('undefined' != typeof(this.colorbar['offsetLeft'])) { 2221 2222 out[outI++] = ' left:' + (localOffset + this.colorbar['offsetLeft']) + ';'; 2223 2224 } 2225 2226 if ('undefined' != typeof(this.colorbar['offsetTop'])) { 2227 2228 out[outI++] = ' top:' + this.colorbar['offsetTop'] + ';'; 2229 2230 } 2231 2232 if ('undefined' != typeof(this.colorbar['height'])) { 2233 2234 out[outI++] = ' height:' + this.colorbar['height'] + ';'; 2235 2236 } 2237 2238 out[outI++] = '">'; 2239 2240 out[outI++] = '<img src="/_bsImages/spacer.gif" width="1" height="5"></div>'; 2241 2242 } 2243 2244 2245 2246 localOffset += (this.direction == 0) ? this.width : this.height; 2247 2248 2249 2250 //if (this.leadingColorbar) 2251 2252 // localOffset -= (this.direction == 0) ? 20 : this.height; 2253 2254 2255 2256 2257 2258 2259 2260 //right background image 2261 2262 if (typeof(this._bgImgRightSrc) != 'undefined') { 2263 2264 var tmpLeft = (this.direction == 0) ? localOffset : 0; 2265 2266 var tmpTop = (this.direction == 0) ? 0 : localOffset; 2267 2268 out[outI++] = '<div style="position:absolute; left:' + tmpLeft + '; top:' + tmpTop + ';">'; 2269 2270 out[outI++] = '<img src="' + this.imgDir + this._bgImgRightSrc + '" width="' + this._bgImgRightWidth + '" height="' + this._bgImgRightHeight + '" border="0">'; 2271 2272 out[outI++] = '</div>'; 2273 2274 localOffset += (this.direction == 0) ? this._bgImgRightWidth : this._bgImgRightHeight; 2275 2276 } 2277 2278 2279 2280 //arrow right 2281 2282 if ((this.arrowAmount > 0) && this._arrowIconRightSrc) { 2283 2284 var tmpLeft = (this.direction == 0) ? localOffset : 0; 2285 2286 var tmpTop = (this.direction == 0) ? 0 : localOffset; 2287 2288 out[outI++] = '<div id="' + this._arrowRightContainerId + '" style="position:absolute; left:' + tmpLeft + '; top:' + tmpTop + ';">'; 2289 2290 out[outI++] = '<a href="javascript:void(false);"'; 2291 2292 if (this.arrowMouseOver) { 2293 2294 out[outI++] = ' onMouseOver="Bs_Objects['+this._id+'].onChangeByArrow(true, true); return false;"'; 2295 2296 out[outI++] = ' onMouseOut="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2297 2298 } else { 2299 2300 //old: 2301 2302 out[outI++] = ' onClick="Bs_Objects['+this._id+'].onChangeByArrow(true); return false;"'; 2303 2304 //new: 2305 2306 //out[outI++] = ' onMouseDown="Bs_Objects['+this._id+'].onChangeByArrow(true, true); return false;"'; 2307 2308 //out[outI++] = ' onMouseUp="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2309 2310 //out[outI++] = ' onMouseOut="Bs_Objects['+this._id+'].stopFireArrow(); return false;"'; 2311 2312 } 2313 2314 out[outI++] = '>'; 2315 2316 out[outI++] = '<img id="' + this._arrowRightIconId + '" src="' + this.imgDir + this._arrowIconRightSrc + '" border="0" width="' + this._arrowIconRightWidth + '" height="' + this._arrowIconRightHeight + '"'; 2317 2318 if (typeof(this.arrowIconRightCssStyle) != 'undefined') { 2319 2320 out[outI++] = ' style="' + this.arrowIconRightCssStyle + '"'; 2321 2322 } 2323 2324 out[outI++] = '>'; 2325 2326 out[outI++] = '</a></div>'; 2327 2328 localOffset += this._arrowIconRightWidth; 2329 2330 } 2331 2332 2333 2334 //input field and text 2335 2336 var styleValueFieldClass = (this.styleValueFieldClass) ? ' class="' + this.styleValueFieldClass + '"' : ''; 2337 2338 var styleValueTextClass = (this.styleValueTextClass) ? ' class="' + this.styleValueTextClass + '"' : ''; 2339 2340 out[outI++] = '<div id="' + this._valueContainerId + '" style="position:absolute; left:' + localOffset + '; top:0px;">'; 2341 2342 if (this.useInputField == 1) { 2343 2344 //view only 2345 2346 out[outI++] = '<span' + styleValueTextClass + ' id="' + this._valueTextId + '">' + this.valueDefault + '</span>'; 2347 2348 out[outI++] = '<input type="hidden" name="' + this.fieldName + '" id="' + this._valueFieldId + '" value="' + this.valueDefault + '">'; 2349 2350 } else if (this.useInputField == 2) { 2351 2352 //edit 2353 2354 out[outI++] = '<input type="text"' + styleValueFieldClass + ' onMouseOver="bsFormFieldSetFocusAndSelect(this, false);" name="' + this.fieldName + '" id="' + this._valueFieldId + '" value="' + this.valueDefault + '" size="2"'; 2355 2356 if (styleValueFieldClass == '') { //so it does not look *that* bad by default. 2357 2358 out[outI++] = ' style="vertical-align:text-top; width:30; height:' + this.height + ';"'; 2359 2360 } 2361 2362 out[outI++] = ' onKeyUp="Bs_Objects['+this._id+'].onChangeByInput(this.value, false);" onBlur="Bs_Objects['+this._id+'].onChangeByInput(this.value, true);">'; 2363 2364 } else if (this.useInputField == 3) { 2365 2366 //view, start editmode on click 2367 2368 out[outI++] = '<input type="text"' + styleValueFieldClass + ' onMouseOver="bsFormFieldSetFocusAndSelect(this, false);" name="' + this.fieldName + '" id="' + this._valueFieldId + '" value="' + this.valueDefault + '" size="2"'; 2369 2370 if (styleValueFieldClass == '') { //so it does not look *that* bad by default. 2371 2372 out[outI++] = ' style="display:none; vertical-align:text-top; width:30; height:' + this.height + ';"'; 2373 2374 } else { 2375 2376 out[outI++] = ' style="display:none;"'; 2377 2378 } 2379 2380 out[outI++] = ' onKeyUp="Bs_Objects['+this._id+'].onChangeByInput(this.value, false);" onBlur="var _bss = Bs_Objects['+this._id+']; _bss.onChangeByInput(this.value, true); _bss.textboxEdit(false)">'; 2381 2382 out[outI++] = '<span' + styleValueTextClass + ' style="" id="' + this._valueTextId + '" '; 2383 2384 if (this.inputTextFieldEvent == 'click') { 2385 2386 out[outI++] = 'onClick="Bs_Objects['+this._id+'].textboxEdit(true);"'; 2387 2388 } else { 2389 2390 out[outI++] = 'onMouseOver="Bs_Objects['+this._id+'].textboxEdit(true);"'; 2391 2392 } 2393 2394 out[outI++] = '>' + this.valueDefault + '</span>'; 2395 2396 } else { //0 2397 2398 out[outI++] = '<input type="hidden" name="' + this.fieldName + '" id="' + this._valueFieldId + '" value="' + this.valueDefault + '">'; 2399 2400 } 2401 2402 out[outI++] = '</div>'; 2403 2404 2405 2406 out[outI++] = '</div>'; 2407 2408 2409 2410 //container end 2411 2412 out[outI++] = '</div>'; 2413 2414 2415 2416 document.getElementById(tagId).innerHTML = out.join(''); 2417 2418 //document.getElementById(tagId).innerHTML = '<textarea>'+out.join('')+'</textarea>'; 2419 2420 //return; 2421 2422 2423 2424 this._containerObj = document.getElementById(this._containerId); 2425 2426 this._handleObj = document.getElementById(this._handleId); 2427 2428 this._valueContainerObj = document.getElementById(this._valueContainerId); 2429 2430 this._arrowLeftContainerObj = document.getElementById(this._arrowLeftContainerId); 2431 2432 this._arrowLeftIconObj = document.getElementById(this._arrowLeftIconId); 2433 2434 this._arrowRightContainerObj = document.getElementById(this._arrowRightContainerId); 2435 2436 this._arrowRightIconObj = document.getElementById(this._arrowRightIconId); 2437 2438 this._valueFieldObj = document.getElementById(this._valueFieldId); 2439 2440 this._valueTextObj = document.getElementById(this._valueTextId); 2441 2442 this._slideBarObj = document.getElementById(this._slideBarId); 2443 2444 this._colorbarObj = document.getElementById(this._colorbarId); 2445 2446 this._leadingColorbarObj = document.getElementById(this._leadingColorbarId); 2447 2448 2449 2450 //this._posSlideStart = (this.direction == 0) ? getDivLeft(this._slideBarObj) : getDivTop(this._slideBarObj); //30; 2451 2452 2453 2454 // Subtracting 7 (this number by trial and error) from starting position so that slider can start sliding much before - had to do this when I did the proportional width changes 2455 2456 this._posSlideStart = 16; //(this.direction == 0) ? getDivLeft(this._slideBarObj) - 7 : getDivTop(this._slideBarObj); //30; 2457 2458 2459 2460 //this._slideWidth = (this.direction == 0) ? this.width - this._sliderImgWidth : this.height - this._sliderImgHeight; 2461 2462 // By trial and error I found if I don't subtract the slider image width from this.width, the sliders were working well.(especially where I need to move them in sync) 2463 2464 this._slideWidth = (this.direction == 0) ? this.width : this.height - this._sliderImgHeight; 2465 2466 2467 2468 this._posSlideEnd = this._posSlideStart + this._slideWidth; 2469 2470 2471 2472 this._currentRelSliderPosX = this._posSlideStart; 2473 2474 this._currentRelLeadSliderPosX = this._posSlideStart; 2475 2476 2477 2478 // This next if block was added if a leading space is to be shown. Note that the "leading space" is actually part of the regular space we show. 2479 2480 // It is just used so as to show it in a different color. 2481 2482 if (this.valueLeadDefault > this.minVal) { 2483 2484 //how many percent is valueLeadDefault from maxVal-minVal? 2485 2486 var hundertPercent = this.maxVal - this.minVal; 2487 2488 var myPercent = (this.valueLeadDefault-this.minVal) * 100 / hundertPercent; 2489 2490 //now how much is that from the given length? 2491 2492 this._currentRelLeadSliderPosX += (myPercent * this._slideWidth / 100); 2493 2494 this._updateLeadColorbar(this._currentRelLeadSliderPosX); 2495 2496 } 2497 2498 2499 2500 if (this.valueDefault > this.minVal) { 2501 2502 //how many percent is valueDefault from maxVal-minVal? 2503 2504 var hundertPercent = this.maxVal - this.minVal; 2505 2506 var myPercent = (this.valueDefault-this.minVal) * 100 / hundertPercent; 2507 2508 //now how much is that from the given length? 2509 2510 this._currentRelSliderPosX += (myPercent * this._slideWidth / 100); 2511 2512 //alert("Start : " + this._posSlideStart + " percentwidth : " + (myPercent * this._slideWidth / 100) + " current pos :" + this._currentRelSliderPosX) 2513 2514 this._updateColorbar(this._currentRelSliderPosX); 2515 2516 } 2517 2518 if (this.direction == 0) { 2519 2520 this._handleObj.style.left = this._currentRelSliderPosX; 2521 2522 } else { 2523 2524 this._handleObj.style.top = this._currentRelSliderPosX; 2525 2526 } 2527 2528 this._handleObj.style.display = 'block'; 2529 2530 2531 2532 //handleObj = handlespan 2533 2534 temp = ech_attachMouseDrag(this._handleObj,this.slideStart,null,this.slideMove,null,this.slideEnd,null,null,null); 2535 2536 temp = temp.linkCtrl(getDivImage('','bsslidericonname')); 2537 2538 this.ctrl = temp; 2539 2540 this.ctrl.sliderObj = this; //add back reference 2541 2542 2543 2544 var x = getDivLeft(this._handleObj); 2545 2546 var y = getDivTop(this._handleObj); 2547 2548 y = 0; //z3b 2549 2550 2551 2552 //alert(x); 2553 2554 //alert(y); return; 2555 2556 2557 2558 if (this.direction == 0) { // horizontal 2559 2560 this.ctrl.minX = this._posSlideStart; 2561 2562 this.ctrl.maxX = this._posSlideEnd; 2563 2564 this.ctrl.minY = y; 2565 2566 this.ctrl.maxY = y; 2567 2568 } else { // vertical 2569 2570 this.ctrl.minX = x; 2571 2572 this.ctrl.maxX = x; 2573 2574 this.ctrl.minY = this._posSlideStart; 2575 2576 this.ctrl.maxY = this._posSlideEnd; 2577 2578 } 2579 2580 /* 2581 2582 if (this.direction == 0) { // horizontal 2583 2584 this.ctrl.minX = x-Math.abs((this.valueDefault - this.minVal) * this.width / (this.maxVal - this.minVal)); 2585 2586 this.ctrl.maxX = x+Math.abs((this.maxVal - this.valueDefault) * this.width / (this.maxVal - this.minVal)); 2587 2588 this.ctrl.minY = y; this.ctrl.maxY = y; 2589 2590 } else { // vertical 2591 2592 this.ctrl.minX = x; this.ctrl.maxX = x; 2593 2594 this.ctrl.minY = y-Math.abs((this.valueDefault - this.minVal) * this.width / (this.maxVal - this.minVal)); 2595 2596 this.ctrl.maxY = y+Math.abs((this.maxVal - this.valueDefault) * this.width / (this.maxVal - this.minVal)); 2597 2598 } 2599 2600 */ 2601 2602 2603 2604 } 2605 2606 2607 2608 2609 2610 /** 2611 2612 * Renders the checkbox component and places it into the page. 2613 2614 * 2615 2616 * @access public 2617 2618 * @param string tagId Id of the tag. (Use <div> or <span> to hold the ID) 2619 2620 * @return void 2621 2622 */ 2623 2624 this.drawInto = function(tagId) { 2625 2626 this.render(tagId); 2627 2628 if (this._disabled) this.setDisabled(true); 2629 2630 } 2631 2632 2633 2634 /** 2635 2636 * DEPRECATED. 2637 2638 * Use drawInto() 2639 2640 * @deprecated use drawInto() 2641 2642 * @param string tagId (id of the span tag.) 2643 2644 * @see drawInto() 2645 2646 * @return void 2647 2648 */ 2649 2650 this.draw = function(tagId) { 2651 2652 this.render(tagId); 2653 2654 if (this._disabled) this.setDisabled(true); 2655 2656 } 2657 2658 2659 2660 /** 2661 2662 * Attaches an event like onChange, onMouseOver, onClickCaption ... a.s.o. 2663 2664 * Supported events are: 2665 2666 * - 'onChange' 2667 2668 * 2669 2670 * @access public 2671 2672 * @param string trigger (for example 'onChange') 2673 2674 * @param function A globalFunctionName (No string) 2675 2676 * @return void 2677 2678 * @see _attachedEvents 2679 2680 */ 2681 2682 this.attachEvent = function(trigger, yourEvent) { 2683 2684 if (typeof(this._attachedEvents) == 'undefined') { 2685 2686 this._attachedEvents = new Array(); 2687 2688 } 2689 2690 2691 2692 if (typeof(this._attachedEvents[trigger]) == 'undefined') { 2693 2694 this._attachedEvents[trigger] = new Array(yourEvent); 2695 2696 } else { 2697 2698 this._attachedEvents[trigger][this._attachedEvents[trigger].length] = yourEvent; 2699 2700 } 2701 2702 } 2703 2704 2705 2706 /** 2707 2708 * Tells if an event is attached for the trigger specified. 2709 2710 * @access public 2711 2712 * @param string trigger 2713 2714 * @return bool 2715 2716 */ 2717 2718 this.hasEventAttached = function(trigger) { 2719 2720 return (this._attachedEvents && this._attachedEvents[trigger]); 2721 2722 } 2723 2724 2725 2726 /** 2727 2728 * Fires the events for the trigger specified. 2729 2730 * (used internally, but feel free to trigger events yourself...) 2731 2732 * @access public 2733 2734 * @param string trigger (for example 'onClickCaption') 2735 2736 * @return void 2737 2738 */ 2739 2740 this.fireEvent = function(trigger) { 2741 2742 if (this._attachedEvents && this._attachedEvents[trigger]) { 2743 2744 var e = this._attachedEvents[trigger]; 2745 2746 if ((typeof(e) == 'string') || (typeof(e) == 'function')) { 2747 2748 e = new Array(e); 2749 2750 } 2751 2752 for (var i=0; i<e.length; i++) { 2753 2754 if (typeof(e[i]) == 'function') { 2755 2756 e[i](this); 2757 2758 } else if (typeof(e[i]) == 'string') { 2759 2760 eval(e[i]); 2761 2762 } //else murphy 2763 2764 } 2765 2766 } 2767 2768 } 2769 2770 2771 2772 2773 2774 /**#@+ 2775 2776 * Attache a global JS-fuction that will be called. 2777 2778 * @access public 2779 2780 * @param function functionName (not a string!) 2781 2782 */ 2783 2784 this.attachOnChange = function(functionName) { 2785 2786 this.eventOnChange = functionName; 2787 2788 } 2789 2790 2791 2792 this.attachOnSlideStart = function(functionName) { 2793 2794 this.slideStartCB = functionName; 2795 2796 } 2797 2798 this.attachOnSlideMove = function(functionName) { 2799 2800 this.slideMoveCB = functionName; 2801 2802 } 2803 2804 this.attachOnSlideEnd = function(functionName) { 2805 2806 this.slideEndCB = functionName; 2807 2808 } 2809 2810 /**#@-*/ 2811 2812 2813 2814 /**#@+ 2815 2816 * Attache a global JS-fuction that will be called. 2817 2818 * @access public 2819 2820 * @param function func (not a string!) 2821 2822 */ 2823 2824 this.attachOnArrow = function(functionName) { 2825 2826 this.eventOnArrow = functionName; 2827 2828 } 2829 2830 this.attachOnInputChange = function(functionName) { 2831 2832 this.eventOnInputChange = functionName; 2833 2834 } 2835 2836 this.attachOnInputBlur = function(functionName) { 2837 2838 this.eventOnInputBlur = functionName; 2839 2840 } 2841 2842 /**#@-*/ 2843 2844 2845 2846 2847 2848 /** 2849 2850 * Sets the knob icon to be used by the slider. 2851 2852 * @access public 2853 2854 * @param string imgName (on path) 2855 2856 * @param int width if image in pixel 2857 2858 * @param int height if image in pixel 2859 2860 * @see imgDir 2861 2862 * @return void 2863 2864 */ 2865 2866 this.setSliderIcon = function(imgName, width, height) { 2867 2868 this._sliderImgSrc = imgName; 2869 2870 this._sliderImgWidth = width; 2871 2872 this._sliderImgHeight = height; 2873 2874 } 2875 2876 2877 2878 /** 2879 2880 * sets the arrow icon left/top (depending on direction horizontal/vertical). 2881 2882 * @access public 2883 2884 * @param string imgName 2885 2886 * @param int width 2887 2888 * @param int height 2889 2890 * @return void 2891 2892 */ 2893 2894 this.setArrowIconLeft = function(imgName, width, height) { 2895 2896 this._arrowIconLeftSrc = imgName; 2897 2898 this._arrowIconLeftWidth = width; 2899 2900 this._arrowIconLeftHeight = height; 2901 2902 } 2903 2904 2905 2906 /** 2907 2908 * sets the arrow icon right/bottom (depending on direction horizontal/vertical). 2909 2910 * @access public 2911 2912 * @param string imgName 2913 2914 * @param int width 2915 2916 * @param int height 2917 2918 * @return void 2919 2920 */ 2921 2922 this.setArrowIconRight = function(imgName, width, height) { 2923 2924 this._arrowIconRightSrc = imgName; 2925 2926 this._arrowIconRightWidth = width; 2927 2928 this._arrowIconRightHeight = height; 2929 2930 } 2931 2932 2933 2934 /** 2935 2936 * Sets a background image. 2937 2938 * 2939 2940 * possible values for the repeat css property: 2941 2942 * repeat => the background image repeats on both axis 2943 2944 * repeat-x => the bg image repeats on the x-axis only. 2945 2946 * repeat-y => the bg image repeats on the y-axis only. 2947 2948 * no-repeat => the bg image does not repeat; it only shows once. 2949 2950 * 2951 2952 * @access public 2953 2954 * @param string src 2955 2956 * @param string repeat (read above) 2957 2958 * @param string cssStyle (additional css style string, eg "left:4px;" to indent 4px from the left. since bs-4.6) 2959 2960 * @return void 2961 2962 * @see setBackgroundImageLeft(), setBackgroundImageRight() 2963 2964 */ 2965 2966 this.setBackgroundImage = function(src, repeat, cssStyle) { 2967 2968 this._bgImgSrc = src; 2969 2970 this._bgImgRepeat = repeat; 2971 2972 this._bgImgCssStyle = cssStyle; 2973 2974 } 2975 2976 2977 2978 /** 2979 2980 * Sets a background image to use on the left side. see the examples. 2981 2982 * @access public 2983 2984 * @param string imgName 2985 2986 * @param int width 2987 2988 * @param int height 2989 2990 * @return void 2991 2992 * @see setBackgroundImage(), setBackgroundImageRight() 2993 2994 */ 2995 2996 this.setBackgroundImageLeft = function(imgName, width, height) { 2997 2998 this._bgImgLeftSrc = imgName; 2999 3000 this._bgImgLeftWidth = width; 3001 3002 this._bgImgLeftHeight = height; 3003 3004 } 3005 3006 3007 3008 /** 3009 3010 * Sets a background image to use on the right side. see the examples. 3011 3012 * @access public 3013 3014 * @param string imgName 3015 3016 * @param int width 3017 3018 * @param int height 3019 3020 * @return void 3021 3022 * @see setBackgroundImage(), setBackgroundImageLeft() 3023 3024 */ 3025 3026 this.setBackgroundImageRight = function(imgName, width, height) { 3027 3028 this._bgImgRightSrc = imgName; 3029 3030 this._bgImgRightWidth = width; 3031 3032 this._bgImgRightHeight = height; 3033 3034 } 3035 3036 3037 3038 3039 3040 /** 3041 3042 * How the slider should be seen in the browser. 3043 3044 * <pre> 3045 3046 * (rtfm about css) 3047 3048 * 0 = display:none 3049 3050 * 1 = visibility:hidden 3051 3052 * 2 = display:block 3053 3054 * </pre> 3055 3056 * 3057 3058 * @access public 3059 3060 * @param int display 3061 3062 * @see _display 3063 3064 */ 3065 3066 this.setDisplay = function(display) { 3067 3068 this._display = display; 3069 3070 if (this._containerObj) { 3071 3072 switch (display) { 3073 3074 case 0: 3075 3076 this._containerObj.style.display = 'none'; 3077 3078 break; 3079 3080 case 1: 3081 3082 this._containerObj.style.visibility = 'hidden'; 3083 3084 break; 3085 3086 case 2: 3087 3088 //we need to activate both 3089 3090 this._containerObj.style.visibility = 'visible'; 3091 3092 this._containerObj.style.display = 'block'; 3093 3094 break; 3095 3096 default: 3097 3098 //user set an invalid value. 3099 3100 } 3101 3102 } 3103 3104 } 3105 3106 /** 3107 3108 * Disables (or re-enables) the whole slider. 3109 3110 * 3111 3112 * if the param b is not specified, the current disabled mode will be toggled (inverted). 3113 3114 * 3115 3116 * @access public 3117 3118 * @param bool b (true=disabled, false=enabled) 3119 3120 * @since bs4.4 3121 3122 * @status experimental (or still at work) 3123 3124 */ 3125 3126 this.setDisabled = function(b) { 3127 3128 if (typeof(b) == 'undefined') b = !this._disabled; 3129 3130 3131 3132 if (b) { 3133 3134 //be aware that the filters don't work on all elements, in all cases. there's not much i can do. 3135 3136 //it once didn't work in a div, but then it worked in a table at the same place. 3137 3138 //now it does not work on a span. well... not a killer feature. 3139 3140 var filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); progid:DXImageTransform.Microsoft.BasicImage(opacity=.5)'; 3141 3142 var cursor = 'default'; 3143 3144 } else { 3145 3146 var filter = null; 3147 3148 var cursor = 'hand'; //moz == pointer 3149 3150 } 3151 3152 //try { 3153 3154 var t = new Array( 3155 3156 this._containerId, this._arrowLeftContainerId, this._arrowRightContainerId, 3157 3158 this._valueFieldId, this._valueTextId, 3159 3160 this._slideBarId, this._colorbarId, this._handleId 3161 3162 ); //this._valueContainerId, 3163 3164 for (var i=0; i<t.length; i++) { 3165 3166 var elm = document.getElementById(t[i]); 3167 3168 if (elm != null) elm.style.filter = filter; 3169 3170 } 3171 3172 var elm = document.getElementById(this._arrowLeftIconId); 3173 3174 if (elm != null) elm.style.cursor = cursor; 3175 3176 3177 3178 var elm = document.getElementById(this._arrowRightIconId); 3179 3180 if (elm != null) elm.style.cursor = cursor; 3181 3182 3183 3184 var elm = document.getElementById(this._valueFieldId); 3185 3186 if (elm != null) elm.disabled = b; 3187 3188 3189 3190 //} catch (e) { 3191 3192 //} 3193 3194 3195 3196 this._disabled = b; 3197 3198 } 3199 3200 3201 3202 /** 3203 3204 * Returns the current silder value. 3205 3206 * @access public 3207 3208 * @return double 3209 3210 * @see getValueInPercent() 3211 3212 */ 3213 3214 this.getValue = function() { 3215 3216 return this._valueInternal; 3217 3218 } 3219 3220 3221 3222 /** 3223 3224 * returns the current slider value in percent (compared to min/max value). 3225 3226 * @access public 3227 3228 * @return double (0 - 100) 3229 3230 * @see getValue() 3231 3232 * @since bs-4.6 3233 3234 */ 3235 3236 this.getValueInPercent = function() { 3237 3238 var range = Math.abs(this.maxVal - this.minVal); 3239 3240 var percent = this._valueInternal / range * 100; 3241 3242 return percent; 3243 3244 } 3245 3246 3247 3248 3249 3250 /** 3251 3252 * Returns the current slider relative position in pixel. 3253 3254 * @access public 3255 3256 * @return int 3257 3258 */ 3259 3260 this.getSliderPos = function() { 3261 3262 var absLeng = (this.direction==0) ? getDivLeft(this.ctrl.div) - this.ctrl.minX : getDivTop (this.ctrl.div) - this.ctrl.minY; 3263 3264 var absRang = this.maxVal - this.minVal; 3265 3266 //alert("975: absLeng:" +absLeng+" absRang:"+absRang+" _slideWidth:"+this._slideWidth); 3267 3268 return (absLeng * absRang/this._slideWidth) + this.minVal; 3269 3270 } 3271 3272 3273 3274 3275 3276 /** 3277 3278 * Fires when the user slides. 3279 3280 * @access private 3281 3282 */ 3283 3284 this.onChangeBySlide = function() { 3285 3286 if (this._disabled) return; 3287 3288 var newPos = this._getNewLocationFromCursor(); 3289 3290 var val = this._getValueByPosition(newPos); 3291 3292 val = this._roundToGrid(val); 3293 3294 if (val != this._valueInternal) { 3295 3296 this._valueInternal = val; 3297 3298 this.updateHandle(newPos); 3299 3300 this.updateValueField(val); 3301 3302 this.updateValueText(val); 3303 3304 this._updateColorbar(newPos); 3305 3306 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3307 3308 this.fireEvent('onChange'); 3309 3310 } 3311 3312 } 3313 3314 3315 3316 /** 3317 3318 * If a browser does not support that way of changing the slider value, 3319 3320 * nothing gets done. 3321 3322 * @access public 3323 3324 * @param object event (the event object) 3325 3326 * @return void 3327 3328 */ 3329 3330 this.onChangeByClick = function(event) { 3331 3332 if (this._disabled) return; 3333 3334 var newPos = 0; 3335 3336 if ('undefined' != typeof(event.offsetX)) { 3337 3338 newPos = (this.direction == 0) ? event.offsetX + this._posSlideStart : event.offsetY + this._posSlideStart; 3339 3340 } else if ('undefined' != typeof(event.layerX)) { 3341 3342 newPos = (this.direction == 0) ? event.layerX + this._posSlideStart : event.layerY + this._posSlideStart; 3343 3344 } else { 3345 3346 return; //not supported. 3347 3348 } 3349 3350 3351 3352 var val = this._getValueByPosition(newPos); 3353 3354 val = this._roundToGrid(val); 3355 3356 if (val != this._valueInternal) { 3357 3358 this._valueInternal = val; 3359 3360 this.updateHandle(newPos); 3361 3362 this.updateValueField(val); 3363 3364 this.updateValueText(val); 3365 3366 this._updateColorbar(newPos); 3367 3368 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3369 3370 this.fireEvent('onChange'); 3371 3372 } 3373 3374 } 3375 3376 3377 3378 /** 3379 3380 * Fires when the user inputs a new value into the input field. 3381 3382 * @access public 3383 3384 * @param string val (new value) 3385 3386 * @param bool isBlur (if it's a onChange event set to false, on an onBlur event set to true.) 3387 3388 * @return void 3389 3390 */ 3391 3392 this.onChangeByInput = function(val, isBlur) { 3393 3394 if (this._disabled) return; 3395 3396 if (val == '') { 3397 3398 val = this.minVal; 3399 3400 } 3401 3402 val = this._roundToGrid(val); 3403 3404 var newPos = this._getPositionByValue(val); 3405 3406 if (val != this._valueInternal) { 3407 3408 this._valueInternal = val; 3409 3410 this.updateHandle(newPos); 3411 3412 this._updateColorbar(newPos); 3413 3414 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3415 3416 this.fireEvent('onChange'); 3417 3418 if (isBlur) { //the user may still be typing. don't fuck his typing until he left the field. 3419 3420 this.updateValueField(val); 3421 3422 this.updateValueText(val); 3423 3424 } 3425 3426 } else if (isBlur) { 3427 3428 //it's possible that the field val is "" (empty) and now the user left that field. 3429 3430 //we it is still empty, we got the blur event, and need to update the field/text values: 3431 3432 this.updateValueField(val); 3433 3434 this.updateValueText(val); 3435 3436 } 3437 3438 } 3439 3440 3441 3442 /** 3443 3444 * @access public 3445 3446 * @param bool leftOrRight (false=left, true=right. as with politics. :) 3447 3448 * @param bool keepFiring (if true then it sets a timeout to fire again, until this cycle is exited using stopFireArrow().) 3449 3450 * @param bool loopCall (used internally only on calls from setTimeout().) 3451 3452 */ 3453 3454 this.onChangeByArrow = function(leftOrRight, keepFiring, loopCall) { 3455 3456 if (!loopCall) this._stopFireArrowFlag = false; 3457 3458 3459 3460 if (this._stopFireArrowFlag) return; 3461 3462 if (this._disabled) return; 3463 3464 3465 3466 var val = parseFloat(this._valueInternal); 3467 3468 if (leftOrRight) { 3469 3470 val += this.arrowAmount; //right arrow 3471 3472 } else { 3473 3474 val -= this.arrowAmount; //left arrow 3475 3476 } 3477 3478 val = this._roundToGrid(val); 3479 3480 if (val != this._valueInternal) { 3481 3482 this._valueInternal = val; 3483 3484 var newPos = this._getPositionByValue(val); 3485 3486 this.updateHandle(newPos); 3487 3488 this.updateValueField(val); 3489 3490 this.updateValueText(val); 3491 3492 this._updateColorbar(newPos); 3493 3494 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3495 3496 this.fireEvent('onChange'); 3497 3498 } 3499 3500 3501 3502 if (keepFiring) { 3503 3504 if (!this._stopFireArrowFlag && (this.arrowKeepFiringTimeout > 0)) { 3505 3506 setTimeout('Bs_Objects[' + this._id + '].onChangeByArrow(' + leftOrRight + ', ' + keepFiring + ', true);', this.arrowKeepFiringTimeout); 3507 3508 } 3509 3510 } 3511 3512 } 3513 3514 3515 3516 3517 3518 /** 3519 3520 * is called when the mouse wheel is used over the slider. 3521 3522 * @access public (used internally, you don't need that) 3523 3524 * @return void 3525 3526 */ 3527 3528 this.onMouseWheel = function() { 3529 3530 /* 3531 3532 if (event.wheelDelta > 0) { 3533 3534 this.onChangeByArrow(false); 3535 3536 } else if (event.wheelDelta < 0) { 3537 3538 this.onChangeByArrow(true); 3539 3540 } 3541 3542 */ 3543 3544 3545 3546 if (this._disabled) return; 3547 3548 3549 3550 var val = parseFloat(this._valueInternal); 3551 3552 if (event.wheelDelta > 0) { 3553 3554 val -= this.wheelAmount; 3555 3556 } else { 3557 3558 val += this.wheelAmount; 3559 3560 } 3561 3562 val = this._roundToGrid(val); 3563 3564 if (val != this._valueInternal) { 3565 3566 this._valueInternal = val; 3567 3568 var newPos = this._getPositionByValue(val); 3569 3570 this.updateHandle(newPos); 3571 3572 this.updateValueField(val); 3573 3574 this.updateValueText(val); 3575 3576 this._updateColorbar(newPos); 3577 3578 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3579 3580 this.fireEvent('onChange'); 3581 3582 } 3583 3584 } 3585 3586 3587 3588 3589 3590 /** 3591 3592 * stops a loop of firing onChangeByArrow(). 3593 3594 * @access public 3595 3596 * @return void 3597 3598 * @since bs-4.6 3599 3600 */ 3601 3602 this.stopFireArrow = function() { 3603 3604 this._stopFireArrowFlag = true; 3605 3606 } 3607 3608 3609 3610 /** 3611 3612 * Sets a new value. 3613 3614 * @access public 3615 3616 * @param string val (new value) 3617 3618 * @return void 3619 3620 */ 3621 3622 this.setValue = function(val) { 3623 3624 val = this._roundToGrid(val); 3625 3626 var newPos = this._getPositionByValue(val); 3627 3628 if (val != this._valueInternal) { 3629 3630 this._valueInternal = val; 3631 3632 this.updateHandle(newPos); 3633 3634 this._updateColorbar(newPos); 3635 3636 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val, newPos); 3637 3638 this.fireEvent('onChange'); 3639 3640 this.updateValueField(val); 3641 3642 this.updateValueText(val); 3643 3644 } 3645 3646 } 3647 3648 3649 3650 /** 3651 3652 * Sets a new value for the leading space. 3653 3654 * @access public 3655 3656 * @param string val (new value) 3657 3658 * @return void 3659 3660 */ 3661 3662 this.setLeadValue = function(val) { 3663 3664 val = this._roundToGrid(val); 3665 3666 var newPos = this._getPositionByValue(val); 3667 3668 this._updateLeadColorbar(newPos); 3669 3670 // Have to adjust the left and width of the colorbar as well. 3671 3672 newPos = this._getPositionByValue(this._valueInternal); 3673 3674 this._updateColorbar(newPos); 3675 3676 } 3677 3678 3679 3680 /** 3681 3682 * DEPRECATED use setValue(), this method name was confusing. 3683 3684 * 3685 3686 * Use this to set a new value. 3687 3688 * 3689 3690 * --sam the name is confusing, it's a set-function 3691 3692 * --andrej: yes, true. I have added setValue(). 3693 3694 * 3695 3696 * Note: The value you set is left "as is", thus it is *not* rounded to the next grid. 3697 3698 * "Grid rounding" will occure on change (see onChangeByArrow, onChangeByInput, ...). 3699 3700 * @access public 3701 3702 * @param string val (new value) 3703 3704 * @return void 3705 3706 * @depreacted use setValue() 3707 3708 */ 3709 3710 this.onChangeByApi = function(val) { 3711 3712 this.setValue(val); 3713 3714 } 3715 3716 3717 3718 3719 3720 /** 3721 3722 * Updates the colorbar visually. 3723 3724 * @access private 3725 3726 * @param int newPos (at least i think it's an int.) 3727 3728 * @return void 3729 3730 */ 3731 3732 this._updateColorbar = function(newPos) { 3733 3734// alert(this._slideBarObj); 3735 3736// alert(this._colorbarObj); 3737 3738 3739 3740// if (this._colorbarObj == null) alert('hi'); 3741 3742// alert(typeof(this._colorbarObj)); 3743 3744 3745 3746/* 3747 3748 if (this._colorbarId && !this._colorbarObj) { 3749 3750 //that happens with mozilla :/ 3751 3752 this._colorbarObj = document.getElementById(this._colorbarId); 3753 3754 alert(typeof(this._colorbarObj)); 3755 3756 } 3757 3758*/ 3759 3760 3761 3762 if (this._colorbarObj) { 3763 3764 var newWidth = newPos + this.colorbar['widthDifference']; //-10; 3765 3766 if (this.leadingColorbar){ 3767 3768 //newWidth = newWidth - 20; 3769 3770 newWidth = newWidth - getDivWidth(this._leadingColorbarObj); 3771 3772 // Recalculate offsetleft of the layer wrt to the leading colorbar div 3773 3774 this._colorbarObj.style.left = getDivLeft(this._leadingColorbarObj) + getDivWidth(this._leadingColorbarObj) 3775 3776 3777 3778 } 3779 3780 3781 3782 if (newWidth < 0) newWidth = 0; 3783 3784 this._colorbarObj.style.width = newWidth; 3785 3786 3787 3788 if (typeof(this.colorbar['color2']) != 'undefined') { 3789 3790 //fading feature used. 3791 3792 var percent = this.getValueInPercent(); 3793 3794 var newColor = mixColor(this.x, this.colorbar['color2'], percent); 3795 3796 document.getElementById(this._colorbarId).style.backgroundColor = newColor; 3797 3798 } 3799 3800 } 3801 3802 } 3803 3804 3805 3806 /** 3807 3808 * Updates the leading colorbar visually. 3809 3810 * @access private 3811 3812 * @param int newPos (at least i think it's an int.) 3813 3814 * @return void 3815 3816 */ 3817 3818 this._updateLeadColorbar = function(newPos) { 3819 3820 3821 3822 3823 3824 if (this._leadingColorbarObj) { 3825 3826 var newWidth = newPos + this.leadingColorbar['widthDifference']; //-10; 3827 3828 if (newWidth < 0) newWidth = 0; 3829 3830 this._leadingColorbarObj.style.width = newWidth; 3831 3832 } 3833 3834 } 3835 3836 3837 3838 3839 3840 /** 3841 3842 * Calculates the value based on the given position. 3843 3844 * @access private 3845 3846 * @param int pos 3847 3848 * @return double 3849 3850 */ 3851 3852 this._getValueByPosition = function(pos) { 3853 3854 if (this.direction == 0) { 3855 3856 pos -= this.ctrl.minX; 3857 3858 var hundertPercent = this.ctrl.maxX - this.ctrl.minX; 3859 3860 } else { 3861 3862 pos -= this.ctrl.minY; 3863 3864 var hundertPercent = this.ctrl.maxY - this.ctrl.minY; 3865 3866 } 3867 3868 var myPercent = pos / hundertPercent; 3869 3870 var val = this.minVal + ((this.maxVal - this.minVal) * myPercent); 3871 3872 return val; 3873 3874 } 3875 3876 3877 3878 /** 3879 3880 * Calculates the position based on the given value. 3881 3882 * @access private 3883 3884 * @param double val 3885 3886 * @return int 3887 3888 */ 3889 3890 this._getPositionByValue = function(val) { 3891 3892 val = val - this.minVal; //since 4.3, needed. was buggy before if minVal was not 0. 3893 3894 var hundertPercent = this.maxVal - this.minVal; 3895 3896 var myPercent = val / hundertPercent; 3897 3898 if (this.direction == 0) { 3899 3900 var pos = this.ctrl.minX + ((this.ctrl.maxX - this.ctrl.minX) * myPercent); 3901 3902 } else { 3903 3904 var pos = this.ctrl.minY + ((this.ctrl.maxY - this.ctrl.minY) * myPercent); 3905 3906 } 3907 3908 return pos; 3909 3910 } 3911 3912 3913 3914 /** 3915 3916 * Parse and round value to next grid defined by this.valueInterval, 3917 3918 * and check lower/upper bounds. 3919 3920 * @access private 3921 3922 * @param string val 3923 3924 * @return float 3925 3926 */ 3927 3928 this._roundToGrid = function(val) { 3929 3930 val = parseFloat(val); 3931 3932 if (isNaN(val)) return this.minVal; 3933 3934 3935 3936 val = Math.round(val / this.valueInterval) * this.valueInterval; 3937 3938 // Js has some odd rounding problems somewhere at 10^-8. To get rid of it we do: 3939 3940 val = Math.round(val*10000)/10000; 3941 3942 3943 3944 //check upper/lower bounds 3945 3946 if (val < this.minVal) val = this.minVal; 3947 3948 if (val > this.maxVal) val = this.maxVal; 3949 3950 3951 3952 return val; 3953 3954 } 3955 3956 3957 3958 /** 3959 3960 * Returns the new handle pos. 3961 3962 * @access private 3963 3964 * @return int 3965 3966 */ 3967 3968 this._getNewLocationFromCursor = function() { 3969 3970 var ox = this._posEventSlideStartX; 3971 3972 var oy = this._posEventSlideStartY; 3973 3974 switch (this.direction) { 3975 3976 case 0: // horizontal 3977 3978 var t = this.ctrl.pageX - ox; 3979 3980 var x = parseInt(this._posObjSlideStartX) + t; 3981 3982 if (x > this.ctrl.maxX) x = this.ctrl.maxX; 3983 3984 if (x < this.ctrl.minX) x = this.ctrl.minX; 3985 3986 return x; 3987 3988 /* 3989 3990 if (this.ctrl.pageX > this.ctrl.maxX) { 3991 3992 x=this.ctrl.maxX; 3993 3994 } else if (this.ctrl.pageX < this.ctrl.minX) { 3995 3996 x=this.ctrl.minX; 3997 3998 } else { 3999 4000 x = this.ctrl.pageX; 4001 4002 if (x < this.ctrl.minX) x = this.ctrl.minX; 4003 4004 if (x > this.ctrl.maxX) x = this.ctrl.maxX; 4005 4006 } 4007 4008 return x; 4009 4010 break; 4011 4012 */ 4013 4014 case 1: // vertical 4015 4016 var t = this.ctrl.pageY - oy; 4017 4018 var y = parseInt(this._posObjSlideStartY) + t; 4019 4020 if (y > this.ctrl.maxY) y = this.ctrl.maxY; 4021 4022 if (y < this.ctrl.minY) y = this.ctrl.minY; 4023 4024 return y; 4025 4026 } 4027 4028 } 4029 4030 4031 4032 /** 4033 4034 * Slides, in other words "updates the handle/knob". 4035 4036 * @access private 4037 4038 * @deprecated use updateHandle() 4039 4040 * @param int newPos 4041 4042 * @return void 4043 4044 */ 4045 4046 this.updatePointer = function(newPos) { 4047 4048 this.updateHandle(newPos); 4049 4050 } 4051 4052 4053 4054 /** 4055 4056 * Slides to new relative position, in other words "moves the handle/knob". 4057 4058 * @access public 4059 4060 * @param int newPos in pixel 4061 4062 * @return void 4063 4064 */ 4065 4066 this.updateHandle = function(newPos) { 4067 4068 if (this.direction == 0) { 4069 4070 this._currentRelSliderPosX = newPos; 4071 4072 this.ctrl.div.style.left = newPos; 4073 4074 } else { 4075 4076 this._currentRelSliderPosX = newPos; 4077 4078 this.ctrl.div.style.top = newPos; 4079 4080 } 4081 4082 return; 4083 4084 /* 4085 4086 switch (this.direction) { 4087 4088 case 0: // horizontal 4089 4090 moveDivTo(this.ctrl.div, newPos, getDivTop(this.ctrl.div)); 4091 4092 break; 4093 4094 case 1: // vertical 4095 4096 moveDivTo(this.ctrl.div, getDivTop(this.ctrl.div), newPos); 4097 4098 break; 4099 4100 } 4101 4102 */ 4103 4104 } 4105 4106 4107 4108 /** 4109 4110 * Updates the value of the input field. 4111 4112 * @access public 4113 4114 * @param mixed val (string or number) 4115 4116 * @return void 4117 4118 * @see updateValueText() 4119 4120 */ 4121 4122 this.updateValueField = function(val) { 4123 4124 if (this._valueFieldObj) { 4125 4126 this._valueFieldObj.value = val; 4127 4128 } 4129 4130 } 4131 4132 4133 4134 /** 4135 4136 * Updates the value of the text box. 4137 4138 * @access public 4139 4140 * @param mixed val (string or number) 4141 4142 * @return void 4143 4144 * @see updateValueField() 4145 4146 */ 4147 4148 this.updateValueText = function(val) { 4149 4150 if (this._valueTextObj) { 4151 4152 //alert(this._valueTextObj.innerText); 4153 4154 //alert(this._valueTextObj.innerHTML); 4155 4156 //alert(val); 4157 4158 this._valueTextObj.innerHTML = val; 4159 4160 //alert(this._valueTextObj.innerText); 4161 4162 } 4163 4164 } 4165 4166 4167 4168 /** 4169 4170 * @access private 4171 4172 */ 4173 4174 this.arrowOnClick = function() { 4175 4176 } 4177 4178 4179 4180 /** 4181 4182 * fires after the value has changed. fires a lot when sliding, also 4183 4184 * fires after an arrow click or input change. 4185 4186 * @access private 4187 4188 * @param int val (new value) 4189 4190 */ 4191 4192 this.onChange = function(val) { 4193 4194 this.setValue(val); 4195 4196 /** OBSOLET ** 4197 4198 val = this._roundToGrid(val); 4199 4200 this.updateInputBox(val); 4201 4202 if ('undefined' != typeof(this.eventOnChange)) this.eventOnChange(this, val); 4203 4204 this.fireEvent('onChange'); 4205 4206 */ 4207 4208 } 4209 4210 4211 4212 4213 4214 /** 4215 4216 * DEPRECATED 4217 4218 * updates the input field box and/or the text with the value. 4219 4220 * @param string val (number) 4221 4222 * @access private 4223 4224 * @return void 4225 4226 * @deprecated 4227 4228 */ 4229 4230 this.updateInputBox = function(val) { 4231 4232 this.setValue(val); 4233 4234 /** OBSOLET ** 4235 4236 val = this._roundToGrid(val); 4237 4238 if ('undefined' != typeof(this.localInput)) { 4239 4240 this.localInput.value = val; 4241 4242 } 4243 4244 if ('undefined' != typeof(this.localText)) { 4245 4246 this.localText.innerHTML = val; //innerText 4247 4248 } 4249 4250 */ 4251 4252 } 4253 4254 4255 4256 4257 4258 /** 4259 4260 * @access private 4261 4262 * @param bool editMode 4263 4264 */ 4265 4266 this.textboxEdit = function(editMode) { 4267 4268 if (this._disabled) return; 4269 4270 if (editMode) { 4271 4272 if ('undefined' != typeof(this._valueFieldObj)) { 4273 4274 this._valueTextObj.style.display = 'none'; 4275 4276 this._valueFieldObj.style.display = 'block'; 4277 4278 bsFormFieldSetFocusAndSelect(this._valueFieldObj, false); 4279 4280 } 4281 4282 } else { 4283 4284 if ('undefined' != typeof(this._valueTextObj)) { 4285 4286 this._valueFieldObj.style.display = 'none'; 4287 4288 this._valueTextObj.style.display = 'block'; 4289 4290 } 4291 4292 } 4293 4294 } 4295 4296 4297 4298 /** 4299 4300 * Fires during the mause move off the slider-handle (as long as the mouse button is hold) 4301 4302 * @access private 4303 4304 * @param object ctrl The slider handle object 4305 4306 * @param object client 4307 4308 */ 4309 4310 this.slideMove = function(ctrl, client) { 4311 4312 ctrl.sliderObj.onChangeBySlide(ctrl); 4313 4314 } 4315 4316 4317 4318 4319 4320 /** 4321 4322 * Fires on first click off the slider-handle 4323 4324 * @access private 4325 4326 * @param object ctrl The slider handle object 4327 4328 * @param ? client 4329 4330 */ 4331 4332 this.slideStart = function(ctrl,client) { 4333 4334 if (ctrl.sliderObj._disabled) return; 4335 4336 ctrl.sliderObj._posEventSlideStartX = ctrl.startX; 4337 4338 ctrl.sliderObj._posEventSlideStartY = ctrl.startY; 4339 4340 ctrl.sliderObj._posObjSlideStartX = ctrl.sliderObj._handleObj.style.left; 4341 4342 ctrl.sliderObj._posObjSlideStartY = ctrl.sliderObj._handleObj.style.top; 4343 4344 4345 4346 var pos = ctrl.sliderObj.getSliderPos(); 4347 4348 ctrl.sliderObj.setValue(pos); 4349 4350 4351 4352 if ('undefined' != typeof(ctrl.sliderObj.slideStartCB)) { 4353 4354 ctrl.sliderObj.slideStartCB(ctrl.sliderObj, ctrl.sliderObj.getValue(), pos); 4355 4356 } 4357 4358 } 4359 4360 4361 4362 4363 4364 /** 4365 4366 * Fires on first unclick off the slider-handle 4367 4368 * @access private 4369 4370 * @param object ctrl The slider handle object 4371 4372 * @param ? client 4373 4374 */ 4375 4376 this.slideEnd = function(ctrl,client){ 4377 4378 var pos = ctrl.sliderObj.getSliderPos(); 4379 4380 if ('undefined' != typeof(ctrl.sliderObj.slideEndCB)) { 4381 4382 ctrl.sliderObj.slideEndCB(ctrl.sliderObj, ctrl.sliderObj.getValue(), pos); 4383 4384 } 4385 4386 4387 4388 return; 4389 4390 } 4391 4392 4393 4394 /////////////////////////////////////////// 4395 4396 // constructor code 4397 4398 /////////////////////////////////////////// 4399 4400 this._constructor(theFieldnamePrefix); //call the constructor. needs to be at the end. 4401 4402 4403 4404} 4405 4406 4407 4408
