protected function wrapFieldSetSection($legend, $section, $attributes) { // to get a user visible effect, wrap the fieldset into a framed panel layout $layout = new OOUI\PanelLayout(array('expanded' => false, 'padded' => true, 'framed' => true, 'infusable' => false)); $layout->appendContent(new OOUI\FieldsetLayout(array('label' => $legend, 'infusable' => false, 'items' => array(new OOUI\Widget(array('content' => new OOUI\HtmlSnippet($section))))) + $attributes)); return $layout; }
$demoContainer->addClasses(['oo-ui-demo-container']); $styles = [[], ['flags' => ['progressive']], ['flags' => ['constructive']], ['flags' => ['destructive']], ['flags' => ['primary', 'progressive']], ['flags' => ['primary', 'constructive']], ['flags' => ['primary', 'destructive']]]; $states = [['label' => 'Button'], ['label' => 'Button', 'icon' => 'tag'], ['label' => 'Button', 'icon' => 'tag', 'indicator' => 'down'], ['icon' => 'tag', 'title' => "Title text"], ['indicator' => 'down'], ['icon' => 'tag', 'indicator' => 'down'], ['label' => 'Button', 'disabled' => true], ['icon' => 'tag', 'title' => "Title text", 'disabled' => true], ['indicator' => 'down', 'disabled' => true]]; $buttonStyleShowcaseWidget = new OOUI\Widget(); $table = new OOUI\Tag('table'); foreach ($styles as $style) { $tableRow = new OOUI\Tag('tr'); foreach ($states as $state) { $tableCell = new OOUI\Tag('td'); $tableCell->appendContent(new OOUI\ButtonWidget(array_merge($style, $state, ['infusable' => true]))); $tableRow->appendContent($tableCell); } $table->appendContent($tableRow); } $buttonStyleShowcaseWidget->appendContent($table); $demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Simple buttons', 'items' => [new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Normal']), ['label' => "ButtonWidget (normal)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'flags' => ['progressive']]), ['label' => "ButtonWidget (progressive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Constructive', 'flags' => ['constructive']]), ['label' => "ButtonWidget (constructive, deprecated)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Destructive', 'flags' => ['destructive']]), ['label' => "ButtonWidget (destructive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary progressive', 'flags' => ['primary', 'progressive']]), ['label' => "ButtonWidget (primary, progressive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary constructive', 'flags' => ['primary', 'constructive']]), ['label' => "ButtonWidget (primary, constructive, deprecated)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary destructive', 'flags' => ['primary', 'destructive']]), ['label' => "ButtonWidget (primary, destructive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Disabled', 'disabled' => true]), ['label' => "ButtonWidget (disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'flags' => ['progressive'], 'disabled' => true]), ['label' => "ButtonWidget (progressive, disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'icon' => 'tag', 'flags' => ['progressive'], 'disabled' => true]), ['label' => "ButtonWidget (progressive, icon, disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Icon', 'icon' => 'tag']), ['label' => "ButtonWidget (icon)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Icon', 'icon' => 'tag', 'flags' => ['progressive']]), ['label' => "ButtonWidget (icon, progressive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Indicator', 'indicator' => 'down']), ['label' => "ButtonWidget (indicator)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Indicator', 'indicator' => 'down', 'flags' => ['progressive']]), ['label' => "ButtonWidget (indicator, progressive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'help', 'title' => 'Icon only']), ['label' => "ButtonWidget (icon only)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'tag', 'label' => 'Labeled']), ['label' => "ButtonWidget (frameless)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['progressive'], 'icon' => 'check', 'label' => 'Progressive']), ['label' => "ButtonWidget (frameless, progressive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['destructive'], 'icon' => 'remove', 'label' => 'Destructive']), ['label' => "ButtonWidget (frameless, destructive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['constructive'], 'icon' => 'add', 'label' => 'Constructive']), ['label' => "ButtonWidget (frameless, constructive)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'tag', 'label' => 'Disabled', 'disabled' => true]), ['label' => "ButtonWidget (frameless, disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['constructive'], 'icon' => 'tag', 'label' => 'Constructive', 'disabled' => true]), ['label' => "ButtonWidget (frameless, constructive, disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'AccessKeyed', 'accessKey' => 'k']), ['label' => "ButtonWidget (with accesskey k)", 'align' => 'top'])]])); $demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Button sets', 'items' => [new OOUI\FieldLayout(new OOUI\ButtonGroupWidget(['items' => [new OOUI\ButtonWidget(['icon' => 'tag', 'label' => 'One']), new OOUI\ButtonWidget(['label' => 'Two']), new OOUI\ButtonWidget(['indicator' => 'required', 'label' => 'Three'])]]), ['label' => 'ButtonGroupWidget', 'align' => 'top'])]])); # Note that $buttonStyleShowcaseWidget is not infusable, # because the contents would not be preserved -- we assume # that widgets will manage their own contents by default, # but here we've manually appended content to the widget. # If we embed it in an infusable FieldsetLayout, it will be # (recursively) made infusable. We protect the FieldLayout # by wrapping it with a new <div> Tag, so that it won't get # rebuilt during infusion. $wrappedFieldLayout = (new OOUI\Tag('div'))->appendContent(new OOUI\FieldLayout($buttonStyleShowcaseWidget, ['align' => 'top'])); $demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Button style showcase', 'items' => [$wrappedFieldLayout]])); $demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Form widgets', 'items' => [new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(['selected' => true]), ['align' => 'inline', 'label' => 'CheckboxInputWidget']), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(['selected' => true, 'disabled' => true]), ['align' => 'inline', 'label' => "CheckboxInputWidget (disabled)"]), new OOUI\FieldLayout(new OOUI\RadioInputWidget(['name' => 'oojs-ui-radio-demo']), ['align' => 'inline', 'label' => 'Connected RadioInputWidget #1']), new OOUI\FieldLayout(new OOUI\RadioInputWidget(['name' => 'oojs-ui-radio-demo', 'selected' => true]), ['align' => 'inline', 'label' => 'Connected RadioInputWidget #2']), new OOUI\FieldLayout(new OOUI\RadioInputWidget(['selected' => true, 'disabled' => true]), ['align' => 'inline', 'label' => "RadioInputWidget (disabled)"]), new OOUI\FieldLayout(new OOUI\RadioSelectInputWidget(['value' => 'dog', 'options' => [['data' => 'cat', 'label' => 'Cat'], ['data' => 'dog', 'label' => 'Dog'], ['data' => 'goldfish', 'label' => 'Goldfish']]]), ['align' => 'top', 'label' => 'RadioSelectInputWidget']), new OOUI\FieldLayout(new OOUI\CheckboxMultiselectInputWidget(['value' => ['dog', 'cat'], 'options' => [['data' => 'cat', 'label' => 'Cat'], ['data' => 'dog', 'label' => 'Dog'], ['data' => 'goldfish', 'label' => 'Goldfish']]]), ['align' => 'top', 'label' => 'CheckboxMultiselectInputWidget']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['value' => 'Text input']), ['label' => "TextInputWidget", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['icon' => 'help']), ['label' => "TextInputWidget (icon)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['required' => true]), ['label' => "TextInputWidget (required)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['placeholder' => 'Placeholder']), ['label' => "TextInputWidget (placeholder)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['type' => 'search']), ['label' => "TextInputWidget (type=search)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['type' => 'number']), ['label' => "TextInputWidget (type=number)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['value' => 'Readonly', 'readOnly' => true]), ['label' => "TextInputWidget (readonly)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['value' => 'Disabled', 'disabled' => true]), ['label' => "TextInputWidget (disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['value' => 'Accesskey A', 'accessKey' => 'a']), ['label' => "TextInputWidget (with Accesskey)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['value' => 'Title attribute', 'title' => 'Title attribute with more information about me.']), ['label' => "TextInputWidget (with title)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['multiline' => true, 'value' => "Multiline\nMultiline"]), ['label' => "TextInputWidget (multiline)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['multiline' => true, 'rows' => 15, 'value' => "Multiline\nMultiline"]), ['label' => "TextInputWidget (multiline, rows=15)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\TextInputWidget(['multiline' => true, 'value' => "Multiline\nMultiline", 'icon' => 'tag', 'indicator' => 'required']), ['label' => "TextInputWidget (multiline, icon, indicator)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\DropdownInputWidget(['options' => [['data' => 'a', 'label' => 'First'], ['data' => 'b', 'label' => 'Second'], ['data' => 'c', 'label' => 'Third']], 'value' => 'b', 'title' => 'Select an item']), ['label' => 'DropdownInputWidget', 'align' => 'top']), new OOUI\FieldLayout(new OOUI\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' => 'th', 'label' => 'Thai'], ['data' => 'tr', 'label' => 'Turkish'], ['data' => 'fiu-vro', 'label' => 'Võro'], ['data' => 'vls', 'label' => 'West Flemish'], ['data' => 'zea', 'label' => 'Zeelandic']], 'value' => 'en']), ['label' => "DropdownInputWidget (long)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\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']]]), ['label' => 'ComboBoxInputWidget', 'align' => 'top']), new OOUI\FieldLayout(new OOUI\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']]]), ['label' => "ComboBoxInputWidget (disabled)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ComboBoxInputWidget(), ['label' => "ComboBoxInputWidget (empty)", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(['label' => 'Submit the form', 'type' => 'submit', 'flags' => ['primary', 'progressive'], 'useInputTag' => true]), ['align' => 'top', 'label' => "ButtonInputWidget (using <input>)"]), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(['label' => 'Another button', 'type' => 'button']), ['align' => 'top', 'label' => "ButtonInputWidget (using <button>)"]), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(['framed' => false, 'label' => 'Another button', 'type' => 'button']), ['align' => 'top', 'label' => "ButtonInputWidget (frameless)"]), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(['framed' => false, 'label' => 'Another button', 'type' => 'button', 'useInputTag' => true]), ['align' => 'top', 'label' => "ButtonInputWidget (frameless, using <input>)"])]])); // We can't make the outer FieldsetLayout infusable, because the Widget in its FieldLayout // is added with 'content', which is not preserved after infusion. But we need the Widget // to wrap the HorizontalLayout. Need to think about this at some point.
$demoContainer = new OOUI\PanelLayout(array('expanded' => false, 'padded' => true, 'framed' => true)); $demoContainer->addClasses(array('oo-ui-demo-container')); $styles = array(array(), array('flags' => array('progressive')), array('flags' => array('constructive')), array('flags' => array('destructive')), array('flags' => array('primary', 'progressive')), array('flags' => array('primary', 'constructive')), array('flags' => array('primary', 'destructive'))); $states = array(array('label' => 'Button'), array('label' => 'Button', 'icon' => 'tag'), array('label' => 'Button', 'icon' => 'tag', 'indicator' => 'down'), array('icon' => 'tag', 'title' => "Title text"), array('indicator' => 'down'), array('icon' => 'tag', 'indicator' => 'down'), array('label' => 'Button', 'disabled' => true), array('icon' => 'tag', 'title' => "Title text", 'disabled' => true), array('indicator' => 'down', 'disabled' => true)); $buttonStyleShowcaseWidget = new OOUI\Widget(); foreach ($styles as $style) { foreach ($states as $state) { $buttonStyleShowcaseWidget->appendContent(new OOUI\ButtonWidget(array_merge($style, $state, array('infusable' => true)))); } $buttonStyleShowcaseWidget->appendContent(new OOUI\HtmlSnippet('<br />')); } $horizontalAlignmentWidget = new OOUI\Widget(array('classes' => array('oo-ui-demo-horizontal-alignment'))); # Adding content after the fact does not play well with # infusability. We should be using a proper Layout here. $horizontalAlignmentWidget->appendContent(new OOUI\ButtonWidget(array('label' => 'Button')), new OOUI\ButtonGroupWidget(array('items' => array(new OOUI\ButtonWidget(array('label' => 'A')), new OOUI\ButtonWidget(array('label' => 'B'))))), new OOUI\ButtonInputWidget(array('label' => 'ButtonInput')), new OOUI\TextInputWidget(array('value' => 'TextInput')), new OOUI\DropdownInputWidget(array('options' => array(array('label' => 'DropdownInput', 'data' => null)))), new OOUI\CheckboxInputWidget(array('selected' => true)), new OOUI\RadioInputWidget(array('selected' => true)), new OOUI\LabelWidget(array('label' => 'Label'))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Simple buttons', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Normal')), array('label' => "ButtonWidget (normal)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Progressive', 'flags' => array('progressive'))), array('label' => "ButtonWidget (progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'))), array('label' => "ButtonWidget (constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Destructive', 'flags' => array('destructive'))), array('label' => "ButtonWidget (destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary progressive', 'flags' => array('primary', 'progressive'))), array('label' => "ButtonWidget (primary, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary constructive', 'flags' => array('primary', 'constructive'))), array('label' => "ButtonWidget (primary, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary destructive', 'flags' => array('primary', 'destructive'))), array('label' => "ButtonWidget (primary, destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'icon' => 'tag', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, icon, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag')), array('label' => "ButtonWidget (icon)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag', 'flags' => array('progressive'))), array('label' => "ButtonWidget (icon, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down')), array('label' => "ButtonWidget (indicator)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down', 'flags' => array('constructive'))), array('label' => "ButtonWidget (indicator, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'help', 'title' => 'Icon only')), array('label' => "ButtonWidget (icon only)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Labeled')), array('label' => "ButtonWidget (frameless)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('progressive'), 'icon' => 'check', 'label' => 'Progressive')), array('label' => "ButtonWidget (frameless, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('destructive'), 'icon' => 'remove', 'label' => 'Destructive')), array('label' => "ButtonWidget (frameless, destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'add', 'label' => 'Constructive')), array('label' => "ButtonWidget (frameless, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (frameless, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'tag', 'label' => 'Constructive', 'disabled' => true)), array('label' => "ButtonWidget (frameless, constructive, disabled)", 'align' => 'top')))))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button sets', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonGroupWidget(array('items' => array(new OOUI\ButtonWidget(array('icon' => 'tag', 'label' => 'One')), new OOUI\ButtonWidget(array('label' => 'Two')), new OOUI\ButtonWidget(array('indicator' => 'required', 'label' => 'Three'))))), array('label' => 'ButtonGroupWidget', 'align' => 'top')))))); # Note that $buttonStyleShowcaseWidget is not infusable, # because the contents would not be preserved -- we assume # that widgets will manage their own contents by default, # but here we've manually appended content to the widget. # If we embed it in an infusable FieldsetLayout, it will be # (recursively) made infusable. We protect the FieldLayout # by wrapping it with a new <div> Tag, so that it won't get # rebuilt during infusion. $wrappedFieldLayout = new OOUI\Tag('div'); $wrappedFieldLayout->appendContent(new OOUI\FieldLayout($buttonStyleShowcaseWidget, array('align' => 'top'))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button style showcase', 'items' => array($wrappedFieldLayout)))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Form widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true)), array('align' => 'inline', 'label' => 'CheckboxInputWidget')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "CheckboxInputWidget (disabled)")), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo')), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #1')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo', 'selected' => true)), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #2')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "RadioInputWidget (disabled)")), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Text input')), array('label' => "TextInputWidget", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('icon' => 'search')), array('label' => "TextInputWidget (icon)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('indicator' => 'required', 'required' => true)), array('label' => "TextInputWidget (indicator, required)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('placeholder' => 'Placeholder')), array('label' => "TextInputWidget (placeholder)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Readonly', 'readOnly' => true)), array('label' => "TextInputWidget (readonly)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Disabled', 'disabled' => true)), array('label' => "TextInputWidget (disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\DropdownInputWidget(array('options' => array(array('data' => 'a', 'label' => 'First'), array('data' => 'b', 'label' => 'Second'), array('data' => 'c', 'label' => 'Third')), 'value' => 'b')), array('label' => 'DropdownInputWidget', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit')), array('align' => 'top', 'label' => "ButtonInputWidget")), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit', 'useInputTag' => true)), array('align' => 'top', 'label' => "ButtonInputWidget (using <input/>)")))))); # Again, $horizontalAlignmentWidget is not infusable because # it manually added content after creation. If we embed it
echo new OOUI\ButtonGroupWidget(array('infusable' => true, 'id' => 'oo-ui-demo-menu-infuse', 'items' => array(new OOUI\ButtonWidget(array('label' => 'JS', 'href' => ".#widgets-{$theme}-{$graphic}-{$direction}")), new OOUI\ButtonWidget(array('label' => 'PHP', 'href' => '?' . http_build_query($query)))))); ?> </div> <?php $demoContainer = new OOUI\PanelLayout(array('expanded' => false, 'padded' => true, 'framed' => true)); $demoContainer->addClasses(array('oo-ui-demo-container')); $styles = array(array(), array('flags' => array('progressive')), array('flags' => array('constructive')), array('flags' => array('destructive')), array('flags' => array('primary', 'progressive')), array('flags' => array('primary', 'constructive')), array('flags' => array('primary', 'destructive'))); $states = array(array('label' => 'Button'), array('label' => 'Button', 'icon' => 'tag'), array('label' => 'Button', 'icon' => 'tag', 'indicator' => 'down'), array('icon' => 'tag', 'title' => "Title text"), array('indicator' => 'down'), array('icon' => 'tag', 'indicator' => 'down'), array('label' => 'Button', 'disabled' => true), array('icon' => 'tag', 'title' => "Title text", 'disabled' => true), array('indicator' => 'down', 'disabled' => true)); $buttonStyleShowcaseWidget = new OOUI\Widget(); foreach ($styles as $style) { foreach ($states as $state) { $buttonStyleShowcaseWidget->appendContent(new OOUI\ButtonWidget(array_merge($style, $state, array('infusable' => true)))); } $buttonStyleShowcaseWidget->appendContent(new OOUI\HtmlSnippet('<br />')); } $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Simple buttons', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Normal')), array('label' => "ButtonWidget (normal)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Progressive', 'flags' => array('progressive'))), array('label' => "ButtonWidget (progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'))), array('label' => "ButtonWidget (constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Destructive', 'flags' => array('destructive'))), array('label' => "ButtonWidget (destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary progressive', 'flags' => array('primary', 'progressive'))), array('label' => "ButtonWidget (primary, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary constructive', 'flags' => array('primary', 'constructive'))), array('label' => "ButtonWidget (primary, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary destructive', 'flags' => array('primary', 'destructive'))), array('label' => "ButtonWidget (primary, destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'icon' => 'tag', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, icon, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag')), array('label' => "ButtonWidget (icon)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag', 'flags' => array('progressive'))), array('label' => "ButtonWidget (icon, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down')), array('label' => "ButtonWidget (indicator)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down', 'flags' => array('constructive'))), array('label' => "ButtonWidget (indicator, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'help', 'title' => 'Icon only')), array('label' => "ButtonWidget (icon only)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Labeled')), array('label' => "ButtonWidget (frameless)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('progressive'), 'icon' => 'check', 'label' => 'Progressive')), array('label' => "ButtonWidget (frameless, progressive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('destructive'), 'icon' => 'remove', 'label' => 'Destructive')), array('label' => "ButtonWidget (frameless, destructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'add', 'label' => 'Constructive')), array('label' => "ButtonWidget (frameless, constructive)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (frameless, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'tag', 'label' => 'Constructive', 'disabled' => true)), array('label' => "ButtonWidget (frameless, constructive, disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'AccessKeyed', 'accessKey' => 'k')), array('label' => "ButtonWidget (with accesskey k)", 'align' => 'top')))))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button sets', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonGroupWidget(array('items' => array(new OOUI\ButtonWidget(array('icon' => 'tag', 'label' => 'One')), new OOUI\ButtonWidget(array('label' => 'Two')), new OOUI\ButtonWidget(array('indicator' => 'required', 'label' => 'Three'))))), array('label' => 'ButtonGroupWidget', 'align' => 'top')))))); # Note that $buttonStyleShowcaseWidget is not infusable, # because the contents would not be preserved -- we assume # that widgets will manage their own contents by default, # but here we've manually appended content to the widget. # If we embed it in an infusable FieldsetLayout, it will be # (recursively) made infusable. We protect the FieldLayout # by wrapping it with a new <div> Tag, so that it won't get # rebuilt during infusion. $wrappedFieldLayout = new OOUI\Tag('div'); $wrappedFieldLayout->appendContent(new OOUI\FieldLayout($buttonStyleShowcaseWidget, array('align' => 'top'))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button style showcase', 'items' => array($wrappedFieldLayout)))); $demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Form widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true)), array('align' => 'inline', 'label' => 'CheckboxInputWidget')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "CheckboxInputWidget (disabled)")), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo')), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #1')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo', 'selected' => true)), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #2')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "RadioInputWidget (disabled)")), new OOUI\FieldLayout(new OOUI\RadioSelectInputWidget(array('value' => 'dog', 'options' => array(array('data' => 'cat', 'label' => 'Cat'), array('data' => 'dog', 'label' => 'Dog'), array('data' => 'goldfish', 'label' => 'Goldfish')))), array('align' => 'top', 'label' => 'RadioSelectInputWidget')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Text input')), array('label' => "TextInputWidget", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('icon' => 'search')), array('label' => "TextInputWidget (icon)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('required' => true)), array('label' => "TextInputWidget (required)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('placeholder' => 'Placeholder')), array('label' => "TextInputWidget (placeholder)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('type' => 'search')), array('label' => "TextInputWidget (type=search)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Readonly', 'readOnly' => true)), array('label' => "TextInputWidget (readonly)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Disabled', 'disabled' => true)), array('label' => "TextInputWidget (disabled)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Accesskey A', 'accessKey' => 'a')), array('label' => "TextInputWidget (with Accesskey)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Title attribute', 'title' => 'Title attribute with more information about me.')), array('label' => "TextInputWidget (with title)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'rows' => 15, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline, rows=15)", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\DropdownInputWidget(array('options' => array(array('data' => 'a', 'label' => 'First'), array('data' => 'b', 'label' => 'Second'), array('data' => 'c', 'label' => 'Third')), 'value' => 'b', 'title' => 'Select an item')), array('label' => 'DropdownInputWidget', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit')), array('align' => 'top', 'label' => "ButtonInputWidget")), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit', 'useInputTag' => true)), array('align' => 'top', 'label' => "ButtonInputWidget (using <input/>)")))))); // We can't make the outer FieldsetLayout infusable, because the Widget in its FieldLayout // is added with 'content', which is not preserved after infusion. But we need the Widget