-
- Downloads
[FIX] website, *: wait images when setting masonry images wall layout
*: web_editor During the masonry layout calculation of the images wall snippet, the image height is used to determine into which column each image is inserted. Their height is zero until they are actually loaded. Because of this, the column into which an image is inserted can be wrong. This becomes more obvious in 16.0 because since [1] the image selection is lost when moving it within an Image Wall because it is replaced by a clone when using masonry mode. This commit makes sure that the images are loaded before taking their height into account when building the masonry layout. This involves two changes: 1. By awaiting `wUtils.onceAllImagesLoaded(this.$target)` after the insertion of each cloned image, we are sure that the reached height of each column is available before deciding where to insert the next image. 2. Before re-selecting the previously selected image, we need to be sure that it is loaded. Therefore we keep track of the last masonry layout operation and await for it. This way, we rely on the await of the last image as described in point 1. Additionally, as of 16.0, there is a race condition with `snippet_option_update`: in some situations, `notify` is called before `snippet_option_update` is completed, and before the masonry layout is applied. To make sure it is completed, the whole notify is run within the mutex through a `snippet_edition_request` event. To uphold the stable policy, making `mode` async will only be done in master. In stable, a new `_modeWithImageWait` is added which is called only for the situations that causing an issue, and which enables the fix of the masonry layout. In 14.0, it is used when computing the layout from `start` and `addImages`. In 16.0, it is also used in `notify` when images are removed or moved around - because masonry clones the images. In master, it is always applied. Additionally, this commit also rounds the computed size of images inside the masonry layout calculations. Steps to reproduce: - Drop an Images Wall. - Add four images, the first one being taller than the others. => The fourth image sometimes appeared below the tall image. [1]: https://github.com/odoo/odoo/commit/0d43aec24baad6420e0fe150a9c19d33c0b74198 task-2990053 Part-of: odoo/odoo#124608
Showing
Loading
Please register or sign in to comment