Editing.js – MediaWiki
Jump to navigation
Jump to search
Lou Montana (talk | contribs) (Add allowLineMove function) |
Lou Montana (talk | contribs) (Somehow add MoveLine undo/redo capacity through the deprecated "document.execCommand" JS feature) |
||
Line 180: | Line 180: | ||
} | } | ||
editingTextbox.value = lines.join('\n'); | // editingTextbox.value = lines.join('\n'); | ||
editingTextbox.select(); | |||
document.execCommand('insertText', false, lines.join('\n')); | |||
editingTextbox.selectionStart = cursorStart; | editingTextbox.selectionStart = cursorStart; |
Revision as of 22:18, 11 June 2024
/*****************************************************************************************
* 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);
}
/*****************************************************************************************
* Allow moving source's selected line(s) with Alt+Up / Alt+Down (no Ctrl+Z, though)
* Maintainer: [[User:Lou Montana]]
*/
function allowLineMove() {
editingTextbox.addEventListener('keydown', (ev) => {
if (!ev.altKey || ev.ctrlKey || ev.shiftKey)
return;
let moveUp = ev.key == 'ArrowUp';
if (!moveUp && ev.key != 'ArrowDown')
return;
let lines = editingTextbox.value.split('\n');
let linesCount = lines.length;
if (linesCount == 0)
return;
let cursorStart = editingTextbox.selectionStart;
let cursorEnd = editingTextbox.selectionEnd;
let firstHighlightedLine = -1;
let lastHighlightedLine = -1;
let cursorStartColumn = -1;
let cursorEndColumn = -1;
let calcLength = 0;
let lineLength;
for (let i = 0; i < linesCount; ++i) {
lineLength = lines[i].length;
if (cursorStartColumn == -1 && cursorStart <= calcLength + lineLength) {
firstHighlightedLine = i;
cursorStartColumn = cursorStart - calcLength;
}
if (cursorEndColumn == -1 && cursorEnd <= calcLength + lineLength) {
lastHighlightedLine = i;
cursorEndColumn = cursorStart - calcLength;
}
if (cursorEndColumn != -1 && cursorEndColumn != -1)
break;
calcLength += lineLength + 1; // "\n"
}
if (cursorStartColumn == -1 || cursorEndColumn == -1)
return;
if (firstHighlightedLine > lastHighlightedLine)
[firstHighlightedLine, lastHighlightedLine] = [lastHighlightedLine, firstHighlightedLine];
if ((moveUp && firstHighlightedLine == 0) || (!moveUp && lastHighlightedLine == linesCount - 1))
return;
if (moveUp)
{
let movedLine = lines[firstHighlightedLine - 1];
lines.splice(firstHighlightedLine - 1, 1);
lines.splice(lastHighlightedLine, 0, movedLine);
cursorStart -= movedLine.length + 1;
cursorEnd -= movedLine.length + 1;
}
else
{
let movedLine = lines[lastHighlightedLine + 1];
lines.splice(lastHighlightedLine + 1, 1);
lines.splice(firstHighlightedLine, 0, movedLine);
cursorStart += movedLine.length + 1;
cursorEnd += movedLine.length + 1;
}
// editingTextbox.value = lines.join('\n');
editingTextbox.select();
document.execCommand('insertText', false, lines.join('\n'));
editingTextbox.selectionStart = cursorStart;
editingTextbox.selectionEnd = cursorEnd;
});
}
/*****************************************************************************************
* Call the required functions from those above
*/
allowTabs();
allowLineMove();
darkModePreview();
}()); // END WRAPPER