MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / vendor / oojs / oojs-ui / demos / classes / FloatableTest.js

diff --git a/vendor/oojs/oojs-ui/demos/classes/FloatableTest.js b/vendor/oojs/oojs-ui/demos/classes/FloatableTest.js
new file mode 100644 (file)
index 0000000..43cb977
--- /dev/null
+++ b/vendor/oojs/oojs-ui/demos/classes/FloatableTest.js
@@ -0,0 +1,125 @@
+Demo.FloatableTest = function DemoFloatableTest( config ) {
+       // Parent constructor
+       Demo.FloatableTest.parent.call( this, config );
+       // Properties
+       // Must be equal to dialog width and height
+       this.viewportSize = 500;
+       // Width and height of scrollable area
+       this.outerSize = 1000;
+       // Width and height of scrollable container
+       this.innerSize = 400;
+};
+OO.inheritClass( Demo.FloatableTest, OO.ui.ProcessDialog );
+Demo.FloatableTest.static.title = 'FloatableElement test';
+Demo.FloatableTest.static.actions = [
+       { action: '', label: 'Cancel', flags: [ 'safe', 'back' ] },
+       { action: 'center', label: 'Center view' }
+];
+Demo.FloatableTest.prototype.getBodyHeight = function () {
+       return this.viewportSize;
+};
+Demo.FloatableTest.prototype.initialize = function () {
+       Demo.FloatableTest.parent.prototype.initialize.apply( this, arguments );
+
+       this.$container = $( '<div>' ).css( { width: this.outerSize, height: this.outerSize } );
+       this.selectWidget = new Demo.PositionSelectWidget();
+       this.toggleOverlayWidget = new OO.ui.ToggleSwitchWidget( { value: true } );
+       this.toggleClippingWidget = new OO.ui.ToggleSwitchWidget( { value: false } );
+
+       this.$floatableContainer = $( '<div>' ).css( { width: this.innerSize, height: this.innerSize } );
+       this.floatable = new Demo.FloatableWidget( { $floatableContainer: this.$floatableContainer } );
+       this.floatable.toggle( false );
+
+       this.floatable.$element.addClass( 'demo-floatableTest-floatable' );
+       this.$floatableContainer.addClass( 'demo-floatableTest-container' );
+
+       this.selectWidget.connect( this, { select: 'onSelectPosition' } );
+       this.toggleOverlayWidget.connect( this, { change: 'onToggleOverlay' } );
+       this.toggleClippingWidget.connect( this, { change: 'onToggleClipping' } );
+
+       this.fieldset = new OO.ui.FieldsetLayout( {
+               items: [
+                       new OO.ui.FieldLayout( this.selectWidget, {
+                               align: 'top',
+                               label: 'Floatable position'
+                       } ),
+                       new OO.ui.FieldLayout( this.toggleClippingWidget, {
+                               align: 'inline',
+                               label: 'Enable clipping'
+                       } ),
+                       new OO.ui.FieldLayout( this.toggleOverlayWidget, {
+                               align: 'inline',
+                               label: 'Use overlay'
+                       } )
+               ]
+       } );
+
+       this.$body.append(
+               this.$container.append(
+                       this.$floatableContainer.append( this.fieldset.$element )
+               )
+       );
+       this.$overlay.append( this.floatable.$element );
+};
+Demo.FloatableTest.prototype.onSelectPosition = function ( option ) {
+       this.floatable.setHorizontalPosition( option.getData().horizontalPosition );
+       this.floatable.setVerticalPosition( option.getData().verticalPosition );
+};
+Demo.FloatableTest.prototype.onToggleOverlay = function ( useOverlay ) {
+       this.floatable.togglePositioning( false );
+       this.floatable.toggleClipping( false );
+       ( useOverlay ? this.$overlay : this.$container ).append( this.floatable.$element );
+       this.floatable.togglePositioning( true );
+       this.floatable.toggleClipping( this.toggleClippingWidget.getValue() );
+};
+Demo.FloatableTest.prototype.onToggleClipping = function ( useClipping ) {
+       this.floatable.toggleClipping( useClipping );
+};
+Demo.FloatableTest.prototype.centerView = function () {
+       var offset = ( this.outerSize - this.viewportSize ) / 2;
+       this.$body[ 0 ].scrollTop = offset;
+       // Different browsers count scrollLeft in RTL differently,
+       // see <https://github.com/othree/jquery.rtl-scroll-type>.
+       // This isn't correct for arbitrary offsets, but works for centering.
+       this.$body[ 0 ].scrollLeft = offset;
+       if ( this.$body[ 0 ].scrollLeft === 0 ) {
+               this.$body[ 0 ].scrollLeft = -offset;
+       }
+};
+Demo.FloatableTest.prototype.getReadyProcess = function () {
+       return new OO.ui.Process( function () {
+               var offset, side;
+               offset = ( this.outerSize - this.innerSize ) / 2;
+               side = this.getDir() === 'rtl' ? 'right' : 'left';
+               this.$floatableContainer.css( 'top', offset );
+               this.$floatableContainer.css( side, offset );
+
+               this.centerView();
+               this.selectWidget.selectItemByData( {
+                       horizontalPosition: 'start',
+                       verticalPosition: 'below'
+               } );
+
+               // Wait until the opening animation is over
+               setTimeout( function () {
+                       this.floatable.toggle( true );
+                       this.floatable.togglePositioning( true );
+                       this.floatable.toggleClipping( this.toggleClippingWidget.getValue() );
+               }.bind( this ), OO.ui.theme.getDialogTransitionDuration() );
+       }, this );
+};
+Demo.FloatableTest.prototype.getHoldProcess = function () {
+       return new OO.ui.Process( function () {
+               this.floatable.toggleClipping( false );
+               this.floatable.togglePositioning( false );
+               this.floatable.toggle( false );
+       }, this );
+};
+Demo.FloatableTest.prototype.getActionProcess = function ( action ) {
+       if ( action === 'center' ) {
+               return new OO.ui.Process( function () {
+                       this.centerView();
+               }, this );
+       }
+       return Demo.FloatableTest.parent.prototype.getActionProcess.call( this, action );
+};