MediaWiki:Gadget-ProgressDialog.js

Questa pagina definisce alcuni parametri di aspetto e comportamento generale di tutte le pagine. Per personalizzarli vedi Aiuto:Stile utente.

Nota: dopo aver salvato è necessario pulire la cache del proprio browser per vedere i cambiamenti (per le pagine globali è comunque necessario attendere qualche minuto). Per Mozilla / Firefox / Safari: fare clic su Ricarica tenendo premuto il tasto delle maiuscole, oppure premere Ctrl-F5 o Ctrl-R (Command-R su Mac); per Chrome: premere Ctrl-Shift-R (Command-Shift-R su un Mac); per Konqueror: premere il pulsante Ricarica o il tasto F5; per Opera può essere necessario svuotare completamente la cache dal menù Strumenti → Preferenze; per Internet Explorer: mantenere premuto il tasto Ctrl mentre si preme il pulsante Aggiorna o premere Ctrl-F5.

/**
 * Classe ProgressDialog
 * 
 * Consente di creare una finestra di dialogo dove mostrare gli aggiornamenti
 * di diverse operazioni in corso.
 * 
 * @author https://it.wikipedia.org/wiki/Utente:Sakretsu
 */

/**
 * Costruttore della classe ProgressDialog
 *
 * @param {object|null} [config] Opzioni di configurazione
 * @param {string|null} [config.closeButtonLabel] Etichetta del pulsante di chiusura
 * @param {string|null} [config.dialogTitle] Titolo della finestra
 */

function ProgressDialog( config ) {
	config = config || {};

	ProgressDialog.super.call( this,  { size: 'large' } );

	this.dialogTitle = config.dialogTitle || 'Operazioni in corso...';
	this.closeButtonLabel = config.closeButtonLabel || 'Chiudi';
}

OO.inheritClass( ProgressDialog, OO.ui.Dialog );

ProgressDialog.static.name = 'progressDialog';

ProgressDialog.prototype.getSetupProcess = function ( data ) {
	data = data || {};
	data.title = this.dialogTitle;

	return ProgressDialog.super.prototype.getSetupProcess.call( this, data );
};

ProgressDialog.prototype.initialize = function () {
	ProgressDialog.super.prototype.initialize.call( this );

	this.content = new OO.ui.PanelLayout( {
		padded: true,
		expanded: false
	} );
	this.message = new OO.ui.LabelWidget();
	this.$progressList = $( '<ul>' );
	this.closeButton = new OO.ui.ButtonWidget( {
		label: this.closeButtonLabel
	} );

	this.content.$element.css( {
		'min-height': '240px'
	} );
	this.title.$element.css( {
		'display': 'block',
		'font-size': '1.5em',
		'padding-bottom': '.25em',
		'text-align': 'center'
	} );
	this.message.$element.css( {
		'display': 'block'
	} );
	this.$progressList.css( {
		'color': '#202122',
		'line-height': '1.6em'
	} );
	this.closeButton.toggle( false );

	this.content.$element.append(
		this.title.$element,
		this.message.$element,
		this.closeButton.$element
	);
	this.message.$element.append( this.$progressList );
	this.$body.append( this.content.$element );

	this.closeButton.connect( this, { click: 'close' } );
};

ProgressDialog.prototype.appendProgressMsg = function ( text ) {
	this.$progressList.append( $( '<li>' ).html( text ) );
	this.updateSize();
};

ProgressDialog.prototype.appendResultMsg = function ( text, styles ) {
	this.message.$element.append(
		$( '<hr>' )
			.css( {
				'background-color': '#e0e0e0',
				'margin': '.8em auto 0',
				'width': '90%'
			} ),
		$( '<p>' ).css( styles ).html( text )
	);
	this.updateSize();
};

ProgressDialog.prototype.appendErrorMsg = function ( text ) {
	this.appendResultMsg( text, {
		'color': 'red',
		'padding': '.25em 0 .5em'
	} );
};

ProgressDialog.prototype.appendSuccessMsg = function ( text ) {
	this.appendResultMsg( text, {
		'font-size': 'larger',
		'padding-top': '.25em',
		'text-align': 'center'
	} );
};

ProgressDialog.prototype.showCloseButton = function () {
	this.closeButton.toggle( true );
	this.updateSize();
};

module.exports = ProgressDialog;