root/other-projects/nz-flag-design/trunk/main-form/enter-name.html @ 29927

Revision 29927, 7.6 KB (checked in by davidb, 5 years ago)

Check that a new flag name is available

  • Property svn:executable set to *
Line 
1<!DOCTYPE html> 
2<html id="story">
3  <head>
4      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5      <meta name="viewport" content="width=device-width, initial-scale=1" />
6
7    <!-- jQuery -->
8    <script src="lib/jquery-1.11.1.min.js"></script>
9     
10    <title>Enter Name</title>
11  </head>
12  <body>
13    <div data-role="page" id="enter-name-page"
14      class="demo-page"
15      data-dom-cache="true"
16      data-prev="iterative-design">
17
18      <div data-role="content">   
19    <div data-role="controlgroup" class="control" data-mini="true">       
20      <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
21    </div> 
22     
23     
24    <div class="story-page">
25
26      <!-- put custom content here -->   
27      <div class="story-title">
28        <h1 id="enter-name-header" class="center">Contact Details</h1>
29
30
31            <style>
32          input {
33            color: white;
34          }
35            </style>
36        <form id="publish-data"
37          action="my-design.jsp" method="get"
38          style="width: 400px; margin-left:auto; margin-right:auto;"
39          data-ajax="false"
40          >
41          <input type="hidden" name="action" value="publish"/>
42
43          <p>
44        Flag Name:
45          </p>
46          <input id="myFlagName" type="text" autofocus="autofocus" style="color: white;" name="pub-name" />
47          <p id="nameTaken"
48              class="ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"
49              style="display:none; background-color: #400000; color: white; padding: 10px; font-size: 180%;">
50            <i>
51              This flag name is already taken.  <br/> Please enter a different name.
52        </i>       
53          </p>
54
55
56          <p id="myNameLabel" class="enterNameDisabled">
57        Your Name:
58          </p>
59          <input id="myName" type="text" style="color: white;" name="name" disabled="disabled"/>
60
61
62          <p id="myEmailLabel" class="enterNameDisabled">
63        Contact email:
64          </p>
65          <input id="myEmail" type="text" name="email" disabled="disabled"/>
66
67          <p id="myDescLabel" class="enterNameDisabled">
68        Motivation for your flag design:
69          </p>
70          <textarea id="myDesc" name="desc" style="height: 250px;" disabled="disabled">Describe your design ...</textarea>
71         
72
73          <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px">
74        <input id="mySubmit" type="submit" value="Submit Flag Design" disabled="disabled" />
75          </div>
76        </form>
77
78        <style>
79          .enterNameEnabled {
80            color: white;
81          }
82
83          .enterNameDisabled {
84            color: #909090;
85          }
86
87        </style>
88
89        <script>
90          var rest_of_form_disabled = true;
91          var submit_button_disabled = true;
92
93          var stage1_input_valid = ["myName","myEmail","myDesc"];
94          var stage1_label_valid = ["myNameLabel","myEmailLabel","myDescLabel"];
95
96          var stage2_input_valid = ["mySubmit"];
97          var stage2_label_valid = [];
98
99          function disableRestOfForm()
100          {     
101              for (var i=0; i<stage1_label_valid.length; i++) {
102            $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",false)
103            $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",true)
104          }
105
106              for (var i=0; i<stage1_input_valid.length; i++) {
107            //$('#'+stage1_input_valid[i]).attr("disabled","disabled")
108            $('#'+stage1_input_valid[i]).textinput("disable")
109          }
110          disableSubmit();
111          rest_of_form_disabled = true;
112
113          }
114
115          function enableAllButSubmit()
116          {
117              for (var i=0; i<stage1_label_valid.length; i++) {
118            $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",false);
119            $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",true);
120          }
121
122              for (var i=0; i<stage1_input_valid.length; i++) {
123            //$('#'+stage1_input_valid[i]).removeAttr("disabled")
124            //$('#'+stage1_input_valid[i]).prop("disabled",false)
125            $('#'+stage1_input_valid[i]).textinput("enable");
126          }
127          reset_of_form_disabled = false;
128          }
129
130
131          function disableSubmit()
132          {
133              for (var i=0; i<stage2_label_valid.length; i++) {
134            $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",false);
135            $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",true);
136          }
137
138              for (var i=0; i<stage2_input_valid.length; i++) {
139            //$('#'+stage2_input_valid[i]).attr("disabled","disabled");
140            $('#'+stage2_input_valid[i]).button("disable");
141          }
142
143              submit_button_disabled = true;
144
145          }
146
147
148          function enableSubmit()
149          {
150
151              for (var i=0; i<stage2_label_valid.length; i++) {
152            $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",false)
153            $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",true)
154          }
155
156              for (var i=0; i<stage2_input_valid.length; i++) {
157            //$('#'+stage2_input_valid[i]).removeAttr("disabled")
158            $('#'+stage2_input_valid[i]).button("enable");
159          }
160
161              submit_button_disabled = false;
162
163          }
164
165
166              var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
167          $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>');
168          //$('#publish-data').append('<input type="hidden" name="png-flag" value="flag-' + jsession_id + '.png"/>');
169          //$('#publish-data').append('<input type="hidden" name="svg-flag" value="flag-' + jsession_id + '.svg"/>');
170
171          //$('#publish-data').append('<img src="../render-3d/images/flag-' + jsession_id + '.png"/>');
172         
173          var taken_list   = null;
174          var taken_lookup = null;
175          $myFlagName = $('#myFlagName');
176          $myFlagName.keyup(function() {
177
178              if (taken_list == null) {
179
180            $.ajax({
181                url: 'published-names.jsp',
182            async: false,
183            success: function(datastr) {
184              var clean_datastr = datastr.replace(/^\s+/,"");
185              //alert("OK:" +  clean_datastr);
186              var data = eval("(" + clean_datastr + ")");
187              //alert("OK:" +  JSON.stringify(data));
188              taken_list  = data;
189              //console.log("****** !!!! taken list = " + JSON.stringify(taken_list));
190              taken_lookup = {};
191              for (var i=0; i<taken_list.length; i++) {
192                var pub_name = taken_list[i];
193                taken_lookup[pub_name] = 1;
194              }
195              //console.log("****** !!!! taken lookup = " + JSON.stringify(taken_lookup));
196
197            },
198            error:   function(data) {
199              console.log("Error:" +  JSON.stringify(data))
200              }
201            });
202
203
204                  }
205
206          var flag_name = $myFlagName.val();
207          flag_name = flag_name.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," ");
208
209          if (flag_name.length==0) {
210                //$('#nameTaken').hide("blind",{duration: 200});
211                $('#nameTaken').hide();
212            disableRestOfForm();
213          }
214          else {
215            if (rest_of_form_disabled) {
216              enableAllButSubmit();
217            }
218          }
219
220          if (taken_lookup != null) {
221            if (taken_lookup[flag_name]) {
222              // current flag_name NOT available
223              if (!submit_button_disabled) {
224                    //$('#nameTaken').show("Blind",{duration: 200});
225                    $('#nameTaken').show();
226                disableSubmit();
227              }
228            }
229            else {
230              if (submit_button_disabled) {
231                    //$('#nameTaken').hide("blind",{duration: 200});
232            $('#nameTaken').hide();
233                enableSubmit();
234              }
235            }
236          }
237
238             
239
240              //console.log("entered field: " +  $myFlagName.val());
241
242          });
243
244        </script>
245
246      </div>
247      <!-- end of putting custom content -->
248
249    </div> <!-- end story-page-->       
250   
251      </div><!-- /content -->
252
253    </div><!-- /page -->     
254  </body>
255</html>
Note: See TracBrowser for help on using the browser.