wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-28 00:00:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Local Overlay Stacks

Browse source 
After a spirited discussion, localOverlay is getting some children.

* localOverlayBlockers - UI elements that are meant to prevent
interaction with the element. This includes Phantoms and
Highlights.

*localOverlayControls - UI elements that are meant to be
interacted with in order to modify the element. This includes
resize handles and drag marker.

*localOverlayMenus - UI elements that should always position
above all other controls. This includes the context menu.

Bug: 50159
Change-Id: Ic69c2ad275389a31c9fbaf47f3665dcdbb7ac2af
This commit is contained in:
Christian Williams 2013-06-27 11:24:26 -07:00 committed by Trevor Parscal
parent efd5882f88
commit 68f635b482
6 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
modules/ve/ce/nodes/ve.ce.MWBlockImageNode.js
View file

@ -25,8 +25,8 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
// Mixin constructors
ve.ce.ProtectedNode.call( this );
ve.ce.FocusableNode.call( this );
ve.ce.ResizableNode.call( this );
ve.ce.RelocatableNode.call( this );
ve.ce.ResizableNode.call( this );
type = this.model.getAttribute( 'type' );
@ -92,10 +92,10 @@ ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ProtectedNode );
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.FocusableNode );
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ResizableNode );
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.RelocatableNode );
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ResizableNode );
/* Static Properties */
ve.ce.MWBlockImageNode.static.name = 'mwBlockImage';

9
modules/ve/ce/styles/ve.ce.Node.css
View file

@ -37,10 +37,6 @@
background: transparent;
}
.ve-ce-protectedNode {
z-index: 0;
}
.ve-ce-protectedNode-shield {
position: absolute !important;
top: 0;
@ -76,11 +72,6 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1; /* Position above RelocatableNode's relocatableMarker */
}
.ve-ce-resizableNode-handles-resizing {
z-index: 10000;
}
.ve-ce-resizableNode-handles div {

2
modules/ve/ce/ve.ce.RelocatableNode.js
View file

@ -48,7 +48,7 @@ ve.ce.RelocatableNode = function VeCeRelocatableNode() {
*/
ve.ce.RelocatableNode.prototype.onRelocatableFocus = function () {
this.setRelocatableMarkerSizeAndPosition();
this.$relocatableMarker.appendTo( this.root.getSurface().getSurface().$localOverlay );
this.$relocatableMarker.appendTo( this.root.getSurface().getSurface().$localOverlayControls );
};
/**

2
modules/ve/ce/ve.ce.ResizableNode.js
View file

@ -68,7 +68,7 @@ ve.ce.ResizableNode.prototype.onResizableFocus = function () {
'top': offset.top,
'left': offset.left
} )
.appendTo( this.root.getSurface().getSurface().$localOverlay );
.appendTo( this.root.getSurface().getSurface().$localOverlayControls );
this.$resizeHandles
.find( '.ve-ce-resizableNode-neHandle' )

4
modules/ve/ce/ve.ce.Surface.js
View file

@ -74,7 +74,7 @@ ve.ce.Surface = function VeCeSurface( model, surface, options ) {
// Add elements to the DOM
this.$.append( this.documentView.getDocumentNode().$, this.$pasteTarget );
this.surface.$localOverlay.append( this.$phantoms, this.$highlights );
this.surface.$localOverlayBlockers.append( this.$phantoms, this.$highlights );
};
/* Inheritance */
@ -1250,7 +1250,7 @@ ve.ce.Surface.prototype.handleDelete = function ( e, backspace ) {
if ( !rangeToRemove.isCollapsed() ) {
// If after processing removal transaction range is not collapsed it means that not
// everything got merged nicely (at this moment transaction processor is capable of merging
// nodes of the same type and at the same depth level only), so we process with another
// nodes of the same type and at the same depth level only), so we process with another
// merging that takes remaing data from "endNode" and inserts it at the end of "startNode",
// "endNode" or recrusivly its parent (if have only one child) gets removed.
endNode = this.documentView.getNodeFromOffset( rangeToRemove.end, false );

7
modules/ve/ui/ve.ui.Surface.js
View file

@ -25,6 +25,9 @@ ve.ui.Surface = function VeUiSurface( data, config ) {
// Properties
this.$globalOverlay = $( '<div>' );
this.$localOverlay = this.$$( '<div>' );
this.$localOverlayBlockers = this.$$( '<div>' );
this.$localOverlayControls = this.$$( '<div>' );
this.$localOverlayMenus = this.$$( '<div>' );
this.model = new ve.dm.Surface( new ve.dm.Document( data ) );
this.view = new ve.ce.Surface( this.model, this, { '$$': this.$$ } );
this.context = new ve.ui.Context( this, { '$$': this.$$ } );
@ -38,6 +41,10 @@ ve.ui.Surface = function VeUiSurface( data, config ) {
.append( this.view.$ );
this.$localOverlay
.addClass( 've-ui-surface-overlay ve-ui-surface-overlay-local' )
.append( this.$localOverlayBlockers )
.append( this.$localOverlayControls )
.append( this.$localOverlayMenus );
this.$localOverlayMenus
.append( this.context.$ );
this.$globalOverlay
.addClass( 've-ui-surface-overlay ve-ui-surface-overlay-global' )