Try to add 'j/k' shortcuts in the pager view

Very messy at the moment. Doesn't currently work because it needs to be
executed when the pager view becomes visible. Pager divs are created and
removed each time a message is opened.

Going to put this aside for now and try to focus on the index view. From
there, I should be able to figure out how to load in pager commands when
a message is selected.

5 files changed, 56 insertions, 3 deletions

diff --git a/src/gmail_selectors.ts b/src/gmail_selectors.ts
index 63f1242..337ba90 100644
--- a/src/gmail_selectors.ts
+++ b/src/gmail_selectors.ts
@@ -1,12 +1,35 @@
 export type GmailCSSClass = string;
-type GmailSelector = string;
+type GmailCSSSelector = string;
 
 export const TOOLS_PANEL: GmailCSSClass = 'bAw';
 export const SIDEBAR: GmailCSSClass = 'aeN';
 export const MESSAGE_PAGER: GmailCSSClass = 'AO';
 
-export const INDEX: GmailSelector = '.BltHke.nH.oy8Mbf[role="main"]';
-export const PAGER: GmailSelector = '.nH.g.id';
+export const INDEX: GmailCSSSelector = '.BltHke.nH.oy8Mbf[role="main"]';
+export const PAGER: GmailCSSSelector = '.nH.g.id';
+
+// export const PAGER_NEWER: GmailCSSSelector = 'div[aria-label="Newer"][role="button"]:not([aria-disabled="true"])';
+
+export const NEWER: GmailCSSSelector = 'div[aria-label="Newer"][role="button"]';
+export const OLDER: GmailCSSSelector = 'div[aria-label="Older"][role="button"]';
+
+export function PAGER_NEWER_EL(): HTMLElement {
+	return visible_element(document.querySelectorAll(NEWER)) as HTMLElement;
+};
+export function PAGER_OLDER_EL(): HTMLElement {
+	return visible_element(document.querySelectorAll(OLDER)) as HTMLElement;
+};
+
+function visible_element(elements: NodeListOf<Element>) {
+// https://stackoverflow.com/questions/13388616/firefox-query-selector-and-the-visible-pseudo-selector
+
+	elements = Array.prototype.slice.call(elements)
+		.filter(function(el, _) {
+			return el.style.display !== 'none';
+		});
+
+	return elements[0];
+};
 
 
 // Index:
diff --git a/src/index.ts b/src/index.ts
index dbb3b8a..22b720d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@
 
 import style from './style';
 import sidebar from './sidebar';
+import pager from './pager';
 
 var loading_view = document.getElementById('loading');
 
@@ -17,5 +18,6 @@ var initialize = window.setInterval(function() {
 
 		style();
 		sidebar();
+		pager();
 	}
 }, 500);
diff --git a/src/key_codes.ts b/src/key_codes.ts
index 2442f3c..c9cb87e 100644
--- a/src/key_codes.ts
+++ b/src/key_codes.ts
@@ -2,6 +2,8 @@ export type KeyCode = number;
 
 var key_codes: { [index: string]: KeyCode } = {
 	SLASH: 220,
+	J: 74,
+	K: 75,
 	M: 77
 };
 
diff --git a/src/pager/index.ts b/src/pager/index.ts
new file mode 100644
index 0000000..06e3b48
--- /dev/null
+++ b/src/pager/index.ts
@@ -0,0 +1,5 @@
+import next_previous from './next_previous';
+
+export default function init(): void {
+	next_previous();
+};
diff --git a/src/pager/next_previous.ts b/src/pager/next_previous.ts
new file mode 100644
index 0000000..54a12d1
--- /dev/null
+++ b/src/pager/next_previous.ts
@@ -0,0 +1,21 @@
+import { PAGER_NEWER_EL, PAGER_OLDER_EL } from '../gmail_selectors';
+import key_codes from '../key_codes';
+
+export default function(): void {
+	/* var pager = document.querySelector(PAGER); */
+
+	// TODO: Needs to be loaded when pager becomes visible.
+	document.addEventListener('keydown', function(e: KeyboardEvent) {
+		if (e.keyCode === key_codes.J) {
+			console.log(PAGER_OLDER_EL());
+			PAGER_OLDER_EL().click();
+		}
+		else if (e.keyCode === key_codes.K) {
+			console.log(PAGER_NEWER_EL());
+			PAGER_NEWER_EL().click();
+		}
+	});
+};
+
+/* document.querySelectorAll('div[aria-label="Newer"][role="button"]') */
+/* document.querySelectorAll('div[aria-label="Older"][role="button"]') */