Merge pull request #278 from dpalou/MOBILE-1308

MOBILE-1308 ui: Auto-focus some input elements

Author: jleyva

config.xml

@@ -18,6 +18,7 @@
   <preference name="BackupWebStorage" value="none"/>
   <preference name="SplashScreen" value="screen"/>
   <preference name="SplashScreenDelay" value="3000"/>
+  <preference name="KeyboardDisplayRequiresUserAction" value="false" />
   <feature name="StatusBar">
     <param name="ios-package" value="CDVStatusBar" onload="true"/>
   </feature>

www/core/components/courses/templates/search.html

@@ -3,7 +3,7 @@
         <form class="list">
             <label class="item item-input">
                 <i class="icon ion-search placeholder-icon"></i>
-                <input type="text" placeholder="{{ 'mm.courses.search' | translate}}" ng-model="searchText">
+                <input type="text" placeholder="{{ 'mm.courses.search' | translate}}" ng-model="searchText" mm-auto-focus>
             </label>
             <button class="button button-block" ng-click="search(searchText)" ng-disabled="searchText.length < 3">
                 {{ 'mm.courses.search' | translate }}

www/core/components/login/templates/credentials.html

@@ -5,7 +5,7 @@
       <form>
         <label class="item item-input item-stacked-label">
           <span class="input-label">{{ 'mm.login.username' | translate }}</span>
-          <input type="text" placeholder="{{ 'mm.login.username' | translate }}" ng-model="credentials.username" autocapitalize="off" autocorrect="off">
+          <input type="text" placeholder="{{ 'mm.login.username' | translate }}" ng-model="credentials.username" autocapitalize="off" autocorrect="off" mm-auto-focus>
         </label>
         <label class="item item-input item-stacked-label">
           <span class="input-label">{{ 'mm.login.password' | translate }}</span>

www/core/components/login/templates/reconnect.html

@@ -13,7 +13,7 @@ <h2>{{ 'mm.login.username' | translate }}</h2>
             <form>
                 <label class="item item-input item-stacked-label">
                     <span class="input-label">{{ 'mm.login.password' | translate }}</span>
-                    <input type="password" placeholder="{{ 'mm.login.password' | translate }}" ng-model="credentials.password">
+                    <input type="password" placeholder="{{ 'mm.login.password' | translate }}" ng-model="credentials.password" mm-auto-focus>
                 </label>
                 <div class="item">
                     <button class="button button-block" ng-click="login()">{{ 'mm.login.loginbutton' | translate }}</button>

www/core/components/login/templates/site.html

@@ -8,7 +8,7 @@
         <form>
           <label class="item item-input item-stacked-label">
             <span class="input-label">{{ 'mm.login.siteaddress' | translate }}</span>
-            <input type="url" placeholder="moodle.org" ng-model="siteurl" mm-no-input-validation ng-change="validate(siteurl)" >
+            <input type="url" placeholder="moodle.org" ng-model="siteurl" mm-no-input-validation ng-change="validate(siteurl)" mm-auto-focus >
           </label>
           <div class="item">
               <button class="button button-block" ng-click="connect(siteurl)" ng-disabled="isInvalidUrl">{{ 'mm.login.connect' | translate }}</button>

www/core/directives/autofocus.js

@@ -0,0 +1,43 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+angular.module('mm.core')
+
+/**
+ * Directive to auto focus an element when a view is loaded.
+ *
+ * @module mm.core
+ * @ngdoc directive
+ * @name mmAutoFocus
+ */
+.directive('mmAutoFocus', function($mmApp) {
+    return {
+        restrict: 'A',
+        link: function(scope, el) {
+            // Wait for transition to finish before auto-focus.
+            var unregister = scope.$watch(function() {
+                return ionic.transition.isActive;
+            }, function(isActive) {
+                if (!isActive) {
+                    el[0].focus();
+                    unregister(); // Stop watching.
+                    if (ionic.Platform.isAndroid()) {
+                        // On some Android versions the keyboard doesn't open automatically.
+                        $mmApp.openKeyboard();
+                    }
+                }
+            });
+        }
+    };
+});

www/core/lib/app.js

@@ -238,6 +238,19 @@ angular.module('mm.core')
             return promise.$$state.status === 1;
         };
 
+        /**
+         * Open the keyboard if plugin is available.
+         *
+         * @return {Boolean} True if plugin is available, false otherwise.
+         */
+        self.openKeyboard = function() {
+            if (typeof cordova != 'undefined' && cordova.plugins && cordova.plugins.Keyboard && cordova.plugins.Keyboard.show) {
+                cordova.plugins.Keyboard.show();
+                return true;
+            }
+            return false;
+        };
+
         /**
          * Resolves when the app is ready.
          *