source: other-projects/nz-flag-design/trunk/main-form/enter-name.html

Last change on this file was 29982, checked in by davidb, 9 years ago

Changes made during Fieldays event. Background colour remember between reloads (in localStorage) until published; more sophisticated support for handling JSON data

  • Property svn:executable set to *
File size: 10.3 KB
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 <!--
14 <script>
15
16 if (jQuery.mobile) {
17 $(document).on("pagebeforeshow", "enter-name", function(event,data) {
18 //var active_page = $.mobile.activePage.attr("id");
19 //console.log("*** enter-name check: active page = " + active_page);
20 if (active_page == "enter-name-page") {
21 console.log("Saving SVG and PNG versions of the flag");
22 saveSVGAndPNGAsFiles();
23 }
24 });
25 }
26 else {
27 alert("Page called outside of jquery-mobile: no data from previous active page to save");
28 }
29
30 </script>
31 -->
32 <div data-role="page" id="enter-name-page"
33 class="demo-page"
34 data-dom-cache="true"
35 data-prev="iterative-design-jsp">
36
37 <div data-role="content">
38 <div data-role="controlgroup" class="control" data-mini="true">
39 <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
40 </div>
41
42
43 <div class="story-page">
44
45 <!-- put custom content here -->
46 <div class="story-title">
47 <h1 id="enter-name-header" class="center">Contact Details</h1>
48
49
50 <style>
51 input {
52 color: white;
53 }
54 </style>
55 <form id="publish-data"
56 action="my-design.jsp" method="get"
57 style="width: 400px; margin-left:auto; margin-right:auto;"
58 data-ajax="false"
59 >
60 <input type="hidden" name="action" value="publish"/>
61
62 <p>
63 Flag Name:
64 </p>
65 <input id="myFlagName" type="text" autofocus="autofocus" style="color: white;" name="pub-name" />
66 <p id="nameTaken"
67 class="ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"
68 style="display:none; background-color: #400000; color: white; padding: 10px; font-size: 180%;">
69 <i>
70 This flag name is already taken. <br/> Please enter a different name.
71 </i>
72 </p>
73
74
75 <p id="myNameLabel" class="enterNameDisabled">
76 Your Name:
77 </p>
78 <input id="myName" type="text" style="color: white;" name="name" disabled="disabled"/>
79
80
81 <p id="myEmailLabel" class="enterNameDisabled">
82 Contact email:
83 </p>
84 <input id="myEmail" type="text" name="email" disabled="disabled"/>
85
86 <p id="myDescLabel" class="enterNameDisabled">
87 Motivation for your flag design:
88 </p>
89 <textarea id="myDesc" name="desc" style="height: 250px;" disabled="disabled">Describe your design ...</textarea>
90
91
92 <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px">
93 <input id="mySubmit" type="submit" value="Submit Flag Design" disabled="disabled" >
94 </div>
95
96
97 <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px; font-size: 140%;">
98 <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
99 </dvi>
100
101 </form>
102
103 <style>
104 .enterNameEnabled {
105 color: white;
106 }
107
108 .enterNameDisabled {
109 color: #909090;
110 }
111
112 </style>
113
114 <script>
115 var rest_of_form_disabled = true;
116 var submit_button_disabled = true;
117
118 var stage1_input_valid = ["myName","myEmail","myDesc"];
119 var stage1_label_valid = ["myNameLabel","myEmailLabel","myDescLabel"];
120
121 var stage2_input_valid = ["mySubmit"];
122 var stage2_label_valid = [];
123
124 function disableRestOfForm()
125 {
126 for (var i=0; i<stage1_label_valid.length; i++) {
127 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",false)
128 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",true)
129 }
130
131 for (var i=0; i<stage1_input_valid.length; i++) {
132 //$('#'+stage1_input_valid[i]).attr("disabled","disabled")
133 $('#'+stage1_input_valid[i]).textinput("disable")
134 }
135 disableSubmit();
136 rest_of_form_disabled = true;
137
138 }
139
140 function enableAllButSubmit()
141 {
142 for (var i=0; i<stage1_label_valid.length; i++) {
143 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",false);
144 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",true);
145 }
146
147 for (var i=0; i<stage1_input_valid.length; i++) {
148 //$('#'+stage1_input_valid[i]).removeAttr("disabled")
149 //$('#'+stage1_input_valid[i]).prop("disabled",false)
150 $('#'+stage1_input_valid[i]).textinput("enable");
151 }
152 reset_of_form_disabled = false;
153 }
154
155
156 function disableSubmit()
157 {
158 for (var i=0; i<stage2_label_valid.length; i++) {
159 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",false);
160 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",true);
161 }
162
163 for (var i=0; i<stage2_input_valid.length; i++) {
164 //$('#'+stage2_input_valid[i]).attr("disabled","disabled");
165 $('#'+stage2_input_valid[i]).button("disable");
166 }
167
168 submit_button_disabled = true;
169
170 }
171
172
173 function enableSubmit()
174 {
175
176 for (var i=0; i<stage2_label_valid.length; i++) {
177 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",false)
178 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",true)
179 }
180
181 for (var i=0; i<stage2_input_valid.length; i++) {
182 //$('#'+stage2_input_valid[i]).removeAttr("disabled")
183 $('#'+stage2_input_valid[i]).button("enable");
184 }
185
186 submit_button_disabled = false;
187
188 }
189
190
191 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
192 $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>');
193 //$('#publish-data').append('<input type="hidden" name="png-flag" value="flag-' + jsession_id + '.png"/>');
194 //$('#publish-data').append('<input type="hidden" name="svg-flag" value="flag-' + jsession_id + '.svg"/>');
195
196 //$('#publish-data').append('<img src="../render-3d/images/flag-' + jsession_id + '.png"/>');
197
198 var taken_list = null;
199 var taken_lookup = null;
200 $myFlagName = $('#myFlagName');
201 $myFlagName.keyup(function() {
202
203 if (taken_list == null) {
204
205 $.ajax({
206 url: 'published-names.jsp',
207 async: false,
208 success: function(datastr) {
209 var clean_datastr = datastr.replace(/^\s+/,"");
210 //alert("OK:" + clean_datastr);
211 var data = eval("(" + clean_datastr + ")");
212 //alert("OK:" + JSON.stringify(data));
213 taken_list = data;
214 //console.log("****** !!!! taken list = " + JSON.stringify(taken_list));
215 taken_lookup = {};
216 for (var i=0; i<taken_list.length; i++) {
217 var pub_name = taken_list[i];
218 taken_lookup[pub_name] = 1;
219 }
220 //console.log("****** !!!! taken lookup = " + JSON.stringify(taken_lookup));
221
222 },
223 error: function(data) {
224 console.log("Error:" + JSON.stringify(data))
225 }
226 });
227
228
229 }
230
231 var flag_name = $myFlagName.val();
232 flag_name = flag_name.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," ");
233
234 if (flag_name.length==0) {
235 //$('#nameTaken').hide("blind",{duration: 200});
236 $('#nameTaken').hide();
237 disableRestOfForm();
238 }
239 else {
240 if (rest_of_form_disabled) {
241 enableAllButSubmit();
242 }
243 }
244
245 if (taken_lookup != null) {
246 if (taken_lookup[flag_name]) {
247 // current flag_name NOT available
248 if (!submit_button_disabled) {
249 //$('#nameTaken').show("Blind",{duration: 200});
250 $('#nameTaken').show();
251 disableSubmit();
252 }
253 }
254 else {
255 if (submit_button_disabled) {
256 //$('#nameTaken').hide("blind",{duration: 200});
257 $('#nameTaken').hide();
258 enableSubmit();
259 }
260 }
261 }
262
263
264
265 //console.log("entered field: " + $myFlagName.val());
266
267 });
268
269
270/*
271$('#publish-data').validate({
272 rules: {
273 myFlagName: {
274 required: true
275 },
276 myName: {
277 required: true
278 },
279 myEmail: {
280 required: true
281 },
282 myDesc: {
283 required: true
284 }
285
286 },
287 messages: {
288 myFlagName: {
289 required: "Please enter a name for your flag."
290 },
291 myName: {
292 required: "Please enter your name."
293 },
294 myEmail: {
295 required: "Please enter your email."
296 },
297 myDesc: {
298 required: "Please describe your flag design."
299 }
300
301 },
302 errorPlacement: function (error, element) {
303 error.appendTo(element.parent().prev());
304 },
305 submitHandler: function (form) {
306 var pubName = $('#myFlagName').val();
307 var pubNameNoQuotes = pubName.replace(/"/g,"");
308 console.log("*** pubName stripped of quotes: " + pubNameNoQuotes);
309
310 $('#myFlagName').val(pubNameNoQuotes);
311 return true;
312
313// $(':mobile-pagecontainer').pagecontainer('change', '#success', {
314// reload: false
315// });
316// return false;
317
318
319 }
320});
321*/
322
323/*
324 $('#myFlagName').on('submit', function(e){
325 //e.preventDefault();
326 var pubName = $('#myFlagName').val();
327 var pubNameNoQuotes = pubName.replace(/"/g,"");
328 console.log("*** pubName stripped of quotes: " + pubNameNoQuotes);
329
330 $('#myFlagName').val(pubNameNoQuotes);
331 this.submit();
332 });
333*/
334
335
336 // The following (hopefully) supresses the "unsaved changes, are you sure" popup
337 //window.addEventListener('beforeunload', function(e) {
338 // return; });
339
340
341
342 </script>
343
344 </div>
345 <!-- end of putting custom content -->
346
347 </div> <!-- end story-page-->
348
349 </div><!-- /content -->
350
351 </div><!-- /page -->
352 </body>
353</html>
Note: See TracBrowser for help on using the repository browser.