From cc2a898ea14d2cb72786e4fd5bf9f3b7df1e8e33 Mon Sep 17 00:00:00 2001 From: NirobNabil Date: Mon, 4 Oct 2021 01:40:00 +0600 Subject: [PATCH] added toggle bubble cursor feature Issue#7 --- background.js | 3 +++ lib/bubble.js | 40 ++++++++++++++++++++++++++++++++++++- options.html | 4 ++++ options.js | 55 +++++++++++++++++++++++++++++++++++++-------------- 4 files changed, 86 insertions(+), 16 deletions(-) diff --git a/background.js b/background.js index cf8421a..fe8a239 100644 --- a/background.js +++ b/background.js @@ -5,6 +5,9 @@ chrome.runtime.onInstalled.addListener(function () { chrome.storage.sync.set({ disableBubble: { key: 's', keyCode: 115 } }, function () { }); + chrome.storage.sync.set({ toggleBubble: { key: 'q', keyCode: 113 } }, function () { + }); + chrome.storage.sync.set({ persistent: { persistVisual: true } }, function () { }); diff --git a/lib/bubble.js b/lib/bubble.js index 94aa540..012f6b8 100644 --- a/lib/bubble.js +++ b/lib/bubble.js @@ -6,6 +6,8 @@ var clicked = false; var circ; var lastMousePos = null; + // as i am calling createcircle multiple times asynchronously, i thought keeping track of existences of the circle in the DOM will be a good idea. + var circExistsInDom = false; let pointPointDist = function (x1, y1, x2, y2) { var x = x1 - x2; @@ -43,6 +45,7 @@ }; let createCircle = function () { + if(circExistsInDom) return; circ = window.DomUtils.createElement('div'); var props = { position: 'absolute', borderRadius: '999px', @@ -56,8 +59,15 @@ } window.DomUtils.addElementList([circ], {}); + circExistsInDom = true; }; + let removeCircle = function () { + if(!circExistsInDom) return; + window.DomUtils.removeElement(circ); + circExistsInDom = false; + } + let refreshLinks = function () { links = updateRects(window.LocalHints.getLocalHints(false)); refreshBubble(lastMousePos); @@ -82,6 +92,8 @@ }; let loadSettings = function () { + // is it okkay to keep a listener always listening for toogle event? + addToggleListenerEvent(); chrome.storage.sync.get(['bubbleCursor'], function (data) { if (data.bubbleCursor.enabled === true) { addBubbleCursorEvents(); @@ -98,6 +110,27 @@ circ.style.display = visible ? 'block' : 'none'; }; + // standalone listener that never gets removed + const toggleListener = function (e) { + const code = (e.keyCode ? e.keyCode : e.which); + chrome.storage.sync.get(['toggleBubble', 'bubbleCursor', 'persistent'], function (obj) { + if (code == obj.toggleBubble.keyCode) { + const isEnabled = !obj.bubbleCursor.enabled; + chrome.storage.sync.set({ bubbleCursor: { enabled: isEnabled } }, function () { + if (isEnabled) { + createCircle(); + addBubbleCursorEvents(); + const isVisible = obj.persistent.persistVisual; + setBubbleVisibility(isVisible); + } else { + removeCircle(); + removeBubbleCursorEvents(); + } + }); + } + }); + } + let onKeyPress = function (e) { var code = (e.keyCode ? e.keyCode : e.which); chrome.storage.sync.get(['isVisible'], function (obj) { @@ -114,6 +147,7 @@ removeBubbleCursorEvents(); } }); + }; let onMouseClick = function (e) { @@ -163,6 +197,10 @@ } }; + const addToggleListenerEvent = function () { + document.addEventListener('keypress', toggleListener, false); + } + let addBubbleCursorEvents = function () { document.addEventListener('keypress', onKeyPress, false); document.addEventListener('click', onMouseClick, false); @@ -176,7 +214,7 @@ document.removeEventListener('click', onMouseClick, false); document.removeEventListener('mousemove', onMouseMove, false); window.removeEventListener('scroll', refreshLinks); - window.DomUtils.removeElement(circ); + removeCircle(); //might want to move this line somewhere else? shouldn't this function only remove the events, not dom elements? clearClosestElementHighlighting(prevClosest.element); }; diff --git a/options.html b/options.html index ebb8f4b..0b073ef 100644 --- a/options.html +++ b/options.html @@ -22,6 +22,10 @@

Disable bubble cursor without refreshing page with '' key.

+
+

Toggle bubble cursor without refreshing page with '' key.

+

+
\ No newline at end of file diff --git a/options.js b/options.js index af710e6..26775c5 100644 --- a/options.js +++ b/options.js @@ -4,11 +4,15 @@ let changeKeyBtn = document.getElementById('changeKeyBtn'); let disableKey = document.getElementById('disableKey'); let disableKeyBtn = document.getElementById('changeDisableKeyBtn'); -let refreshShowCircleButton = function () { - chrome.storage.sync.get(['showCircle'], function (option) { - toggleKey.innerText = option.showCircle.key; - }); -}; +let bubbleToggleKey = document.getElementById('bubbleToggleKey'); +let bubbleToggleKeyBtn = document.getElementById('changeBubbleToggleKeyBtn'); + +// there is not "showCircle" field in background.js +// let refreshShowCircleButton = function () { +// chrome.storage.sync.get(['showCircle'], function (option) { +// toggleKey.innerText = option.showCircle.key; +// }); +// }; let refreshDisableBubbleButton = function () { chrome.storage.sync.get(['disableBubble'], function (option) { @@ -16,14 +20,22 @@ let refreshDisableBubbleButton = function () { }); }; -refreshShowCircleButton(); +let refreshToggleBubbleButton = function () { + chrome.storage.sync.get(['toggleBubble'], function (option) { + bubbleToggleKey.innerText = option.toggleBubble.key; + }); +}; + +// refreshShowCircleButton(); refreshDisableBubbleButton(); +refreshToggleBubbleButton(); let waitForKeyInput = 0; let waitKeyFor = 0; let newKeyForToggleCircle = 1; let newKeyForDisableBubble = 2; +let newKeyForToggleBubble = 3; function recordNewKey(keyFor) { if (waitForKeyInput == 0) { @@ -35,6 +47,9 @@ function recordNewKey(keyFor) { } else if (keyFor === newKeyForDisableBubble) { disableKeyBtn.value = 'Press any key'; disableKeyBtn.disabled = true; + } else if (keyFor === newKeyForToggleBubble) { + bubbleToggleKeyBtn.value = 'Press any key'; + bubbleToggleKeyBtn.disabled = true; } waitKeyFor = keyFor; @@ -49,15 +64,16 @@ function newKeyPressed(e) { if (waitForKeyInput == 1) { let kcode = (e.keyCode ? e.keyCode : e.which); - if (waitKeyFor == newKeyForToggleCircle) { - chrome.storage.sync.set( - { showCircle: { key: e.key, keyCode: kcode } }, - function () { - refreshShowCircleButton(); - }); - changeKeyBtn.value = 'Change bubble toggle button'; - changeKeyBtn.disabled = false; - } else if (waitKeyFor == newKeyForDisableBubble) { + // if (waitKeyFor == newKeyForToggleCircle) { + // chrome.storage.sync.set( + // { showCircle: { key: e.key, keyCode: kcode } }, + // function () { + // refreshShowCircleButton(); + // }); + // changeKeyBtn.value = 'Change bubble toggle button'; + // changeKeyBtn.disabled = false; + // } else + if (waitKeyFor == newKeyForDisableBubble) { chrome.storage.sync.set( { disableBubble: { key: e.key, keyCode: kcode } }, function () { @@ -65,6 +81,14 @@ function newKeyPressed(e) { }); disableKeyBtn.value = 'Change disable bubble cursor button'; disableKeyBtn.disabled = false; + }else if (waitKeyFor == newKeyForToggleBubble) { + chrome.storage.sync.set( + { toggleBubble: { key: e.key, keyCode: kcode } }, + function () { + refreshToggleBubbleButton(); + }); + bubbleToggleKeyBtn.value = 'Change toggle bubble cursor button'; + bubbleToggleKeyBtn.disabled = false; } waitForKeyInput = 0; @@ -73,4 +97,5 @@ function newKeyPressed(e) { document.getElementById('changeKeyBtn').addEventListener('click', function () { recordNewKey(newKeyForToggleCircle); }); document.getElementById('changeDisableKeyBtn').addEventListener('click', function () { recordNewKey(newKeyForDisableBubble); }); +document.getElementById('changeBubbleToggleKeyBtn').addEventListener('click', function () { recordNewKey(newKeyForToggleBubble); }); document.getElementById('bd').addEventListener('keypress', function () { newKeyPressed(event); }); \ No newline at end of file