Skip to content

Commit

Permalink
Feature/line selections (#54)
Browse files Browse the repository at this point in the history
* Add line highlighting.

* Update cache for CSS
  • Loading branch information
EvieePy authored Jul 12, 2024
1 parent 8b627a0 commit 5896861
Show file tree
Hide file tree
Showing 8 changed files with 159 additions and 18 deletions.
2 changes: 1 addition & 1 deletion core/scanners.py
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ def validate_discord_token(token: str) -> bool:
try:
# Just check if the first part validates as a user ID
(user_id, _, _) = token.split(".")
user_id = int(base64.b64decode(user_id + "==", validate=True))
user_id = int(base64.b64decode(user_id + "=" * (len(user_id) % 4), validate=True))
except (ValueError, binascii.Error):
return False
else:
Expand Down
8 changes: 6 additions & 2 deletions views/htmx.py
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,19 @@ def highlight_code(self, *, files: list[dict[str, Any]]) -> str:
length: int = len(line)

if next_pos is not None and position <= next_pos <= position + length:
numbers.append(f"""<tr><td class="lineNumRow">{n}</td><td class="lineWarn"></td></tr>""")
numbers.append(
f"""<tr data-ln="{n}"><td class="lineNumRow" onclick="highlightLine(event, '{index}', '{n}')">{n}</td><td class="lineWarn"></td></tr>"""
)

try:
next_pos = positions.pop(0)
except IndexError:
next_pos = None

else:
numbers.append(f"""<tr><td class="lineNumRow">{n}</td></tr>""")
numbers.append(
f"""<tr data-ln="{n}"><td class="lineNumRow" onclick="highlightLine(event, '{index}', '{n}')">{n}</td></tr>"""
)

position += length + 1

Expand Down
4 changes: 2 additions & 2 deletions web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<!-- <link rel="preload" href="static/packages/htmx.min.js" as="script"> -->
<!-- <link rel="preload" href="static/packages/highlight.min.js" as="script"> -->
<!-- <link rel="preload" href="static/packages/highlight-ln.min.js" as="script"> -->
<script src="static/packages/htmx.min.js"></script>
<script src="/static/packages/htmx.min.js"></script>

<!-- SCRIPTS -->
<script src="/static/scripts/initialTheme.js?v=1"></script>
Expand All @@ -24,7 +24,7 @@
<!-- STYLESHEETS -->
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />

<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand Down
2 changes: 1 addition & 1 deletion web/maint.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<!-- STYLESHEETS -->
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
<link rel="stylesheet" type="text/css" href="static/styles/global.css?v=8" />
<link rel="stylesheet" type="text/css" href="static/styles/global.css?v=9" />


<!-- FONTS -->
Expand Down
2 changes: 1 addition & 1 deletion web/password.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<!-- STYLESHEETS -->
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />
<link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />

<!-- FONTS -->
Expand Down
5 changes: 3 additions & 2 deletions web/paste.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="description" content="Easily share code and text." />

<!-- PACKAGES -->
<script src="static/packages/htmx.min.js"></script>
<script src="/static/packages/htmx.min.js"></script>
<!-- <link rel="preload" href="static/packages/highlight.min.js" as="script"> -->
<!-- <link rel="preload" href="static/packages/highlight-ln.min.js" as="script"> -->
<script src="/static/packages/highlight.min.js"></script>
Expand All @@ -20,11 +20,12 @@
<script src="/static/scripts/hidecopy.js?v=1" defer></script>
<script src="/static/scripts/highlights.js?v=5" defer></script>
<script src="/static/scripts/shortcuts.js?v=1" defer></script>
<script src="/static/scripts/lineHighlights.js" defer></script>

<!-- STYLESHEETS -->
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />
<link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />

<!-- FONTS -->
Expand Down
119 changes: 119 additions & 0 deletions web/static/scripts/lineHighlights.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
let selections = {};

function parseLines() {
let params = new URLSearchParams(document.location.search);
let param = params.get("lines");

if (!param) {
return
}

const regex = /F(\d+)-L(\d+)(?:-L(\d+))?/g;
let match;
while ((match = regex.exec(param)) !== null) {
let file = parseInt(match[1]);
let start = parseInt(match[2]);
let end = match[3] ? parseInt(match[3]) : start;

if (isNaN(file) || isNaN(start) || isNaN(end)) {
continue;
}

highlightLine(null, file - 1, start);
if (start !== end) {
highlightLine(null, file - 1, end);
}
}
}

parseLines();

function removeSelected(lines) {
lines.forEach(line => {
let child = line.querySelector("td.lineSelected");
if (child) {
line.removeChild(child);
line.classList.remove("lineNumRowSelected");
}
});
}

function updateParams() {
const url = new URL(window.location);
let param = Object.entries(selections).map(([key, value]) => {
let end = value.end !== value.start ? `-L${value.end}_` : '';
return `F${parseInt(key) + 1}-L${value.start}${end}`;
}).join('');

url.searchParams.set("lines", param);
url.searchParams.delete("pastePassword");

history.pushState(null, '', url);
}

function replaceSelected(lines, idIndex, index, start, end) {
let newLines = lines.slice(start, end);
removeSelected(newLines);

let line = lines[index - 1];
line.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
line.classList.add("lineNumRowSelected");

selections[idIndex] = { "start": index, "end": index };
updateParams();
}

function addLines(lines, idIndex, start, end) {
let newLines = lines.slice(start - 1, end);
newLines.forEach(line => {
if (!line.querySelector("td.lineSelected")) {
line.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
line.classList.add("lineNumRowSelected");
}
});

selections[idIndex] = { "start": start, "end": end };
updateParams();
}

function highlightLine(event, idI, selected) {
let idIndex = parseInt(idI);
let id = `__paste_c_${idIndex}`;
let block = document.getElementById(id);

if (!block) {
return;
}

let lines = Array.from(block.querySelectorAll("tbody>tr"));
let line = Math.min(parseInt(selected), lines.length);

let current = selections[idIndex];
if (!current) {
let selectedLine = lines[line - 1];
selectedLine.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
selectedLine.classList.add("lineNumRowSelected");

selections[idIndex] = { "start": line, "end": line };
updateParams();
return;
}

let { start, end } = current;

if (event && !event.shiftKey) {
replaceSelected(lines, idIndex, line, start - 1, end);
return;
}

if (!event || event.shiftKey) {
if (line < start) {
removeSelected(lines.slice(start, end));
addLines(lines, idIndex, line, start);
} else if (line <= end) {
replaceSelected(lines, idIndex, line, start - 1, end);
} else {
addLines(lines, idIndex, start, line);
}
}
}
35 changes: 26 additions & 9 deletions web/static/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
--button--brightness: brightness(0.95);
--button--brightness-hover: brightness(0.85);
--button--brightness-active: brightness(0.95);
--color-line-hover: rgb(237, 219, 85, 0.2);
--color-line-selected: rgb(237, 219, 85, 0.2);

.keyboardLight {
display: none !important;
Expand Down Expand Up @@ -70,6 +72,8 @@
--button--brightness: brightness(1.2);
--button--brightness-hover: brightness(1.1);
--button--brightness-active: brightness(1.1);
--color-line-hover: rgb(237, 219, 85, 0.1);
--color-line-selected: rgb(237, 219, 85, 0.1);

.keyboardDark {
display: none !important;
Expand Down Expand Up @@ -461,10 +465,6 @@ textarea {
font-family: "JetBrains Mono", monospace;
}

.code {
font-family: "JetBrains Mono", monospace;
}

.pre {
font-family: "JetBrains Mono", monospace;
}
Expand Down Expand Up @@ -566,8 +566,8 @@ textarea {
border-spacing: 0;
border: none;
font-family: "JetBrains Mono", monospace;
font-size: 0.8rem;
line-height: 1.2rem;
font-size: 0.75rem;
line-height: 1.1rem;
user-select: none;
}

Expand All @@ -577,19 +577,36 @@ textarea {
opacity: 0.7;
}

.lineNumRow:hover {
cursor: pointer;
background-color: var(--color-line-hover);
}

.lineNumRowSelected {
background: var(--color-line-selected);
}

.lineSelected {
background: var(--color-line-selected);
position: absolute;
width: 100%;
z-index: 1;
height: 1.1rem;
}

.lineWarn {
background: var(--color-error);
position: absolute;
width: 100%;
z-index: 1;
height: 1rem;
height: 1.1rem;
opacity: 0.4;
}

code {
font-family: "JetBrains Mono", monospace;
font-size: 0.8rem;
line-height: 1.2rem;
font-size: 0.75rem;
line-height: 1.1rem;
z-index: 2;
}

Expand Down

0 comments on commit 5896861

Please sign in to comment.