mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-24 22:35:41 +00:00
Context module cleanup.
-Changed es class prefixes to ve. -Organized Context & Inspector construction. -Updated comments & Whitespace. Change-Id: I4a387621e5147e72d3869ff46eef4790091442c0
This commit is contained in:
Rob Moen
Trevor Parscal
parent
fcf4e53f14
commit
8e5b7fc5ce
|
|
@ -5,12 +5,12 @@
|
|||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
.es-contextView {
|
||||
.ve-ui-context {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.es-contextView-icon {
|
||||
.ve-ui-context-icon {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
width: 15px;
|
||||
|
|
@ -29,53 +29,53 @@
|
|||
z-index: 4;
|
||||
}
|
||||
|
||||
.es-contextView-position-start .es-contextView-icon {
|
||||
.ve-ui-context-position-start .ve-ui-context-icon {
|
||||
top: -12px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.es-contextView-position-end .es-contextView-icon {
|
||||
.ve-ui-context-position-end .ve-ui-context-icon {
|
||||
top: -6px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.es-contextView-position-above .es-contextView-icon {
|
||||
.ve-ui-context-position-above .ve-ui-context-icon {
|
||||
/* @embed */
|
||||
background-image: url(images/arrow-up.png);
|
||||
background-position: 50% 4px;
|
||||
}
|
||||
|
||||
.es-contextView-position-below .es-contextView-icon {
|
||||
.ve-ui-context-position-below .ve-ui-context-icon {
|
||||
/* @embed */
|
||||
background-image: url(images/arrow-down.png);
|
||||
background-position: 50% 5px;
|
||||
}
|
||||
.es-contextView-position-above .es-contextView-icon:hover,
|
||||
.es-contextView-position-below .es-contextView-icon:hover {
|
||||
.ve-ui-context-position-above .ve-ui-context-icon:hover,
|
||||
.ve-ui-context-position-below .ve-ui-context-icon:hover {
|
||||
border-color: #b3d6f6;
|
||||
}
|
||||
|
||||
.es-contextView-position-above .es-menuView {
|
||||
.ve-ui-context-position-above .ve-menuView {
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.es-contextView-position-below .es-menuView {
|
||||
.ve-ui-context-position-below .ve-menuView {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.es-contextView-inspectors {
|
||||
.ve-ui-context-inspectors {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.es-contextView-position-above .es-contextView-inspectors {
|
||||
.ve-ui-context-position-above .ve-ui-context-inspectors {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.es-contextView-position-below .es-contextView-inspectors {
|
||||
.ve-ui-context-position-below .ve-ui-context-inspectors {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.es-contextView-panels {
|
||||
.ve-ui-context-panels {
|
||||
position: absolute;
|
||||
border: solid 1px #ccc;
|
||||
-webkit-border-radius: 0.25em;
|
||||
|
|
@ -89,16 +89,16 @@
|
|||
padding: 0.33em 0;
|
||||
}
|
||||
|
||||
.es-contextView-panel {
|
||||
.ve-ui-context-panel {
|
||||
display: none;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.es-contextView-toolbar {
|
||||
.ve-ui-context-toolbar {
|
||||
padding: 0.33em 0.66em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.es-contextView .es-toolbarGroup {
|
||||
.ve-ui-context .es-toolbarGroup {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,18 +24,31 @@ ve.ui.Context = function ( surfaceView, $overlay ) {
|
|||
this.inspector = null;
|
||||
this.position = null;
|
||||
this.clicking = false;
|
||||
this.$ = $( '<div class="es-contextView"></div>' ).appendTo( $overlay || $( 'body' ) );
|
||||
this.$toolbar = $( '<div class="es-contextView-toolbar"></div>' );
|
||||
|
||||
// Create iframe which will contain context inspectors.
|
||||
this.setupInspectorFrame();
|
||||
// Default to body as parent.
|
||||
$overlay = $overlay || $( 'body' );
|
||||
|
||||
this.$icon = $( '<div class="es-contextView-icon"></div>' ).appendTo( this.$ );
|
||||
// Setup contextView
|
||||
this.$ = $( '<div>' ).prop( 'class', 've-ui-context' );
|
||||
$overlay.append( this.$ );
|
||||
|
||||
// Icon
|
||||
this.$icon = $( '<div>' )
|
||||
.prop( 'class' , 've-ui-context-icon' )
|
||||
.appendTo( this.$ );
|
||||
|
||||
// Toolbar
|
||||
this.$toolbar = $( '<div>' )
|
||||
.prop( 'class', 've-ui-context-toolbar');
|
||||
|
||||
// Toolbar view
|
||||
this.toolbarView = new ve.ui.Toolbar(
|
||||
this.$toolbar,
|
||||
this.surfaceView,
|
||||
[{ 'name': 'textStyle', 'items' : [ 'bold', 'italic', 'link', 'clear' ] }]
|
||||
);
|
||||
|
||||
// Context Menu
|
||||
this.menuView = new ve.ui.Menu( [
|
||||
// Example menu items
|
||||
{ 'name': 'tools', '$': this.$toolbar }
|
||||
|
|
@ -54,43 +67,39 @@ ve.ui.Context = function ( surfaceView, $overlay ) {
|
|||
'blur': ve.bind( this.onDocumentBlur, this )
|
||||
} );
|
||||
|
||||
// Intitialize link inspector
|
||||
this.addInspector( 'link', new ve.ui.LinkInspector( this.toolbarView, this ) );
|
||||
// Setup Inspectors.
|
||||
this.setupInspectorSpace();
|
||||
};
|
||||
|
||||
/* Methods */
|
||||
|
||||
ve.ui.Context.prototype.setupInspectorFrame = function () {
|
||||
ve.ui.Context.prototype.setupInspectorSpace = function () {
|
||||
var $styleLink;
|
||||
|
||||
// Inspector container
|
||||
this.$inspectors = $( '<div />' )
|
||||
.addClass( 'es-contextView-inspectors' )
|
||||
this.$inspectors = $( '<div>' )
|
||||
.prop( 'class', 've-ui-context-inspectors' )
|
||||
.appendTo( this.$ );
|
||||
|
||||
// Iframe overlay
|
||||
this.$iframeOverlay = $('<div />')
|
||||
.addClass( 've-iframe-overlay' )
|
||||
// Overlay in main document scope for positioning elements over iframe.
|
||||
this.$iframeOverlay = $( '<div>' )
|
||||
.prop( 'class', 've-iframe-overlay' )
|
||||
.appendTo( this.$inspectors );
|
||||
|
||||
// Create and append an iframe for inspectors.
|
||||
// Use of iframe is required to retain selection while inspector controls are focused.
|
||||
this.$inspectorFrame = $( '<iframe></iframe>' )
|
||||
.attr({
|
||||
'frameborder': '0'
|
||||
})
|
||||
.appendTo( this.$inspectors );
|
||||
// Create and append an iframe to contain inspectors.
|
||||
// NOTE: Inspectors are required to be inside the iframe to prevent loss of content selection.
|
||||
this.$inspectorFrame = $( '<iframe>' ).attr( 'frameborder', '0' ).appendTo( this.$inspectors );
|
||||
|
||||
// Stash iframe document reference to properly create & append elements.
|
||||
// Iframe document reference.
|
||||
this.inspectorDoc = this.$inspectorFrame.prop( 'contentWindow' ).document;
|
||||
|
||||
// Cross browser trick to append content to an iframe
|
||||
// Write a containing element to the iframe
|
||||
// Write a container element to the iframe.
|
||||
// NOTE: This is required for cross browser appending.
|
||||
this.inspectorDoc.write( '<div class="ve-iframe-wrapper"></div>' );
|
||||
this.inspectorDoc.close();
|
||||
this.$inspectorWrapper = $( this.inspectorDoc ).find( '.ve-iframe-wrapper' );
|
||||
|
||||
// Create style element in iframe document scope
|
||||
// Create iframe style element.
|
||||
$styleLink =
|
||||
$( '<link>', this.inspectorDoc )
|
||||
.attr( {
|
||||
|
|
@ -100,14 +109,17 @@ ve.ui.Context.prototype.setupInspectorFrame = function () {
|
|||
'href': ve.init.platform.getModulesUrl() + '/ve/ui/styles/ve.ui.Inspector.css'
|
||||
} );
|
||||
|
||||
// Append inspector styles to iframe head
|
||||
// Append style element to head.
|
||||
$( this.inspectorDoc ).find( 'head' ).append( $styleLink );
|
||||
|
||||
// Adjust iframe body styles.
|
||||
// Set iframe body styles.
|
||||
$( 'body', this.inspectorDoc ).css( {
|
||||
'padding': '0px 5px',
|
||||
'margin': 0
|
||||
} );
|
||||
|
||||
// Intitialize link inspector.
|
||||
this.addInspector( 'link', new ve.ui.LinkInspector( this.toolbarView, this ) );
|
||||
};
|
||||
|
||||
ve.ui.Context.prototype.onDocumentFocus = function () {
|
||||
|
|
@ -172,17 +184,17 @@ ve.ui.Context.prototype.set = function () {
|
|||
};
|
||||
|
||||
ve.ui.Context.prototype.positionIcon = function () {
|
||||
this.$.removeClass( 'es-contextView-position-start es-contextView-position-end' );
|
||||
this.$.removeClass( 've-ui-context-position-start ve-ui-context-position-end' );
|
||||
|
||||
var selection = this.surfaceView.model.getSelection(),
|
||||
selectionRect = this.surfaceView.getSelectionRect();
|
||||
|
||||
if ( selection.to > selection.from ) {
|
||||
this.position = new ve.Position( selectionRect.end.x, selectionRect.end.y );
|
||||
this.$.addClass( 'es-contextView-position-end' );
|
||||
this.$.addClass( 've-ui-context-position-end' );
|
||||
} else {
|
||||
this.position = new ve.Position( selectionRect.start.x, selectionRect.start.y );
|
||||
this.$.addClass( 'es-contextView-position-start' );
|
||||
this.$.addClass( 've-ui-context-position-start' );
|
||||
}
|
||||
|
||||
this.$.css( {
|
||||
|
|
@ -216,14 +228,14 @@ ve.ui.Context.prototype.positionOverlay = function ( $overlay ) {
|
|||
$overlay.css( 'left', overlayLeft );
|
||||
|
||||
// Position overlay on top or bottom depending on viewport
|
||||
this.$.removeClass( 'es-contextView-position-below es-contextView-position-above' );
|
||||
this.$.removeClass( 've-ui-context-position-below ve-ui-context-position-above' );
|
||||
if (
|
||||
selection.from < selection.to &&
|
||||
this.position.top + overlayHeight + ( overlayMargin * 2 ) < windowHeight + windowScrollTop
|
||||
) {
|
||||
this.$.addClass( 'es-contextView-position-below' );
|
||||
this.$.addClass( 've-ui-context-position-below' );
|
||||
} else {
|
||||
this.$.addClass( 'es-contextView-position-above' );
|
||||
this.$.addClass( 've-ui-context-position-above' );
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -282,9 +294,9 @@ ve.ui.Context.prototype.closeInspector = function ( accept ) {
|
|||
this.inspectors[this.inspector].close( accept );
|
||||
this.inspector = null;
|
||||
}
|
||||
this.$inspectors.css({
|
||||
this.$inspectors.css( {
|
||||
'visibility': 'hidden'
|
||||
});
|
||||
} );
|
||||
};
|
||||
|
||||
ve.ui.Context.prototype.getInspector = function ( name ) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue