ecomp-sdk-app/src/main/webapp/static/fusion/raptor/js/editabledropdown.js

   1 //Common functions for all dropdowns
   2   /*----------------------------------------------
   3   The Common function used for all dropdowns are:
   4   -----------------------------------------------
   5   -- function fnKeyDownHandler(getdropdown, e)
   6   -- function fnLeftToRight(getdropdown)
   7   -- function fnRightToLeft(getdropdown)
   8   -- function fnDelete(getdropdown)
   9   -- function FindKeyCode(e)
  10   -- function FindKeyChar(e)
  11   -- function fnSanityCheck(getdropdown)
  12
  13   --------------------------- */
  14
  15   function fnKeyDownHandler(getdropdown, e) {
  16
  17     fnSanityCheck(getdropdown);
  18
  19     // Press [ <- ] and [ -> ] arrow keys on the keyboard to change alignment/flow.
  20     // ...go to Start : Press  [ <- ] Arrow Key
  21     // ...go to End : Press [ -> ] Arrow Key
  22     // (this is useful when the edited-text content exceeds the ListBox-fixed-width)
  23     // This works best on Internet Explorer, and not on Netscape
  24
  25     var vEventKeyCode = FindKeyCode(e);
  26     // Press left/right arrow keys
  27     if(vEventKeyCode == 37) {
  28                 fnLeftToRight(getdropdown);
  29     }
  30     if(vEventKeyCode == 39) {
  31                 fnRightToLeft(getdropdown);
  32     }
  33
  34     // Delete key pressed
  35     if(vEventKeyCode == 46) {
  36                 fnDelete(getdropdown);
  37     }
  38
  39     // backspace key pressed
  40     if(vEventKeyCode == 8 || vEventKeyCode==127) {
  41                 if(e.which) { //Netscape
  42                         //e.which = ''; //this property has only a getter.
  43                 } else { //Internet Explorer
  44                         //To prevent backspace from activating the -Back- button of the browser
  45                         e.keyCode = '';
  46                         if(window.event.keyCode) {
  47                                 window.event.keyCode = '';
  48                         }
  49                 }
  50                 return true;
  51     }
  52     // Tab key pressed, use code below to reorient to Left-To-Right flow, if needed
  53     //if(vEventKeyCode == 9)
  54     //{
  55     //  fnLeftToRight(getdropdown);
  56     //}
  57   } // function fnKeyDownHandler
  58
  59   function fnLeftToRight(getdropdown) {
  60     getdropdown.style.direction = "ltr";
  61   } //function fnLeftToRight
  62
  63   function fnRightToLeft(getdropdown) {
  64     getdropdown.style.direction = "rtl";
  65   } //function fnRightToLeft
  66
  67   function fnDelete(getdropdown) {
  68     if(getdropdown.options.length != 0) {  // if dropdown is not empty
  69                 if (getdropdown.options.selectedIndex == vEditableOptionIndex_A) {  // if option the Editable field
  70                         getdropdown.options[getdropdown.options.selectedIndex].text = '';
  71                         //getdropdown.options[getdropdown.options.selectedIndex].value = ''; //Use this line only if want to change the         internal value too; else this line is not required.
  72                 }
  73     }
  74   } // function fnDelete
  75
  76
  77   /*
  78   Since Internet Explorer and Netscape have different
  79   ways of returning the key code, displaying keys
  80   browser-independently is a bit harder.
  81   However, you can create a script that displays keys
  82   for either browser.
  83   The following function will display each key
  84   in the status line:
  85
  86   The "FindKey.." function receives the "event" object
  87   from the event handler and stores it in the variable "e".
  88   It checks whether the "e.which" property exists (for Netscape),
  89   and stores it in the "keycode" variable if present.
  90   Otherwise, it assumes the browser is Internet Explorer
  91   and assigns to keycode the "e.keyCode" property.
  92   */
  93
  94   function FindKeyCode(e) {
  95     if(e.which) {
  96                 keycode=e.which;  //Netscape
  97     } else {
  98                 keycode=e.keyCode; //Internet Explorer
  99     }
 100     //alert("FindKeyCode"+ keycode);
 101     return keycode;
 102   } // function FindKeyCode
 103
 104   function FindKeyChar(e) {
 105     keycode = FindKeyCode(e);
 106     if((keycode==8)||(keycode==127)) {
 107                 character="backspace"
 108     }
 109     else if((keycode==46)) {
 110                 character="delete"
 111     }
 112     else {
 113                 character=String.fromCharCode(keycode);
 114     }
 115     //alert("FindKey"+ character);
 116     return character;
 117   } // function FindKeyChar
 118
 119   function fnSanityCheck(getdropdown) {
 120     if(vEditableOptionIndex_A>(getdropdown.options.length-1)) {
 121                 alert("PROGRAMMING ERROR: The value of variable vEditableOptionIndex_... cannot be greater than (length of dropdown - 1)");
 122                 return false;
 123     }
 124   }
 125
 126   //Dropdown specific functions, which manipulate dropdown specific global variables
 127
 128   /*----------------------------------------------
 129   Dropdown specific global variables are:
 130   -----------------------------------------------
 131   1) vEditableOptionIndex_A   --> this needs to be set by Programmer!! See explanation.
 132   2) vEditableOptionText_A    --> this needs to be set by Programmer!! See explanation.
 133   3) vPreviousSelectIndex_A
 134   4) vSelectIndex_A
 135   5) vSelectChange_A
 136
 137   ---------------------------  */
 138
 139   /*----------------------------------------------
 140   The dropdown specific functions
 141   (which manipulate dropdown specific global variables)
 142   used by all dropdowns are:
 143   -----------------------------------------------
 144   1) function fnChangeHandler_A(getdropdown)
 145   2) function fnKeyPressHandler_A(getdropdown, e)
 146   3) function fnKeyUpHandler_A(getdropdown, e)
 147
 148   ---------------------------  */
 149
 150   /*------------------------------------------------
 151   IMPORTANT: Global Variable required to be SET by programmer
 152   --------------------------   */
 153
 154   var vEditableOptionIndex_A = 0;
 155
 156   // Give Index of Editable option in the dropdown.
 157   // For eg.
 158   // if first option is editable then vEditableOptionIndex_A = 0;
 159   // if second option is editable then vEditableOptionIndex_A = 1;
 160   // if third option is editable then vEditableOptionIndex_A = 2;
 161   // if last option is editable then vEditableOptionIndex_A = (length of dropdown - 1).
 162   // Note: the value of vEditableOptionIndex_A cannot be greater than (length of dropdown - 1)
 163
 164   var vEditableOptionText_A = "Custom";
 165
 166   // Give the default text of the Editable option in the dropdown.
 167   // For eg.
 168   // if the editable option is <option ...>--?--</option>,
 169   // then set vEditableOptionText_A = "--?--";
 170
 171   /*------------------------------------------------
 172   Global Variables required for
 173   fnChangeHandler_A(), fnKeyPressHandler_A() and fnKeyUpHandler_A()
 174   for Editable Dropdowns
 175   --------------------------   */
 176
 177   var vPreviousSelectIndex_A = 0;
 178   // Contains the Previously Selected Index, set to 0 by default
 179
 180   var vSelectIndex_A = 0;
 181   // Contains the Currently Selected Index, set to 0 by default
 182
 183   var vSelectChange_A = 'MANUAL_CLICK';
 184   // Indicates whether Change in dropdown selected option
 185   // was due to a Manual Click
 186   // or due to System properties of dropdown.
 187
 188   // vSelectChange_A = 'MANUAL_CLICK' indicates that
 189   // the jump to a non-editable option in the dropdown was due
 190   // to a Manual click (i.e.,changed on purpose by user).
 191
 192   // vSelectChange_A = 'AUTO_SYSTEM' indicates that
 193   // the jump to a non-editable option was due to System properties of dropdown
 194   // (i.e.,user did not change the option in the dropdown;
 195   // instead an automatic jump happened due to inbuilt
 196   // dropdown properties of browser on typing of a character )
 197
 198   /*------------------------------------------------
 199   Functions required for  Editable Dropdowns
 200   --------------------------   */
 201
 202   function fnChangeHandler_A(getdropdown, e) {
 203     fnSanityCheck(getdropdown);
 204
 205     vPreviousSelectIndex_A = vSelectIndex_A;
 206     // Contains the Previously Selected Index
 207
 208     vSelectIndex_A = getdropdown.options.selectedIndex;
 209     // Contains the Currently Selected Index
 210
 211     if ((vPreviousSelectIndex_A == (vEditableOptionIndex_A)) && (vSelectIndex_A != (vEditableOptionIndex_A))&&(vSelectChange_A != 'MANUAL_CLICK')) { // To Set value of Index variables -
 212       getdropdown[(vEditableOptionIndex_A)].selected=true;
 213       vPreviousSelectIndex_A = vSelectIndex_A;
 214       vSelectIndex_A = getdropdown.options.selectedIndex;
 215       vSelectChange_A = 'MANUAL_CLICK';
 216       // Indicates that the Change in dropdown selected
 217       // option was due to a Manual Click
 218     }
 219   } // function fnChangeHandler_A
 220
 221   function fnKeyPressHandler_A(getdropdown, e) {
 222     fnSanityCheck(getdropdown);
 223
 224     keycode = FindKeyCode(e);
 225     keychar = FindKeyChar(e);
 226
 227     // Check for allowable Characters
 228     // The various characters allowable for entry into Editable option..
 229     // may be customized by minor modifications in the code (if condition below)
 230     // (you need to know the keycode/ASCII value of the  character to be allowed/disallowed.
 231     // -
 232
 233     if ((keycode>47 && keycode<59)||(keycode>62 && keycode<127) ||(keycode==32)) {
 234       var vAllowableCharacter = "yes";
 235     }
 236     else {
 237       var vAllowableCharacter = "no";
 238     }
 239
 240     //alert(window); alert(window.event);
 241
 242     if(getdropdown.options.length != 0) {
 243     // if dropdown is not empty
 244       if (getdropdown.options.selectedIndex == (vEditableOptionIndex_A)) {
 245       // if selected option the Editable option of the dropdown
 246
 247         var vEditString = getdropdown[vEditableOptionIndex_A].text;
 248
 249         // make Editable option Null if it is being edited for the first time
 250         if((vAllowableCharacter == "yes")||(keychar=="backspace")) {
 251           if (vEditString == vEditableOptionText_A)
 252             vEditString = "";
 253         }
 254         if (keychar=="backspace") {
 255         // To handle backspace -
 256           vEditString = vEditString.substring(0,vEditString.length-1);
 257           // Decrease length of string by one from right
 258
 259           vSelectChange_A = 'MANUAL_CLICK';
 260           // Indicates that the Change in dropdown selected
 261           // option was due to a Manual Click
 262
 263         }
 264         //alert("EditString2:"+vEditString);
 265
 266         if (vAllowableCharacter == "yes") {
 267         // To handle addition of a character -
 268           vEditString+=String.fromCharCode(keycode);
 269           // Concatenate Enter character to Editable string
 270
 271           // The following portion handles the "automatic Jump" bug
 272           // The "automatic Jump" bug (Description):
 273           //   If a alphabet is entered (while editing)
 274           //   ...which is contained as a first character in one of the read-only options
 275           //   ..the focus automatically "jumps" to the read-only option
 276           //   (-- this is a common property of normal dropdowns
 277           //    ..but..is undesirable while editing).
 278
 279           var i=0;
 280           var vEnteredChar = String.fromCharCode(keycode);
 281           var vUpperCaseEnteredChar = vEnteredChar;
 282           var vLowerCaseEnteredChar = vEnteredChar;
 283
 284
 285           if(((keycode)>=97)&&((keycode)<=122))
 286           // if vEnteredChar lowercase
 287             vUpperCaseEnteredChar = String.fromCharCode(keycode - 32);
 288             // This is UpperCase
 289
 290
 291           if(((keycode)>=65)&&((keycode)<=90))
 292           // if vEnteredChar is UpperCase
 293             vLowerCaseEnteredChar = String.fromCharCode(keycode + 32);
 294             // This is lowercase
 295
 296           if(e.which) { //For Netscape
 297             // Compare the typed character (into the editable option)
 298             // with the first character of all the other
 299             // options (non-editable).
 300
 301             // To note if the jump to the non-editable option was due
 302             // to a Manual click (i.e.,changed on purpose by user)
 303             // or due to System properties of dropdown
 304             // (i.e.,user did not change the option in the dropdown;
 305             // instead an automatic jump happened due to inbuilt
 306             // dropdown properties of browser on typing of a character )
 307
 308             for (i=0;i<=(getdropdown.options.length-1);i++)
 309             {
 310               if(i!=vEditableOptionIndex_A)
 311               {
 312                 var vReadOnlyString = getdropdown[i].text;
 313                 var vFirstChar = vReadOnlyString.substring(0,1);
 314                 if((vFirstChar == vUpperCaseEnteredChar)||(vFirstChar == vLowerCaseEnteredChar))
 315                 {
 316                   vSelectChange_A = 'AUTO_SYSTEM';
 317                   // Indicates that the Change in dropdown selected
 318                   // option was due to System properties of dropdown
 319                   break;
 320                 }
 321                 else
 322                 {
 323                   vSelectChange_A = 'MANUAL_CLICK';
 324                   // Indicates that the Change in dropdown selected
 325                   // option was due to a Manual Click
 326                 }
 327               }
 328             }
 329           }
 330         }
 331
 332         // Set the new edited string into the Editable option
 333         getdropdown.options[vEditableOptionIndex_A].text = vEditString;
 334         //getdropdown.options[vEditableOptionIndex_A].value = vEditString; //Use this line only if want to change the internal value too; else this line is not required.
 335
 336         return false;
 337       }
 338         }
 339     return true;
 340   }
 341
 342   function fnKeyUpHandler_A(getdropdown, e) {
 343     fnSanityCheck(getdropdown);
 344
 345     if(e.which) { // Netscape
 346       if(vSelectChange_A == 'AUTO_SYSTEM') {
 347         // if editable dropdown option jumped while editing
 348         // (due to typing of a character which is the first character of some other option)
 349         // then go back to the editable option.
 350         getdropdown[(vEditableOptionIndex_A)].selected=true;
 351       }
 352
 353       var vEventKeyCode = FindKeyCode(e);
 354       // if [ <- ] or [ -> ] arrow keys are pressed, select the editable option
 355       if((vEventKeyCode == 37)||(vEventKeyCode == 39)) {
 356         getdropdown[vEditableOptionIndex_A].selected=true;
 357       }
 358     }
 359   }
 360
 361 /*--------------------------------------------------------------------------------------------  */
 362
 363 <!--end of script for dropdown lstDropDown_A -->