mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 04:06:51 +00:00
Add direction classes to Toolbar based on context
Add rtl/ltr-related classes to the toolbar based on cursor context, so certain icons can change based on inline and block directions. Change-Id: I1b6e450226bf8da820fb622f28c1c3062c534bb0
This commit is contained in:
parent
73198b52d0
commit
87fd3b7756
|
@ -4,6 +4,7 @@
|
|||
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
/*csslint duplicate-background-images:false */
|
||||
|
||||
.oo-ui-icon-bold-a {
|
||||
/* @embed */
|
||||
|
@ -65,11 +66,35 @@
|
|||
background-image: url(images/icons/bullet-list-ltr.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-bullet-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/bullet-list-rtl.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-bullet-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/bullet-list-ltr.png);
|
||||
}
|
||||
|
||||
.oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-ltr.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-rtl.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-ltr.png);
|
||||
}
|
||||
|
||||
.oo-ui-icon-italic-a {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/italic-a.png);
|
||||
|
@ -116,11 +141,35 @@
|
|||
background-image: url(images/icons/number-list-ltr.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-number-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/number-list-rtl.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-number-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/number-list-ltr.png);
|
||||
}
|
||||
|
||||
.oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-ltr.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-rtl.png);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-ltr.png);
|
||||
}
|
||||
|
||||
.oo-ui-icon-strikethrough-a {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/strikethrough-a.png);
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
/*csslint duplicate-background-images:false */
|
||||
|
||||
.oo-ui-icon-bold-a {
|
||||
/* @embed */
|
||||
|
@ -65,11 +66,35 @@
|
|||
background-image: url(images/icons/bullet-list-ltr.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-bullet-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/bullet-list-rtl.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-bullet-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/bullet-list-ltr.svg);
|
||||
}
|
||||
|
||||
.oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-ltr.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-rtl.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-indent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/indent-list-ltr.svg);
|
||||
}
|
||||
|
||||
.oo-ui-icon-italic-a {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/italic-a.svg);
|
||||
|
@ -116,11 +141,35 @@
|
|||
background-image: url(images/icons/number-list-ltr.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-number-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/number-list-rtl.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-number-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/number-list-ltr.svg);
|
||||
}
|
||||
|
||||
.oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-ltr.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-rtl .oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-rtl.svg);
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.ve-ui-dir-block-ltr .oo-ui-icon-outdent-list {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/outdent-list-ltr.svg);
|
||||
}
|
||||
|
||||
.oo-ui-icon-strikethrough-a {
|
||||
/* @embed */
|
||||
background-image: url(images/icons/strikethrough-a.svg);
|
||||
|
|
|
@ -49,7 +49,11 @@ ve.ui.Toolbar = function VeUiToolbar( surface, options ) {
|
|||
return toolbar.onSurfaceViewKeyUp.apply( toolbar, arguments );
|
||||
}
|
||||
};
|
||||
|
||||
// default directions:
|
||||
this.contextDirection = { 'inline': 'ltr', 'block': 'ltr' };
|
||||
this.$element
|
||||
.addClass( 've-ui-dir-inline-' + this.contextDirection.inline )
|
||||
.addClass( 've-ui-dir-block-' + this.contextDirection.block );
|
||||
// Events
|
||||
this.surface.getModel().connect( this, { 'contextChange': 'onContextChange' } );
|
||||
this.surface.connect( this, { 'addCommand': 'onSurfaceAddCommand' } );
|
||||
|
@ -151,8 +155,15 @@ ve.ui.Toolbar.prototype.onSurfaceViewKeyUp = function () {
|
|||
* @fires updateState
|
||||
*/
|
||||
ve.ui.Toolbar.prototype.onContextChange = function () {
|
||||
var i, len, leafNodes,
|
||||
var i, len, leafNodes, dirInline, dirBlock, fragmentAnnotation,
|
||||
currentNodes = {
|
||||
fragNodes: null,
|
||||
fragAnnotations: null,
|
||||
'dm': {},
|
||||
'ce': {}
|
||||
},
|
||||
fragment = this.surface.getModel().getFragment( null, false ),
|
||||
doc = this.surface.getView().getDocument(),
|
||||
nodes = [];
|
||||
|
||||
leafNodes = fragment.getLeafNodes();
|
||||
|
@ -161,6 +172,38 @@ ve.ui.Toolbar.prototype.onContextChange = function () {
|
|||
nodes.push( leafNodes[i].node );
|
||||
}
|
||||
}
|
||||
// Update context direction for button icons UI:
|
||||
|
||||
// block direction (direction of the current node)
|
||||
currentNodes.fragNodes = fragment.getCoveredNodes();
|
||||
if ( currentNodes.fragNodes.length > 1 ) {
|
||||
// selection of multiple nodes
|
||||
currentNodes.dm.block = fragment.getSiblingNodes()[0].node.parent;
|
||||
} else {
|
||||
// selection of a single node
|
||||
currentNodes.dm.block = currentNodes.fragNodes[0].node;
|
||||
}
|
||||
// get the direction of the block:
|
||||
currentNodes.ce.block = doc.getNodeFromOffset( currentNodes.dm.block.getRange().start );
|
||||
dirBlock = currentNodes.ce.block.$element.css( 'direction' );
|
||||
// by default, inline and block are the same, unless there's an inline-specific direction
|
||||
dirInline = dirBlock;
|
||||
// 'inline' direction is set by language annotation:
|
||||
fragmentAnnotation = fragment.getAnnotations();
|
||||
if ( fragmentAnnotation.hasAnnotationWithName( 'meta/language' ) ) {
|
||||
dirInline = fragmentAnnotation.getAnnotationsByName( 'meta/language' ).get( 0 ).getAttribute( 'dir' );
|
||||
}
|
||||
if ( dirInline !== this.contextDirection.inline ) {
|
||||
// remove previous class:
|
||||
this.$element.removeClass( 've-ui-dir-inline-rtl ve-ui-dir-inline-ltr' );
|
||||
this.$element.addClass( 've-ui-dir-inline-' + dirInline );
|
||||
this.contextDirection.inline = dirInline;
|
||||
}
|
||||
if ( dirBlock !== this.contextDirection.block ) {
|
||||
this.$element.removeClass( 've-ui-dir-block-rtl ve-ui-dir-block-ltr' );
|
||||
this.$element.addClass( 've-ui-dir-block-' + dirBlock );
|
||||
this.contextDirection.block = dirBlock;
|
||||
}
|
||||
this.emit( 'updateState', nodes, fragment.getAnnotations(), fragment.getAnnotations( true ) );
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue