1 Demo.FloatableTest = function DemoFloatableTest( config ) {
3 Demo.FloatableTest.parent.call( this, config );
5 // Must be equal to dialog width and height
6 this.viewportSize = 500;
7 // Width and height of scrollable area
9 // Width and height of scrollable container
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' }
18 Demo.FloatableTest.prototype.getBodyHeight = function () {
19 return this.viewportSize;
21 Demo.FloatableTest.prototype.initialize = function () {
22 Demo.FloatableTest.parent.prototype.initialize.apply( this, arguments );
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 } );
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 );
33 this.floatable.$element.addClass( 'demo-floatableTest-floatable' );
34 this.$floatableContainer.addClass( 'demo-floatableTest-container' );
36 this.selectWidget.connect( this, { select: 'onSelectPosition' } );
37 this.toggleOverlayWidget.connect( this, { change: 'onToggleOverlay' } );
38 this.toggleClippingWidget.connect( this, { change: 'onToggleClipping' } );
40 this.fieldset = new OO.ui.FieldsetLayout( {
42 new OO.ui.FieldLayout( this.selectWidget, {
44 label: 'Floatable position'
46 new OO.ui.FieldLayout( this.toggleClippingWidget, {
48 label: 'Enable clipping'
50 new OO.ui.FieldLayout( this.toggleOverlayWidget, {
58 this.$container.append(
59 this.$floatableContainer.append( this.fieldset.$element )
62 this.$overlay.append( this.floatable.$element );
64 Demo.FloatableTest.prototype.onSelectPosition = function ( option ) {
65 this.floatable.setHorizontalPosition( option.getData().horizontalPosition );
66 this.floatable.setVerticalPosition( option.getData().verticalPosition );
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() );
75 Demo.FloatableTest.prototype.onToggleClipping = function ( useClipping ) {
76 this.floatable.toggleClipping( useClipping );
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;
89 Demo.FloatableTest.prototype.getReadyProcess = function () {
90 return new OO.ui.Process( function () {
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 );
98 this.selectWidget.selectItemByData( {
99 horizontalPosition: 'start',
100 verticalPosition: 'below'
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() );
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 );
118 Demo.FloatableTest.prototype.getActionProcess = function ( action ) {
119 if ( action === 'center' ) {
120 return new OO.ui.Process( function () {
124 return Demo.FloatableTest.parent.prototype.getActionProcess.call( this, action );