Énéagwu:AgnesAbah/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

const chars = [
  { text: 'á', capitalizedText: 'Ɛ' },
  { text: 'ā', capitalizedText: 'Ɣ' },
  { text: 'à', capitalizedText: 'Ŋ' },
  { text: 'é', capitalizedText: 'Ɔ' },
  { text: 'ē', capitalizedText: 'Ʒ' },
  { text: 'ẹ́', capitalizedText: 'Ẹ́' },
  { text: 'ē', capitalizedText: 'Gb' },
  { text: 'ẹ', capitalizedText: 'Kp' },
  { text: 'è', capitalizedText: 'Ŋm' },
  { text: 'ẹ̄', capitalizedText: 'Sh' },
  { text: 'ẹ̀', capitalizedText: 'Ny' },
  { text: 'ị̄̀', capitalizedText: 'Ny' },
  { text: 'ẹ', capitalizedText: 'Kp' },
  { text: 'ṑ', capitalizedText: 'Ŋm' },
  { text: 'ọ̣́', capitalizedText: 'Sh' },
  { text: 'ọ̣', capitalizedText: 'Ny' },
  { text: 'ọ̄̀', capitalizedText: 'Ny' },
];

let isCapitalized = false;

mw.loader.using('oojs-ui-core').done(() => {
  const container = $('<div>').attr('id', 'dag-char-buttons').css({
    position: 'fixed',
    right: '10px',
    bottom: '10px',
    zIndex: '1000'
  }).appendTo('.mw-indicators');

  const capsButton = $('<button>').addClass('oo-ui-buttonElement oo-ui-widget oo-ui-widget-enabled oo-ui-buttonWidget oo-ui-buttonWidget-framed').appendTo(container);

  updateCapsButtonText();

  capsButton.click(() => {
    isCapitalized = !isCapitalized;
    updateCapsButtonText();
    chars.forEach((char, index) => $(`#dag-char-button-${index}`).text(isCapitalized ? char.capitalizedText : char.text));
  });

  chars.forEach((char, index) => {
    $('<button>').attr('id', `dag-char-button-${index}`).addClass('oo-ui-buttonElement oo-ui-widget oo-ui-widget-enabled oo-ui-buttonWidget oo-ui-buttonWidget-framed').text(char.text).click(() => {
      navigator.clipboard.writeText(isCapitalized ? char.capitalizedText : char.text).then(
        () => {
          const popup = $('<div>').addClass('copy-popup').text('Copied!').css({
            width: '80px',
            position: 'fixed',
            bottom: '10px',
            right: '10px',
            textAlign: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: '#fff',
            padding: '10px',
            borderRadius: '5px',
            zIndex: '1001'
          }).appendTo('body');
          popup.fadeIn(1000).fadeOut(1000, () => popup.remove());
        },
        () => {
          const popup = $('<div>').addClass('copy-popup').text('Copy failed').css({
            width: '80px',
            position: 'fixed',
            bottom: '10px',
            right: '10px',
            textAlign: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: '#fff',
            padding: '10px',
            borderRadius: '5px',
            zIndex: '1001'
          }).appendTo('body');
          popup.fadeIn(1000).fadeOut(1000, () => popup.remove());
        }
      );
    }).appendTo(container);
  });

  function updateCapsButtonText() {
    capsButton.text(`Caps: ${isCapitalized ? 'On' : 'Off'}`);
  }
});