Changeset 29927

Show
Ignore:
Timestamp:
26.05.2015 21:00:31 (4 years ago)
Author:
davidb
Message:

Check that a new flag name is available

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/main-form/enter-name.html

    r29914 r29927  
    22<html id="story"> 
    33  <head> 
    4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    5     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     4      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     5      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    66 
    77    <!-- jQuery --> 
     
    1212  <body> 
    1313    <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"> 
     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>   
    1922       
    20     <div data-role="controlgroup" class="control" data-mini="true">         
    21 <!--     
    22           <a href="#" class="next right-button idea-fwd" style="right:1%;"></a> 
    23 --> 
    24       <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    25         </div>   
    26        
    27 <!-- 
    28     <a target="_parent" href="../index.html" class="back-button back-left"></a> 
    29 --> 
    3023       
    3124    <div class="story-page"> 
     
    3427      <div class="story-title"> 
    3528        <h1 id="enter-name-header" class="center">Contact Details</h1> 
    36 <!-- 
    37         <p class="center">- - xx </p> 
    38 --> 
     29 
     30 
    3931            <style> 
    4032          input { 
     
    5244        Flag Name:  
    5345          </p> 
    54           <input type="text" autofocus="autofocus" style="color: white;" name="pub-name" /> 
    55  
    56  
    57  
    58           <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"> 
    5957        Your Name:  
    6058          </p> 
    61           <input type="text" style="color: white;" name="name" /> 
    62  
    63           <p> 
     59          <input id="myName" type="text" style="color: white;" name="name" disabled="disabled"/> 
     60 
     61 
     62          <p id="myEmailLabel" class="enterNameDisabled"> 
    6463        Contact email:  
    6564          </p> 
    66           <input type="text" name="email" /> 
    67  
    68           <p> 
     65          <input id="myEmail" type="text" name="email" disabled="disabled"/> 
     66 
     67          <p id="myDescLabel" class="enterNameDisabled"> 
    6968        Motivation for your flag design: 
    7069          </p> 
    71           <textarea name="desc" style="height: 250px;" >Describe your design ...</textarea> 
     70          <textarea id="myDesc" name="desc" style="height: 250px;" disabled="disabled">Describe your design ...</textarea> 
    7271           
    7372 
    7473          <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px"> 
    75         <input type="submit" value="Submit Flag Design" /> 
     74        <input id="mySubmit" type="submit" value="Submit Flag Design" disabled="disabled" /> 
    7675          </div> 
    7776        </form> 
    7877 
     78        <style> 
     79          .enterNameEnabled { 
     80            color: white; 
     81          } 
     82 
     83          .enterNameDisabled { 
     84            color: #909090; 
     85          } 
     86 
     87        </style> 
     88 
    7989        <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 
    80166              var jsession_id = $.cookie('JSESSIONID') || new Date().getTime(); 
    81167          $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>'); 
     
    84170 
    85171          //$('#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          }); 
    86243 
    87244        </script> 
    88  
    89245 
    90246      </div>