Merge branch 'pagenation-and-navigation'

README.md

@@ -38,8 +38,9 @@ Firefox by WebExtensions API.
   - [ ] find a keyword in the page
 - [ ] navigations
   - [ ] yank/paste page
-  - [ ] pagenation
-  - [ ] open parent page
+  - [x] pagenation
+  - [x] open parent page
+  - [x] open root page
 - [ ] hints
   - [x] open a link
   - [ ] open a link in new tab

src/background/keys.js

@@ -28,8 +28,12 @@ const defaultKeymap = {
   'zz': { type: operations.ZOOM_NEUTRAL },
   'f': { type: operations.FOLLOW_START, newTab: false },
   'F': { type: operations.FOLLOW_START, newTab: true },
-  'H': { type: operations.HISTORY_PREV },
-  'L': { type: operations.HISTORY_NEXT },
+  'H': { type: operations.NAVIGATE_HISTORY_PREV },
+  'L': { type: operations.NAVIGATE_HISTORY_NEXT },
+  '[[': { type: operations.NAVIGATE_LINK_PREV },
+  ']]': { type: operations.NAVIGATE_LINK_NEXT },
+  'gu': { type: operations.NAVIGATE_PARENT },
+  'gU': { type: operations.NAVIGATE_ROOT },
 };
 
 const asKeymapChars = (keys) => {

src/content/histories.js

@@ -1,8 +0,0 @@
-const prev = (win) => {
-  win.history.back();
-};
-const next = (win) => {
-  win.history.forward();
-};
-
-export { prev, next };

src/content/index.js

@@ -1,7 +1,7 @@
 import '../console/console-frame.scss';
 import * as consoleFrames from '../console/frames';
 import * as scrolls from '../content/scrolls';
-import * as histories from '../content/histories';
+import * as navigates from '../content/navigates';
 import Follow from '../content/follow';
 import operations from '../operations';
 import messages from '../messages';
@@ -15,7 +15,7 @@ window.addEventListener('keypress', (e) => {
   browser.runtime.sendMessage({
     type: messages.KEYDOWN,
     code: e.which,
-    ctrl: e.ctrl
+    ctrl: e.ctrlKey
   });
 });
 
@@ -35,10 +35,18 @@ const execOperation = (operation) => {
     return scrolls.scrollRight(window);
   case operations.FOLLOW_START:
     return new Follow(window.document, operation.newTab);
-  case operations.HISTORY_PREV:
-    return histories.prev(window);
-  case operations.HISTORY_NEXT:
-    return histories.next(window);
+  case operations.NAVIGATE_HISTORY_PREV:
+    return navigates.historyPrev(window);
+  case operations.NAVIGATE_HISTORY_NEXT:
+    return navigates.historyNext(window);
+  case operations.NAVIGATE_LINK_PREV:
+    return navigates.linkPrev(window);
+  case operations.NAVIGATE_LINK_NEXT:
+    return navigates.linkNext(window);
+  case operations.NAVIGATE_PARENT:
+    return navigates.parent(window);
+  case operations.NAVIGATE_ROOT:
+    return navigates.root(window);
   }
 };
 

src/content/navigates.js

@@ -0,0 +1,70 @@
+const PREV_LINK_PATTERNS = [
+  /\bprev\b/i, /\bprevious\b/i, /\bback\b/i,
+  /</, /\u2039/, /\u2190/, /\xab/, /\u226a/, /<</
+];
+const NEXT_LINK_PATTERNS = [
+  /\bnext\b/i,
+  />/, /\u203a/, /\u2192/, /\xbb/, /\u226b/, />>/
+];
+
+const findLinkByPatterns = (win, patterns) => {
+  let links = win.document.getElementsByTagName('a');
+  return Array.prototype.find.call(links, (link) => {
+    return patterns.some(ptn => ptn.test(link.textContent));
+  });
+};
+
+const historyPrev = (win) => {
+  win.history.back();
+};
+
+const historyNext = (win) => {
+  win.history.forward();
+};
+
+const linkPrev = (win) => {
+  let link = win.document.querySelector('a[rel=prev]');
+  if (link) {
+    return link.click();
+  }
+  link = findLinkByPatterns(win, PREV_LINK_PATTERNS);
+  if (link) {
+    link.click();
+  }
+};
+
+const linkNext = (win) => {
+  let link = win.document.querySelector('a[rel=next]');
+  if (link) {
+    return link.click();
+  }
+  link = findLinkByPatterns(win, NEXT_LINK_PATTERNS);
+  if (link) {
+    link.click();
+  }
+};
+
+const parent = (win) => {
+  let loc = win.location;
+  if (loc.hash !== '') {
+    loc.hash = '';
+    return;
+  } else if (loc.search !== '') {
+    loc.search = '';
+    return;
+  }
+
+  const basenamePattern = /\/[^/]+$/;
+  const lastDirPattern = /\/[^/]+\/$/;
+  if (basenamePattern.test(loc.pathname)) {
+    loc.pathname = loc.pathname.replace(basenamePattern, '/');
+  } else if (lastDirPattern.test(loc.pathname)) {
+    loc.pathname = loc.pathname.replace(lastDirPattern, '/');
+  }
+};
+
+const root = (win) => {
+  win.location = win.location.origin;
+};
+
+export { historyPrev, historyNext, linkPrev, linkNext, parent, root };

src/operations/index.js

@@ -11,8 +11,12 @@ export default {
   SCROLL_LEFT: 'scroll.left',
   SCROLL_RIGHT: 'scroll.right',
   FOLLOW_START: 'follow.start',
-  HISTORY_PREV: 'history.prev',
-  HISTORY_NEXT: 'history.next',
+  NAVIGATE_HISTORY_PREV: 'navigate.history.prev',
+  NAVIGATE_HISTORY_NEXT: 'navigate.history.next',
+  NAVIGATE_LINK_PREV: 'navigate.link.prev',
+  NAVIGATE_LINK_NEXT: 'navigate.link.next',
+  NAVIGATE_PARENT: 'navigate.parent',
+  NAVIGATE_ROOT: 'navigate.root',
 
   // Background
   TABS_CLOSE: 'tabs.close',

test/content/navigates.test.js

@@ -0,0 +1,56 @@
+import { expect } from "chai";
+import * as navigates from '../../src/content/navigates';
+
+describe('navigates module', () => {
+  describe('#linkPrev', () => {
+    it('clicks prev link by text content', (done) => {
+      document.body.innerHTML = '<a href="#dummy">xprevx</a>  <a href="#prev">go to prev</a>';
+      navigates.linkPrev(window);
+      setTimeout(() => {
+        expect(document.location.hash).to.equal('#prev');
+        done();
+      }, 0);
+    });
+
+    it('clicks a[rel=prev] element preferentially', (done) => {
+      document.body.innerHTML = '<a href="#dummy">prev</a>  <a rel="prev" href="#prev">rel</a>';
+      navigates.linkPrev(window);
+      setTimeout(() => {
+        expect(document.location.hash).to.equal('#prev');
+        done();
+      }, 0);
+    });
+  });
+
+
+  describe('#linkNext', () => {
+    it('clicks next link by text content', (done) => {
+      document.body.innerHTML = '<a href="#dummy">xnextx</a>  <a href="#next">go to next</a>';
+      navigates.linkNext(window);
+      setTimeout(() => {
+        expect(document.location.hash).to.equal('#next');
+        done();
+      }, 0);
+    });
+
+    it('clicks a[rel=next] element preferentially', (done) => {
+      document.body.innerHTML = '<a href="#dummy">next</a>  <a rel="next" href="#next">rel</a>';
+      navigates.linkNext(window);
+      setTimeout(() => {
+        expect(document.location.hash).to.equal('#next');
+        done();
+      }, 0);
+    });
+  });
+
+  describe('#parent', () => {
+    // NOTE: not able to test location
+    it('removes hash', () => {
+      window.location.hash = "#section-1";
+      navigates.parent(window);
+      expect(document.location.hash).to.be.empty;
+    });
+  });
+});
+
+