Участник:Serhio Magpie/compactReview.js

/**
 * Compact Review
 * 
 * Author: Serhio Magpie
 * Licenses: MIT, CC BY-SA
 */

( function () {
	var _currentPositon = null;
	var _focusTimeout = null;
	var skin = mw.config.get( 'skin' );
	var $container = $( '#mw-data-after-content' );
	var $topContainer = $( skin === 'vector-2022' ? '.mw-body-header' : '.mw-indicators' );
	var $form = $( '#mw-fr-reviewform' );
	
	if ( $form.length === 0 ) {
		return;
	}
	
	$form.addClass( [ 'oo-ui-layout', 'noprint' ] );
	
	// Кнопка «Подтвердить версию»
	$( '#mw-fr-submit-accept' )
		.attr( {
			role: 'button',
			tabindex: 0
		} )
		.appendTo( $form );
	
	// Кнопка «Снять подтверждение»
	$( '#mw-fr-submit-unaccept' )
		.attr( {
			role: 'button',
			tabindex: 0
		} )
		.appendTo( $form );
		
	// Кнопка «Отклонить изменения»
	$( '#mw-fr-submit-reject' )
		.attr( {
			role: 'button',
			tabindex: 0
		} )
		.appendTo( $form );
		
	// Поле «Примечание»
	var $commentLabel = $form.find( '[for="mw-fr-commentbox"]' );
	var $commentInput = $( '.fr-comment-box' )
		.addClass( 'oo-ui-inputWidget-input' );
	
	// Сообщение об изменениях в шаблонах и изображениях
	var $infoP;
	$form.find( 'p' )
		.each( function() {
			var $item = $( this );
			if ( /^Обновлённые/.test( $item.text() ) ) {
				$infoP = $item;
			}
		} );
	
	// Отрисовать иконку с тултипом
	if ( 
		$commentInput.length > 0 || 
		( $infoP && $infoP.length > 0 )
	) {
		mw.loader.using( [ 'oojs', 'oojs-ui' ] ).done( function () {
			var commentWidget = new OO.ui.Widget( {
				$content: $commentInput,
				classes: [ 'oo-ui-textInputWidget' ]
			} );
			
			var commentField = new OO.ui.FieldLayout( commentWidget, {
				label: $commentLabel.text(),
				align: 'top'
			} );
			
			var $popupCotent = $( '<div>' )
				.addClass( 'compactReview-popup-content' )
				.append( commentField.$element )
				.append( $infoP );
			
			var popupButton = new OO.ui.PopupButtonWidget( {
				icon: 'infoFilled',
				framed: false,
				label: 'Обновлённые шаблоны или файлы',
				invisibleLabel: true,
				popup: {
					$content: $popupCotent,
					padded: true,
					align: 'force-left'
				}
			} );
			popupButton.getPopup().on( 'toggle', function ( visible ) {
				if ( visible ) {
					_focusTimeout && clearTimeout( _focusTimeout );
					_focusTimeout = setTimeout( function () {
						$commentInput.focus();
					}, 50 );
				}
			} );
			
			$form.append( popupButton.$element );
		} );
	}
	
	// Переместить форму наверх страницы
	function embed() {
		var offset = $topContainer.offset();
		var height = $form.height();
		var sctollTop = $( this ).scrollTop();
		if ( sctollTop > offset.top + height  ) {
			if ( _currentPositon !== 'bottom' ) {
				_currentPositon = 'bottom';
				$form.appendTo( $container );
			}
		} else {
			if ( _currentPositon !== 'top' ) {
				_currentPositon = 'top';
				if ( skin === 'vector-2022' ) {
					$form.insertAfter( '#p-lang-btn' );
				} else {
					$form.appendTo( $topContainer );
				}
			}
		}
	}
	
	if ( !mw.config.get( 'wgIsMainPage' ) ) {
		embed();
		$( window ).scroll ( embed );
	}
	
	mw.loader.using( 'mediawiki.util' ).done( function () {
		mw.util.addCSS( '\
			.compactReview-popup-content { margin:12px 0; }\
			.compactReview-popup-content p:not(:first-child) { margin-top:1em; }\
			\
			#mw-fr-reviewform { margin:1em 0; }\
			#mw-fr-reviewform .flaggedrevs_reviewform { display:none; }\
			#mw-fr-reviewform #mw-fr-submit-accept { margin:0; }\
			#mw-fr-reviewform #mw-fr-submit-unaccept { margin:0 0 0 .5em; }\
			#mw-fr-reviewform #mw-fr-submit-reject { margin:0 0 0 .5em; }\
			#mw-fr-reviewform .oo-ui-popupButtonWidget { margin-left:.5em; }\
			.mw-indicators #mw-fr-reviewform { display:inline-block; margin:0 0 0 1em; position:relative; }\
			#mw-data-after-content #mw-fr-reviewform { font-size:0.875em; line-height:1.6; }\
			\
			body.skin-timeless .mw-indicators #mw-fr-reviewform { top:-8px }\
			body.skin-modern .mw-indicators #mw-fr-reviewform { z-index:1; top:7px; right:7px; }\
			body.skin-vector-2022 .mw-body-header #mw-fr-reviewform { margin:2px 0 0; float:right; font-size:0.875em; line-height:1.6; }\
		' );
	} );
} )();