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 tb1 = 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 = tb1.selectionStart;
						tb1.value = tb1.value.substr(0, ss) + String.fromCharCode(evt.keyCode) + tb1.value.substr(tb1.selectionEnd);
						tb1.setSelectionRange(ss + 1, ss + 1);
					}
				}
				initTabsAllowed = function() {
					tb1.addEventListener("keydown", tabsAllowed, false);
					tb1.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 {
					tb1.removeEventListener("keydown", tabsAllowed, false);
					tb1.form.action = this.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() {
			tb1.addEventListener("mousewheel", function(evt) {
				evt.preventDefault();
				tb1.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"),
			actionAdd = "&useskin=darkvector";

		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) {
				tb1.form.action += actionAdd;
			} else {
				tb1.form.action = this.form.action.replace(actionAdd, "");
			}
		}, false);
		if (~window.location.search.indexOf(actionAdd)) {
			cb.checked = true;
		}
		ecb.appendChild(cb);
		ecb.appendChild(label);
	}
	
	/*****************************************************************************************/
	
	/*****************************************************************************************
	 * Next ***
	 */
	
		// code code code
	
	/*****************************************************************************************/
	
	/*****************************************************************************************
	 * Call the required functions from those above
	 */
	
		allowTabs();
		darkModePreview();
	
	/*****************************************************************************************/
	
	}()); // END WRAPPER