1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-27 08:39:00 +02:00

focus is a clusterfuck

This commit is contained in:
Pomax
2020-08-11 17:16:39 -07:00
parent 09fa4991a7
commit 9b2d0241e6
3 changed files with 21 additions and 67 deletions

View File

@@ -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();