User:Arthurfragoso/SideBySideEdit.js

Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.

This user script seems to have a documentation page at User:Arthurfragoso/SideBySideEdit.

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

 // ==UserScript==
 // @name Wikipedia Side-by-side Edit
 // @namespace https://en.wikipedia.org/wiki/User:Arthurfragoso/SideBySideEdit.js
 // @version 1.0.4
 // @description Wikipedia Side-by-side Edit
 // @author Arthurfragoso
 // @match https://*.wikipedia.org/w/index.php?*action=*
 // @icon https://en.wikipedia.org/static/favicon/wikipedia.ico
 // @grant GM.getValue
 // @grant GM.setValue
 // @grant GM.info
 // @run-at document-end
 // ==/UserScript==

 /*
  * This script should be able to run in any Userscript Manager. (greasyfork.org)
  * My personal recomendation is the open source Violentmonkey.
  * It also works directly as a Wikipedia Userscript for conveniency.
  *
  * Once installed, it should just work seamlessly.
  *
  * Feel free to fork and make customisations.
  * The license is the same as the content in Wikipedia. (CC BY-SA 4.0)
  *
  * */


 (asyncfunction(){
 'use strict';
 letscriptHandler=null;

 // Get the <html> element
 consthtmlElement=document.documentElement;

 if(!document.body.classList.contains('skin-vector-2022')){
 console.log("Wikipedia Side-by-side Edit is only compatible with Vector (2022).");
 returnfalse;
 }

 // Adds the WpExtnSideBySideEnabled CSS class to the HTML tag,
 // This allows for external scripts to check if it is enabled.
 // It also prevents two versions of the script to be run at the same time,
 // In case it is activated in Wikipedia and as a browser user script
 if(htmlElement.classList.contains("WpExtnSideBySideEnabled")){
 return;
 }
 htmlElement.classList.add("WpExtnSideBySideEnabled");


 if(typeofGM!=='undefined'&&GM.info&&GM.info.scriptHandler){
 scriptHandler=GM.info.scriptHandler;
 }else{
 conststackTrace=newError().stack;
 scriptHandler=stackTrace.includes("wikipedia.org")
 ?"Wikipedia UserScript Manager"
 :stackTrace;
 }

 console.log('Wikipedia Side-by-side Edit extension enabled by '+scriptHandler);


 //let wTextareaDefaultSize = '680px';


 // Select the wikiPreview element
 constwikiPreview=document.querySelector('#wikiPreview');

 // If there is no wikiPreview, then it's not in a edit page.
 if(!wikiPreview){
 returnfalse;
 }


 // Makes a Greasemonkey compatible setValue/getValue
 if(typeofGM==='undefined'){
 // Define a custom GM object to handle localStorage operations
 window.GM={
 setValue:asyncfunction(key,value){
 try{
 // Convert the value to a JSON string before saving
 localStorage.setItem(key,JSON.stringify(value));
 }catch(error){
 console.error("Error setting value in localStorage:",error);
 }
 },
 getValue:asyncfunction(key,defaultValue){
 try{
 // Get the value from localStorage
 conststoredValue=localStorage.getItem(key);
 // Parse the JSON string back to its original form
 returnstoredValue!==null?JSON.parse(storedValue):defaultValue;
 }catch(error){
 console.error("Error getting value from localStorage:",error);
 returndefaultValue;
 }
 }
 };
 }



 // Helper function to create buttons
 constcreateButton=(id,label,callback)=>{
 constbutton=document.createElement('button');
 button.id=id;
 button.textContent=label;
 button.style.marginRight='calc(50vw - 39em)';
 button.type='button';// Ensure the button is of type "button" to prevent form submission
 button.addEventListener('click',callback);
 returnbutton;
 }

 constswapElements=(element1,element2)=>{
 // Get the parent nodes of both elements
 constparent1=element1.parentNode;
 constparent2=element2.parentNode;

 // Get the next siblings (to maintain insertion point)
 constsibling1=element1.nextSibling;
 constsibling2=element2.nextSibling;

 // Move element1 to the position of element2
 if(sibling2){
 parent2.insertBefore(element1,sibling2);
 }else{
 parent2.appendChild(element1);
 }

 // Move element2 to the position of element1
 if(sibling1){
 parent1.insertBefore(element2,sibling1);
 }else{
 parent1.appendChild(element2);
 }
 }

 // Editor
 // To the left -> set it to: false
 // To the right side -> set it to: true

 leteditorAtRightSide=awaitGM.getValue('editorAtRightSide',false);

 // Define the behavior for "seek next image" and place cursor at insertion point
 constsideBySideEdit=()=>{
 // Select necessary elements
 consteditForm=document.getElementById('editform');
 conststickyContainer=document.querySelector('.vector-column-end .vector-sticky-pinned-container');
 constmwBody=document.querySelector('.mw-body');
 constwpTextbox1=document.getElementById('wpTextbox1');
 constpSearch=document.getElementById('p-search');


 letContentToBeMovedToTheRight=editorAtRightSide?editForm:wikiPreview;

 if(ContentToBeMovedToTheRight.closest('.vector-sticky-pinned-container')){
 console.log('Already in Side-by-Side mode');
 returntrue;
 };



 // Changes to Wide view mode

 // Check if the <html> tag has the class "vector-feature-limited-width-clientpref-1"
 if(htmlElement.classList.contains("vector-feature-limited-width-clientpref-1")){
 // Replace the class with "vector-feature-limited-width-clientpref-0"
 htmlElement.classList.replace(
 "vector-feature-limited-width-clientpref-1",
 "vector-feature-limited-width-clientpref-0"
 );
 console.log("Wikipedia layout set to wide mode.");
 }


 // Check if the Apperance options are in the right panel, and hides it.
 if(htmlElement.classList.contains("vector-feature-appearance-pinned-clientpref-1")){
 // Replace the class with "vector-feature-limited-width-clientpref-0"
 htmlElement.classList.replace(
 "vector-feature-appearance-pinned-clientpref-1",
 "vector-feature-appearance-pinned-clientpref-0"
 );
 console.log("Hide apperance menu");
 }


 // Move #editform into .vector-sticky-pinned-container
 if(ContentToBeMovedToTheRight&&stickyContainer){
 pSearch.parentNode.insertBefore(
 createButton('SwitchEditFormAndPreviewPosition','⇄',function(){
 swapElements(editForm,wikiPreview);
 editorAtRightSide=!editorAtRightSide;
 GM.setValue('editorAtRightSide',editorAtRightSide);//save settings
 }),pSearch.nextSibling);
 stickyContainer.appendChild(ContentToBeMovedToTheRight);
 console.log('#editform has been moved inside .vector-sticky-pinned-container');

 // Add padding-right to the form
 ContentToBeMovedToTheRight.style.paddingRight='10px';
 console.log('Padding-right added to #editform');
 }else{
 console.warn('Could not find #editform or .vector-sticky-pinned-container');
 }

 // Apply grid layout to .mw-body
 if(mwBody){
 mwBody.style.display='grid';
 mwBody.style.gridTemplateColumns='minmax(0, 1fr) minmax(0, 1fr)';
 mwBody.style.columnGap='24px';
 console.log('Grid layout applied to .mw-body');
 }else{
 console.warn('Could not find .mw-body');
 }

 if(document.querySelector('.vector-column-end')){
 document.querySelector('.vector-column-end').style.marginTop=0;
 }

 // Adjust height of #wpTextbox1
 if(wpTextbox1&&typeofwTextareaDefaultSize!=='undefined'){
 wpTextbox1.style.height=wTextareaDefaultSize;
 console.log('Height of #wpTextbox1 set');
 }

 };


 // Attaches the side-by-side activation to the Preview button
 if(window.getComputedStyle(wikiPreview).display==='none'){
 console.log('#wikiPreview is set to display: none');

 constPreviewBtn=document.querySelector('#wpPreview');
 if(PreviewBtn){
 console.log('Wikipedia Side-by-side Edit extension successfully loaded ');
 PreviewBtn.addEventListener('click',sideBySideEdit);
 }else{
 console.log('Wikipedia Side-by-side Edit failed to load');
 }

 }else{
 console.log('#wikiPreview is available');
 sideBySideEdit();
 }

 returntrue;

 })();

Retrieved from "https://en.wikipedia.org/w/index.php?title=User:Arthurfragoso/SideBySideEdit.js&oldid=1272581515"