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

Last change on this file since 236 was 236, checked in by gocher, 14 years ago

new elements for plugin forms
file, fieldset, label

and for existing elements more attributes

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]] == "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)?"true":"";
49            break;
50    case "f_disabled":
51      param[fields[i]] = (document.getElementById(fields[i]).checked)?"true":""; 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 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">
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.