lemo-crm/web/app/components/qr-code.js

81 lines
2.0 KiB
JavaScript

import Component from '@ember/component';
import $ from 'jquery'
export default Component.extend({
classNames: ['btn-group'],
didReceiveAttrs() {
let me = this;
let iconUrl = me.get('iconUrl');
let iconImg;
if (iconUrl) {
iconImg = new Image();
iconImg.src = iconUrl;
me.set('iconImg', iconImg);
}
// let label = me.get('label');
let label = null;
me.set('qrConfigMerged', $.extend({
// render method: 'canvas', 'image' or 'div'
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'Q',
// size in pixel
size: 320,
// code color or image element
fill: '#333',
// background color or image element, null for transparent background
background: null,
// content
text: me.get('text'),
// corner radius relative to module width: 0.0 .. 0.5
radius: 0.1,
// quiet zone in modules
quiet: 4,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: iconUrl ? 4 : label ? 2 : 0,
label: label,
fontname: 'sans',
fontcolor: '#ff9818',
mSize: 0.13,
mPosX: 0.5,
mPosY: 0.5,
image: iconImg
}, me.get('qrConfig')));
},
didInsertElement() {
let me = this;
me._super(...arguments);
let iconImg = me.get('iconImg');
if (iconImg) {
iconImg.onload = function() {
me.renderQrCode();
};
}
else {
me.renderQrCode();
}
},
renderQrCode() {
$('.qr-code', this.element).qrcode(this.get('qrConfigMerged'));
}
});