User:Xover/ocrtoy-prefs.js

/* 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