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

Last change on this file since 967 was 854, checked in by gocher, 13 years ago

change htmlarea to Xinha in plugin Forms and some formating
  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 7.6 KB
Line 
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">
9var fields = ["f_name", "f_size", "f_tabindex", "f_multiple", "f_disabled"];
10
11function Init() {
12  __dlg_translate("Forms");
13  __dlg_init(null,{width:360, height:400});
14  var param = window.dialogArguments;
15  for (var i in fields) {
16    switch (fields[i]) {
17    case "f_multiple":
18    case "f_disabled":
19      document.getElementById(fields[i]).checked = (param[fields[i]]==fields[i].substring(2,20)) || (param[fields[i]] == true); break;
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++) {
27    document.getElementById("f_select").options[i] = new Option(param.f_options[i].text, param.f_options[i].value);
28  }
29  document.getElementById("f_name").focus();
30}
31
32function onOK() {
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  }
39  // pass data back to the calling window
40  var param = new Object();
41  for (var i in fields) {
42    switch (fields[i]) {
43    case "f_multiple":
44      if (document.getElementById("f_size").value=="1")
45        param["f_multiple"] = "";
46      else
47        param["f_multiple"] = (document.getElementById(fields[i]).checked)?"multiple":"";
48      break;
49    case "f_disabled":
50      param[fields[i]] = (document.getElementById(fields[i]).checked)?"disabled":""; break;
51    default:
52      param[fields[i]] = document.getElementById(fields[i]).value; break;
53    }
54  }
55  function optionValues(text,value) {
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);
65  return false;
66}
67
68function onCancel() {
69  __dlg_close(null);
70  return false;
71}
72
73
74//functions to build select options list
75//Populates Label and Value fields with selected option values
76function getValues(){
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";
81}
82
83//Add or update options to the select box
84function addItem(item) {
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  }
103}
104//Clears selected option
105function deleteItem() {
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}
118//Moves selected option up
119function moveOptionUp() {
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  }
129}
130//Moves selected option down
131function moveOptionDown() {
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  }
141}
142
143function swapOptions(obj,i,j) {
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;
153}
154</script>
155</head>
156
157<body class="dialog" onload="Init()">
158  <div id="f_type" class="title">Form Element: SELECT</div>
159  <form action="" method="get">
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>
164    <input name="size" id="f_size" type="text" value="" size="15" />
165    <p />
166    <div class="fr"><nobr>Multiple Select</nobr></div>
167    <input name="multiple" id="f_multiple" type="checkbox" value="multiple" />
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 />
175    <div class="space"></div>
176    <fieldset id="fldLayout">
177    <legend>Options</legend>
178      <table border="0" cellspacing="0">
179      <tr>
180      <td align="right">
181        <select name="select" id="f_select" Size="6" onchange="getValues();"  style="width:16em">
182        </select>
183      </td>
184      <td align="center">
185        <input type="button" name="up" value="Move Up" style="width:6em" onClick="moveOptionUp()"><br />
186        <input type="button" name="down" value="Move Down" style="width:6em" onClick="moveOptionDown()"><br />
187        <input type="button" name="delete" value="Delete" style="width:6em" onClick="deleteItem();">
188      </td>
189      </tr>
190      </table>
191      <div class="space"></div>
192      <table border="0" cellspacing="0">
193      <tr>
194        <td align="right">Label:</td>
195        <td><input type="text" id="f_optiontext" name="optionText" value="" size="15"></td>
196        <td align="right">Value:</td>
197        <td><input name="optionValue" id="f_optionvalue" type="text" value="" size="15"></td>
198        <td><input type="button" name="update" id="f_update" value="Add" onclick="addItem(document.forms[0])"></td>
199      </tr>
200      </table>
201    </fieldset>
202    <div id="buttons">
203      <button type="button" name="ok" onclick="return onOK();">OK</button>
204      <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
205    </div>
206  </form>
207</body>
208</html>
Note: See TracBrowser for help on using the repository browser.