diff --git a/css/options.css b/css/options.css new file mode 100644 index 0000000..a20b109 --- /dev/null +++ b/css/options.css @@ -0,0 +1,204 @@ +html * { + box-sizing: border-box; +} + +body { + background: black; + color: #fafafa; + margin: 0px !important; +} + +@media only screen and (max-width: 730px) { + body { + padding: 10px; + } +} + +h1, +h2 { + color: #fafafa; + font-family: system-ui; + font-weight: 500; +} + +h1 { + font-size: 30px; +} + +h2 { + font-size: 18px; +} + +.title { + padding: 15px 0 2px 0; + text-align: center; + margin-bottom: -20px; +} + +.title-area { + display: flex; + justify-content: space-between; + position: relative; + max-width: 700px; + margin: 20px auto 2px auto; +} + +.setting-area { + padding-left: 10px; +} + +.card { + padding: 12px 18px; + background-color: #171b1f; + border: 1px solid #3e4852; + border-radius: 5px; + font-family: system-ui; + max-width: 700px; + margin: 0 auto 20px auto; +} + +.setting { + display: flex; + justify-content: space-between; + padding: 1px; + font-size: 12px; + font-weight: 400; + position: relative; + flex-wrap: wrap; +} + +.setting-description { + margin: auto 0; +} + +.btn { + background-color: rgb(42, 52, 61); + border: 1px solid #3e4852; + border-radius: 3px; + box-sizing: border-box; + display: inline-block; + position: relative; + height: 30px; + cursor: pointer; +} + +hr { + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid #3e4852; + box-sizing: content-box; + height: 0; + overflow: visible; +} + +.close { + margin: 6px 3px; + font-family: "Segoe UI", system-ui, sans-serif; + display: inline-block; + vertical-align: middle; + animation: pop 16ms linear; + width: 18px; + height: 18px; + border-radius: 1px; + background-color: rgba(0, 0, 0, 0); + opacity: 1; + border: 0; + padding: 0; + fill: #fafafa; +} + +.close:hover { + fill: red; + background-color: rgba(0, 0, 0, 0.3); +} + +.btn-text { + display: inline-block; + align-items: center; + vertical-align: middle; + margin: 6px 10px; +} + +.hotkeys .btn-text { + margin-right: 0; +} + +.btn-hov:hover { + background-color: #3e4852; +} + +.btn-enter { + background-color: #00b1e2; +} + +.reset-area { + display: flex; + justify-content: center; + position: relative; + margin: 50px 0; +} + +.reset { + font-size: 12px; + font-weight: 400; + background-color: rgb(202, 74, 74); +} + +.reset:hover { + background-color: rgb(148, 54, 54); +} + +.info { + color: #00b1e2; + position: relative; + display: inline-block; + margin-left: 4px; +} + +.info .info-content { + visibility: hidden; + width: max-content; + max-width: 450px; + background-color: rgb(44, 44, 44); + border: 1px solid rgb(1, 140, 179); + color: #fff; + padding: 5px 8px; + border-radius: 6px; + display: inline-block; + font-style: normal; + + /* Positioning the tooltip */ + position: absolute; + z-index: 1; + top: -5px; + left: 105%; +} + +.info-content img { + margin-top: 6px; + max-width: 432px; +} + +/* Show the tooltip when the mouse hovers the tooltip container */ +.info:hover .info-content { + visibility: visible; +} + +.options-container { + margin: 30px 0 15px 0; + width: 100%; + text-align: center; +} + +.options-container input[type="radio"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} + +.options-container img { + height: 200px; + border-radius: 8px; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); +} diff --git a/dist/raw/icon.png b/img/icon.png old mode 100755 new mode 100644 similarity index 100% rename from dist/raw/icon.png rename to img/icon.png diff --git a/js/background.js b/js/background.js new file mode 100644 index 0000000..9cd6c80 --- /dev/null +++ b/js/background.js @@ -0,0 +1,46 @@ +chrome.runtime.onInstalled.addListener(function () { + let settings = { + hotkeys: { + codes: { + navUp: ["w"], + navLeft: ["a"], + navDown: ["s"], + navRight: ["d"], + expand: ["e"], + contract: ["shift", "e"], + quit: ["q"], + click: ["enter"], + shiftClick: ["shift", "enter"], + controlClick: ["control", "enter"], + disableKeys: ["control", "shift", "x"], + }, + }, + }; + + chrome.storage.local.set({ "extension-settings": settings }, function () { + console.log("Initial setting set..."); + }); +}); + +chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { + if (msg.from === "content" && msg.subject === "changeIcon") { + // let canvas = document.getElementById("icon-making-canvas"); + // if (!canvas) { + // canvas = document.createElement("CANVAS"); + // canvas.id = "icon-making-canvas"; + // canvas.width = canvas.height = 16; + // } + // let ctx = canvas.getContext("2d"); + // ctx.beginPath(); + // ctx.rect(0, 0, 16, 16); + // ctx.fillStyle = "red"; + // ctx.fill(); + // ctx.fillStyle = "white"; + // ctx.textAlign = "center"; + // ctx.textBaseline = "middle"; + // fitTextOnCanvas(ctx, msg.speed, "Roboto Condensed", 9, canvas.width); + // let imgData = ctx.getImageData(0, 0, 16, 16); + // chrome.pageAction.setIcon({ imageData: imgData, tabId: sender.tab.id }); + } + return Promise.resolve("Dummy response to keep the console quiet"); +}); diff --git a/js/options.js b/js/options.js new file mode 100644 index 0000000..fd80170 --- /dev/null +++ b/js/options.js @@ -0,0 +1,159 @@ +var SETTINGS_FULL; +var HOTKEY_CODES; + +function getSettings(callback) { + chrome.storage.local.get(["extension-settings"], function (result) { + SETTINGS_FULL = result["extension-settings"]; + HOTKEY_CODES = SETTINGS_FULL.hotkeys.codes; + console.log(HOTKEY_CODES); + if (callback instanceof Function) { + callback(); + } + }); +} + +function populateFields() { + let hotkeyDivs = document.querySelectorAll(".setting[data-type='shortcut']"); + hotkeyDivs.forEach((hotkeyDiv) => { + setHotkeyBtn(hotkeyDiv); + }); +} + +function enterNewHotkey(event) { + let element = event.currentTarget; + element.removeEventListener("click", enterNewHotkey); + element.setAttribute("class", "btn btn-enter"); + let textArea = element.children[0]; + textArea.innerHTML = ` + Enter the shortcut + `; + + let keysDown = new Set(); + let keysFinal; + window.addEventListener("keydown", keyPress); + window.addEventListener("keyup", keyRelease); + + function keyPress(e) { + e.preventDefault(); + e.stopPropagation(); + + // hitting escape cancels input + if (e.key.toLowerCase() === "escape") { + window.removeEventListener("keydown", keyPress); + window.removeEventListener("keyup", keyRelease); + setHotkeyBtn(element.parentNode); + } + keysDown.add(e.key.toLowerCase(), keysDown.size); + console.log(keysDown); + textArea.innerHTML = formateHotkeys(keysDown); + keysFinal = new Set(keysDown); + } + function keyRelease(e) { + keysDown.delete(e.key.toLowerCase()); + + // once no more keys are pressed, the final combo is recorded + if (keysDown.size === 0) { + window.removeEventListener("keydown", keyPress); + window.removeEventListener("keyup", keyRelease); + // setHotkeyBtn(element.parentNode); + updateHotkey(element, [...keysFinal]); + } + } +} + +function updateHotkey(element, newVal) { + let parentSection = element.parentNode; + parentSection.removeChild(element); + let newSettings = SETTINGS_FULL; + newSettings.hotkeys.codes[parentSection.id] = newVal; + chrome.storage.local.set({ "extension-settings": newSettings }, function () { + setHotkeyBtn(parentSection); + // TODO: Send message to content scripts that settings updated + }); +} + +function formateHotkeys(set1) { + let replaceTable = { + Control: "Ctrl", + Arrowup: "↑", + Arrowright: "→", + Arrowdown: "↓", + Arrowleft: "←", + " ": " Space", + Pageup: "PgUp", + Pagedown: "PgDn", + Delete: "Del", + }; + + let keyString = [...set1].map((c) => c.slice(0, 1).toUpperCase() + c.slice(1).toLowerCase()).join(" + "); + keyString = keyString.replace( + /Control|Arrowup|Arrowright|Arrowdown|Arrowleft|\s\s|Pageup|Pagedown|Delete/g, + function (match) { + return replaceTable[match]; + } + ); + keyString = keyString === " " ? "Space" : keyString; + + return keyString; +} + +function setHotkeyBtn(element) { + let el = document.createElement("div"); + // TODO: Check if hotkey combo in storage + + // if in storage print stored combo + if (HOTKEY_CODES[element.id].length !== 0) { + console.log(element.id); + // delete previous btn + let old = document.getElementById(element.id + "-hotkey"); + if (old !== null && element.parentNode) { + old.parentNode.removeChild(old); + } + el.setAttribute("id", element.id + "-hotkey"); + el.setAttribute("class", "btn hotkeys"); + el.innerHTML = ` + + ${formateHotkeys(new Set(HOTKEY_CODES[element.id]))} + + + `; + el.getElementsByClassName("close")[0].addEventListener( + "click", + (deleteHotkey = function () { + updateHotkey(el, []); + }) + ); + element.appendChild(el); + } else { + // delete any previous btn + let old = document.getElementById(element.id + "-btn"); + if (old !== null && element.parentNode) { + old.parentNode.removeChild(old); + } + + el.setAttribute("id", element.id + "-btn"); + el.setAttribute("class", "btn btn-hov"); + el.innerHTML = ` + + Click to type a new shortcut + + `; + // Add listner for new hotkey input + el.addEventListener("click", enterNewHotkey); + element.appendChild(el); + } +} + +getSettings(function () { + // once the DOM is ready file in all settings info + let stateCheck = setInterval(() => { + if (document.readyState === "complete") { + clearInterval(stateCheck); + populateFields(); + } + }, 100); +}); diff --git a/dist/raw/spatial-navigation.js b/js/spatial-navigation.js old mode 100755 new mode 100644 similarity index 97% rename from dist/raw/spatial-navigation.js rename to js/spatial-navigation.js index 92b9cc5..259deb6 --- a/dist/raw/spatial-navigation.js +++ b/js/spatial-navigation.js @@ -1,18 +1,18 @@ -/** - * - * spatial-navigation - * - * @name spatial-navigation - * @version 0.4.7 - * --- - * @author falsandtru https://github.com/falsandtru/spatial-navigation - * @copyright 2015, falsandtru - * @license MIT - * - */ - -!new function(NAME, VERSION) { -"use strict"; +/** + * + * spatial-navigation + * + * @name spatial-navigation + * @version 0.4.7 + * --- + * @author falsandtru https://github.com/falsandtru/spatial-navigation + * @copyright 2015, falsandtru + * @license MIT + * + */ + +!new function(NAME, VERSION) { +"use strict"; (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 0; }) - .reduce(function (_, group) { return group; }, findLeftTops(targets)) - .map(shiftVisibleImg) - .sort(compareLeftTopDistance); - } - function findLeftColumn(targets) { - var mainColumn = findMainColumn(targets); - var left = mainColumn.length > 0 ? mainColumn[0].parentElement.getBoundingClientRect().left : Infinity; - return columns(targets.filter(function (target) { return target.getBoundingClientRect().right < left; })) - .map(function (group) { return group.filter(isInWindow); }) - .filter(function (group) { return group.length > 0; }) - .sort(compareGroupsByTextWeightAverage) - .reduce(function (_, group) { return group; }, mainColumn) - .map(shiftVisibleImg) - .sort(compareLeftTopDistance); - } - function findRightColumn(targets) { - var mainColumn = findMainColumn(targets); - var right = mainColumn.length > 0 ? mainColumn[0].parentElement.getBoundingClientRect().right : -Infinity; - return columns(targets.filter(function (target) { return target.getBoundingClientRect().left > right; })) - .map(function (group) { return group.filter(isInWindow); }) - .filter(function (group) { return group.length > 0; }) - .sort(compareGroupsByTextWeightAverage) - .reduce(function (_, group) { return group; }, mainColumn) - .map(shiftVisibleImg) - .sort(compareLeftTopDistance); - } - function findCursorTops(targets, cursor) { - var margin = 3; - return targets - .map(shiftVisibleImg) - .filter(isInRange(Math.max(winTop - (winHeight * 3), 0), winLeft, winLeft + winWidth, Offset(cursor).top + margin)) - .sort(compareCursorVerticalDistance(cursor)); - } - function findCursorBottoms(targets, cursor) { - var margin = 3; - return targets - .map(shiftVisibleImg) - .filter(isInRange(Offset(cursor).bottom - margin, winLeft, winLeft + winWidth, winTop + (winHeight * 4))) - .sort(compareCursorVerticalDistance(cursor)); - } - function findCursorLefts(targets, cursor) { - var margin = 3; - return targets - .map(shiftVisibleImg) - .filter(isInRange(winTop, 0, Offset(cursor).left + margin, winTop + winHeight)) - .sort(compareCursorLeftDistance(cursor)); - } - function findCursorRights(targets, cursor) { - var margin = 3; - return targets - .map(shiftVisibleImg) - .filter(isInRange(winTop, Offset(cursor).right - margin, Infinity, winTop + winHeight)) - .sort(compareCursorRightDistance(cursor)); - } - function findCursorNeerTargets(targets, cursor) { - return targets - .map(shiftVisibleImg) - .filter(isInWindow) - .sort(compareCursorDistance(cursor)); - } - function findCursorColumn(targets, cursor) { - var left = cursor.getBoundingClientRect().left; - return columns(targets.filter(isCursorColumn).filter(hasVisibleTextNode)) - .reduce(function (_, group) { return group; }, targets) - .map(shiftVisibleImg) - .sort(function (a, b) { return compareGroupsByTextWeightAverage([b], [a]) || compareLeftTopDistance(a, b); }); - function isCursorColumn(elem) { - return elem.getBoundingClientRect().left === left; - } - } - function isCursorActive(cursor) { - var rect = cursor && cursor.getBoundingClientRect(); - return !(!rect || - rect.bottom < 0 || - rect.top > winHeight || - rect.right < 0 || - rect.left > winWidth); - } - function columns(targets) { - return targets - .sort(compareLeftDistance) - .reduce(groupsByLeftDistance, []) - .map(filterFewNodesGroup) - .filter(function (group) { return group.length > 1; }); - } - function groupsByLeftDistance(groups, elem) { - if (groups.length === 0) { - return [[elem]]; - } - var group = groups.slice(-1)[0]; - return isSameGroup(group, elem) ? groups.slice(0, -1).concat([group.concat(elem)]) : groups.concat([[elem]]); - function isSameGroup(group, elem) { - return Math.floor(group[0].getBoundingClientRect().left) === Math.floor(elem.getBoundingClientRect().left); - } - } - function compareGroupsByTextWeightAverage(a, b) { - return calWeightAverage(a.filter(hasText).slice(0, 10)) - calWeightAverage(b.filter(hasText).slice(0, 10)) - || -compareLeftDistance(a[0], b[0]); - function calWeightAverage(elems) { - return calTextWeightAverage(elems); - } - function calTextWeightAverage(elems) { - return elems.length === 0 - ? 0 - : elems.reduce(function (r, elem) { return r + calTextWeight(elem); }, 0) / elems.length * (Math.min(elems.length, 10) / 10 + 0.5); - } - function calTextWeight(elem) { - var fontSize = parseInt(window.getComputedStyle(elem).fontSize, 10) - || parseInt(window.getComputedStyle(document.documentElement).fontSize, 10) - || 16, fullTextNodeParents = findVisibleTextNodes(elem) - .map(function (text) { return text.parentElement; }), fontWeightAverage = calFontWeightRateAverage(fullTextNodeParents), length = fullTextNodeParents - .reduce(function (r, elem) { return r + elem.textContent.trim().length; }, 0); - return fontSize * fontWeightAverage * +(length > 3); - } - function calFontWeightRateAverage(textNodeParents) { - //const sum = textNodeParents.reduce((r, elem) => r + elem.textContent.trim().length * calFontWeightRate(elem), 0), - // len = textNodeParents.reduce((r, elem) => r + elem.textContent.trim().length, 0); - //return len === 0 ? 0 : sum / len; - return textNodeParents - .sort(function (a, b) { return a.textContent.trim().length - b.textContent.trim().length; }) - .slice(-1) - .map(function (elem) { return calFontWeightRate(elem); }) - .pop(); - } - function calFontWeightRate(elem) { - var fontWeight = window.getComputedStyle(elem).fontWeight; - var weight; - switch (fontWeight) { - case 'normal': - weight = 400; - break; - case 'bold': - weight = 700; - break; - default: - weight = parseInt(fontWeight, 10); - } - return 1 + ((weight / 400 - 1) / 3); - } - } - function filterFewNodesGroup(group) { - return groupsByNodeDistanceFromRoot(group) - .filter(function (group) { return group.length > 1; }) - .reduce(function (r, group) { return r.concat(group); }, []); - } - function groupsByNodeDistanceFromRoot(group) { - return group - .sort(compareByNodeDistanceFromRoot) - .reduce(function (r, elem) { return r.length === 0 ? [[elem]] - : compareByNodeDistanceFromRoot(r[0][0], elem) === 0 ? [[elem].concat(r[0])].concat(r.slice(1)) - : [[elem]].concat(r); }, []); - } - function compareByNodeDistanceFromRoot(a, b) { - return countNodeDistanceFromRoot(a) - countNodeDistanceFromRoot(b); - function countNodeDistanceFromRoot(elem) { - var count = 0, parent = elem; - while (parent = parent.parentElement) { - ++count; - } - return count; - } - } - function compareLeftDistance(a, b) { - return Math.floor(a.getBoundingClientRect().left) - Math.floor(b.getBoundingClientRect().left); - } - function compareLeftTopDistance(a, b) { - return distance(a) - distance(b); - function distance(elem) { - var rect = elem.getBoundingClientRect(); - return Math.floor(rect.left - + rect.top * 5); - } - } - function compareCursorDistance(cursor) { - var weight = 10; - var cursorOffset = Offset(cursor); - return function (a, b) { - return distance(a) - distance(b); - }; - function distance(elem) { - var targetOffset = Offset(elem); - return Math.floor(Math.abs(targetOffset.left - cursorOffset.left) - + Math.abs(targetOffset.top - cursorOffset.top) * weight); - } - } - function compareCursorVerticalDistance(cursor) { - var weight = 3; - var cursorOffset = Offset(cursor); - return function (a, b) { - return distance(a) - distance(b); - }; - function distance(elem) { - var targetOffset = Offset(elem), hdistance = targetOffset.left <= cursorOffset.left && cursorOffset.left <= targetOffset.right - ? 0 - : targetOffset.left - cursorOffset.left; - return Math.floor(Math.abs(hdistance) * weight - + Math.abs(targetOffset.top - cursorOffset.top)); - } - } - function compareCursorLeftDistance(cursor) { - var weight = 5; - var cursorOffset = Offset(cursor); - return function (a, b) { - return distance(a) - distance(b); - }; - function distance(elem) { - var targetOffset = Offset(elem); - return Math.floor(Math.abs(targetOffset.right - cursorOffset.left) - + Math.abs(targetOffset.top - cursorOffset.top) * weight); - } - } - function compareCursorRightDistance(cursor) { - var weight = 5; - var cursorOffset = Offset(cursor); - return function (a, b) { - return distance(a) - distance(b); - }; - function distance(elem) { - var targetOffset = Offset(elem); - return Math.floor(Math.abs(targetOffset.left - cursorOffset.right) - + Math.abs(targetOffset.top - cursorOffset.top) * weight); - } - } - } - function isInWindow(elem) { - return !!elem && isInRange(winTop, winLeft, winLeft + winWidth, winTop + winHeight)(elem); - } - function isInRange(top, left, right, bottom) { - return function (elem) { - var offset = Offset(elem); - return top <= offset.top && offset.top <= bottom - 10 - && left <= offset.left && offset.left <= right - 10; - }; - } - function hasVisibleTextNode(elem) { - return findVisibleTextNodes(elem).length > 0; - } - function findVisibleTextNodes(elem) { - return findTextNodes(elem) - .filter(hasText) - .filter(function (text) { return isVisible(text.parentElement); }); - } - function findTextNodes(elem) { - return Array.apply(null, elem.childNodes) - .map(function (elem) { return isTextNode(elem) ? [elem] : findTextNodes(elem); }) - .reduce(function (r, elems) { return r.concat(elems); }, []); - } - function isTextNode(elem) { - return elem.nodeName === '#text'; - } - function hasText(elem) { - return elem.textContent.trim().length > 0; - } - function shiftVisibleImg(elem) { - return Array.apply(null, elem.querySelectorAll('img')) - .filter(isVisible) - .shift() || elem; - } - function isVisible(elem) { - var rect = elem.getBoundingClientRect(), point = document.elementFromPoint(Math.ceil(rect.left + (rect.width / 2)), Math.ceil(rect.top + Math.min(rect.height / 2, 10))); - return point - ? isVisibleSize(elem) && (point === elem || isChild(elem, point)) - : isVisibleSize(elem) && isVisibleStyle(elem); - function isChild(parent, child) { - return child ? child.parentElement === parent || isChild(parent, child.parentElement) : false; - } - function isVisibleSize(elem) { - return elem.offsetWidth > 9 && elem.offsetHeight > 9; - } - function isVisibleStyle(elem) { - var style = window.getComputedStyle(elem); - return (style.display.split(' ')[0] !== 'none' || - style.visibility.split(' ')[0] !== 'hidden' || - !(parseInt(style.zIndex.split(' ')[0], 10) < 0)); - } - } - function Offset(elem) { - var offset = elem.getBoundingClientRect(); - return { - top: winTop + offset.top, - left: winLeft + offset.left, - right: winLeft + offset.right, - bottom: winTop + offset.bottom, - width: offset.right - offset.left, - height: offset.bottom - offset.top - }; - } -} -exports.analyze = analyze; +var ATTRIBUTE = require('../attribute/attribute'); +var SELECTOR = [ + 'a', + 'input', + 'select', + 'option', + 'datalist', + 'textarea', + 'button', + 'audio', + 'video', + 'embed', + '[onclick]', + '[tabindex]:not([role="tablist"]):not(ul):not(#hdtb):not(#hdtbMenus)', + //'[role="link"]', + '[role="button"]', + '[role="checkbox"]', + '[role="option"]', + '[role="tab"]', + '[role="menuitem"]' +] + .join(','); +var queried, linkcount = 0; +function analyze(data) { + if (!queried || !data.attribute.cursor || linkcount !== document.links.length) { + queried = Array.apply(null, document.querySelectorAll(SELECTOR)); + linkcount = document.links.length; + } + var winWidth = window.innerWidth, winHeight = window.innerHeight, winTop = window.scrollY, winLeft = window.scrollX; + var targets = findTargets(queried.filter(function (target) { return isVisible(shiftVisibleImg(target)); }), data.attribute.command, data.attribute.cursor); + queried = isInWindow(targets[0]) ? queried : null; + return { + entity: data.entity, + attribute: data.attribute, + result: { + targets: targets + } + }; + function findTargets(targets, command, cursor) { + cursor = isCursorActive(cursor) ? cursor : null; + switch (command) { + case 0 /* UP */: + return !cursor + ? findLeftTops(targets) + : findCursorTops(targets, cursor); + case 1 /* UP_S */: + return !cursor + ? findLeftTops(targets) + : findCursorColumn(findCursorTops(targets, cursor), cursor); + case 2 /* DOWN */: + return !cursor + ? findMainColumn(targets) + : findCursorBottoms(targets, cursor); + case 3 /* DOWN_S */: + return !cursor + ? findMainColumn(targets) + : findCursorColumn(findCursorBottoms(targets, cursor), cursor); + case 4 /* LEFT */: + return !cursor + ? findLeftColumn(targets) + : findCursorLefts(targets, cursor); + case 5 /* RIGHT */: + return !cursor + ? findRightColumn(targets) + : findCursorRights(targets, cursor); + case 6 /* EXPAND */: + return findCursorNeerTargets(targets, cursor || findMainColumn(targets)[0] || document.body) + .filter(isInWindow); + case 7 /* CONTRACT */: + return findCursorNeerTargets(targets, cursor || findMainColumn(targets)[0] || document.body) + .filter(isInWindow) + .reverse(); + default: + return []; + } + function findLeftTops(targets) { + return targets + .filter(isInWindow) + .map(shiftVisibleImg) + .sort(compareLeftTopDistance); + } + function findMainColumn(targets) { + return columns(targets.filter(function (target) { return target.getBoundingClientRect().left < (winWidth / 2); }).filter(hasVisibleTextNode)) + .sort(compareGroupsByTextWeightAverage) + .map(function (group) { return group.filter(isInWindow); }) + .filter(function (group) { return group.length > 0; }) + .reduce(function (_, group) { return group; }, findLeftTops(targets)) + .map(shiftVisibleImg) + .sort(compareLeftTopDistance); + } + function findLeftColumn(targets) { + var mainColumn = findMainColumn(targets); + var left = mainColumn.length > 0 ? mainColumn[0].parentElement.getBoundingClientRect().left : Infinity; + return columns(targets.filter(function (target) { return target.getBoundingClientRect().right < left; })) + .map(function (group) { return group.filter(isInWindow); }) + .filter(function (group) { return group.length > 0; }) + .sort(compareGroupsByTextWeightAverage) + .reduce(function (_, group) { return group; }, mainColumn) + .map(shiftVisibleImg) + .sort(compareLeftTopDistance); + } + function findRightColumn(targets) { + var mainColumn = findMainColumn(targets); + var right = mainColumn.length > 0 ? mainColumn[0].parentElement.getBoundingClientRect().right : -Infinity; + return columns(targets.filter(function (target) { return target.getBoundingClientRect().left > right; })) + .map(function (group) { return group.filter(isInWindow); }) + .filter(function (group) { return group.length > 0; }) + .sort(compareGroupsByTextWeightAverage) + .reduce(function (_, group) { return group; }, mainColumn) + .map(shiftVisibleImg) + .sort(compareLeftTopDistance); + } + function findCursorTops(targets, cursor) { + var margin = 3; + return targets + .map(shiftVisibleImg) + .filter(isInRange(Math.max(winTop - (winHeight * 3), 0), winLeft, winLeft + winWidth, Offset(cursor).top + margin)) + .sort(compareCursorVerticalDistance(cursor)); + } + function findCursorBottoms(targets, cursor) { + var margin = 3; + return targets + .map(shiftVisibleImg) + .filter(isInRange(Offset(cursor).bottom - margin, winLeft, winLeft + winWidth, winTop + (winHeight * 4))) + .sort(compareCursorVerticalDistance(cursor)); + } + function findCursorLefts(targets, cursor) { + var margin = 3; + return targets + .map(shiftVisibleImg) + .filter(isInRange(winTop, 0, Offset(cursor).left + margin, winTop + winHeight)) + .sort(compareCursorLeftDistance(cursor)); + } + function findCursorRights(targets, cursor) { + var margin = 3; + return targets + .map(shiftVisibleImg) + .filter(isInRange(winTop, Offset(cursor).right - margin, Infinity, winTop + winHeight)) + .sort(compareCursorRightDistance(cursor)); + } + function findCursorNeerTargets(targets, cursor) { + return targets + .map(shiftVisibleImg) + .filter(isInWindow) + .sort(compareCursorDistance(cursor)); + } + function findCursorColumn(targets, cursor) { + var left = cursor.getBoundingClientRect().left; + return columns(targets.filter(isCursorColumn).filter(hasVisibleTextNode)) + .reduce(function (_, group) { return group; }, targets) + .map(shiftVisibleImg) + .sort(function (a, b) { return compareGroupsByTextWeightAverage([b], [a]) || compareLeftTopDistance(a, b); }); + function isCursorColumn(elem) { + return elem.getBoundingClientRect().left === left; + } + } + function isCursorActive(cursor) { + var rect = cursor && cursor.getBoundingClientRect(); + return !(!rect || + rect.bottom < 0 || + rect.top > winHeight || + rect.right < 0 || + rect.left > winWidth); + } + function columns(targets) { + return targets + .sort(compareLeftDistance) + .reduce(groupsByLeftDistance, []) + .map(filterFewNodesGroup) + .filter(function (group) { return group.length > 1; }); + } + function groupsByLeftDistance(groups, elem) { + if (groups.length === 0) { + return [[elem]]; + } + var group = groups.slice(-1)[0]; + return isSameGroup(group, elem) ? groups.slice(0, -1).concat([group.concat(elem)]) : groups.concat([[elem]]); + function isSameGroup(group, elem) { + return Math.floor(group[0].getBoundingClientRect().left) === Math.floor(elem.getBoundingClientRect().left); + } + } + function compareGroupsByTextWeightAverage(a, b) { + return calWeightAverage(a.filter(hasText).slice(0, 10)) - calWeightAverage(b.filter(hasText).slice(0, 10)) + || -compareLeftDistance(a[0], b[0]); + function calWeightAverage(elems) { + return calTextWeightAverage(elems); + } + function calTextWeightAverage(elems) { + return elems.length === 0 + ? 0 + : elems.reduce(function (r, elem) { return r + calTextWeight(elem); }, 0) / elems.length * (Math.min(elems.length, 10) / 10 + 0.5); + } + function calTextWeight(elem) { + var fontSize = parseInt(window.getComputedStyle(elem).fontSize, 10) + || parseInt(window.getComputedStyle(document.documentElement).fontSize, 10) + || 16, fullTextNodeParents = findVisibleTextNodes(elem) + .map(function (text) { return text.parentElement; }), fontWeightAverage = calFontWeightRateAverage(fullTextNodeParents), length = fullTextNodeParents + .reduce(function (r, elem) { return r + elem.textContent.trim().length; }, 0); + return fontSize * fontWeightAverage * +(length > 3); + } + function calFontWeightRateAverage(textNodeParents) { + //const sum = textNodeParents.reduce((r, elem) => r + elem.textContent.trim().length * calFontWeightRate(elem), 0), + // len = textNodeParents.reduce((r, elem) => r + elem.textContent.trim().length, 0); + //return len === 0 ? 0 : sum / len; + return textNodeParents + .sort(function (a, b) { return a.textContent.trim().length - b.textContent.trim().length; }) + .slice(-1) + .map(function (elem) { return calFontWeightRate(elem); }) + .pop(); + } + function calFontWeightRate(elem) { + var fontWeight = window.getComputedStyle(elem).fontWeight; + var weight; + switch (fontWeight) { + case 'normal': + weight = 400; + break; + case 'bold': + weight = 700; + break; + default: + weight = parseInt(fontWeight, 10); + } + return 1 + ((weight / 400 - 1) / 3); + } + } + function filterFewNodesGroup(group) { + return groupsByNodeDistanceFromRoot(group) + .filter(function (group) { return group.length > 1; }) + .reduce(function (r, group) { return r.concat(group); }, []); + } + function groupsByNodeDistanceFromRoot(group) { + return group + .sort(compareByNodeDistanceFromRoot) + .reduce(function (r, elem) { return r.length === 0 ? [[elem]] + : compareByNodeDistanceFromRoot(r[0][0], elem) === 0 ? [[elem].concat(r[0])].concat(r.slice(1)) + : [[elem]].concat(r); }, []); + } + function compareByNodeDistanceFromRoot(a, b) { + return countNodeDistanceFromRoot(a) - countNodeDistanceFromRoot(b); + function countNodeDistanceFromRoot(elem) { + var count = 0, parent = elem; + while (parent = parent.parentElement) { + ++count; + } + return count; + } + } + function compareLeftDistance(a, b) { + return Math.floor(a.getBoundingClientRect().left) - Math.floor(b.getBoundingClientRect().left); + } + function compareLeftTopDistance(a, b) { + return distance(a) - distance(b); + function distance(elem) { + var rect = elem.getBoundingClientRect(); + return Math.floor(rect.left + + rect.top * 5); + } + } + function compareCursorDistance(cursor) { + var weight = 10; + var cursorOffset = Offset(cursor); + return function (a, b) { + return distance(a) - distance(b); + }; + function distance(elem) { + var targetOffset = Offset(elem); + return Math.floor(Math.abs(targetOffset.left - cursorOffset.left) + + Math.abs(targetOffset.top - cursorOffset.top) * weight); + } + } + function compareCursorVerticalDistance(cursor) { + var weight = 3; + var cursorOffset = Offset(cursor); + return function (a, b) { + return distance(a) - distance(b); + }; + function distance(elem) { + var targetOffset = Offset(elem), hdistance = targetOffset.left <= cursorOffset.left && cursorOffset.left <= targetOffset.right + ? 0 + : targetOffset.left - cursorOffset.left; + return Math.floor(Math.abs(hdistance) * weight + + Math.abs(targetOffset.top - cursorOffset.top)); + } + } + function compareCursorLeftDistance(cursor) { + var weight = 5; + var cursorOffset = Offset(cursor); + return function (a, b) { + return distance(a) - distance(b); + }; + function distance(elem) { + var targetOffset = Offset(elem); + return Math.floor(Math.abs(targetOffset.right - cursorOffset.left) + + Math.abs(targetOffset.top - cursorOffset.top) * weight); + } + } + function compareCursorRightDistance(cursor) { + var weight = 5; + var cursorOffset = Offset(cursor); + return function (a, b) { + return distance(a) - distance(b); + }; + function distance(elem) { + var targetOffset = Offset(elem); + return Math.floor(Math.abs(targetOffset.left - cursorOffset.right) + + Math.abs(targetOffset.top - cursorOffset.top) * weight); + } + } + } + function isInWindow(elem) { + return !!elem && isInRange(winTop, winLeft, winLeft + winWidth, winTop + winHeight)(elem); + } + function isInRange(top, left, right, bottom) { + return function (elem) { + var offset = Offset(elem); + return top <= offset.top && offset.top <= bottom - 10 + && left <= offset.left && offset.left <= right - 10; + }; + } + function hasVisibleTextNode(elem) { + return findVisibleTextNodes(elem).length > 0; + } + function findVisibleTextNodes(elem) { + return findTextNodes(elem) + .filter(hasText) + .filter(function (text) { return isVisible(text.parentElement); }); + } + function findTextNodes(elem) { + return Array.apply(null, elem.childNodes) + .map(function (elem) { return isTextNode(elem) ? [elem] : findTextNodes(elem); }) + .reduce(function (r, elems) { return r.concat(elems); }, []); + } + function isTextNode(elem) { + return elem.nodeName === '#text'; + } + function hasText(elem) { + return elem.textContent.trim().length > 0; + } + function shiftVisibleImg(elem) { + return Array.apply(null, elem.querySelectorAll('img')) + .filter(isVisible) + .shift() || elem; + } + function isVisible(elem) { + var rect = elem.getBoundingClientRect(), point = document.elementFromPoint(Math.ceil(rect.left + (rect.width / 2)), Math.ceil(rect.top + Math.min(rect.height / 2, 10))); + return point + ? isVisibleSize(elem) && (point === elem || isChild(elem, point)) + : isVisibleSize(elem) && isVisibleStyle(elem); + function isChild(parent, child) { + return child ? child.parentElement === parent || isChild(parent, child.parentElement) : false; + } + function isVisibleSize(elem) { + return elem.offsetWidth > 9 && elem.offsetHeight > 9; + } + function isVisibleStyle(elem) { + var style = window.getComputedStyle(elem); + return (style.display.split(' ')[0] !== 'none' || + style.visibility.split(' ')[0] !== 'hidden' || + !(parseInt(style.zIndex.split(' ')[0], 10) < 0)); + } + } + function Offset(elem) { + var offset = elem.getBoundingClientRect(); + return { + top: winTop + offset.top, + left: winLeft + offset.left, + right: winLeft + offset.right, + bottom: winTop + offset.bottom, + width: offset.right - offset.left, + height: offset.bottom - offset.top + }; + } +} +exports.analyze = analyze; },{"../attribute/attribute":2}],8:[function(require,module,exports){ "use strict"; -/// -var VIEW = require('../view/view'); -var CONTROLLER = require('../controller/controller'); -var STORE = require('../store/store'); -exports.store = STORE.create(); -var ANALYSIS = require('./analysis'); -//import MAP = require('./map'); -var LazyChain = require('lazychain'); -var views = []; -function main() { - if (document.readyState === "loading") { - return window.addEventListener("DOMContentLoaded", register); - } - else { - return register(); - } - function register() { - window.removeEventListener("DOMContentLoaded", register); - CONTROLLER.Controller([window]) - .forEach(function (view) { return views.unshift(view); }); - } -} -exports.main = main; -var stream = LazyChain(); -stream - .lazy(10) - .reduceRight(function (v) { return v; }) - .map(ANALYSIS.analyze) - .stream(output); -function input(entity, attribute) { - stream.notify({ entity: entity, attribute: attribute, result: null }); -} -exports.input = input; -function output(data) { - exports.store.update(data.entity.viewId, data.result); - VIEW.emit(data.entity, data.attribute); -} +/// +var VIEW = require('../view/view'); +var CONTROLLER = require('../controller/controller'); +var STORE = require('../store/store'); +exports.store = STORE.create(); +var ANALYSIS = require('./analysis'); +//import MAP = require('./map'); +var LazyChain = require('lazychain'); +var HELPER_FUNCTIONS = require('helperFunctions'); +var views = []; +function main() { + if (document.readyState === "loading") { + return window.addEventListener("DOMContentLoaded", register); + } + else { + return register(); + } + function register() { + window.removeEventListener("DOMContentLoaded", register); + HELPER_FUNCTIONS.getSettings(); + HELPER_FUNCTIONS.startKeyUpListener(); + CONTROLLER.Controller([window]) + .forEach(function (view) { return views.unshift(view); }); + } +} +exports.main = main; +var stream = LazyChain(); +stream + .lazy(10) + .reduceRight(function (v) { return v; }) + .map(ANALYSIS.analyze) + .stream(output); +function input(entity, attribute) { + stream.notify({ entity: entity, attribute: attribute, result: null }); +} +exports.input = input; +function output(data) { + exports.store.update(data.entity.viewId, data.result); + VIEW.emit(data.entity, data.attribute); +} -},{"../controller/controller":3,"../store/store":10,"../view/view":12,"./analysis":7,"lazychain":1}],9:[function(require,module,exports){ +},{"../controller/controller":3,"../store/store":10,"../view/view":12,"./analysis":7,"lazychain":1,"helperFunctions":13}],9:[function(require,module,exports){ "use strict"; -var state_ = 0 /* ENABLE */; -function state(enable) { - switch (enable) { - case true: - state_ = 0 /* ENABLE */; - break; - case false: - state_ = 1 /* DISABLE */; - break; - } - return state_ === 0 /* ENABLE */; -} -exports.state = state; +var state_ = 0 /* ENABLE */; +function state(enable) { + switch (enable) { + case true: + state_ = 0 /* ENABLE */; + break; + case false: + state_ = 1 /* DISABLE */; + break; + } + return state_ === 0 /* ENABLE */; +} +exports.state = state; },{}],10:[function(require,module,exports){ "use strict"; -function create() { - return new Store(); -} -exports.create = create; -var Store = (function () { - function Store() { - this.state_ = {}; - this.diff_ = {}; - } - Store.prototype.update = function (id, diff) { - var curState = this.state_[id] = this.state_[id] || {}, curDiff = this.diff_[id] = this.diff_[id] || []; - Object.keys(diff) - .forEach(function (v) { - var key = v, val = diff[key]; - if (val === curState[key]) { - return; - } - curState[key] = val; - curDiff.push(key); - }); - }; - Store.prototype.state = function (id) { - return this.state_[id] = this.state_[id] || {}; - }; - Store.prototype.diff = function (id) { - var diff = this.diff_[id] = this.diff_[id] || [], uniq = diff.sort().reduce(function (r, v, i) { return i === 0 ? [v] : r[0] === v ? r : [v].concat(r); }, []).reverse(); - [].splice.apply(diff, [0, diff.length].concat(uniq)); - return diff; - }; - return Store; -})(); +function create() { + return new Store(); +} +exports.create = create; +var Store = (function () { + function Store() { + this.state_ = {}; + this.diff_ = {}; + } + Store.prototype.update = function (id, diff) { + var curState = this.state_[id] = this.state_[id] || {}, curDiff = this.diff_[id] = this.diff_[id] || []; + Object.keys(diff) + .forEach(function (v) { + var key = v, val = diff[key]; + if (val === curState[key]) { + return; + } + curState[key] = val; + curDiff.push(key); + }); + }; + Store.prototype.state = function (id) { + return this.state_[id] = this.state_[id] || {}; + }; + Store.prototype.diff = function (id) { + var diff = this.diff_[id] = this.diff_[id] || [], uniq = diff.sort().reduce(function (r, v, i) { return i === 0 ? [v] : r[0] === v ? r : [v].concat(r); }, []).reverse(); + [].splice.apply(diff, [0, diff.length].concat(uniq)); + return diff; + }; + return Store; +})(); },{}],11:[function(require,module,exports){ "use strict"; -var ATTRIBUTE = require('../attribute/attribute'); -function map(targets, callback, reverse, stack) { - if (stack === void 0) { stack = []; } - if (targets.length === 0) { - return []; - } - var scrollTop = window.scrollY, scrollLeft = window.scrollX; - var keys = 'dsawgvcxlohnmzbptuy'.split(''), container = document.createElement('div'), observer = document.createElement('input'), table = {}; - observer.style.cssText = [ - 'position: fixed;', - 'width: 0px;', - 'height: 0px;', - 'bottom: 0px;', - 'right: 0px;', - 'margin: 0px;', - 'border-width: 0px;', - 'padding: 0px;', - 'z-index: -1;' - ] - .map(function (str) { return str.split(';')[0] + ' !important;'; }) - .join(''); - observer.addEventListener('input', handler); - observer.addEventListener('blur', handler); - document.body.appendChild(observer); - observer.focus(); - setTimeout(function () { return observer.focus(); }, 1000); - var markers = targets.slice(0, keys.length) - .map(function (target, i) { - var marker = document.createElement('span'), key = keys[i], offset = calOffset(target); - marker.classList.add(ATTRIBUTE.MARKER_TAG); - marker.classList.add(ATTRIBUTE.MARKER_TAG + '-' + key); - marker.style.cssText = [ - 'position: absolute;', - 'overflow: visible;', - 'z-index: 9999;', - 'top: ' + (offset.top - 3) + 'px;', - 'left: ' + (offset.left - 12) + 'px;', - 'min-width: 5px;', - 'margin: 0px;', - 'border: 0px;', - 'padding: 1px 3px;', - 'border-radius: 3px;', - 'box-shadow: 1px 1px 1px 0px;', - 'background-color: gold;', - 'font-family: Helvetica, Arial, sans-serif;', - 'font-size: 13px;', - 'font-weight: bold;', - 'line-height: normal;', - 'color: black;' - ] - .map(function (str) { return str.split(';')[0] + ' !important;'; }) - .join(''); - marker.textContent = key; - table[key] = target; - container.appendChild(marker); - return target; - }); - document.body.appendChild(container); - return markers; - function handler(event) { - event.preventDefault(); - event.stopImmediatePropagation(); - var key = ja2en(event.target.value), shiftKey = key === key.toUpperCase(), target = table[key.toLowerCase()]; - observer.removeEventListener('keydown', handler); - observer.removeEventListener('blur', handler); - container.remove(); - if (key && target) { - callback(target, shiftKey); - } - observer.blur(); - observer.remove(); - switch (key) { - case !reverse ? 'e' : 'E': - if (targets.length > keys.length) { - map(targets.slice(keys.length), callback, reverse, stack.concat(targets.slice(0, keys.length))); - } - else { - map(stack.concat(targets), callback, reverse); - } - break; - case !reverse ? 'E' : 'e': - if (stack.length === 0) { - stack = targets; - targets = []; - } - if (stack.length > keys.length) { - map(stack.slice(-keys.length).concat(targets), callback, reverse, stack.slice(0, Math.max(stack.length - keys.length, 0))); - } - else { - map(stack.concat(targets), callback, reverse); - } - break; - } - } - function calOffset(elem) { - var offset = elem.getBoundingClientRect(); - return { - top: scrollTop + offset.top, - left: scrollLeft + offset.left, - right: scrollLeft + offset.right, - bottom: scrollTop + offset.bottom - }; - } -} -exports.map = map; -function ja2en(char) { - switch (char) { - case 'ｑ': - return 'q'; - case 'Ｑ': - return 'Q'; - case 'ｗ': - return 'w'; - case 'Ｗ': - return 'W'; - case 'え': - return 'e'; - case 'Ｅ': - return 'E'; - case 'ｒ': - return 'r'; - case 'Ｒ': - return 'R'; - case 'ｔ': - return 't'; - case 'Ｔ': - return 'T'; - case 'ｙ': - return 'y'; - case 'Ｙ': - return 'Y'; - case 'う': - return 'u'; - case 'Ｕ': - return 'U'; - case 'い': - return 'i'; - case 'Ｉ': - return 'I'; - case 'お': - return 'o'; - case 'Ｏ': - return 'O'; - case 'ｐ': - return 'p'; - case 'Ｐ': - return 'P'; - case 'あ': - return 'a'; - case 'Ａ': - return 'A'; - case 'ｓ': - return 's'; - case 'Ｓ': - return 'S'; - case 'ｄ': - return 'd'; - case 'Ｄ': - return 'D'; - case 'ｆ': - return 'f'; - case 'Ｆ': - return 'F'; - case 'ｇ': - return 'g'; - case 'Ｇ': - return 'G'; - case 'ｈ': - return 'h'; - case 'Ｈ': - return 'H'; - case 'ｊ': - return 'j'; - case 'Ｊ': - return 'J'; - case 'ｋ': - return 'k'; - case 'Ｋ': - return 'K'; - case 'ｌ': - return 'l'; - case 'Ｌ': - return 'L'; - case 'ｚ': - return 'z'; - case 'Ｚ': - return 'Z'; - case 'ｘ': - return 'x'; - case 'Ｘ': - return 'X'; - case 'ｃ': - return 'c'; - case 'Ｃ': - return 'C'; - case 'ｖ': - return 'v'; - case 'Ｖ': - return 'V'; - case 'ｂ': - return 'b'; - case 'Ｂ': - return 'B'; - case 'ｎ': - return 'n'; - case 'Ｎ': - return 'N'; - case 'ｍ': - return 'm'; - case 'Ｍ': - return 'M'; - default: - return char; - } -} +var ATTRIBUTE = require('../attribute/attribute'); +function map(targets, callback, reverse, stack) { + if (stack === void 0) { stack = []; } + if (targets.length === 0) { + return []; + } + var scrollTop = window.scrollY, scrollLeft = window.scrollX; + var keys = 'dsawgvcxlohnmzbptuy'.split(''), container = document.createElement('div'), observer = document.createElement('input'), table = {}; + observer.style.cssText = [ + 'position: fixed;', + 'width: 0px;', + 'height: 0px;', + 'bottom: 0px;', + 'right: 0px;', + 'margin: 0px;', + 'border-width: 0px;', + 'padding: 0px;', + 'z-index: -1;' + ] + .map(function (str) { return str.split(';')[0] + ' !important;'; }) + .join(''); + observer.addEventListener('input', handler); + observer.addEventListener('blur', handler); + document.body.appendChild(observer); + observer.focus(); + setTimeout(function () { return observer.focus(); }, 1000); + var markers = targets.slice(0, keys.length) + .map(function (target, i) { + var marker = document.createElement('span'), key = keys[i], offset = calOffset(target); + marker.classList.add(ATTRIBUTE.MARKER_TAG); + marker.classList.add(ATTRIBUTE.MARKER_TAG + '-' + key); + marker.style.cssText = [ + 'position: absolute;', + 'overflow: visible;', + 'z-index: 9999;', + 'top: ' + (offset.top - 3) + 'px;', + 'left: ' + (offset.left - 12) + 'px;', + 'min-width: 5px;', + 'margin: 0px;', + 'border: 0px;', + 'padding: 1px 3px;', + 'border-radius: 3px;', + 'box-shadow: 1px 1px 1px 0px;', + 'background-color: gold;', + 'font-family: Helvetica, Arial, sans-serif;', + 'font-size: 13px;', + 'font-weight: bold;', + 'line-height: normal;', + 'color: black;' + ] + .map(function (str) { return str.split(';')[0] + ' !important;'; }) + .join(''); + marker.textContent = key; + table[key] = target; + container.appendChild(marker); + return target; + }); + document.body.appendChild(container); + return markers; + function handler(event) { + event.preventDefault(); + event.stopImmediatePropagation(); + // TODO: find way to detect Ctrl key + var key = ja2en(event.target.value), shiftKey = key === key.toUpperCase(), target = table[key.toLowerCase()], controlKey = false; + observer.removeEventListener('keydown', handler); + observer.removeEventListener('blur', handler); + container.remove(); + if (key && target) { + callback(target, shiftKey, controlKey); + } + observer.blur(); + observer.remove(); + // TODO: Decouple from E key + switch (key) { + case !reverse ? 'e' : 'E': + if (targets.length > keys.length) { + map(targets.slice(keys.length), callback, reverse, stack.concat(targets.slice(0, keys.length))); + } + else { + map(stack.concat(targets), callback, reverse); + } + break; + case !reverse ? 'E' : 'e': + if (stack.length === 0) { + stack = targets; + targets = []; + } + if (stack.length > keys.length) { + map(stack.slice(-keys.length).concat(targets), callback, reverse, stack.slice(0, Math.max(stack.length - keys.length, 0))); + } + else { + map(stack.concat(targets), callback, reverse); + } + break; + } + } + function calOffset(elem) { + var offset = elem.getBoundingClientRect(); + return { + top: scrollTop + offset.top, + left: scrollLeft + offset.left, + right: scrollLeft + offset.right, + bottom: scrollTop + offset.bottom + }; + } +} +exports.map = map; +function ja2en(char) { + switch (char) { + case 'ｑ': + return 'q'; + case 'Ｑ': + return 'Q'; + case 'ｗ': + return 'w'; + case 'Ｗ': + return 'W'; + case 'え': + return 'e'; + case 'Ｅ': + return 'E'; + case 'ｒ': + return 'r'; + case 'Ｒ': + return 'R'; + case 'ｔ': + return 't'; + case 'Ｔ': + return 'T'; + case 'ｙ': + return 'y'; + case 'Ｙ': + return 'Y'; + case 'う': + return 'u'; + case 'Ｕ': + return 'U'; + case 'い': + return 'i'; + case 'Ｉ': + return 'I'; + case 'お': + return 'o'; + case 'Ｏ': + return 'O'; + case 'ｐ': + return 'p'; + case 'Ｐ': + return 'P'; + case 'あ': + return 'a'; + case 'Ａ': + return 'A'; + case 'ｓ': + return 's'; + case 'Ｓ': + return 'S'; + case 'ｄ': + return 'd'; + case 'Ｄ': + return 'D'; + case 'ｆ': + return 'f'; + case 'Ｆ': + return 'F'; + case 'ｇ': + return 'g'; + case 'Ｇ': + return 'G'; + case 'ｈ': + return 'h'; + case 'Ｈ': + return 'H'; + case 'ｊ': + return 'j'; + case 'Ｊ': + return 'J'; + case 'ｋ': + return 'k'; + case 'Ｋ': + return 'K'; + case 'ｌ': + return 'l'; + case 'Ｌ': + return 'L'; + case 'ｚ': + return 'z'; + case 'Ｚ': + return 'Z'; + case 'ｘ': + return 'x'; + case 'Ｘ': + return 'X'; + case 'ｃ': + return 'c'; + case 'Ｃ': + return 'C'; + case 'ｖ': + return 'v'; + case 'Ｖ': + return 'V'; + case 'ｂ': + return 'b'; + case 'Ｂ': + return 'B'; + case 'ｎ': + return 'n'; + case 'Ｎ': + return 'N'; + case 'ｍ': + return 'm'; + case 'Ｍ': + return 'M'; + default: + return char; + } +} },{"../attribute/attribute":2}],12:[function(require,module,exports){ "use strict"; -var ENTITY = require('../entity/entity'); -var ATTRIBUTE = require('../attribute/attribute'); -var MODEL = require('../model/model'); -var CONTROLLER = require('../controller/controller'); -var STATE = require('../state/module'); -var MAP = require('./map'); -var id = 0; -var views = {}; -exports.state = STATE.state; -var View = (function () { - function View(target) { - this.id_ = ++id; - this.style = document.createElement('style'); - views[this.id_] = this; - this.target_ = target; - this.handler_ = this.handler_.bind(this); - this.observe_(); - this.style.innerHTML = [ - '.' + ATTRIBUTE.CURSOR_ID + ' {', - ' outline: 3px solid gold !important;', - ' outline-offset: -3px !important;', - ' background-color: rgba(255, 255, 0, 0.4) !important;', - '}', - 'img.' + ATTRIBUTE.CURSOR_ID + ' {', - ' outline-offset: -3px !important;', - '}' - ].join('\n'); - } - View.prototype.handler_ = function (event) { - undisplayUrl(); - if (!exports.state()) { - return; - } - if (event.defaultPrevented) { - return; - } - if (isInserting(event.srcElement)) { - return; - } - var cursor = document.querySelector('.' + ATTRIBUTE.CURSOR_ID), entity = new ENTITY.Entity(this.id_), attribute = ATTRIBUTE.attribute(event, cursor); - if (attribute.command === 11 /* INVALID */) { - return; - } - if (!cursor && attribute.command === 8 /* ENTER */) { - return; - } - if (!cursor && attribute.command === 9 /* ENTER_S */) { - return; - } - event.preventDefault(); - event.stopImmediatePropagation(); - CONTROLLER.command(entity, attribute); - return; - function isInserting(elem) { - switch (elem.tagName.toLowerCase()) { - case 'input': - switch (elem.getAttribute('type')) { - case 'checkbox': - case 'radio': - case 'file': - case 'submit': - case 'reset': - case 'button': - case 'image': - case 'range': - case 'color': - return false; - } - return true; - case 'select': - return false; - case 'datalist': - case 'option': - case 'textarea': - return true; - } - switch (elem.getAttribute('role')) { - case 'textbox': - return true; - } - do { - if (elem.contentEditable === 'true') { - return true; - } - } while (elem = elem.parentElement); - return false; - } - }; - View.prototype.observe_ = function () { - this.target_.addEventListener('keydown', this.handler_, true); - }; - View.prototype.release_ = function () { - this.target_.removeEventListener('keydown', this.handler_, true); - }; - View.prototype.destructor = function () { - this.release_(); - delete views[this.id_]; - }; - View.prototype.update = function (command) { - if (!this.style.parentElement) { - document.head.appendChild(this.style); - } - var state = MODEL.store.state(this.id_), diff = MODEL.store.diff(this.id_); - var key; - while (key = diff.shift()) { - switch (key) { - case 'targets': - markTarget(state.targets); - } - } - function markTarget(targets) { - switch (command) { - case 0 /* UP */: - case 1 /* UP_S */: - case 2 /* DOWN */: - case 3 /* DOWN_S */: - case 4 /* LEFT */: - case 5 /* RIGHT */: - var target = targets[0]; - if (!target) { - break; - } - select(target); - target.scrollIntoViewIfNeeded(); - break; - case 6 /* EXPAND */: - MAP.map(targets, trigger, false); - break; - case 7 /* ENTER_C */: - trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), false, true); - break; - case 8 /* ENTER */: - trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), false, false); - break; - case 9 /* ENTER_S */: - trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), true, false); - break; - default: - unselect(); - } - return; - function select(elem) { - unselect(); - displayUrl(elem); - elem.classList.add(ATTRIBUTE.CURSOR_ID); - } - function unselect() { - var selector = document.querySelector('.' + ATTRIBUTE.CURSOR_ID); - if (!selector) { - return; - } - selector.classList.remove(ATTRIBUTE.CURSOR_ID); - undisplayUrl(); - } - function trigger(cursor, shiftKey, ctrlKey) { - if (!cursor) { - return; - } - if (!document.elementFromPoint(cursor.getBoundingClientRect().left, cursor.getBoundingClientRect().top)) { - return; - } - if (cursor.tagName.toLowerCase() === 'a' - || cursor.parentElement.tagName.toLowerCase() === 'a' - || cursor.onclick - || cursor.tagName.toLowerCase() === 'option' - || -1 < ['button'].indexOf(cursor.getAttribute('role'))) { - select(cursor); - } - else { - unselect(); - } - cursor.focus(); - click(cursor, shiftKey, ctrlKey); - } - } - }; - View.prototype.destroy = function () { - this.destructor(); - }; - return View; -})(); -exports.View = View; -function emit(entity, attribute) { - var viewId = entity.viewId; - if (viewId in views) { - views[viewId].update(attribute.command); - return true; - } - else { - return false; - } -} -exports.emit = emit; -function displayUrl(cursor) { - if (!cursor) { - return; - } - if (cursor.tagName.toLowerCase() !== 'a') { - return displayUrl(cursor.parentElement); - } - var display = document.createElement('span'); - display.id = ATTRIBUTE.URLDISPLAY_ID; - display.style.cssText = [ - 'position: fixed;', - 'z-index: 9999;', - 'left: 0px;', - 'bottom: 0px;', - 'min-width: 35%;', - 'padding: 3px 3px 0 3px;', - 'color: #ececec;', - 'background-color: #26272A;', - 'border-radius: 0;', - 'font-family: Meiryo, Helvetica, sans-serif;', - 'font-size: 11.5px;', - 'text-align: left;' - ] - .map(function (str) { return str.split(';')[0] + ' !important;'; }) - .join(''); - display.textContent = cursor.href; - document.body.appendChild(display); -} -function undisplayUrl() { - var display = document.querySelector('#' + ATTRIBUTE.URLDISPLAY_ID); - if (!display) { - return; - } - display.remove(); -} -function click(elem, shiftKey, ctrlKey) { - var target = elem.hasAttribute('target') && elem.getAttribute('target'); - if (elem.tagName.toLowerCase() === 'a') { - elem.removeAttribute('target'); - } - ["mouseover", "mousedown", "mouseup", "click"] - .forEach(function (sequence) { - var mouseEvent = document.createEvent("MouseEvents"); - mouseEvent.initMouseEvent(sequence, true, true, window, 1, 0, 0, 0, 0, ctrlKey, false, shiftKey, false, 0, null); - elem.dispatchEvent(mouseEvent); - }); - if (elem.tagName.toLowerCase() === 'a') { - typeof target === 'boolean' ? elem.removeAttribute('target') : elem.setAttribute('target', target); - } -} +var ENTITY = require('../entity/entity'); +var ATTRIBUTE = require('../attribute/attribute'); +var MODEL = require('../model/model'); +var CONTROLLER = require('../controller/controller'); +var STATE = require('../state/module'); +var MAP = require('./map'); +var id = 0; +var views = {}; +exports.state = STATE.state; +var View = (function () { + function View(target) { + this.id_ = ++id; + this.style = document.createElement('style'); + views[this.id_] = this; + this.target_ = target; + this.handler_ = this.handler_.bind(this); + this.observe_(); + this.style.innerHTML = [ + '.' + ATTRIBUTE.CURSOR_ID + ' {', + ' outline: 3px solid gold !important;', + ' outline-offset: -3px !important;', + ' background-color: rgba(255, 255, 0, 0.4) !important;', + '}', + 'img.' + ATTRIBUTE.CURSOR_ID + ' {', + ' outline-offset: -3px !important;', + '}' + ].join('\n'); + } + View.prototype.handler_ = function (event) { + undisplayUrl(); + if (!exports.state()) { + return; + } + if (event.defaultPrevented) { + return; + } + if (isInserting(event.srcElement)) { + return; + } + var cursor = document.querySelector('.' + ATTRIBUTE.CURSOR_ID), entity = new ENTITY.Entity(this.id_), attribute = ATTRIBUTE.attribute(event, cursor); + if (attribute.command === 11 /* INVALID */) { + return; + } + if (!cursor && attribute.command === 8 /* ENTER */) { + return; + } + if (!cursor && attribute.command === 9 /* ENTER_S */) { + return; + } + event.preventDefault(); + event.stopImmediatePropagation(); + CONTROLLER.command(entity, attribute); + return; + function isInserting(elem) { + switch (elem.tagName.toLowerCase()) { + case 'input': + switch (elem.getAttribute('type')) { + case 'checkbox': + case 'radio': + case 'file': + case 'submit': + case 'reset': + case 'button': + case 'image': + case 'range': + case 'color': + return false; + } + return true; + case 'select': + return false; + case 'datalist': + case 'option': + case 'textarea': + return true; + } + switch (elem.getAttribute('role')) { + case 'textbox': + return true; + } + do { + if (elem.contentEditable === 'true') { + return true; + } + } while (elem = elem.parentElement); + return false; + } + }; + View.prototype.observe_ = function () { + this.target_.addEventListener('keydown', this.handler_, true); + }; + View.prototype.release_ = function () { + this.target_.removeEventListener('keydown', this.handler_, true); + }; + View.prototype.destructor = function () { + this.release_(); + delete views[this.id_]; + }; + View.prototype.update = function (command) { + if (!this.style.parentElement) { + document.head.appendChild(this.style); + } + var state = MODEL.store.state(this.id_), diff = MODEL.store.diff(this.id_); + var key; + while (key = diff.shift()) { + switch (key) { + case 'targets': + markTarget(state.targets); + } + } + function markTarget(targets) { + switch (command) { + case 0 /* UP */: + case 1 /* UP_S */: + case 2 /* DOWN */: + case 3 /* DOWN_S */: + case 4 /* LEFT */: + case 5 /* RIGHT */: + var target = targets[0]; + if (!target) { + break; + } + select(target); + target.scrollIntoViewIfNeeded(); + break; + case 6 /* EXPAND */: + MAP.map(targets, trigger, false); + break; + case 7 /* CONTRACT */: + MAP.map(targets, trigger, true); + break; + case 8 /* ENTER */: + trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), false, false); + break; + case 9 /* ENTER_S */: + trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), true, false); + break; + case 12 /* ENTER_C */: + trigger(document.querySelector('.' + ATTRIBUTE.CURSOR_ID), false, true); + break; + default: + unselect(); + } + return; + function select(elem) { + unselect(); + displayUrl(elem); + elem.classList.add(ATTRIBUTE.CURSOR_ID); + } + function unselect() { + var selector = document.querySelector('.' + ATTRIBUTE.CURSOR_ID); + if (!selector) { + return; + } + selector.classList.remove(ATTRIBUTE.CURSOR_ID); + undisplayUrl(); + } + function trigger(cursor, shiftKey, ctrlKey) { + if (!cursor) { + return; + } + if (!document.elementFromPoint(cursor.getBoundingClientRect().left, cursor.getBoundingClientRect().top)) { + return; + } + if (cursor.tagName.toLowerCase() === 'a' + || cursor.parentElement.tagName.toLowerCase() === 'a' + || cursor.onclick + || cursor.tagName.toLowerCase() === 'option' + || -1 < ['button'].indexOf(cursor.getAttribute('role'))) { + select(cursor); + } + else { + unselect(); + } + cursor.focus(); + click(cursor, shiftKey, ctrlKey); + } + } + }; + View.prototype.destroy = function () { + this.destructor(); + }; + return View; +})(); +exports.View = View; +function emit(entity, attribute) { + var viewId = entity.viewId; + if (viewId in views) { + views[viewId].update(attribute.command); + return true; + } + else { + return false; + } +} +exports.emit = emit; +function displayUrl(cursor) { + if (!cursor) { + return; + } + if (cursor.tagName.toLowerCase() !== 'a') { + return displayUrl(cursor.parentElement); + } + var display = document.createElement('span'); + display.id = ATTRIBUTE.URLDISPLAY_ID; + display.style.cssText = [ + 'position: fixed;', + 'z-index: 9999;', + 'left: 0px;', + 'bottom: 0px;', + 'min-width: 35%;', + 'padding: 3px 3px 0 3px;', + 'color: #ececec;', + 'background-color: #26272A;', + 'border-radius: 0;', + 'font-family: Meiryo, Helvetica, sans-serif;', + 'font-size: 11.5px;', + 'text-align: left;' + ] + .map(function (str) { return str.split(';')[0] + ' !important;'; }) + .join(''); + display.textContent = cursor.href; + document.body.appendChild(display); +} +function undisplayUrl() { + var display = document.querySelector('#' + ATTRIBUTE.URLDISPLAY_ID); + if (!display) { + return; + } + display.remove(); +} +function click(elem, shiftKey, ctrlKey) { + var target = elem.hasAttribute('target') && elem.getAttribute('target'); + if (elem.tagName.toLowerCase() === 'a') { + elem.removeAttribute('target'); + } + ["mouseover", "mousedown", "mouseup", "click"] + .forEach(function (sequence) { + var mouseEvent = document.createEvent("MouseEvents"); + mouseEvent.initMouseEvent(sequence, true, true, window, 1, 0, 0, 0, 0, ctrlKey, false, shiftKey, false, 0, null); + elem.dispatchEvent(mouseEvent); + }); + if (elem.tagName.toLowerCase() === 'a') { + typeof target === 'boolean' ? elem.removeAttribute('target') : elem.setAttribute('target', target); + } +} -},{"../attribute/attribute":2,"../controller/controller":3,"../entity/entity":5,"../model/model":8,"../state/module":9,"./map":11}]},{},[2,3,4,5,6,7,8,9,10,11,12]); -}("spatial-navigation", "0.4.7"); +},{"../attribute/attribute":2,"../controller/controller":3,"../entity/entity":5,"../model/model":8,"../state/module":9,"./map":11}]},{},[2,3,4,5,6,7,8,9,10,11,12,13]); +}("spatial-navigation", "0.4.7"); diff --git a/manifest.json b/manifest.json index 393361b..470eb47 100755 --- a/manifest.json +++ b/manifest.json @@ -1,18 +1,25 @@ { - "content_scripts": [ { - "js": [ "dist/raw/spatial-navigation.js" ], - "matches": [ "\u003Call_urls>" ], + "content_scripts": [ + { + "js": ["js/spatial-navigation.js"], + "matches": ["\u003Call_urls>"], "run_at": "document_end" - } ], - "icons": { - "32": "dist/raw/icon.png" - }, - "description": "Smart spatial navigation with key map to links. Bind WASDE and Q keys.", - "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx6DSv4W8kxjs8MIUus8LpnlmyrvwElLfsqUjGBzTpSe0iNNxTrrYR/PtgUHyJOlNxUadmhbg19wePB+b3ly0NE0HwTjJ/kFMVNEkl6wk1jJ7CedIHjAzbFO5oHgcSt8j4hrxh4KopFgAydwSqBT8ssPHFOBfuAl1+3o4fGA06z0wwbi/KUSSFuZFrM3tdv8qkpeSwnFvSaV5aZnF0Y+mEuiYhGBGfFWIpFwZDwTeLxmKJtlt2RD5YghqodfwG4dAIMknEC63OkzA7yMB3ZdEwysm9kAtCwfQdBRP1YuRE7H+lZR4cAspnddFKOnEj+FIifDD8rkw8vqzN8FroUcHRQIDAQAB", - "manifest_version": 2, - "name": "Spatial Navigation", - "permissions": [ "\u003Call_urls>" ], - "short_name": "spatial-navigation", - "update_url": "https://clients2.google.com/service/update2/crx", - "version": "0.4.7" + } + ], + "background": { + "scripts": ["js/background.js"], + "persistent": false + }, + "icons": { + "32": "img/icon.png" + }, + "description": "Smart spatial navigation with key map to links. Bind WASDE and Q keys.", + "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx6DSv4W8kxjs8MIUus8LpnlmyrvwElLfsqUjGBzTpSe0iNNxTrrYR/PtgUHyJOlNxUadmhbg19wePB+b3ly0NE0HwTjJ/kFMVNEkl6wk1jJ7CedIHjAzbFO5oHgcSt8j4hrxh4KopFgAydwSqBT8ssPHFOBfuAl1+3o4fGA06z0wwbi/KUSSFuZFrM3tdv8qkpeSwnFvSaV5aZnF0Y+mEuiYhGBGfFWIpFwZDwTeLxmKJtlt2RD5YghqodfwG4dAIMknEC63OkzA7yMB3ZdEwysm9kAtCwfQdBRP1YuRE7H+lZR4cAspnddFKOnEj+FIifDD8rkw8vqzN8FroUcHRQIDAQAB", + "manifest_version": 2, + "name": "Spatial Navigation", + "permissions": ["\u003Call_urls>", "storage"], + "short_name": "spatial-navigation", + "update_url": "https://clients2.google.com/service/update2/crx", + "version": "0.4.7", + "options_page": "options.html" } diff --git a/options.html b/options.html new file mode 100644 index 0000000..bccbfd5 --- /dev/null +++ b/options.html @@ -0,0 +1,101 @@ + + + + + + + Spatial Navigation Options + + + + +
+

Spatial Navigation Options

+
+
+ +
+

Keyboard Shortcuts

+
+
+
+ +
+ +
+ +
+ +
+
+ + Expand (Map Keys or Change Targets) + +
+
+
+ + Contract + +
+
+
+ + Quit + +
+
+
+ + Click + +
+
+
+ + Shift Click + +
+
+
+ + Control Click + +
+
+
+ + Disable the Hotkeys + +
+
+
+ +
+
+ + Reset All Settings to Defaults + +
+
+ + + + + \ No newline at end of file