added command text2qr which generates qr code for text

This commit is contained in:
satyamk 2023-06-12 00:35:45 +05:30
parent 47744550d8
commit 69d5f5c5e1
5 changed files with 141 additions and 1 deletions

View file

@ -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,

View file

@ -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
View 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
View 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
View file

@ -0,0 +1,27 @@
<!doctype html>
<html lang="en" class="TridactylOwnNamespace">
<title>QR Code display</title>
<head>
<meta charset="utf-8">
<title>&nbsp;</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>