Topic on Extension talk:Popups

Wikis that use some CSS rules to set margins to the site layout (for example with this code) will experience a problem : the popups are shifted according to the margin, and then there the popups appears far from the link.

To solve this issue, you need to edit the file extensions/Popups/src/renderer.js

In line 18, add $body = $('body');

In line 490, change to link.offset().left) - ($window.width() - $body.width())/2;

Then you have to build the extension and the following files are changed : extensions/Popups/resources/dist/index.js and index.js.map

In this context, what does it mean to “build the extension”?

Is there an update for these code changes?

To compile the extension you need to run this command : npm run build

Thanks. Do you know we would change the Popups code for MW 1.33.0?

hmm, is there a way to fix this on the front end? I'm making a custom css theme for Wikipedia, so I don't think I can modify the javascript source code on the backend of Wikipedia. You can find the custom css here: github.com/Krasjet/wikipedia.rehash

I managed to solve the problem using a custom script. There is probably a more elegant solution but this one does the job.

let body = document.getElementsByTagName("body")[0];
 let callback = function(mutList, _obs) {
   for (let mut of mutList) {
     let mutNode = mut.addedNodes;
     if (mutNode.length !== 0 && mutNode[0].classList.contains("mwe-popups")) {
       let eleLeft = mutNode[0].style.left;
       let marginLeft = window.getComputedStyle(body).getPropertyValue("margin-left");
       mutNode[0].style.left = "calc("+ eleLeft + " - "+ marginLeft + ")";
     }
   }
 };
 let observer = new MutationObserver(callback);
 observer.observe(body, { childList: true });

Sorry for the bad formatting, nowiki tags didn't work as I intended.

After messing around for a bit, this is what you need if you want to use the script above in a mediawiki userscript file:

$(document).ready(function () {
  var body = document.getElementsByTagName("body")[0];
  var callback = function(mutList, _obs) {
    var mut = mutList[0];
    var mutNode = mut.addedNodes;
    if (mutNode.length !== 0 && mutNode[0].classList.contains("mwe-popups")) {
      var eleLeft = mutNode[0].style.left;
      var marginLeft = window.getComputedStyle(body).getPropertyValue("margin-left");
      // subtract the left margin from the computed value
      mutNode[0].style.left = "calc("+ eleLeft + " - "+ marginLeft + ")";
    }
  };
  var observer = new MutationObserver(callback);
  observer.observe(body, { childList: true });
});

With this code, I found that I had other offsets issues, so I used another way.