Utente:Jacopo Werther/TemplateDataEditor.js

/*
 * Script (in JavaScript) per modificare i tag 'TemplateData' per l'estensione MediaWiki 
 * TemplateData senza dover modificare direttamente il codice JSON.
 * 
 * 
 * Permette di "editare visivamente" il "TemplateData"
 *
 * Nella colonna a sinistra della pagina, sezione Strumenti, 
 * apparirà il link "TemplateData";
 * Cliccando sul link si apre una finestra che permette tutte le modifiche del TemplateData.
 * 
 * L'originale è stato scritto per fr.wiki da Ltrlg.
 * Basato sulla versione fr.wiki del 07-07-2013
 * Ultimo aggiornamento sulla versione en.wiki effettuato da NicoV: 20-07-2013
 * Ultimo aggiornamento sulla versione it.wiki effettuato da Jacopo Werther: 22-07-2013
 *
 *
 * <nowiki>
 */
 
function TemplateDataEditor($) {
 
    var
        $body, $cont, $button,
        uniq = 0,
        cssSep = {
            marginLeft: '1em'
        },
        $desc = $('<textarea>').css({margin: 0, boxSizing: 'border-box', height: '6em'}),
        $params = $('<ul>'),
        $sets = $('<ul>'),
        tagRegExp = /<templatedata[^>]*>([^]*)<\/templatedata>|<templatedata(?:)[^>]*\/>/;
 
    ////////// READ CURRENT DATA //////////
 
    function removeThisLi() {
        $(this).closest('li').remove();
        return false;
    }
 
    function $paramType(type, label, currentType) {
        return $('<option>')
            .val(type)
            .attr('title', type)
            .text(label)
            .prop('selected', currentType == type);
    }
 
    function paramFromJson(name, jsonParam) {
        uniq++;
        return $('<li>')
            .append($('<a>')
                .attr({
                    href: '#',
                    title: 'Rimuovi questo parametro'
                })
                .click(removeThisLi)
                .css({
                    float: 'right',
                    marginRight: '0.5em'
                })
                .append($('<img>')
                    .attr({
                        src: '/media/wikipedia/commons/thumb/1/13/VisualEditor_-_Icon_-_Clear.svg/24px-VisualEditor_-_Icon_-_Clear.svg.png',
                        alt: 'Remove this parameter'
                    })
                )
            )
            .append($('<label>')
                .attr('for', 'tde-paramName-'+uniq)
                .text( 'Nome effettivo\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramName')
                .attr('type', 'text')
                .attr('id', 'tde-paramName-'+uniq)
                .val( name )
            )
            .append($('<input>')
                .css(cssSep)
                .addClass('tde-paramRequired')
                .attr('type', 'checkbox')
                .attr('id', 'tde-paramRequired-'+uniq)
                .prop('checked', !! jsonParam.required )
            )
            .append($('<label>')
                .attr('for', 'tde-paramRequired-'+uniq)
                .text('Richiesto')
            )
            .append('<br>')
            .append($('<label>')
                .attr('for', 'tde-paramLabel-'+uniq)
                .text( 'Nome visualizzato\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramLabel')
                .attr('type', 'text')
                .attr('id', 'tde-paramLabel-'+uniq)
                .val( jsonParam.label || '' )
            )
            .append('<br>')
            .append($('<label>')
                .attr('for', 'tde-paramType-'+uniq)
                .text( 'Type\xA0: ' )
            )
            .append($('<select>')
                .addClass('tde-paramType')
                .attr('type', 'text')
                .attr('id', 'tde-paramType-'+uniq)
                .append($paramType('unknown', 'Unknown', jsonParam.type))
                .append($paramType('number', 'Number', jsonParam.type))
                .append($paramType('string', 'Text', jsonParam.type))
                .append($paramType('string/wiki-user-name', 'User name', jsonParam.type))
                .append($paramType('string/wiki-page-name', 'Page title', jsonParam.type))
            )
            .append($('<label>')
                .css(cssSep)
                .attr('for', 'tde-paramDefault-'+uniq)
                .text( 'Valore di default\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramDefault')
                .attr('type', 'text')
                .attr('id', 'tde-paramDefault-'+uniq)
                .val( jsonParam['default'] || '' )
            )
            .append($('<label>')
                .css(cssSep)
                .attr('for', 'tde-paramInherits-'+uniq)
                .text( 'Eredità\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramInherits')
                .attr('type', 'text')
                .attr('id', 'tde-paramInherits-'+uniq)
                .val( jsonParam.inherits || '' )
            )
            .append('<br>')
            .append($('<input>')
                .addClass('tde-paramDeprecated')
                .attr('type', 'checkbox')
                .attr('id', 'tde-paramDeprecated-'+uniq)
                .prop('checked', (typeof jsonParam.deprecated == 'string' ) || !! jsonParam.deprecated )
            )
            .append($('<label>')
                .attr('for', 'tde-paramDeprecated-'+uniq)
                .text('Deprecato')
            )
            .append(document.createTextNode(' ('))
            .append($('<label>')
                .attr('for', 'tde-paramDeprecatedTooltip-'+uniq)
                .text( 'Dettagli\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramDeprecatedTooltip')
                .attr('type', 'text')
                .attr('size', 50)
                .attr('id', 'tde-paramDeprecatedTooltip-'+uniq)
                .val(  (typeof jsonParam.deprecated == 'string' ) ? jsonParam.deprecated : '')
            )
            .append(document.createTextNode(')'))
            .append('<br>')
            .append($('<label>')
                .attr('for', 'tde-paramAliases-'+uniq)
                .text( 'Altri nomi (separati da pipes « | »)\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-paramAliases')
                .css({
                    display: 'block',
                    width: '100%',
                    boxSizing: 'border-box',
                })
                .attr('type', 'text')
                .attr('id', 'tde-paramAliases-'+uniq)
                .val( ( jsonParam.aliases || [] ).join(' | ') )
            )
            .append($('<label>')
                .attr('for', 'tde-paramDescription-'+uniq)
                .text( 'Descrizione\xA0: ' )
            )
            .append($('<textarea>')
                .css({
                    margin: 0,
                    boxSizing: 'border-box',
                    height: '4em'
                })
                .attr('id', 'tde-paramDescription-'+uniq)
                .addClass('tde-paramDescription')
                .text( jsonParam.description || '' )
            );
    }
 
    function initParamsFromJson(jsonParams) {
        for(var i in jsonParams) {
            $params.append( paramFromJson(i, jsonParams[i]) );
        }
    }
 
    function setFromJson(jsonSet) {
        uniq++;
        return $('<li>')
            .append($('<a>')
                .attr({
                    href: '#',
                    title: 'Remove this set'
                })
                .click(removeThisLi)
                .css({
                    float: 'right',
                    marginRight: '0.5em'
                })
                .append($('<img>')
                    .attr({
                        src: '/media/wikipedia/commons/thumb/1/13/VisualEditor_-_Icon_-_Clear.svg/24px-VisualEditor_-_Icon_-_Clear.svg.png',
                        alt: 'Remove this set'
                    })
                )
            )
            .append($('<label>')
                .attr('for', 'tde-setLabel-'+uniq)
                .text( 'Name\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-setLabel')
                .attr('type', 'text')
                .attr('id', 'tde-setLabel-'+uniq)
                .val( jsonSet.label || '' )
            )
            .append($('<label>')
                .css(cssSep)
                .attr('for', 'tde-setParams-'+uniq)
                .text( 'Parameters (separated by pipes « | »)\xA0: ' )
            )
            .append($('<input>')
                .addClass('tde-setParams')
                .css({
                    display: 'block',
                    width: '100%',
                    boxSizing: 'border-box',
                })
                .attr('type', 'text')
                .attr('id', 'tde-setParams-'+uniq)
                .val( ( jsonSet.params || [] ).join(' | ') )
            )
    }
 
    function initSetFromJson(jsonSets) {
        for(var i=0; i<jsonSets.length; i++) {
            $sets.append( setFromJson(jsonSets[i]) );
        }
    }
 
    function dataExists() {
        return tagRegExp.test( $('#wpTextbox1').val() );
    }
 
    function getData() {
        var
            dataString = tagRegExp.exec( $('#wpTextbox1').val() )[1],
            data;
        try {
            data = JSON.parse(dataString);
        } catch(e) {
            data = {};
        }
        if( $.type(data.description) != 'string' ) data.description = '';
        if( $.type(data.params) != 'object' ) data.params = {};
        if( $.type(data.sets) != 'array' ) data.sets = [];
        return data;
    }
 
    ////////// READ INPUT //////////
 
    function trim(str) {
        return str.replace(/^\s*(\S.*\S|\S)\s*$/, '$1');
    }
 
    function trimArray(Arr) {
        var i = 0;
        for(; i<Arr.length; i++) {
            Arr[i] = trim(Arr[i]);
        }
        return Arr;
    }
 
    function selectValue($select) {
        var res;
        $select.children('option').each(function(){
            if( $(this).prop('selected') ) {
                res = $(this).val();
            }
        });
        return res;
    }
 
    function formatString(str) {
        return '"' + str
            .replace(/\n/g, '\\n')
            .replace(/"/g, '\\"') + '"';
    }
 
    function formatParamList(Arr) {
        var
            i=0,
            res = '[',
            first = true;
        for(; i<Arr.length; i++) {
            if(first) {
                first = false;
            } else {
                res += ', ';
            }
            res += formatString( Arr[i] );
        }
        return res + ']';
    }
 
    function readInputParams() {
        var
            params = '{',
            paramsUsed = [],
            firstParam = true;
 
        function nextParam() {
            if(firstParam) {
                firstParam = false;
            } else {
                params += ',';
            }
        }
 
        function addParam() {
            var
                $li = $(this),
                name = $li.find('.tde-paramName').val(),
                firstProperty = true,
                type;
 
            function nextProperty() {
                if(firstProperty) {
                    firstProperty = false;
                } else {
                    params += ',';
                }
                params += '\n\t\t\t';
            }
 
            if( paramsUsed.indexOf(name) != -1  ) {
                console.log(params[name]);
                console.log(Object.keys(params));
                throw new Error('Parameter «\xA0' + name + '\xA0» defined twice');
            }
            
            paramsUsed.push(name);
 
            nextParam();
            params += '\n\t\t' + formatString(name) + ': {';
 
            if( $li.find('.tde-paramLabel').val() != '' ) {
                nextProperty();
                params += '"label": ' + formatString( $li.find('.tde-paramLabel').val() );
            }
 
            type = selectValue($li.find('.tde-paramType'));
            if( type != 'unknown' ) {
                nextProperty();
                params += '"type": ' + formatString( type );
            } 
 
            if( $li.find('.tde-paramDefault').val() != '' ) {
                nextProperty();
                params += '"default": ' + formatString( $li.find('.tde-paramDefault').val() );
            }
 
            if( $li.find('.tde-paramInherits').val() != '' ) {
                nextProperty();
                params += '"inherits": ' + formatString( $li.find('.tde-paramInherits').val() );
            }
 
            if( $li.find('.tde-paramRequired').prop('checked') ) {
                nextProperty();
                params += '"required": true'
            }
 
            if( $li.find('.tde-paramDeprecated').prop('checked') ) {
                nextProperty();
                params += '"deprecated": '
                if( $li.find('.tde-paramDeprecatedTooltip').val() != '' ) {
                    params += formatString( $li.find('.tde-paramDeprecatedTooltip').val() );
                } else {
                    params += 'true';
                }
            }
 
            if( $li.find('.tde-paramDescription').val() != '' ) {
                nextProperty();
                params += '"description": ' + formatString( $li.find('.tde-paramDescription').val() );
            }
 
            if( $li.find('.tde-paramAliases').val() != '' ) {
                nextProperty();
                params += '"aliases":' + formatParamList( trimArray( $li.find('.tde-paramAliases').val().split('|') ) );
            }
 
            params += '\n\t\t}';
        }
 
        $params.children().each(addParam);
 
        return params + '\n\t}';
    }
 
    function readInputSets() {
        var
            sets = '[';
 
        function addParam(i) {
            var
                $li = $(this),
                first = true;
 
            if(i != 0) {
                sets += ','
            }
 
            sets += '\n\t\t{';
 
            if( $li.find('.tde-setLabel').val() != '' ) {
                sets += '\n\t\t\t"label": ' + formatString( $li.find('.tde-setLabel').val() );
                first = false;
            }
 
            if( $li.find('.tde-setParams').val() != '' ) {
                if(!first) {
                    sets += ',';
                }
                sets += '\n\t\t\t"params": ' + formatParamList( trimArray( $li.find('.tde-setParams').val().split('|') ) );
            }
 
            sets += '\n\t\t}';
        }
 
        $sets.children().each(addParam);
 
        return sets + '\n\t]';
    }
 
    function apply() {
        try {
            var
                params = readInputParams(),
                sets = readInputSets(),
                json = '{',
                i;
 
            if( $desc.val() != '' ) {
                json += '\n\t"description": ' + formatString( $desc.val() ) + ',';
            }
 
            json += '\n\t"params": ' + params;
 
            if( ! /^\[\s*\]$/.test(sets) ) {
                json += ',\n\t"sets": ' + sets;
            }
 
            json += '\n}';
 
            $('#wpTextbox1').val( $('#wpTextbox1').val().replace(tagRegExp, '<templatedata>\n' + json + '\n</templatedata>') );
            close();
        } catch(e) {
        	alert('An error happened\xA0:\n' + e.message);
        }
    }
 
    ////////// DIALOG //////////
 
    function addNewParam() {
        $params.append(paramFromJson('', {}));
        return false;
    }
 
    function addNewSet() {
        $sets.append(setFromJson({}));
        return false;
    }
 
    function close() {
        $cont.fadeOut('slow', function(){
            $params.children().remove();
            $sets.children().remove();
        });
    }
 
    function open() {
        var data;
        $cont.fadeIn('slow');
        if( dataExists() ) {
            data = getData();
            $body
                .html($('<h3>')
                    .text('Descrizione')
                )
                .append($('<div>')
                    .attr('id', 'tde-desc-cont')
                    .append($desc.text(data.description || ''))
                )
                .append($('<h3>')
                    .text('Parametri')
                )
                .append($params)
                .append($('<p>')
                    .css({
                        textAlign: 'right',
                        paddingRight: '1em'
                    })
                    .append($('<a>')
                        .attr({
                            href: '#',
                            title: 'Aggiungi un parametro'
                        })
                        .click(addNewParam)
                        .append($('<img>')
                            .attr({
                                src: '/media/wikipedia/commons/thumb/8/8b/VisualEditor_-_Icon_-_Add-item.svg/24px-VisualEditor_-_Icon_-_Add-item.svg.png',
                                alt: 'Add a parameter'
                            })
                        )
                    )
                )
                .append($('<h3>')
                    .text('Sets')
                )
                .append($sets)
                .append($('<p>')
                    .css({
                        textAlign: 'right',
                        paddingRight: '1em'
                    })
                    .append($('<a>')
                        .attr({
                            href: '#',
                            title: 'Aggiungi un set'
                        })
                        .click(addNewSet)
                        .append($('<img>')
                            .attr({
                                src: '/media/wikipedia/commons/thumb/8/8b/VisualEditor_-_Icon_-_Add-item.svg/24px-VisualEditor_-_Icon_-_Add-item.svg.png',
                                alt: 'Add a set'
                            })
                        )
                    )
                );
            initParamsFromJson(data.params);
            initSetFromJson(data.sets);
        } else {
            $body.html($('<p>')
                .css('color', 'red')
                .text('Spiacente. Nessun dato è stato trovato. Aggiungere un tag <templatedata /> per poter modificare il template data')
            )
        }
    }
 
    ////////// BUILDING //////////
 
    function buildHTML() {
        $body = $('<div>')
            .attr('id', 'tde-body');
 
        $button = $('<input>')
            .attr('id', 'tde-apply')
            .attr('type', 'button')
            .val('Applica (a tuo rischio e pericolo, ogni abuso sarà segnalato)')
            .click(apply);
 
        $cont = $('<div>')
            .attr('id', 'tde-cont')
            .append($('<div>').attr('id', 'tde-mask'))
            .append($('<div>')
                .attr('id', 'tde-dialog')
                .append($('<h2>')
                    .text('Benvenuto in Modifica TemplateData (')
                    .append($('<a>').attr('href', '//it.wikipedia.org/wiki/Wikipedia:VisualEditor/TemplateData').text('tutorial per negati'))
                    .append(document.createTextNode(')'))
                )
                .append($('<a>')
                    .attr({
                        id: 'tde-close',
                        href: '#',
                        title: 'Close'
                    })
                    .click(function(){
                        close();
                        return false;
                    })
                    .append($('<img>')
                        .attr({
                            alt: 'Close',
                            src: '/media/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png'
                        })
                    )
                )
                .append($body)
                .append($button)
            )
            .hide();
 
        $(document.body).append($cont);
    }
 
    function addPortletLink() {
        $(
            mw.util.addPortletLink('p-tb', '#', 'TemplateData', 'ted-toolbox', 'Edit template data')
        ).click(function(){
            open();
            return false;
        })
    }
 
    ////////// START //////////
 
    buildHTML();
    addPortletLink();
 
}
 
if( mw.config.get('wgNamespaceNumber') == 10 && mw.config.get('wgAction') == 'edit' ) {
    importStylesheet('Utente:Jacopo_Werther/TemplateDataEditor.css')
    $(document).ready(TemplateDataEditor);
}
 
/*
 * </nowiki>
 */