Fix delay initialization options for customized JQuery UI menu widget

[scazz010]

Description

Documentation: http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/widgets/widget_menu.html

describes the ability to set the delay on the JQuery widget opening/closing with an option 'delay'.

However, in the code, no such option appears and two undocumented options that aren't used do appear.

This PR cleans up the unused variables and passes the delay parameter into JQuery menu widget so it is used.

Manual testing scenarios

• Navigate to the home page
• Hover over main navigation tab. Observe 300ms for widget menu to open/expand
• Edit vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml - change UL tag to be:

<ul data-mage-init='{"menu":{"delay": 800, "responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>

• Hover over main navigation tab. Observe 800ms delay for menu to open/expand

Contribution checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-cicd2]

All committers have signed the CLA.

[ihor-sviziev]

@scazz010 static test failed. Could you fix your code?

[scazz010]

Eeek, sorry! grunt static is clean again

[ihor-sviziev]

Original options that were removed still used on 104 and 108 lines in this file, so after removal them from options - they will be not defined. It looks like you've added regression. Could you check it?

[scazz010]

Hi Ihor,

You're 100% correct.

The hideDelay option is tied to the CSS animations to animate the menu in responsive mode. The hideDelay needs to be at least as long as the animation to hide the menu otherwise the menu toggle button appears during the transition. I guess this should be public as people may want to customize the css delay.

showDelay is just a pause between clicking the toggle menu button and the animation starting - I can't see any issues with it being 0 and I can't see a reason for a user wanting to pause for a long time before beginning that animation. I assume there's a device that has issues without the delay and that's why it's there. 42ms seems weirdly arbitrary to me - I just can't see a reason for anyone to want to change that value, but I guess we can't break the API by changing the functionality and hardcoding/setting it to private?

---

I've put the showDelay and hideDelay options back in and left my delay option too. I also removed a hardcoded value. I don't particularly like the naming - I would love to change showDelay and hideDelay to something like responsiveShowDelay and responsiveAnimationHideDelay but that would break the API and I guess the PR won't be accepted. I've kept mine as delay because that's what it's called inside jQuery and I think it makes the most sense.

Would love feedback,
Thanks
S

[omiroshnichenko]

@scazz010 Could you please sign CLA?

[scazz010]

@omiroshnichenko Signed!

[omiroshnichenko]

@scazz010 Looks like you made cherry-pick of commit that was made from this stemcellscarr account. Can you sign CLI from another account too?

[scazz010]

@omiroshnichenko done!