Tweaked {JavaScript, TypeScript, HTML} code to encapsulate the application members.
This commit is contained in:
Project Nayuki
parent
3ab5e7827c
commit
6d79c97c42
|
|
@ -24,140 +24,143 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
function initialize() {
|
||||
var elems = document.querySelectorAll("input[type=number], textarea");
|
||||
for (var i = 0; i < elems.length; i++) {
|
||||
if (elems[i].id.indexOf("version-") != 0)
|
||||
elems[i].oninput = redrawQrCode;
|
||||
}
|
||||
elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
|
||||
for (var i = 0; i < elems.length; i++)
|
||||
elems[i].onchange = redrawQrCode;
|
||||
redrawQrCode();
|
||||
}
|
||||
var app = new function() {
|
||||
|
||||
|
||||
function redrawQrCode() {
|
||||
// Show/hide rows based on bitmap/vector image output
|
||||
var bitmapOutput = document.getElementById("output-format-bitmap").checked;
|
||||
var scaleRow = document.getElementById("scale-row");
|
||||
var svgXmlRow = document.getElementById("svg-xml-row");
|
||||
if (bitmapOutput) {
|
||||
scaleRow.style.removeProperty("display");
|
||||
svgXmlRow.style.display = "none";
|
||||
} else {
|
||||
scaleRow.style.display = "none";
|
||||
svgXmlRow.style.removeProperty("display");
|
||||
}
|
||||
var svgXml = document.getElementById("svg-xml-output");
|
||||
svgXml.value = "";
|
||||
|
||||
// Reset output images in case of early termination
|
||||
var canvas = document.getElementById("qrcode-canvas");
|
||||
var svg = document.getElementById("qrcode-svg");
|
||||
canvas.style.display = "none";
|
||||
svg.style.display = "none";
|
||||
|
||||
// Returns a QrCode.Ecc object based on the radio buttons in the HTML form.
|
||||
function getInputErrorCorrectionLevel() {
|
||||
if (document.getElementById("errcorlvl-medium").checked)
|
||||
return qrcodegen.QrCode.Ecc.MEDIUM;
|
||||
else if (document.getElementById("errcorlvl-quartile").checked)
|
||||
return qrcodegen.QrCode.Ecc.QUARTILE;
|
||||
else if (document.getElementById("errcorlvl-high").checked)
|
||||
return qrcodegen.QrCode.Ecc.HIGH;
|
||||
else // In case no radio button is depressed
|
||||
return qrcodegen.QrCode.Ecc.LOW;
|
||||
}
|
||||
|
||||
// Get form inputs and compute QR Code
|
||||
var ecl = getInputErrorCorrectionLevel();
|
||||
var text = document.getElementById("text-input").value;
|
||||
var segs = qrcodegen.QrSegment.makeSegments(text);
|
||||
var minVer = parseInt(document.getElementById("version-min-input").value, 10);
|
||||
var maxVer = parseInt(document.getElementById("version-max-input").value, 10);
|
||||
var mask = parseInt(document.getElementById("mask-input").value, 10);
|
||||
var boostEcc = document.getElementById("boost-ecc-input").checked;
|
||||
var qr = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc);
|
||||
|
||||
// Draw image output
|
||||
var border = parseInt(document.getElementById("border-input").value, 10);
|
||||
if (border < 0 || border > 100)
|
||||
return;
|
||||
if (bitmapOutput) {
|
||||
var scale = parseInt(document.getElementById("scale-input").value, 10);
|
||||
if (scale <= 0 || scale > 30)
|
||||
return;
|
||||
qr.drawCanvas(scale, border, canvas);
|
||||
canvas.style.removeProperty("display");
|
||||
} else {
|
||||
var code = qr.toSvgString(border);
|
||||
svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]);
|
||||
svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]);
|
||||
svg.style.removeProperty("display");
|
||||
svgXml.value = qr.toSvgString(border);
|
||||
}
|
||||
|
||||
// Returns a string to describe the given list of segments.
|
||||
function describeSegments(segs) {
|
||||
if (segs.length == 0)
|
||||
return "none";
|
||||
else if (segs.length == 1) {
|
||||
var mode = segs[0].mode;
|
||||
var Mode = qrcodegen.QrSegment.Mode;
|
||||
if (mode == Mode.NUMERIC ) return "numeric";
|
||||
if (mode == Mode.ALPHANUMERIC) return "alphanumeric";
|
||||
if (mode == Mode.BYTE ) return "byte";
|
||||
if (mode == Mode.KANJI ) return "kanji";
|
||||
return "unknown";
|
||||
} else
|
||||
return "multiple";
|
||||
}
|
||||
|
||||
// Returns the number of Unicode code points in the given UTF-16 string.
|
||||
function countUnicodeChars(str) {
|
||||
var result = 0;
|
||||
for (var i = 0; i < str.length; i++, result++) {
|
||||
var c = str.charCodeAt(i);
|
||||
if (c < 0xD800 || c >= 0xE000)
|
||||
continue;
|
||||
else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate
|
||||
i++;
|
||||
var d = str.charCodeAt(i);
|
||||
if (0xDC00 <= d && d < 0xE000) // Low surrogate
|
||||
continue;
|
||||
}
|
||||
throw "Invalid UTF-16 string";
|
||||
function initialize() {
|
||||
var elems = document.querySelectorAll("input[type=number], textarea");
|
||||
for (var i = 0; i < elems.length; i++) {
|
||||
if (elems[i].id.indexOf("version-") != 0)
|
||||
elems[i].oninput = redrawQrCode;
|
||||
}
|
||||
return result;
|
||||
elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
|
||||
for (var i = 0; i < elems.length; i++)
|
||||
elems[i].onchange = redrawQrCode;
|
||||
redrawQrCode();
|
||||
}
|
||||
|
||||
// Show the QR Code symbol's statistics as a string
|
||||
var stats = "QR Code version = " + qr.version + ", ";
|
||||
stats += "mask pattern = " + qr.mask + ", ";
|
||||
stats += "character count = " + countUnicodeChars(text) + ",\n";
|
||||
stats += "encoding mode = " + describeSegments(segs) + ", ";
|
||||
stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", ";
|
||||
stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + ".";
|
||||
document.getElementById("statistics-output").textContent = stats;
|
||||
|
||||
function redrawQrCode() {
|
||||
// Show/hide rows based on bitmap/vector image output
|
||||
var bitmapOutput = document.getElementById("output-format-bitmap").checked;
|
||||
var scaleRow = document.getElementById("scale-row");
|
||||
var svgXmlRow = document.getElementById("svg-xml-row");
|
||||
if (bitmapOutput) {
|
||||
scaleRow.style.removeProperty("display");
|
||||
svgXmlRow.style.display = "none";
|
||||
} else {
|
||||
scaleRow.style.display = "none";
|
||||
svgXmlRow.style.removeProperty("display");
|
||||
}
|
||||
var svgXml = document.getElementById("svg-xml-output");
|
||||
svgXml.value = "";
|
||||
|
||||
// Reset output images in case of early termination
|
||||
var canvas = document.getElementById("qrcode-canvas");
|
||||
var svg = document.getElementById("qrcode-svg");
|
||||
canvas.style.display = "none";
|
||||
svg.style.display = "none";
|
||||
|
||||
// Returns a QrCode.Ecc object based on the radio buttons in the HTML form.
|
||||
function getInputErrorCorrectionLevel() {
|
||||
if (document.getElementById("errcorlvl-medium").checked)
|
||||
return qrcodegen.QrCode.Ecc.MEDIUM;
|
||||
else if (document.getElementById("errcorlvl-quartile").checked)
|
||||
return qrcodegen.QrCode.Ecc.QUARTILE;
|
||||
else if (document.getElementById("errcorlvl-high").checked)
|
||||
return qrcodegen.QrCode.Ecc.HIGH;
|
||||
else // In case no radio button is depressed
|
||||
return qrcodegen.QrCode.Ecc.LOW;
|
||||
}
|
||||
|
||||
// Get form inputs and compute QR Code
|
||||
var ecl = getInputErrorCorrectionLevel();
|
||||
var text = document.getElementById("text-input").value;
|
||||
var segs = qrcodegen.QrSegment.makeSegments(text);
|
||||
var minVer = parseInt(document.getElementById("version-min-input").value, 10);
|
||||
var maxVer = parseInt(document.getElementById("version-max-input").value, 10);
|
||||
var mask = parseInt(document.getElementById("mask-input").value, 10);
|
||||
var boostEcc = document.getElementById("boost-ecc-input").checked;
|
||||
var qr = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc);
|
||||
|
||||
// Draw image output
|
||||
var border = parseInt(document.getElementById("border-input").value, 10);
|
||||
if (border < 0 || border > 100)
|
||||
return;
|
||||
if (bitmapOutput) {
|
||||
var scale = parseInt(document.getElementById("scale-input").value, 10);
|
||||
if (scale <= 0 || scale > 30)
|
||||
return;
|
||||
qr.drawCanvas(scale, border, canvas);
|
||||
canvas.style.removeProperty("display");
|
||||
} else {
|
||||
var code = qr.toSvgString(border);
|
||||
svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]);
|
||||
svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]);
|
||||
svg.style.removeProperty("display");
|
||||
svgXml.value = qr.toSvgString(border);
|
||||
}
|
||||
|
||||
// Returns a string to describe the given list of segments.
|
||||
function describeSegments(segs) {
|
||||
if (segs.length == 0)
|
||||
return "none";
|
||||
else if (segs.length == 1) {
|
||||
var mode = segs[0].mode;
|
||||
var Mode = qrcodegen.QrSegment.Mode;
|
||||
if (mode == Mode.NUMERIC ) return "numeric";
|
||||
if (mode == Mode.ALPHANUMERIC) return "alphanumeric";
|
||||
if (mode == Mode.BYTE ) return "byte";
|
||||
if (mode == Mode.KANJI ) return "kanji";
|
||||
return "unknown";
|
||||
} else
|
||||
return "multiple";
|
||||
}
|
||||
|
||||
// Returns the number of Unicode code points in the given UTF-16 string.
|
||||
function countUnicodeChars(str) {
|
||||
var result = 0;
|
||||
for (var i = 0; i < str.length; i++, result++) {
|
||||
var c = str.charCodeAt(i);
|
||||
if (c < 0xD800 || c >= 0xE000)
|
||||
continue;
|
||||
else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate
|
||||
i++;
|
||||
var d = str.charCodeAt(i);
|
||||
if (0xDC00 <= d && d < 0xE000) // Low surrogate
|
||||
continue;
|
||||
}
|
||||
throw "Invalid UTF-16 string";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Show the QR Code symbol's statistics as a string
|
||||
var stats = "QR Code version = " + qr.version + ", ";
|
||||
stats += "mask pattern = " + qr.mask + ", ";
|
||||
stats += "character count = " + countUnicodeChars(text) + ",\n";
|
||||
stats += "encoding mode = " + describeSegments(segs) + ", ";
|
||||
stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", ";
|
||||
stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + ".";
|
||||
document.getElementById("statistics-output").textContent = stats;
|
||||
}
|
||||
|
||||
|
||||
this.handleVersionMinMax = function(which) {
|
||||
var minElem = document.getElementById("version-min-input");
|
||||
var maxElem = document.getElementById("version-max-input");
|
||||
var minVal = parseInt(minElem.value, 10);
|
||||
var maxVal = parseInt(maxElem.value, 10);
|
||||
minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
|
||||
maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
|
||||
if (which == "min" && minVal > maxVal)
|
||||
maxVal = minVal;
|
||||
else if (which == "max" && maxVal < minVal)
|
||||
minVal = maxVal;
|
||||
minElem.value = minVal.toString();
|
||||
maxElem.value = maxVal.toString();
|
||||
redrawQrCode();
|
||||
}
|
||||
|
||||
|
||||
initialize();
|
||||
}
|
||||
|
||||
|
||||
function handleVersionMinMax(which) {
|
||||
var minElem = document.getElementById("version-min-input");
|
||||
var maxElem = document.getElementById("version-max-input");
|
||||
var minVal = parseInt(minElem.value, 10);
|
||||
var maxVal = parseInt(maxElem.value, 10);
|
||||
minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
|
||||
maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
|
||||
if (which == "min" && minVal > maxVal)
|
||||
maxVal = minVal;
|
||||
else if (which == "max" && maxVal < minVal)
|
||||
minVal = maxVal;
|
||||
minElem.value = minVal.toString();
|
||||
maxElem.value = maxVal.toString();
|
||||
redrawQrCode();
|
||||
}
|
||||
|
||||
|
||||
initialize();
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@
|
|||
<tr>
|
||||
<td>Version range:</td>
|
||||
<td>
|
||||
Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="handleVersionMinMax('min');">,
|
||||
maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="handleVersionMinMax('max');">
|
||||
Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">,
|
||||
maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -24,26 +24,24 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
{
|
||||
const myWindow = window as any;
|
||||
|
||||
namespace app {
|
||||
|
||||
function initialize(): void {
|
||||
let elems = document.querySelectorAll("input[type=number], textarea");
|
||||
for (let el of elems) {
|
||||
if (!el.id.startsWith("version-"))
|
||||
(el as any).oninput = myWindow.redrawQrCode;
|
||||
(el as any).oninput = redrawQrCode;
|
||||
}
|
||||
elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
|
||||
for (let el of elems)
|
||||
(el as HTMLInputElement).onchange = myWindow.redrawQrCode;
|
||||
myWindow.redrawQrCode();
|
||||
(el as HTMLInputElement).onchange = redrawQrCode;
|
||||
redrawQrCode();
|
||||
}
|
||||
|
||||
|
||||
/*---- Functions called from HTML code ----*/
|
||||
|
||||
myWindow.redrawQrCode = function(): void {
|
||||
function redrawQrCode(): void {
|
||||
// Show/hide rows based on bitmap/vector image output
|
||||
const bitmapOutput: boolean = getInput("output-format-bitmap").checked;
|
||||
const scaleRow : HTMLElement = getElem("scale-row");
|
||||
|
|
@ -150,7 +148,7 @@
|
|||
}
|
||||
|
||||
|
||||
myWindow.handleVersionMinMax = function(which: "min"|"max"): void {
|
||||
export function handleVersionMinMax(which: "min"|"max"): void {
|
||||
const minElem: HTMLInputElement = getInput("version-min-input");
|
||||
const maxElem: HTMLInputElement = getInput("version-max-input");
|
||||
let minVal: number = parseInt(minElem.value, 10);
|
||||
|
|
@ -163,7 +161,7 @@
|
|||
minVal = maxVal;
|
||||
minElem.value = minVal.toString();
|
||||
maxElem.value = maxVal.toString();
|
||||
myWindow.redrawQrCode();
|
||||
redrawQrCode();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue