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);

            let initialHexValue = getInitialHexValue(field.dataset.hexConverterHex);
            let dataHexValue = initialHexValue.toString(16);
            let dataAsciiValue = hexToAscii(dataHexValue);

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

            $(field).replaceWith(function(){

                var dynamicField = $('<div class="hex-converter-live"></div>');
                dynamicField.attr('data-numeric-value', initialHexValue);
                dynamicField.attr('data-hex-value', dataHexValue);
                dynamicField.attr('data-ascii-value', 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.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) {
        console.log(e);
    }

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

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

        return parseInt(Number('0x' + input), 10);
    }

    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 );
})();