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

   1 Demo.FloatableTest = function DemoFloatableTest( config ) {
   2         // Parent constructor
   3         Demo.FloatableTest.parent.call( this, config );
   4         // Properties
   5         // Must be equal to dialog width and height
   6         this.viewportSize = 500;
   7         // Width and height of scrollable area
   8         this.outerSize = 1000;
   9         // Width and height of scrollable container
  10         this.innerSize = 400;
  11 };
  12 OO.inheritClass( Demo.FloatableTest, OO.ui.ProcessDialog );
  13 Demo.FloatableTest.static.title = 'FloatableElement test';
  14 Demo.FloatableTest.static.actions = [
  15         { action: '', label: 'Cancel', flags: [ 'safe', 'back' ] },
  16         { action: 'center', label: 'Center view' }
  17 ];
  18 Demo.FloatableTest.prototype.getBodyHeight = function () {
  19         return this.viewportSize;
  20 };
  21 Demo.FloatableTest.prototype.initialize = function () {
  22         Demo.FloatableTest.parent.prototype.initialize.apply( this, arguments );
  23
  24         this.$container = $( '<div>' ).css( { width: this.outerSize, height: this.outerSize } );
  25         this.selectWidget = new Demo.PositionSelectWidget();
  26         this.toggleOverlayWidget = new OO.ui.ToggleSwitchWidget( { value: true } );
  27         this.toggleClippingWidget = new OO.ui.ToggleSwitchWidget( { value: false } );
  28
  29         this.$floatableContainer = $( '<div>' ).css( { width: this.innerSize, height: this.innerSize } );
  30         this.floatable = new Demo.FloatableWidget( { $floatableContainer: this.$floatableContainer } );
  31         this.floatable.toggle( false );
  32
  33         this.floatable.$element.addClass( 'demo-floatableTest-floatable' );
  34         this.$floatableContainer.addClass( 'demo-floatableTest-container' );
  35
  36         this.selectWidget.connect( this, { select: 'onSelectPosition' } );
  37         this.toggleOverlayWidget.connect( this, { change: 'onToggleOverlay' } );
  38         this.toggleClippingWidget.connect( this, { change: 'onToggleClipping' } );
  39
  40         this.fieldset = new OO.ui.FieldsetLayout( {
  41                 items: [
  42                         new OO.ui.FieldLayout( this.selectWidget, {
  43                                 align: 'top',
  44                                 label: 'Floatable position'
  45                         } ),
  46                         new OO.ui.FieldLayout( this.toggleClippingWidget, {
  47                                 align: 'inline',
  48                                 label: 'Enable clipping'
  49                         } ),
  50                         new OO.ui.FieldLayout( this.toggleOverlayWidget, {
  51                                 align: 'inline',
  52                                 label: 'Use overlay'
  53                         } )
  54                 ]
  55         } );
  56
  57         this.$body.append(
  58                 this.$container.append(
  59                         this.$floatableContainer.append( this.fieldset.$element )
  60                 )
  61         );
  62         this.$overlay.append( this.floatable.$element );
  63 };
  64 Demo.FloatableTest.prototype.onSelectPosition = function ( option ) {
  65         this.floatable.setHorizontalPosition( option.getData().horizontalPosition );
  66         this.floatable.setVerticalPosition( option.getData().verticalPosition );
  67 };
  68 Demo.FloatableTest.prototype.onToggleOverlay = function ( useOverlay ) {
  69         this.floatable.togglePositioning( false );
  70         this.floatable.toggleClipping( false );
  71         ( useOverlay ? this.$overlay : this.$container ).append( this.floatable.$element );
  72         this.floatable.togglePositioning( true );
  73         this.floatable.toggleClipping( this.toggleClippingWidget.getValue() );
  74 };
  75 Demo.FloatableTest.prototype.onToggleClipping = function ( useClipping ) {
  76         this.floatable.toggleClipping( useClipping );
  77 };
  78 Demo.FloatableTest.prototype.centerView = function () {
  79         var offset = ( this.outerSize - this.viewportSize ) / 2;
  80         this.$body[ 0 ].scrollTop = offset;
  81         // Different browsers count scrollLeft in RTL differently,
  82         // see <https://github.com/othree/jquery.rtl-scroll-type>.
  83         // This isn't correct for arbitrary offsets, but works for centering.
  84         this.$body[ 0 ].scrollLeft = offset;
  85         if ( this.$body[ 0 ].scrollLeft === 0 ) {
  86                 this.$body[ 0 ].scrollLeft = -offset;
  87         }
  88 };
  89 Demo.FloatableTest.prototype.getReadyProcess = function () {
  90         return new OO.ui.Process( function () {
  91                 var offset, side;
  92                 offset = ( this.outerSize - this.innerSize ) / 2;
  93                 side = this.getDir() === 'rtl' ? 'right' : 'left';
  94                 this.$floatableContainer.css( 'top', offset );
  95                 this.$floatableContainer.css( side, offset );
  96
  97                 this.centerView();
  98                 this.selectWidget.selectItemByData( {
  99                         horizontalPosition: 'start',
 100                         verticalPosition: 'below'
 101                 } );
 102
 103                 // Wait until the opening animation is over
 104                 setTimeout( function () {
 105                         this.floatable.toggle( true );
 106                         this.floatable.togglePositioning( true );
 107                         this.floatable.toggleClipping( this.toggleClippingWidget.getValue() );
 108                 }.bind( this ), OO.ui.theme.getDialogTransitionDuration() );
 109         }, this );
 110 };
 111 Demo.FloatableTest.prototype.getHoldProcess = function () {
 112         return new OO.ui.Process( function () {
 113                 this.floatable.toggleClipping( false );
 114                 this.floatable.togglePositioning( false );
 115                 this.floatable.toggle( false );
 116         }, this );
 117 };
 118 Demo.FloatableTest.prototype.getActionProcess = function ( action ) {
 119         if ( action === 'center' ) {
 120                 return new OO.ui.Process( function () {
 121                         this.centerView();
 122                 }, this );
 123         }
 124         return Demo.FloatableTest.parent.prototype.getActionProcess.call( this, action );
 125 };