From 2b29c5fb18b41127f6205d873c905a5d3017954d Mon Sep 17 00:00:00 2001
From: Thomas Young <crispweed@upcoder.com>
Date: Wed, 20 May 2015 11:19:04 +0200
Subject: [PATCH] scroll to newly created section and make first input element
 active on creation of a new textbook in the textbooks list page (fix for
 https://openedx.atlassian.net/browse/TNL-130)

---
 cms/static/js/views/list_textbooks.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/cms/static/js/views/list_textbooks.js b/cms/static/js/views/list_textbooks.js
index 40f3cc4322..f10b20a972 100644
--- a/cms/static/js/views/list_textbooks.js
+++ b/cms/static/js/views/list_textbooks.js
@@ -1,5 +1,5 @@
-define(["js/views/baseview", "jquery", "js/views/edit_textbook", "js/views/show_textbook"],
-        function(BaseView, $, EditTextbookView, ShowTextbookView) {
+define(["js/views/baseview", "jquery", "js/views/edit_textbook", "js/views/show_textbook", "js/views/utils/view_utils"],
+        function(BaseView, $, EditTextbookView, ShowTextbookView, ViewUtils) {
     var ListTextbooks = BaseView.extend({
         initialize: function() {
             this.emptyTemplate = this.loadTemplate('no-textbooks');
@@ -32,7 +32,15 @@ define(["js/views/baseview", "jquery", "js/views/edit_textbook", "js/views/show_
         },
         addOne: function(e) {
             if(e && e.preventDefault) { e.preventDefault(); }
-            this.collection.add([{editing: true}]);
+            this.collection.add([{editing: true}]); // (render() call triggered here)
+            // find the outer 'section' tag for the newly added textbook
+            $sectionEl = this.$el.find('section:last');
+            // scroll to put this at top of viewport
+            ViewUtils.setScrollOffset($sectionEl, 0);            
+            // find the first input element in this section
+            $inputEl = $sectionEl.find('input:first');
+            // activate the text box (so user can go ahead and start typing straight away)
+            $inputEl.focus().select();
         },
         handleDestroy: function(model, collection, options) {
             collection.remove(model);