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

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

new plugin forms

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