diff --git a/Changelog.md b/Changelog.md index 40c92aec0..725e1cc0d 100644 --- a/Changelog.md +++ b/Changelog.md @@ -34,6 +34,7 @@ * Show timestamp when hovering on comment time-ago string. [#4042](https://github.com/diaspora/diaspora/issues/4042) * If sharing a post with photos to Facebook, always include URL to post [#3706](https://github.com/diaspora/diaspora/issues/3706) * Add multiphoto for mobile post. [#4065](https://github.com/diaspora/diaspora/issues/4065) +* Add hotkeys to navigate in stream [#4089](https://github.com/diaspora/diaspora/pull/4089) # 0.0.3.4 diff --git a/app/assets/javascripts/app/views/stream/shortcuts.js b/app/assets/javascripts/app/views/stream/shortcuts.js new file mode 100644 index 000000000..1df9c729f --- /dev/null +++ b/app/assets/javascripts/app/views/stream/shortcuts.js @@ -0,0 +1,108 @@ +app.views.StreamShortcuts = { + + _headerSize: 50, + _borderStyle: "3px solid rgb(63, 143, 186)", + + + setupShortcuts : function() { + $(document).on('keydown', _.bind(this._onHotkeyDown, this)); + $(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); + }, + + _onHotkeyDown: function(event) { + //make sure that the user is not typing in an input field + var textAcceptingInputTypes = ["textarea", "select", "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color"]; + if(jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1){ + return; + } + + // trigger the events based on what key was pressed + switch (String.fromCharCode( event.which ).toLowerCase()) { + case "j": + this.trigger('hotkey:gotoNext'); + break; + case "k": + this.trigger('hotkey:gotoPrev'); + break; + default: + } + }, + + _onHotkeyUp: function(event) { + //make sure that the user is not typing in an input field + var textAcceptingInputTypes = ["textarea", "select", "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color"]; + if(jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1){ + return; + } + + // trigger the events based on what key was pressed + switch (String.fromCharCode( event.which ).toLowerCase()) { + case "c": + this.trigger('hotkey:commentSelected'); + break; + case "l": + this.trigger('hotkey:likeSelected'); + break; + default: + } + }, + + gotoNext: function() { + // select next post: take the first post under the header + var stream_elements = this.$('div.stream_element.loaded'); + var posUser = window.pageYOffset; + + for (var i = 0; i < stream_elements.length; i++) { + if(stream_elements[i].offsetTop>posUser+this._headerSize){ + this.selectPost(stream_elements[i]); + return; + } + } + // standard: last post + if(stream_elements[stream_elements.length-1]){ + this.selectPost(stream_elements[stream_elements.length-1]); + } + }, + + gotoPrev: function() { + // select previous post: take the first post above the header + var stream_elements = this.$('div.stream_element.loaded'); + var posUser = window.pageYOffset; + + for (var i = stream_elements.length-1; i >=0; i--) { + if(stream_elements[i].offsetTop