refactor: switch to open on mousedown

raunofreiberg · Apr 29, 2020 · 4c81675 · 4c81675
1 parent f3dbc4e
commit 4c81675
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 32 deletions.
diff --git a/example/styles.css b/example/styles.css
@@ -42,7 +42,7 @@ input {
   color: #222328;
 }
 
-button {
+.login button {
   padding: 0 16px;
   background: #222328;
   height: 40px;

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.0.1-alpha.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/index.tsx b/src/index.tsx
@@ -43,56 +43,88 @@ function setOverlayPosition(
   overlayNode.style.setProperty('top', `${y}px`);
 }
 
-function Violation(props: { target: any; violations: Result[] }) {
-  const targetRef = React.useRef(null);
+function Violation({ target, violations }: { target: any; violations: Result[] }) {
   const [open, setOpen] = React.useState(false);
+  const targetRef = React.useRef<HTMLElement | null>(null);
+  const popoverRef = React.useRef<HTMLDivElement | null>(null);
+  const overlayRef = React.useRef<HTMLElement | null>(null);
 
-  function handleMouseEnter() {
-    setOpen(true);
+  function toggle() {
+    setOpen(prevOpen => !prevOpen);
   }
 
-  function handleMouseLeave() {
+  function close() {
     setOpen(false);
   }
 
   React.useEffect(() => {
-    const targetNode = document.querySelector(props.target);
+    const targetNode = document.querySelector(target);
+    const overlayNode = document.createElement('axe-mode-overlay');
+
     targetRef.current = targetNode;
+    overlayRef.current = overlayNode;
 
-    const overlayNode = document.createElement('axe-mode-overlay');
     const { observe, unobserve } = observeRect(targetNode, targetRect => {
       setOverlayPosition(overlayNode, targetRect);
     });
 
-    document.body.appendChild(overlayNode);
     observe();
-    overlayNode.addEventListener('mouseenter', handleMouseEnter);
-    overlayNode.addEventListener('mouseleave', handleMouseLeave);
+    document.body.appendChild(overlayNode);
+    overlayNode.addEventListener('mousedown', toggle);
 
     return () => {
-      document.body.removeChild(overlayNode);
       unobserve();
-      overlayNode.removeEventListener('mouseenter', handleMouseEnter);
-      overlayNode.removeEventListener('mouseleave', handleMouseLeave);
+      document.body.removeChild(overlayNode);
+      overlayNode.removeEventListener('mousedown', toggle);
+    };
+  }, [target]);
+
+  React.useEffect(() => {
+    function listener(e: MouseEvent) {
+      const eventTarget = e.target as Node;
+      const isTargetInPopover = eventTarget === overlayRef.current || popoverRef.current?.contains(eventTarget);
+
+      if (!isTargetInPopover) {
+        close();
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', listener);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
     };
-  }, [props.target]);
+  }, [open, target]);
 
   if (!open) {
     return null;
   }
 
   return (
-    <Popover targetRef={targetRef} className="popover">
-      <h1>{props.target}</h1>
-      {props.violations.map(violation => {
+    <Popover ref={popoverRef} targetRef={targetRef} className="popover">
+      <div className="controls">
+        <h1>{target}</h1>
+        <button className="close" aria-label="Close popover" onClick={close}>
+          <svg viewBox="0 0 24 24">
+            <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                fill="currentColor"
+                fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      {violations.map(violation => {
         const checksByNode = [
           // Array of checks that were made where at least one must have passed
           ...violation.nodes.filter(node =>
-            node.target.includes(props.target)
+            node.target.includes(target)
           )[0].any,
           // Array of checks that were made where all must have passed.
           ...violation.nodes.filter(node =>
-            node.target.includes(props.target)
+            node.target.includes(target)
           )[0].all,
         ];
 
@@ -124,6 +156,7 @@ export default function AxeMode({ children, disabled }: AxeModeProps) {
   const [violations, setViolations] = React.useState<Result[]>([]);
   const [idleId, setIdleId] = React.useState(null);
   const child = React.useRef(null);
+  const [interactive, setInteractive] = React.useState(false);
 
   React.useEffect(() => {
     if (disabled) {
@@ -151,12 +184,28 @@ export default function AxeMode({ children, disabled }: AxeModeProps) {
     }
   }, [children, disabled]);
 
+  React.useEffect(() => {
+    function listener(e: KeyboardEvent) {
+      if (e.ctrlKey && e.key === 'i') {
+        setInteractive(!interactive);
+      }
+    }
+
+    document.addEventListener('keydown', listener);
+
+    return () => {
+      document.removeEventListener('keydown', listener);
+    }
+  }, [interactive]);
+
   const violationsByNode = segmentViolationsByNode(violations);
 
-  if (disabled) {
+  if (disabled || interactive) {
     return <>{children}</>;
   }
 
+  console.log(violationsByNode);
+
   return (
     <>
       <span ref={child}>{children}</span>

diff --git a/src/styles.css b/src/styles.css
@@ -14,6 +14,7 @@ axe-mode-overlay {
   background: rgba(255, 91, 91, 0.2);
   border: 1px solid rgb(255, 91, 91);
   border-radius: 4px;
+  cursor: pointer;
 }
 
 .popover {
@@ -36,7 +37,6 @@ axe-mode-overlay {
 }
 
 .popover h1 {
-  margin-bottom: 16px;
   font-size: 24px;
 }
 
@@ -54,13 +54,18 @@ axe-mode-overlay {
   color: #6469FF;
 }
 
-code {
-  box-sizing: border-box;
-  font-size: 13px;
-  line-height: 20px;
-  padding-left: 5px;
-  padding-right: 5px;
-  background-color: rgb(229, 243, 255);
-  color: #6469FF;
-  border-radius: 3px;
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.close {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
 }