extra_fields.naml

<translation><from>Registered</from><to>Joined</to></translation>

<macro name="extra_profile_fields" requires="user,servlet">
    
    <n.set_local_user.this_user />
    
    <style type="text/css">
        #extra_fields_form{
        color: purple;
        border-radius: 10px;
        }
        #extra_fields_form div, #extra_fields_form label{
        float: left;
        clear: both;
        border-radius: 10px;
        }
        #extra_fields_form div{
        margin-left: 10px;
        margin-top: 5px;
        }
        #extra_fields_form .sub_but{
        padding: 3px;
        margin: 3px 10px;
        }
        .clear{
        clear:both;
        }
        #extra_button{
        cursor: pointer;
        font-style:italic;
        }
    </style>
    
    <script type='text/javascript'>
        $(document).ready(function(){
            $("#extra_button").click(function () {
                $("#extra_fields_form").show("slow", function(){
                    Nabble.resizeFrames();
                });       
            });        
        });       
       
    </script>
    
    <!-- Extra info -->    
    <n.if.is_submitted_form>        
        <then>
            <n.this_user.set_property name="sex" value="[n.get_parameter name='sex' /]" />
            <n.this_user.set_property name="location" value="[n.get_parameter name='location' /]" />
            <n.this_user.set_property name="bday" value="[n.get_parameter name='bday' /]" />
            
        </then>        
    </n.if.is_submitted_form>
    
    
    <n.this_user.list_extra_fields/>
</macro>

<macro name='list_extra_fields' requires='user'>
    <n.if.this_user.has_property name="sex">
        <then>
            <strong>Sex: </strong><n.this_user.get_property name="sex"/><br/>
        </then>
    </n.if.this_user.has_property>
    
   <n.if.this_user.has_property name="bday"> 
        <then>
            <n.if.not.is_empty.trim.this_user.get_property name="bday">               
                <then>
                    <strong>Age: </strong><span class='age'></span><br/>
                    <n.age_script/>
                </then>
            </n.if.not.is_empty.trim.this_user.get_property>
        </then>        
    </n.if.this_user.has_property>
    
    
    <n.if.this_user.has_property name="location">        
        <then>
            <n.if.not.is_empty.trim.this_user.get_property name="location">
               <then>
                   <strong>Location: </strong><n.this_user.get_property name="location"/>
                </then>
            </n.if.not.is_empty.trim.this_user.get_property>
        </then>
    </n.if.this_user.has_property>
       
    
</macro>

<macro name="extra_fields_form">
    <br/>
    <span id="extra_button">Edit your profile</span>
    <hr/>
    <form style="display: none" id="extra_fields_form" method="post" action=""  class='shaded-bg-color'>      
        
        <div>
            <label>Sex:</label>
            <div>
                <input type="radio" class='Male' name="sex" value="Male" />Male<br />
                <input type="radio" class='Female' name="sex" value="Female" />Female
            </div>
        </div>
        <br class='clear'/><br/>    
        
        <div>
            <label>Birthday (Age):</label><div><input type="text" pattern='^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$' name="bday" class='bday' /><br/> (mm/dd/yyyy) - date must be in this format</div>
        </div>
        <br class='clear'/><br/> 
        
        <div>
            <label>Location:</label><div><textarea class='location' maxlength='40'  name="location" ></textarea></div>
        </div>
        <br class='clear'/>
        <br/>
        <input class="sub_but toolbar"  type="submit" value="Update" />
        <br class='clear'/><br/> 
    </form>    
    <n.load_fields/>
</macro>

<macro name="load_fields">
    <n.if.this_user.has_property name="sex">
        <then>
            <script type='text/javascript'>
                $(document).ready(function(){
                var sexClassName = '<n.this_user.get_property name="sex"/>';
                var sexClass = $("."+sexClassName);
                sexClass[0].checked=true;
                })                
            </script>
        </then>
    </n.if.this_user.has_property>
    
    <n.if.this_user.has_property name="bday">         
        <then>
            <script type='text/javascript'>                         
                $(document).ready(function(){
               var bday= '<n.this_user.get_property name="bday"/>';
                $(".bday").val(bday); 
                age_fill(bday);                
                })                
            </script>            
        </then>        
    </n.if.this_user.has_property>
    
    <n.if.this_user.has_property name="location">        
        <then>
            <script type='text/javascript'>
                $(document).ready(function(){
                var location = '<n.this_user.get_property name="location"/>';
                $(".location").val(location);               
                })                
            </script>            
        </then>        
    </n.if.this_user.has_property>
</macro>

<macro name="age_script">
    <script type="text/javascript">
        
        function age_fill(bday){
          var d =bday.split("\/");        
          var d1 = new Date(d[2],parseInt(d[0])-1, d[1]);
          var d2 =new Date();         
        
          var milli= d2 - d1;
          var milliPerYear=1000*60*60*24*365.26;
        
          var yearsApart=milli/milliPerYear;        
          var age = Math.floor(yearsApart);        
          $("span.age").text(age);        
        }
        
        $( document ).ready(function() {
          if( $("#extra_fields_form").length == 0){
            age_fill('<n.this_user.get_property name="bday"/>');
          }       
        });
    </script>
</macro>