Merge pull request #363 from mutalyzer/auto-focus

 Auto focus primary form input on page load

mutalyzer/website/templates/back-translator.html

@@ -27,7 +27,7 @@ Please supply an amino acid substitution.
 <form class="form" action="{{ url_for('.back_translator') }}" method="get">
   <div class="form-group">
     <label for="description">Variant description</label>
-    <input class="form-control form-pre" type="text"
+    <input class="form-control form-pre" type="text" autofocus
            name="description" id="description" value="{{ description }}" placeholder="Variant description using HGVS format">
     <p>Examples:
       <code class="example-input" data-for="description">NM_003002.3:p.Asp92Tyr</code>,

mutalyzer/website/templates/batch-jobs.html

@@ -38,7 +38,7 @@
 
     <div class="form-group">
       <label for="email">Email address (optional)</label>
-      <input name="email" id="email" type="email"
+      <input name="email" id="email" type="email" autofocus
              class="form-control with-mailcheck"
              placeholder="Email address (notification will be sent here)"
              value="{{ email }}">

mutalyzer/website/templates/description-extractor.html

@@ -70,7 +70,7 @@ Please supply a reference sequence and an observed sequence.
         <div class="subform" id="reference_raw_method" style="display: {{ '' if reference_method == 'raw_method' or not reference_method else 'none' }}">
           <div class="form-group">
             <label for="reference_sequence">Reference sequence</label>
-            <textarea  name="reference_sequence" id="reference_sequence" class="form-control form-pre" placeholder="Reference sequence">{{ reference_sequence }}</textarea>
+            <textarea  name="reference_sequence" id="reference_sequence" class="form-control form-pre" placeholder="Reference sequence" autofocus>{{ reference_sequence }}</textarea>
             <p>Example: <code class="example-input" data-for="reference_sequence">ATGATGATCAGATACAGTGTGATACAGGTAGTTAGACAA</code></p>
           </div>
         </div>

mutalyzer/website/templates/homepage.html

@@ -28,7 +28,7 @@ nomenclature according to the
 
                 <form class="form" action="{{ url_for('.name_checker') }}" method="get">
                     <div class="input-group">
-                        <input class="form-control form-control-small form-pre" type="text" name="description" id="description" value="{{ description }}" placeholder="Variant description using HGVS format">
+                        <input class="form-control form-control-small form-pre" type="text" name="description" id="description" value="{{ description }}" placeholder="Variant description using HGVS format" autofocus>
                         <span class="input-group-btn">
                             <input type="submit" class="btn btn-primary pull-right" value="Check variant description">
                         </span>

mutalyzer/website/templates/name-checker.html

@@ -51,7 +51,7 @@
   <form class="form" action="{{ url_for('.name_checker') }}" method="get">
     <div class="form-group">
       <label for="description">Variant description</label>
-      <input class="form-control form-pre" type="text"
+      <input class="form-control form-pre" type="text" autofocus
              name="description" id="description" value="{{ description }}"
              placeholder="Variant description using HGVS format">
       <p>Examples:

mutalyzer/website/templates/name-generator.html

@@ -18,7 +18,7 @@
         <div class="form-group">
             <label for="control-refe" class="col-sm-2 control-label">Reference sequence</label>
             <div class="col-sm-10">
-                <input type="text" name="refe" id="control-refe" value=""class="form-control" placeholder="Reference" >
+                <input type="text" name="refe" id="control-refe" value=""class="form-control" placeholder="Reference" autofocus>
             </div>
         </div>
 

mutalyzer/website/templates/position-converter.html

@@ -27,7 +27,7 @@ normalize it to HGVS. Use the <a href="{{ url_for('.name_checker') }}">Name Chec
   </div>
   <div class="form-group">
     <label for="description">Variant description</label>
-    <input type="text" name="description" id="description" value="{{ description }}"
+    <input type="text" name="description" id="description" value="{{ description }}" autofocus
            class="form-control form-pre" placeholder="Variant description using HGVS format">
     <p>Examples:
       <code class="example-input"

mutalyzer/website/templates/snp-converter.html

@@ -15,8 +15,8 @@ the reference sequence(s) used by dbSNP.
 <form role="form" class="form" action="{{ url_for('.snp_converter') }}" method="get">
   <div class="form-group">
     <label for="rsid">SNP</label>
-    <input type="text" class="form-control form-pre"
-    name="rs_id" id="rsid" placeholder="dbSNP rs number (including rs)" value="{{ rs_id }}" ></input>
+    <input type="text" class="form-control form-pre" autofocus
+           name="rs_id" id="rsid" placeholder="dbSNP rs number (including rs)" value="{{ rs_id }}" ></input>
     <p>Example: <code class="example-input" data-for="rsid">rs9919552</code></p>
   </div>
 

mutalyzer/website/templates/static/js/interface.js

@@ -29,6 +29,7 @@ function clearField(form, fieldName) {
 }
 
 $(document).ready(function() {
+  // Populate form element with example input on click.
   $(document).on('click', '.example-input', function(event) {
     var target = document.getElementById($(this).data('for'));
 
@@ -37,6 +38,7 @@ $(document).ready(function() {
     event.stopPropagation();
   });
 
+  // Toggle visibility of form sections on click.
   $(document).on('change', '.input-select', function(event) {
     var context = document.getElementById(
           $(this).data('context')).getElementsByClassName('subform'),

mutalyzer/website/templates/syntax-checker.html

@@ -17,7 +17,7 @@ standard variant nomenclature">HGVS</a> format:
 <form class="form" action="{{ url_for('.syntax_checker') }}" method="get">
   <div class="form-group">
     <label for="description">Variant description</label>
-    <input class="form-control form-pre" type="text"
+    <input class="form-control form-pre" type="text" autofocus
            name="description" id="description" value="{{ description }}" placeholder="Variant description using HGVS format">
     <p>Example: <code class="example-input" data-for="description">AB026906.1:c.274G&gt;T</code></p>
   </div>