MediaWiki:Gadget-oouiDemo/core.js
Jump to navigation
Jump to search
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
// Add the various types of OOUI elements from the OOUI demo (https://doc.wikimedia.org/oojs-ui/master/demos) to the page.
// Requires a <div id="ooui-test"></div> on the page.
Promise.all([
// load OOUI and all necessary styles
mw.loader.using([
'oojs-ui-core',
'oojs-ui-widgets',
'oojs-ui-toolbars',
'oojs-ui-windows',
'oojs-ui.styles.icons-location',
'oojs-ui.styles.icons-movement',
'oojs-ui.styles.icons-content',
'oojs-ui.styles.icons-alerts',
'oojs-ui.styles.icons-interactions',
'oojs-ui.styles.icons-moderation',
'oojs-ui.styles.icons-editing-core',
'oojs-ui.styles.icons-editing-styling',
'oojs-ui.styles.icons-editing-list',
'oojs-ui.styles.icons-editing-advanced',
'oojs-ui.styles.icons-editing-citation',
'oojs-ui.styles.icons-media',
'oojs-ui.styles.icons-user',
'oojs-ui.styles.icons-layout',
'oojs-ui.styles.icons-accessibility',
'oojs-ui.styles.icons-wikimedia',
]),
// wait for document.ready
$(() => Promise.resolve())
]).then(() => {
// code for a container for each OOUI element
let container = '<div style="margin-bottom:1em;padding:1em;border:1px solid black">';
// empty the wrapper div and then fill it
$('#ooui-test').html('').append(
widgets().map(e => $(container).append(e.$element)),
layouts().map(e => $(container).append(e.$element)),
icons().map(e => $(container).append(e.$element)),
dialogs().map(e => $(container).append(e))
);
}).catch(error => {
console.error(error);
});
function widgets() {
const widgetsList = [];
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Normal'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Primary progressive',
flags: [
'primary',
'progressive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Primary destructive',
flags: [
'primary',
'destructive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Progressive',
flags: [
'progressive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Destructive',
flags: [
'destructive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Disabled',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Progressive',
icon: 'tag',
flags: [
'progressive'
],
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Icon',
icon: 'tag'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Icon',
icon: 'tag',
flags: [
'progressive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Indicator',
indicator: 'down'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Indicator',
indicator: 'down',
flags: [
'progressive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
label: 'Access key: G',
accessKey: 'g'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
icon: 'edit',
label: 'Edit',
invisibleLabel: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
icon: 'edit',
label: 'Edit',
invisibleLabel: true,
title: 'Icon only'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
icon: 'tag',
label: 'Labeled'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
flags: [
'progressive'
],
icon: 'check',
label: 'Progressive'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
flags: [
'destructive'
],
icon: 'trash',
label: 'Destructive'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
flags: [
'destructive'
],
label: 'Cancel'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
icon: 'tag',
label: 'Disabled',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
icon: 'tag',
indicator: 'down',
label: 'Labeled'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
indicator: 'down',
label: 'Labeled'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
icon: 'tag',
indicator: 'down',
title: 'Icon & indicator'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
flags: [
'progressive'
],
label: 'Documentation',
href: 'https://doc.wikimedia.org',
rel: [
'noreferrer',
'noopener'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ButtonWidget( {
framed: false,
flags: [
'progressive'
],
label: 'Documentation',
href: 'https://doc.wikimedia.org',
rel: ''
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonInputWidget
new OO.ui.ButtonInputWidget( {
type: 'submit',
useInputTag: true,
label: 'Submit the form',
flags: [
'primary',
'progressive'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonInputWidget
new OO.ui.ButtonInputWidget( {
label: 'Another button'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonInputWidget
new OO.ui.ButtonInputWidget( {
label: 'Access key: H',
title: 'Access key is added to the title.',
accessKey: 'h'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonInputWidget
new OO.ui.ButtonInputWidget( {
framed: false,
label: 'Another button'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonInputWidget
new OO.ui.ButtonInputWidget( {
useInputTag: true,
framed: false,
label: 'Another button'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
label: 'Toggle'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
label: 'Toggle',
value: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
icon: 'previous',
label: 'Previous',
invisibleLabel: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
icon: 'next',
label: 'Next',
invisibleLabel: true,
value: true,
title: ''
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
label: 'Toggle',
framed: false
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
label: 'Toggle',
framed: false,
value: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
icon: 'pushPin',
label: 'pin',
invisibleLabel: true,
framed: false
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleButtonWidget
new OO.ui.ToggleButtonWidget( {
icon: 'pushPin',
label: 'pin',
invisibleLabel: true,
framed: false,
value: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonGroupWidget
new OO.ui.ButtonGroupWidget( {
items: [
new OO.ui.ButtonWidget( {
icon: 'tag',
label: 'One'
} ),
new OO.ui.ButtonWidget( {
label: 'Two'
} ),
new OO.ui.ButtonWidget( {
label: 'Three'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonGroupWidget
new OO.ui.ButtonGroupWidget( {
items: [
new OO.ui.ButtonWidget( {
label: 'One',
flags: [
'destructive'
]
} ),
new OO.ui.ButtonWidget( {
label: 'Two',
flags: [
'progressive'
]
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonGroupWidget
new OO.ui.ButtonGroupWidget( {
items: [
new OO.ui.ButtonWidget( {
icon: 'tag',
label: 'Tag',
invisibleLabel: true,
flags: [
'destructive'
]
} ),
new OO.ui.ButtonWidget( {
label: 'Two',
flags: [
'progressive'
]
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonGroupWidget
new OO.ui.ButtonGroupWidget( {
items: [
new OO.ui.ToggleButtonWidget( {
icon: 'tag',
label: 'One'
} ),
new OO.ui.ToggleButtonWidget( {
label: 'Two'
} ),
new OO.ui.ToggleButtonWidget( {
label: 'Three'
} )
],
title: 'Choose wisely'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonSelectWidget
new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget( {
data: 'b',
icon: 'tag',
label: 'One'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'c',
label: 'Two'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'd',
label: 'Three'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonSelectWidget
new OO.ui.ButtonSelectWidget( {
disabled: true,
items: [
new OO.ui.ButtonOptionWidget( {
data: 'b',
icon: 'tag',
label: 'One'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'c',
label: 'Two'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'd',
label: 'Three'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonSelectWidget
new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget( {
data: 'b',
icon: 'tag',
label: 'One',
disabled: true
} ),
new OO.ui.ButtonOptionWidget( {
data: 'c',
label: 'Two'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'd',
label: 'Three'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonSelectWidget
new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget( {
data: 'a',
label: 'Access key: I',
accessKey: 'i',
title: 'Press browser accelerator key + '
} ),
new OO.ui.ButtonOptionWidget( {
data: 'b',
label: 'Access key: J',
accessKey: 'j'
} ),
new OO.ui.ButtonOptionWidget( {
data: 'c',
label: 'Access key: K',
accessKey: 'k'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Text input'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
icon: 'globe'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
required: true,
validate: 'non-empty'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
validate: function ( value ) {
return value.length % 2 === 0;
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
placeholder: 'Placeholder'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Title attribute',
title: 'Title attribute with more information about me.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Readonly',
readOnly: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Disabled',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MultilineTextInputWidget
new OO.ui.MultilineTextInputWidget( {
value: 'Multiline\nMultiline'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MultilineTextInputWidget
new OO.ui.MultilineTextInputWidget( {
rows: 15,
value: 'Multiline\nMultiline'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MultilineTextInputWidget
new OO.ui.MultilineTextInputWidget( {
autosize: true,
value: 'Autosize\nAutosize\nAutosize\nAutosize'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MultilineTextInputWidget
new OO.ui.MultilineTextInputWidget( {
rows: 10,
autosize: true,
value: 'Autosize\nAutosize\nAutosize\nAutosize'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MultilineTextInputWidget
new OO.ui.MultilineTextInputWidget( {
autosize: true,
icon: 'tag',
indicator: 'required',
label: 'Inline label',
value: 'Autosize\nAutosize\nAutosize\nAutosize'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Text input with label',
label: 'Inline label'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
labelPosition: 'before',
value: 'Text input with label',
label: 'Inline label'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
icon: 'tag',
indicator: 'required',
value: 'Text input with label',
label: 'Inline label'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
labelPosition: 'before',
icon: 'tag',
indicator: 'required',
value: 'Text input with label',
label: 'Inline label'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Disabled',
icon: 'tag',
indicator: 'required',
label: 'Inline label',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Access key: S',
accessKey: 's'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SearchInputWidget
new OO.ui.SearchInputWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SearchInputWidget
new OO.ui.SearchInputWidget( {
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SearchInputWidget
new OO.ui.SearchInputWidget( {
disabled: true,
value: 'Tìm kiếm bị vô hiệu hóa'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.NumberInputWidget
new OO.ui.NumberInputWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.NumberInputWidget
new OO.ui.NumberInputWidget( {
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.NumberInputWidget
new OO.ui.NumberInputWidget( {
min: 1,
max: 5,
step: 1
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.NumberInputWidget
new OO.ui.NumberInputWidget( {
min: -1,
max: 1,
step: 0.1,
pageStep: 0.5
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.NumberInputWidget
new OO.ui.NumberInputWidget( {
showButtons: false
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
selected: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
selected: true,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
selected: true,
required: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
selected: true,
accessKey: 't'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
indeterminate: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.CheckboxInputWidget( {
indeterminate: true,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioInputWidget
new OO.ui.RadioInputWidget( {
name: 'oojs-ui-radio-demo'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioInputWidget
new OO.ui.RadioInputWidget( {
name: 'oojs-ui-radio-demo',
selected: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioInputWidget
new OO.ui.RadioInputWidget( {
selected: true,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioInputWidget
new OO.ui.RadioInputWidget( {
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioInputWidget
new OO.ui.RadioInputWidget( {
selected: false,
required: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectWidget
new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'cat',
label: 'Cat'
} ),
new OO.ui.RadioOptionWidget( {
data: 'dog',
label: 'Dog'
} ),
new OO.ui.RadioOptionWidget( {
data: 'goldfish',
label: 'Goldfish. By the way, this is a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
disabled: true
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectInputWidget
new OO.ui.RadioSelectInputWidget( {
value: 'dog',
options: [
{
data: 'cat',
label: 'Cat'
},
{
data: 'dog',
label: 'Dog'
},
{
data: 'goldfish',
label: 'Goldfish'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxMultiselectInputWidget
new OO.ui.CheckboxMultiselectInputWidget( {
value: [
'dog',
'cat'
],
options: [
{
data: 'cat',
label: 'Cat'
},
{
data: 'dog',
label: 'Dog (disabled)',
disabled: true
},
{
data: 'goldfish',
label: 'Goldfish'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectWidget
new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'a',
label: 'Access key: M',
accessKey: 'm'
} ),
new OO.ui.RadioOptionWidget( {
data: 'b',
label: 'Access key: N',
accessKey: 'n'
} ),
new OO.ui.RadioOptionWidget( {
data: 'c',
label: 'Access key: O',
accessKey: 'o'
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleSwitchWidget
new OO.ui.ToggleSwitchWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleSwitchWidget
new OO.ui.ToggleSwitchWidget( {
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToggleSwitchWidget
new OO.ui.ToggleSwitchWidget( {
disabled: true,
value: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectWidget
new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'a',
label: $( undefined )
} ),
new OO.ui.RadioOptionWidget( {
data: 'b',
label: $( undefined )
} ),
new OO.ui.RadioOptionWidget( {
data: 'c',
label: $( undefined )
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectWidget
new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'foo',
label: 'Foo'
} ),
new OO.ui.RadioOptionWidget( {
data: 'bar',
label: 'Bar'
} ),
new OO.ui.RadioOptionWidget( {
data: '',
label: $( undefined )
} )
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second',
indicator: 'required'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'The fourth option has an overly long label'
} ),
new OO.ui.MenuOptionWidget( {
icon: 'feedback',
data: 'd',
label: 'The fifth option has an icon'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
icon: 'tag',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Disabled second option',
indicator: 'required',
disabled: true
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'd',
label: 'Disabled fourth option with an overly long label',
disabled: true
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
items: [
new OO.ui.MenuSectionOptionWidget( {
label: 'Dogs'
} ),
new OO.ui.MenuOptionWidget( {
data: 'corgi',
label: 'Welsh Corgi',
indicator: 'required'
} ),
new OO.ui.MenuOptionWidget( {
data: 'poodle',
label: 'Standard Poodle',
icon: 'star'
} ),
new OO.ui.MenuSectionOptionWidget( {
label: 'Cats'
} ),
new OO.ui.MenuOptionWidget( {
data: 'lion',
label: 'Lion'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
disabled: true,
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'd',
label: 'Fourth'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
$overlay: true,
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'd',
label: 'Fourth'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
$overlay: $( '#demo-overlay' ),
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'd',
label: 'Fourth'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'd',
label: 'Fourth'
} )
],
hideOnChoose: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'Access key: P',
accessKey: 'p'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Access key: Q',
accessKey: 'q'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Access key: R',
accessKey: 'r'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
options: [
{
data: 'a',
label: 'First'
},
{
data: 'b',
label: 'Second'
},
{
data: 'c',
label: 'Third'
}
],
value: 'b'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
disabled: true,
title: 'DropdownInputWidget (disabled)'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
required: true,
options: [
{
data: 'a',
label: 'First'
},
{
data: 'b',
label: 'Second'
},
{
data: 'c',
label: 'Third'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
options: [
{
optgroup: 'Vowels'
},
{
data: 'a',
label: 'A'
},
{
optgroup: 'Consonants'
},
{
data: 'b',
label: 'B'
},
{
data: 'c',
label: 'C'
}
],
value: 'b'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
options: [
{
data: 'top',
label: 'Top-level option'
},
{
optgroup: 'Whole optgroup disabled',
disabled: true
},
{
data: 'a',
label: 'A'
},
{
optgroup: 'Optgroup with one disabled option'
},
{
data: 'b',
label: 'B'
},
{
data: 'c',
label: 'C',
disabled: true
},
{
data: 'd',
label: 'D'
}
],
value: 'b'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
new OO.ui.DropdownInputWidget( {
options: [
{
data: 'sq',
label: 'Albanian'
},
{
data: 'frp',
label: 'Arpitan'
},
{
data: 'ba',
label: 'Bashkir'
},
{
data: 'pt-br',
label: 'Brazilian Portuguese'
},
{
data: 'tzm',
label: 'Central Atlas Tamazight'
},
{
data: 'zh',
label: 'Chinese'
},
{
data: 'co',
label: 'Corsican'
},
{
data: 'del',
label: 'Delaware'
},
{
data: 'eml',
label: 'Emiliano-Romagnolo'
},
{
data: 'en',
label: 'English'
},
{
data: 'fi',
label: 'Finnish'
},
{
data: 'aln',
label: 'Gheg Albanian'
},
{
data: 'he',
label: 'Hebrew'
},
{
data: 'ilo',
label: 'Iloko'
},
{
data: 'kbd',
label: 'Kabardian'
},
{
data: 'csb',
label: 'Kashubian'
},
{
data: 'avk',
label: 'Kotava'
},
{
data: 'lez',
label: 'Lezghian'
},
{
data: 'nds-nl',
label: 'Low Saxon'
},
{
data: 'ml',
label: 'Malayalam'
},
{
data: 'dum',
label: 'Middle Dutch'
},
{
data: 'ary',
label: 'Moroccan Arabic'
},
{
data: 'pih',
label: 'Norfuk / Pitkern'
},
{
data: 'ny',
label: 'Nyanja'
},
{
data: 'ang',
label: 'Old English'
},
{
data: 'non',
label: 'Old Norse'
},
{
data: 'pau',
label: 'Palauan'
},
{
data: 'pdt',
label: 'Plautdietsch'
},
{
data: 'ru',
label: 'Russian'
},
{
data: 'stq',
label: 'Saterland Frisian'
},
{
data: 'ii',
label: 'Sichuan Yi'
},
{
data: 'bcc',
label: 'Southern Balochi'
},
{
data: 'shi',
label: 'Tachelhit'
},
{
data: 'vi',
label: 'Tiếng Việt'
},
{
data: 'th',
label: 'Thai'
},
{
data: 'tr',
label: 'Turkish'
},
{
data: 'fiu-vro',
label: 'Võro'
},
{
data: 'vls',
label: 'West Flemish'
},
{
data: 'zea',
label: 'Zeelandic'
}
],
value: 'vi'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget
new OO.ui.ComboBoxInputWidget( {
options: [
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'fgh',
label: 'Label for fgh'
},
{
data: 'jkl',
label: 'Label for jkl'
},
{
data: 'zxc',
label: 'Label for zxc'
},
{
data: 'vbn',
label: 'Label for vbn'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget
new OO.ui.ComboBoxInputWidget( {
options: [
{
data: 'asd',
label: 'asd'
},
{
data: 'fgh',
label: 'fgh'
},
{
data: 'jkl',
label: 'jkl'
},
{
data: 'zxc',
label: 'zxc'
},
{
data: 'vbn',
label: 'vbn'
}
],
menu: {
filterFromInput: true
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget
new OO.ui.ComboBoxInputWidget( {
options: [
{
data: 'Option 1'
},
{
data: 'Option 2'
},
{
data: 'Option 3'
},
{
data: 'Option 4'
},
{
data: 'Option 5'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget
new OO.ui.ComboBoxInputWidget( {
disabled: true,
options: [
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'fgh',
label: 'Label for fgh'
},
{
data: 'jkl',
label: 'Label for jkl'
},
{
data: 'zxc',
label: 'Label for zxc'
},
{
data: 'vbn',
label: 'Label for vbn'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget
new OO.ui.ComboBoxInputWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Select files</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="" class="oo-ui-inputWidget-input" type="file" tabindex="-1" multiple="multiple"></a>' ),
multiple: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-upload oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Custom button</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span><input title="" class="oo-ui-inputWidget-input" type="file" tabindex="-1"></a>' ),
button: {
flags: [
'primary',
'progressive'
],
icon: 'upload',
label: 'Custom button'
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
accept: [
'image/png',
'image/jpeg'
],
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="This SelectFileInputWidget accepts only PNG `image/png` and JPEG `image/jpeg` files and has `title` configured" class="oo-ui-inputWidget-input" type="file" tabindex="-1" accept="image/png, image/jpeg"></a>' ),
title: 'This SelectFileInputWidget accepts only PNG `image/png` and JPEG `image/jpeg` files and has `title` configured'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
icon: 'tag'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="-1" rel="nofollow" aria-disabled="true"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span><input title="" class="oo-ui-inputWidget-input" disabled="" type="file" tabindex="-1"></a>' ),
icon: 'tag',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileInputWidget
new OO.ui.SelectFileInputWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="" class="oo-ui-inputWidget-input" required="" type="file" tabindex="-1"></a>' ),
icon: 'tag',
required: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget());
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
buttonOnly: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Select files</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="" class="oo-ui-inputWidget-input" type="file" tabindex="-1" multiple="multiple"></a>' ),
multiple: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
accept: [
'image/png',
'image/jpeg'
],
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="This SelectFileWidget accepts only PNG `image/png` and JPEG `image/jpeg` files and has `title` configured" class="oo-ui-inputWidget-input" type="file" tabindex="-1" accept="image/png, image/jpeg"></a>' ),
title: 'This SelectFileWidget accepts only PNG `image/png` and JPEG `image/jpeg` files and has `title` configured'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
icon: 'tag'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="-1" rel="nofollow" aria-disabled="true"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span><input title="" class="oo-ui-inputWidget-input" disabled="" type="file" tabindex="-1"></a>' ),
icon: 'tag',
indicator: 'required',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
accept: [
'image/png',
'image/jpeg'
],
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-upload"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="" class="oo-ui-inputWidget-input" type="file" tabindex="-1" accept="image/png, image/jpeg"></a>' ),
showDropTarget: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
accept: [
'image/png',
'image/jpeg'
],
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-upload"></span><span class="oo-ui-labelElement-label">Select files</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span><input title="" class="oo-ui-inputWidget-input" type="file" tabindex="-1" accept="image/png, image/jpeg" multiple="multiple"></a>' ),
showDropTarget: true,
multiple: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.SelectFileWidget
new OO.ui.SelectFileWidget( {
$tabIndexed: $( '<a class="oo-ui-buttonElement-button" role="button" tabindex="-1" rel="nofollow" aria-disabled="true"><span class="oo-ui-iconElement-icon oo-ui-icon-upload oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Select a file</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span><input title="" class="oo-ui-inputWidget-input" disabled="" type="file" tabindex="-1"></a>' ),
showDropTarget: true,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
placeholder: 'Add tags',
allowArbitrary: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
selected: [
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
],
allowArbitrary: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
placeholder: 'Add tags',
allowArbitrary: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
placeholder: 'Add tags',
allowArbitrary: true,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
allowArbitrary: false,
allowDisplayInvalidTags: true,
allowedValues: [
'foo',
'bar',
'baz'
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
placeholder: 'Add up to 5 tags',
allowArbitrary: true,
tagLimit: 5,
title: 'Add up to 5 tags'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
placeholder: 'Add tags',
allowArbitrary: true,
inputPosition: 'outline'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
disabled: true,
placeholder: 'Add tags',
allowArbitrary: true,
inputPosition: 'outline'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
allowArbitrary: true,
inputPosition: 'outline',
inputWidget: new OO.ui.NumberInputWidget()
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TagMultiselectWidget
new OO.ui.TagMultiselectWidget( {
allowArbitrary: true,
inputPosition: 'outline',
tagLimit: 5
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
selected: [
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
],
options: [
{
data: 'foo',
label: 'Label for foo',
icon: 'tag'
},
{
data: 'bar',
label: 'Label for bar'
},
{
data: 'baz',
label: 'Label for baz'
},
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
selected: [
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
],
options: [
{
data: 'foo',
label: 'Label for foo',
icon: 'tag'
},
{
data: 'bar',
label: 'Label for bar'
},
{
data: 'baz',
label: 'Label for baz'
},
{
data: 'quuz',
label: 'Label for quuz'
},
{
data: 'red',
label: 'Label for red'
},
{
data: 'green',
label: 'Label for green'
},
{
data: 'blue',
label: 'Label for blue'
},
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
],
tagLimit: 5
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
selected: [
'foo',
'bar',
'Not in menu'
],
allowArbitrary: true,
options: [
{
data: 'foo',
label: 'Label for foo',
icon: 'tag'
},
{
data: 'bar',
label: 'Label for bar'
},
{
data: 'baz',
label: 'Label for baz'
},
{
data: 'quz',
label: 'Label for quz'
},
{
data: 'red',
label: 'Label for red'
},
{
data: 'green',
label: 'Label for green'
},
{
data: 'blue',
label: 'Label for blue'
},
{
data: 'foo',
label: 'foo'
},
{
data: 'bar',
label: 'bar'
},
{
data: 'Not in menu',
label: 'Not in menu'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
allowArbitrary: false,
options: [
{
data: 'abc',
label: 'Label for abc'
},
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'jkl',
label: 'Label for jkl'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
allowArbitrary: false,
menu: {
highlightOnFilter: true
},
options: [
{
data: 'abc',
label: 'abc item'
},
{
data: 'asd',
label: 'asd item'
},
{
data: 'jkl',
label: 'jkl item'
},
{
data: 'jkl2',
label: 'jkl second item'
},
{
data: 'jkl3',
label: 'jkl third item'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
inputPosition: 'outline',
allowArbitrary: false,
options: [
{
data: 'abc',
label: 'Label for abc'
},
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'jkl',
label: 'Label for jkl'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
inputPosition: 'outline',
selected: [
'abc',
'asd'
],
disabled: true,
allowArbitrary: true,
options: [
{
data: 'abc',
label: 'Label for abc'
},
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'jkl',
label: 'Label for jkl'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
inputPosition: 'outline',
allowArbitrary: false,
verticalPosition: 'below',
options: [
{
data: 1,
label: 'Label for 1'
},
{
data: 2,
label: 'Label for 2'
},
{
data: 3,
label: 'Label for 3'
},
{
data: 4,
label: 'Label for 4'
},
{
data: 5,
label: 'Label for 5'
},
{
data: 6,
label: 'Label for 6'
},
{
data: 7,
label: 'Label for 7'
},
{
data: 8,
label: 'Label for 8'
},
{
data: 9,
label: 'Label for 9'
},
{
data: 10,
label: 'Label for 10'
},
{
data: 11,
label: 'Label for 11'
},
{
data: 12,
label: 'Label for 12'
},
{
data: 13,
label: 'Label for 13'
},
{
data: 14,
label: 'Label for 14'
},
{
data: 15,
label: 'Label for 15'
},
{
data: 16,
label: 'Label for 16'
},
{
data: 17,
label: 'Label for 17'
},
{
data: 18,
label: 'Label for 18'
},
{
data: 19,
label: 'Label for 19'
},
{
data: 20,
label: 'Label for 20'
},
{
data: 21,
label: 'Label for 21'
},
{
data: 22,
label: 'Label for 22'
},
{
data: 23,
label: 'Label for 23'
},
{
data: 24,
label: 'Label for 24'
},
{
data: 25,
label: 'Label for 25'
},
{
data: 26,
label: 'Label for 26'
},
{
data: 27,
label: 'Label for 27'
},
{
data: 28,
label: 'Label for 28'
},
{
data: 29,
label: 'Label for 29'
},
{
data: 30,
label: 'Label for 30'
},
{
data: 31,
label: 'Label for 31'
},
{
data: 32,
label: 'Label for 32'
},
{
data: 33,
label: 'Label for 33'
},
{
data: 34,
label: 'Label for 34'
},
{
data: 35,
label: 'Label for 35'
},
{
data: 36,
label: 'Label for 36'
},
{
data: 37,
label: 'Label for 37'
},
{
data: 38,
label: 'Label for 38'
},
{
data: 39,
label: 'Label for 39'
},
{
data: 40,
label: 'Label for 40'
},
{
data: 41,
label: 'Label for 41'
},
{
data: 42,
label: 'Label for 42'
},
{
data: 43,
label: 'Label for 43'
},
{
data: 44,
label: 'Label for 44'
},
{
data: 45,
label: 'Label for 45'
},
{
data: 46,
label: 'Label for 46'
},
{
data: 47,
label: 'Label for 47'
},
{
data: 48,
label: 'Label for 48'
},
{
data: 49,
label: 'Label for 49'
},
{
data: 50,
label: 'Label for 50'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
inputPosition: 'inline',
disabled: true,
options: [
{
data: 'abc',
label: 'Label for abc'
},
{
data: 'asd',
label: 'Label for asd'
},
{
data: 'jkl',
label: 'Label for jkl'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonMenuSelectWidget
new OO.ui.ButtonMenuSelectWidget( {
icon: 'menu',
label: 'Options',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second',
indicator: 'required'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'The fourth option has an overly long label'
} ),
new OO.ui.MenuOptionWidget( {
icon: 'feedback',
data: 'd',
label: 'The fifth option has an icon'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonMenuSelectWidget
new OO.ui.ButtonMenuSelectWidget( {
icon: 'menu',
label: 'Options',
clearOnSelect: false,
menu: {
horizontalPosition: 'end',
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second',
indicator: 'required'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'The fourth option has an overly long label'
} ),
new OO.ui.MenuOptionWidget( {
icon: 'feedback',
data: 'd',
label: 'The fifth option has an icon'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonMenuSelectWidget
new OO.ui.ButtonMenuSelectWidget( {
icon: 'ellipsis',
label: 'More options',
invisibleLabel: true,
framed: false,
title: 'More options',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second',
indicator: 'required'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'The fourth option has an overly long label'
} ),
new OO.ui.MenuOptionWidget( {
icon: 'feedback',
data: 'd',
label: 'The fifth option has an icon'
} )
]
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
icon: 'infoFilled',
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'force-left',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'force-right',
hideCloseButton: true,
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'backwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'forwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'center',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
label: 'More information',
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
$footer: $( '<p>And maybe a footer whilst we\'re at it?</p>' ),
padded: true,
align: 'forwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'forwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'backwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'center',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'center',
position: 'above',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'center',
position: 'before',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
align: 'center',
position: 'after',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
anchor: false,
align: 'center',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
anchor: false,
align: 'forwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupButtonWidget
new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
$content: $( '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e</p>' ),
padded: true,
anchor: false,
align: 'backwards',
autoFlip: false
}
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ProgressBarWidget
new OO.ui.ProgressBarWidget( {
progress: 33
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ProgressBarWidget
new OO.ui.ProgressBarWidget( {
progress: 50,
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ProgressBarWidget
new OO.ui.ProgressBarWidget( {
progress: false
} ));
// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ProgressBarWidget
let widget=new OO.ui.ProgressBarWidget( {
progress: 75
} );widget.pushPending();widgetsList.push(widget);
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.IconWidget
new OO.ui.IconWidget( {
icon: 'search',
label: 'Search',
title: 'Search icon'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.IconWidget
new OO.ui.IconWidget( {
icon: 'trash',
label: 'Trash',
title: 'Trash icon',
flags: 'destructive'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.IconWidget
new OO.ui.IconWidget( {
icon: 'search',
label: 'Search',
title: 'Search icon',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.IndicatorWidget
new OO.ui.IndicatorWidget( {
indicator: 'required',
label: 'Required',
title: 'Required indicator'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.IndicatorWidget
new OO.ui.IndicatorWidget( {
indicator: 'required',
label: 'Required',
title: 'Required indicator',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.LabelWidget
new OO.ui.LabelWidget( {
label: 'Label'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.LabelWidget
new OO.ui.LabelWidget( {
label: 'Label',
disabled: true
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.LabelWidget
new OO.ui.LabelWidget( {
label: new OO.ui.HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' )
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.LabelWidget
new OO.ui.LabelWidget( {
label: 'Label for TextInputWidget below',
input: new OO.ui.TextInputWidget( {
value: 'Input for label above'
} )
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.TextInputWidget( {
value: 'Input for label above'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.LabelWidget
new OO.ui.LabelWidget( {
label: 'Label for RadioSelectInputWidget below',
input: new OO.ui.RadioSelectInputWidget( {
options: [
{
data: 'a',
label: 'Input for label above'
},
{
data: 'b',
label: 'Input for label above'
}
]
} )
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.RadioSelectInputWidget
new OO.ui.RadioSelectInputWidget( {
options: [
{
data: 'a',
label: 'Input for label above'
},
{
data: 'b',
label: 'Input for label above'
}
]
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'notice',
label: new OO.ui.HtmlSnippet( '<strong>MessageWidget with notice for the user.</strong><br>Featuring multiple lines of notice.' )
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'notice',
inline: true,
label: new OO.ui.HtmlSnippet( 'Inlined MessageWidget with notice for the user.<br>Featuring multiple lines of notice.' )
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'error',
label: 'MessageWidget with comprehensive error message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'error',
inline: true,
label: 'Inline MessageWidget with error message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'warning',
label: 'MessageWidget with warning message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'warning',
inline: true,
label: 'Inline MessageWidget with warning message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'success',
label: 'MessageWidget with engaging success message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'success',
inline: true,
label: 'Inline MessageWidget with engaging success message for the user.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'notice',
icon: 'article',
label: 'MessageWidget (info) with custom icon.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'success',
icon: 'article',
label: 'MessageWidget (success) with custom icon.'
} ));
widgetsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MessageWidget
new OO.ui.MessageWidget( {
type: 'notice',
label: 'MessageWidget with close button.',
showClose: true
} ));
return widgetsList;
}
function layouts() {
const layoutsList = [];
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: 'FieldLayout with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
helpInline: true,
label: 'FieldLayout with inlined help',
help: 'This is some inlined help. Assistive (optional) text, that isn\'t needed to understand the widget\'s purpose.'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: 'FieldLayout with rich text help',
help: new OO.ui.HtmlSnippet( '<b>Bold text</b> is helpful!' )
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
helpInline: true,
label: 'FieldLayout with inlined rich text help',
help: new OO.ui.HtmlSnippet( '<b>Strong text</b> is helpful! It should only contain assistive (optional) text.' )
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: 'FieldLayout with title',
title: 'Field title text'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: $( '<i>FieldLayout with rich text label</i>' )
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: 'ActionFieldLayout aligned top'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'top',
label: 'FieldLayout aligned top with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'top',
helpInline: true,
label: 'FieldLayout aligned top with inlined help',
help: 'This is some inlined help. Assistive (optional) text, that isn\'t needed to understand the widget\'s purpose.'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'top',
label: 'ActionFieldLayout aligned top with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.CheckboxInputWidget( {
selected: true
} ), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'inline',
label: 'ActionFieldLayout aligned inline'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.FieldLayout( new OO.ui.CheckboxInputWidget( {
selected: true
} ), {
align: 'inline',
label: 'FieldLayout aligned inline with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.FieldLayout( new OO.ui.CheckboxInputWidget( {
selected: true
} ), {
align: 'inline',
label: 'FieldLayout aligned inline with ExtraLongLabelSimilarToAnOverlongTitleInMediaWikiToTestOverflowBehavior',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.CheckboxInputWidget( {
selected: true
} ), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'inline',
label: 'ActionFieldLayout aligned inline with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
label: 'ActionFieldLayout aligned left'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
label: 'FieldLayout aligned left with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
helpInline: true,
label: 'FieldLayout aligned left, inlined help',
help: 'This is some inlined help'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
label: 'ActionFieldLayout aligned left with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.DropdownInputWidget( {
label: 'Select one',
options: [
{
data: 'a',
label: 'First'
},
{
data: 'b',
label: 'Second'
},
{
data: 'c',
label: 'Third'
}
],
value: 'b'
} ), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
helpInline: true,
label: 'ActionFieldLayout aligned left, DropdownInputWidget',
help: 'This is some inlined help'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.DropdownWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} )
]
},
value: 'b'
} ), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
helpInline: true,
label: 'ActionFieldLayout aligned left, DropdownWidget',
help: 'This is some inlined help'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.MenuTagMultiselectWidget( {
selected: [
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
],
options: [
{
data: 'foo',
label: 'Label for foo',
icon: 'tag'
},
{
data: 'bar',
label: 'Label for bar'
},
{
data: 'baz',
label: 'Label for baz'
},
{
data: 'foo',
label: 'Label for foo'
},
{
data: 'bar',
label: 'Label for bar'
}
]
} ), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
label: 'ActionFieldLayout aligned left, MenuTagMultiselectWidget'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'right',
label: 'ActionFieldLayout aligned right'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'right',
label: 'FieldLayout aligned right with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'right',
helpInline: true,
label: 'FieldLayout aligned right, inlined help',
help: 'This is some inlined help'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ActionFieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
new OO.ui.ActionFieldLayout( new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( {
label: 'Button'
} ), {
align: 'right',
label: 'ActionFieldLayout aligned right with help',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'top',
label: 'FieldLayout aligned top with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.CheckboxInputWidget
new OO.ui.FieldLayout( new OO.ui.CheckboxInputWidget( {
selected: true
} ), {
align: 'inline',
label: 'FieldLayout aligned inline with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
label: 'FieldLayout aligned left with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'right',
label: 'FieldLayout aligned right with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget(), {
align: 'right',
helpInline: true,
label: 'FieldLayout aligned right with a very long label and inline help. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e',
help: 'This is some inlined help'
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget( {
value: ''
} ), {
align: 'top',
label: 'FieldLayout with notice',
notices: [
'Please input a number.'
]
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget( {
value: 'Foo'
} ), {
align: 'top',
label: 'FieldLayout with error message',
errors: [
'The value must be a number. It is more than necessary. You can\'t go on without putting a number into this input field.'
]
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget( {
value: 'Foo'
} ), {
align: 'top',
label: 'FieldLayout with error, warning, success and notice message',
errors: [
'The value must be a number.'
],
warnings: [
'The value should be a number.'
],
successMessages: [
'The value is a number. Congratulations!'
],
notices: [
'Please input a number.'
]
} ));
layoutsList.push(// See documentation at:
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.FieldLayout
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget
new OO.ui.FieldLayout( new OO.ui.TextInputWidget( {
validate: function ( value ) {
return value.length % 2 === 0;
}
} ), {
align: 'top',
label: 'FieldLayout aligned top with validation errors',
help: 'Enter only even number of characters'
} ));
// https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/master/demos/pages/layouts.js
var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
function DemoPageLayout( name, config ) {
DemoPageLayout.super.call( this, name, config );
}
OO.inheritClass( DemoPageLayout, OO.ui.PageLayout );
DemoPageLayout.prototype.setupOutlineItem = function () {
this.outlineItem.setLabel( this.getName() );
};
var pages = [
new DemoPageLayout( 'first', {
expanded: false,
label: 'One',
content: [
$( '<p>' ).text( 'One' )
]
} ),
new DemoPageLayout( 'second', {
expanded: false,
label: 'Two',
content: [
$( '<p>' ).text( 'Two' )
]
} ),
new DemoPageLayout( 'third', {
expanded: false,
label: 'Three',
content: [
$( '<p>' ).text( 'Three' )
]
} ),
new DemoPageLayout( 'fourth', {
expanded: false,
label: 'Four',
content: [
$( '<p>' ).text( 'Four' )
]
} ),
new DemoPageLayout( 'long', {
expanded: false,
label: 'Long',
content: [
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum )
]
} )
];
layoutsList.push(
new OO.ui.FieldLayout(
new OO.ui.Widget( {
content: [
new OO.ui.PanelLayout( {
expanded: false,
framed: true,
content: [
new OO.ui.BookletLayout( {
expanded: false,
outlined: true
} ).addPages( pages )
]
} )
]
} ),
{
label: 'Outlined BookletLayout',
align: 'top'
}
)
);
// https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/master/demos/pages/layouts.js
var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
layoutsList.push(
new OO.ui.FieldLayout(
new OO.ui.Widget( {
content: [
new OO.ui.PanelLayout( {
expanded: false,
framed: true,
content: [
new OO.ui.IndexLayout( {
expanded: false
} ).addTabPanels( [
new OO.ui.TabPanelLayout( 'first', {
expanded: false,
label: 'One tab',
content: [
$( '<p>' ).text( 'One tab' )
]
} ),
new OO.ui.TabPanelLayout( 'second', {
expanded: false,
label: 'Two tab',
content: [
$( '<p>' ).text( 'Two tab' )
]
} ),
new OO.ui.TabPanelLayout( 'third', {
expanded: false,
label: 'Three tab',
content: [
$( '<p>' ).text( 'Three tab' )
]
} ),
new OO.ui.TabPanelLayout( 'fourth', {
expanded: false,
label: 'Four tab',
content: [
$( '<p>' ).text( 'Four tab' )
]
} ),
new OO.ui.TabPanelLayout( 'long', {
expanded: false,
label: 'Long tab',
content: [
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum )
]
} )
] )
]
} )
]
} ),
{
label: 'IndexLayout (framed)',
align: 'top'
}
)
);
// https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/master/demos/pages/layouts.js
var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
layoutsList.push(
new OO.ui.FieldLayout(
new OO.ui.Widget( {
content: [
new OO.ui.PanelLayout( {
expanded: false,
framed: false,
content: [
new OO.ui.IndexLayout( {
expanded: false,
framed: false
} ).addTabPanels( [
new OO.ui.TabPanelLayout( 'first', {
expanded: false,
label: 'One tab'
} ),
new OO.ui.TabPanelLayout( 'second', {
expanded: false,
label: 'Two tab'
} ),
new OO.ui.TabPanelLayout( 'third', {
expanded: false,
label: 'Three tab'
} ),
new OO.ui.TabPanelLayout( 'fourth', {
expanded: false,
label: 'Four tab'
} ),
new OO.ui.TabPanelLayout( 'long', {
expanded: false,
label: 'Long tab (href)',
content: [
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum ),
$( '<p>' ).text( loremIpsum )
],
tabItemConfig: {
href: '#exampleHref'
}
} )
] )
]
} )
]
} ),
{
label: 'IndexLayout (frameless)',
align: 'top'
}
)
);
return layoutsList;
}
function icons() {
const iconsList = [];
let icons = [
"arrowNext",
"arrowPrevious",
"collapse",
"downTriangle",
"draggable",
"doubleChevronEnd",
"doubleChevronStart",
"expand",
"move",
"next",
"previous",
"last",
"first",
"upTriangle",
"article",
"articles",
"articleAdd",
"articleCheck",
"articleDisambiguation",
"articleNotFound",
"articleSearch",
"articlesSearch",
"articleRedirect",
"database",
"die",
"download",
"folderPlaceholder",
"history",
"info",
"infoFilled",
"robot",
"share",
"specialPages",
"tag",
"upload",
"window",
"alert",
"bell",
"bellOutline",
"error",
"message",
"notice",
"speechBubble",
"speechBubbleAdd",
"speechBubbles",
"tray",
"add",
"browser",
"cancel",
"check",
"checkAll",
"clear",
"clock",
"close",
"ellipsis",
"feedback",
"funnel",
"hand",
"heart",
"help",
"helpNotice",
"home",
"key",
"keyboard",
"lightbulb",
"logIn",
"logOut",
"network",
"networkOff",
"newWindow",
"pageSettings",
"printer",
"reload",
"search",
"settings",
"stopHand",
"subtract",
"bookmarkOutline",
"bookmark",
"block",
"unBlock",
"flag",
"unFlag",
"lock",
"unLock",
"restore",
"star",
"halfStar",
"unStar",
"trash",
"pushPin",
"ongoingConversation",
"edit",
"editLock",
"editUndo",
"link",
"unLink",
"linkExternal",
"linkSecure",
"redo",
"undo",
"bigger",
"smaller",
"subscript",
"superscript",
"bold",
"highlight",
"italic",
"strikethrough",
"underline",
"textLanguage",
"textDirLTR",
"textDirRTL",
"textStyle",
"indent",
"listBullet",
"listNumbered",
"outdent",
"alignCenter",
"alignLeft",
"alignRight",
"attachment",
"calendar",
"code",
"hieroglyph",
"imageLayoutBasic",
"imageLayoutFrame",
"imageLayoutFrameless",
"imageLayoutThumbnail",
"labFlask",
"language",
"layout",
"markup",
"mathematics",
"mathematicsDisplayBlock",
"mathematicsDisplayDefault",
"mathematicsDisplayInline",
"newline",
"noWikiText",
"ocr",
"outline",
"puzzle",
"quotes",
"sandbox",
"searchCaseSensitive",
"searchDiacritics",
"searchRegularExpression",
"signature",
"specialCharacter",
"table",
"tableAddColumnAfter",
"tableAddColumnBefore",
"tableAddRowAfter",
"tableAddRowBefore",
"tableCaption",
"tableMergeCells",
"tableMoveColumnAfter",
"tableMoveColumnBefore",
"tableMoveRowAfter",
"tableMoveRowBefore",
"templateAdd",
"translation",
"wikiText",
"book",
"journal",
"newspaper",
"reference",
"referenceExisting",
"references",
"camera",
"chart",
"exitFullscreen",
"fullScreen",
"image",
"imageAdd",
"imageBroken",
"imageLock",
"imageGallery",
"musicalScore",
"pause",
"play",
"stop",
"volumeDown",
"volumeOff",
"volumeUp",
"zoomIn",
"zoomOut",
"globe",
"map",
"mapPin",
"mapPinAdd",
"mapTrail",
"userAdd",
"userAnonymous",
"userAvatar",
"userAvatarOutline",
"userContributions",
"userGroup",
"userTalk",
"watchlist",
"menu",
"recentChanges",
"textFlow",
"textSummary",
"viewCompact",
"viewDetails",
"bright",
"halfBright",
"notBright",
"eye",
"eyeClosed",
"moon",
"largerText",
"smallerText",
"visionSimulator",
"logoCC",
"logoWikidata",
"logoWikimedia",
"logoWikimediaCommons",
"logoWikimediaDiscovery",
"logoWikipedia"
];
for (iconName of icons) {
iconsList.push(
new OO.ui.FieldLayout(
new OO.ui.IconWidget({ icon: iconName }),
{ label: iconName }
)
);
}
return iconsList;
}
function dialogs() {
var $fieldsets = $( [] ),
windowManager = new OO.ui.WindowManager();
var configs = [
{
name: 'Convenience functions',
id: 'demo-section-functions',
examples: [
{
name: 'Quick alert',
method: 'alert',
param: 'Alert message.'
},
{
name: 'Larger alert',
method: 'alert',
param: 'Alert message.',
data: { size: 'larger' }
},
{
name: 'Quick confirm',
method: 'confirm',
param: 'Confirmation message?'
},
{
name: 'Quick prompt',
method: 'prompt',
param: 'Text prompt:'
}
]
},
{
name: 'Dialog interface',
id: 'demo-section-dialog',
examples: [
{
name: 'Simple dialog (small)',
config: {
size: 'small'
}
},
{
name: 'Simple dialog (medium)',
config: {
size: 'medium'
}
},
{
name: 'Simple dialog (large)',
config: {
size: 'large'
}
},
{
name: 'Simple dialog (larger)',
config: {
size: 'larger'
}
},
{
name: 'Simple dialog (full)',
config: {
size: 'full'
}
},
{
name: 'Message dialog (generic)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Continue?',
message: 'It may be risky'
}
},
{
name: 'Message dialog (lengthy)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Continue?',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.'
}
},
{
name: 'Message dialog (1 action)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Storage limit reached',
message: 'You are out of disk space',
actions: [
{
action: 'accept',
label: 'Dismiss',
flags: 'primary'
}
]
}
},
{
name: 'Message dialog (2 actions)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Cannot save data',
message: 'The server is not responding',
actions: [
{
action: 'reject',
label: 'Cancel',
flags: [ 'safe', 'close' ]
},
{
action: 'repeat',
label: 'Try again',
flags: [ 'primary', 'progressive' ]
}
]
}
},
{
name: 'Message dialog (2 actions, long)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Cannot save data',
message: 'The server is not responding',
// These messages should be just long enough to trigger a vertical
// layout but will probably vary by which font is used.
actions: [
{
action: 'reject',
label: 'Do not try this again',
flags: [ 'safe', 'close' ]
},
{
action: 'repeat',
label: 'Try to save this again',
flags: [ 'primary', 'progressive' ]
}
]
}
},
{
name: 'Message dialog (3 actions)',
dialogClass: OO.ui.MessageDialog,
data: {
title: 'Delete file?',
message: 'The file will be irreversably obliterated. Proceed with caution.',
actions: [
{ action: 'reject', label: 'Cancel', flags: [ 'safe', 'close' ] },
{ action: 'reject', label: 'Move file to trash' },
{
action: 'accept',
label: 'Obliterate',
flags: [ 'primary', 'destructive' ]
}
]
}
}
]
}
];
function openDialog( name, data, manager ) {
manager.openWindow( name, data );
}
configs.forEach( function ( config, j ) {
var fieldset = new OO.ui.FieldsetLayout( {
label: config.name,
id: config.id
} );
$fieldsets = $fieldsets.add( fieldset.$element );
config.examples.forEach( function ( example, i ) {
var openButton = new OO.ui.ButtonWidget( {
framed: false,
icon: 'window',
label: $( '<span>' ).attr( 'dir', 'ltr' ).text( example.name )
} );
if ( example.method ) {
openButton.on(
'click', OO.ui.bind(
OO.ui,
example.method,
example.param,
example.data
)
);
} else {
var name = 'window_' + j + '_' + i;
var DialogClass = example.dialogClass || OO.ui.Dialog;
var manager = example.windowManager || windowManager;
var windows = {};
windows[ name ] = new DialogClass( example.config );
manager.addWindows( windows );
openButton.on(
'click', OO.ui.bind( openDialog, this, name, example.data, manager )
);
}
fieldset.addItems( [ new OO.ui.FieldLayout( openButton, { align: 'inline' } ) ] );
} );
} );
return [
new OO.ui.PanelLayout( {
expanded: false,
framed: true
} ).$element
.addClass( 'demo-dialogs' )
.append( $fieldsets ),
windowManager.$element
];
}