mirror of
https://github.com/vale981/tridactyl
synced 2025-03-04 17:11:40 -05:00
added command text2qr which generates qr code for text
This commit is contained in:
satyamk
parent
47744550d8
commit
69d5f5c5e1
5 changed files with 141 additions and 1 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
const esbuild = require('esbuild')
|
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({
|
esbuild.build({
|
||||||
entryPoints: [`src/${f}.ts`],
|
entryPoints: [`src/${f}.ts`],
|
||||||
bundle: true,
|
bundle: true,
|
||||||
|
|
|
||||||
|
|
@ -5899,6 +5899,42 @@ export async function issue() {
|
||||||
textarea.value = template
|
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.
|
* 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