User:Indic-TechCom/Script/qrCode.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
    This is userscript to generate QR Code on wiki.

    @Author
    	* v1: [[User:Jayprakash12345]]
    	* v2: [[User:Keerthan 16]], [[User:Navaneeth0041]], [[User:Ath4rv4n4ir77]]
    @OwnBy [[meta:Indic-TechCom]]

    Please note The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
*/

mw.loader.using(['mediawiki.util']).then(function () {
    // Load the required module
    mw.loader.load('https://meta.wikimedia.org/w/index.php?title=User:Jayprakash12345/jquery-qrcode.min.js&action=raw&ctype=text/javascript');

    // Add a portlet link
    var link = mw.util.addPortletLink(
        'p-tb',
        '#',
        'Generate QR code'
    );

    // Trigger for portlet link
    link.addEventListener('click', function (e) {
        e.preventDefault();

        const pageName = mw.config.get('wgPageName');
        const url = 'https:' + mw.config.get('wgServer') + '/wiki/' + mw.config.get('wgPageName');

        // Create div with qrCode id
        const qrCodeDiv = document.createElement('div');
        qrCodeDiv.id = 'qrCode';

        // Create paragraph
        const para = document.createElement('p');
        para.style.fontWeight = 'bold';
        para.textContent = 'This is the QR Code for ' + url + ' URL.';
        qrCodeDiv.appendChild(para);
        qrCodeDiv.appendChild(document.createElement('br'));

        // Hide the body content and append the qrCodeDiv
        const bodyContent = document.getElementById('bodyContent');
        Array.from(bodyContent.children).forEach(child => child.style.display = 'none');
        bodyContent.appendChild(qrCodeDiv);

        // Generate the QR code
        $('#qrCode').qrcode({
            render: 'canvas',
            text: url,
            width: 460,
            height: 460
        });

        // Use Codex for buttons
        mw.loader.using('@wikimedia/codex').then(function (require) {
            const Codex = require('@wikimedia/codex');
            const Vue = require('vue');

            // Create a new div for the buttons
            const buttonDiv = document.createElement('div');
            buttonDiv.id = 'codexButtons';
            qrCodeDiv.appendChild(buttonDiv);

            // Create Vue app for Codex buttons
            const app = Vue.createApp({
                template: `
                    <div>
                        <cdx-button @click="downloadQRCode" style= "margin-top:2rem;margin-right:1rem;">Download PNG</cdx-button>
                        <cdx-button action="destructive" @click="backToPage">Back to Page</cdx-button>
                        <br/><br/>
                        <small>Notice: The word QR Code is a registered trademark of DENSO WAVE INCORPORATED</small>
                    </div>
                `,
                methods: {
                    downloadQRCode() {
                        const canvas = document.querySelector('#qrCode canvas');
                        const a = document.createElement('a');
                        a.href = canvas.toDataURL('image/png');
                        a.download = pageName + '-qrCode.png';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    },
                    backToPage() {
                        location.reload();
                    }
                }
            });

            // Mount Vue app
            app.component('cdx-button', Codex.CdxButton);
            app.mount('#codexButtons');
        });
    });
});