MediaWiki:Gadget-QuickEditOptions.js

function makeEditOptions() {
	
	var url = window.location.href;
	// Make a EditOptions div and append to content (initial display: none if not in editing mode), also apply other adjustments based on url
	if ((url.includes('veaction=edit') || url.includes('veaction=editsource') || url.includes('action=edit')) && !url.includes('MediaWiki:') && !url.includes('undo=')) {
		$('#content').append(
			'<div id="gadgetEditOptions"></div>'
		); 
		document.getElementById('footer').style.paddingBottom = '150px';
	} else {
		$('#content').append(
			'<div id="gadgetEditOptions" style="display: none"></div>'
		); 
	}

	// Add Summary textarea
	$('#gadgetEditOptions').append(
			'<input type="textarea" id="summaryInput" placeholder="Describe what you changed"><br>' + 
			'<p><small>Please note that all contributions to Hearthstone Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.' +
			' You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see <a href="/wiki/Hearthstone_Wiki:Copyrights" title="Hearthstone Wiki:Copyrights">Hearthstone Wiki:Copyrights</a> for details).' +
			' <b>Do not submit copyrighted work without permission!</b></small></p>'
	); 

	// Add oo-ui Save button to content
	$('#gadgetEditOptions').append(
		'<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive oo-ui-buttonWidget oo-ui-actionWidget oo-ui-labelElement">' +
		'<a class="oo-ui-buttonElement-button" id="gadgetSaveButton" title="Save your changes instantly [Alt+Shift+S]" role="button" tabindex="0" rel="nofollow">' +
		'<span class="oo-ui-labelElement-label">Save changes</span></a></span>'
	); 

	// Find Save button
	var gadgetSaveButton = document.getElementById('gadgetSaveButton');

	// Save and apply summary
	gadgetSaveButton.addEventListener('click', function() {
	    var summaryInput = document.getElementById('summaryInput'); 
	    var summary = summaryInput.value.trim();
	
	    // Simulate ALT+SHIFT+S key press
	    var e = jQuery.Event("keydown", {
	        altKey: true,
	        shiftKey: true,
	        keyCode: 83, // S key
	        which: 83 
	    });
	    $(document).trigger(e);
	
	    // Helper function for delay in ES6
	    function delay(ms) {
	        return new Promise(function(resolve) {
	            setTimeout(resolve, ms);
	        });
	    }
	
	    // Function to handle the summary
	    function applySummary() {
	        // Get states of minor edit/watch checkboxes
	        window.gadgetMinorEditCheckbox = document.getElementById('gadgetMinorEdit');
	        window.gadgetWatchCheckBox = document.getElementById('gadgetWatchPage');
	        // Find oo-ui summary input 
	        var pasteTarget = document.querySelector('.oo-ui-inputWidget-input.oo-ui-textInputWidget-autosized');
	
	        if (pasteTarget) {
	        	if (summary !== "") {
	            	pasteTarget.value = summary;
	        	}
	        }
	
	        // Match checkboxes and trigger ALT+SHIFT+S again to finish saving
	        matchCheckBoxes();
	        $(document).trigger(e);
	    }
	
	    // Wait 0.5s then apply the summary
	    delay(500).then(applySummary);
	});

	function matchCheckBoxes() {
	// Get states of OOUI minor edit/watch checkboxes
	var oouiMinorEditCheckbox = getCorrectCheckBox('i');
	var oouiWatchCheckBox = getCorrectCheckBox('w');
	
	if (oouiMinorEditCheckbox !== null){
		if (window.gadgetMinorEditCheckbox.checked) {
			oouiMinorEditCheckbox.checked = true;
			} else{
			oouiMinorEditCheckbox.checked = false;
		}
	}
	
	if (window.gadgetWatchCheckBox.checked) {
		oouiWatchCheckBox.checked = true;
		} else{
		oouiWatchCheckBox.checked = false;
		}
	}
	
	function getCorrectCheckBox(accessKey){
		const elements = document.getElementsByClassName('oo-ui-inputWidget-input');
	    for (let element of elements) {
	        if (element.accessKey === accessKey) {
	            return element;
	        }
	    }
	    return null;
	}

	// Add oo-ui Preview button to content
	$('#gadgetEditOptions').append(
			'<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-buttonWidget oo-ui-actionWidget">' +
			'<a class="oo-ui-buttonElement-button" id="gadgetPreviewButton" title="Preview the page with your changes [Alt+Shift+P]" role="button" tabindex="0" rel="nofollow">' +
			'<span class="oo-ui-labelElement-label">Show preview</span></a></span>'
		); 

	//Find Preview button
	var gadgetPreviewButton = document.getElementById('gadgetPreviewButton');

	//Simulate ALT+SHIFT+P on button press
	gadgetPreviewButton.addEventListener('click', function() {
	  var e = jQuery.Event("keydown", {
		altKey: true,
		shiftKey: true,
		keyCode: 80,
		which: 80 
	  });
	  $(document).trigger(e);
	}); 

	// Add oo-ui Changes button to content
	$('#gadgetEditOptions').append(
			'<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-buttonWidget oo-ui-actionWidget">' +
			'<a class="oo-ui-buttonElement-button" id="gadgetChangesButton" title="Show which changes you made to the text [Alt+Shift+V]" role="button" tabindex="0" rel="nofollow">' +
			'<span class="oo-ui-labelElement-label">Review your changes</span></a></span>'
		); 

	//Find Changes button
	var gadgetChangesButton = document.getElementById('gadgetChangesButton');

	//Simulate ALT+SHIFT+V on button press
	gadgetChangesButton.addEventListener('click', function() {
	  var e = jQuery.Event("keydown", {
		altKey: true,
		shiftKey: true,
		keyCode: 86,
		which: 86 
	  });
	  $(document).trigger(e);
	}); 
	
	$('#gadgetEditOptions').append(
	'<p style="font-size: 1.42em; display: inline"> | </p><input type="checkbox" id="gadgetMinorEdit"><label for="gadgetMinorEdit">This is a minor edit</label>'
	);

	$('#gadgetEditOptions').append(
	'<p style="font-size: 1.42em; display: inline"> | </p><input type="checkbox" id="gadgetWatchPage" checked=""><label for="gadgetWatchPage">Watch this page</label>'
	);
}

// Keep positiong of EditOptions updated
function updatePosition() {
	function update() {
	  var el = document.getElementById('gadgetEditOptions');
	  var scrollPosition = window.scrollY + window.innerHeight;
	  var totalHeight = document.documentElement.scrollHeight;

	  // Check if the user has scrolled to the bottom of the page
	  if (scrollPosition >= totalHeight) {
		el.style.bottom = '35px'; // Move up 35px (wiki.gg footer height) from the bottom
	  } else {
		el.style.bottom = '0'; // Stick to the bottom
	  }
	}

	// Update position on scroll and resize
	window.addEventListener('scroll', update);
	window.addEventListener('resize', update);

	// Initial call to set the position
	update();
}

$(document).ready(function() {
	if ($(window).width() >= 1920) {
		makeEditOptions();
		updatePosition();
		
		// Since VE doesn't reload page when Visual editing, source editing, and returning to the page, this function is needed to ensure the EditOptions are only displayed while editing.
		(function() {
			const originalPushState = history.pushState;
			const originalReplaceState = history.replaceState;
	
			let lastUrl = window.location.href;
	
			function onUrlChange() {
				const url = window.location.href;
				if ((url.includes('veaction=edit') || url.includes('veaction=editsource') || url.includes('action=edit')) && !url.includes('MediaWiki:') && !url.includes('undo=')) {
					if (url !== lastUrl) {
						lastUrl = url;
						showEditOptions(url);
					}
				} else {
					hideEditOptions();
					// Update lastUrl to prevent re-execution
					lastUrl = url;
				}
			}
	
			function showEditOptions(url) {
				document.getElementById('gadgetEditOptions').style.display = 'block';
				document.getElementById('footer').style.paddingBottom = '150px';
				// Hide Preview button on Visual editing since it doesn't function during it.
				if (url.includes('veaction=edit') && !url.includes('veaction=editsource')) {
					document.getElementById('gadgetPreviewButton').style.display = 'none';
				} else{
					document.getElementById('gadgetPreviewButton').style.display = 'block';
				}
			}
	
			function hideEditOptions() {
				document.getElementById('gadgetEditOptions').style.display = 'none';
				document.getElementById('footer').style.paddingBottom = '1.25em';
			}
	
			history.pushState = function(state) {
				originalPushState.apply(this, arguments);
				onUrlChange();
			};
	
			history.replaceState = function(state) {
				originalReplaceState.apply(this, arguments);
				onUrlChange();
			};
			
			// Handle back/forward navigation
		    window.addEventListener('popstate', onUrlChange);
		
		    // Execute when the page is first loaded
		    window.addEventListener('load', onUrlChange);
	
			// Initial execution
			onUrlChange();
		})();
	}
});