diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/demos/pages/widgets.js')
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/widgets.js | 470 |
1 files changed, 422 insertions, 48 deletions
diff --git a/vendor/oojs/oojs-ui/demos/pages/widgets.js b/vendor/oojs/oojs-ui/demos/pages/widgets.js index 52c6ee87..dd4be8c4 100644 --- a/vendor/oojs/oojs-ui/demos/pages/widgets.js +++ b/vendor/oojs/oojs-ui/demos/pages/widgets.js @@ -1,5 +1,6 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { - var styles, states, buttonStyleShowcaseWidget, horizontalAlignmentWidget, fieldsets, + var styles, states, buttonStyleShowcaseWidget, fieldsets, + capsuleWithPopup, capsulePopupWidget, $demo = demo.$element; /** @@ -11,21 +12,21 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { config = config || {}; // Parent constructor - DragDropGroupWidget.super.call( this, config ); + DragDropGroupWidget.parent.call( this, config ); // Mixin constructors - OO.ui.DraggableGroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) ); + OO.ui.mixin.DraggableGroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) ); // Respond to reorder event this.connect( this, { reorder: 'onReorder' } ); } /* Setup */ OO.inheritClass( DragDropGroupWidget, OO.ui.Widget ); - OO.mixinClass( DragDropGroupWidget, OO.ui.DraggableGroupElement ); + OO.mixinClass( DragDropGroupWidget, OO.ui.mixin.DraggableGroupElement ); /** * Respond to order event - * @param {OO.ui.DraggableElement} item Reordered item + * @param {OO.ui.mixin.DraggableElement} item Reordered item * @param {number} newIndex New index */ DragDropGroupWidget.prototype.onReorder = function ( item, newIndex ) { @@ -41,28 +42,28 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { config = config || {}; // Parent constructor - DragDropItemWidget.super.call( this, config ); + DragDropItemWidget.parent.call( this, config ); // Mixin constructors - OO.ui.DraggableElement.call( this, config ); + OO.ui.mixin.DraggableElement.call( this, config ); } /* Setup */ OO.inheritClass( DragDropItemWidget, OO.ui.OptionWidget ); - OO.mixinClass( DragDropItemWidget, OO.ui.DraggableElement ); + OO.mixinClass( DragDropItemWidget, OO.ui.mixin.DraggableElement ); /** * Demo for LookupElement. * @extends OO.ui.TextInputWidget - * @mixins OO.ui.LookupElement + * @mixins OO.ui.mixin.LookupElement */ function NumberLookupTextInputWidget() { // Parent constructor OO.ui.TextInputWidget.call( this, { validate: 'integer' } ); // Mixin constructors - OO.ui.LookupElement.call( this ); + OO.ui.mixin.LookupElement.call( this ); } OO.inheritClass( NumberLookupTextInputWidget, OO.ui.TextInputWidget ); - OO.mixinClass( NumberLookupTextInputWidget, OO.ui.LookupElement ); + OO.mixinClass( NumberLookupTextInputWidget, OO.ui.mixin.LookupElement ); /** * @inheritdoc @@ -113,6 +114,33 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { return items; }; + function UnsupportedSelectFileWidget() { + // Parent constructor + UnsupportedSelectFileWidget.parent.apply( this, arguments ); + } + OO.inheritClass( UnsupportedSelectFileWidget, OO.ui.SelectFileWidget ); + UnsupportedSelectFileWidget.static.isSupported = function () { + return false; + }; + + capsulePopupWidget = new OO.ui.NumberInputWidget( { + isInteger: true + } ); + capsulePopupWidget.connect( capsulePopupWidget, { + enter: function () { + if ( !isNaN( this.getNumericValue() ) ) { + capsuleWithPopup.addItemsFromData( [ this.getNumericValue() ] ); + this.setValue( '' ); + } + return false; + } + } ); + capsulePopupWidget.$element.css( 'vertical-align', 'middle' ); + capsuleWithPopup = new OO.ui.CapsuleMultiSelectWidget( { + allowArbitrary: true, + popup: { $content: capsulePopupWidget.$element } + } ); + styles = [ {}, { @@ -182,28 +210,6 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { buttonStyleShowcaseWidget.$element.append( $( '<br>' ) ); } ); - horizontalAlignmentWidget = new OO.ui.Widget( { - classes: [ 'oo-ui-demo-horizontal-alignment' ] - } ); - horizontalAlignmentWidget.$element.append( - new OO.ui.ButtonWidget( { label: 'Button' } ).$element, - new OO.ui.ButtonGroupWidget( { items: [ - new OO.ui.ToggleButtonWidget( { label: 'A' } ), - new OO.ui.ToggleButtonWidget( { label: 'B' } ) - ] } ).$element, - new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ).$element, - new OO.ui.TextInputWidget( { value: 'TextInput' } ).$element, - new OO.ui.DropdownInputWidget( { options: [ - { - label: 'DropdownInput', - data: null - } - ] } ).$element, - new OO.ui.CheckboxInputWidget( { selected: true } ).$element, - new OO.ui.RadioInputWidget( { selected: true } ).$element, - new OO.ui.LabelWidget( { label: 'Label' } ).$element - ); - fieldsets = [ new OO.ui.FieldsetLayout( { label: 'Simple buttons', @@ -487,6 +493,16 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { label: 'ButtonWidget (frameless, indicator)\u200E', align: 'top' } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'AccessKeyed', + accessKey: 'k' + } ), + { + label: 'ButtonWidget (with accesskey k)\u200E', + align: 'top' + } ) ] } ), @@ -656,15 +672,15 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { new OO.ui.RadioSelectWidget( { items: [ new OO.ui.RadioOptionWidget( { - data: 'Cat', + data: 'cat', label: 'Cat' } ), new OO.ui.RadioOptionWidget( { - data: 'Dog', + data: 'dog', label: 'Dog' } ), new OO.ui.RadioOptionWidget( { - data: 'Goldfish', + data: 'goldfish', label: 'Goldfish', disabled: true } ) @@ -676,6 +692,50 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.FieldLayout( + new OO.ui.RadioSelectInputWidget( { + value: 'dog', + options: [ + { + data: 'cat', + label: 'Cat' + }, + { + data: 'dog', + label: 'Dog' + }, + { + data: 'goldfish', + label: 'Goldfish' + } + ] + } ), + { + align: 'top', + label: 'RadioSelectInputWidget' + } + ), + new OO.ui.FieldLayout( + new OO.ui.NumberInputWidget(), + { + label: 'NumberInputWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.NumberInputWidget( { min: 1, max: 5, isInteger: true } ), + { + label: 'NumberInputWidget (1–5, ints only)', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.NumberInputWidget( { min: 0, max: 1, step: 0.1, pageStep: 0.25 } ), + { + label: 'NumberInputWidget (0–1, step by .1, page by .25)', + align: 'top' + } + ), + new OO.ui.FieldLayout( new OO.ui.ToggleSwitchWidget(), { label: 'ToggleSwitchWidget', @@ -733,12 +793,11 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { ), new OO.ui.FieldLayout( new OO.ui.TextInputWidget( { - indicator: 'required', required: true, validate: 'non-empty' } ), { - label: 'TextInputWidget (indicator, required)\u200E', + label: 'TextInputWidget (required)\u200E', align: 'top' } ), @@ -761,6 +820,13 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { type: 'search' } ), + { + label: 'TextInputWidget (type=search)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( new OO.ui.TextInputWidget( { value: 'Readonly', readOnly: true @@ -783,6 +849,17 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { new OO.ui.FieldLayout( new OO.ui.TextInputWidget( { multiline: true, + rows: 15, + value: 'Multiline\nMultiline' + } ), + { + label: 'TextInputWidget (multiline, rows=15)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + multiline: true, autosize: true, value: 'Autosize\nAutosize\nAutosize\nAutosize' } ), @@ -793,6 +870,18 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { ), new OO.ui.FieldLayout( new OO.ui.TextInputWidget( { + multiline: true, + rows: 10, + autosize: true, + value: 'Autosize\nAutosize\nAutosize\nAutosize' + } ), + { + label: 'TextInputWidget (autosize, rows=10)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { icon: 'tag', indicator: 'alert', value: 'Text input with label', @@ -817,6 +906,94 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Title attribute', + title: 'Title attribute with more information about me.' + } ), + { + label: 'TextInputWidget (with title)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Accesskey A', + accessKey: 'a' + } ), + { + label: 'TextInputWidget (with Accesskey)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( {} ), + { + label: 'SelectFileWidget\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( { accept: [ 'image/png', 'image/jpeg' ] } ), + { + label: 'SelectFileWidget (accept PNG and JPEG)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( { + icon: 'tag', + indicator: 'required' + } ), + { + label: 'SelectFileWidget (icon, indicator)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( { + icon: 'tag', + indicator: 'required', + disabled: true + } ), + { + label: 'SelectFileWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new UnsupportedSelectFileWidget(), + { + label: 'SelectFileWidget (no browser support)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( { showDropTarget: true } ), + { + label: 'SelectFileWidget (with drop target)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.SelectFileWidget( { + showDropTarget: true, + disabled: true + } ), + { + label: 'SelectFileWidget (with drop target, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new UnsupportedSelectFileWidget( { + showDropTarget: true + } ), + { + label: 'SelectFileWidget (with drop target, no browser support)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( new OO.ui.DropdownWidget( { label: 'Select one', menu: { @@ -933,7 +1110,8 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { label: 'Third' } ], - value: 'b' + value: 'b', + title: 'Select an item' } ), { label: 'DropdownInputWidget', @@ -983,6 +1161,89 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.FieldLayout( + new OO.ui.CapsuleMultiSelectWidget( { + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ), + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ), + new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ), + new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ), + new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } ) + ] + } + } ), + { + label: 'CapsuleMultiSelectWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CapsuleMultiSelectWidget( { + allowArbitrary: true, + icon: 'tag', + indicator: 'required', + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ), + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ), + new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ), + new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ), + new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } ) + ] + } + } ), + { + label: 'CapsuleMultiSelectWidget (icon, indicator, arbitrary values allowed)', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CapsuleMultiSelectWidget( { + disabled: true, + icon: 'tag', + indicator: 'required', + values: [ 'jkl', 'zxc' ], + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ), + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ), + new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ), + new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ), + new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } ) + ] + } + } ), + { + label: 'CapsuleMultiSelectWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CapsuleMultiSelectWidget( { + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ), + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ) + ] + } + } ).addItemsFromData( [ 'abc', 'asd' ] ), + { + label: 'CapsuleMultiSelectWidget (initially selected)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + capsuleWithPopup, + { + label: 'CapsuleMultiSelectWidget with NumberInputWidget popup\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( new OO.ui.ButtonInputWidget( { label: 'Submit the form', type: 'submit' @@ -1002,14 +1263,58 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { align: 'top', label: 'ButtonInputWidget (using <input/>)\u200E' } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + framed: false, + label: 'Submit the form', + type: 'submit' + } ), + { + align: 'top', + label: 'ButtonInputWidget (frameless)\u200E' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + framed: false, + label: 'Submit the form', + type: 'submit', + useInputTag: true + } ), + { + align: 'top', + label: 'ButtonInputWidget (frameless, using <input/>)\u200E' + } ) ] } ), new OO.ui.FieldsetLayout( { - label: 'Horizontal alignment', + label: 'HorizontalLayout', items: [ new OO.ui.FieldLayout( - horizontalAlignmentWidget, + new OO.ui.Widget( { + content: [ new OO.ui.HorizontalLayout( { + items: [ + new OO.ui.ButtonWidget( { label: 'Button' } ), + new OO.ui.ButtonGroupWidget( { items: [ + new OO.ui.ToggleButtonWidget( { label: 'A' } ), + new OO.ui.ToggleButtonWidget( { label: 'B' } ) + ] } ), + new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ), + new OO.ui.TextInputWidget( { value: 'TextInput' } ), + new OO.ui.DropdownInputWidget( { options: [ + { + label: 'DropdownInput', + data: null + } + ] } ), + new OO.ui.CheckboxInputWidget( { selected: true } ), + new OO.ui.RadioInputWidget( { selected: true } ), + new OO.ui.LabelWidget( { label: 'Label' } ) + ] + } ) ] + } ), { label: 'Multiple widgets shown as a single line, ' + 'as used in compact forms or in parts of a bigger widget.', @@ -1230,6 +1535,24 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { ), new OO.ui.FieldLayout( new OO.ui.PopupButtonWidget( { + icon: 'info', + framed: false, + popup: { + head: true, + label: 'More information', + $content: $( '<p>Extra information here.</p><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li></ul><p>Even more information here which might well be clipped off the visible area.</p>' ), + $footer: $( '<p>And maybe a footer whilst we\'re at it?</p>' ), + padded: true, + align: 'forwards' + } + } ), + { + label: 'PopupButtonWidget (frameless, with popup head and footer, align: forwards)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { icon: 'menu', label: 'Options', popup: { @@ -1286,8 +1609,28 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { align: 'top' } ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'FieldLayout with HTML help', + help: new OO.ui.HtmlSnippet( '<b>Bold text</b> is helpful!' ), + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'FieldLayout with title', + title: 'Field title text', + align: 'top' + } + ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1297,7 +1640,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1307,7 +1650,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1317,7 +1660,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1327,7 +1670,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1339,7 +1682,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { } ), new OO.ui.ActionFieldLayout( - new OO.ui.TextInputWidget( {} ), + new OO.ui.TextInputWidget(), new OO.ui.ButtonWidget( { label: 'Button' } ), @@ -1347,6 +1690,37 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { label: $( '<i>' ).text( 'ActionFieldLayout aligned top with rich text label' ), align: 'top' } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: '' + } ), + { + label: 'FieldLayout with notice', + notices: [ 'Please input a number.' ], + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Foo' + } ), + { + label: 'FieldLayout with error message', + errors: [ 'The value must be a number.' ], + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Foo' + } ), + { + label: 'FieldLayout with notice and error message', + notices: [ 'Please input a number.' ], + errors: [ 'The value must be a number.' ], + align: 'top' + } ) ] } ), @@ -1408,7 +1782,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) { $.each( fieldsets, function ( i, fieldsetLayout ) { $.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) { fieldLayout.$element.append( - demo.buildConsole( fieldLayout.fieldWidget, 'widget' ) + demo.buildConsole( fieldLayout, 'layout', 'widget' ) ); } ); } ); |