MediaWiki: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.

/* Any JavaScript here will be loaded for all users on every page load. */
// Add a copyable 100px-wide thumb link on File: pages (good for portrait 440x587 -> ~100x133)
mw.hook('wikipage.content').add(function ($content) {
  // Namespace 6 = File:
  if (mw.config.get('wgNamespaceNumber') !== 6) return;

  // On File: pages, wgTitle is usually the filename without "File:"
  var filename = mw.config.get('wgTitle');
  if (!filename) return;

  // Build: /wiki/Special:Redirect/file/<filename>?width=100
  var rel = mw.util.getUrl('Special:Redirect/file/' + filename, { width: 100 });
  var abs = (mw.config.get('wgServer') || location.origin) + rel;

  var $box = $('<div class="uap-thumb-linkbox">' +
      '<div><b>Thumb link (100w ≈ 133h)</b></div>' +
      '<div class="uap-thumb-row">' +
        '<input class="uap-thumb-input" type="text" readonly />' +
        '<button class="uap-thumb-copy mw-ui-button mw-ui-progressive">Copy</button>' +
      '</div>' +
      '<div class="uap-thumb-note">Use this URL in wiki entries / phpBB. It will always resolve to a 100px-wide thumb.</div>' +
    '</div>');

  $box.find('input.uap-thumb-input').val(abs);

  $box.find('button.uap-thumb-copy').on('click', function () {
    var $input = $box.find('input.uap-thumb-input');
    $input.trigger('focus').trigger('select');

    var text = $input.val();

    // Modern clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(function () {
        // tiny feedback
        $box.find('.uap-thumb-note').text('Copied!');
        setTimeout(function () {
          $box.find('.uap-thumb-note').text('Use this URL in wiki entries / phpBB. It will always resolve to a 100px-wide thumb.');
        }, 1500);
      }).catch(function () {
        // fallback
        document.execCommand('copy');
      });
    } else {
      // Legacy fallback
      document.execCommand('copy');
    }
  });

  // Insert near the file info table if present
  var $target = $('#fileinfotable');
  if ($target.length) {
    $target.after($box);
  } else {
    $content.prepend($box);
  }
});