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

Last change on this file since 29968 was 29967, checked in by davidb, 9 years ago

save SVG and PNG more deeply embedded into code so occurs when either swiped or next arrow clicked
  • Property svn:executable set to *
File size: 8.1 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 </form>
96
97 <style>
98 .enterNameEnabled {
99 color: white;
100 }
101
102 .enterNameDisabled {
103 color: #909090;
104 }
105
106 </style>
107
108 <script>
109 var rest_of_form_disabled = true;
110 var submit_button_disabled = true;
111
112 var stage1_input_valid = ["myName","myEmail","myDesc"];
113 var stage1_label_valid = ["myNameLabel","myEmailLabel","myDescLabel"];
114
115 var stage2_input_valid = ["mySubmit"];
116 var stage2_label_valid = [];
117
118 function disableRestOfForm()
119 {
120 for (var i=0; i<stage1_label_valid.length; i++) {
121 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",false)
122 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",true)
123 }
124
125 for (var i=0; i<stage1_input_valid.length; i++) {
126 //$('#'+stage1_input_valid[i]).attr("disabled","disabled")
127 $('#'+stage1_input_valid[i]).textinput("disable")
128 }
129 disableSubmit();
130 rest_of_form_disabled = true;
131
132 }
133
134 function enableAllButSubmit()
135 {
136 for (var i=0; i<stage1_label_valid.length; i++) {
137 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",false);
138 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",true);
139 }
140
141 for (var i=0; i<stage1_input_valid.length; i++) {
142 //$('#'+stage1_input_valid[i]).removeAttr("disabled")
143 //$('#'+stage1_input_valid[i]).prop("disabled",false)
144 $('#'+stage1_input_valid[i]).textinput("enable");
145 }
146 reset_of_form_disabled = false;
147 }
148
149
150 function disableSubmit()
151 {
152 for (var i=0; i<stage2_label_valid.length; i++) {
153 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",false);
154 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",true);
155 }
156
157 for (var i=0; i<stage2_input_valid.length; i++) {
158 //$('#'+stage2_input_valid[i]).attr("disabled","disabled");
159 $('#'+stage2_input_valid[i]).button("disable");
160 }
161
162 submit_button_disabled = true;
163
164 }
165
166
167 function enableSubmit()
168 {
169
170 for (var i=0; i<stage2_label_valid.length; i++) {
171 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",false)
172 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",true)
173 }
174
175 for (var i=0; i<stage2_input_valid.length; i++) {
176 //$('#'+stage2_input_valid[i]).removeAttr("disabled")
177 $('#'+stage2_input_valid[i]).button("enable");
178 }
179
180 submit_button_disabled = false;
181
182 }
183
184
185 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
186 $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>');
187 //$('#publish-data').append('<input type="hidden" name="png-flag" value="flag-' + jsession_id + '.png"/>');
188 //$('#publish-data').append('<input type="hidden" name="svg-flag" value="flag-' + jsession_id + '.svg"/>');
189
190 //$('#publish-data').append('<img src="../render-3d/images/flag-' + jsession_id + '.png"/>');
191
192 var taken_list = null;
193 var taken_lookup = null;
194 $myFlagName = $('#myFlagName');
195 $myFlagName.keyup(function() {
196
197 if (taken_list == null) {
198
199 $.ajax({
200 url: 'published-names.jsp',
201 async: false,
202 success: function(datastr) {
203 var clean_datastr = datastr.replace(/^\s+/,"");
204 //alert("OK:" + clean_datastr);
205 var data = eval("(" + clean_datastr + ")");
206 //alert("OK:" + JSON.stringify(data));
207 taken_list = data;
208 //console.log("****** !!!! taken list = " + JSON.stringify(taken_list));
209 taken_lookup = {};
210 for (var i=0; i<taken_list.length; i++) {
211 var pub_name = taken_list[i];
212 taken_lookup[pub_name] = 1;
213 }
214 //console.log("****** !!!! taken lookup = " + JSON.stringify(taken_lookup));
215
216 },
217 error: function(data) {
218 console.log("Error:" + JSON.stringify(data))
219 }
220 });
221
222
223 }
224
225 var flag_name = $myFlagName.val();
226 flag_name = flag_name.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," ");
227
228 if (flag_name.length==0) {
229 //$('#nameTaken').hide("blind",{duration: 200});
230 $('#nameTaken').hide();
231 disableRestOfForm();
232 }
233 else {
234 if (rest_of_form_disabled) {
235 enableAllButSubmit();
236 }
237 }
238
239 if (taken_lookup != null) {
240 if (taken_lookup[flag_name]) {
241 // current flag_name NOT available
242 if (!submit_button_disabled) {
243 //$('#nameTaken').show("Blind",{duration: 200});
244 $('#nameTaken').show();
245 disableSubmit();
246 }
247 }
248 else {
249 if (submit_button_disabled) {
250 //$('#nameTaken').hide("blind",{duration: 200});
251 $('#nameTaken').hide();
252 enableSubmit();
253 }
254 }
255 }
256
257
258
259 //console.log("entered field: " + $myFlagName.val());
260
261 });
262
263
264
265 </script>
266
267 </div>
268 <!-- end of putting custom content -->
269
270 </div> <!-- end story-page-->
271
272 </div><!-- /content -->
273
274 </div><!-- /page -->
275 </body>
276</html>
Note: See TracBrowser for help on using the repository browser.