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

   1 Demo.DialogWithPopupAndDropdown = function DemoDialogWithPopupAndDropdown( config ) {
   2         Demo.DialogWithPopupAndDropdown.parent.call( this, config );
   3 };
   4 OO.inheritClass( Demo.DialogWithPopupAndDropdown, OO.ui.ProcessDialog );
   5 Demo.DialogWithPopupAndDropdown.static.title = 'Dialog with popup and dropdown (ClippableElement test)';
   6 Demo.DialogWithPopupAndDropdown.static.actions = [
   7         { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
   8         { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
   9 ];
  10 Demo.DialogWithPopupAndDropdown.prototype.getBodyHeight = function () {
  11         return 300;
  12 };
  13 Demo.DialogWithPopupAndDropdown.prototype.initialize = function () {
  14         var $spacer = $( '<div>' ).height( 240 );
  15         Demo.DialogWithPopupAndDropdown.parent.prototype.initialize.apply( this, arguments );
  16         this.bookletLayout = new OO.ui.BookletLayout( {
  17                 outlined: true
  18         } );
  19         this.pages = [
  20                 new Demo.SamplePage( 'info', {
  21                         label: 'Information',
  22                         icon: 'info',
  23                         content: [
  24                                 'Widgets that don\'t use $overlay get clipped at the bottom of their container. ',
  25                                 'This is a test of two such cases'
  26                         ]
  27                 } ),
  28                 new Demo.SamplePage( 'dropdownbottom', {
  29                         label: 'DropdownWidget at bottom',
  30                         content: [ $spacer.clone(), new OO.ui.DropdownWidget( {
  31                                 menu: {
  32                                         items: this.makeItems()
  33                                 }
  34                         } ) ]
  35                 } ),
  36                 new Demo.SamplePage( 'popupbottom', {
  37                         label: 'Popup at bottom',
  38                         content: [ $spacer.clone(), new OO.ui.PopupButtonWidget( {
  39                                 icon: 'info',
  40                                 label: 'Popup here',
  41                                 framed: false,
  42                                 popup: {
  43                                         head: true,
  44                                         label: 'More information',
  45                                         $content: $( '<p>Extra information here.</p>' ),
  46                                         padded: true
  47                                 }
  48                         } ) ]
  49                 } )
  50         ];
  51         this.bookletLayout.addPages( this.pages );
  52         this.$body.append( this.bookletLayout.$element );
  53 };
  54 Demo.DialogWithPopupAndDropdown.prototype.makeItems = function () {
  55         return [ 0, 1, 2, 3, 4 ].map( function ( val ) {
  56                 return new OO.ui.MenuOptionWidget( {
  57                         data: val,
  58                         label: String( val )
  59                 } );
  60         } );
  61 };
  62
  63 Demo.DialogWithPopupAndDropdown.prototype.getActionProcess = function ( action ) {
  64         if ( action ) {
  65                 return new OO.ui.Process( function () {
  66                         this.close( { action: action } );
  67                 }, this );
  68         }
  69         return Demo.DialogWithPopupAndDropdown.parent.prototype.getActionProcess.call( this, action );
  70 };