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

Revision 29973, 8.3 KB (checked in by davidb, 4 years ago)

added a beforeunload event handler to avoid a 'edited changed' popup appearing

  • 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    <!--
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              // The following supresses the "unsaved changes, are you sure" popup
265        window.addEventListener('beforeunload', function(e) {
266            return; });
267
268                                 
269        </script>
270
271      </div>
272      <!-- end of putting custom content -->
273
274    </div> <!-- end story-page-->       
275   
276      </div><!-- /content -->
277
278    </div><!-- /page -->     
279  </body>
280</html>
Note: See TracBrowser for help on using the browser.