focus is a clusterfuck

lib/custom-element/api/base-api.js

@@ -23,7 +23,6 @@ class BaseAPI {
     const priv = this.privateMethods;
     const names = Object.getOwnPropertyNames(this.prototype).concat([
       `setSize`,
-      `showFocus`,
       `redraw`,
     ]);
     return names.filter((v) => priv.indexOf(v) < 0);
@@ -63,7 +62,7 @@ class BaseAPI {
 
     this.cursor = {};
 
-    const release = typeof document !== "undefined" ? document : canvas;
+    const root = typeof document !== "undefined" ? document : canvas;
 
     [`touchstart`, `mousedown`].forEach((evtName) =>
       canvas.addEventListener(evtName, (evt) => this.onMouseDown(evt))
@@ -74,7 +73,7 @@ class BaseAPI {
     );
 
     [`touchend`, `mouseup`].forEach((evtName) =>
-      release.addEventListener(evtName, (evt) => this.onMouseUp(evt))
+      root.addEventListener(evtName, (evt) => this.onMouseUp(evt))
     );
 
     this.keyboard = {};
@@ -84,7 +83,7 @@ class BaseAPI {
     );
 
     [`keyup`].forEach((evtName) =>
-      release.addEventListener(evtName, (evt) => this.onKeyUp(evt))
+      canvas.addEventListener(evtName, (evt) => this.onKeyUp(evt))
     );
   }
 
@@ -179,57 +178,6 @@ class BaseAPI {
     this.keyboard.currentKey = evt.key;
   }
 
-  /**
-   * Determine whether or not the canva should be focussed when interacted with.
-   */
-  showFocus(show = true) {
-    if (show === false) {
-      return this.noFocus();
-    }
-
-    const canvas = this.canvas;
-    canvas.setAttribute(`tabIndex`, 0);
-    canvas.classList.add(`focus-enabled`);
-    canvas._force_listener = () => {
-      /*
-      // I have NO idea why forceFocus() causes a scroll, but
-      // I don't have time to dig into what is no doubt deep
-      // black spec magic, so: check where we are, force the
-      // focus() state, and then force the scroll position to
-      // what it should be.
-      const x = Math.round(window.scrollX);
-      const y = Math.round(window.scrollY);
-      // Oh yeah... using round() because apparently scrollTo
-      // is not NOT idempotent and rounding errors cause it to
-      // drift. IT'S FUCKING HILARIOUS
-      */
-      this.forceFocus();
-      /*
-      window.scrollTo(x, y);
-      */
-    };
-    [`touchstart`, `mousedown`].forEach((evtName) =>
-      canvas.addEventListener(evtName, canvas._force_listener)
-    );
-  }
-
-  noFocus() {
-    const canvas = this.canvas;
-    canvas.removeAttribute(`tabIndex`);
-    canvas.classList.remove(`focus-enabled`);
-    [`touchstart`, `mousedown`].forEach((evtName) =>
-      canvas.removeEventListener(evtName, canvas._force_listener)
-    );
-  }
-
-  /**
-   * Force the browser to .focus() on the canvas, as focus
-   * from custom elements is ... unreliable?
-   */
-  forceFocus() {
-    this.canvas.focus();
-  }
-
   /**
    * This function is critical in correctly sizing the canvas.
    */
@@ -249,7 +197,6 @@ class BaseAPI {
    */
   setup() {
     // console.log(`setup`);
-    this.showFocus();
     this.moveable = [];
   }
 

lib/custom-element/custom-element.js

@@ -93,10 +93,7 @@ class CustomElement extends HTMLElement {
     // Set up an open shadow DOM, because the web is open,
     // and hiding your internals is ridiculous.
 
-    const shadowProps = {
-      mode: `open`,
-      delegatesFocus: !!this._options.focus,
-    };
+    const shadowProps = { mode: `open` };
 
     this._shadow = this.attachShadow(shadowProps);
     this._style = document.createElement(`style`);

lib/custom-element/graphics-element.js

@@ -17,7 +17,7 @@ CustomElement.register(class ProgramCode extends HTMLElement {});
  */
 class GraphicsElement extends CustomElement {
   constructor() {
-    super({ header: false, footer: false, focus: true });
+    super({ header: false, footer: false });
     this.loadSource();
     if (this.title) {
       this.label = document.createElement(`label`);
@@ -29,15 +29,11 @@ class GraphicsElement extends CustomElement {
    * part of the CustomElement API
    */
   getStyle() {
-    // TODO: document the "focus-css" attribute
     return `
       :host([hidden]) { display: none; }
       :host style { display: none; }
-      :host canvas { display: block; margin: auto; border-radius: 0; }
-      :host canvas:focus { ${
-        this.getAttribute(`focus-css`) ||
-        `border: 1px solid red !important;  margin: -1px; `
-      } }
+      :host canvas { display: block; margin: auto; border-radius: 0; box-sizing: content-box; }
+      :host canvas:focus { border: 1px solid red; margin:-1px; }
       :host a.view-source { float: left; font-size: 60%; text-decoration: none; }
       :host label { display: block; font-style:italic; font-size: 0.9em; text-align: right; }
     `;
@@ -180,6 +176,20 @@ class GraphicsElement extends CustomElement {
    */
   setCanvas(canvas) {
     this.canvas = canvas;
+    // Make sure focus works, Which is a CLUSTERFUCK OF BULLSHIT in the August, 2020,
+    // browser landscape, so this is the best I can give you right now. I am more
+    // disappointed about this than you will ever be.
+    this.canvas.setAttribute(`tabindex`, `0`);
+    const fixedFocus = evt => {
+      if (evt.target===this.canvas) {
+        const x = window.scrollX;
+        const y = window.scrollY;
+        this.canvas.focus();
+        window.scrollTo(x,y);
+      }
+    }
+    this.canvas.addEventListener(`touchstart`, fixedFocus);
+    this.canvas.addEventListener(`mousedown`, fixedFocus);
     // If we get here, there were no source code errors: undo the scheduled error print.
     clearTimeout(this.errorPrintTimeout);
     this.render();