Skip to content

Commit 6e2b9fa

Browse files
stragerstrager
committed
Website: factor error box code into reusable module
I want to show error boxes on hover on more pages, not just the demo page. Move the JavaScript code into its own file and the CSS into main.css so the code can be reused. This commit should not change behavior.
1 parent 5ad67be commit 6e2b9fa

File tree

4 files changed

+98
-77
lines changed

4 files changed

+98
-77
lines changed

‎website/public/demo/demo.mjs‎

Lines changed: 1 addition & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
import { createProcessFactoryAsync } from "../../wasm/quick-lint-js.js";
55
import { markEditorText } from "./editor.mjs";
6+
import {} from "../error-box.mjs";
67

78
let codeInputElement = document.getElementById("code-input");
89
let shadowCodeInputElement = document.getElementById("shadow-code-input");
@@ -88,73 +89,6 @@ function synchronizeSize() {
8889
shadowCodeInputElement.style.height = codeInputElement.style.height;
8990
}
9091

91-
function showErrorMessageBox(mark, posCursorX) {
92-
const div = createErrorBox(
93-
mark,
94-
posCursorX,
95-
mark.attributes["data-message"].value,
96-
mark.attributes["data-code"].value,
97-
mark.attributes["data-severity"].value
98-
);
99-
let body = document.querySelector("body");
100-
body.appendChild(div);
101-
}
102-
103-
function createErrorBox(
104-
markedElement,
105-
posCursorX,
106-
errorMessage,
107-
code,
108-
severity
109-
) {
110-
// TODO: Change background color based of the severity
111-
let div = document.createElement("div");
112-
const { bottom } = markedElement.getBoundingClientRect();
113-
div.setAttribute("id", "error-box");
114-
div.innerText = `${code} - ${errorMessage}`;
115-
div.style.position = "fixed";
116-
div.style.overflow = "auto";
117-
div.style.top = `${Math.trunc(bottom)}px`;
118-
div.style.left = `${posCursorX}px`;
119-
return div;
120-
}
121-
122-
function removeErrorMessageBox() {
123-
let errorBoxElement = document.querySelector("#error-box");
124-
if (errorBoxElement !== null) {
125-
errorBoxElement.remove();
126-
}
127-
}
128-
129-
function showErrorMessage(event) {
130-
removeErrorMessageBox();
131-
132-
const shadowInput = document.querySelector("#shadow-code-input");
133-
const marks = shadowInput.querySelectorAll("mark");
134-
for (let mark of marks) {
135-
const markRect = mark.getBoundingClientRect();
136-
if (cursorOverMark(event.clientX, event.clientY, markRect)) {
137-
showErrorMessageBox(mark, event.clientX);
138-
break;
139-
}
140-
}
141-
}
142-
143-
function cursorOverMark(cursorPosX, cursorPosY, markRect) {
144-
const topDownIn = markRect.bottom >= cursorPosY && cursorPosY >= markRect.top;
145-
const leftRightIn =
146-
cursorPosX >= markRect.left && cursorPosX <= markRect.left + markRect.width;
147-
return topDownIn && leftRightIn;
148-
}
149-
150-
document.addEventListener("DOMContentLoaded", () => {
151-
const codeInput = document.querySelector("#code-input");
152-
codeInput.addEventListener("mousemove", showErrorMessage);
153-
codeInput.addEventListener("input", removeErrorMessageBox);
154-
codeInput.addEventListener("click", removeErrorMessageBox);
155-
codeInput.addEventListener("mouseout", removeErrorMessageBox);
156-
});
157-
15892
// quick-lint-js finds bugs in JavaScript programs.
15993
// Copyright (C) 2020 Matthew "strager" Glazar
16094
//

‎website/public/demo/index.ejs.html‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,6 @@
5252
position: absolute;
5353
}
5454

55-
#error-box {
56-
background-color: #252526;
57-
color: yellow;
58-
border: 1px solid #fff;
59-
padding: 5px;
60-
font-size: 0.8rem;
61-
max-width: 300px;
62-
z-index: 999999;
63-
}
64-
6555
#shadow-code-input {
6656
background-color: rgba(0, 0, 0, 0.05);
6757
}

‎website/public/error-box.mjs‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
// Copyright (C) 2020 Matthew "strager" Glazar
2+
// See end of file for extended copyright information.
3+
4+
function showErrorMessageBox(mark, posCursorX) {
5+
const div = createErrorBox(
6+
mark,
7+
posCursorX,
8+
mark.attributes["data-message"].value,
9+
mark.attributes["data-code"].value,
10+
mark.attributes["data-severity"].value
11+
);
12+
let body = document.querySelector("body");
13+
body.appendChild(div);
14+
}
15+
16+
function createErrorBox(
17+
markedElement,
18+
posCursorX,
19+
errorMessage,
20+
code,
21+
severity
22+
) {
23+
// TODO: Change background color based of the severity
24+
let div = document.createElement("div");
25+
const { bottom } = markedElement.getBoundingClientRect();
26+
div.setAttribute("id", "error-box");
27+
div.innerText = `${code} - ${errorMessage}`;
28+
div.style.position = "fixed";
29+
div.style.overflow = "auto";
30+
div.style.top = `${Math.trunc(bottom)}px`;
31+
div.style.left = `${posCursorX}px`;
32+
return div;
33+
}
34+
35+
function removeErrorMessageBox() {
36+
let errorBoxElement = document.querySelector("#error-box");
37+
if (errorBoxElement !== null) {
38+
errorBoxElement.remove();
39+
}
40+
}
41+
42+
function showErrorMessage(event) {
43+
removeErrorMessageBox();
44+
45+
const shadowInput = document.querySelector("#shadow-code-input");
46+
const marks = shadowInput.querySelectorAll("mark");
47+
for (let mark of marks) {
48+
const markRect = mark.getBoundingClientRect();
49+
if (cursorOverMark(event.clientX, event.clientY, markRect)) {
50+
showErrorMessageBox(mark, event.clientX);
51+
break;
52+
}
53+
}
54+
}
55+
56+
function cursorOverMark(cursorPosX, cursorPosY, markRect) {
57+
const topDownIn = markRect.bottom >= cursorPosY && cursorPosY >= markRect.top;
58+
const leftRightIn =
59+
cursorPosX >= markRect.left && cursorPosX <= markRect.left + markRect.width;
60+
return topDownIn && leftRightIn;
61+
}
62+
63+
document.addEventListener("DOMContentLoaded", () => {
64+
const codeInput = document.querySelector("#code-input");
65+
codeInput.addEventListener("mousemove", showErrorMessage);
66+
codeInput.addEventListener("input", removeErrorMessageBox);
67+
codeInput.addEventListener("click", removeErrorMessageBox);
68+
codeInput.addEventListener("mouseout", removeErrorMessageBox);
69+
});
70+
71+
// quick-lint-js finds bugs in JavaScript programs.
72+
// Copyright (C) 2020 Matthew "strager" Glazar
73+
//
74+
// This file is part of quick-lint-js.
75+
//
76+
// quick-lint-js is free software: you can redistribute it and/or modify
77+
// it under the terms of the GNU General Public License as published by
78+
// the Free Software Foundation, either version 3 of the License, or
79+
// (at your option) any later version.
80+
//
81+
// quick-lint-js is distributed in the hope that it will be useful,
82+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
83+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
84+
// GNU General Public License for more details.
85+
//
86+
// You should have received a copy of the GNU General Public License
87+
// along with quick-lint-js. If not, see <https://www.gnu.org/licenses/>.

‎website/public/main.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,16 @@ kbd.keystroke {
378378
}
379379
}
380380

381+
#error-box {
382+
background-color: #252526;
383+
color: yellow;
384+
border: 1px solid #fff;
385+
padding: 5px;
386+
font-size: 0.8rem;
387+
max-width: 300px;
388+
z-index: 999999;
389+
}
390+
381391
@media only screen and (min-width: 34em) and (max-width: 40em) {
382392
.os-column-table ul {
383393
margin-left: 0;

0 commit comments

Comments
 (0)