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:
@@ -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();
|
||||
|
Reference in New Issue
Block a user