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

Материал из Википедии — свободной энциклопедии
Это старая версия этой страницы, сохранённая Serhio Magpie (обсуждение | вклад) в 23:45, 16 мая 2019 (~~~). Она может серьёзно отличаться от текущей версии.
Перейти к навигации Перейти к поиску
// <nowiki>
$( function () {

	var nodes = {};

    function addCSS( css ) {
		let styleElem = document.createElement( 'style' );
		styleElem.appendChild( document.createTextNode( css ) );
		document.getElementsByTagName( 'head' )[0].appendChild( styleElem );
	}

	function getNodes() {
		nodes.$textbox = $( '#wpTextbox1' );
		nodes.$toolbar = $( '#wikiEditor-ui-toolbar' );
		nodes.$toolbarMain = $( '#wikiEditor-section-main' );
		nodes.$codeMirrorButton = $( '#mw-editbutton-codemirror .oo-ui-buttonElement-button' );
		nodes.$wpPreviewLive = $( '#wpPreviewLive' );
		nodes.$wpDiffLive = $( '#wpDiffLive' );
		nodes.$editOptions = $( '#editform .editOptions' );
	}

	function resizeTextbox() {
		// Переопределить настройки CodeMirror
		if ( typeof CodeMirror !== 'undefined' ) {
			CodeMirror.defaults.viewportMargin = Infinity;
		}
		// Масштабировать textarea при вводе текста и при переключении режима подсветки
		nodes.$codeMirrorButton.on( 'click', resizeTextboxHanlder );
		nodes.$textbox.on( 'keyup', resizeTextboxHanlder );
		// Масштабировать textarea
		resizeTextboxHanlder();
	}

	function resizeTextboxHanlder() {
		let top = $( window ).scrollTop();
		nodes.$textbox.css( 'height', 'auto' );
		nodes.$textbox.css( 'height', nodes.$textbox.prop( 'scrollHeight' ) + 'px' );
		$( window ).scrollTop( top );
	}

	function init() {
		// Добавить переопределение стилей высоты и прикрепить верхнюю панель
		addCSS( '\
			.wikiEditor-ui .wikiEditor-ui-top { position:-webkit-sticky; position:sticky; top:0; z-index:20; }\
			.mw-editform .editOptions { position:-webkit-sticky; position:sticky; bottom:0; z-index:19; }\
			.mw-editform #wpTextbox1 { max-height:none; overflow:hidden; }\
			.CodeMirror { height:auto !important; }\
			.CodeMirror-scroll { min-height:475px; }\
		' );
		// Подготовить все нужные ноды
		getNodes();
		// Автоматически масштабировать окно редактирования
		resizeTextbox();
	}

	// Запускать скрипты только когда отрисовался wikiEditor
	$.when( mw.loader.using( [ 'ext.wikiEditor' ] ), $.ready ).then( init );

} );
// </nowiki>