After commit [1], the check that the target url is different from
the current page's url has been removed thus leading to error that anchor
link always scroll down to element that have data-anchor enabled.

Steps to reproduce (the easiest way):
- Install Website Blog
- Turn on customize comment on post
- Go incognito then access any blog post, scroll down and click the
`Sign in to leave a comment` button
- Holy, the page scrolls down to the discussion section but doesn't go
to the login page

[1]: https://github.com/odoo/odoo/commit/fb087dbec96f5e533d1fdd9c2b0c2e00296c83de



closes odoo/odoo#135620

Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>

Prior to this commit, when using the "Slide Hover" reveal effect on the
footer, Safari would glitch it scrolls and could result in unreadable
content.

This commit fixes this by a weird hack that seems to work. Adding an
element with a background-image and a background-attachment set to
fixed seems to resolve the issue.

task-3302302

closes odoo/odoo#122029

Signed-off-by: Dieleman Guillaume (gdi) <gdi@odoo.com>

When a sub-menu needs to be opened in the navbar, it sometimes gets
nested within the navbar itself, making a vertical scrollbar appear
instead of floating outside the navbar, above the top of the page.
This happens if the navbar was opened in small screen sizes using the
hamburger icon, then, after a rotation, the navbar is turned into its
fully expanded version.

This commit hides the hamburger menu if the collapse toggler becomes
`display: none`.

Steps to reproduce:
- Add a sub-menu nested under the "Home" menu.
- Open the developer tools, enable mobile view.
- Select "Surface Pro 7" (Vertical 912x1368 - use "Rotate" if needed).
- Open the menu with the hamburger icon.
- Click on the "Rotate" button.
- Open the sub-menu by clicking on "Home".

=> The menu was displayed within the navbar causing a vertical scrollbar
to appear.

task-3247552

closes odoo/odoo#117899

Signed-off-by: Colin Louis (loco) <loco@odoo.com>

Before this commit, links scrolling to an anchor with a special
character did not work and displayed a traceback. The issue was that to
check that the anchor is valid, we don't need to check that the anchor
is a valid url as we have been doing since these commits [1], [2]. But
we only need to check if the jQuery selector is valid to correctly
target the element to which the page must scroll.

Indeed, the anchor widget returns stuff like 'ok%C3%A9%25' when typing
'oké%' wich is not valid jQuery selector. It has to be encoded to
'#ok\\%C3\\%A9\\%25' to be valid and that's what this commit does.

We also changed the way to display a new anchor to the user in this
commit. Before, we showed the anchor unencoded in a notification and now
we show it encoded. That way, if the user copies the anchor from the
notification, it's the real anchor.

Also, this commit detect if the success URL of the redirect of a from is
the current page to perform a scroll to the anchor instead of a
redirect. To make this comparison, we needed to add the url code of the
language of the current page to the session info.

Also, before this commit, the page froze when we clicked on the "submit"
button of a form that redirected to an anchor that did not exist.

[1]: https://github.com/odoo/odoo/commit/0abfaeda96c2eaa868cc7fc5fa1926dfa90fc420
[2]: https://github.com/odoo/odoo/commit/b492bde6a121be1c15ed90ce0827fcfd72a12f5c



task-2172312

closes odoo/odoo#82059

Signed-off-by: Romain Derie (rde) <rde@odoo.com>

Steps to reproduce the bug:
- Go to the website and edit a page.
- Make sure there is enough content to be able to scroll the page.
- Go to the "Theme" tab and disable the "Show Header" option.
- Click on the footer and enable the "Scroll Top Button".
- Click on "Save".
=> Clicking on the "Scroll To Top" button does nothing.

The "Scroll To Top" button is an anchor with its `href` set to `#top`.
By disabling the "Show Header" option, the header is removed from the
DOM and there is no existing element with `id=top` anymore. To fix
this, the `scrollTo` function has been patched in order to be able to
receive selectors as arguments. In the '#top' and '#bottom' case, those
positions are known and always the same (either at the top of the
document or the bottom of it) so there is no need to have the header or
the footer present in the DOM in order to be able to scroll up to those
positions.

Now that the `scrollTo` function is able to scroll to the top or the
bottom of the page even without header or footer, those two positions
can always be suggested as internal link anchors during link edition.

opw-3133464

closes odoo/odoo#113117

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Before this commit "parallax" animation was not working in modals.

This commit adds a parameter to the animation effects to enable
animations (triggered by the scroll) in the modals.

Note that for the "Newsletter" popup we have hidden the "parallax"
options. To make them work, it would be necessary to review the
structure of the "Newsletter" popup so that the vertical scrollbar is in
the same location as the "s_popup" snippet (on the ".modal" element).

task-2971402

closes odoo/odoo#99894

Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

This commit mitigates an issue with shape elements sometimes having tiny
spacing on their top or bottom edge.

This issue is mainly on Chrome when the user has changed the page zoom.
When the page is zoomed the elements can have a width value with a
decimal part. Because of it, the size of the SVG background images are
not correctly rounded compared to their container and therefore leaves a
visible space.

Steps to reproduce the bug:

- On Chrome, add several shapes on a website page.
- Change the zoom of the page and change the window width.
- At some points, the gap will appear.

The least bad solution we found to fix this is to ensure that the width
of the shape elements is always as close to an integer as possible.

Reminder: several commits had attempted to fix this before ([1], [2],
[3], [4]). But that wasn't enough to stop it happening. Some shapes
still need to be fixed although that will likely be done in future
versions.

[1]: https://github.com/odoo/odoo/commit/c0f62593a4da37e8404dddc0a5762879a5ebbf7f
[2]: https://github.com/odoo/odoo/commit/ac82407b259eab929486bf0a333a48bc507efa60
[3]: https://github.com/odoo/odoo/commit/42b3ad10e0b32b7fc72f801e2c67d6baf938c566
[4]: https://github.com/odoo/odoo/commit/e386f318f5cff50901dba3db8a2587911ba02a6e

task-2824607
opw-3069213
opw-3057533

Part-of: odoo/odoo#107492

Before this commit, the buttons to scroll to the next element might not
work if the next element was invisible.
Steps to reproduce the bug fixed by this commit:

(Note that these steps are only reproducible from 15.0. We decided to
merge this fix in 14.0 to be custo-friendly)

- Install two languages on a website
- Drop a cover block (1), with a height of 100% and a scroll down button
- Drop a new block (2) only visible for language B below the block 1
- Drop a new block (3) visible for everyone below the block 2
- Save and go to the site in language A
- Click on the scroll down button

=> No scroll at all while the user expects to scroll to the block
visible to everyone (3). This commit fixes that by making the user
scroll down to see the next visible element.

opw-2967706

closes odoo/odoo#105334

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Before this commit, some images were never appearing on Chrome,
especially when using the 90% zoom.

Steps to reproduce (on a 1920x1080 screen and using Chrome):
1. Edit the homepage
2. Add a "Cover" block and setup a 50% min-height on it
3. Add 2 "Columns" blocks below the "Cover" block
4. Set the width of the first "Columns" snippet's first image to the
   recommended size (690px)
5. Save
6. As a public user, set the browser zoom to 90% and go to the page
   (you may need to reload the page again so images are in cache)

=> The first image of the second "Columns" block never appears.

opw-2731507

closes odoo/odoo#90905

Signed-off-by: Romain Derie (rde) <rde@odoo.com>

Commit [1] broke the building of iframes in existing databases.

[1]: https://github.com/odoo/odoo/commit/b9b29bac14242eb88fc83a1fe5ba2472b64c24ea



opw-2832238

closes odoo/odoo#89726

X-original-commit: fd2aade9
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

The autoplay option for youtube videos in a .media_iframe_video snippet
does not currently work on mobile devices. This happens because the
autoplay param in the url is only considered for desktop devices.

Mobile autoplay can be forced by using the youtube js api, in the same
way as it is already done for background videos. Therefore, the common
code is extracted into a mixin, extended by both widgets.

opw-2607308

closes odoo/odoo#89273

X-original-commit: b9b29bac
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

task-2376327

Before this commit, if you add a background video in a popup, the video
frame will not setup properly because the _adjustIframe function cannot
find wrapperWidth and its ratio.

After this commit, _adjustIframe will be called again once the popup
is opened.

task-2251203

Part-of: odoo/odoo#63634
Co-authored-by: qsm-odoo <qsm@odoo.com>

Before this commit, when a "100% height" snippet was set in a popup
snippet, it was still computed to take full-screen height minus the size
of the navbar.

Now, it will properly be full-height.

closes odoo/odoo#76897

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

*: web, website_livechat, website_sale_comparison

Before this commit, bottom fixed elements (e.g. the livechat button)
hid the buttons to go to the next step in website sale when these
buttons are located at the bottom of the page, on some screen sizes.

After this commit,

- A bottom fixed element is hidden if this element hides a button at
the bottom of the page.

- Bottom fixed elements are hidden if a modal is open
to prevent it to hide buttons or any important part of the modal.

task-2501400

closes odoo/odoo#69296

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

On events, or in every part of the website that was built without
sections, the scroll button of a dropped snippet was not effective.

This was because we were targeting the next section, which was not there
in the previous case. Yet, we want it to scroll to the next element,
even if it is not a section.

task-2566338

closes odoo/odoo#72647

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

The website scroll effects using the `AnimationEffect` Odoo API were not
working anymore if custom code enforces the html element as the
scrolling element. Indeed in that case the scroll event handlers were
now attached to the html element itself while it needs to be the window
in that case.

This may be something to fix at the source (the `getScrollingElement`
method). This will be checked later.

closes odoo/odoo#69083

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

For some strange reason, the footer slideout effect was not working on
Firefox anymore. The height of the footer is not understood by Firefox
sticky implementation which it seems to not understand because of the
combination of 3 items: the footer is the last :visible element in the
`#wrapwrap`, the `#wrapwrap` uses flex layout and the `#wrapwrap` is the
element with a scrollbar.

As neither of the last two items can be changed, this commit fixes the
problem by adding a pixel div element in the DOM after the footer on
page load, if the slideout effect is enabled. This is obviously not
ideal but solves the problem while waiting for another solution.

Part of https://github.com/odoo/odoo/pull/60271


task-2312878

closes odoo/odoo#60271

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Before this commit the height of a snippet with the full height option
enabled was not correctly updated.

task-2312878

closes odoo/odoo#58760

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

*: web, web_editor, portal, account, website_blog, website_forum

This is probably not ideal to move the scrolling behavior out of the
html element but this will be needed for the editor to not have a double
scrollbar on the right. This is actually also useful for the scrollbar
to appear under the purple odoo menu instead of its right.

This commit, if to be reverted in the future, however contains many
improvements to make the transition easier that should be kept: jQuery
and Odoo functions to be able to scrollTo a specific element, get the
top scrollable element, check if an element is scrollable, etc. Also,
some magic was done: if some code tries to scroll to a specific scroll
position via jQuery's scrollTop or animate functions on the html/body
element, those will still work as intended (obviously, using the new
utils to do that is however recommended).

This commit also reviews our scroll behaviors to make them more robust
and share the code.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

*: website_blog

This was fixed and rebroken quite a few times. Hopefully, with this
commit and the next ones, the feature will be more robust: when clicking
on a link anchor, the animation now considers the fixed header height if
any *even if the header becomes fixed during the animation*.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

*: website_blog

- The scroll button option is now again available for all snippets, not
  only when the height is forced to 50% or 100%. Indeed, nobody would
  think to change that option if the snippet is already naturally tall
  and you could well want that scroll button on small-height covers.

- The scroll button is now placed on top of the snippet content instead
  of below in its natural flow. This allows it to work with snippets
  like "Big Boxes" and actually prevent to miscenter the snippet content
  just by adding that scroll button.

- Review the option UI and allow to control the spacing around the
  scroll button.

- the "Big Boxes" snippet was at last adapted to work well with 50% and
  100% height options.

- The 100% height option has now associated JS so that the height is
  computed to use 100% minus the size of the header.

Note: this may be backported to 13.2 where the option was introduced and
where those improvements may appear essential for the feature to not be
considered as buggy.

Part of https://github.com/odoo/odoo/pull/57764
task-2224404

*: website_sale, website_sale_wishlist

Part of https://github.com/odoo/odoo/pull/56427


task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

Instead of two select:

Parallax: none/fixed/very slow/slow/...
Direction: Bottom to top/top to bottom

We now have:

Parallax: none/fixed/bottom to top/top to bottom
Intensity: slider

Part of https://github.com/odoo/odoo/pull/47313


task-46147

closes odoo/odoo#47313

Related: odoo/design-themes#335
Related: odoo/upgrade#1553
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Add a setting direction for the parallax. "Top to Bottom" or "Bottom to
top". The new one was actually a specific theme option that we lost
somewhere between Odoo 8.0 and Odoo 13.0. This is now standard.

Part of https://github.com/odoo/odoo/pull/47313
task-46147

*: web_editor, website_blog

Unfortunately, this feature revealed a new batch of flaws in the
editor widgets system so some hacks were made to make it work. We will
always have the time to improve the pure technical side later.

This commit also separates the notion of color filter from the notion
of parallax. A color filter can now be applied independantly, when
there is either a background image or a background video. Applying a
color filter on top of a background video is actually a new feature.
Applying a color filter on top of a background image is actually now
achievable by two different ways: this new color filter layer or by
applying the color transformation on the image itself via the related
option. Depending on the user case, both could make sense at the same
time, but more importantly: having a CSS color filter is useful for
using those for default Odoo content (e.g. like the current contact us
page where we use a cover banner with an image with a black filter on
top of it: doing that without CSS color filter would mean to alter the
image directly which would not be ok when the user changes the image).
Also, sometimes you want the unfiltered image on a page and the exact
same one but filtered on another (for example: forum images).

Note: this commit also "fixes" an issue: the optimization feature for
images when parallax was enabled was not available before.

Part of https://github.com/odoo/odoo/pull/47313
task-46147

closes odoo/odoo#55044

Related: odoo/enterprise#12064
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

Review the gallery snippet. It has been improved in multiple ways.
Added new options, etc.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952

*: web

Part of https://github.com/odoo/odoo/pull/49142


task-2229551

Co-authored-by: qsm-odoo <qsm@odoo.com>

Since the header effects are now done without duplicating the header
into a fixed element, link anchors towards it were not working anymore
as they could be redirected to the fixed-positioned header. This commit
solves the problem "generically" for all fixed elements (I am not sure
any link towards a fixed element except the header makes sense though).

closes odoo/odoo#53156

X-original-commit: 1a2827f80bd7a66d4190977b22d4bc5846737b08
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

When you click on an anchor link, this commit ensures that the scroll
is in the correct place if there are fixed menus on the page.

Part of https://github.com/odoo/odoo/pull/40690
task-1894456

*: website_blog, website_event

This commit adds a "Height" option to sections, allowing them to have a
minimum height of the user's choosing (either full screen height or half
screen height, similar to blog covers). Enabling the full screen option
also allows the user to add a "scroll down button" that will scroll down
to the next section, also similar to blog covers.

As such, the classes doing the corresponding things in website_blog and
website_event have been renamed to reuse the same code.

task-2155710

closes odoo/odoo#41623

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

*: web_editor, website_forum, website_mass_mailing, website_slides

This class no longer does anything.

Part of odoo/odoo#41561
task-2155808

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Issue

    - Download the customer db: stargue-inc
    - Go on the website in mobile mode

    Traceback & the second item in the carousel is not displayed.

Cause

    Traceback: we use `this.$iframe` without checking if it's defined
    Second item not displayed: the first video promise is overriden
    by the second video promise.

Solution

    Check if this.$iframe is defined and resolve the old promise
    instead of overriding it.

OPW-2152690

closes odoo/odoo#42139

X-original-commit: f5f569b4
Signed-off-by: Jason Van Malder <jvm-odoo@users.noreply.github.com>