diff options
Diffstat (limited to 'src/content')
-rw-r--r-- | src/content/actions/operation.js | 21 | ||||
-rw-r--r-- | src/content/components/common/follow.js | 16 | ||||
-rw-r--r-- | src/content/components/common/keymapper.js | 3 | ||||
-rw-r--r-- | src/content/components/top-content/follow-controller.js | 12 | ||||
-rw-r--r-- | src/content/navigates.js | 49 | ||||
-rw-r--r-- | src/content/scrolls.js | 163 | ||||
-rw-r--r-- | src/content/urls.js | 26 |
7 files changed, 217 insertions, 73 deletions
diff --git a/src/content/actions/operation.js b/src/content/actions/operation.js index 767f14b..b4b2e38 100644 --- a/src/content/actions/operation.js +++ b/src/content/actions/operation.js @@ -5,9 +5,12 @@ import * as navigates from 'content/navigates'; import * as urls from 'content/urls'; import * as consoleFrames from 'content/console-frames'; import * as addonActions from './addon'; +import * as properties from 'shared/settings/properties'; // eslint-disable-next-line complexity -const exec = (operation) => { +const exec = (operation, repeat, settings) => { + let smoothscroll = settings.properties.smoothscroll || + properties.defaults.smoothscroll; switch (operation.type) { case operations.ADDON_ENABLE: return addonActions.enable(); @@ -24,19 +27,19 @@ const exec = (operation) => { type: messages.FIND_PREV, }), '*'); case operations.SCROLL_VERTICALLY: - return scrolls.scrollVertically(window, operation.count); + return scrolls.scrollVertically(operation.count, smoothscroll, repeat); case operations.SCROLL_HORIZONALLY: - return scrolls.scrollHorizonally(window, operation.count); + return scrolls.scrollHorizonally(operation.count, smoothscroll, repeat); case operations.SCROLL_PAGES: - return scrolls.scrollPages(window, operation.count); + return scrolls.scrollPages(operation.count, smoothscroll, repeat); case operations.SCROLL_TOP: - return scrolls.scrollTop(window); + return scrolls.scrollTop(smoothscroll, repeat); case operations.SCROLL_BOTTOM: - return scrolls.scrollBottom(window); + return scrolls.scrollBottom(smoothscroll, repeat); case operations.SCROLL_HOME: - return scrolls.scrollHome(window); + return scrolls.scrollHome(smoothscroll, repeat); case operations.SCROLL_END: - return scrolls.scrollEnd(window); + return scrolls.scrollEnd(smoothscroll, repeat); case operations.FOLLOW_START: return window.top.postMessage(JSON.stringify({ type: messages.FOLLOW_START, @@ -60,6 +63,8 @@ const exec = (operation) => { type: messages.CONSOLE_SHOW_INFO, text: 'Current url yanked', }); + case operations.URLS_PASTE: + return urls.paste(window, operation.newTab ? operation.newTab : false); default: browser.runtime.sendMessage({ type: messages.BACKGROUND_OPERATION, diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 7717154..42dd897 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -30,6 +30,21 @@ const inViewport = (win, element, viewSize, framePosition) => { return true; }; +const isAriaHiddenOrAriaDisabled = (win, element) => { + if (!element || win.document.documentElement === element) { + return false; + } + for (let attr of ['aria-hidden', 'aria-disabled']) { + if (element.hasAttribute(attr)) { + let hidden = element.getAttribute(attr).toLowerCase(); + if (hidden === '' || hidden === 'true') { + return true; + } + } + } + return isAriaHiddenOrAriaDisabled(win, element.parentNode); +}; + export default class Follow { constructor(win, store) { this.win = win; @@ -171,6 +186,7 @@ export default class Follow { style.visibility !== 'hidden' && element.type !== 'hidden' && element.offsetHeight > 0 && + !isAriaHiddenOrAriaDisabled(win, element) && inViewport(win, element, viewSize, framePosition); }); return filtered; diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index fb8fabe..d9d1b2f 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -47,7 +47,8 @@ export default class KeymapperComponent { return true; } let operation = keymaps.get(matched[0]); - this.store.dispatch(operationActions.exec(operation)); + this.store.dispatch(operationActions.exec( + operation, key.repeat, state.setting)); this.store.dispatch(inputActions.clearKeys()); return true; } diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js index d373177..1e7f3cd 100644 --- a/src/content/components/top-content/follow-controller.js +++ b/src/content/components/top-content/follow-controller.js @@ -1,8 +1,7 @@ import * as followControllerActions from 'content/actions/follow-controller'; import messages from 'shared/messages'; import HintKeyProducer from 'content/hint-key-producer'; - -const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz'; +import * as properties from 'shared/settings/properties'; const broadcastMessage = (win, message) => { let json = JSON.stringify(message); @@ -84,7 +83,7 @@ export default class FollowController { this.store.dispatch(followControllerActions.backspace()); break; default: - if (DEFAULT_HINT_CHARSET.includes(key)) { + if (this.hintchars().includes(key)) { this.store.dispatch(followControllerActions.keyPress(key)); } break; @@ -93,7 +92,7 @@ export default class FollowController { } count() { - this.producer = new HintKeyProducer(DEFAULT_HINT_CHARSET); + this.producer = new HintKeyProducer(this.hintchars()); let doc = this.win.document; let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth; let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight; @@ -135,4 +134,9 @@ export default class FollowController { type: messages.FOLLOW_REMOVE_HINTS, }); } + + hintchars() { + return this.store.getState().setting.properties.hintchars || + properties.defaults.hintchars; + } } diff --git a/src/content/navigates.js b/src/content/navigates.js index 3e12a6f..c9baa30 100644 --- a/src/content/navigates.js +++ b/src/content/navigates.js @@ -1,18 +1,18 @@ -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) => { - const links = win.document.getElementsByTagName('a'); - return Array.prototype.find.call(links, (link) => { - return patterns.some(ptn => ptn.test(link.textContent)); - }); +const REL_PATTERN = { + prev: /^(?:prev(?:ious)?|older)\b|\u2039|\u2190|\xab|\u226a|<</i, + next: /^(?:next|newer)\b|\u203a|\u2192|\xbb|\u226b|>>/i, +}; + +// Return the last element in the document matching the supplied selector +// and the optional filter, or null if there are no matches. +const selectLast = (win, selector, filter) => { + let nodes = win.document.querySelectorAll(selector); + + if (filter) { + nodes = Array.from(nodes).filter(filter); + } + + return nodes.length ? nodes[nodes.length - 1] : null; }; const historyPrev = (win) => { @@ -23,16 +23,21 @@ const historyNext = (win) => { win.history.forward(); }; -const linkCommon = (win, rel, patterns) => { - let link = win.document.querySelector(`link[rel~=${rel}][href]`); +// Code common to linkPrev and linkNext which navigates to the specified page. +const linkRel = (win, rel) => { + let link = selectLast(win, `link[rel~=${rel}][href]`); if (link) { - win.location = link.getAttribute('href'); + win.location = link.href; return; } - link = win.document.querySelector(`a[rel~=${rel}]`) || - findLinkByPatterns(win, patterns); + const pattern = REL_PATTERN[rel]; + + link = selectLast(win, `a[rel~=${rel}][href]`) || + // `innerText` is much slower than `textContent`, but produces much better + // (i.e. less unexpected) results + selectLast(win, 'a[href]', lnk => pattern.test(lnk.innerText)); if (link) { link.click(); @@ -40,11 +45,11 @@ const linkCommon = (win, rel, patterns) => { }; const linkPrev = (win) => { - linkCommon(win, 'prev', PREV_LINK_PATTERNS); + linkRel(win, 'prev'); }; const linkNext = (win) => { - linkCommon(win, 'next', NEXT_LINK_PATTERNS); + linkRel(win, 'next'); }; const parent = (win) => { diff --git a/src/content/scrolls.js b/src/content/scrolls.js index ef38273..e8e9642 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -1,7 +1,11 @@ const SCROLL_DELTA_X = 48; const SCROLL_DELTA_Y = 48; +const SMOOTH_SCROLL_DURATION = 150; -const isVisible = (win, element) => { +// dirty way to store scrolling state on globally +let scrolling = [false]; + +const isVisible = (element) => { let rect = element.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) { return false; @@ -9,19 +13,19 @@ const isVisible = (win, element) => { if (rect.right < 0 && rect.bottom < 0) { return false; } - if (win.innerWidth < rect.left && win.innerHeight < rect.top) { + if (window.innerWidth < rect.left && window.innerHeight < rect.top) { return false; } - let { display, visibility } = win.getComputedStyle(element); + let { display, visibility } = window.getComputedStyle(element); if (display === 'none' || visibility === 'hidden') { return false; } return true; }; -const isScrollableStyle = (win, element) => { - let { overflowX, overflowY } = win.getComputedStyle(element); +const isScrollableStyle = (element) => { + let { overflowX, overflowY } = window.getComputedStyle(element); return !(overflowX !== 'scroll' && overflowX !== 'auto' && overflowY !== 'scroll' && overflowY !== 'auto'); }; @@ -35,15 +39,15 @@ const isOverflowed = (element) => { // this method is called by each scrolling, and the returned value of this // method is not cached. That does not cause performance issue because in the // most pages, the window is root element i,e, documentElement. -const findScrollable = (win, element) => { - if (isScrollableStyle(win, element) && isOverflowed(element)) { +const findScrollable = (element) => { + if (isScrollableStyle(element) && isOverflowed(element)) { return element; } let children = Array.prototype - .filter.call(element.children, e => isVisible(win, e)); + .filter.call(element.children, e => isVisible(e)); for (let child of children) { - let scrollable = findScrollable(win, child); + let scrollable = findScrollable(child); if (scrollable) { return scrollable; } @@ -51,68 +55,153 @@ const findScrollable = (win, element) => { return null; }; -const scrollTarget = (win) => { - if (isOverflowed(win.document.documentElement)) { - return win.document.documentElement; +const scrollTarget = () => { + if (isOverflowed(window.document.documentElement)) { + return window.document.documentElement; } - if (isOverflowed(win.document.body)) { - return win.document.body; + if (isOverflowed(window.document.body)) { + return window.document.body; } - let target = findScrollable(win, win.document.documentElement); + let target = findScrollable(window.document.documentElement); if (target) { return target; } - return win.document.documentElement; + return window.document.documentElement; }; -const scrollVertically = (win, count) => { - let target = scrollTarget(win); +class SmoothScroller { + constructor(element, repeat) { + this.element = element; + this.repeat = repeat; + this.scrolling = scrolling; + if (repeat) { + this.easing = SmoothScroller.linearEasing; + } else { + this.easing = SmoothScroller.inOutQuadEasing; + } + } + + scroll(x, y) { + if (this.scrolling[0]) { + return; + } + scrolling[0] = true; + + this.startX = this.element.scrollLeft; + this.startY = this.element.scrollTop; + + this.targetX = x; + this.targetY = y; + this.distanceX = x - this.startX; + this.distanceY = y - this.startY; + this.timeStart = 0; + + window.requestAnimationFrame(this.loop.bind(this)); + } + + loop(time) { + if (!this.timeStart) { + this.timeStart = time; + } + + let elapsed = time - this.timeStart; + let v = this.easing(elapsed / SMOOTH_SCROLL_DURATION); + let nextX = this.startX + this.distanceX * v; + let nextY = this.startY + this.distanceY * v; + + window.scrollTo(nextX, nextY); + + if (elapsed < SMOOTH_SCROLL_DURATION) { + window.requestAnimationFrame(this.loop.bind(this)); + } else { + scrolling[0] = false; + this.element.scrollTo(this.targetX, this.targetY); + } + } + + static inOutQuadEasing(t) { + if (t < 1) { + return t * t; + } + return -(t - 1) * (t - 1) + 1; + } + + static linearEasing(t) { + return t; + } +} + +class RoughtScroller { + constructor(element) { + this.element = element; + } + + scroll(x, y) { + this.element.scrollTo(x, y); + } +} + +const scroller = (element, smooth, repeat) => { + if (smooth) { + return new SmoothScroller(element, repeat); + } + return new RoughtScroller(element); +}; + +const scrollVertically = (count, smooth, repeat) => { + let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollTop + SCROLL_DELTA_Y * count; - target.scrollTo(x, y); + if (repeat && smooth) { + y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + } + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollHorizonally = (win, count) => { - let target = scrollTarget(win); +const scrollHorizonally = (count, smooth, repeat) => { + let target = scrollTarget(); let x = target.scrollLeft + SCROLL_DELTA_X * count; let y = target.scrollTop; - target.scrollTo(x, y); + if (repeat && smooth) { + y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + } + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollPages = (win, count) => { - let target = scrollTarget(win); +const scrollPages = (count, smooth, repeat) => { + let target = scrollTarget(); let height = target.clientHeight; let x = target.scrollLeft; let y = target.scrollTop + height * count; - target.scrollTo(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollTop = (win) => { - let target = scrollTarget(win); +const scrollTop = (smooth, repeat) => { + let target = scrollTarget(); let x = target.scrollLeft; let y = 0; - target.scrollTo(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollBottom = (win) => { - let target = scrollTarget(win); +const scrollBottom = (smooth, repeat) => { + let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollHeight; - target.scrollTo(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollHome = (win) => { - let target = scrollTarget(win); +const scrollHome = (smooth, repeat) => { + let target = scrollTarget(); let x = 0; let y = target.scrollTop; - target.scrollTo(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollEnd = (win) => { - let target = scrollTarget(win); +const scrollEnd = (smooth, repeat) => { + let target = scrollTarget(); let x = target.scrollWidth; let y = target.scrollTop; - target.scrollTo(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; export { diff --git a/src/content/urls.js b/src/content/urls.js index 8f8a1ac..9b7b284 100644 --- a/src/content/urls.js +++ b/src/content/urls.js @@ -1,3 +1,5 @@ +import messages from 'shared/messages'; + const yank = (win) => { let input = win.document.createElement('input'); win.document.body.append(input); @@ -12,4 +14,26 @@ const yank = (win) => { input.remove(); }; -export { yank }; +const paste = (win, newTab) => { + let textarea = win.document.createElement('textarea'); + win.document.body.append(textarea); + + textarea.style.position = 'fixed'; + textarea.style.top = '-100px'; + textarea.contentEditable = 'true'; + textarea.focus(); + + if (win.document.execCommand('paste')) { + if (/^(https?|ftp):\/\//.test(textarea.textContent)) { + browser.runtime.sendMessage({ + type: messages.OPEN_URL, + url: textarea.textContent, + newTab: newTab ? newTab : false, + }); + } + } + + textarea.remove(); +}; + +export { yank, paste }; |