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

   1 Demo.PopupButtonWidgetTest = function DemoPopupButtonWidgetTest( config ) {
   2         Demo.PopupButtonWidgetTest.parent.call( this, config );
   3 };
   4 OO.inheritClass( Demo.PopupButtonWidgetTest, OO.ui.ProcessDialog );
   5 Demo.PopupButtonWidgetTest.static.title = 'PopupButtonWidget test';
   6 Demo.PopupButtonWidgetTest.static.actions = [
   7         { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
   8         { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
   9 ];
  10 Demo.PopupButtonWidgetTest.prototype.initialize = function () {
  11         Demo.PopupButtonWidgetTest.parent.prototype.initialize.apply( this, arguments );
  12
  13         this.panel = new OO.ui.PanelLayout( {
  14                 expanded: false,
  15                 padded: true
  16         } );
  17
  18         this.$center = $( '<td>' ).attr( { colspan: 3, rowspan: 3 } );
  19
  20         this.toggleOverlayWidget = new OO.ui.ToggleSwitchWidget( { value: true } );
  21         this.toggleAnchorWidget = new OO.ui.ToggleSwitchWidget( { value: true } );
  22         this.showAllWidget = new OO.ui.ButtonWidget( { label: 'Toggle all' } );
  23
  24         this.toggleOverlayWidget.connect( this, { change: 'makeTable' } );
  25         this.toggleAnchorWidget.connect( this, { change: 'makeTable' } );
  26         this.showAllWidget.connect( this, { click: 'toggleAll' } );
  27
  28         this.fieldset = new OO.ui.FieldsetLayout( {
  29                 items: [
  30                         new OO.ui.FieldLayout( this.toggleAnchorWidget, {
  31                                 align: 'inline',
  32                                 label: 'Enable anchors'
  33                         } ),
  34                         new OO.ui.FieldLayout( this.toggleOverlayWidget, {
  35                                 align: 'inline',
  36                                 label: 'Use overlay'
  37                         } ),
  38                         new OO.ui.FieldLayout( this.showAllWidget, {
  39                                 align: 'top'
  40                         } )
  41                 ]
  42         } );
  43
  44         this.$center.append( this.fieldset.$element );
  45
  46         this.makeTable();
  47
  48         this.$body.append( this.panel.$element );
  49 };
  50 Demo.PopupButtonWidgetTest.prototype.makeContents = function () {
  51         var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' +
  52                 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200E';
  53         return $( [] )
  54                 .add( $( '<p>' ).text( loremIpsum ) )
  55                 .add( $( '<p>' ).text( loremIpsum ) )
  56                 .add( $( '<p>' ).text( loremIpsum ) );
  57 };
  58 Demo.PopupButtonWidgetTest.prototype.makeTable = function () {
  59         this.buttons = [];
  60         if ( this.$table ) {
  61                 this.$table.detach();
  62         }
  63
  64         this.$table = $( '<table>' ).append(
  65                 $( '<tr>' ).append(
  66                         $( '<td>' ),
  67                         $( '<td>' ).append( this.getButton( 'above', 'backwards' ).$element ),
  68                         $( '<td>' ).append( this.getButton( 'above', 'center' ).$element ),
  69                         $( '<td>' ).append( this.getButton( 'above', 'forwards' ).$element ),
  70                         $( '<td>' )
  71                 ),
  72                 $( '<tr>' ).append(
  73                         $( '<td>' ).append( this.getButton( 'before', 'backwards' ).$element ),
  74                         this.$center,
  75                         $( '<td>' ).append( this.getButton( 'after', 'backwards' ).$element ).css( 'text-align', this.getDir() === 'rtl' ? 'left' : 'right' )
  76                 ),
  77                 $( '<tr>' ).append(
  78                         $( '<td>' ).append( this.getButton( 'before', 'center' ).$element ),
  79                         $( '<td>' ).append( this.getButton( 'after', 'center' ).$element ).css( 'text-align', this.getDir() === 'rtl' ? 'left' : 'right' )
  80                 ),
  81                 $( '<tr>' ).append(
  82                         $( '<td>' ).append( this.getButton( 'before', 'forwards' ).$element ),
  83                         $( '<td>' ).append( this.getButton( 'after', 'forwards' ).$element ).css( 'text-align', this.getDir() === 'rtl' ? 'left' : 'right' )
  84                 ),
  85                 $( '<tr>' ).append(
  86                         $( '<td>' ),
  87                         $( '<td>' ).append( this.getButton( 'below', 'backwards' ).$element ),
  88                         $( '<td>' ).append( this.getButton( 'below', 'center' ).$element ),
  89                         $( '<td>' ).append( this.getButton( 'below', 'forwards' ).$element ),
  90                         $( '<td>' )
  91                 )
  92         );
  93         this.panel.$element.append( this.$table );
  94 };
  95 Demo.PopupButtonWidgetTest.prototype.getButton = function ( position, align ) {
  96         var button = new OO.ui.PopupButtonWidget( {
  97                 $overlay: ( this.toggleOverlayWidget.getValue() ? this.$overlay : null ),
  98                 label: $( '<span>' ).append( position + '<br>' + align ),
  99                 popup: {
 100                         position: position,
 101                         align: align,
 102                         anchor: this.toggleAnchorWidget.getValue(),
 103                         padded: true,
 104                         $content: this.makeContents()
 105                 }
 106         } );
 107
 108         this.buttons.push( button );
 109         return button;
 110 };
 111 Demo.PopupButtonWidgetTest.prototype.toggleAll = function () {
 112         this.buttons.forEach( function ( button ) {
 113                 button.getPopup().toggle();
 114         } );
 115 };
 116 Demo.PopupButtonWidgetTest.prototype.getActionProcess = function ( action ) {
 117         if ( action ) {
 118                 return new OO.ui.Process( function () {
 119                         this.close( { action: action } );
 120                 }, this );
 121         }
 122         return Demo.PopupButtonWidgetTest.parent.prototype.getActionProcess.call( this, action );
 123 };