MediaWiki:Editing.js

/*****************************************************************************************
 * JavaScript here will be loaded by MediaWiki:Common.js when "editing mode" is detected.
 *
 *****************************************************************************************/

(function() { // BEGIN WRAPPER

	/*****************************************************************************************
	 * Variables required by all functions below
	 */

	var editingTextbox = document.getElementById("wpTextbox1");

	/*****************************************************************************************
	 * Add checkbox toggle of allowance to use TAB key in editing textarea to insert TAB chars
	 * Maintainer: [[User:Fred Gandt]]
	 */
	function allowTabs() {
		var ecb = document.getElementsByClassName("editCheckboxes")[0],
			cb = document.createElement("input"),
			cb_lbl = document.createElement("label"),
			tabsAllowed = function(evt) {
				if (evt.keyCode == 9) {
					evt.preventDefault();
					var ss = editingTextbox.selectionStart;
					editingTextbox.value = editingTextbox.value.substr(0, ss) + String.fromCharCode(evt.keyCode) + editingTextbox.value.substr(editingTextbox.selectionEnd);
					editingTextbox.setSelectionRange(ss + 1, ss + 1);
				}
			}

		initTabsAllowed = function() {
			editingTextbox.addEventListener("keydown", tabsAllowed, false);
			editingTextbox.form.action += "&allowTabs";
		};
		cb.setAttribute("id", "allowTabs");
		cb.setAttribute("type", "checkbox");
		cb.setAttribute("style", "margin-left: 3em");
		cb_lbl.setAttribute("for", "allowTabs");
		cb_lbl.setAttribute("title", "Allows insertion of Tab characters when and where the Tab key is pressed");
		cb_lbl.innerHTML = " Allow tabulations usage";
		cb.addEventListener("change", function() {
			if (this.checked) {
				initTabsAllowed();
			} else {
				editingTextbox.removeEventListener("keydown", tabsAllowed, false);
				editingTextbox.form.action = editingTextbox.form.action.replace("&allowTabs", "");
			}
		}, false);

		if (~window.location.search.indexOf("&allowTabs")) {
			cb.checked = true;
			initTabsAllowed();
		}

		ecb.appendChild(cb);
		ecb.appendChild(cb_lbl);
	}

	/*****************************************************************************************
	 * Prevents page body scrolling when scrolling of the editing textarea reaches the top or bottom.
	 * Maintainer: [[User:Fred Gandt]]
	 */
	function holdStill() {
		editingTextbox.addEventListener("mousewheel", function(evt) {
			evt.preventDefault();
			editingTextbox.scrollTop -= evt.wheelDelta / 3;
		}, false);
	}

	/*****************************************************************************************
	 * Add a checkbox to preview darkmode (?useskin=darkvector)
	 * Maintainer: [[User:Lou Montana]]
	 */
	function darkModePreview() {
		var ecb = document.getElementsByClassName("editCheckboxes")[0],
			cb = document.createElement("input"),
			label = document.createElement("label"),
			actionDarkAdd = "&useskin=darkvector";
			actionLightAdd = "&useskin=vector";

		cb.setAttribute("id", "previewDarkMode");
		cb.setAttribute("type", "checkbox");
		cb.setAttribute("style", "margin-left: 3em");
		label.setAttribute("for", "previewDarkMode");
		label.setAttribute("title", "Preview Dark Mode render (next preview)");
		label.innerHTML = " Preview Dark Mode";
		cb.addEventListener("change", function() {
			if (this.checked) {
				editingTextbox.form.action = editingTextbox.form.action.replace(actionLightAdd, "")
				editingTextbox.form.action += actionDarkAdd;
			} else {
				editingTextbox.form.action = editingTextbox.form.action.replace(actionDarkAdd, "");
				editingTextbox.form.action += actionLightAdd;
			}
		}, false);

		cb.checked = document.getElementsByTagName("body")[0].classList.contains("skin-darkvector");
		let event = new Event("change");
		cb.dispatchEvent(event);

		ecb.appendChild(cb);
		ecb.appendChild(label);
	}

	/*****************************************************************************************
	 * Call the required functions from those above
	 */

	allowTabs();
	darkModePreview();

}()); // END WRAPPER