source: trunk/plugins/Forms/popups/select.html @ 987

Last change on this file since 987 was 987, checked in by ray, 12 years ago

#1179 minor html syntax changes

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 7.7 KB
RevLine 
[191]1<html>
2
3<head>
4  <title>Insert/Edit Form Element SELECT</title>
5  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" />
6  <script type="text/javascript" src="../../../popups/popup.js"></script>
7
8<script type="text/javascript">
[236]9var fields = ["f_name", "f_size", "f_tabindex", "f_multiple", "f_disabled"];
10
[191]11function Init() {
12  __dlg_translate("Forms");
[854]13  __dlg_init(null,{width:360, height:400});
14  var param = window.dialogArguments;
[236]15  for (var i in fields) {
16    switch (fields[i]) {
17    case "f_multiple":
18    case "f_disabled":
[254]19      document.getElementById(fields[i]).checked = (param[fields[i]]==fields[i].substring(2,20)) || (param[fields[i]] == true); break;
[236]20    case "f_size":
21      document.getElementById(fields[i]).value = (param[fields[i]]<=0)?"":param[fields[i]]; break;
22    default:
23      document.getElementById(fields[i]).value = param[fields[i]]; break;
24    }
25  }
26  for (var i=0; i<=param.f_options.length-1; i++) {
[854]27    document.getElementById("f_select").options[i] = new Option(param.f_options[i].text, param.f_options[i].value);
28  }
[236]29  document.getElementById("f_name").focus();
[419]30}
[191]31
32function onOK() {
[854]33  var el = document.getElementById("f_name");
34  if (!el.value) {
35    alert(Xinha._lc("You must enter a Name","Forms"));
36    el.focus();
37    return false;
38  }
[236]39  // pass data back to the calling window
[191]40  var param = new Object();
[236]41  for (var i in fields) {
[854]42    switch (fields[i]) {
[236]43    case "f_multiple":
[854]44      if (document.getElementById("f_size").value=="1")
[236]45        param["f_multiple"] = "";
46      else
[854]47        param["f_multiple"] = (document.getElementById(fields[i]).checked)?"multiple":"";
48      break;
[236]49    case "f_disabled":
[254]50      param[fields[i]] = (document.getElementById(fields[i]).checked)?"disabled":""; break;
[236]51    default:
52      param[fields[i]] = document.getElementById(fields[i]).value; break;
53    }
54  }
55  function optionValues(text,value) {
[854]56    this.text = text;
57    this.value = value;
58  }
59  optionNodes = new Array(); // for option text/value pairs
60  for (var i=0; i<= document.getElementById("f_select").options.length-1; i++) {
61    optionNodes[i] = new optionValues(document.getElementById("f_select").options[i].text, document.getElementById("f_select").options[i].value);
62  }
63  param["f_options"] = optionNodes;
64  __dlg_close(param);
[191]65  return false;
[419]66}
[191]67
68function onCancel() {
[854]69  __dlg_close(null);
70  return false;
[419]71}
[191]72
73
74//functions to build select options list
75//Populates Label and Value fields with selected option values
76function getValues(){
[854]77  var d = document;
78  d.getElementById("f_optionvalue").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].value;
79  d.getElementById("f_optiontext").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].text;
80  d.getElementById("f_update").value ="Update Option";
[191]81}
82
83//Add or update options to the select box
84function addItem(item) {
[854]85  var d = document;
86  if (item.f_optiontext.value =="") {alert(Xinha._lc("Please enter a Label","Forms"));}
87  else {
88    if (d.getElementById("f_select").options.selectedIndex != -1) { //update item
89      var indx = d.getElementById("f_select").options.selectedIndex;
90      d.getElementById("f_select").options[indx].text=d.getElementById("f_optiontext").value;
91      d.getElementById("f_select").options[indx].value=d.getElementById("f_optionvalue").value;
92    } else { //add new item
93      var newItem = d.getElementById("f_select").options.length++;
94      d.getElementById("f_select").options[newItem].text=d.getElementById("f_optiontext").value;
95      d.getElementById("f_select").options[newItem].value=d.getElementById("f_optionvalue").value;
96    }
97    d.getElementById("f_select").selectedIndex = -1; //deselect
98    d.getElementById("f_optiontext").value="";//clean up
99    d.getElementById("f_optionvalue").value="";
100    d.getElementById("f_update").value ="Add Option";
101    d.getElementById("f_optiontext").focus();
102  }
[191]103}
104//Clears selected option
105function deleteItem() {
[854]106  var d = document;
107  for (var i = d.getElementById("f_select").options.length - 1; i>=0; i--) {
108    var opt = d.getElementById("f_select").options[i];
109    if (opt.selected) {
110      d.getElementById("f_select").options[i] = null;
111    }
112  }
113  d.getElementById("f_select").selectedIndex = -1;
114  d.getElementById("f_optiontext").value="";
115  d.getElementById("f_optionvalue").value="";
116  d.getElementById("f_optiontext").focus();
117}
[191]118//Moves selected option up
119function moveOptionUp() {
[854]120  var d = document;
121  for (i=0; i<d.getElementById("f_select").options.length; i++) {
122    if (d.getElementById("f_select").options[i].selected) {
123      if (i != 0 && !d.getElementById("f_select").options[i-1].selected) {
124        swapOptions(d.getElementById("f_select"),i,i-1);
125        d.getElementById("f_select").options[i-1].selected = true;
126      }
127    }
128  }
[191]129}
130//Moves selected option down
131function moveOptionDown() {
[854]132  var d = document;
133  for (i=d.getElementById("f_select").options.length-1; i>=0; i--) {
134    if (d.getElementById("f_select").options[i].selected) {
135      if (i != (d.getElementById("f_select").options.length-1) && ! d.getElementById("f_select").options[i+1].selected) {
136        swapOptions(d.getElementById("f_select"),i,i+1);
137        d.getElementById("f_select").options[i+1].selected = true;
138      }
139    }
140  }
[191]141}
[854]142
[191]143function swapOptions(obj,i,j) {
[854]144  var o = obj.options;
145  var i_selected = o[i].selected;
146  var j_selected = o[j].selected;
147  var temp = new Option(o[i].text, o[i].value);
148  var temp2= new Option(o[j].text, o[j].value);
149  o[i] = temp2;
150  o[j] = temp;
151  o[i].selected = j_selected;
152  o[j].selected = i_selected;
[191]153}
154</script>
155</head>
156
[239]157<body class="dialog" onload="Init()">
[191]158  <div id="f_type" class="title">Form Element: SELECT</div>
159  <form action="" method="get">
[236]160    <div class="fr">Name/ID:</div>
161    <input type="text" name="name" id="f_name" title="Name of the form select" />
162    <p />
163    <div class="fr">Size:</div>
[254]164    <input name="size" id="f_size" type="text" value="" size="15" />
[236]165    <p />
[854]166    <div class="fr"><nobr>Multiple Select</nobr></div>
[254]167    <input name="multiple" id="f_multiple" type="checkbox" value="multiple" />
[236]168    <p />
169    <div class="fr">Disabled</div>
170    <input type="checkbox" name="disabled" id="f_disabled" value="disabled" />
171    <p />
172    <div class="fr">Tab Index:</div>
173    <input type="text" name="tabindex" id="f_tabindex" />
174    <p />
[191]175    <div class="space"></div>
176    <fieldset id="fldLayout">
[854]177    <legend>Options</legend>
178      <table border="0" cellspacing="0">
179      <tr>
[987]180      <td style="text-align: right;">
[191]181        <select name="select" id="f_select" Size="6" onchange="getValues();"  style="width:16em">
[854]182        </select>
[191]183      </td>
[987]184      <td style="text-align: center;">
[191]185        <input type="button" name="up" value="Move Up" style="width:6em" onClick="moveOptionUp()"><br />
[854]186        <input type="button" name="down" value="Move Down" style="width:6em" onClick="moveOptionDown()"><br />
[191]187        <input type="button" name="delete" value="Delete" style="width:6em" onClick="deleteItem();">
188      </td>
189      </tr>
190      </table>
191      <div class="space"></div>
[854]192      <table border="0" cellspacing="0">
193      <tr>
[987]194        <td style="text-align: right;">Label:</td>
[854]195        <td><input type="text" id="f_optiontext" name="optionText" value="" size="15"></td>
[987]196        <td style="text-align: right;">Value:</td>
[854]197        <td><input name="optionValue" id="f_optionvalue" type="text" value="" size="15"></td>
[191]198        <td><input type="button" name="update" id="f_update" value="Add" onclick="addItem(document.forms[0])"></td>
[854]199      </tr>
200      </table>
201    </fieldset>
202    <div id="buttons">
[191]203      <button type="button" name="ok" onclick="return onOK();">OK</button>
204      <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
[854]205    </div>
[191]206  </form>
207</body>
[854]208</html>
Note: See TracBrowser for help on using the repository browser.