Skip to content

Commit

Permalink
refactored direction detection code for better readability, fixed som…
Browse files Browse the repository at this point in the history 
…e code alignment issues
  • Loading branch information
@draganescu
draganescu committed Oct 28, 2019
1 parent fc41d32 commit acaad3b
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 52 deletions.
61 changes: 28 additions & 33 deletions packages/block-editor/src/components/block-mover/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,39 +51,34 @@ export class BlockMover extends Component {
return null;
}

const getArrowIcon = ( hdir ) => {
let arrow;
switch ( hdir ) {
case 'left':
arrow = isRTL ? rightArrow : leftArrow;
arrow = orientation === 'horizontal' ? arrow : upArrow;
break;

case 'right':
arrow = isRTL ? leftArrow : rightArrow;
arrow = orientation === 'horizontal' ? arrow : downArrow;
break;

default:
break;
const getArrowIcon = ( moveDirection ) => {
if ( moveDirection === 'up' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? rightArrow : leftArrow;
}
return upArrow;
} else if ( moveDirection === 'down' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? leftArrow : rightArrow;
}
return downArrow;
}
return arrow;
return null;
};

const getMovementDirection = ( mdir ) => {
switch ( mdir ) {
case 'left':
mdir = isRTL ? 'right' : mdir;
break;

case 'right':
mdir = isRTL ? 'left' : mdir;
break;

default:
break;
const getMovementDirection = ( moveDirection ) => {
if ( moveDirection === 'up' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? 'right' : 'left';
}
return 'up';
} else if ( moveDirection === 'down' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? 'left' : 'right';
}
return 'down';
}
return mdir;
return null;
};

// We emulate a disabled state because forcefully applying the `disabled`
Expand All @@ -95,9 +90,9 @@ export class BlockMover extends Component {
<IconButton
className="editor-block-mover__control block-editor-block-mover__control"
onClick={ isFirst ? null : onMoveUp }
icon={ getArrowIcon( 'left' ) }
icon={ getArrowIcon( 'up' ) }
// translators: %s: Horizontal direction of block movement ( left, right )
label={ orientation === 'horizontal' ? sprintf( __( 'Move %s' ), getMovementDirection( 'left' ) ) : __( 'Move up' ) }
label={ sprintf( __( 'Move %s' ), getMovementDirection( 'up' ) ) }
aria-describedby={ `block-editor-block-mover__up-description-${ instanceId }` }
aria-disabled={ isFirst }
onFocus={ this.onFocus }
Expand All @@ -115,9 +110,9 @@ export class BlockMover extends Component {
<IconButton
className="editor-block-mover__control block-editor-block-mover__control"
onClick={ isLast ? null : onMoveDown }
icon={ getArrowIcon( 'right' ) }
icon={ getArrowIcon( 'down' ) }
// translators: %s: Horizontal direction of block movement ( left, right )
label={ orientation === 'horizontal' ? sprintf( __( 'Move %s' ), getMovementDirection( 'right' ) ) : __( 'Move down' ) }
label={ sprintf( __( 'Move %s' ), getMovementDirection( 'down' ) ) }
aria-describedby={ `block-editor-block-mover__down-description-${ instanceId }` }
aria-disabled={ isLast }
onFocus={ this.onFocus }
Expand Down
38 changes: 19 additions & 19 deletions packages/block-editor/src/components/block-mover/mover-description.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,28 @@ import { __, _n, sprintf } from '@wordpress/i18n';
* @param {boolean} isLast This is the last block.
* @param {number} dir Direction of movement (> 0 is considered to be going
* down, < 0 is up).
* @param {string} orientation The orientation of the block movers, vertical or horizontal.
* @param {boolean} isRTL True if current writing system is right to left.
* @param {string} orientation The orientation of the block movers, vertical or
* horizontal.
* @param {boolean} isRTL True if current writing system is right to left.
*
* @return {string} Label for the block movement controls.
*/
export function getBlockMoverDescription( selectedCount, type, firstIndex, isFirst, isLast, dir, orientation, isRTL ) {
const position = ( firstIndex + 1 );

const getMovementDirection = ( mdir ) => {
switch ( mdir ) {
case 'left':
mdir = isRTL ? 'right' : mdir;
break;

case 'right':
mdir = isRTL ? 'left' : mdir;
break;

default:
break;
const getMovementDirection = ( moveDirection ) => {
if ( moveDirection === 'up' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? 'right' : 'left';
}
return 'up';
} else if ( moveDirection === 'down' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? 'left' : 'right';
}
return 'down';
}
return mdir;
return null;
};

if ( selectedCount > 1 ) {
Expand All @@ -54,7 +54,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d %3$s to position %4$d' ),
type,
position,
orientation === 'horizontal' ? getMovementDirection( 'right' ) : 'down',
getMovementDirection( 'down' ),
( position + 1 ),
);
}
Expand All @@ -65,7 +65,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
__( 'Block %1$s is at the end of the content and can’t be moved %2$s' ),
type,
orientation === 'horizontal' ? getMovementDirection( 'right' ) : 'down',
getMovementDirection( 'down' ),

);
}
Expand All @@ -77,7 +77,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d %3$s to position %4$d' ),
type,
position,
orientation === 'horizontal' ? getMovementDirection( 'left' ) : 'up',
getMovementDirection( 'up' ),
( position - 1 ),
);
}
Expand All @@ -88,7 +88,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
__( 'Block %1$s is at the beginning of the content and can’t be moved %2$s' ),
type,
orientation === 'horizontal' ? getMovementDirection( 'left' ) : 'up',
getMovementDirection( 'up' ),
);
}
}
Expand Down

0 comments on commit acaad3b

Please sign in to comment.