Merge branch 'stable' into develop

Changelog.md

@@ -123,6 +123,7 @@ and on a pod that received that data.
 * Guard against passing nil into person\_image\_tag [#6286](https://github.com/diaspora/diaspora/pull/6286)
 * Prevent Handlebars from messing up indentation of pre tags [#6339](https://github.com/diaspora/diaspora/pull/6339)
 * Fix pagination design on notifications page [#6364](https://github.com/diaspora/diaspora/pull/6364)
+* Improve handling of j/k hotkeys [#6462](https://github.com/diaspora/diaspora/pull/6462)
 
 ## Features
 

app/assets/javascripts/app/app.js

@@ -94,10 +94,18 @@ var app = {
 
     // there's probably a better way to do this...
     $(document).on("click", "a[rel=backbone]", function(evt){
+      if (!(app.stream && /^\/(?:stream|activity|aspects|public|mentions|likes)/.test(app.stream.basePath()))) {
+        // We aren't on a regular stream page
+        return;
+      }
+
       evt.preventDefault();
       var link = $(this);
-
+      if(link.data("stream-title") && link.data("stream-title").length) {
-      $(".stream_title").text(link.text());
+        $(".stream_title").text(link.data("stream-title"));
+      } else {
+        $(".stream_title").text(link.text());
+      }
       app.router.navigate(link.attr("href").substring(1) ,true);
     });
   },

app/assets/javascripts/app/router.js

@@ -107,6 +107,7 @@ app.Router = Backbone.Router.extend({
     app.stream.fetch();
     app.page = new app.views.Stream({model : app.stream});
     app.publisher = app.publisher || new app.views.Publisher({collection : app.stream.items});
+    app.shortcuts = app.shortcuts || new app.views.StreamShortcuts({el: $(document)});
 
     var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
 

app/assets/javascripts/app/views/stream/shortcuts.js

@@ -1,21 +1,11 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
-app.views.StreamShortcuts = {
+app.views.StreamShortcuts = Backbone.View.extend({
-
   _headerSize: 50,
 
-
+  events: {
-  setupShortcuts : function() {
+    "keydown": "_onHotkeyDown",
-    $(document).on('keydown', _.bind(this._onHotkeyDown, this));
+    "keyup": "_onHotkeyUp"
-    $(document).on('keyup', _.bind(this._onHotkeyUp, this));
-
-    this.on('hotkey:gotoNext', this.gotoNext, this);
-    this.on('hotkey:gotoPrev', this.gotoPrev, this);
-    this.on('hotkey:likeSelected', this.likeSelected, this);
-    this.on('hotkey:commentSelected', this.commentSelected, this);
-    this.on('hotkey:reshareSelected', this.reshareSelected, this);
-    this.on('hotkey:expandSelected', this.expandSelected, this);
-    this.on('hotkey:openFirstLinkSelected', this.openFirstLinkSelected, this);
   },
 
   _onHotkeyDown: function(event) {
@@ -28,10 +18,10 @@ app.views.StreamShortcuts = {
     // trigger the events based on what key was pressed
     switch (String.fromCharCode( event.which ).toLowerCase()) {
       case "j":
-        this.trigger('hotkey:gotoNext');
+        this.gotoNext();
         break;
       case "k":
-        this.trigger('hotkey:gotoPrev');
+        this.gotoPrev();
         break;
       default:
     }
@@ -47,19 +37,19 @@ app.views.StreamShortcuts = {
     // trigger the events based on what key was pressed
     switch (String.fromCharCode( event.which ).toLowerCase()) {
       case "c":
-        this.trigger('hotkey:commentSelected');
+        this.commentSelected();
         break;
       case "l":
-        this.trigger('hotkey:likeSelected');
+        this.likeSelected();
         break;
       case "r":
-        this.trigger('hotkey:reshareSelected');
+        this.reshareSelected();
         break;
       case "m":
-        this.trigger('hotkey:expandSelected');
+        this.expandSelected();
         break;
       case "o":
-        this.trigger('hotkey:openFirstLinkSelected');
+        this.openFirstLinkSelected();
         break;
       default:
     }
@@ -132,6 +122,5 @@ app.views.StreamShortcuts = {
     //add the selection and selected-class to new post
     element.className+=" shortcut_selected highlighted";
   },
-};
+});
 // @license-end
-

app/assets/javascripts/app/views/stream_view.js

@@ -1,9 +1,6 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
-//= require ./stream/shortcuts
+app.views.Stream = app.views.InfScroll.extend({
-
-app.views.Stream = app.views.InfScroll.extend(_.extend(
-  app.views.StreamShortcuts, {
 
   initialize: function() {
     this.stream = this.model;
@@ -13,7 +10,6 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
 
     this.setupNSFW();
     this.setupInfiniteScroll();
-    this.setupShortcuts();
     this.markNavSelected();
   },
 
@@ -32,5 +28,5 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
     streamSelection.find("[data-stream]").removeClass("selected");
     streamSelection.find("[data-stream='" + activeStream + "']").addClass("selected");
   }
-}));
+});
 // @license-end

app/assets/templates/header_tpl.jst.hbs

@@ -9,7 +9,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a href="/stream" class="navbar-brand">
+          <a href="/stream" class="navbar-brand" rel="backbone" data-stream-title="{{t "my_stream"}}">
             {{ podname }}
           </a>
           <ul class="nav nav-badges visible-sm visible-xs">
@@ -34,8 +34,8 @@
 
         <div class="collapse navbar-collapse" id="navbar-collapse">
           <ul class="nav navbar-nav navbar-left">
-            <li><a href="/stream">{{t "my_stream"}}</a></li>
+            <li><a href="/stream" rel="backbone">{{t "my_stream"}}</a></li>
-            <li><a href="/activity">{{t "my_activity"}}</a></li>
+            <li><a href="/activity" rel="backbone">{{t "my_activity"}}</a></li>
             <li class="visible-sm visible-xs"><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
           </ul>
 

features/desktop/keyboard_navigation.feature

@@ -22,6 +22,19 @@ Feature: Keyboard navigation
     Then post 2 should be highlighted
     And I close the publisher
 
+  Scenario: navigate downwards after changing the stream
+    When I go to the activity stream page
+    And I click on selector "[data-stream='stream'] a"
+    Then I should see "Stream" within ".stream_title"
+
+    When I press the "J" key somewhere
+    Then post 1 should be highlighted
+    And I should have navigated to the highlighted post
+
+    When I press the "J" key somewhere
+    Then post 2 should be highlighted
+    And I should have navigated to the highlighted post
+
   Scenario: navigate upwards
     When I scroll to post 3
     And I press the "K" key somewhere

spec/javascripts/app/views/stream/shortcuts_spec.js

@@ -6,25 +6,16 @@ describe("app.views.StreamShortcuts", function () {
 
     this.stream = new app.models.Stream();
     this.stream.add([this.post1, this.post2]);
-    this.view = new app.views.Stream({model : this.stream});
+    this.streamView = new app.views.Stream({model : this.stream});
+    spec.content().html(this.streamView.render().el);
+    this.view = new app.views.StreamShortcuts({el: $(document)});
 
-    this.view.render();
+    expect(spec.content().find("div.stream_element.loaded").length).toBe(2);
-    expect(this.view.$('div.stream_element.loaded').length).toBe(2);
-  });
-
-  describe("loading the stream", function(){
-    it("should setup the shortcuts", function(){
-      spyOn(this.view, 'setupShortcuts');
-      this.view.initialize();
-      expect(this.view.setupShortcuts).toHaveBeenCalled();
-    });
   });
 
   describe("pressing 'j'", function(){
-
     it("should call 'gotoNext' if not pressed in an input field", function(){
       spyOn(this.view, 'gotoNext');
-      this.view.initialize();
       var e = $.Event("keydown", { which: 74, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('j');
@@ -41,7 +32,6 @@ describe("app.views.StreamShortcuts", function () {
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'gotoNext');
       spyOn(this.view, 'selectPost');
-      this.view.initialize();
       var e = $.Event("keydown", { which: 74, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('j');
@@ -52,10 +42,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'k'", function(){
-
     it("should call 'gotoPrev' if not pressed in an input field", function(){
       spyOn(this.view, 'gotoPrev');
-      this.view.initialize();
       var e = $.Event("keydown", { which: 75, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('k');
@@ -72,7 +60,6 @@ describe("app.views.StreamShortcuts", function () {
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'gotoPrev');
       spyOn(this.view, 'selectPost');
-      this.view.initialize();
       var e = $.Event("keydown", { which: 75, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('k');
@@ -83,10 +70,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'c'", function(){
-
     it("should click on the comment-button if not pressed in an input field", function(){
       spyOn(this.view, 'commentSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 67, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('c');
@@ -96,7 +81,6 @@ describe("app.views.StreamShortcuts", function () {
 
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'commentSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 67, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('c');
@@ -106,10 +90,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'l'", function(){
-
     it("should click on the like-button if not pressed in an input field", function(){
       spyOn(this.view, 'likeSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 76, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('l');
@@ -119,7 +101,6 @@ describe("app.views.StreamShortcuts", function () {
 
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'likeSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 76, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('l');
@@ -129,10 +110,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'r'", function(){
-
     it("should click on the reshare-button if not pressed in an input field", function(){
       spyOn(this.view, 'reshareSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 82, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('r');
@@ -142,7 +121,6 @@ describe("app.views.StreamShortcuts", function () {
 
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'reshareSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 82, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('r');
@@ -152,10 +130,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'm'", function(){
-
     it("should click on the more-button if not pressed in an input field", function(){
       spyOn(this.view, 'expandSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 77, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('m');
@@ -165,7 +141,6 @@ describe("app.views.StreamShortcuts", function () {
 
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'expandSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 77, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('m');
@@ -175,10 +150,8 @@ describe("app.views.StreamShortcuts", function () {
   });
 
   describe("pressing 'o'", function(){
-
     it("should click on the more-button if not pressed in an input field", function(){
       spyOn(this.view, 'openFirstLinkSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 79, target: {type: "div"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('o');
@@ -188,7 +161,6 @@ describe("app.views.StreamShortcuts", function () {
 
     it("shouldn't do anything if the user types in an input field", function(){
       spyOn(this.view, 'openFirstLinkSelected');
-      this.view.initialize();
       var e = $.Event("keyup", { which: 79, target: {type: "textarea"} });
       //verify that the test is correct
       expect(String.fromCharCode( e.which ).toLowerCase()).toBe('o');