'use strict';
require('jquery.qrcode');
require('./task_qr.scss');
const caches = {};

class TaskQR {
    static createQR (taskId, {width = 88, height = 88} = {}) {
        if (caches[taskId]) { return caches[taskId]; }

        const $ele = $('<div class="task-qr"></div>');
        $ele.qrcode({width, height, text: String(taskId)});

        const ele = $ele.get(0);
        caches[taskId] = ele;
        return ele;
    }
}

module.exports = TaskQR;

@@ -148,16 +148,28 @@
 ght = 88
+, margin = 0
 %7D = %7B%7D) 
@@ -244,46 +244,152 @@
 nst 
-$
 ele = 
-$
+document.createElement
 ('
-%3C
 div
- class=%22task-qr%22%3E%3C/div%3E'
+');%0A        ele.classList.add('task-qr');%0A        const qr = TaskQR._generateQR(taskId, %7Bwidth, height, margin%7D
 );%0A 
@@ -399,142 +399,2124 @@
     
-$
 ele.
-qrcode(%7Bwidth, height, text: String(taskId)%7D);%0A%0A        const ele = $ele.get(0);%0A        caches%5BtaskId%5D = ele;%0A        return ele
+appendChild(qr);%0A        caches%5BtaskId%5D = ele;%0A%0A        return ele;%0A    %7D%0A%0A    static _generateQR (taskId, %7Bwidth, height, margin%7D) %7B%0A        const canvas = document.createElement('canvas');%0A        canvas.width = width;%0A        canvas.height = height;%0A        const ctx = canvas.getContext('2d');%0A%0A        const black = '#000000';%0A        const white = '#ffffff';%0A        const gray = '#e2e2e2';%0A        const borderWidth = 2;%0A        const padding = 4;%0A        const n = 4;%0A        const bw = Math.floor((width - (margin + borderWidth + padding) * 2) / n) - padding;%0A        const bh = Math.floor((height - (margin + borderWidth + padding) * 2) / n) - padding;%0A        const w = (borderWidth + padding + margin) * 2 + (bw + padding) * n;%0A        const h = (borderWidth + padding + margin) * 2 + (bh + padding) * n;%0A%0A        // draw border%0A        ctx.fillStyle = gray;%0A        ctx.fillRect(margin, margin, w - margin * 2, h - margin * 2);%0A        ctx.fillStyle = white;%0A        ctx.fillRect(borderWidth + margin, borderWidth + margin,%0A            w - borderWidth * 2 - margin * 2, h - borderWidth * 2 - margin * 2);%0A%0A        const offset = borderWidth + padding + margin;%0A%0A        // draw find pattern%0A        const fw = Math.floor((bw * 2 + padding * 2) / 7);%0A        const fh = Math.floor((bh * 2 + padding * 2) / 7);%0A        ctx.fillStyle = black;%0A        ctx.fillRect(offset, offset, fw * 7, fh * 7);%0A        ctx.fillStyle = white;%0A        ctx.fillRect(offset + fw, offset + fh, fw * 5, fh * 5);%0A        ctx.fillStyle = black;%0A        ctx.fillRect(offset + fw * 2, offset + fh * 2, fw * 3, fh * 3);%0A%0A        // draw each block%0A        let num = Number(taskId);%0A        for (let y = 0; y %3C n; y++) %7B%0A            for (let x = 0; x %3C n; x++) %7B%0A                if (y %3C 2 && x %3C 2) %7B continue; %7D%0A                ctx.fillStyle = num & 1 ? black : white;%0A                num %3E%3E= 1;%0A                ctx.fillRect(%0A                    offset + (bw + padding) * x + padding / 2,%0A                    offset + (bh + padding) * y + padding / 2,%0A                    bw, bh);%0A            %7D%0A        %7D%0A%0A        return canvas
 ;%0A  

add myqr view