MediaWiki:Gadget-HexConverter.js

/*  _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * | Please discuss changes on the talk page or on [[WT:Gadget]] before editing. |
 * |_____________________________________________________________________________|
 * 
 * Imported from version XXXX as of DATE from [[SCRIPT_SOURCE]]
 * SHORT_DESCRIPTION, see [[SCRIPT_HOME_PAGE]]
 */
(function(){
    var setup = function ( $content ) {
        var fields = Array.from( $content.find( '.hex-converter-field' ) );
        new ConverterWidgets(fields, $content[0]);
    }

    var ConverterWidgets = function( elements, parent ) {
        this.parent = parent;
        this.fieldsList = [];
        var that = this;

        if (elements.length > 1000) {
            console.log( "Too many converter widgets on page" );
            return;
        }

        for (var i in elements) {
            var field = elements[i];

            if (!validateInitialHexValue(field.dataset.hexConverterHex))
            {
                console.log('Invalid hex value supplied: ' + field.dataset.hexConverterHex);
                return;
            }

            let defaultDisplay = field.dataset.hexConverterDefaultDisplay ? field.dataset.hexConverterDefaultDisplay : 'hex';
            let dataHexValue = formatHex(field.dataset.hexConverterHex);
            let dataAsciiValue = hexToAscii(dataHexValue);

            $(field).parent().find('.hex-converter-preload').remove();

            $(field).replaceWith(function(){

                var dynamicField = $('<div class="hex-converter-live"><div class="hex-converter-live-buttons-container"></div></div>');
                dynamicField.attr('data-value-dec', hexToDecimal(dataHexValue));
                dynamicField.attr('data-value-hex', dataHexValue);
                dynamicField.attr('data-value-ascii', dataAsciiValue)

                let buttons = [
                    $('<button>HEX</button>').attr('data-format', 'hex'),
                    $('<button>DEC</button>').attr('data-format', 'dec'),
                    $('<button>ASCII</button>').attr('data-format', 'ascii')
                ];
                let defaultDisplayMap = ['hex', 'dec', 'ascii'];

                buttons.forEach(button => {
                    dynamicField.find('.hex-converter-live-buttons-container').append(button);
                    button[0].addEventListener('click', that.switchDisplayTypeHandler);
                });

                dynamicField.append($('<pre></pre>'));
                buttons[defaultDisplayMap.indexOf(defaultDisplay)].click();

                return dynamicField;
            });

            that.fieldsList.push(field);
        }
    }


    ConverterWidgets.prototype.switchDisplayTypeHandler = function (e) {
        let target = $(e.target);
        let parent = target.parent().parent();
        target.parent().find('button').removeClass('hex-converter-active');
        parent.find('pre').html(parent.attr('data-value-' + target.attr('data-format')));
        target.addClass('hex-converter-active');
    }

    var validateInitialHexValue = function (input) {
        input = input.toLowerCase();
        if (input.startsWith('0x')){
            input = input.substring(2);
        }
        input.replace(' ', '').toLowerCase();

        if (!Boolean(input.match(/[0-9a-f]+$/i))) {
            return false;
        }

        return true;
    }

    var formatHex = function (input) {
        if (input.startsWith('0x')){
            input = input.substring(2);
        }
        let output = input.match(/(..?)/g).join(' ');
        return output.toUpperCase();
    }

    var hexToDecimal = function (input) { // we have to process it byte at a time or javascript will shit itself
        let output = [];
        let bytes = input.match(/(..?)/g);
        bytes.forEach(byte => {
            output.push(parseInt(byte, 16));
        });
        return output.join(' ');
    }

    var hexToAscii = function (hex) {
        let output = '';
        hex = hex.replace(/[^0-9A-Fa-f]/g,"");
        hex = hex.match(/[0-9A-Fa-f]{2}/g);

        for(i=0; i<hex.length; i++)
        {
            var h = hex[i];
            var code = parseInt(h,16);
            var t = String.fromCodePoint(code);
            output += t;
        }
        return output;
    }

mw.hook( 'wikipage.content' ).add( setup );
})();