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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 27x 27x 15x 15x 12x 12x 27x 27x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 5x 3x 3x 5x 5x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 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
*/
|