mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-12 09:09:25 +00:00
Merge "New popup widget"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
ff38fcd4ef
|
|
@ -330,6 +330,7 @@ $wgResourceModules += array(
|
|||
|
||||
've/ui/widgets/ve.ui.LabeledWidget.js',
|
||||
've/ui/widgets/ve.ui.FlaggableWidget.js',
|
||||
've/ui/widgets/ve.ui.PopupWidget.js',
|
||||
've/ui/widgets/ve.ui.GroupWidget.js',
|
||||
've/ui/widgets/ve.ui.SelectWidget.js',
|
||||
've/ui/widgets/ve.ui.OptionWidget.js',
|
||||
|
|
|
|||
|
|
@ -211,6 +211,7 @@ $html = file_get_contents( $page );
|
|||
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.PopupWidget.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.GroupWidget.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.SelectWidget.js"></script>
|
||||
<script src="../../modules/ve/ui/widgets/ve.ui.OptionWidget.js"></script>
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@
|
|||
<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.PopupWidget.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.GroupWidget.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.SelectWidget.js"></script>
|
||||
<script src="../../ve/ui/widgets/ve.ui.OptionWidget.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,40 +10,6 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.ve-ui-context-callout {
|
||||
position: absolute;
|
||||
/* @embed */
|
||||
background-image: url(images/callout.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 15px;
|
||||
height: 8px;
|
||||
margin-left: -7px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.ve-ui-context-body {
|
||||
margin-top: 7px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 0.25em;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ve-ui-context-body-transition {
|
||||
-webkit-transition: width 100ms, height 100ms, left 100ms;
|
||||
-moz-transition: width 100ms, height 100ms, left 100ms;
|
||||
-ms-transition: width 100ms, height 100ms, left 100ms;
|
||||
-o-transition: width 100ms, height 100ms, left 100ms;
|
||||
transition: width 100ms, height 100ms, left 100ms;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-ms-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.ve-ui-context-inspectors, .ve-ui-context-menu {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -301,3 +301,39 @@
|
|||
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuItemWidget[rel=externalLink] {
|
||||
color: #0645AD;
|
||||
}
|
||||
|
||||
/* ve.ui.PopupWidget */
|
||||
|
||||
.ve-ui-popupWidget-callout {
|
||||
position: absolute;
|
||||
/* @embed */
|
||||
background-image: url(images/callout.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 15px;
|
||||
height: 8px;
|
||||
margin-left: -7px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.ve-ui-popupWidget-body {
|
||||
margin-top: 7px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 0.25em;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ve-ui-popupWidget-transitioning .ve-ui-popupWidget-body {
|
||||
-webkit-transition: width 100ms, height 100ms, left 100ms;
|
||||
-moz-transition: width 100ms, height 100ms, left 100ms;
|
||||
-ms-transition: width 100ms, height 100ms, left 100ms;
|
||||
-o-transition: width 100ms, height 100ms, left 100ms;
|
||||
transition: width 100ms, height 100ms, left 100ms;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-ms-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,21 +22,15 @@ ve.ui.Context = function VeUiContext( surface ) {
|
|||
this.selecting = false;
|
||||
this.selection = null;
|
||||
this.toolbar = null;
|
||||
this.inspectors = new ve.ui.WindowSet( surface, ve.ui.inspectorFactory );
|
||||
this.$ = $( '<div>' );
|
||||
this.$callout = $( '<div>' );
|
||||
this.$body = $( '<div>' );
|
||||
this.popup = new ve.ui.PopupWidget();
|
||||
this.$menu = $( '<div>' );
|
||||
this.inspectors = new ve.ui.WindowSet( surface, ve.ui.inspectorFactory );
|
||||
|
||||
// Initialization
|
||||
this.$.addClass( 've-ui-context' ).append( this.popup.$ );
|
||||
this.inspectors.$.addClass( 've-ui-context-inspectors' );
|
||||
this.$
|
||||
.addClass( 've-ui-context' )
|
||||
.append(
|
||||
this.$callout.addClass( 've-ui-context-callout' ),
|
||||
this.$body.addClass( 've-ui-context-body' )
|
||||
);
|
||||
this.$body.append(
|
||||
this.popup.$body.append(
|
||||
this.$menu.addClass( 've-ui-context-menu' ),
|
||||
this.inspectors.$.addClass( 've-ui-context-inspectors' )
|
||||
);
|
||||
|
|
@ -127,9 +121,7 @@ ve.ui.Context.prototype.onInspectorSetup = function () {
|
|||
*/
|
||||
ve.ui.Context.prototype.onInspectorOpen = function () {
|
||||
// Transition between menu and inspector
|
||||
this.$body.addClass( 've-ui-context-body-transition' );
|
||||
|
||||
this.show();
|
||||
this.show( true );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -140,14 +132,7 @@ ve.ui.Context.prototype.onInspectorOpen = function () {
|
|||
* @param {boolean} accept Changes have been accepted
|
||||
*/
|
||||
ve.ui.Context.prototype.onInspectorClose = function () {
|
||||
var $body = this.$body;
|
||||
|
||||
this.update();
|
||||
|
||||
// Disable transitioning after transition completes
|
||||
setTimeout( function () {
|
||||
$body.removeClass( 've-ui-context-body-transition' );
|
||||
}, 200 );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -184,11 +169,6 @@ ve.ui.Context.prototype.update = function () {
|
|||
selection = fragment.getRange(),
|
||||
inspector = this.inspectors.getCurrent();
|
||||
|
||||
// If the context about to be moved to a new location, don't transition it's size
|
||||
if ( this.selection && this.selection.end !== selection.end ) {
|
||||
this.$body.removeClass( 've-ui-context-body-transition' );
|
||||
}
|
||||
|
||||
if ( inspector && selection.equals( this.selection ) ) {
|
||||
// There's an inspector, and the selection hasn't changed, update the position
|
||||
this.show();
|
||||
|
|
@ -223,40 +203,22 @@ ve.ui.Context.prototype.update = function () {
|
|||
* @method
|
||||
* @chainable
|
||||
*/
|
||||
ve.ui.Context.prototype.updateDimensions = function () {
|
||||
var position, $container, width, height, bodyWidth, buffer, center, overlapRight, overlapLeft,
|
||||
ve.ui.Context.prototype.updateDimensions = function ( transition ) {
|
||||
var position, $container,
|
||||
inspector = this.inspectors.getCurrent();
|
||||
|
||||
// Get cursor position
|
||||
position = ve.ce.Surface.getSelectionRect().end;
|
||||
if ( position ) {
|
||||
// Get additional dimensions
|
||||
$container = inspector ? this.inspectors.$ : this.$menu;
|
||||
width = $container.outerWidth( true );
|
||||
height = $container.outerHeight( true );
|
||||
bodyWidth = $( 'body' ).width();
|
||||
buffer = ( width / 2 ) + 20;
|
||||
overlapRight = bodyWidth - ( position.x + buffer );
|
||||
overlapLeft = position.x - buffer;
|
||||
center = -( width / 2 );
|
||||
|
||||
// Prevent body from displaying off-screen
|
||||
if ( overlapRight < 0 ) {
|
||||
center += overlapRight;
|
||||
} else if ( overlapLeft < 0 ) {
|
||||
center -= overlapLeft;
|
||||
}
|
||||
|
||||
// Move to just below the cursor
|
||||
this.$.css( { 'left': position.x, 'width': width, 'top': position.y } );
|
||||
|
||||
if ( !this.visible ) {
|
||||
this.$body
|
||||
.css( { 'width': 0, 'height': 0, 'left': 0 } )
|
||||
.addClass( 've-ui-context-body-transition' );
|
||||
}
|
||||
|
||||
this.$body.css( { 'left': center, 'width': width, 'height': height } );
|
||||
this.$.css( { 'left': position.x, 'top': position.y } );
|
||||
this.popup.display(
|
||||
position.x,
|
||||
position.y,
|
||||
$container.outerWidth( true ),
|
||||
$container.outerHeight( true ),
|
||||
transition
|
||||
);
|
||||
}
|
||||
|
||||
return this;
|
||||
|
|
@ -268,7 +230,7 @@ ve.ui.Context.prototype.updateDimensions = function () {
|
|||
* @method
|
||||
* @chainable
|
||||
*/
|
||||
ve.ui.Context.prototype.show = function () {
|
||||
ve.ui.Context.prototype.show = function ( transition ) {
|
||||
var inspector = this.inspectors.getCurrent();
|
||||
|
||||
if ( !this.showing ) {
|
||||
|
|
@ -284,7 +246,7 @@ ve.ui.Context.prototype.show = function () {
|
|||
// Update size and fade the inspector in after animation is complete
|
||||
setTimeout( ve.bind( function () {
|
||||
inspector.fitHeightToContents();
|
||||
this.updateDimensions();
|
||||
this.updateDimensions( transition );
|
||||
inspector.$.css( 'opacity', 1 );
|
||||
}, this ), 200 );
|
||||
} else {
|
||||
|
|
@ -292,7 +254,7 @@ ve.ui.Context.prototype.show = function () {
|
|||
this.$menu.show();
|
||||
}
|
||||
|
||||
this.updateDimensions();
|
||||
this.updateDimensions( transition );
|
||||
|
||||
this.visible = true;
|
||||
this.showing = false;
|
||||
|
|
|
|||
107
modules/ve/ui/widgets/ve.ui.PopupWidget.js
Normal file
107
modules/ve/ui/widgets/ve.ui.PopupWidget.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
/*!
|
||||
* VisualEditor UserInterface PopupWidget class.
|
||||
*
|
||||
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates an ve.ui.PopupWidget object.
|
||||
*
|
||||
* @class
|
||||
* @extends ve.ui.Widget
|
||||
*
|
||||
* @constructor
|
||||
* @param {Object} [config] Config options
|
||||
*/
|
||||
ve.ui.PopupWidget = function VeUiPopupWidget( config ) {
|
||||
// Parent constructor
|
||||
ve.ui.Widget.call( this, config );
|
||||
|
||||
// Properties
|
||||
this.visible = false;
|
||||
this.$callout = $( '<div>' );
|
||||
this.$body = $( '<div>' );
|
||||
this.transitionTimeout = null;
|
||||
|
||||
// Initialization
|
||||
this.$
|
||||
.addClass( 've-ui-popupWidget' )
|
||||
.append(
|
||||
this.$callout.addClass( 've-ui-popupWidget-callout' ),
|
||||
this.$body.addClass( 've-ui-popupWidget-body' )
|
||||
);
|
||||
};
|
||||
|
||||
/* Inheritance */
|
||||
|
||||
ve.inheritClass( ve.ui.PopupWidget, ve.ui.Widget );
|
||||
|
||||
/* Methods */
|
||||
|
||||
/**
|
||||
* Show the context.
|
||||
*
|
||||
* @method
|
||||
* @chainable
|
||||
*/
|
||||
ve.ui.PopupWidget.prototype.show = function () {
|
||||
this.$.show();
|
||||
this.visible = true;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the context.
|
||||
*
|
||||
* @method
|
||||
* @chainable
|
||||
*/
|
||||
ve.ui.PopupWidget.prototype.hide = function () {
|
||||
this.$.hide();
|
||||
this.visible = false;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the position and size.
|
||||
*
|
||||
* @method
|
||||
* @chainable
|
||||
*/
|
||||
ve.ui.PopupWidget.prototype.display = function ( x, y, width, height, transition ) {
|
||||
var buffer = ( width / 2 ) + 20,
|
||||
center = -( width / 2 ),
|
||||
overlapRight = this.$$( 'body' ).width() - ( x + buffer ),
|
||||
overlapLeft = x - buffer;
|
||||
|
||||
// Prevent viewport clipping
|
||||
if ( overlapRight < 0 ) {
|
||||
center += overlapRight;
|
||||
} else if ( overlapLeft < 0 ) {
|
||||
center -= overlapLeft;
|
||||
}
|
||||
|
||||
// Prevent transition from being interrupted
|
||||
clearTimeout( this.transitionTimeout );
|
||||
if ( transition ) {
|
||||
// Enable transition
|
||||
this.$.addClass( 've-ui-popupWidget-transitioning' );
|
||||
// Prevent transitioning after transition is complete
|
||||
this.transitionTimeout = setTimeout( ve.bind( function () {
|
||||
this.$.removeClass( 've-ui-popupWidget-transitioning' );
|
||||
}, this ), 200 );
|
||||
} else {
|
||||
// Prevent transitioning immediately
|
||||
this.$.removeClass( 've-ui-popupWidget-transitioning' );
|
||||
}
|
||||
|
||||
// Position body relative to anchor and adjust size
|
||||
this.$body.css( {
|
||||
'left': center, 'width': width, 'height': height === undefined ? 'auto' : height
|
||||
} );
|
||||
|
||||
return this;
|
||||
};
|
||||
Loading…
Reference in a new issue