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(){
    console.log('js hex conv loaded');
    var setup = function ( $content ) {
        console.log('setup called');
        var fields = Array.from( $content.find( '.hex-converter-field' ) );
        console.log(fields);
        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];
            console.log(field.dataset);

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

            let dataHexValue = formatHex(field.dataset.hexConverterHex);
            let dataAsciiValue = hexToAscii(dataHexValue);

            $(field).replaceWith(function(){

                var dynamicField = $('<div class="hex-converter-live"><div class="hex-converter-live-buttons-container"></div></div>');
                dynamicField.attr('data-value-dec', initialHexValue);
                dynamicField.attr('data-value-hex', '0x' + dataHexValue.toUpperCase());
                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')
                ];

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

                dynamicField.append($('<pre>0x' + dataHexValue.toUpperCase() + '</pre>'));

                return dynamicField;
            });

            that.fieldsList.push(field);
        }
    }


    ConverterWidgets.prototype.switchDisplayType = function (e) {
        let target = $(e.target);
        let parent = target.parent().parent();
        parent.find('pre').html(parent.attr('data-value-' + target.attr('data-format')));
    }

    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) {
        let output = input.match(/(..?)/g).join(' ');
        return output.toUpperCase();
    }

    var hexToAscii = function (hexx) {
        var hex = hexx.toString();
        var str = '';
        for (var i = 0; i < hex.length; i += 2)
            str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
        return str;
    }

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