User:Dixtosa/AjaxEdit.js

// Description         : With a new button "Ædit" one can edit specific sections without reloading the whole page. 
//                       Supports TabbedLanguages gadget
// Dependency          : ES6 (let, destructuring assignment etc.)
/* jshint maxerr:1048576, strict:true, undef:true, latedef:true, sub:true */
/* global mw, $ */

window.AjaxEdit = {};

window.AjaxEdit.Click = function(ajaxEditAnchor)
{
	let {title, section} = new mw.Uri($(ajaxEditAnchor).parent().find("a[href*='action=edit']").attr("href")).query;
	section = section.replace("T-", ""); //translcusions...
	let hdr = $(ajaxEditAnchor).parent().parent();
	let sectionName = hdr.children(".mw-headline").first().text();
	if (window.tabbedLanguages && !hdr.is(":header")){
		sectionName = window.tabbedLanguages[window.currentLanguageTab];
	}
	
	$("#ajaxedit-wrapper").remove();

	let data = {action: 'raw', title: title, section: section};
	$.get(mw.util.wikiScript('index'), data)
	.then(function(wikitext) {
		const rowHeight = Math.min(15, 1 + wikitext.split("\n").length);
		let textarea = $("<textarea></textarea>").attr({rows: rowHeight}).text(wikitext);
		let saveButton = $('<button>Save</button>').click(function(){
			window.AjaxEdit.Save(section, sectionName, textarea.val(), title)
				.then(function(data) {
					console.log(data);
					if (data && data.error) return; //if abusefilter was triggered
					new mw.Api().parse(new mw.Title(mw.config.get("wgPageName")))
					.then(newHtml => {
						$("#mw-content-text").html(newHtml);
						
						mw.loader.moduleRegistry["site"].state="registered";
						//mw.loader.moduleRegistry["site"].version="generate-unique-guid-here";
						mw.loader.moduleRegistry["site"].script = undefined;
						mw.loader.using("site", function(){});
						
						window.AjaxEdit.Main();
						// run NavToggle stuff
					});
				});
		}).css("margin-left", "3px");
		let cancelButton = $('<button>Cancel</button>').click(function(){
			$("#ajaxedit-wrapper").remove();
		});
		let previewDiv = $("<div></div>").css({ 
			"border-style": "solid", "border-width": "1px 1px 1px 4px", 
			"border-radius": "0.33em", "border-color": "#a3d3ff"}).hide();
		
		let loadPreview = () => {
			new mw.Api().parse(textarea.val(), {title: mw.config.get("wgPageName")}).done(function(html){
				previewDiv.html(html);
			});
		};
		let previewIntervalId = -1;
		let livePreviewCheckbox = $("<input type='checkbox'/>").attr("id", "ajaxedit-live-preview-checkbox").on("change", function(){
			if ($(this).is(':checked')){
				previewDiv.show("slow");
				loadPreview();
				previewIntervalId = setInterval(loadPreview, 500);
			}
			else {
				clearInterval(previewIntervalId);
				previewDiv.hide("fast");
				previewDiv.empty();
			}
		});
		
		var wrapper = $("<div></div>").attr("id","ajaxedit-wrapper").css({width: "auto", "margin":0, "overflow":"hidden"})
			.append(textarea)
			.append(saveButton).append(livePreviewCheckbox).append('<label for="ajaxedit-live-preview-checkbox">Live preview</label>').append(cancelButton)
			.append(previewDiv);
		
		//tabbed languages support
		if ($(ajaxEditAnchor).is("#tabstable .editlangsection a"))
			$(".languageContainer:not(:hidden)").first().prepend(wrapper);
		else
			hdr.after(wrapper);
	});
};

window.AjaxEdit.Save = function(sectionID, sectionName, sectionText, title)
{
	let data = {
		format: 'json',
		action: 'edit',
		title: title,
		section: sectionID,
		summary: `/* ${sectionName} */ edited using [[wikt:User:Dixtosa/AjaxEdit.js|AjaxEdit]]`,
		text: sectionText,
		token: mw.user.tokens.get('csrfToken')
	};
	return $.post(mw.util.wikiScript('api'), data, function(data) {
		if (data && data.edit && data.edit.result == 'Success') {
			mw.notify("successful");
		}
		else if (data && data.error) {
			mw.notify( 'Error: API returned error code "' + data.error.code + '": ' + data.error.info );
		}})
		.fail(function(xhr) {
			mw.notify( 'Error: Request failed.' );
		}, "json");
};

window.AjaxEdit.Main = function()
{
	$(".mw-editsection > .mw-editsection-bracket:contains(']')").each (function(){
		let btn = $('<a>Ædit</a>').attr("onclick", "AjaxEdit.Click(this)");
		$(this).before(", ").before(btn);
	});
};

if (mw.config.values.wgAction == "view")
	$(() => {
		mw.loader.using(["mediawiki.util", "mediawiki.Uri", "mediawiki.user", "mediawiki.api"], 
			window.AjaxEdit.Main);
	});