Autofocus on the first form elems of IDE pages

Author: Joseph Atkins-Turkish

ide/static/ide/js/resources.js

@@ -468,7 +468,7 @@ CloudPebble.Resources = (function() {
             CloudPebble.ProgressBar.Hide();
             if(!data.success) return;
             var resource = data.resource;
-            var pane = prepare_resource_pane();
+            var pane = prepare_resource_pane({is_new: false});
 
             var list_entry = $('#sidebar-pane-resource-' + resource.id);
             if(list_entry) {
@@ -860,7 +860,8 @@ CloudPebble.Resources = (function() {
         return textext.textext()[0];
     };
 
-    var prepare_resource_pane = function() {
+    var prepare_resource_pane = function(options) {
+        var is_new = options.is_new;
         var template = resource_template.clone();
         template.removeClass('hide');
         template.find('.font-only').addClass('hide');
@@ -880,6 +881,9 @@ CloudPebble.Resources = (function() {
             });
         });
 
+        template.find('#edit-resource-type').attr('autofocus', is_new);
+        template.find('#edit-resource-file-name').attr('autofocus', !is_new);
+
         // setTimeout is used because the textarea has to actually be visible when the textext tag editor is initialised
         setTimeout(function() {
             var textext = build_tags_editor(template, template.find("#new-resource-tags"), []);
@@ -904,7 +908,7 @@ CloudPebble.Resources = (function() {
     var create_new_resource = function() {
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore('new-resource')) return;
-        var pane = prepare_resource_pane();
+        var pane = prepare_resource_pane({is_new: true});
         var form = pane.find('form');
 
         form.submit(function(e) {

ide/static/ide/js/sidebar.js

@@ -39,6 +39,10 @@ CloudPebble.Sidebar = (function() {
         }
     };
 
+    var refocus_pane = function(pane) {
+        pane.find('*[autofocus]').first().focus();
+    };
+
     var restore_suspended_pane = function(id) {
         var pane = suspended_panes[id] ;
         if(pane) {
@@ -55,13 +59,16 @@ CloudPebble.Sidebar = (function() {
                 pane.data('pane-restore-function')();
             }
 
+            refocus_pane(pane);
+
             return true;
         }
         return false;
     };
 
     var set_main_pane = function(pane, id, restore_function, destroy_function) {
         $('#main-pane').append(pane).data('pane-id', id);
+        refocus_pane(pane);
         if(restore_function) {
             $('#main-pane').data('pane-restore-function', restore_function);
         }

ide/templates/ide/project/compile.html

@@ -56,7 +56,7 @@ <h3>{% trans 'Last build' %}</h3>
         </div>
         <hr>
         <div class="build-buttons">
-            <button class="btn btn-affirmative" id="compilation-run-build-button">{% trans 'Run build' %}</button>
+            <button class="btn btn-affirmative" id="compilation-run-build-button" autofocus>{% trans 'Run build' %}</button>
             <a id="last-compilation-pbw" href="#" class="btn hide">{% trans 'Get PBW' %}</a>
             <a id="last-compilation-log" class="btn hide" href="#">{% trans 'Build log' %}</a>
         </div>

ide/templates/ide/project/github.html

@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="github-repo">{% trans 'Github Repo' %}</label>
                 <div class="controls">
-                    <input type="text" class="span6" id="github-repo" pattern="(?:https?://|git@|git://)?(?:www\.)?github\.com[/:]([\w.-]+)/([\w.-]+?)(?:\.git|/|$)" placeholder="github.com/{{ project.owner.github.username }}/PebbleFace">
+                    <input type="text" class="span6" id="github-repo" pattern="(?:https?://|git@|git://)?(?:www\.)?github\.com[/:]([\w.-]+)/([\w.-]+?)(?:\.git|/|$)" placeholder="github.com/{{ project.owner.github.username }}/PebbleFace" autofocus>
                 </div>
             </div>
             <div class="control-group">

ide/templates/ide/project/resource.html

@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="edit-resource-type">{% trans 'Resource type' %}</label>
                 <div class="controls">
-                    <select id="edit-resource-type">
+                    <select id="edit-resource-type" autofocus>
                         <option value="bitmap">{% trans 'Bitmap Image' %}</option>
                         {% if project.project_type == 'native' %}
                             <option value="font">{% trans 'TrueType font' %}</option>

ide/templates/ide/project/settings.html

@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="settings-name">{% trans 'Project name' %}</label>
                 <div class="controls">
-                    <input type="text" id="settings-name">
+                    <input type="text" id="settings-name" autofocus>
                 </div>
             </div>
             <div class="sdk-version native-only control-group">