Autofocus on the first form elems of IDE pages

pebble · Sep 6, 2016 · a987a78 · a987a78
1 parent 86fb8be
commit a987a78
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 8 deletions.
diff --git a/ide/static/ide/js/resources.js b/ide/static/ide/js/resources.js
@@ -464,7 +464,7 @@ CloudPebble.Resources = (function() {
         CloudPebble.ProgressBar.Show();
         Ajax.Get("/ide/project/" + PROJECT_ID + "/resource/" + resource.id + "/info").then(function(data) {
             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) {
@@ -858,7 +858,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');
@@ -878,6 +879,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"), []);
@@ -902,7 +906,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) {

diff --git a/ide/static/ide/js/sidebar.js b/ide/static/ide/js/sidebar.js
@@ -37,6 +37,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) {
@@ -53,13 +57,16 @@ CloudPebble.Sidebar = (function() {
                 pane.data('pane-restore-function')();
             }
 
+            refocus_pane(pane);
+
             return true;
         }
         return false;
     };
 
     var set_main_pane = function(pane, options) {
         $('#main-pane').append(pane).data('pane-id', options.id);
+        refocus_pane(pane);
         if (options.onRestore) {
             $('#main-pane').data('pane-restore-function', options.onRestore);
         }

diff --git a/ide/templates/ide/project/compile.html b/ide/templates/ide/project/compile.html
@@ -58,7 +58,7 @@ <h3>{% trans 'Last build' %}</h3>
         </div>
         <hr>
         <div class="compilation-buttons three-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">
                 {% if project.project_type == 'package'%}
                     {% trans 'Get Package' %}

diff --git a/ide/templates/ide/project/dependencies.html b/ide/templates/ide/project/dependencies.html
@@ -6,7 +6,7 @@
     <div class="well">
         <h3>{% trans 'NPM Dependencies' %}</h3>
         <form id="dependencies-search-form">
-            <textarea id="dependencies-search" rows="1" cols="50"></textarea>
+            <textarea id="dependencies-search" rows="1" cols="50" autofocus></textarea>
         </form>
         <p class="help-block">{% trans 'Try searching for the keyword "pebble-package" to get a list of all published Pebble packages' %}</p>
 

diff --git a/ide/templates/ide/project/github.html b/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">

diff --git a/ide/templates/ide/project/resource.html b/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.is_standard_project_type  %}
                             <option value="font">{% trans 'TrueType font' %}</option>

diff --git a/ide/templates/ide/project/settings.html b/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="control-group">