Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add J and K to navigate between listed gems #410

Closed
wants to merge 2 commits into from

4 participants

@iain

Just as Google Reader and many other apps, use J to move the selection down, K to move the selection up and press enter to go to the page of the gem.

I would've liked to write unit tests for this, but there is nothing setup for this. Maybe time to use the asset pipeline and throw in something like Jasmine/evergreen?

PS. There is a lot of commented out code in application.js. What should we do with this?

@cmeiklejohn
Collaborator

I like the jasmine idea, and you could do that regardless of the asset pipeline inclusion. We're still working on getting the rails 3.1 thing sorted so that's probably the best route.

@cmeiklejohn
Collaborator

Regarding commented code: remove it, but do it in a separate pull request.

@iain

Ok, will do.

@iain iain Merge branch 'master' into keyboard-access
Conflicts:
	public/javascripts/application.js
677d2ac
@adkron

I think it would be better to fire the click event on the anchor so that future event hooks are still fired when using this methor or by clicking the link.

@adkron adkron commented on the diff
public/javascripts/keyboard.js
((13 lines not shown))
+
+ var selectPreviousGem = function() {
+ selectedGemIndex--;
+ if (selectedGemIndex < 0) {
+ selectedGemIndex = gems.length - 1;
+ }
+ highlightSelectedGem();
+ }
+
+ var highlightSelectedGem = function() {
+ gems.removeClass("selected");
+ findSelectedGem().addClass("selected");
+ }
+
+ var visitSelectedGem = function() {
+ window.location = findSelectedGem().find("a").attr("href");
@adkron Collaborator
adkron added a note

This should be changed to fire the click event on the anchor tag. This would ensure that any events that are fired by clicking would also be fired by this method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@qrush
Owner

We don't need this.

@qrush qrush closed this
@qrush
Owner

Sorry if this sounds rude.

Rubygems.org isn't really a feed reader. If someone wants to build something like this with vim shortcuts on top of our API, then go for it. But on the site...we really don't need shortcuts and all in place.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 14, 2012
  1. @iain
Commits on Mar 15, 2012
  1. @iain

    Merge branch 'master' into keyboard-access

    iain authored
    Conflicts:
    	public/javascripts/application.js
This page is out of date. Refresh to see the latest.
View
2  app/views/layouts/application.html.erb
@@ -118,7 +118,7 @@
</ul>
</div>
</div>
- <%= javascript_include_tag "jquery.min", "jquery.easing.1.3", "jquery.color", "jquery_ujs", "announcements", "application", :cache => true %>
+ <%= javascript_include_tag "jquery.min", "jquery.easing.1.3", "jquery.color", "jquery_ujs", "announcements", "application", "keyboard", :cache => true %>
<%= yield :javascript %>
<script type="text/javascript">
var _gauges = _gauges || [];
View
10 public/javascripts/application.js
@@ -5,16 +5,6 @@ $(document).ready(function() {
});
}
- $(document).bind('keyup', function(event) {
- if ($(event.target).is(':input')) {
- return;
- }
-
- if (event.which == 83) {
- $('#query').focus();
- }
- });
-
$('#version_for_stats').change(function() {
window.location.href = $(this).val();
});
View
53 public/javascripts/keyboard.js
@@ -0,0 +1,53 @@
+$(function() {
+
+ var selectedGemIndex = -1;
+ var gems = $(".gems ol li");
+
+ var selectNextGem = function() {
+ selectedGemIndex++;
+ if (selectedGemIndex >= gems.length) {
+ selectedGemIndex = 0;
+ }
+ highlightSelectedGem();
+ }
+
+ var selectPreviousGem = function() {
+ selectedGemIndex--;
+ if (selectedGemIndex < 0) {
+ selectedGemIndex = gems.length - 1;
+ }
+ highlightSelectedGem();
+ }
+
+ var highlightSelectedGem = function() {
+ gems.removeClass("selected");
+ findSelectedGem().addClass("selected");
+ }
+
+ var visitSelectedGem = function() {
+ window.location = findSelectedGem().find("a").attr("href");
@adkron Collaborator
adkron added a note

This should be changed to fire the click event on the anchor tag. This would ensure that any events that are fired by clicking would also be fired by this method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }
+
+ var findSelectedGem = function() {
+ return $(gems[selectedGemIndex]);
+ }
+
+ $(document).bind('keyup', function(event) {
+
+ if ($(event.target).is(':input')) {
+ return;
+ }
+
+ if (event.which == 83) { // s
+ $('#query').focus();
+ } else if (event.which == 74) { // j
+ selectNextGem();
+ } else if (event.which == 75) { // k
+ selectPreviousGem();
+ } else if (event.which == 13) { // <return>
+ visitSelectedGem();
+ }
+
+ });
+
+});
View
4 public/stylesheets/screen.css
@@ -824,7 +824,7 @@ table {
border: none;
}
-.main .info .gems ol li:hover {
+.main .info .gems ol li:hover, .main .info .gems ol li.selected {
background: #fff url('/images/bullet-directory.png') no-repeat 10px 14px;
}
@@ -850,7 +850,7 @@ table {
margin-right: 5px;
}
-.main .info .gems ol li a:hover strong {
+.main .info .gems ol li a:hover strong, .main .info .gems ol li.selected a strong {
color: #8F0B0B;
}
Something went wrong with that request. Please try again.