source: releases/0.91beta/plugins/Forms/popups/select.html @ 652

Last change on this file since 652 was 652, checked in by ray, 13 years ago

release 0.91beta with changed namespace

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