[#22870] - Add ability to switch off the animation of showons
- Fixed in Code Base
- 23 Nov 2018
- Medium
- Build: staging
- # 22870
- Diff
- regularlabs:patch-1
User tests: Successful: Unsuccessful:
Summary of Changes
To conditionally hide fields or content based on the values of other fields, you can add a showon="" attribute to fields in xml files.
However, this will always use a slideUp/slideDown animation.
There are cases where you do not want to animate the showing/hiding of your content or fields.
This patch adds the ability to switch off the animation by adding a classno-animation or no-animate to the field.
You can also add the class to the surrounding showon container, which can be helpful when creating your own via php.
Testing Instructions
For instance, you can test with the Joomla core configuration:
<field
name="page_heading"
type="text"
label="COM_MENUS_ITEM_FIELD_PAGE_HEADING_LABEL"
description="COM_MENUS_ITEM_FIELD_PAGE_HEADING_DESC"
default=""
showon="show_page_heading:1"
/>
And change that to:
<field
name="page_heading"
type="text"
label="COM_MENUS_ITEM_FIELD_PAGE_HEADING_LABEL"
description="COM_MENUS_ITEM_FIELD_PAGE_HEADING_DESC"
default=""
showon="show_page_heading:1"
class="no-animation"
/>
Now go to: administrator/index.php?option=com_config&view=component&component=com_menus and toggle the Show Page Heading setting.
Before the patch it should have the slide animation. After, it should not animate.
Documentation Changes Required
https://docs.joomla.org/Form_field
Optionally add a note somewhere that you can switch off the animation effect via the classname.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration com_config Layout Libraries JavaScript |
| Labels |
Added:
?
|
||
The slide animation is vertical.
There are cases when this messes up the layout during animation.
Especially when using custom fields that have different layouts than the standard label=>field.
Can you share an example?
With animation:
Without Animation:
Thanks
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
Also there are cases when you have a LOT of fields hiding/showing based on a single value.
And then animation can cause the page to react very slowly (especially on older browsers).
Also, visually, animation it is not always what you want.
For instance, when you want to toggle 2 fields (same label & options, just different field name) without the user seeing it is actually a different field.
For instance, an active and a readonly (disabled) version of the field.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
Any chance to offer more possibilities as value for this parameter? "none", "vertical", "horizontal", ...
@bembelimen
There is no ready-to-use horizontal slide effects in the jQuery version included in Joomla 3.
So I think it is beyond the scope of this PR to implement that.
Any reason why this isn't merged yet?
@regularlabs I guess because of
#22870 (comment)
No, because of:
#22912 (comment)
Honestly it will be ultra stupid to introduce an API change in 3.9 and remove it in 4.0...
It is solving an issue we have in Joomla 3.
If Joomla 4 solves that in another fashion (by having no animations at all), then fine.
Joomla 4 is changing behaviour anyway.
@regularlabs I think you miss my point, you can implement this without adding technical debt for J4 by using a class, eg no-animation. This will have minimal impact for J4, in contrary the introduction of another attribute if that needs to be removed in J4 brings a B/C break...
| Labels |
Added:
?
|
||
| Category | Administration com_config Layout Libraries JavaScript | ⇒ | Libraries JavaScript |
I totally agree with you!
I have changed the code, which means that only the cms.js file has now changed.
No php changes. Not API changes in the xml elements.
I also updated the description of the PR.
So I guess the RTC tag needs to get removed and we need to do testing again.
If it is better to trash this PR and create a new fresh one, let me know.
| Status | Ready to Commit | ⇒ | Pending |
| Labels | |||
tanking RTC off as requested.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
| Labels |
Removed:
?
|
||
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22870.
mbabker
- | Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-11-23 05:44:55 |
| Closed_By | ⇒ | mbabker | |
| Labels |
Added:
?
|
||
One thing I would have suggested in this is not to use toggle() as it was deprecated in 1.8 and remove in 1.9. The only reason it works is because you ship jquery-migrate, however there are some optimisation plugins that allow you to unset it from the document and thus toggle() will be undefined.
Should have used .css(...) instead.
The existing js code there was already using toggle(). This PR hasn't changed that.
It does what it says but I dont see the use case??