Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 7x 7x 7x 7x 7x 7x 2x 2x 2x 2x 2x 2x 249x 249x 237x 237x 234x 234x 249x 249x 2x 2x 2x 2x 2x 67x 67x 67x 67x 67x 67x 2x 2x 2x 2x 2x 2x 2x 65x 65x 65x 23x 23x 23x 23x 23x 23x 16x 22x 23x 15x 21x 23x 65x 65x 2x 2x 2x 2x 2x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 2x 2x 2x 2x 2x 2x 65x 65x 65x 65x 65x 65x 65x 2x 2x 2x 2x 2x 2x 60x 60x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | export const DEFAULT_STYLE = 'default'
export const ROUNDED_STYLE = 'rounded'
export const SQUARE_STYLE = 'square'
export const DOT_STYLE = 'dot'
const validStyles = /** @type {const} */([DEFAULT_STYLE, ROUNDED_STYLE, SQUARE_STYLE, DOT_STYLE])
/**
* @param {string} style - style to apply
* @param {QRCodeCssStyle} fallback - fallback color if `color` is invalid
* @returns {QRCodeCssStyle} validStyle
*/
function getStyleOrElse (style, fallback) {
if (typeof style !== 'string') {
return fallback
}
const toLowerCaseStyle = /** @type {QRCodeCssStyle} */ (style.toLocaleLowerCase())
const isValidStyle = validStyles.includes(toLowerCaseStyle)
return isValidStyle ? toLowerCaseStyle : fallback
}
/**
* @returns {QRCodeCssStyles} default CSS styles
*/
export function getDefaultStyles () {
return {
dots: DEFAULT_STYLE,
cornerBorder: DEFAULT_STYLE,
cornerCenter: DEFAULT_STYLE,
}
}
/**
*
* @param {string} colorsVar - value of '--qrcode-color' property
* @param {QRCodeCssStyles} defaultColors - current default colors
* @returns {QRCodeCssStyles} updated colors
*/
function parseQrcodeStyleProp (colorsVar, defaultColors) {
const currentStyles = { ...defaultColors }
if (colorsVar) {
const colorsList = colorsVar.trim().split(/\s+/)
const length = colorsList.length
if (length >= 1) {
currentStyles.dots = getStyleOrElse(colorsList[0], currentStyles.dots)
}
if (length >= 2) {
currentStyles.cornerBorder = getStyleOrElse(colorsList[1], currentStyles.cornerBorder)
}
if (length >= 3) {
currentStyles.cornerCenter = getStyleOrElse(colorsList[2], currentStyles.cornerCenter)
}
}
return currentStyles
}
/**
* @param {HTMLElement} element - target element
* @returns {QRCodeStyleProperties} cssColors to draw the QRCode
*/
function QRCodeStyleProperties (element) {
const computedStyle = getComputedStyle(element)
const propertyOf = (/** @type {string} */ prop) => computedStyle.getPropertyValue(prop).trim()
return {
style: propertyOf('--qrcode-style'),
dotStyle: propertyOf('--qrcode-dot-style'),
cornerBorderStyle: propertyOf('--qrcode-corner-border-style'),
cornerCenterStyle: propertyOf('--qrcode-corner-center-style'),
}
}
/**
* @param {QRCodeStyleProperties} styleProperties - color properties
* @returns {QRCodeCssStyles} cssColors to draw the QRCode
*/
export function parseQrCodeStyles (styleProperties) {
let currentStyles = getDefaultStyles()
currentStyles = parseQrcodeStyleProp(styleProperties.style, currentStyles)
currentStyles.dots = getStyleOrElse(styleProperties.dotStyle, currentStyles.dots)
currentStyles.cornerBorder = getStyleOrElse(styleProperties.cornerBorderStyle, currentStyles.cornerBorder)
currentStyles.cornerCenter = getStyleOrElse(styleProperties.cornerCenterStyle, currentStyles.cornerCenter)
return currentStyles
}
/**
* @param {HTMLElement} element - target element
* @returns {QRCodeCssStyles} cssColors to draw the QRCode
*/
export function parseQrCodeStylesFromElement (element) {
return parseQrCodeStyles(QRCodeStyleProperties(element))
}
/**
* @typedef {typeof validStyles[number]} QRCodeCssStyle
*/
/**
* @typedef {object} QRCodeCssStyles
* @property {QRCodeCssStyle} dots - QR Code dots draw style
* @property {QRCodeCssStyle} cornerBorder - QR Code position probe pattern border draw style
* @property {QRCodeCssStyle} cornerCenter - QR Code position probe pattern center draw style
*/
/**
* @typedef {object} QRCodeStyleProperties
* @property {string} style - `--qrcode-style` property value
* @property {string} dotStyle - `--qrcode-dot-style` property value
* @property {string} cornerBorderStyle - `--qrcode-corner-border-style` property value
* @property {string} cornerCenterStyle - `--qrcode-corner-center-style` property value
*/
|