mirror of
https://github.com/vale981/tridactyl
synced 2025-03-04 09:01:39 -05:00
added command text2qr which generates qr code for text
This commit is contained in:
parent
47744550d8
commit
69d5f5c5e1
5 changed files with 141 additions and 1 deletions
|
@ -1,6 +1,6 @@
|
|||
const esbuild = require('esbuild')
|
||||
|
||||
for (let f of ["content", "background", "help", "newtab", "reader", "commandline_frame"]) {
|
||||
for (let f of ["content", "background", "help", "newtab", "reader", "commandline_frame", "qrCodeGenerator"]) {
|
||||
esbuild.build({
|
||||
entryPoints: [`src/${f}.ts`],
|
||||
bundle: true,
|
||||
|
|
|
@ -5899,6 +5899,42 @@ export async function issue() {
|
|||
textarea.value = template
|
||||
}
|
||||
|
||||
/**
|
||||
* generates qr code for the given text
|
||||
*/
|
||||
//#content
|
||||
export async function text2qr(...args: string[]) {
|
||||
let text: string = null
|
||||
let isParsed = false
|
||||
let openMode = null
|
||||
while (!isParsed) {
|
||||
switch (args[0]) {
|
||||
case "--window":
|
||||
openMode = winopen
|
||||
args.shift()
|
||||
break
|
||||
case "--current":
|
||||
openMode = open
|
||||
args.shift()
|
||||
break
|
||||
default:
|
||||
isParsed = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!openMode) openMode = tabopen // default to new tab if no option provided
|
||||
|
||||
text = args.join(" ").trim()
|
||||
if (!text || text.length == 0) {
|
||||
text = window.location.href
|
||||
}
|
||||
const urlEncodedText = encodeURIComponent(text)
|
||||
const url = new URL(browser.runtime.getURL("static/qrcode.html"))
|
||||
url.searchParams.append("data", btoa(urlEncodedText))
|
||||
openMode(url.href)
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if there are any stable updates available for Tridactyl.
|
||||
*
|
||||
|
|
44
src/qrCodeGenerator.ts
Normal file
44
src/qrCodeGenerator.ts
Normal file
|
@ -0,0 +1,44 @@
|
|||
import QRCode from "../vendor/qrcode"
|
||||
import * as Logging from "@src/lib/logging"
|
||||
|
||||
const logger = new Logging.Logger("qrcode-display")
|
||||
|
||||
function displayError() {
|
||||
const errorDisplay: HTMLDivElement =
|
||||
document.querySelector("div#error-display")
|
||||
errorDisplay.classList.remove("hide")
|
||||
errorDisplay.innerHTML = "Unable to generate QR code for the given data"
|
||||
}
|
||||
|
||||
function setUpPage() {
|
||||
const imgElem: HTMLImageElement =
|
||||
document.querySelector("div#qr-canvas img")
|
||||
const anchorElem: HTMLAnchorElement =
|
||||
document.querySelector("div#qr-buttons a")
|
||||
const downloadButton: HTMLButtonElement = document.querySelector(
|
||||
"div#qr-buttons button",
|
||||
)
|
||||
|
||||
const url = new URL(window.location.href)
|
||||
let data = url.searchParams.get("data")
|
||||
data = decodeURIComponent(atob(data))
|
||||
const opts = {
|
||||
scale: 10,
|
||||
}
|
||||
|
||||
QRCode.toDataURL(data, opts, (error: Error, url: string) => {
|
||||
if (error) {
|
||||
logger.error(error)
|
||||
displayError()
|
||||
} else {
|
||||
imgElem.src = url
|
||||
anchorElem.href = url
|
||||
}
|
||||
})
|
||||
|
||||
downloadButton.addEventListener("click", function () {
|
||||
anchorElem.click()
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("load", setUpPage)
|
33
src/static/css/qrcode.css
Normal file
33
src/static/css/qrcode.css
Normal file
|
@ -0,0 +1,33 @@
|
|||
div.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div#qr-canvas {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.container div.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button#download {
|
||||
background: #2183ec;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
div.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.error {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
27
src/static/qrcode.html
Normal file
27
src/static/qrcode.html
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang="en" class="TridactylOwnNamespace">
|
||||
<title>QR Code display</title>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> </title>
|
||||
<link rel="stylesheet" href="css/qrcode.css">
|
||||
<link rel="stylesheet" href="css/content.css">
|
||||
<link rel="stylesheet" href="css/hint.css">
|
||||
<link rel="stylesheet" href="css/viewsource.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="qr-canvas">
|
||||
<img>
|
||||
</div>
|
||||
<div id="error-display" class="hide error">
|
||||
</div>
|
||||
<div class="buttons" id="qr-buttons">
|
||||
<a href="" download hidden></a>
|
||||
<button id="download">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../content.js"></script>
|
||||
<script src="../qrCodeGenerator.js"></script>
|
||||
</html>
|
Loading…
Add table
Reference in a new issue