Editing.js – MediaWiki
Jump to navigation
Jump to search
Lou Montana (talk | contribs) m (Change Tabs checkbox text) |
Lou Montana (talk | contribs) (Add Dark Mode preview) |
||
Line 3: | Line 3: | ||
* | * | ||
*****************************************************************************************/ | *****************************************************************************************/ | ||
(function() { // BEGIN WRAPPER | |||
/ | |||
/***************************************************************************************** | /***************************************************************************************** | ||
* Variables required by all functions below | |||
*/ | |||
var tb1 = document.getElementById("wpTextbox1"); | |||
function | /*****************************************************************************************/ | ||
/***************************************************************************************** | |||
* 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], | var ecb = document.getElementsByClassName("editCheckboxes")[0], | ||
cb = document.createElement("input"), | cb = document.createElement("input"), | ||
label = document.createElement("label"), | |||
actionAdd = "&useskin=darkvector"; | |||
cb.setAttribute("id", "previewDarkMode"); | |||
cb.setAttribute("id", " | |||
cb.setAttribute("type", "checkbox"); | cb.setAttribute("type", "checkbox"); | ||
cb.setAttribute("style", "margin-left: 3em;"); | 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() { | cb.addEventListener("change", function() { | ||
if (this.checked) { | if (this.checked) { | ||
tb1.form.action += actionAdd; | |||
} else { | } else { | ||
tb1.form.action = this.form.action.replace(actionAdd, ""); | |||
tb1.form.action = this.form.action.replace( | |||
} | } | ||
}, false); | }, false); | ||
if (~window.location.search.indexOf( | if (~window.location.search.indexOf(actionAdd)) { | ||
cb.checked = true; | cb.checked = true; | ||
} | } | ||
ecb.appendChild(cb); | ecb.appendChild(cb); | ||
ecb.appendChild( | ecb.appendChild(label); | ||
} | } | ||
/*****************************************************************************************/ | /*****************************************************************************************/ | ||
/***************************************************************************************** | |||
* Next *** | |||
*/ | |||
// code code code | |||
/*****************************************************************************************/ | |||
/***************************************************************************************** | |||
* Call the required functions from those above | |||
*/ | |||
allowTabs(); | |||
/***************************************************************************************** | darkModePreview(); | ||
/*****************************************************************************************/ | |||
}()); // END WRAPPER | |||
/*****************************************************************************************/ | |||
/***************************************************************************************** | |||
/*****************************************************************************************/ | |||
}()); // END WRAPPER |
Revision as of 23:33, 2 September 2022
/*****************************************************************************************
* 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