User:Xover/ocrtoy-prefs.js

Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Cmd-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (Cmd-Shift-R on a Mac)
Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Clear the cache in Tools → Preferences

For details and instructions about other browsers, see Wikipedia:Bypass your cache.

Code that you insert on this page could contain malicious content capable of compromising your account. If you are unsure whether code you are adding to this page is safe, you can ask at the central discussion page, Scriptorium. The code will be executed when previewing this page under some skins, including Monobook. You can Purge this page in the interim if you wish to refresh the content sooner under another skin.

Documentation for this script can be added at User:Xover/ocrtoy-prefs.

/* global $, mw, OO */
"use strict";


let myDeps = [];
myDeps.push('mediawiki.util');    // Basic MW utility functions
myDeps.push('mediawiki.api');
myDeps.push('mediawiki.storage'); // Wrapper for Web Storage API
myDeps.push('oojs-ui-core');      // OOUI core module
myDeps.push('oojs-ui-windows');   // OOUI windowing functions
myDeps.push('oojs-ui-widgets');   // OOUI buttons and toggles

mw.loader.using(myDeps, () => {
  $(() => {
    // Create a factory.
    let prefFactory = new OO.Factory();

    function PrefDialog (config) {
      PrefDialog.super.call(this, config);
    }
    OO.inheritClass(PrefDialog, OO.ui.ProcessDialog);

    PrefDialog.static.name = 'ocrtoy-prefs';
    PrefDialog.static.title = 'OCR settings';
    PrefDialog.static.actions = [
      { 
        flags: ['primary', 'progressive'],
        label: 'Save', 
        action: 'save' 
      },
      { 
        flags: 'safe', 
        label: 'Cancel' 
       }
    ];

    PrefDialog.prototype.initialize = function () {
      PrefDialog.super.prototype.initialize.call(this);

      // The primary language
      this.primaryLanguageInput = new OO.ui.TextInputWidget({
        value: 'eng',
        disabled: true
      });

      // Menu to select one additional language
      this.secondaryLanguageInput = new OO.ui.DropdownWidget({
          label: 'Additional language',
          menu: {
              items: [
                  new OO.ui.MenuOptionWidget({
                      data: 'eng',
                      label: 'English'
                  }),
                  new OO.ui.MenuOptionWidget({
                      data: 'grc',
                      label: 'Ancient Greek'
                  }),
                  new OO.ui.MenuOptionWidget({
                      data: 'fra',
                      label: 'French'
                  })
              ]
          }
      });

      // Create a fieldset layout with fields for each checkbox.
      let languagesFieldset = new OO.ui.FieldsetLayout({ 
        label: 'Languages'
      });

      languagesFieldset.addItems([
        new OO.ui.FieldLayout(this.primaryLanguageInput,   {label: 'Primary language', align: 'inline', help: 'The primary language'}),
        new OO.ui.FieldLayout(this.secondaryLanguageInput, {label: 'Additional language', align: 'inline', help: 'An additional language'}),
      ]);

      // Unwrap lines
      this.prefUnwrapBox = new OO.ui.CheckboxInputWidget({
        value: 'unwrap'
      });

      // Remove hyphens
      this.prefDehyphenBox = new OO.ui.CheckboxInputWidget({
        value: 'dehyphen'
      });

      // Remove the header line
      this.prefNoheaderBox = new OO.ui.CheckboxInputWidget({
        value: 'noheader'
      });

      // Remove the footer line
      this.prefNofooterBox = new OO.ui.CheckboxInputWidget({
        value: 'nofooter'
      });

      // Create a fieldset layout with fields for each checkbox.
      let fixupsFieldset = new OO.ui.FieldsetLayout({ 
        label: 'Fixups'
      });

      fixupsFieldset.addItems([
        new OO.ui.FieldLayout(this.prefUnwrapBox,   {label: 'Unwrap lines',   align: 'inline', help: 'Unwrap lines within paragraphs.'}),
        new OO.ui.FieldLayout(this.prefDehyphenBox, {label: 'Remove hyphens', align: 'inline', help: 'Remove hyphens in hyphenated words when unwrapping.'}),
        new OO.ui.FieldLayout(this.prefNoheaderBox, {label: 'Remove header',  align: 'inline', help: 'Remove the first line of OCR text if you set the page header in another manner.'}),
        new OO.ui.FieldLayout(this.prefNofooterBox, {label: 'Remove footer',  align: 'inline', help: 'Remove the last line of OCR text if you set the page footer in another manner.'}),
      ]);

      // HorizontalLayout for languages and fixups.
      let prefsLayout = new OO.ui.HorizontalLayout({
        items: [
          languagesFieldset,
          fixupsFieldset
        ]
      });
      $(prefsLayout.$element).css({ "padding": "1em"});
//      $(languagesFieldset.$element).css({ "position": "absolute", "top": "0px"});
//      $(fixupsFieldset.$element).css({ "position": "absolute", "top": "0px"});
      $(languagesFieldset.$element).css({"vertical-align": "top"});
      $(fixupsFieldset.$element).css({"vertical-align": "top", "padding-left": "5em"});

      this.content = prefsLayout;
      this.$body.append(this.content.$element);
    }; // PrefDialog.prototype.initialize

    // Register the window constructor with the factory.
    prefFactory.register(PrefDialog);

    // Create a window manager.
    let windowManager = new OO.ui.WindowManager({
      factory: prefFactory
    });
    $(document.body).append(windowManager.$element);


    let prefPortlet = mw.util.addPortletLink(
      'p-tb', '#', 'OCR settings', 'ca-ocrtoyprefs',
      'Configure the settings used for OCR.'
    ); 
    $(prefPortlet).click(event => {
      event.preventDefault();
      windowManager.openWindow('ocrtoy-prefs', {size: 'medium', modal: true});
    });
  }); // END: $(document).ready()
}); // END: mw.loader.using()