Last active
December 11, 2015 07:43
-
-
Save endquote/0913a2380049b47dab1d to your computer and use it in GitHub Desktop.
Keyboard navigation for Instagram timeline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
A userscript to add keyboard shortcuts to the Instagram timeline: | |
- J or space to go to next image | |
- K to go to previous image | |
- L to toggle like on the current image | |
- N to load new posts | |
*/ | |
$(document.body).keypress(function(event) { | |
// ignore keypresses in comment fields | |
if(document.activeElement.tagName == 'INPUT') { | |
return; | |
} | |
// get the image currently at the top of the window | |
var current = null; | |
var items = $('article'); | |
items.each(function(index, element) { | |
if(!current && element.offsetTop + element.offsetHeight > document.body.scrollTop) { | |
current = $(element); | |
} | |
}); | |
if(!current) { | |
// something weird happened, or you're not on the timeline | |
return; | |
} | |
var key = String.fromCharCode(event.which).toUpperCase(); | |
if(key == 'N') { | |
// N for new posts | |
if($('.timelineTopPaginate').length) { | |
$('.timelineTopPaginate')[0].click(); | |
} else { | |
document.body.scrollTop = 0; | |
} | |
return; | |
} | |
if(key == 'L') { | |
// L for like | |
$('.timelineLikeButton', current.parents('.timelineItem'))[0].click(); | |
return; | |
} | |
// get the next or previous item | |
var target = null; | |
if(key == 'J' || key == ' ') { | |
// J or space for next | |
target = items[items.index(current) + 1]; | |
} else if(key == 'K') { | |
// K for back | |
target = items[items.index(current) - 1]; | |
} | |
if(!target) { | |
// you're at the beginning or end | |
return; | |
} | |
// scroll to the new item | |
event.preventDefault(); | |
document.body.scrollTop = target.offsetTop + $('nav')[0].offsetHeight; | |
if(items.index(target) == items.length - 2) { | |
// load more | |
$('a.-cx-PRIVATE-AutoloadingPostsGrid__moreLink')[0].click(); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment