Skip to content
This repository was archived by the owner on Nov 4, 2025. It is now read-only.

Basic ranger-like keyboard navigation on website #4

Merged
merged 2 commits into from
Jul 10, 2018
Merged

Basic ranger-like keyboard navigation on website #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c28c913
highlight nav links on focus (along with hover)
tobanw Jul 8, 2018
f152cab
basic ranger-like menu navigation
tobanw Jul 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions changelog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/get-->
Expand Down Expand Up @@ -511,6 +510,15 @@ <h2>2010-06-09: Version 1.1.0</h2>
</ul>
<!--/run-->
<!--get foot from index.html-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
26 changes: 17 additions & 9 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/get-->
Expand Down Expand Up @@ -65,6 +64,15 @@ <h2>Donations</h2>
<li><b>Akin Fernandez</b>: "Ranger is the file manager we have been waiting for. It perfects an i3 setup." (2016-06-06)</li>
</ul>
<!--get foot from index.html-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
26 changes: 17 additions & 9 deletions documentation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/get-->
Expand Down Expand Up @@ -88,6 +87,15 @@ <h2>Dependencies</h2>
</ul>

<!--get foot from index.html-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
26 changes: 17 additions & 9 deletions download.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/get-->
Expand Down Expand Up @@ -127,6 +126,15 @@ <h2>Package Managers</h2>
</ul>

<!--get foot from index.html-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
26 changes: 17 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/head-->
Expand Down Expand Up @@ -116,6 +115,15 @@ <h1>Relocated website</h1>
<!-- /run -->
</div>
<!--foot-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
47 changes: 47 additions & 0 deletions keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
var navclass = "kbnav";

function kbNav(key) {

// convert HTMLCollection to array for indexing
var navlinks = [].slice.call(document.getElementsByClassName(navclass));
var navindex = -1; // initialize counter before the first post

var currentfocus = document.activeElement; // get current index of focused post

// get current post index
if ( currentfocus.className.includes(navclass) ) {
navindex = navlinks.indexOf(currentfocus);
}

// increment post index
if ( key === 'j' && navindex < navlinks.length - 1 ) {
navindex++;
} else if (key === 'k' && navindex > 0 ) {
navindex--;
} else if (key === 'g') {
navindex = 0;
} else if (key === 'G') {
navindex = navlinks.length - 1;
}

// move focus
navlinks[navindex].focus();
}

function kbLaunch() {
var currentfocus = document.activeElement; // get current index of focused post
// open focused link
if ( currentfocus.className.includes(navclass) ) {
window.location.href = currentfocus;
}

}

Mousetrap.bind({
'j': function() { kbNav('j'); },
'k': function() { kbNav('k'); },
'g g': function() { kbNav('g'); },
'G': function() { kbNav('G'); },
'l': function() { kbLaunch(); },
'g h': function() { window.location.href = "index.html"; }
})
26 changes: 17 additions & 9 deletions screenshots.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<script src="jquery2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="index">
<a href="index.html" class="ranger filetype_text tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text">contact.html</a>
<a href="documentation.html" class="ranger filetype_text">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link">github.link</a>
<a href="download.html" class="ranger filetype_targz">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link">wiki.html &nbsp; </a>
<a href="index.html" class="ranger filetype_text kbnav tagged">README.md</a>
<a href="changelog.html" class="ranger filetype_text kbnav">CHANGELOG.md</a>
<a href="contact.html" class="ranger filetype_text kbnav">contact.html</a>
<a href="documentation.html" class="ranger filetype_text kbnav">docs.html</a>
<a href="https://github.com/ranger/ranger" class="ranger filetype_link kbnav">github.link</a>
<a href="download.html" class="ranger filetype_targz kbnav">ranger.tar.gz</a>
<a href="screenshots.html" class="ranger filetype_image kbnav">screenshot.png</a>
<a href="https://github.com/ranger/ranger/wiki" class="ranger filetype_link kbnav">wiki.html &nbsp; </a>
</div>
<div class="content">
<!--/get-->
Expand All @@ -44,6 +43,15 @@ <h1>Screenshots</h1>
</p>

<!--get foot from index.html-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/plugins/bind-dictionary/mousetrap-bind-dictionary.min.js">
</script>
<script type="text/javascript"
src="keyboard.js">
</script>
</div>
</body>
</html>
Expand Down
10 changes: 5 additions & 5 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,35 +57,35 @@ code {
.filetype_image {
color: #ffbb00;
}
.filetype_image:hover {
.filetype_image:hover, .filetype_image:focus {
color: black;
background-color: #ffbb00;
}
.filetype_text {
color: white;
}
.filetype_text:hover {
.filetype_text:hover, .filetype_text:focus {
color: black;
background-color: white;
}
.filetype_directory {
color: #66f;
}
.filetype_directory:hover {
.filetype_directory:hover, .filetype_directory:focus {
color: black;
background-color: #66f;
}
.filetype_link {
color: #0CC;
}
.filetype_link:hover {
.filetype_link:hover, .filetype_link:focus {
color: black;
background-color: #0CC;
}
.filetype_targz {
color: #c44;
}
.filetype_targz:hover {
.filetype_targz:hover, .filetype_targz:focus {
color: black;
background-color: #c44;
}
Expand Down