Skip to content

Instantly share code, notes, and snippets.

@endquote
Last active Dec 11, 2015
Embed
What would you like to do?
Keyboard navigation for Instagram timeline
/*
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