Utente:Ricordisamoa/Gadget-collegamentipersonali.js

/**
 * Gadget-collegamentipersonali.js
 * Aggiunge dei collegamenti personali al menu navigazione della sidebar.
 * I collegamenti sono configurabili con una finestra di dialogo che si attiva dal menu strumenti.
 * Riscritto da zero a partire da:
 * http://it.wikipedia.org/w/index.php?title=MediaWiki:Collegamenti_personali.js&oldid=47557920
 * http://it.wikipedia.org/w/index.php?title=MediaWiki:Gadget-collegamentipersonali.js&oldid=38993132
 *
 * @author [[Utente:Rotpunkt]]
 * @author [[Utente:Ricordisamoa]]
 */
/* global mediaWiki, jQuery */
( function ( mw, $ ) {
	'use strict';

	var api = new mw.Api(),
		optionKey = 'userjs-personallinks-links', // codice dell'opzione MediaWiki per i collegamenti personali
		userLinks; // collegamenti personali dell'utente

	function writeUserConfig( config ) {
		api.postWithToken( 'options', {
			action: 'options',
			optionname: optionKey,
			optionvalue: config
		} )
		.done( function ( data ) {
			if ( data && data.options && data.options.result === 'Success' ) {
				mw.notify( 'La configurazione dei collegamenti personali è stata aggiornata.' );
			} else {
				var msg = data && data.error ? ': ' + data.error.code + ' ' + data.error.info : '';
				mw.notify( 'Errore nell\'aggiornare la configurazione dei collegamenti personali' +
				           ' '  + msg );
			}
		} );
	}

	function updatePortletLinks() {
		var url;
		$( 'li[id^="t-gcp"]' ).remove();
		$.each( userLinks, function ( i, userLink ) {
			url = userLink[1].replace( '%TITOLO%', mw.config.get( 'wgPageName' ) );
			url = url.replace( '%TITOLO2%', mw.config.get( 'wgTitle' ) );
			mw.util.addPortletLink( 'p-navigation', url, userLink[0], 't-gcp' + i );
		} );
	}

	function buildRow( userLink ) {
		var $span, $input, $tr = $( '<tr>' ),
			properties = {
				'width': '100%',
				'box-sizing': 'border-box',
				'-moz-box-sizing': 'border-box',
				'-webkit-box-sizing': 'border-box'
			};
		// icona spostamento
		$span = $( '<span>' ).addClass( 'ui-icon ui-icon-arrowthick-2-n-s' );
		$( '<td>' ).append( $span ).appendTo( $tr );
		// input text
		$input = $( '<input>' ).attr( 'type', 'text' ).val( userLink[0] ).css( properties );
		$( '<td>' ).css( 'width', '20%' ).append( $input ).appendTo( $tr );
		$input = $( '<input>' ).attr( 'type', 'text' ).val( userLink[1] ).css( properties );
		$( '<td>' ).css( 'width', '78%' ).append( $input ).appendTo( $tr );
		// checkbox
		$( '<td>' ).append( $( '<input>' ).attr( 'type', 'checkbox' ) ).appendTo( $tr );
		return $tr;
	}

	// Visualizza la finestra di dialogo per modificare i "collegamenti personali"
	function showConfigDialog() {
		var $table, $thead, $tbody, $tr, $checkbox;

		$table = $( '<table>' );
		$thead = $( '<thead>' ).appendTo( $table );
		$tr = $( '<tr>' ).attr( 'bgcolor', 'lightgrey' ).appendTo( $thead );
		$( '<th>' ).css( 'width', '2%' ).text( '' ).appendTo( $tr );
		$checkbox = $( '<input>' )
			.attr( 'id', 'gcp-selectall' )
			.attr( 'type', 'checkbox' )
			.attr( 'tabindex', '-1' )
			.click( function () {
				$( '#gcp-dialog :checkbox' ).prop( 'checked', this.checked );
			} );
		$( '<th>' ).css( 'width', '20%' ).text( 'Nome' ).appendTo( $tr );
		$( '<th>' ).css( 'width', '78%' ).text( 'Indirizzo' ).appendTo( $tr );
		$( '<th>' ).append( $checkbox ).appendTo( $tr );
		$tbody = $( '<tbody>' ).appendTo( $table );
		$.each( userLinks, function ( i, userLink ) {
			$tbody.append( buildRow( userLink ) );
		} );
		$tbody.sortable( { handle: 'span' } );
		$( '#gcp-dialog' ).html( $table );

		// visualizza il dialog
		$( '#gcp-dialog' ).dialog( {
			title: 'Configurazione collegamenti personali',
			width: 800,
			height: 300,
			modal: true,
			buttons: {
				'Aggiungi riga': function () {
					$table.append( buildRow( ['', ''] ) );
				},
				'Cancella riga': function () {
					$( '#gcp-dialog :checkbox:checked:not(#gcp-selectall)' ).parents( 'tr' ).remove();
					$( '#gcp-selectall' ).attr( 'checked', false );
				},
				'Salva': function () {
					// genera la nuova configurazione
					var confLinks = $table.find( 'tr:has(td)' ).map( function () {
						var $input = $( this ).find( 'input' );
						return $.trim( $input.eq( 0 ).val() ) !== '' &&
							   $.trim( $input.eq( 1 ).val() ) !== '' ?
									[[ $input.eq( 0 ).val(), $input.eq( 1 ).val() ]] : null;
					} ).get(),
						confLinksJSON = JSON.stringify( confLinks ),
						userLinksJSON = JSON.stringify( userLinks );
					// se necessario memorizza la configurazione nelle opzioni
					if ( confLinksJSON === userLinksJSON ) {
						mw.notify( 'I collegamenti personali non sono stati modificati.' );
					} else {
						writeUserConfig( confLinksJSON );
						userLinks = confLinks;
						// aggiorna i link
						updatePortletLinks();
					}
					$( this ).dialog( 'close' );
				},
				'Annulla': function () {
					$( this ).dialog( 'close' );
				}
			}
		} );
	}

	$( window ).load( function () {
		mw.loader.using( ['user.options', 'jquery.ui'], function () {
			userLinks = mw.user.options.exists( optionKey ) ? JSON.parse( mw.user.options.get( optionKey ) ) : [];
			// setup portletLink configurazione
			$( mw.util.addPortletLink( 'p-tb', '#', 'Collegamenti personali' ) )
			.click( function ( event ) {
				event.preventDefault();
				showConfigDialog();
			} );
			// setup dialog
			$( '<div>' ).attr( 'id', 'gcp-dialog' ).appendTo( 'body' );
			// setup collegamenti
			if ( userLinks.length > 0 ) {
				updatePortletLinks();
			}
		} );
	} );
}( mediaWiki, jQuery ) );