wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-27 04:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add direction classes to Toolbar based on context

Browse source 
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:
Moriel Schottlender 2013-11-13 20:18:57 -08:00 committed by Roan Kattouw
parent 73198b52d0
commit 87fd3b7756
3 changed files with 143 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
modules/ve/ui/styles/ve.ui.Icons-raster.css
View file

@ -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);

49
modules/ve/ui/styles/ve.ui.Icons-vector.css
View file

@ -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);

47
modules/ve/ui/ve.ui.Toolbar.js
View file

@ -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 ) );
};