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

// Gadget-TciTest.js — TCI Calculator (isolated test instance — LIVE VERSION!)
(function ($, mw, OO) {
  "use strict";

  mw.loader.using(["oojs-ui-core", "oojs-ui-widgets", "oojs-ui-windows"]).done(function () {
    function TCICalculatorTestDialog(config) {
      TCICalculatorTestDialog.super.call(this, config);
    }
    OO.inheritClass(TCICalculatorTestDialog, OO.ui.ProcessDialog);

    TCICalculatorTestDialog.static.name = 'tciCalculatorTestDialog';
    TCICalculatorTestDialog.static.title = 'Theme Code Index Calculator — LIVE VERSION';
    TCICalculatorTestDialog.static.actions = [
      { action: 'cancel', label: 'Cancel', flags: 'safe' },
      { action: 'calculate', label: 'Calculate TCI', flags: ['primary', 'progressive'] }
    ];

    TCICalculatorTestDialog.prototype.initialize = function () {
      TCICalculatorTestDialog.super.prototype.initialize.call(this);
      this.content = new OO.ui.PanelLayout({ padded: true, expanded: false, scrollable: true });
      this.$body.append(this.content.$element);

      this.abcInput = new OO.ui.MultilineTextInputWidget({ placeholder: 'Paste ABC notation here...', autosize: true, rows: 10 });

      this.octaveChoice = new OO.ui.DropdownInputWidget({
        options: [
          { data: 'standard', label: 'Standard fiddle range (default)' },
          { data: 'visual', label: 'Based on ABC visual octave' },
          { data: 'shiftUp', label: 'Force high octave (+1)' },
          { data: 'shiftDown', label: 'Force low octave (-1)' }
        ]
      });

      this.resultOutput = new OO.ui.MultilineTextInputWidget({ readOnly: true, autosize: true, rows: 4 });

      this.content.$element.append(
        new OO.ui.FieldsetLayout({
          label: 'TCI Calculator Options',
          items: [
            new OO.ui.FieldLayout(this.abcInput, { label: 'ABC Notation', align: 'top' }),
            new OO.ui.FieldLayout(this.octaveChoice, { label: 'Octave Interpretation', align: 'top' }),
            new OO.ui.FieldLayout(this.resultOutput, { label: 'Theme Code Index (TCI)', align: 'top' })
          ]
        }).$element
      );
    };

    // (rest of the script unchanged)

    function openTCICalculatorTestDialog() {
      const windowManager = new OO.ui.WindowManager();
      $(document.body).append(windowManager.$element);
      const dialog = new TCICalculatorTestDialog();
      windowManager.addWindows([dialog]);
      windowManager.openWindow(dialog);
    }

    mw.util.addPortletLink('p-cactions', '#', '🎼 TCI Test', 'ca-tcitest', 'Open TCI test');
    $(document).on('click', '#ca-tcitest', function (e) {
      e.preventDefault();
      openTCICalculatorTestDialog();
    });
  });
})(jQuery, mediaWiki, OO);