JAVASCRIPT   46

dynDropDown js

Guest on 6th August 2022 01:21:33 AM

  1. //    Licensed Materials - Property of IBM
  2. //
  3. //    IBM Cognos Products: ps
  4. //
  5. //    (C) Copyright IBM Corp. 2005, 2011
  6. //
  7. //    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  8. // Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
  9. // Cognos and the Cognos logo are trademarks of Cognos ULC, (formerly Cognos Incorporated).
  10.  
  11. //      a set of global javascript variables that get sets when the edit field takes focus or the user click on
  12. //      the arrow to open the dropdown
  13. var g_dynamicDD_controlName = null;
  14. var g_dynamicDD_array = null;
  15. var g_dynamicDD_dropdownDiv = null;
  16. var g_dynamicDD_editField = null;
  17. var g_dynamicDD_callbackFunc = null;
  18. var g_dynamicDD_openedBy = null;
  19. var g_dynamicDD_filterList = null;
  20. var g_dynamicDD_currentValue = null;
  21.  
  22. var regEx = new RegExp(String.fromCharCode(160),"g");
  23.  
  24. var IDX_LABEL = 0;
  25. var IDX_VALUE = 1;
  26.  
  27. // handle all keyboard events for the drop down list
  28. function handleSelectKey(evt) {
  29.         var keyCode = evt ? evt.keyCode : window.event.keyCode;
  30.         // Enter and Esc
  31.         if ((keyCode == 27) || (keyCode == 13)) {
  32.                 closeDropDown();
  33.                 g_dynamicDD_editField.focus();
  34.         }
  35. }
  36.  
  37. // handle all keyboard events for the edit field list
  38. function handleEditFieldKey(evt) {
  39.  
  40. }
  41.  
  42. // handle all keyboard events for the edit field list
  43. function handleEditFieldKey(evt) {
  44.         var keyCode = evt ? evt.keyCode : window.event.keyCode;
  45.  
  46.         if (keyCode == 40) {
  47.                 // if the dropdown is closed, then simply change the current value to the next in the list
  48.                 if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none') {
  49.                         moveThroughArray(1);
  50.                 } else {
  51.                         moveThroughDropDown(1);
  52.                 }
  53.         } else if (keyCode == 38) { // up arrow
  54.                 // if the dropdown is closed, then simply change the current value to the next in the list
  55.                 if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none') {
  56.                         moveThroughArray(-1);
  57.                 } else {
  58.                         moveThroughDropDown(-1);
  59.                 }                                                              
  60.         } else if ((keyCode == 27) || (keyCode == 13)) {        // Enter and Esc
  61.                 closeDropDown();
  62.         } else if ((keyCode == 8) || (keyCode >= 32)) {         // all other keys
  63.                 if (g_dynamicDD_editField.value != '') {
  64.                         // only do something if the value of the edit field has changed
  65.                         if (g_dynamicDD_currentValue != g_dynamicDD_editField.value) {
  66.                                 g_dynamicDD_currentValue = g_dynamicDD_editField.value;
  67.                                 if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none' && g_dynamicDD_filterList == 'true') {
  68.                                         doDropDown('typing');
  69.                                 } else if (g_dynamicDD_filterList == 'true' && g_dynamicDD_openedBy == 'typing') {
  70.                                         populateDropDown();
  71.                                 }
  72.                         }
  73.                         if (document.getElementById('select_' + g_dynamicDD_controlName) && document.getElementById('select_' + g_dynamicDD_controlName).options.length == 0) {
  74.                                 closeDropDown();
  75.                         }
  76.  
  77.                         document.getElementById(g_dynamicDD_controlName).value = g_dynamicDD_editField.value;
  78.                         g_dynamicDD_currentValue = g_dynamicDD_editField.value;
  79.                 }
  80.                 else {
  81.                         closeDropDown();
  82.                 }
  83.                
  84.                 handleEditFieldChange();
  85.         }
  86. }
  87.  
  88. // Change the edit and hidden field to a value in the array using a delta from the current selection
  89. function moveThroughArray(delta) {
  90.         var found = false;
  91.         for (var i = 0; i < g_dynamicDD_array.length; i++) {
  92.                 if (g_dynamicDD_editField.value == g_dynamicDD_array[i][IDX_LABEL])     {
  93.                
  94.                         found = true;
  95.                         setEditAndHiddenFromArray(i+delta);
  96.                         break;
  97.                 }
  98.         }
  99.        
  100.         if (!found)     {
  101.                 setEditAndHiddenFromArray(0);
  102.         }
  103.        
  104.         handleEditFieldChange();                                               
  105. }
  106.  
  107. function moveThroughDropDown(delta) {
  108.  
  109.         var selectControl = document.getElementById('select_' + g_dynamicDD_controlName);
  110.         if (!selectControl) {
  111.                 return;
  112.         }
  113.  
  114.         var found = false;
  115.         for (var i = 0; i < selectControl.options.length; i++)  {
  116.                 if (selectControl[i].selected) {       
  117.                         changeDropDownSelection(i, i+delta);
  118.                         found = true;
  119.                         break;
  120.                 }
  121.         }                                      
  122.         if (!found && selectControl.options.length > 0) {
  123.                 selectControl.selectedIndex = 0;
  124.                 setEditAndHiddenFromDropDown(0);
  125.         }
  126.  
  127.         selectControl.focus();                                         
  128. }
  129.  
  130. function changeDropDownSelection(fromIndex, toIndex) {
  131.         var selectControl = document.getElementById('select_' + g_dynamicDD_controlName);
  132.        
  133.         if (selectControl.options.length > toIndex && toIndex >= 0)     {
  134.                 selectControl.selectedIndex = toIndex;
  135.                 setEditAndHiddenFromDropDown(toIndex);
  136.         }
  137. }
  138.  
  139. //      Sets a bunch of global vars. Should be called everytime one of the controls gets focus or
  140. //      when the user hits the open dropdown button                                                    
  141. function setGlobals(name, array, validateCallback, filterList) {
  142.         if (g_dynamicDD_controlName != name) {
  143.                 if (g_dynamicDD_controlName != null) {
  144.                         closeDropDown();
  145.                 }
  146.                 g_dynamicDD_controlName = name;
  147.                 g_currentSelectedIndex = null;
  148.                 g_dynamicDD_array = array;
  149.  
  150.                 g_dynamicDD_dropdownDiv = document.getElementById('div_'+name);
  151.                 g_dynamicDD_editField = document.getElementById('editField_'+name);
  152.                 g_dynamicDD_callbackFunc = validateCallback;
  153.                 g_dynamicDD_filterList = filterList;
  154.                 g_dynamicDD_editField.onkeyup = handleEditFieldKey;
  155.                 g_dynamicDD_openedBy = null;
  156.                 g_dynamicDD_currentValue = g_dynamicDD_editField.value;
  157.         }
  158. }
  159.  
  160.  
  161. //      handles the logic for opening the drop down                                    
  162. function doDropDown(calledBy) {
  163.         if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none') {
  164.                 g_dynamicDD_openedBy = calledBy;
  165.  
  166.                 populateDropDown();
  167.                
  168.                 //      if this was called by typing in the edit field,
  169.                 //      then only open the drop down if it's not empty
  170.                 if (calledBy != 'typing' || document.getElementById('select_' + g_dynamicDD_controlName).options.length > 0) {
  171.                         openDropDown(calledBy=='downArrow');
  172.                 }
  173.         }
  174.         else {
  175.                 closeDropDown();
  176.                 g_dynamicDD_openedBy = null;
  177.         }
  178. }
  179.  
  180. // close the drop down
  181. function closeDropDown() {
  182.         if (g_dynamicDD_dropdownDiv)
  183.         {
  184.                 g_dynamicDD_dropdownDiv.style.display='none';
  185.         }
  186. }
  187.  
  188. // open the drop down          
  189. function openDropDown(setFocus) {
  190.         if (g_dynamicDD_dropdownDiv)
  191.         {
  192.                 g_dynamicDD_dropdownDiv.style.display='';
  193.                 if (setFocus) {
  194.                         document.getElementById('select_'+g_dynamicDD_controlName).focus();
  195.                 }
  196.         }
  197. }
  198.  
  199. // Build up the select control
  200. function populateDropDown() {
  201.         var currentSelectedValue = document.getElementById(g_dynamicDD_controlName).value;
  202.         var filterList = false;
  203.         var container = document.getElementById('div_'+g_dynamicDD_controlName);
  204.         var eleSelect = document.getElementById("select_"+g_dynamicDD_controlName);
  205.        
  206.         if (eleSelect) {
  207.                 eleSelect.parentNode.removeChild(eleSelect);
  208.         }
  209.  
  210.         //build select control (dropDown)
  211.         eleSelect = document.createElement('select');
  212.         container.appendChild(eleSelect);
  213.         eleSelect.name="select_"+g_dynamicDD_controlName;
  214.         eleSelect.id="select_"+g_dynamicDD_controlName;
  215.         eleSelect.size = 10;
  216.         eleSelect.multiple = false;
  217.         eleSelect.style.width="215";
  218.         eleSelect.onclick=function(){onClickSelectControl(this)};
  219.         eleSelect.onchange=function(){onChangeSelectControl(this)};
  220.  
  221.         eleSelect.onkeyup = handleSelectKey;
  222.  
  223.         var selectedIdx = -1;
  224.         // build the options
  225.         for (var i = 0; i < g_dynamicDD_array.length; i++) {
  226.                 DD_label = g_dynamicDD_array[i][IDX_LABEL];
  227.                 DD_value = g_dynamicDD_array[i][IDX_VALUE];    
  228.                 if (g_dynamicDD_openedBy == 'downArrow' || g_dynamicDD_filterList != 'true' || DD_label.indexOf(g_dynamicDD_editField.value) == 0) {
  229.                         var eleOpt = document.createElement('option');
  230.                         eleSelect.appendChild(eleOpt);
  231.        
  232.                         eleOpt.value = DD_value;
  233.                         eleOpt.innerHTML = htmlEncode(DD_label,true);
  234.                         // select the default
  235.                         if (DD_value == currentSelectedValue && g_dynamicDD_openedBy == 'downArrow') {
  236.                                 selectedIdx=eleSelect.childNodes.length-1;
  237.                                 g_dynamicDD_currentValue = DD_value;
  238.                         }
  239.                 }
  240.         }
  241.         eleSelect.selectedIndex=selectedIdx;
  242. }
  243.  
  244. // Handle the onclick event of the select control
  245. function onClickSelectControl(obj) {
  246.         g_dynamicDD_editField.focus();
  247.         closeDropDown();
  248. }
  249.  
  250. // Handle the onchange event of the select control
  251. function onChangeSelectControl(obj) {
  252.         for (var i = 0; i < obj.options.length; i++) {
  253.                 if (obj[i].selected) { 
  254.                         setEditAndHiddenFromDropDown(i);
  255.                         g_dynamicDD_currentValue = g_dynamicDD_array[i][IDX_VALUE];
  256.                         break;
  257.                 }
  258.         }              
  259. }
  260.  
  261. // Updated the edit and hidden field using the selected item in the drop down
  262. function setEditAndHiddenFromDropDown(index) {
  263.         var selectControl = document.getElementById("select_" + g_dynamicDD_controlName);
  264.         document.getElementById(g_dynamicDD_controlName).value = selectControl[index].value; //hidden field
  265.         g_dynamicDD_editField.value = selectControl[index].text;
  266.        
  267.         handleEditFieldChange();
  268. }
  269.  
  270. // Set the hidden and edit field using the array               
  271. function setEditAndHiddenFromArray(index) {
  272.         if (index < g_dynamicDD_array.length && index >=0) {
  273.                 document.getElementById(g_dynamicDD_controlName).value = g_dynamicDD_array[index][IDX_VALUE];
  274.                 g_dynamicDD_editField.value = g_dynamicDD_array[index][IDX_LABEL];
  275.         }                                              
  276. }
  277.                                                
  278. // Checks to see if the current value is in the array and returns true or false
  279. function isValidValue() {
  280.         for (var i = 0; i < g_dynamicDD_array.length; i++) {
  281.                 if (isEditorEqualToListElement(i)) {
  282.                         return true;
  283.                 }
  284.         }
  285.         return false;
  286. }
  287.  
  288. function isEditorEqualToListElement(idx) {
  289.         return g_dynamicDD_editField.value.replace(regEx," ") == g_dynamicDD_array[idx][IDX_LABEL];
  290. }
  291.  
  292. function htmlEncode(string, encodeSpaces) {
  293.         tempString = string.replace(/&/g,"&amp;");
  294.         tempString = tempString.replace(/"/g,"&quot;");
  295.         tempString = tempString.replace(/</g,"&lt;");
  296.         tempString = tempString.replace(/>/g,"&gt;");
  297.         if (encodeSpaces) {
  298.                 tempString = tempString.replace(/\&nbsp;/g,"&amp;nbsp;").replace(/\s/g,"&nbsp;");
  299.         }
  300.         return tempString;
  301. }
  302.  
  303. // Whenever the value changes, call the necessary javascript function if one was provided                                              
  304. function handleEditFieldChange() {
  305.         var callBackFunc = window[g_dynamicDD_callbackFunc];
  306.         if (callBackFunc)       {
  307.                 callBackFunc(g_dynamicDD_editField, isValidValue());
  308.         }                                              
  309. }
  310.  
  311. // When the edit field takes focus                                     
  312. function handleEditFieldFocus() {
  313.         if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display != 'none' && g_dynamicDD_openedBy != 'typing')     {
  314.                 closeDropDown();
  315.         }
  316. }
  317.  
  318. //Returns the value in the hidden input.
  319. //The hidden input name is handled by g_dynamicDD_controlName
  320. function getHiddenValue () {
  321.         if (g_dynamicDD_controlName != null && document.getElementById(g_dynamicDD_controlName)) {
  322.                 return (document.getElementById(g_dynamicDD_controlName).value);
  323.         } else {
  324.                 return ;
  325.         }
  326.  
  327. }
  328. //Update the hidden update (created by utml) that the hidden input has changed.
  329. //The hidden changed input is handled by 'changed_' + g_dynamicDD_controlName.
  330. function updateChanged () {
  331.         if (g_dynamicDD_controlName != null && document.getElementById(g_dynamicDD_controlName)) {
  332.                 var changed = document.pform.elements['changed_' + g_dynamicDD_controlName];
  333.                 if (changed) {
  334.                         changed.value = 1;
  335.                 }
  336.         }
  337. }
  338.  
  339. //Set a value to the hidden field g_dynamicDD_controlName.
  340. //This is usually used for empty value.
  341. function setHiddenValue (val) {
  342.         var valueField = null;
  343.        
  344.         if (g_dynamicDD_controlName != null) {
  345.                 valueField = document.getElementById(g_dynamicDD_controlName);
  346.         }
  347.         if (valueField) {
  348.                 valueField.value = val;
  349.                 updateChanged();
  350.         }
  351. }
  352. //This function allows to update the value within the array corresponding to "Number"
  353. //This allows to know which entry has been selected "Unlimited" or "Number".
  354. function updateTheArray(index, value) {
  355.         g_dynamicDD_array[index][IDX_VALUE] = value;
  356. }

Raw Paste


Login or Register to edit or fork this paste. It's free.