Taskbar demo using option.minimizeTo and html2canvas

Short description

As soon as a panel is created a thumb-like version of the panel is generated and positioned 'left-bottom right' of the window. The panel thumb is interactive in so far as a

To generate the an image of the original panel html2canvas is required.

jsPanel.create({
    headerTitle: 'Original Panel 1',
    theme:       'primary filledlight',
    position:    'left-top 50 50',
    minimizeTo:  false,
    contentAjax: {
        url: '../sample-content/sampleContent.html',
        done: function (xhr, panel) {
            panel.content.innerHTML = this.responseText;
            miniPanel(panel); // or in callback || onminimized callback
        }
    }
});

function miniPanel (original) {
    let miniId = `${original.id}-mini`;
    if (!document.getElementById(miniId)) {
        let mp = jsPanel.create({
            id:             miniId,
            position:       'left-bottom right',
            contentSize:    '135 80',
            contentOverflow: 'hidden',
            headerControls: 'closeonly',
            headerTitle:    '<i class="fa fa-clone" style="font-size: 12px;margin-left: 5px; cursor:Pointer;"></i>',
            dragit:    false,
            resizeit:  false,
            paneltype: 'mini',
            callback: function (mini) {
                jsPanel.setStyle(mini.content, {padding: '5px', cursor: 'pointer'});
                jsPanel.setStyle(mini.headerbar, {fontSize: '12px', minHeight: '20px'});
                mini.titlebar.style.minHeight  = '20px';
                mini.headertitle.style.margin  = 0;
                mini.style.zIndex = 5000;

                mini.content.addEventListener('click', function () {
                    original.status === 'minimized' ? original.normalize() : original.minimize();
                }, false);

                mini.headertitle.addEventListener('click', function () {
                    if (original.status === 'minimized' || original.status === 'normalized') {
                        original.normalize().front();
                    } else if (original.status === 'maximized') {
                        original.front();
                    } else if (original.status === 'smallified' || original.status === 'smallifiedmax') {
                        original.unsmallify();
                    }
                }, false);

                document.addEventListener('jspanelclosed', function (e) {
                    if (e.detail === original.id) {
                        mini.close();
                    }
                }, false);

            },
            onclosed: function() {
                let o = document.getElementById(original.id);
                if (o) {o.close();}
            }
        });

        let sizes = original.getBoundingClientRect();
        let factor = 125/sizes.width; // width of canvas will be 125px

        html2canvas(original, {
            onrendered: function (canvas) {
                // canvas is the final rendered <canvas> element
                let cont = document.createElement('div');
                cont.appendChild(canvas);
                mp.content.appendChild(cont);
                cont.style.transformOrigin = 'left top';
                cont.style.transform = `scale(${factor})`;
                let rect = canvas.getBoundingClientRect();
                mp.resize({
                    width:  '135px',
                    height: (rect.height + 10 + 20) + 'px'
                }).reposition();
            }
        });
    }
}