scroll to newly created section and make first input element active on creation…

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

-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);