https://www.straubing.de/_/scripts/rgElements/src/Elements/rgQrcode/rg-qrcode.js

1import {rgElement} from '../rgElement/rg-element.js'
2
3/*
4usage: <rg-qrcode data-content="blubb blah" data-format="svg" data-modulesize="5" data-margin="5"></rg-qrcode>
5 */
6const defaultAttributes = {
7        'data-content': null,
8        'data-format': 'svg',
9        'data-modulesize': 5,
10        'data-margin': 4
11    },
12    getOptions = function () {
13        const {
14            modulesize,
15            margin,
16            format
17        } = this.dataset;
18        return {
19            modulesize: modulesize ? parseInt(modulesize) : defaultAttributes['data-modulesize'],
20            margin: margin ? parseInt(margin) : defaultAttributes['data-margin'],
21            format: format ? format : defaultAttributes['data-format'],
22        }
23    }
24let apiReady = false,
25    generating = false,
26    QRCode = {};
27
28export class rgQrcode extends rgElement {
29
30    constructor() {
31        super()
32    }
33
34    connectedCallback() {
35        !this.shadowRoot && this.attachShadow({mode: 'open'});
36        this.setUpElement();
37        this.addEventListener('rg-qrcode:apiloaded', function (ev) {
38            Object.assign(QRCode, ev.detail.defaultExport.default);
39            apiReady = true;
40            this.generate();
41        }.bind(this));
42        this.extendApi('/api/rg-qrcode-api.js');
43
44        this.setupComplete();
45    }
46
47    static get observedAttributes() {
48        return Object.keys(defaultAttributes)
49    }
50
51    // LifeCycle Callbacks
52    attributeChangedCallback(attributeName, oldValue, newValue) {
53        this.dispatchEvent(new CustomEvent(this.tagName.toLowerCase() + ':changed', {
54            detail: {
55                el: this,
56                attributeName: attributeName,
57                oldValue: oldValue,
58                newValue: newValue,
59            }
60        }));
61        this.generate();
62    }
63
64    generate() {
65        if (!apiReady || generating) {
66            return;
67        }
68        generating = true;
69        try {
70            this.clear();
71            if(!this.dataset.format) {
72                this.dataset.format = 'svg';
73            }
74            if (this.dataset.content) {
75                switch (this.dataset.format.toLowerCase()) {
76                    case 'svg':
77                    default:
78                        this.generateSVG();
79                        break;
80                    case 'png':
81                        this.generatePNG();
82                        break;
83                    case 'html':
84                        this.generateHTML();
85                        break;
86                }
87            } else {
88                this.shadowRoot.textContent = 'qr-code: no data!'
89            }
90        } catch (e) {
91            console.error(e);
92            this.shadowRoot.textContent = 'qr-code: error!'
93        }
94        generating = false;
95    }
96
97    generatePNG() {
98        const img = document.createElement('img')
99        img.src = QRCode.generatePNG(this.dataset.content, getOptions.call(this))
100        img.setAttribute('part', 'img')
101        this.shadowRoot.appendChild(img)
102    }
103
104    generateHTML() {
105        const div = QRCode.generateHTML(this.dataset.content, getOptions.call(this))
106        const table = div.firstChild
107        table.setAttribute('part', 'table')
108        this.shadowRoot.appendChild(table)
109    }
110
111    generateSVG() {
112        const svg = QRCode.generateSVG(this.dataset.content, getOptions.call(this))
113        svg.setAttribute('part', 'svg')
114        this.shadowRoot.appendChild(svg)
115    }
116
117    clear() {
118        while (this.shadowRoot.lastChild) {
119            this.shadowRoot.removeChild(this.shadowRoot.lastChild)
120        }
121    }
122}