added toggle bubble cursor feature Issue#7

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 () {
     });
 

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);
     };
 

options.html

@@ -22,6 +22,10 @@
     <p>Disable bubble cursor without refreshing page with '<span id="disableKey"></span>' key.</p>
     <p><input type="button" value="Change disable bubble cursor button" id="changeDisableKeyBtn"></p>
   </div>
+  <div>
+    <p>Toggle bubble cursor without refreshing page with '<span id="bubbleToggleKey"></span>' key.</p>
+    <p><input type="button" value="Change disable bubble cursor button" id="changeBubbleToggleKeyBtn"></p>
+  </div>
 </body>
 <script src="options.js"></script>
 </html>

options.js

@@ -4,26 +4,38 @@ 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) {
     disableKey.innerText = option.disableBubble.key;
   });
 };
 
-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,22 +64,31 @@ 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 () {
           refreshDisableBubbleButton();
         });
         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); });