vendor/oojs/oojs-ui/demos/classes/MenuDialog.js

   1 Demo.MenuDialog = function DemoMenuDialog( config ) {
   2         Demo.MenuDialog.parent.call( this, config );
   3 };
   4 OO.inheritClass( Demo.MenuDialog, OO.ui.ProcessDialog );
   5 Demo.MenuDialog.static.title = 'Menu dialog';
   6 Demo.MenuDialog.static.actions = [
   7         { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
   8         { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
   9 ];
  10 Demo.MenuDialog.prototype.getBodyHeight = function () {
  11         return 350;
  12 };
  13 Demo.MenuDialog.prototype.initialize = function () {
  14         var menuLayout, positionField, showField, menuPanel, contentPanel;
  15         Demo.MenuDialog.parent.prototype.initialize.apply( this, arguments );
  16
  17         menuLayout = new OO.ui.MenuLayout();
  18         positionField = new OO.ui.FieldLayout(
  19                 new OO.ui.ButtonSelectWidget( {
  20                         items: [
  21                                 new OO.ui.ButtonOptionWidget( {
  22                                         data: 'before',
  23                                         label: 'Before'
  24                                 } ),
  25                                 new OO.ui.ButtonOptionWidget( {
  26                                         data: 'after',
  27                                         label: 'After'
  28                                 } ),
  29                                 new OO.ui.ButtonOptionWidget( {
  30                                         data: 'top',
  31                                         label: 'Top'
  32                                 } ),
  33                                 new OO.ui.ButtonOptionWidget( {
  34                                         data: 'bottom',
  35                                         label: 'Bottom'
  36                                 } )
  37                         ]
  38                 } ).on( 'select', function ( item ) {
  39                         menuLayout.setMenuPosition( item.getData() );
  40                 } ),
  41                 {
  42                         label: 'Menu position',
  43                         align: 'top'
  44                 }
  45         );
  46         showField = new OO.ui.FieldLayout(
  47                 new OO.ui.ToggleSwitchWidget( { value: true } ).on( 'change', function ( value ) {
  48                         menuLayout.toggleMenu( value );
  49                 } ),
  50                 {
  51                         label: 'Show menu',
  52                         align: 'top'
  53                 }
  54         );
  55         menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } );
  56         contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } );
  57
  58         menuLayout.$menu.append(
  59                 menuPanel.$element.append( 'Menu panel' )
  60         );
  61         menuLayout.$content.append(
  62                 contentPanel.$element.append(
  63                         positionField.$element,
  64                         showField.$element
  65                 )
  66         );
  67
  68         this.$body.append( menuLayout.$element );
  69 };
  70 Demo.MenuDialog.prototype.getActionProcess = function ( action ) {
  71         if ( action ) {
  72                 return new OO.ui.Process( function () {
  73                         this.close( { action: action } );
  74                 }, this );
  75         }
  76         return Demo.MenuDialog.parent.prototype.getActionProcess.call( this, action );
  77 };