From 13665831eadbcac601a694451429ca8ec414605b Mon Sep 17 00:00:00 2001 From: zepumph Date: Mon, 5 Aug 2019 12:43:14 -0800 Subject: [PATCH] refactor icon creation in help dialog, https://github.com/phetsims/gravity-force-lab/issues/139 --- .../GravityForceLabKeyboardHelpContent.js | 94 ++++++++----------- 1 file changed, 38 insertions(+), 56 deletions(-) diff --git a/js/gravity-force-lab/view/GravityForceLabKeyboardHelpContent.js b/js/gravity-force-lab/view/GravityForceLabKeyboardHelpContent.js index aa45a83b..fe4be47b 100644 --- a/js/gravity-force-lab/view/GravityForceLabKeyboardHelpContent.js +++ b/js/gravity-force-lab/view/GravityForceLabKeyboardHelpContent.js @@ -55,74 +55,69 @@ define( require => { const jumpToMaximumMassDescriptionString = GravityForceLabA11yStrings.jumpToMaximumMassDescription.value; const jumpToMinimumMassDescriptionString = GravityForceLabA11yStrings.jumpToMinimumMassDescription.value; - // helper functions that return icons for the dialog - const ICON_CREATOR = { - home: () => { - return new HomeKeyNode(); - }, - end: () => { - return new EndKeyNode(); - }, - leftRight: () => { - return KeyboardHelpSection.leftRightArrowKeysRowIcon(); - }, - downOrLeft: () => { - return KeyboardHelpSection.iconOrIcon( new ArrowKeyNode( 'down' ), new ArrowKeyNode( 'left' ) ); - }, - upOrRight: () => { - return KeyboardHelpSection.iconOrIcon( new ArrowKeyNode( 'up' ), new ArrowKeyNode( 'right' ) ); - }, - pageUpPageDown: () => { - return KeyboardHelpSection.pageUpPageDownRowIcon(); - }, - shiftPlusArrows: () => { - return KeyboardHelpSection.shiftPlusIcon( KeyboardHelpSection.leftRightArrowKeysRowIcon() ); - }, - shiftPlusAllArrows: () => { - return KeyboardHelpSection.shiftPlusIcon( KeyboardHelpSection.arrowKeysRowIcon() ); - } - }; - class GravityForceLabKeyboardHelpContent extends TwoColumnKeyboardHelpContent { /** - * @param {Object} options + * @param {Object} [options] */ constructor( options ) { - options = _.extend( { // omit the "change mass in smaller steps" row when true isBasics: false }, options ); + const homeIcon = new HomeKeyNode(); + const endIcon = new EndKeyNode(); + const leftRightIcon = KeyboardHelpSection.leftRightArrowKeysRowIcon(); + const downOrLeftIcon = KeyboardHelpSection.iconOrIcon( new ArrowKeyNode( 'down' ), new ArrowKeyNode( 'left' ) ); + const upOrRightIcon = KeyboardHelpSection.iconOrIcon( new ArrowKeyNode( 'up' ), new ArrowKeyNode( 'right' ) ); + const pageUpPageDownIcon = KeyboardHelpSection.pageUpPageDownRowIcon(); + const shiftPlusArrowsIcon = KeyboardHelpSection.shiftPlusIcon( KeyboardHelpSection.leftRightArrowKeysRowIcon() ); + const shiftPlusAllArrowsIcon = KeyboardHelpSection.shiftPlusIcon( KeyboardHelpSection.arrowKeysRowIcon() ); // Mass movement help dialog section // move mass section - const moveMassRow = constructRow( moveSphereLabelString, moveSphereDescriptionString, 'leftRight' ); + const moveMassRow = KeyboardHelpSection.labelWithIcon( + moveSphereLabelString, leftRightIcon, moveSphereDescriptionString ); - const moveSmallStepsRow = constructRow( moveInSmallerStepsString, moveInSmallerStepsDescriptionString, 'shiftPlusArrows' ); + const moveSmallStepsRow = KeyboardHelpSection.labelWithIcon( + moveInSmallerStepsString, shiftPlusArrowsIcon, moveInSmallerStepsDescriptionString ); // 'move in larger steps' section - const moveLargeStepsRow = constructRow( moveInLargerStepsString, moveInLargerStepsDescriptionString, 'pageUpPageDown' ); + const moveLargeStepsRow = KeyboardHelpSection.labelWithIcon( + moveInLargerStepsString, pageUpPageDownIcon, moveInLargerStepsDescriptionString ); // 'jump to left' section - const jumpLeftRow = constructRow( jumpToLeftString, jumpToLeftDescriptionString, 'home' ); + const jumpLeftRow = KeyboardHelpSection.labelWithIcon( jumpToLeftString, homeIcon, jumpToLeftDescriptionString ); // 'jump to right' section - const jumpRightRow = constructRow( jumpToRightString, jumpToRightDescriptionString, 'end' ); + const jumpRightRow = KeyboardHelpSection.labelWithIcon( jumpToRightString, endIcon, jumpToRightDescriptionString ); const moveMassRows = [ moveMassRow, moveSmallStepsRow, moveLargeStepsRow, jumpLeftRow, jumpRightRow ]; const moveMassHelpSection = new KeyboardHelpSection( moveSpheresHeadingString, moveMassRows ); // Mass adjustment help section - const increaseMassRow = constructRow( increaseMassString, increaseMassDescriptionString, 'upOrRight' ); - const decreaseMassRow = constructRow( decreaseMassString, decreaseMassDescriptionString, 'downOrLeft' ); - const changeMassSmallStepsRow = constructRow( changeMassInSmallerStepsString, changeMassInSmallerStepsDescriptionString, 'shiftPlusAllArrows' ); - const changeMassLargeStepsRow = constructRow( changeMassInLargerStepsString, changeMassInLargerStepsDescriptionString, 'pageUpPageDown' ); - const jumpToMinMassRow = constructRow( jumpToMinimumMassString, jumpToMinimumMassDescriptionString, 'home' ); - const jumpToMaxMassRow = constructRow( jumpToMaximumMassString, jumpToMaximumMassDescriptionString, 'end' ); - - const adjustMassRows = [ increaseMassRow, decreaseMassRow, changeMassSmallStepsRow, changeMassLargeStepsRow, jumpToMinMassRow, jumpToMaxMassRow ]; + const increaseMassRow = KeyboardHelpSection.labelWithIcon( + increaseMassString, upOrRightIcon, increaseMassDescriptionString ); + const decreaseMassRow = KeyboardHelpSection.labelWithIcon( + decreaseMassString, downOrLeftIcon, decreaseMassDescriptionString ); + const changeMassSmallStepsRow = KeyboardHelpSection.labelWithIcon( + changeMassInSmallerStepsString, shiftPlusAllArrowsIcon, changeMassInSmallerStepsDescriptionString ); + const changeMassLargeStepsRow = KeyboardHelpSection.labelWithIcon( + changeMassInLargerStepsString, pageUpPageDownIcon, changeMassInLargerStepsDescriptionString ); + const jumpToMinMassRow = KeyboardHelpSection.labelWithIcon( + jumpToMinimumMassString, homeIcon, jumpToMinimumMassDescriptionString ); + const jumpToMaxMassRow = KeyboardHelpSection.labelWithIcon( + jumpToMaximumMassString, endIcon, jumpToMaximumMassDescriptionString ); + + const adjustMassRows = [ + increaseMassRow, + decreaseMassRow, + changeMassSmallStepsRow, + changeMassLargeStepsRow, + jumpToMinMassRow, + jumpToMaxMassRow + ]; // leave out row if option is supplied if ( options.isBasics ) { @@ -151,19 +146,6 @@ define( require => { } } - /** - * Construct a row for the help dialog, assembling a label with an icon using HelpSection. Usages will look like: - * constructRow( 'jump to the end', 'end' ); - * - * @param {string} labelString - the text label for the row (visual) - * @param {string} descriptionString - must be one of the keys in ICON_CREATOR - * @param {string} iconID - must be one of ICON_CREATOR keys, see that above - */ - const constructRow = ( labelString, descriptionString, iconID ) => { - const iconNode = ICON_CREATOR[ iconID ](); - return KeyboardHelpSection.labelWithIcon( labelString, iconNode, descriptionString ); - }; - /** * @param {Object} [options] * @constructor