FIX: Use topic progress widget for jumping to posts

app/assets/javascripts/discourse/components/topic-progress.js.es6

@@ -2,19 +2,32 @@ import { default as computed, observes } from 'ember-addons/ember-computed-decor
 
 export default Ember.Component.extend({
   elementId: 'topic-progress-wrapper',
-  classNameBindings: ['docked'],
+  classNameBindings: ['docked', 'hidden'],
   expanded: false,
   toPostIndex: null,
   docked: false,
   progressPosition: null,
-
   postStream: Ember.computed.alias('topic.postStream'),
+  userWantsToJump: null,
 
   init() {
     this._super();
     (this.get('delegated') || []).forEach(m => this.set(m, m));
   },
 
+  @computed('userWantsToJump')
+  hidden(userWantsToJump) {
+    return !userWantsToJump && !this.site.mobileView;
+  },
+
+  keyboardTrigger(kbdEvent) {
+    if (kbdEvent.type === 'jump') {
+      this.set('expanded', true);
+      this.set('userWantsToJump', true);
+      Ember.run.scheduleOnce('afterRender', () => this.$('.jump-form input').focus());
+    }
+  },
+
   @computed('postStream.loaded', 'progressPosition', 'postStream.filteredPostsCount', 'postStream.highest_post_number')
   streamPercentage(loaded, progressPosition, filteredPostsCount, highestPostNumber) {
     if (!loaded) { return 0; }
@@ -64,11 +77,8 @@ export default Ember.Component.extend({
                   .on("composer:resized", this, this._dock)
                   .on("composer:closed", this, this._dock)
                   .on("topic:scrolled", this, this._dock)
-                  .on('topic:current-post-changed', postNumber => this.set('progressPosition', postNumber));
+                  .on('topic:current-post-changed', postNumber => this.set('progressPosition', postNumber))
-
+                  .on('topic-progress:keyboard-trigger', this, this.keyboardTrigger);
-    // Reflows are expensive. Cache the jQuery selector
-    // and the width when inserted into the DOM
-    this._$topicProgress = this.$('#topic-progress');
 
     Ember.run.scheduleOnce('afterRender', this, this._updateProgressBar);
   },
@@ -79,18 +89,22 @@ export default Ember.Component.extend({
                   .off("composer:resized", this, this._dock)
                   .off("composer:closed", this, this._dock)
                   .off('topic:scrolled', this, this._dock)
-                  .off('topic:current-post-changed');
+                  .off('topic:current-post-changed')
+                  .off('topic-progress:keyboard-trigger');
   },
 
   _updateProgressBar() {
+    if (this.get('hidden')) { return; }
+
+    const $topicProgress = this.$('#topic-progress');
     // speeds up stuff, bypass jquery slowness and extra checks
     if (!this._totalWidth) {
-      this._totalWidth = this._$topicProgress[0].offsetWidth;
+      this._totalWidth = $topicProgress[0].offsetWidth;
     }
     const totalWidth = this._totalWidth;
     const progressWidth = this.get('streamPercentage') * totalWidth;
 
-    this._$topicProgress.find('.bg')
+    $topicProgress.find('.bg')
       .css("border-right-width", (progressWidth === totalWidth) ? "0px" : "1px")
       .width(progressWidth);
   },
@@ -143,6 +157,7 @@ export default Ember.Component.extend({
         this.send('jumpPost');
       } else if (e.keyCode === 27) {
         this.send('toggleExpansion');
+        this.set('userWantsToJump', false);
       }
     }
   },
@@ -151,6 +166,7 @@ export default Ember.Component.extend({
     toggleExpansion(opts) {
       this.toggleProperty('expanded');
       if (this.get('expanded')) {
+        this.set('userWantsToJump', false);
         this.set('toPostIndex', this.get('progressPosition'));
         if(opts && opts.highlight){
           // TODO: somehow move to view?
@@ -175,18 +191,23 @@ export default Ember.Component.extend({
         postIndex = this.get('postStream.filteredPostsCount');
       }
       this.set('toPostIndex', postIndex);
-      this.set('expanded', false);
+      this._beforeJump();
       this.sendAction('jumpToIndex', postIndex);
     },
 
     jumpTop() {
-      this.set('expanded', false);
+      this._beforeJump();
       this.sendAction('jumpTop');
     },
 
     jumpBottom() {
-      this.set('expanded', false);
+      this._beforeJump();
       this.sendAction('jumpBottom');
     }
+  },
+
+  _beforeJump() {
+    this.set('expanded', false);
+    this.set('userWantsToJump', false);
   }
 });

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -21,6 +21,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
   enteredAt: null,
   enteredIndex: null,
   retrying: false,
+  userTriggeredProgress: null,
 
   topicDelegated: [
     'toggleMultiSelect',

app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6

@@ -159,7 +159,7 @@ export default {
   },
 
   toggleProgress() {
-    this.container.lookup('controller:topic-progress').send('toggleExpansion', {highlight: true});
+    this.appEvents.trigger('topic-progress:keyboard-trigger', { type: 'jump' });
   },
 
   toggleSearch(event) {

app/assets/javascripts/discourse/templates/components/topic-progress.hbs

@@ -1,27 +1,29 @@
-{{#if expanded}}
+{{#unless hidden}}
-  <nav id='topic-progress-expanded'>
+  {{#if expanded}}
-    {{d-button action="jumpTop"
+    <nav id='topic-progress-expanded'>
-               disabled=jumpTopDisabled
+      {{d-button action="jumpTop"
-               class="full no-text"
+                 disabled=jumpTopDisabled
-               icon="caret-up"
+                 class="full no-text"
-               label="topic.progress.go_top"}}
+                 icon="caret-up"
-    <div class='jump-form'>
+                 label="topic.progress.go_top"}}
-      {{input value=toPostIndex}}
+      <div class='jump-form'>
-      {{d-button action="jumpPost" label="topic.progress.go"}}
+        {{input value=toPostIndex}}
+        {{d-button action="jumpPost" label="topic.progress.go"}}
+      </div>
+      {{d-button action="jumpBottom"
+                 disabled=jumpBottomDisabled
+                 class="full no-text jump-bottom"
+                 icon="caret-down"
+                 label="topic.progress.go_bottom"}}
+    </nav>
+  {{/if}}
+  <nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" class="{{if hideProgress 'hidden'}}">
+    <div class='nums'>
+      <h4>{{progressPosition}}</h4><span class="{{if hugeNumberOfPosts 'hidden'}}">
+      <span>/</span>
+      <h4>{{postStream.filteredPostsCount}}</h4></span>
     </div>
-    {{d-button action="jumpBottom"
+    <i class="fa {{unless expanded 'fa-sort'}}"></i>
-               disabled=jumpBottomDisabled
+    <div class='bg'>&nbsp;</div>
-               class="full no-text jump-bottom"
-               icon="caret-down"
-               label="topic.progress.go_bottom"}}
   </nav>
-{{/if}}
+{{/unless}}
-<nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" class="{{if hideProgress 'hidden'}}">
-  <div class='nums'>
-    <h4>{{progressPosition}}</h4><span class="{{if hugeNumberOfPosts 'hidden'}}">
-    <span>/</span>
-    <h4>{{postStream.filteredPostsCount}}</h4></span>
-  </div>
-  <i class="fa {{unless expanded 'fa-sort'}}"></i>
-  <div class='bg'>&nbsp;</div>
-</nav>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -77,9 +77,11 @@
                              loading=model.postStream.loading
                              delegated=topicDelegated}}
           {{else}}
-            {{topic-progress topic=model delegated=topicDelegated}}
             {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
           {{/if}}
+
+          {{topic-progress topic=model delegated=topicDelegated}}
+
           {{conditional-loading-spinner condition=model.postStream.loadingAbove}}
 
           {{plugin-outlet "topic-above-posts"}}