User:Sjno2000/common.js

const langSvgString = '<path d="M 25 2 C 12.359375 2 2 11.359375 2 23 C 2 27.949219 3.90625 32.484375 7.03125 36.0625 L 7 36.0625 C 7.390625 36.71875 7.441406 37.5 7.21875 38.46875 C 6.996094 39.4375 6.496094 40.527344 5.90625 41.53125 C 5.316406 42.535156 4.65625 43.441406 4.125 44.15625 C 3.859375 44.511719 3.617188 44.8125 3.4375 45.0625 C 3.347656 45.1875 3.289063 45.316406 3.21875 45.4375 C 3.148438 45.558594 3 45.550781 3 46.09375 C 3 46.507813 3.164063 47.015625 3.5625 47.40625 C 3.960938 47.796875 4.535156 48 5.1875 48 C 9.796875 48 13.992188 44.574219 17.1875 42.6875 C 19.636719 43.5 22.25 44 25 44 C 37.640625 44 48 34.640625 48 23 C 48 11.359375 37.640625 2 25 2 Z M 25 4 C 36.660156 4 46 12.546875 46 23 C 46 33.453125 36.660156 42 25 42 C 22.296875 42 19.714844 41.527344 17.34375 40.6875 L 16.90625 40.53125 L 16.53125 40.78125 C 13.0625 42.765625 8.886719 45.964844 5.25 46 C 5.386719 45.8125 5.519531 45.640625 5.71875 45.375 C 6.261719 44.644531 6.972656 43.640625 7.625 42.53125 C 8.277344 41.421875 8.894531 40.191406 9.1875 38.90625 C 9.480469 37.621094 9.445313 36.246094 8.71875 35.03125 L 8.65625 34.9375 L 8.625 34.875 C 5.734375 31.609375 4 27.492188 4 23 C 4 12.546875 13.339844 4 25 4 Z M 16.34375 12 C 15.976563 12.066406 15.671875 12.332031 15.5625 12.6875 L 12.53125 21.4375 C 12.414063 21.601563 12.347656 21.796875 12.34375 22 L 11.0625 25.6875 C 10.882813 26.039063 10.925781 26.460938 11.171875 26.769531 C 11.417969 27.078125 11.820313 27.210938 12.203125 27.113281 C 12.582031 27.015625 12.871094 26.703125 12.9375 26.3125 L 14.09375 23 L 18.90625 23 L 20.0625 26.3125 C 20.128906 26.703125 20.417969 27.015625 20.796875 27.113281 C 21.179688 27.210938 21.582031 27.078125 21.828125 26.769531 C 22.074219 26.460938 22.117188 26.039063 21.9375 25.6875 L 17.4375 12.6875 C 17.289063 12.222656 16.828125 11.929688 16.34375 12 Z M 16.5 16.03125 L 18.21875 21 L 14.78125 21 Z M 32.90625 18.96875 C 32.863281 18.976563 32.820313 18.988281 32.78125 19 C 32.316406 19.105469 31.988281 19.523438 32 20 L 32 22 L 27 22 C 26.96875 22 26.9375 22 26.90625 22 C 26.875 22 26.84375 22 26.8125 22 C 26.261719 22.050781 25.855469 22.542969 25.90625 23.09375 C 25.957031 23.644531 26.449219 24.050781 27 24 L 35.71875 24 C 35.324219 25.308594 34.417969 27.535156 32.40625 29.5625 C 30.703125 27.882813 29.9375 26.46875 29.9375 26.46875 C 29.746094 26.101563 29.347656 25.890625 28.9375 25.9375 C 28.601563 25.976563 28.308594 26.179688 28.15625 26.484375 C 28.003906 26.785156 28.015625 27.144531 28.1875 27.4375 C 28.1875 27.4375 29.050781 28.996094 30.875 30.84375 C 29.738281 31.695313 28.375 32.484375 26.6875 33.0625 C 26.296875 33.128906 25.984375 33.417969 25.886719 33.796875 C 25.789063 34.179688 25.921875 34.582031 26.230469 34.828125 C 26.539063 35.074219 26.960938 35.117188 27.3125 34.9375 C 29.351563 34.238281 30.996094 33.261719 32.34375 32.1875 C 33.496094 33.148438 34.871094 34.097656 36.5625 34.90625 C 37.0625 35.148438 37.664063 34.9375 37.90625 34.4375 C 38.148438 33.9375 37.9375 33.335938 37.4375 33.09375 C 36.015625 32.414063 34.835938 31.636719 33.84375 30.84375 C 36.410156 28.199219 37.410156 25.355469 37.78125 24 L 39 24 C 39.359375 24.003906 39.695313 23.816406 39.878906 23.503906 C 40.058594 23.191406 40.058594 22.808594 39.878906 22.496094 C 39.695313 22.183594 39.359375 21.996094 39 22 L 34 22 L 34 20 C 34.011719 19.710938 33.894531 19.433594 33.6875 19.238281 C 33.476563 19.039063 33.191406 18.941406 32.90625 18.96875 Z"/> ';

const mwIndicatorsElement = document.querySelector('#content > .mw-indicators'); const langElement = document.querySelector('#other-languages');

const parser = new DOMParser; const svgDoc = parser.parseFromString(langSvgString, 'image/svg+xml'); const svgElement = svgDoc.documentElement;

svgElement.addEventListener('click', function(event) { const popup = document.querySelector('#other-languages-popup');  if (popup) {    popup.remove;    return;  }

const rect = event.target.getBoundingClientRect; const popupWidth = 300; const top = rect.bottom + 'px'; const left = (rect.left - popupWidth) + 'px'; const width = popupWidth + 'px';

const langElementClone = langElement.cloneNode(true); langElementClone.id = 'other-languages-popup'; langElementClone.style.position = 'absolute'; langElementClone.style.top = top; langElementClone.style.left = left; langElementClone.style.width = width;

const handleClickOutside = function(event) { if (!langElementClone.contains(event.target)) { langElementClone.remove; document.removeEventListener('click', handleClickOutside); } }  setTimeout(function {    document.addEventListener('click', handleClickOutside);  }, 10);

document.body.appendChild(langElementClone); });

if (langElement) { mwIndicatorsElement.appendChild(svgElement); }