[FW][FIX] slides: prevent the # anchors of the PDF controllers from triggering a scroll jump

PURPOSE

Currently, the PDF viewer is loaded from an iframe and the PDF controllers
contains empty anchor links. When the user clicks on one of these links,
the browsers based on Chromium will trigger a "scroll jump" and the iframe
will be placed at the top of the browser window.

When the PDF document is larger than the viewport, this behavior can be
quite annoying: The user will have to scroll the browser window to
see the controllers each time they click on a controller (-> link) as
(1) the controllers triggers a scroll jump and (2) the controllers are
below the document that does not fit entirely on screen. To avoid that,
we will add an event listener that returns false on each controller. The
controllers will then no longer trigger a scroll jump.

SPECS

- Add an event listener on the PDF controllers links to prevent a scroll jump.

LINKS

Task id: 2500574

closes odoo/odoo#73943

X-original-commit: 912acb73
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/website_slides/views/website_slides_templates_lesson_embed.xml

@@ -112,17 +112,26 @@
                                         </a>
                                     </div>
                                     <div class="col text-center">
-                                        <a id="first" href="#" class="text-decoration-none mr-1 mr-sm-2" title="First slide" role="button" aria-label="First slide"> <i class="fa fa-step-backward"/> </a>
-                                        <a id="previous" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"> <i class="fa fa-arrow-circle-left"/> </a>
-                                        <a id="next" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"> <i class="fa fa-arrow-circle-right"/> </a>
-                                        <a id="last" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"> <i class="fa fa-step-forward"/> </a>
+                                        <a id="first" href="#" onclick="return false;"
+                                           class="text-decoration-none mr-1 mr-sm-2" title="First slide"
+                                           role="button" aria-label="First slide"> <i class="fa fa-step-backward"/> </a>
+                                        <a id="previous" href="#" onclick="return false;"
+                                           class="text-decoration-none mx-1 mx-sm-2" title="Previous slide"
+                                           aria-label="Previous slide" role="button"> <i class="fa fa-arrow-circle-left"/> </a>
+                                        <a id="next" href="#" onclick="return false;"
+                                           class="text-decoration-none mx-1 mx-sm-2" title="Next slide"
+                                           aria-label="Next slide" role="button"> <i class="fa fa-arrow-circle-right"/> </a>
+                                        <a id="last" href="#" onclick="return false;"
+                                           class="text-decoration-none mx-1 mx-sm-2" title="Last slide"
+                                           aria-label="Last slide" role="button"> <i class="fa fa-step-forward"/> </a>
                                         <a t-if="slide.slide_resource_downloadable" id="download" t-attf-href="/web/content/slide.slide/#{slide.id}/datas?download=true"
                                            class="text-decoration-none ml-1 ml-sm-2" title="Download Content" role="img" aria-label="Download">
                                             <i class="fa fa-download" />
                                         </a>
                                     </div>                                    
                                     <div class="col-3 text-right flex-grow-0">
-                                        <a id="fullscreen" href="#" class="text-decoration-none ml-1 ml-sm-2"
+                                        <a id="fullscreen" href="#" onclick="return false;"
+                                           class="text-decoration-none ml-1 ml-sm-2"
                                            title="View fullscreen" role="img" aria-label="Fullscreen">
                                             <i class="fa fa-arrows-alt"/>
                                         </a>